Add Theater Mode to its own class and fix bar text display

ui/component/viewers/videoViewer/index.js

@@ -33,6 +33,7 @@ const select = (state, props) => {
     authenticated: selectUserVerifiedEmail(state),
     userId: userId,
     shareTelemetry: IS_WEB || selectDaemonSettings(state).share_usage_data,
+    videoTheaterMode: makeSelectClientSetting(SETTINGS.VIDEO_THEATER_MODE)(state),
   };
 };
 

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

@@ -1,16 +1,25 @@
 // @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) {
-  var myButton = player.controlBar.addChild('button', {
+  const controlBar = player.getChild('controlBar');
+
+  const theaterMode = new TheaterModeButton(player, {
+    name: 'TheaterModeButton',
     text: __('Theater mode'),
     clickHandler: () => {
       toggleVideoTheaterMode();
     },
   });
 
-  // $FlowFixMe
-  myButton.addClass('vjs-button--theater-mode');
-  // $FlowFixMe
-  myButton.setAttribute('title', __('Theater mode'));
+  controlBar.addChild(theaterMode);
 }

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

@@ -60,6 +60,7 @@ type Props = {
   // allowPreRoll: ?boolean,
   shareTelemetry: boolean,
   replay: boolean,
+  videoTheaterMode: boolean,
 };
 
 // type VideoJSOptions = {
@@ -210,6 +211,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
     // allowPreRoll,
     shareTelemetry,
     replay,
+    videoTheaterMode,
   } = props;
 
   const [reload, setReload] = useState('initial');
@@ -336,13 +338,9 @@ export default React.memo<Props>(function VideoJs(props: Props) {
           resolveCtrlText({ type: 'pause' });
           resolveCtrlText({ type: 'volumechange' });
           resolveCtrlText({ type: 'fullscreenchange' });
-          // (1) The 'Theater mode' button should probably be changed to a class
-          // so that we can use getChild() with a specific name. There might be
-          // clashes if we add a new button in the future.
-          // (2) We'll have to get 'makeSelectClientSetting(SETTINGS.VIDEO_THEATER_MODE)'
-          // as a prop here so we can say "Theater mode|Default mode" instead of
-          // "Toggle Theater mode".
-          controlBar.getChild('Button').controlText(__('Toggle Theater mode (t)'));
+          controlBar
+            .getChild('TheaterModeButton')
+            .controlText(videoTheaterMode ? __('Default Mode (t)') : __('Theater Mode (t)'));
           break;
         default:
           if (isDev) throw Error('Unexpected: ' + e.type);
@@ -642,6 +640,16 @@ export default React.memo<Props>(function VideoJs(props: Props) {
     }
   }, [replay]);
 
+  useEffect(() => {
+    const player = playerRef.current;
+    if (player) {
+      const controlBar = player.getChild('controlBar');
+      controlBar
+        .getChild('TheaterModeButton')
+        .controlText(videoTheaterMode ? __('Default Mode (t)') : __('Theater Mode (t)'));
+    }
+  }, [videoTheaterMode]);
+
   // This lifecycle hook is only called once (on mount), or when `isAudio` changes.
   useEffect(() => {
     const vjsElement = createVideoPlayerDOM(containerRef.current);

ui/component/viewers/videoViewer/view.jsx

@@ -52,6 +52,7 @@ type Props = {
   userId: number,
   homepageData?: { [string]: HomepageCat },
   shareTelemetry: boolean,
+  videoTheaterMode: boolean,
 };
 
 /*
@@ -86,6 +87,7 @@ function VideoViewer(props: Props) {
     authenticated,
     userId,
     shareTelemetry,
+    videoTheaterMode,
   } = props;
 
   const adApprovedChannelIds = homepageData ? getAllIds(homepageData) : [];
@@ -339,6 +341,7 @@ function VideoViewer(props: Props) {
           allowPreRoll={!embedded && !authenticated}
           shareTelemetry={shareTelemetry}
           replay={replay}
+          videoTheaterMode={videoTheaterMode}
         />
       )}
     </div>