Playlist support in watch page

8 files changed, 364 insertions, 4 deletions

diff --git a/client/src/app/shared/images/global-icon.component.ts b/client/src/app/shared/images/global-icon.component.ts
index 093e88033..3fa6fea96 100644
--- a/client/src/app/shared/images/global-icon.component.ts
+++ b/client/src/app/shared/images/global-icon.component.ts
@@ -27,7 +27,8 @@ const icons = {
   'more-vertical': require('../../../assets/images/global/more-vertical.html'),
   'share': require('../../../assets/images/video/share.html'),
   'upload': require('../../../assets/images/video/upload.html'),
-  'playlist-add': require('../../../assets/images/video/playlist-add.html')
+  'playlist-add': require('../../../assets/images/video/playlist-add.html'),
+  'play': require('../../../assets/images/global/play.html')
 }
 
 export type GlobalIconName = keyof typeof icons
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index 05da0d829..3647fc786 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -77,6 +77,7 @@ import { GlobalIconComponent } from '@app/shared/images/global-icon.component'
 import { VideoPlaylistMiniatureComponent } from '@app/shared/video-playlist/video-playlist-miniature.component'
 import { VideoAddToPlaylistComponent } from '@app/shared/video-playlist/video-add-to-playlist.component'
 import { TimestampInputComponent } from '@app/shared/forms/timestamp-input.component'
