Add previous button

2 files changed, 50 insertions, 37 deletions

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)