From ec6f9c8a7f27cdb054f04558278489f886493631 Mon Sep 17 00:00:00 2001
From: saltrafael <a657ee92-7eb9-46eb-97d2-6735799df838@aleeas.com>
Date: Tue, 24 Aug 2021 08:53:44 -0300
Subject: [PATCH] Add Play Next VJS component

---
 .../viewers/videoViewer/internal/play-next.js | 25 +++++++++++++++++++
 .../viewers/videoViewer/internal/videojs.jsx  |  1 +
 ui/scss/component/_button.scss                | 18 +++++++++++++
 3 files changed, 44 insertions(+)
 create mode 100644 ui/component/viewers/videoViewer/internal/play-next.js

diff --git a/ui/component/viewers/videoViewer/internal/play-next.js b/ui/component/viewers/videoViewer/internal/play-next.js
new file mode 100644
index 000000000..e45d68954
--- /dev/null
+++ b/ui/component/viewers/videoViewer/internal/play-next.js
@@ -0,0 +1,25 @@
+// @flow
+import type { Player } from './videojs';
+import videojs from 'video.js';
+
+class PlayNextButton extends videojs.getComponent('Button') {
+  constructor(player, options = {}) {
+    super(player, options);
+    this.addClass('vjs-button--play-next');
+    this.controlText('Play Next');
+  }
+}
+
+export function addPlayNextButton(player: Player, playNextURI: () => void) {
+  const controlBar = player.getChild('controlBar');
+
+  const playNext = new PlayNextButton(player, {
+    name: __('PlayNextButton'),
+    text: __('Play Next'),
+    clickHandler: () => {
+      playNextURI();
+    },
+  });
+
+  controlBar.addChild(playNext, {}, 1);
+}
diff --git a/ui/component/viewers/videoViewer/internal/videojs.jsx b/ui/component/viewers/videoViewer/internal/videojs.jsx
index fad260424..bf9a716aa 100644
--- a/ui/component/viewers/videoViewer/internal/videojs.jsx
+++ b/ui/component/viewers/videoViewer/internal/videojs.jsx
@@ -341,6 +341,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
           controlBar
             .getChild('TheaterModeButton')
             .controlText(videoTheaterMode ? __('Default Mode (t)') : __('Theater Mode (t)'));
+          controlBar.getChild('PlayNextButton').controlText(__('Play Next (SHIFT+N)'));
           break;
         default:
           if (isDev) throw Error('Unexpected: ' + e.type);
diff --git a/ui/scss/component/_button.scss b/ui/scss/component/_button.scss
index 5ab41ab9c..3c37cb9c6 100644
--- a/ui/scss/component/_button.scss
+++ b/ui/scss/component/_button.scss
@@ -132,6 +132,24 @@
   }
 }
 
+.vjs-button--play-next.vjs-button {
+  @media (min-width: $breakpoint-medium) {
+    display: block;
+    order: 0;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='feather feather-skip-forward'%3e%3cpolygon points='5 4 15 12 5 20 5 4'%3e%3c/polygon%3e%3cline x1='19' y1='5' x2='19' y2='19'%3e%3c/line%3e%3c/svg%3e");
+  }
+
+  &:focus:not(:focus-visible) {
+    display: block;
+    order: 0;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='feather feather-skip-forward'%3e%3cpolygon points='5 4 15 12 5 20 5 4'%3e%3c/polygon%3e%3cline x1='19' y1='5' x2='19' y2='19'%3e%3c/line%3e%3c/svg%3e");
+  }
+}
+
 .button--link {
   color: var(--color-link);
   transition: color 0.2s;