Refactor "Theather Mode"

ui/component/viewers/videoViewer/internal/effects/use-theater-mode.js

@@ -0,0 +1,70 @@
+/**
+ * Videojs "Theater Mode" button.
+ *
+ * --- How to use ---
+ * Apply `useTheaterMode` in your React component. It registers an effect that
+ * listens to the given Redux state, and returns a callback for you to mount the
+ * custom videojs component.
+ *
+ * --- Notes ---
+ * Usually, custom videojs components can just listen to videojs events, query
+ * states from `player` (e.g. player.paused()) and update accordingly. But since
+ * the state comes from Redux, there will be a need to listen and pass the info
+ * to videojs somehow.
+ *
+ * Instead of going through an 'effect->css->videojs' trip, we'll just listen to
+ * the Redux state through a normal effect to update the component.
+ *
+ * This file aims to encapsulate both the React and Videojs side of things
+ * through a single `useAutoplayNext` call.
+ */
+
+// @flow
+import React from 'react';
+import videojs from 'video.js';
+import type { Player } from '../videojs';
+
+// ****************************************************************************
+// TheaterModeButton
+// ****************************************************************************
+
+class TheaterModeButton extends videojs.getComponent('Button') {
+  constructor(player, options = {}) {
+    super(player, options);
+    this.addClass('vjs-button--theater-mode');
+    this.controlText(__('Theater Mode (t)'));
+  }
+}
+
+function addTheaterModeButton(player: Player, toggleVideoTheaterMode: () => void) {
+  const controlBar = player.getChild('controlBar');
+
+  const theaterMode = new TheaterModeButton(player, {
+    name: 'TheaterModeButton',
+    text: 'Theater mode',
+    clickHandler: () => {
+      toggleVideoTheaterMode();
+    },
+  });
+
+  controlBar.addChild(theaterMode);
+}
+
+// ****************************************************************************
+// useAutoplayNext
+// ****************************************************************************
+
+export default function useTheaterMode(playerRef: any, videoTheaterMode: boolean) {
+  React.useEffect(() => {
+    const player = playerRef.current;
+    if (player) {
+      const controlBar = player.getChild('controlBar');
+      const theaterButton = controlBar.getChild('TheaterModeButton');
+      if (theaterButton) {
+        theaterButton.controlText(videoTheaterMode ? __('Default Mode (t)') : __('Theater Mode (t)'));
+      }
+    }
+  }, [videoTheaterMode]);
+
+  return addTheaterModeButton;
+}

ui/component/viewers/videoViewer/internal/plugins/videojs-i18n/plugin.js

@@ -13,7 +13,8 @@
  * static-text components.
  *
  * --- Notes ---
- * (1) 'AutoplayNextButton' handles i18n (among other things) on its own.
+ * (1) 'AutoplayNextButton' and 'TheaterModeButton' handles i18n (among other
+ * things) on its own.
  */
 
 // @flow