+import { VideoPlaylistElementMiniatureComponent } from '@app/shared/video-playlist/video-playlist-element-miniature.component'
 
 @NgModule({
   imports: [
@@ -105,6 +106,7 @@ import { TimestampInputComponent } from '@app/shared/forms/timestamp-input.compo
     VideoMiniatureComponent,
     VideoPlaylistMiniatureComponent,
     VideoAddToPlaylistComponent,
+    VideoPlaylistElementMiniatureComponent,
 
     FeedComponent,
 
@@ -163,6 +165,7 @@ import { TimestampInputComponent } from '@app/shared/forms/timestamp-input.compo
     VideoMiniatureComponent,
     VideoPlaylistMiniatureComponent,
     VideoAddToPlaylistComponent,
+    VideoPlaylistElementMiniatureComponent,
 
     FeedComponent,
 
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html
new file mode 100644
index 000000000..1f178675f
--- /dev/null
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html
@@ -0,0 +1,73 @@
+<div class="video" [ngClass]="{ playing: playing }">
+  <a [routerLink]="buildRouterLink()" [queryParams]="buildRouterQuery()">
+    <div class="position">
+      <my-global-icon *ngIf="playing" iconName="play"></my-global-icon>
+      <ng-container *ngIf="!playing">{{ video.playlistElement.position }}</ng-container>
+    </div>
+
+    <my-video-thumbnail
+      [video]="video" [nsfw]="isVideoBlur(video)"
+      [routerLink]="buildRouterLink()" [queryParams]="buildRouterQuery()"
+    ></my-video-thumbnail>
+
+    <div class="video-info">
+      <a tabindex="-1" class="video-info-name"
+         [routerLink]="buildRouterLink()" [queryParams]="buildRouterQuery()"
+         [attr.title]="video.name"
+      >{{ video.name }}</a>
+
+      <a *ngIf="accountLink" tabindex="-1" class="video-info-account" [routerLink]="[ '/accounts', video.byAccount ]">{{ video.byAccount }}</a>
+      <span *ngIf="!accountLink" tabindex="-1" class="video-info-account">{{ video.byAccount }}</span>
+
+      <span tabindex="-1" class="video-info-timestamp">{{ formatTimestamp(video)}}</span>
+    </div>
+  </a>
+
+  <div *ngIf="owned" class="more" ngbDropdown #moreDropdown="ngbDropdown" placement="bottom-right" (openChange)="onDropdownOpenChange()"
+       autoClose="outside">
+    <my-global-icon iconName="more-vertical" ngbDropdownToggle role="button" class="icon-more" (click)="$event.preventDefault()"></my-global-icon>
+
+    <div ngbDropdownMenu>
+      <div class="dropdown-item" (click)="toggleDisplayTimestampsOptions($event, video)">
+        <my-global-icon iconName="edit"></my-global-icon>
+        <ng-container i18n>Edit starts/stops at</ng-container>
+      </div>
+
+      <div class="timestamp-options" *ngIf="displayTimestampOptions">
+        <div>
+          <my-peertube-checkbox
+            inputName="startAt" [(ngModel)]="timestampOptions.startTimestampEnabled"
+            i18n-labelText labelText="Start at"
+          ></my-peertube-checkbox>
+
+          <my-timestamp-input
+            [timestamp]="timestampOptions.startTimestamp"
+            [maxTimestamp]="video.duration"
+            [disabled]="!timestampOptions.startTimestampEnabled"
+            [(ngModel)]="timestampOptions.startTimestamp"
+          ></my-timestamp-input>
+        </div>
+
+        <div>
+          <my-peertube-checkbox
+            inputName="stopAt" [(ngModel)]="timestampOptions.stopTimestampEnabled"
+            i18n-labelText labelText="Stop at"
+          ></my-peertube-checkbox>
+
+          <my-timestamp-input
+            [timestamp]="timestampOptions.stopTimestamp"
+            [maxTimestamp]="video.duration"
+            [disabled]="!timestampOptions.stopTimestampEnabled"
+            [(ngModel)]="timestampOptions.stopTimestamp"
+          ></my-timestamp-input>
+        </div>
+
+        <input type="submit" i18n-value value="Save" (click)="updateTimestamps(video)">
+      </div>
+
+      <span class="dropdown-item" (click)="removeFromPlaylist(video)">
+            <my-global-icon iconName="delete"></my-global-icon> <ng-container i18n>Delete from {{playlist?.displayName}}</ng-container>
+          </span>
+    </div>
+  </div>
+</div>
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
new file mode 100644
index 000000000..eb869f69a
--- /dev/null
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
@@ -0,0 +1,124 @@
+@import '_variables';
+@import '_mixins';
+@import '_miniature';
+
+.video {
+  display: flex;
+  align-items: center;
+  background-color: var(--mainBackgroundColor);
+  padding: 10px;
+  border-bottom: 1px solid $separator-border-color;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+
+    .more {
+      display: block;
+    }
+  }
+
+  &.playing {
+    background-color: rgba(0, 0, 0, 0.02);
+  }
+
+  a {
+    @include disable-default-a-behaviour;
+
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    flex-grow: 1;
+
+    .position {
+      font-weight: $font-semibold;
+      margin-right: 10px;
+      color: $grey-foreground-color;
+      min-width: 20px;
+
+      my-global-icon {
+        @include apply-svg-color($grey-foreground-color);
+
+        width: 17px;
+        position: relative;
+        left: -2px;
+      }
+    }
+
+    my-video-thumbnail {
+      @include thumbnail-size-component(130px, 72px);
+
+      display: flex; // Avoids an issue with line-height that adds space below the element
+      margin-right: 10px;
+    }
+
+    .video-info {
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+
+      a {
+        color: var(--mainForegroundColor);
+        width: fit-content;
+
+        &:hover {
+          text-decoration: underline !important;
+        }
+      }
+
+      .video-info-name {
+        font-size: 18px;
+        font-weight: $font-semibold;
+
+        @include ellipsis;
+      }
+
+      .video-info-account, .video-info-timestamp {
+        color: $grey-foreground-color;
+      }
+    }
+  }
+
+  .more {
+    justify-self: flex-end;
+    margin-left: auto;
+    cursor: pointer;
+    display: none;
+
+    &.show {
+      display: block;
+    }
+
+    .icon-more {
+      @include apply-svg-color($grey-foreground-color);
+
+      display: flex;
+
+      &::after {
+        border: none;
+      }
+    }
+
+    .dropdown-item {
+      @include dropdown-with-icon-item;
+    }
+
+    .timestamp-options {
+      padding-top: 0;
+      padding-left: 35px;
+      margin-bottom: 15px;
+
+      > div {
+        display: flex;
+        align-items: center;
+      }
+
+      input {
+        @include peertube-button;
+        @include orange-button;
+
+        margin-top: 10px;
+      }
+    }
+  }
+}
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
new file mode 100644
index 000000000..c0cfd855d
--- /dev/null
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
@@ -0,0 +1,149 @@
+import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core'
+import { Video } from '@app/shared/video/video.model'
+import { VideoPlaylistElementUpdate } from '@shared/models'
+import { AuthService, ConfirmService, Notifier, ServerService } from '@app/core'
+import { ActivatedRoute } from '@angular/router'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { VideoService } from '@app/shared/video/video.service'
+import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
+import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
+import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
+import { secondsToTime } from '../../../assets/player/utils'
+
+@Component({
+  selector: 'my-video-playlist-element-miniature',
+  styleUrls: [ './video-playlist-element-miniature.component.scss' ],
+  templateUrl: './video-playlist-element-miniature.component.html'
+})
+export class VideoPlaylistElementMiniatureComponent {
+  @ViewChild('moreDropdown') moreDropdown: NgbDropdown
+
+  @Input() playlist: VideoPlaylist
+  @Input() video: Video
+  @Input() owned = false
+  @Input() playing = false
+  @Input() rowLink = false
+  @Input() accountLink = true
+
+  @Output() elementRemoved = new EventEmitter<Video>()
+
+  displayTimestampOptions = false
+
+  timestampOptions: {
+    startTimestampEnabled: boolean
+    startTimestamp: number
+    stopTimestampEnabled: boolean
+    stopTimestamp: number
+  } = {} as any
+
+  constructor (
+    private authService: AuthService,
+    private serverService: ServerService,
+    private notifier: Notifier,
+    private confirmService: ConfirmService,
+    private route: ActivatedRoute,
+    private i18n: I18n,
+    private videoService: VideoService,
+    private videoPlaylistService: VideoPlaylistService
+  ) {}
+
+  buildRouterLink () {
+    if (!this.playlist) return null
+
+    return [ '/videos/watch/playlist', this.playlist.uuid ]
+  }
+
+  buildRouterQuery () {
+    if (!this.video) return {}
+
+    return {
+      videoId: this.video.uuid,
+      start: this.video.playlistElement.startTimestamp,
+      stop: this.video.playlistElement.stopTimestamp
+    }
+  }
+
+  isVideoBlur (video: Video) {
+    return video.isVideoNSFWForUser(this.authService.getUser(), this.serverService.getConfig())
+  }
+
+  removeFromPlaylist (video: Video) {
+    this.videoPlaylistService.removeVideoFromPlaylist(this.playlist.id, video.id)
+        .subscribe(
+          () => {
+            this.notifier.success(this.i18n('Video removed from {{name}}', { name: this.playlist.displayName }))
+
+            this.elementRemoved.emit(this.video)
+          },
+
+          err => this.notifier.error(err.message)
+        )
+
+    this.moreDropdown.close()
+  }
+
+  updateTimestamps (video: Video) {
+    const body: VideoPlaylistElementUpdate = {}
+
+    body.startTimestamp = this.timestampOptions.startTimestampEnabled ? this.timestampOptions.startTimestamp : null
+    body.stopTimestamp = this.timestampOptions.stopTimestampEnabled ? this.timestampOptions.stopTimestamp : null
+
+    this.videoPlaylistService.updateVideoOfPlaylist(this.playlist.id, video.id, body)
+        .subscribe(
+          () => {
+            this.notifier.success(this.i18n('Timestamps updated'))
+
+            video.playlistElement.startTimestamp = body.startTimestamp
+            video.playlistElement.stopTimestamp = body.stopTimestamp
+          },
+
+          err => this.notifier.error(err.message)
+        )
+
+    this.moreDropdown.close()
+  }
+
+  formatTimestamp (video: Video) {
+    const start = video.playlistElement.startTimestamp
+    const stop = video.playlistElement.stopTimestamp
+
+    const startFormatted = secondsToTime(start, true, ':')
+    const stopFormatted = secondsToTime(stop, true, ':')
+
+    if (start === null && stop === null) return ''
+
+    if (start !== null && stop === null) return this.i18n('Starts at ') + startFormatted
+    if (start === null && stop !== null) return this.i18n('Stops at ') + stopFormatted
+
+    return this.i18n('Starts at ') + startFormatted + this.i18n(' and stops at ') + stopFormatted
+  }
+
+  onDropdownOpenChange () {
+    this.displayTimestampOptions = false
+  }
+
+  toggleDisplayTimestampsOptions (event: Event, video: Video) {
+    event.preventDefault()
+
+    this.displayTimestampOptions = !this.displayTimestampOptions
+
+    if (this.displayTimestampOptions === true) {
+      this.timestampOptions = {
+        startTimestampEnabled: false,
+        stopTimestampEnabled: false,
+        startTimestamp: 0,
+        stopTimestamp: video.duration
+      }
+
+      if (video.playlistElement.startTimestamp) {
+        this.timestampOptions.startTimestampEnabled = true
+        this.timestampOptions.startTimestamp = video.playlistElement.startTimestamp
+      }
+
+      if (video.playlistElement.stopTimestamp) {
+        this.timestampOptions.stopTimestampEnabled = true
+        this.timestampOptions.stopTimestamp = video.playlistElement.stopTimestamp
+      }
+    }
+  }
+}
diff --git a/client/src/app/shared/video/infinite-scroller.directive.ts b/client/src/app/shared/video/infinite-scroller.directive.ts
index a02e9444a..186597a3a 100644
--- a/client/src/app/shared/video/infinite-scroller.directive.ts
+++ b/client/src/app/shared/video/infinite-scroller.directive.ts
@@ -11,6 +11,7 @@ export class InfiniteScrollerDirective implements OnInit, OnDestroy {
   @Input() firstLoadedPage = 1
   @Input() percentLimit = 70
   @Input() autoInit = false
+  @Input() container = document.body
 
   @Output() nearOfBottom = new EventEmitter<void>()
   @Output() nearOfTop = new EventEmitter<void>()
@@ -48,7 +49,7 @@ export class InfiniteScrollerDirective implements OnInit, OnDestroy {
       .pipe(
         startWith(null),
         throttleTime(200, undefined, throttleOptions),
-        map(() => ({ current: window.scrollY, maximumScroll: document.body.clientHeight - window.innerHeight })),
+        map(() => ({ current: window.scrollY, maximumScroll: this.container.clientHeight - window.innerHeight })),
         distinctUntilChanged((o1, o2) => o1.current === o2.current),
         share()
       )
diff --git a/client/src/app/shared/video/video-thumbnail.component.html b/client/src/app/shared/video/video-thumbnail.component.html
index a6757fc4a..b302ebd0f 100644
--- a/client/src/app/shared/video/video-thumbnail.component.html
+++ b/client/src/app/shared/video/video-thumbnail.component.html
@@ -1,5 +1,5 @@
 <a
-  [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name"
+  [routerLink]="getVideoRouterLink()" [queryParams]="queryParams" [attr.title]="video.name"
   class="video-thumbnail"
 >
   <img alt="" [attr.aria-labelledby]="video.name" [attr.src]="getImageUrl()" [ngClass]="{ 'blur-filter': nsfw }" />
diff --git a/client/src/app/shared/video/video-thumbnail.component.ts b/client/src/app/shared/video/video-thumbnail.component.ts
index ca43700c7..fe65ade94 100644
--- a/client/src/app/shared/video/video-thumbnail.component.ts
+++ b/client/src/app/shared/video/video-thumbnail.component.ts
@@ -10,8 +10,11 @@ import { ScreenService } from '@app/shared/misc/screen.service'
 export class VideoThumbnailComponent {
   @Input() video: Video
   @Input() nsfw = false
+  @Input() routerLink: any[]
+  @Input() queryParams: any[]
 
-  constructor (private screenService: ScreenService) {}
+  constructor (private screenService: ScreenService) {
+  }
 
   getImageUrl () {
     if (!this.video) return ''
@@ -30,4 +33,10 @@ export class VideoThumbnailComponent {
 
     return (currentTime / this.video.duration) * 100
   }
+
+  getVideoRouterLink () {
+    if (this.routerLink) return this.routerLink
+
+    return [ '/videos/watch', this.video.uuid ]
+  }
 }