Add to playlist dropdown

8 files changed, 63 insertions, 20 deletions

diff --git a/client/src/assets/images/global/add.html b/client/src/assets/images/global/add.html
index bfb0a52bc..34f497056 100644
--- a/client/src/assets/images/global/add.html
+++ b/client/src/assets/images/global/add.html
@@ -2,9 +2,9 @@
     <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g transform="translate(-92.000000, -115.000000)">
             <g id="2" transform="translate(92.000000, 115.000000)">
-                <circle id="Oval-1" stroke="#ffffff" stroke-width="2" cx="12" cy="12" r="10"></circle>
-                <rect id="Rectangle-1" fill="#ffffff" x="11" y="7" width="2" height="10" rx="1"></rect>
-                <rect id="Rectangle-1" fill="#ffffff" x="7" y="11" width="10" height="2" rx="1"></rect>
+                <circle id="Oval-1" stroke="#000000" stroke-width="2" cx="12" cy="12" r="10"></circle>
+                <rect id="Rectangle-1" fill="#000000" x="11" y="7" width="2" height="10" rx="1"></rect>
+                <rect id="Rectangle-1" fill="#000000" x="7" y="11" width="10" height="2" rx="1"></rect>
             </g>
         </g>
     </g>
diff --git a/client/src/assets/images/video/playlist-add.html b/client/src/assets/images/video/playlist-add.html
new file mode 100644
index 000000000..ada845c75
--- /dev/null
+++ b/client/src/assets/images/video/playlist-add.html
@@ -0,0 +1,10 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     viewBox="0 0 426.667 426.667" xml:space="preserve">
+  <g fill="#000000">
+    <rect x="0" y="64" width="256" height="42.667"/>
+    <rect x="0" y="149.333" width="256" height="42.667"/>
+    <rect x="0" y="234.667" width="170.667" height="42.667"/>
+    <polygon points="341.333,234.667 341.333,149.333 298.667,149.333 298.667,234.667 213.333,234.667 213.333,277.333
+      298.667,277.333 298.667,362.667 341.333,362.667 341.333,277.333 426.667,277.333 426.667,234.667                   "/>
+  </g>
+</svg>
diff --git a/client/src/assets/images/video/watch-later.html b/client/src/assets/images/video/watch-later.html
new file mode 100644
index 000000000..927afebe4
--- /dev/null
+++ b/client/src/assets/images/video/watch-later.html
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 80 100"
+     enable-background="new 0 0 80 80" xml:space="preserve"><g><path fill="#000000" d="M33.3,51.5L33.3,51.5c-1.8,0-3.3-1.4-3.3-3.1V37.3c0-1.7,1.5-3.1,3.3-3.1c0.5,0,1,0.1,1.5,0.4l10.7,5.5   c1,0.5,1.6,1.5,1.6,2.7c0,1.2-0.6,2.2-1.7,2.8l-10.6,5.6C34.3,51.3,33.8,51.5,33.3,51.5z M33.3,36.2c-0.6,0-1.3,0.4-1.3,1.1v11.1   c0,0.6,0.7,1.1,1.3,1.1l0,0c0.2,0,0.4,0,0.5-0.1l10.6-5.6c0.4-0.2,0.6-0.6,0.6-1c0-0.2-0.1-0.6-0.5-0.9l-10.7-5.5   C33.6,36.2,33.4,36.2,33.3,36.2z"/></g>
+  <g><path fill="#000000" d="M62.9,65H12.1C10.4,65,9,63.6,9,61.9V22.1c0-1.7,1.4-3.1,3.1-3.1h50.8c1.7,0,3.1,1.4,3.1,3.1v39.8   C66,63.6,64.6,65,62.9,65z M12.1,21c-0.6,0-1.1,0.5-1.1,1.1v39.8c0,0.6,0.5,1.1,1.1,1.1h50.8c0.6,0,1.1-0.5,1.1-1.1V22.1   c0-0.6-0.5-1.1-1.1-1.1H12.1z"/></g>
+  <g><path fill="#000000" d="M63,16h-2c0-1-0.4-1-0.9-1H14.9c-0.5,0-0.9,0-0.9,1h-2c0-2,1.3-3,2.9-3h45.3C61.7,13,63,14,63,16z"/></g>
+  <g><path fill="#000000" d="M58,11h-2c0-1-0.4-1-0.5-1H19.5c-0.1,0-0.5,0-0.5,1h-2c0-2,1.1-3,2.5-3h36.1C56.9,8,58,9,58,11z"/></g>
+  <g><path fill="#000000" d="M68,29v-2c4,0,6.5-2.9,6.5-6.5S72,14,68,14v-2c5,0,8.5,3.8,8.5,8.5S73,29,68,29z"/></g>
+  <g><polygon fill="#000000" points="71.3,18.7 65.6,13 71.3,7.3 72.7,8.7 68.4,13 72.7,17.3  "/></g>
+  <text x="0" y="95" fill="#000000" font-size="5px" font-weight="bold"
+        font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by Yaroslav Samoylov</text>
+  <text x="0" y="100" fill="#000000" font-size="5px" font-weight="bold"
+        font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>
diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts
index 7631d095f..6cdd54372 100644
--- a/client/src/assets/player/peertube-player-manager.ts
+++ b/client/src/assets/player/peertube-player-manager.ts
@@ -49,6 +49,7 @@ export type CommonOptions = {
   inactivityTimeout: number
   poster: string
   startTime: number | string
+  stopTime: number | string
 
   theaterMode: boolean
   captions: boolean
@@ -199,10 +200,10 @@ export class PeertubePlayerManager {
         autoplay, // Use peertube plugin autoplay because we get the file by webtorrent
         videoViewUrl: commonOptions.videoViewUrl,
         videoDuration: commonOptions.videoDuration,
-        startTime: commonOptions.startTime,
         userWatching: commonOptions.userWatching,
         subtitle: commonOptions.subtitle,
-        videoCaptions: commonOptions.videoCaptions
+        videoCaptions: commonOptions.videoCaptions,
+        stopTime: commonOptions.stopTime
       }
     }
 
