Add to playlist dropdown

7 files changed, 64 insertions, 20 deletions

diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.html b/client/src/app/videos/+video-watch/modal/video-share.component.html
index 9f3c37fe8..955b2b80c 100644
--- a/client/src/app/videos/+video-watch/modal/video-share.component.html
+++ b/client/src/app/videos/+video-watch/modal/video-share.component.html
@@ -6,11 +6,19 @@
 
   <div class="modal-body">
 
-    <div *ngIf="currentVideoTimestampString" class="start-at">
+    <div class="start-at">
       <my-peertube-checkbox
         inputName="startAt" [(ngModel)]="startAtCheckbox"
-        i18n-labelText [labelText]="getStartCheckboxLabel()"
+        i18n-labelText labelText="Start at"
       ></my-peertube-checkbox>
+
+      <my-timestamp-input
+        [timestamp]="currentVideoTimestamp"
+        [maxTimestamp]="video.duration"
+        [disabled]="!startAtCheckbox"
+        [(ngModel)]="currentVideoTimestamp"
+      >
+      </my-timestamp-input>
     </div>
 
     <div class="form-group">
diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.scss b/client/src/app/videos/+video-watch/modal/video-share.component.scss
index 4937506b9..472a45920 100644
--- a/client/src/app/videos/+video-watch/modal/video-share.component.scss
+++ b/client/src/app/videos/+video-watch/modal/video-share.component.scss
@@ -13,4 +13,9 @@
   display: flex;
   justify-content: center;
   margin-top: 10px;
+  align-items: center;
+
+  my-timestamp-input {
+    margin-left: 10px;
+  }
 }
diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.ts b/client/src/app/videos/+video-watch/modal/video-share.component.ts
index c6205e355..6565d7f88 100644
--- a/client/src/app/videos/+video-watch/modal/video-share.component.ts
+++ b/client/src/app/videos/+video-watch/modal/video-share.component.ts
@@ -16,10 +16,8 @@ export class VideoShareComponent {
 
   @Input() video: VideoDetails = null
 
+  currentVideoTimestamp: number
   startAtCheckbox = false
-  currentVideoTimestampString: string
-
-  private currentVideoTimestamp: number
 
   constructor (
     private modalService: NgbModal,
@@ -28,8 +26,7 @@ export class VideoShareComponent {
   ) { }
 
   show (currentVideoTimestamp?: number) {
-    this.currentVideoTimestamp = Math.floor(currentVideoTimestamp)
-    this.currentVideoTimestampString = durationToString(this.currentVideoTimestamp)
+    this.currentVideoTimestamp = currentVideoTimestamp ? Math.floor(currentVideoTimestamp) : 0
 
     this.modalService.open(this.modal)
   }
@@ -52,10 +49,6 @@ export class VideoShareComponent {
     this.notifier.success(this.i18n('Copied'))
   }
 
-  getStartCheckboxLabel () {
-    return this.i18n('Start at {{timestamp}}', { timestamp: this.currentVideoTimestampString })
-  }
-
   private getVideoTimestampIfEnabled () {
     if (this.startAtCheckbox === true) return this.currentVideoTimestamp
 
diff --git a/client/src/app/videos/+video-watch/video-watch-routing.module.ts b/client/src/app/videos/+video-watch/video-watch-routing.module.ts
index bdd4f945e..0d7809044 100644
--- a/client/src/app/videos/+video-watch/video-watch-routing.module.ts
+++ b/client/src/app/videos/+video-watch/video-watch-routing.module.ts
@@ -7,7 +7,16 @@ import { VideoWatchComponent } from './video-watch.component'
 
 const videoWatchRoutes: Routes = [
   {
-    path: '',
+    path: 'playlist/:uuid',
+    component: VideoWatchComponent,
+    canActivate: [ MetaGuard ]
+  },
+  {
+    path: ':uuid/comments/:commentId',
+    redirectTo: ':uuid'
+  },
+  {
+    path: ':uuid',
     component: VideoWatchComponent,
     canActivate: [ MetaGuard ]
   }
diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html
index fffcc1275..615b88bd6 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -65,17 +65,31 @@
                     <my-global-icon iconName="dislike"></my-global-icon>
                   </div>
 
-                  <div *ngIf="video.support" (click)="showSupportModal()" class="action-button action-button-support">
+                  <div *ngIf="video.support" (click)="showSupportModal()" class="action-button">
                     <my-global-icon iconName="heart"></my-global-icon>
                     <span class="icon-text" i18n>Support</span>
                   </div>
 
-                  <div (click)="showShareModal()" class="action-button action-button-share" role="button">
+                  <div (click)="showShareModal()" class="action-button" role="button">
                     <my-global-icon iconName="share"></my-global-icon>
                     <span class="icon-text" i18n>Share</span>
                   </div>
 
-                  <div class="action-more" ngbDropdown placement="top" role="button">
+                  <div
+                    class="action-dropdown" ngbDropdown placement="top" role="button" autoClose="outside"
+                     *ngIf="isUserLoggedIn()" (openChange)="addContent.openChange($event)"
+                  >
+                    <div class="action-button action-button-save" ngbDropdownToggle role="button">
+                      <my-global-icon iconName="playlist-add"></my-global-icon>
+                      <span class="icon-text" i18n>Save</span>
+                    </div>
+
+                    <div ngbDropdownMenu>
+                      <my-video-add-to-playlist #addContent [video]="video"></my-video-add-to-playlist>
+                    </div>
+                  </div>
+
+                  <div class="action-dropdown" ngbDropdown placement="top" role="button">
                     <div class="action-button" ngbDropdownToggle role="button">
                       <my-global-icon class="more-icon" iconName="more"></my-global-icon>
                     </div>
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index 33d77e62c..ff321fdbc 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -176,7 +176,7 @@ $other-videos-width: 260px;
           display: flex;
           align-items: center;
 
-          .action-button:not(:first-child), .action-more {
+          .action-button:not(:first-child), .action-dropdown {
             margin-left: 10px;
           }
 
@@ -212,12 +212,19 @@ $other-videos-width: 260px;
               }
             }
 
+            &.action-button-save {
+              my-global-icon {
+                top: 0 !important;
+                right: -1px;
+              }
+            }
+
             .icon-text {
               margin-left: 3px;
             }
           }
 
-          .action-more {
+          .action-dropdown {
             display: inline-block;
 
             .dropdown-menu .dropdown-item {
diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts
index 0f04441ba..359217f3b 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -59,6 +59,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   remoteServerDown = false
   hotkeys: Hotkey[]
 
+  private currentTime: number
   private paramsSub: Subscription
 
   constructor (
@@ -114,10 +115,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
         )
         .subscribe(([ video, captionsResult ]) => {
           const startTime = this.route.snapshot.queryParams.start
+          const stopTime = this.route.snapshot.queryParams.stop
           const subtitle = this.route.snapshot.queryParams.subtitle
           const playerMode = this.route.snapshot.queryParams.mode
 
-          this.onVideoFetched(video, captionsResult.data, { startTime, subtitle, playerMode })
+          this.onVideoFetched(video, captionsResult.data, { startTime, stopTime, subtitle, playerMode })
               .catch(err => this.handleError(err))
         })
     })
@@ -219,7 +221,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   showShareModal () {
     const currentTime = this.player ? this.player.currentTime() : undefined
 
-    this.videoShareModal.show(currentTime)
+    this.videoShareModal.show(this.currentTime)
   }
 
   showDownloadModal (event: Event) {
@@ -371,7 +373,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   private async onVideoFetched (
     video: VideoDetails,
     videoCaptions: VideoCaption[],
-    urlOptions: { startTime?: number, subtitle?: string, playerMode?: string }
+    urlOptions: { startTime?: number, stopTime?: number, subtitle?: string, playerMode?: string }
   ) {
     this.video = video
 
@@ -379,6 +381,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.descriptionLoading = false
     this.completeDescriptionShown = false
     this.remoteServerDown = false
+    this.currentTime = undefined
 
     let startTime = urlOptions.startTime || (this.video.userHistory ? this.video.userHistory.currentTime : 0)
     // If we are at the end of the video, reset the timer
@@ -420,6 +423,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
         inactivityTimeout: 2500,
         poster: this.video.previewUrl,
         startTime,
+        stopTime: urlOptions.stopTime,
 
         theaterMode: true,
         captions: videoCaptions.length !== 0,
@@ -466,6 +470,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.zone.runOutsideAngular(async () => {
       this.player = await PeertubePlayerManager.initialize(mode, options)
       this.player.on('customError', ({ err }: { err: any }) => this.handleError(err))
+
+      this.player.on('timeupdate', () => {
+        this.currentTime = Math.floor(this.player.currentTime())
+      })
     })
 
     this.setVideoDescriptionHTML()