Playlist support in watch page

3 files changed, 6 insertions, 247 deletions

diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html
index 67a8b1a91..bc26e198e 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html
@@ -5,60 +5,7 @@
   cdkDropList (cdkDropListDropped)="drop($event)"
 >
   <div class="video" *ngFor="let video of videos" cdkDrag (cdkDragMoved)="onDragMove($event)">
-    <div class="position">{{ video.playlistElement.position }}</div>
-
-    <my-video-thumbnail [video]="video" [nsfw]="isVideoBlur(video)"></my-video-thumbnail>
-
-    <div class="video-info">
-      <a tabindex="-1" class="video-info-name" [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name">{{ video.name }}</a>
-      <a tabindex="-1" class="video-info-account" [routerLink]="[ '/accounts', video.byAccount ]">{{ video.byAccount }}</a>
-      <span tabindex="-1" class="video-info-timestamp">{{ formatTimestamp(video)}}</span>
-    </div>
-
-    <div class="more" ngbDropdown #moreDropdown="ngbDropdown" placement="bottom-right" (openChange)="onDropdownOpenChange()" autoClose="outside">
-      <my-global-icon iconName="more-vertical" ngbDropdownToggle role="button" class="icon-more"></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>
+    <my-video-playlist-element-miniature [video]="video" [playlist]="playlist" [owned]="true" (elementRemoved)="onElementRemoved($event)">
+    </my-video-playlist-element-miniature>
   </div>
 </div>
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss
index 4ac89d08f..b05af0490 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss
@@ -2,100 +2,6 @@
 @import '_mixins';
 @import '_miniature';
 
-.video, .cdk-drag-preview {
-  display: flex;
-  align-items: center;
-  background-color: var(--mainBackgroundColor);
-  cursor: pointer;
-  padding: 10px;
-  border-bottom: 1px solid $separator-border-color;
-
-  &:hover {
-    background-color: rgba(0, 0, 0, 0.05);
-
-    .more {
-      display: block;
-    }
-  }
-
-  .position {
-    font-weight: $font-semibold;
-    margin-right: 10px;
-    color: $grey-foreground-color;
-    min-width: 20px;
-  }
-
-  my-video-thumbnail {
-    display: flex; // Avoids an issue with line-height that adds space below the element
-    margin-right: 10px;
-
-    /deep/ .video-thumbnail {
-      @include miniature-thumbnail(130px, 72px);
-    }
-  }
-
-  .video-info {
-    display: flex;
-    flex-direction: column;
-
-    a {
-      @include disable-default-a-behaviour;
-
-      color: var(--mainForegroundColor);
-    }
-
-    .video-info-name {
-      font-size: 18px;
-      font-weight: $font-semibold;
-    }
-
-    .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);
-
-      &::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;
-      }
-    }
-  }
-}
-
 // Thanks Angular CDK <3 https://material.angular.io/cdk/drag-drop/examples
 .cdk-drag-preview {
   box-sizing: border-box;
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts
index 4076a3721..dcf470be3 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'
+import { Component, OnDestroy, OnInit } from '@angular/core'
 import { Notifier, ServerService } from '@app/core'
 import { AuthService } from '../../core/auth'
 import { ConfirmService } from '../../core/confirm'
@@ -10,9 +10,6 @@ import { VideoService } from '@app/shared/video/video.service'
 import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
 import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { secondsToTime } from '../../../assets/player/utils'
-import { VideoPlaylistElementUpdate } from '@shared/models'
-import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
 import { CdkDragDrop, CdkDragMove } from '@angular/cdk/drag-drop'
 import { throttleTime } from 'rxjs/operators'
 
@@ -22,8 +19,6 @@ import { throttleTime } from 'rxjs/operators'
   styleUrls: [ './my-account-video-playlist-elements.component.scss' ]
 })
 export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestroy {
-  @ViewChild('moreDropdown') moreDropdown: NgbDropdown
-
   videos: Video[] = []
   playlist: VideoPlaylist
 
@@ -33,15 +28,6 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro
     totalItems: null
   }
 
-  displayTimestampOptions = false
-
-  timestampOptions: {
-    startTimestampEnabled: boolean
-    startTimestamp: number
-    stopTimestampEnabled: boolean
-    stopTimestamp: number
-  } = {} as any
-
   private videoPlaylistId: string | number
   private paramsSub: Subscription
   private dragMoveSubject = new Subject<number>()
@@ -124,45 +110,9 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro
     // }
   }
 
-  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.videos = this.videos.filter(v => v.id !== video.id)
-            this.reorderClientPositions()
-          },
-
-          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()
+  onElementRemoved (video: Video) {
+    this.videos = this.videos.filter(v => v.id !== video.id)
+    this.reorderClientPositions()
   }
 
   onNearOfBottom () {
@@ -173,50 +123,6 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro
     this.loadElements()
   }
 
-  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
-      }
-    }
-  }
-
   private loadElements () {
     this.videoService.getPlaylistVideos(this.videoPlaylistId, this.pagination)
         .subscribe(({ totalVideos, videos }) => {