running but needs some testing

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

@@ -9,8 +9,15 @@ const TAP = {
   RETRY: 'RETRY',
 };
 
-export default ({ tapToUnmuteRef, tapToRetryRef, setReload, }) => {
+const setLabel = (controlBar, childName, label) => {
-  function resolveCtrlText(e) {
+  const c = controlBar.getChild(childName);
+  if (c) {
+    c.controlText(label);
+  }
+};
+
+export default ({ tapToUnmuteRef, tapToRetryRef, setReload, videoTheaterMode,
+                  playerRef, autoplaySetting}) => {
   // Override the player's control text. We override to:
   // 1. Add keyboard shortcut to the tool-tip.
   // 2. Override videojs' i18n and use our own (don't want to have 2 systems).
@@ -23,13 +30,7 @@ export default ({ tapToUnmuteRef, tapToRetryRef, setReload, }) => {
   // - videojs changes the MuteToggle text at 'loadstart', so this was chosen
   // as the listener to update static texts.
 
-    const setLabel = (controlBar, childName, label) => {
+  function resolveCtrlText(e) {
-      const c = controlBar.getChild(childName);
-      if (c) {
-        c.controlText(label);
-      }
-    };
-
     const player = playerRef.current;
     if (player) {
       const ctrlBar = player.getChild('controlBar');
@@ -121,7 +122,7 @@ export default ({ tapToUnmuteRef, tapToRetryRef, setReload, }) => {
     }
   }, [videoTheaterMode]);
 
-
+  // when user clicks 'Unmute' button, turn audio on and hide unmute button
   function unmuteAndHideHint() {
     const player = playerRef.current;
     if (player) {
@@ -154,7 +155,7 @@ export default ({ tapToUnmuteRef, tapToRetryRef, setReload, }) => {
 
     switch (tapButton) {
       case TAP.NONE:
-        setButtonVisibility(/*tapToUnmuteRef*/, false);
+        setButtonVisibility(tapToUnmuteRef, false);
         setButtonVisibility(tapToRetryRef, false);
         break;
       case TAP.UNMUTE:
@@ -171,8 +172,9 @@ export default ({ tapToUnmuteRef, tapToRetryRef, setReload, }) => {
     }
   }
 
-
   useEffect(() => {
+    console.log('RUNNING HERE!')
+
     const player = playerRef.current;
     if (player) {
       const touchOverlay = player.getChild('TouchOverlay');
@@ -189,7 +191,6 @@ export default ({ tapToUnmuteRef, tapToRetryRef, setReload, }) => {
     }
   }, [autoplaySetting]);
 
-
   // Add various event listeners to player
   player.one('play', onInitialPlay);
   player.on('play', resolveCtrlText);
@@ -199,11 +200,10 @@ export default ({ tapToUnmuteRef, tapToRetryRef, setReload, }) => {
   player.on('volumechange', resolveCtrlText);
   player.on('volumechange', onVolumeChange);
   player.on('error', onError);
-  player.on('ended', onEnded);
+  // player.on('ended', onEnded);
-
 
   return {
-    detectFileType,
+    retryVideoAfterFailure,
-    createVideoPlayerDOM,
+    unmuteAndHideHint,
   };
 };

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

@@ -1,3 +1,4 @@
+// @flow
 export default ({ source, sourceType, videoJsOptions, isAudio }) => {
 
   function detectFileType() {

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

@@ -135,13 +135,6 @@ export default React.memo<Props>(function VideoJs(props: Props) {
     playPrevious,
   } = props;
 
-  // initiate keyboard shortcuts
-  const { curried_function } = keyboardShorcuts({ toggleVideoTheaterMode, playNext, playPrevious });
-
-  const [reload, setReload] = useState('initial');
-
-  const { initializeEvents, unmuteAndHideHint, retryVideoAfterFailure } = events(videoTheaterMode, setReload, autoplaySetting);
-
   // will later store the videojs player
   const playerRef = useRef();
   const containerRef = useRef();
@@ -149,6 +142,11 @@ export default React.memo<Props>(function VideoJs(props: Props) {
   const tapToUnmuteRef = useRef();
   const tapToRetryRef = useRef();
 
+  // initiate keyboard shortcuts
+  const { curried_function } = keyboardShorcuts({ toggleVideoTheaterMode, playNext, playPrevious });
+
+  const [reload, setReload] = useState('initial');
+
   const videoJsOptions = {
     ...VIDEO_JS_OPTIONS,
     autoplay: autoplay,
@@ -173,6 +171,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
 
   const { detectFileType, createVideoPlayerDOM } = functions({ source, sourceType, videoJsOptions, isAudio });
 
+  let unmuteAndHideHint, retryVideoAfterFailure;
   // Initialize video.js
   function initializeVideoPlayer(el) {
     if (!el) return;
@@ -185,7 +184,12 @@ export default React.memo<Props>(function VideoJs(props: Props) {
 
       runAds(internalFeatureEnabled, allowPreRoll, player);
 
-      initializeEvents({ player, tapToRetryRef, tapToUnmuteRef });
+      const videoJsEvents = events({ tapToUnmuteRef, tapToRetryRef, setReload, videoTheaterMode, playerRef, autoplaySetting, player });
+
+      unmuteAndHideHint = { events };
+      retryVideoAfterFailure = { events };
+
+      videoJsEvents.initializeEvents({ player, tapToRetryRef, tapToUnmuteRef });
 
       // Replace volume bar with custom LBRY volume bar
       LbryVolumeBarClass.replaceExisting(player);