@@ -210,6 +211,7 @@ export class PeertubePlayerManager {
       const p2pMediaLoader: P2PMediaLoaderPluginOptions = {
         redundancyBaseUrls: options.p2pMediaLoader.redundancyBaseUrls,
         type: 'application/x-mpegURL',
+        startTime: commonOptions.startTime,
         src: p2pMediaLoaderOptions.playlistUrl
       }
 
@@ -254,7 +256,8 @@ export class PeertubePlayerManager {
         autoplay,
         videoDuration: commonOptions.videoDuration,
         playerElement: commonOptions.playerElement,
-        videoFiles: webtorrentOptions.videoFiles
+        videoFiles: webtorrentOptions.videoFiles,
+        startTime: commonOptions.startTime
       }
       Object.assign(plugins, { webtorrent })
 
diff --git a/client/src/assets/player/peertube-plugin.ts b/client/src/assets/player/peertube-plugin.ts
index 92ac57cf5..3991e4627 100644
--- a/client/src/assets/player/peertube-plugin.ts
+++ b/client/src/assets/player/peertube-plugin.ts
@@ -22,7 +22,6 @@ import {
 
 const Plugin: VideoJSComponentInterface = videojs.getPlugin('plugin')
 class PeerTubePlugin extends Plugin {
-  private readonly startTime: number = 0
   private readonly videoViewUrl: string
   private readonly videoDuration: number
   private readonly CONSTANTS = {
@@ -35,13 +34,11 @@ class PeerTubePlugin extends Plugin {
 
   private videoViewInterval: any
   private userWatchingVideoInterval: any
-  private qualityObservationTimer: any
   private lastResolutionChange: ResolutionUpdateData
 
   constructor (player: videojs.Player, options: PeerTubePluginOptions) {
     super(player, options)
 
-    this.startTime = timeToInt(options.startTime)
     this.videoViewUrl = options.videoViewUrl
     this.videoDuration = options.videoDuration
     this.videoCaptions = options.videoCaptions
@@ -84,6 +81,14 @@ class PeerTubePlugin extends Plugin {
         saveMuteInStore(this.player.muted())
       })
 
+      if (options.stopTime) {
+        const stopTime = timeToInt(options.stopTime)
+
+        this.player.on('timeupdate', () => {
+          if (this.player.currentTime() > stopTime) this.player.pause()
+        })
+      }
+
       this.player.textTracks().on('change', () => {
         const showing = this.player.textTracks().tracks_.find((t: { kind: string, mode: string }) => {
           return t.kind === 'captions' && t.mode === 'showing'
@@ -109,10 +114,7 @@ class PeerTubePlugin extends Plugin {
   }
 
   dispose () {
-    clearTimeout(this.qualityObservationTimer)
-
-    clearInterval(this.videoViewInterval)
-
+    if (this.videoViewInterval) clearInterval(this.videoViewInterval)
     if (this.userWatchingVideoInterval) clearInterval(this.userWatchingVideoInterval)
   }
 
diff --git a/client/src/assets/player/peertube-videojs-typings.ts b/client/src/assets/player/peertube-videojs-typings.ts
index 79a5a6c4d..a96b0bc8c 100644
--- a/client/src/assets/player/peertube-videojs-typings.ts
+++ b/client/src/assets/player/peertube-videojs-typings.ts
@@ -41,12 +41,13 @@ type PeerTubePluginOptions = {
   autoplay: boolean
   videoViewUrl: string
   videoDuration: number
-  startTime: number | string
 
   userWatching?: UserWatching
   subtitle?: string
 
   videoCaptions: VideoJSCaption[]
+
+  stopTime: number | string
 }
 
 type WebtorrentPluginOptions = {
@@ -56,12 +57,16 @@ type WebtorrentPluginOptions = {
   videoDuration: number
 
   videoFiles: VideoFile[]
+
+  startTime: number | string
 }
 
 type P2PMediaLoaderPluginOptions = {
   redundancyBaseUrls: string[]
   type: string
   src: string
+
+  startTime: number | string
 }
 
 type VideoJSPluginOptions = {
diff --git a/client/src/assets/player/utils.ts b/client/src/assets/player/utils.ts
index 8d87567c2..54f131310 100644
--- a/client/src/assets/player/utils.ts
+++ b/client/src/assets/player/utils.ts
@@ -42,7 +42,7 @@ function timeToInt (time: number | string) {
   if (!time) return 0
   if (typeof time === 'number') return time
 
-  const reg = /^((\d+)h)?((\d+)m)?((\d+)s?)?$/
+  const reg = /^((\d+)[h:])?((\d+)[m:])?((\d+)s?)?$/
   const matches = time.match(reg)
 
   if (!matches) return 0
@@ -54,18 +54,27 @@ function timeToInt (time: number | string) {
   return hours * 3600 + minutes * 60 + seconds
 }
 
-function secondsToTime (seconds: number) {
+function secondsToTime (seconds: number, full = false, symbol?: string) {
   let time = ''
 
+  const hourSymbol = (symbol || 'h')
+  const minuteSymbol = (symbol || 'm')
+  const secondsSymbol = full ? '' : 's'
+
   let hours = Math.floor(seconds / 3600)
-  if (hours >= 1) time = hours + 'h'
+  if (hours >= 1) time = hours + hourSymbol
+  else if (full) time = '0' + hourSymbol
 
   seconds %= 3600
   let minutes = Math.floor(seconds / 60)
-  if (minutes >= 1) time += minutes + 'm'
+  if (minutes >= 1 && minutes < 10 && full) time += '0' + minutes + minuteSymbol
+  else if (minutes >= 1) time += minutes + minuteSymbol
+  else if (full) time += '00' + minuteSymbol
 
   seconds %= 60
-  if (seconds >= 1) time += seconds + 's'
+  if (seconds >= 1 && seconds < 10 && full) time += '0' + seconds + secondsSymbol
+  else if (seconds >= 1) time += seconds + secondsSymbol
+  else if (full) time += '00'
 
   return time
 }
@@ -131,6 +140,7 @@ export {
   getRtcConfig,
   toTitleCase,
   timeToInt,
+  secondsToTime,
   buildVideoLink,
   buildVideoEmbed,
   videoFileMaxByResolution,
diff --git a/client/src/assets/player/webtorrent/webtorrent-plugin.ts b/client/src/assets/player/webtorrent/webtorrent-plugin.ts
index c69bf31fa..c7182acc9 100644
--- a/client/src/assets/player/webtorrent/webtorrent-plugin.ts
+++ b/client/src/assets/player/webtorrent/webtorrent-plugin.ts
@@ -6,7 +6,7 @@ import * as WebTorrent from 'webtorrent'
 import { VideoFile } from '../../../../../shared/models/videos/video.model'
 import { renderVideo } from './video-renderer'
 import { LoadedQualityData, PlayerNetworkInfo, VideoJSComponentInterface, WebtorrentPluginOptions } from '../peertube-videojs-typings'
-import { getRtcConfig, videoFileMaxByResolution, videoFileMinByResolution } from '../utils'
+import { getRtcConfig, timeToInt, videoFileMaxByResolution, videoFileMinByResolution } from '../utils'
 import { PeertubeChunkStore } from './peertube-chunk-store'
 import {
   getAverageBandwidthInStore,
@@ -73,6 +73,8 @@ class WebTorrentPlugin extends Plugin {
   constructor (player: videojs.Player, options: WebtorrentPluginOptions) {
     super(player, options)
 
+    this.startTime = timeToInt(options.startTime)
+
     // Disable auto play on iOS
     this.autoplay = options.autoplay && this.isIOS() === false
     this.playerRefusedP2P = !getStoredWebTorrentEnabled()