Add previous button

5 files changed, 166 insertions, 51 deletions

diff --git a/client/src/assets/player/images/next.svg b/client/src/assets/player/images/next.svg
index af42dd270..0441f93c8 100644
--- a/client/src/assets/player/images/next.svg
+++ b/client/src/assets/player/images/next.svg
@@ -1,4 +1,59 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <path fill="white" d="M 12,24 20.5,18 12,12 V 24 z M 22,12 v 12 h 2 V 12 h -2 z"></path>
-</svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
+   sodipodi:docname="next.svg"
+   id="svg4"
+   version="1.1"
+   viewBox="0 0 12 12"
+   height="8"
+   width="8">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     inkscape:current-layer="svg4"
+     inkscape:window-maximized="1"
+     inkscape:window-y="0"
+     inkscape:window-x="0"
+     inkscape:cy="-2.5620165"
+     inkscape:cx="-7.4038126"
+     inkscape:zoom="29.791667"
+     fit-margin-bottom="0"
+     fit-margin-right="0"
+     fit-margin-left="0"
+     fit-margin-top="0"
+     showgrid="false"
+     id="namedview6"
+     inkscape:window-height="1037"
+     inkscape:window-width="1916"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0"
+     guidetolerance="10"
+     gridtolerance="10"
+     objecttolerance="10"
+     borderopacity="1"
+     bordercolor="#666666"
+     pagecolor="#ffffff" />
+  <path
+     id="path2"
+     d="M 0,12 8.5,6 0,0 Z M 10,0 v 12 h 2 V 0 Z"
+     fill="#ffffff" />
+</svg>
diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts
index dcfa3a593..c71b43415 100644
--- a/client/src/assets/player/peertube-player-manager.ts
+++ b/client/src/assets/player/peertube-player-manager.ts
@@ -6,7 +6,7 @@ import './upnext/end-card'
 import './upnext/upnext-plugin'
 import './bezels/bezels-plugin'
 import './peertube-plugin'
-import './videojs-components/next-video-button'
+import './videojs-components/next-previous-video-button'
 import './videojs-components/p2p-info-button'
 import './videojs-components/peertube-link-button'
 import './videojs-components/peertube-load-progress-bar'
@@ -27,6 +27,7 @@ import { segmentUrlBuilderFactory } from './p2p-media-loader/segment-url-builder
 import { segmentValidatorFactory } from './p2p-media-loader/segment-validator'
 import { getStoredP2PEnabled } from './peertube-player-local-storage'
 import {
+  NextPreviousVideoButtonOptions,
   P2PMediaLoaderPluginOptions,
   PlaylistPluginOptions,
   UserWatching,
@@ -77,7 +78,12 @@ export interface CommonOptions extends CustomizationOptions {
   onPlayerElementChange: (element: HTMLVideoElement) => void
 
   autoplay: boolean
-  nextVideo?: Function
+
+  nextVideo?: () => void
+  hasNextVideo?: () => boolean
+
+  previousVideo?: () => void
+  hasPreviousVideo?: () => boolean
 
   playlist?: PlaylistPluginOptions
 
@@ -259,7 +265,12 @@ export class PeertubePlayerManager {
           captions: commonOptions.captions,
           peertubeLink: commonOptions.peertubeLink,
           theaterButton: commonOptions.theaterButton,
-          nextVideo: commonOptions.nextVideo
+
+          nextVideo: commonOptions.nextVideo,
+          hasNextVideo: commonOptions.hasNextVideo,
+
+          previousVideo: commonOptions.previousVideo,
+          hasPreviousVideo: commonOptions.hasPreviousVideo
         }) as any // FIXME: typings
       }
     }
