Playlist support in watch page

3 files changed, 28 insertions, 3 deletions

diff --git a/client/src/assets/images/global/play.html b/client/src/assets/images/global/play.html
new file mode 100644
index 000000000..d00122de4
--- /dev/null
+++ b/client/src/assets/images/global/play.html
@@ -0,0 +1,9 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
+    <g id="Artboard-4" transform="translate(-532.000000, -115.000000)" stroke-width="2" stroke="#000000">
+      <g id="12" transform="translate(532.000000, 115.000000)">
+        <polygon id="Triangle-1" points="5 21 5 3 21 12" fill="#000000"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts b/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts
index 4dbfda300..bbd3e008d 100644
--- a/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts
+++ b/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts
@@ -4,6 +4,7 @@ import * as videojs from 'video.js'
 import { P2PMediaLoaderPluginOptions, PlayerNetworkInfo, VideoJSComponentInterface } from '../peertube-videojs-typings'
 import { Engine, initHlsJsPlayer, initVideoJsContribHlsJsPlayer } from 'p2p-media-loader-hlsjs'
 import { Events } from 'p2p-media-loader-core'
+import { timeToInt } from '../utils'
 
 // videojs-hlsjs-plugin needs videojs in window
 window['videojs'] = videojs
@@ -32,6 +33,7 @@ class P2pMediaLoaderPlugin extends Plugin {
     totalDownload: 0,
     totalUpload: 0
   }
+  private startTime: number
 
   private networkInfoInterval: any
 
@@ -54,12 +56,14 @@ class P2pMediaLoaderPlugin extends Plugin {
 
     initVideoJsContribHlsJsPlayer(player)
 
+    this.startTime = timeToInt(options.startTime)
+
     player.src({
       type: options.type,
       src: options.src
     })
 
-    player.on('play', () => {
+    player.one('play', () => {
       player.addClass('vjs-has-big-play-button-clicked')
     })
 
@@ -92,6 +96,12 @@ class P2pMediaLoaderPlugin extends Plugin {
     this.statsP2PBytes.numPeers = 1 + this.options.redundancyBaseUrls.length
 
     this.runStats()
+
+    this.hlsjs.on('hlsLevelLoaded', () => {
+      if (this.startTime) this.player.currentTime(this.startTime)
+
+      this.hlsjs.off('hlsLevelLoaded', this)
+    })
   }
 
   private runStats () {
diff --git a/client/src/assets/player/peertube-plugin.ts b/client/src/assets/player/peertube-plugin.ts
index 3991e4627..dd9408c8e 100644
--- a/client/src/assets/player/peertube-plugin.ts
+++ b/client/src/assets/player/peertube-plugin.ts
@@ -83,9 +83,15 @@ class PeerTubePlugin extends Plugin {
 
       if (options.stopTime) {
         const stopTime = timeToInt(options.stopTime)
+        const self = this
 
-        this.player.on('timeupdate', () => {
-          if (this.player.currentTime() > stopTime) this.player.pause()
+        this.player.on('timeupdate', function onTimeUpdate () {
+          if (self.player.currentTime() > stopTime) {
+            self.player.pause()
+            self.player.trigger('stopped')
+
+            self.player.off('timeupdate', onTimeUpdate)
+          }
         })
       }