@@ -60,7 +61,6 @@ function resolveCtrlText(e, player) {
         setLabel(ctrlBar, 'QualityButton', __('Quality'));
         setLabel(ctrlBar, 'PlayNextButton', __('Play Next (SHIFT+N)'));
         setLabel(ctrlBar, 'PlayPreviousButton', __('Play Previous (SHIFT+P)'));
-        setLabel(ctrlBar, 'TheaterModeButton', __('Toggle Theater Mode (t)'));
         ctrlBar
           .getChild('VolumePanel')
           .getChild('MuteToggle')

ui/component/viewers/videoViewer/internal/theater-mode.js

@@ -1,25 +0,0 @@
-// @flow
-import type { Player } from './videojs';
-import videojs from 'video.js';
-
-class TheaterModeButton extends videojs.getComponent('Button') {
-  constructor(player, options = {}) {
-    super(player, options);
-    this.addClass('vjs-button--theater-mode');
-    this.controlText('Theater Mode');
-  }
-}
-
-export function addTheaterModeButton(player: Player, toggleVideoTheaterMode: () => void) {
-  const controlBar = player.getChild('controlBar');
-
-  const theaterMode = new TheaterModeButton(player, {
-    name: 'TheaterModeButton',
-    text: 'Theater mode',
-    clickHandler: () => {
-      toggleVideoTheaterMode();
-    },
-  });
-
-  controlBar.addChild(theaterMode);
-}

ui/component/viewers/videoViewer/internal/videojs-events.jsx

@@ -14,7 +14,6 @@ const VideoJsEvents = ({
   tapToUnmuteRef,
   tapToRetryRef,
   setReload,
-  videoTheaterMode,
   playerRef,
   replay,
   claimId,
@@ -30,7 +29,6 @@ const VideoJsEvents = ({
   tapToUnmuteRef: any, // DOM element
   tapToRetryRef: any, // DOM element
   setReload: any, // react hook
-  videoTheaterMode: any, // dispatch function
   playerRef: any, // DOM element
   replay: boolean,
   claimId: ?string,
@@ -128,17 +126,6 @@ const VideoJsEvents = ({
   //   }
   // }, [adUrl]);
 
-  useEffect(() => {
-    const player = playerRef.current;
-    if (player) {
-      const controlBar = player.getChild('controlBar');
-      const theaterButton = controlBar.getChild('TheaterModeButton');
-      if (theaterButton) {
-        theaterButton.controlText(videoTheaterMode ? __('Default Mode (t)') : __('Theater Mode (t)'));
-      }
-    }
-  }, [videoTheaterMode]);
-
   // when user clicks 'Unmute' button, turn audio on and hide unmute button
   function unmuteAndHideHint() {
     const player = playerRef.current;

ui/component/viewers/videoViewer/internal/videojs.jsx

@@ -87,7 +87,6 @@ type Props = {
   sourceType: string,
   startMuted: boolean,
   userId: ?number,
-  videoTheaterMode: boolean,
   defaultQuality: ?string,
   onPlayerReady: (Player, any) => void,
   playNext: () => void,
@@ -145,7 +144,6 @@ export default React.memo<Props>(function VideoJs(props: Props) {
     sourceType,
     startMuted,
     userId,
-    videoTheaterMode,
     defaultQuality,
     onPlayerReady,
     playNext,
@@ -198,7 +196,6 @@ export default React.memo<Props>(function VideoJs(props: Props) {
     tapToUnmuteRef,
     tapToRetryRef,
     setReload,
-    videoTheaterMode,
     playerRef,
     replay,
     claimValues,

ui/component/viewers/videoViewer/view.jsx

@@ -16,7 +16,7 @@ import usePrevious from 'effects/use-previous';
 import FileViewerEmbeddedEnded from 'web/component/fileViewerEmbeddedEnded';
 import FileViewerEmbeddedTitle from 'component/fileViewerEmbeddedTitle';
 import useAutoplayNext from './internal/effects/use-autoplay-next';
-import { addTheaterModeButton } from './internal/theater-mode';
+import useTheaterMode from './internal/effects/use-theater-mode';
 import { addPlayNextButton } from './internal/play-next';
 import { addPlayPreviousButton } from './internal/play-previous';
 import { useGetAds } from 'effects/use-get-ads';
@@ -155,6 +155,7 @@ function VideoViewer(props: Props) {
   const playerRef = React.useRef(null);
 
   const addAutoplayNextButton = useAutoplayNext(playerRef, autoplayNext);
+  const addTheaterModeButton = useTheaterMode(playerRef, videoTheaterMode);
 
   React.useEffect(() => {
     if (isPlaying) {
@@ -513,7 +514,6 @@ function VideoViewer(props: Props) {
         internalFeatureEnabled={internalFeature}
         shareTelemetry={shareTelemetry}
         replay={replay}
-        videoTheaterMode={videoTheaterMode}
         playNext={doPlayNext}
         playPrevious={doPlayPrevious}
         embedded={embedded}