@@ -360,9 +371,14 @@ export class PeertubePlayerManager {
 
   private static getControlBarChildren (mode: PlayerMode, options: {
     peertubeLink: boolean
-    theaterButton: boolean,
-    captions: boolean,
+    theaterButton: boolean
+    captions: boolean
+
     nextVideo?: Function
+    hasNextVideo?: () => boolean
+
+    previousVideo?: Function
+    hasPreviousVideo?: () => boolean
   }) {
     const settingEntries = []
     const loadProgressBar = mode === 'webtorrent' ? 'peerTubeLoadProgressBar' : 'loadProgressBar'
@@ -372,15 +388,39 @@ export class PeertubePlayerManager {
     if (options.captions === true) settingEntries.push('captionsButton')
     settingEntries.push('resolutionMenuButton')
 
-    const children = {
-      'playToggle': {}
+    const children = {}
+
+    if (options.previousVideo) {
+      const buttonOptions: NextPreviousVideoButtonOptions = {
+        type: 'previous',
+        handler: options.previousVideo,
+        isDisabled: () => {
+          if (!options.hasPreviousVideo) return false
+
+          return !options.hasPreviousVideo()
+        }
+      }
+
+      Object.assign(children, {
+        'previousVideoButton': buttonOptions
+      })
     }
 
+    Object.assign(children, { playToggle: {} })
+
     if (options.nextVideo) {
-      Object.assign(children, {
-        'nextVideoButton': {
-          handler: options.nextVideo
+      const buttonOptions: NextPreviousVideoButtonOptions = {
+        type: 'next',
+        handler: options.nextVideo,
+        isDisabled: () => {
+          if (!options.hasNextVideo) return false
+
+          return !options.hasNextVideo()
         }
+      }
+
+      Object.assign(children, {
+        'nextVideoButton': buttonOptions
       })
     }
 
diff --git a/client/src/assets/player/peertube-videojs-typings.ts b/client/src/assets/player/peertube-videojs-typings.ts
index b72c4b0f9..a359b8595 100644
--- a/client/src/assets/player/peertube-videojs-typings.ts
+++ b/client/src/assets/player/peertube-videojs-typings.ts
@@ -118,6 +118,12 @@ type PlaylistPluginOptions = {
   onItemClicked: (element: VideoPlaylistElement) => void
 }
 
+type NextPreviousVideoButtonOptions = {
+  type: 'next' | 'previous'
+  handler: Function
+  isDisabled: () => boolean
+}
+
 type WebtorrentPluginOptions = {
   playerElement: HTMLVideoElement
 
@@ -194,6 +200,7 @@ type PlaylistItemOptions = {
 export {
   PlayerNetworkInfo,
   PlaylistItemOptions,
+  NextPreviousVideoButtonOptions,
   ResolutionUpdateData,
   AutoResolutionUpdateData,
   PlaylistPluginOptions,
diff --git a/client/src/assets/player/videojs-components/next-previous-video-button.ts b/client/src/assets/player/videojs-components/next-previous-video-button.ts
new file mode 100644
index 000000000..fe17ce2ce
--- /dev/null
+++ b/client/src/assets/player/videojs-components/next-previous-video-button.ts
@@ -0,0 +1,50 @@
+import videojs from 'video.js'
+import { NextPreviousVideoButtonOptions } from '../peertube-videojs-typings'
+
+const Button = videojs.getComponent('Button')
+
+class NextPreviousVideoButton extends Button {
+  private readonly nextPreviousVideoButtonOptions: NextPreviousVideoButtonOptions
+
+  constructor (player: videojs.Player, options?: NextPreviousVideoButtonOptions) {
+    super(player, options as any)
+
+    this.nextPreviousVideoButtonOptions = options
+
+    this.update()
+  }
+
+  createEl () {
+    const type = (this.options_ as NextPreviousVideoButtonOptions).type
+
+    const button = videojs.dom.createEl('button', {
+      className: 'vjs-' + type + '-video'
+    }) as HTMLButtonElement
+    const nextIcon = videojs.dom.createEl('span', {
+      className: 'icon icon-' + type
+    })
+    button.appendChild(nextIcon)
+
+    if (type === 'next') {
+      button.title = this.player_.localize('Next video')
+    } else {
+      button.title = this.player_.localize('Previous video')
+    }
+
+    return button
+  }
+
+  handleClick () {
+    this.nextPreviousVideoButtonOptions.handler()
+  }
+
+  update () {
+    const disabled = this.nextPreviousVideoButtonOptions.isDisabled()
+
+    if (disabled) this.addClass('vjs-disabled')
+    else this.removeClass('vjs-disabled')
+  }
+}
+
+videojs.registerComponent('NextVideoButton', NextPreviousVideoButton)
+videojs.registerComponent('PreviousVideoButton', NextPreviousVideoButton)
diff --git a/client/src/assets/player/videojs-components/next-video-button.ts b/client/src/assets/player/videojs-components/next-video-button.ts
deleted file mode 100644
index 22b32f06b..000000000
--- a/client/src/assets/player/videojs-components/next-video-button.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import videojs from 'video.js'
-
-const Button = videojs.getComponent('Button')
-
-export interface NextVideoButtonOptions extends videojs.ComponentOptions {
-  handler: Function
-}
-
-class NextVideoButton extends Button {
-  private readonly nextVideoButtonOptions: NextVideoButtonOptions
-
-  constructor (player: videojs.Player, options?: NextVideoButtonOptions) {
-    super(player, options)
-
-    this.nextVideoButtonOptions = options
-  }
-
-  createEl () {
-    const button = videojs.dom.createEl('button', {
-      className: 'vjs-next-video'
-    }) as HTMLButtonElement
-    const nextIcon = videojs.dom.createEl('span', {
-      className: 'icon icon-next'
-    })
-    button.appendChild(nextIcon)
-
-    button.title = this.player_.localize('Next video')
-
-    return button
-  }
-
-  handleClick () {
-    this.nextVideoButtonOptions.handler()
-  }
-}
-
-videojs.registerComponent('NextVideoButton', NextVideoButton)