finishing keyboard shortcuts

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

@@ -0,0 +1,196 @@
+// // Add various event listeners to player
+// player.one('play', onInitialPlay);
+// player.on('play', resolveCtrlText);
+// player.on('pause', resolveCtrlText);
+// player.on('loadstart', resolveCtrlText);
+// player.on('fullscreenchange', resolveCtrlText);
+// player.on('volumechange', resolveCtrlText);
+// player.on('volumechange', onVolumeChange);
+// player.on('error', onError);
+// player.on('ended', onEnded);
+//
+// const tapToUnmuteRef = useRef();
+// const tapToRetryRef = useRef();
+//
+// const TAP = {
+//   NONE: 'NONE',
+//   UNMUTE: 'UNMUTE',
+//   RETRY: 'RETRY',
+// };
+//
+// function showTapButton(tapButton) {
+//   const setButtonVisibility = (theRef, newState) => {
+//     // Use the DOM to control the state of the button to prevent re-renders.
+//     if (theRef.current) {
+//       const curState = theRef.current.style.visibility === 'visible';
+//       if (newState !== curState) {
+//         theRef.current.style.visibility = newState ? 'visible' : 'hidden';
+//       }
+//     }
+//   };
+//
+//   switch (tapButton) {
+//     case TAP.NONE:
+//       setButtonVisibility(/*tapToUnmuteRef*/, false);
+//       setButtonVisibility(tapToRetryRef, false);
+//       break;
+//     case TAP.UNMUTE:
+//       setButtonVisibility(tapToUnmuteRef, true);
+//       setButtonVisibility(tapToRetryRef, false);
+//       break;
+//     case TAP.RETRY:
+//       setButtonVisibility(tapToUnmuteRef, false);
+//       setButtonVisibility(tapToRetryRef, true);
+//       break;
+//     default:
+//       if (isDev) throw new Error('showTapButton: unexpected ref');
+//       break;
+//   }
+// }
+//
+// function unmuteAndHideHint() {
+//   const player = playerRef.current;
+//   if (player) {
+//     player.muted(false);
+//     if (player.volume() === 0) {
+//       player.volume(1.0);
+//     }
+//   }
+//   showTapButton(TAP.NONE);
+// }
+//
+// function retryVideoAfterFailure() {
+//   const player = playerRef.current;
+//   if (player) {
+//     setReload(Date.now());
+//     showTapButton(TAP.NONE);
+//   }
+// }
+//
+// function resolveCtrlText(e) {
+//   // 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).
+//   //
+//   // Notes:
+//   // - For dynamic controls (e.g. play/pause), those unfortunately need to be
+//   // updated again at their event-listener level (that's just the way videojs
+//   // updates the text), hence the need to listen to 'play', 'pause' and 'volumechange'
+//   // on top of just 'loadstart'.
+//   // - videojs changes the MuteToggle text at 'loadstart', so this was chosen
+//   // as the listener to update static texts.
+//
+//   const setLabel = (controlBar, childName, label) => {
+//     const c = controlBar.getChild(childName);
+//     if (c) {
+//       c.controlText(label);
+//     }
+//   };
+//
+//   const player = playerRef.current;
+//   if (player) {
+//     const ctrlBar = player.getChild('controlBar');
+//     switch (e.type) {
+//       case 'play':
+//         setLabel(ctrlBar, 'PlayToggle', __('Pause (space)'));
+//         break;
+//       case 'pause':
+//         setLabel(ctrlBar, 'PlayToggle', __('Play (space)'));
+//         break;
+//       case 'volumechange':
+//         ctrlBar
+//           .getChild('VolumePanel')
+//           .getChild('MuteToggle')
+//           .controlText(player.muted() || player.volume() === 0 ? __('Unmute (m)') : __('Mute (m)'));
+//         break;
+//       case 'fullscreenchange':
+//         setLabel(
+//           ctrlBar,
+//           'FullscreenToggle',
+//           player.isFullscreen() ? __('Exit Fullscreen (f)') : __('Fullscreen (f)')
+//         );
+//         break;
+//       case 'loadstart':
+//         // --- Do everything ---
+//         setLabel(ctrlBar, 'PlaybackRateMenuButton', __('Playback Rate (<, >)'));
+//         setLabel(ctrlBar, 'QualityButton', __('Quality'));
+//         setLabel(ctrlBar, 'PlayNextButton', __('Play Next (SHIFT+N)'));
+//         setLabel(ctrlBar, 'PlayPreviousButton', __('Play Previous (SHIFT+P)'));
+//         setLabel(ctrlBar, 'TheaterModeButton', videoTheaterMode ? __('Default Mode (t)') : __('Theater Mode (t)'));
+//         setLabel(ctrlBar, 'AutoplayNextButton', autoplaySetting ? __('Autoplay Next On') : __('Autoplay Next Off'));
+//
+//         resolveCtrlText({ type: 'play' });
+//         resolveCtrlText({ type: 'pause' });
+//         resolveCtrlText({ type: 'volumechange' });
+//         resolveCtrlText({ type: 'fullscreenchange' });
+//         break;
+//       default:
+//         if (isDev) throw Error('Unexpected: ' + e.type);
+//         break;
+//     }
+//   }
+// }
+//
+// function onInitialPlay() {
+//   const player = playerRef.current;
+//   if (player && (player.muted() || player.volume() === 0)) {
+//     // The css starts as "hidden". We make it visible here without
+//     // re-rendering the whole thing.
+//     showTapButton(TAP.UNMUTE);
+//   } else {
+//     showTapButton(TAP.NONE);
+//   }
+// }
+//
+// function onVolumeChange() {
+//   const player = playerRef.current;
+//   if (player && !player.muted()) {
+//     showTapButton(TAP.NONE);
+//   }
+// }
+//
+// function onError() {
+//   const player = playerRef.current;
+//   showTapButton(TAP.RETRY);
+//
+//   // reattach initial play listener in case we recover from error successfully
+//   // $FlowFixMe
+//   player.one('play', onInitialPlay);
+//
+//   if (player && player.loadingSpinner) {
+//     player.loadingSpinner.hide();
+//   }
+// }
+//
+// const onEnded = React.useCallback(() => {
+//   if (!adUrl) {
+//     showTapButton(TAP.NONE);
+//   }
+// }, [adUrl]);
+//
+// useEffect(() => {
+//   const player = playerRef.current;
+//   if (player) {
+//     const controlBar = player.getChild('controlBar');
+//     controlBar
+//       .getChild('TheaterModeButton')
+//       .controlText(videoTheaterMode ? __('Default Mode (t)') : __('Theater Mode (t)'));
+//   }
+// }, [videoTheaterMode]);
+//
+// useEffect(() => {
+//   const player = playerRef.current;
+//   if (player) {
+//     const touchOverlay = player.getChild('TouchOverlay');
+//     const controlBar = player.getChild('controlBar') || touchOverlay.getChild('controlBar');
+//     const autoplayButton = controlBar.getChild('AutoplayNextButton');
+//
+//     if (autoplayButton) {
+//       const title = autoplaySetting ? __('Autoplay Next On') : __('Autoplay Next Off');
+//
+//       autoplayButton.controlText(title);
+//       autoplayButton.setAttribute('aria-label', title);
+//       autoplayButton.setAttribute('aria-checked', autoplaySetting);
+//     }
+//   }
+// }, [autoplaySetting]);

ui/component/viewers/videoViewer/internal/videojs-keyboard-shortcuts.jsx

@@ -64,16 +64,6 @@ function toggleFullscreen(playerRef) {
   }
 }
 
-function toggleTheaterMode(playerRef) {
-  const player = playerRef.current;
-  if (!player) return;
-  // TODO: have to fix this
-  toggleVideoTheaterMode();
-  if (player.isFullscreen()) {
-    player.exitFullscreen();
-  }
-}
-
 function toggleMute(containerRef) {
   const videoNode = containerRef.current && containerRef.current.querySelector('video, audio');
   if (!videoNode) return;
@@ -86,22 +76,6 @@ function togglePlay(containerRef) {
   videoNode.paused ? videoNode.play() : videoNode.pause();
 }
 
-// eslint-disable-next-line flowtype/no-types-missing-file-annotation
-function handleSingleKeyActions(e: KeyboardEvent, playerRef, containerRef) {
-
-  if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
-  if (e.keyCode === KEYCODES.SPACEBAR || e.keyCode === KEYCODES.K) togglePlay(containerRef);
-  if (e.keyCode === KEYCODES.F) toggleFullscreen(playerRef);
-  if (e.keyCode === KEYCODES.M) toggleMute(containerRef);
-  if (e.keyCode === KEYCODES.UP) volumeUp(e, playerRef);
-  if (e.keyCode === KEYCODES.DOWN) volumeDown(e, playerRef);
-  if (e.keyCode === KEYCODES.T) toggleTheaterMode(playerRef);
-  if (e.keyCode === KEYCODES.L) seekVideo(SEEK_STEP, playerRef, containerRef);
-  if (e.keyCode === KEYCODES.J) seekVideo(-SEEK_STEP, playerRef, containerRef);
-  if (e.keyCode === KEYCODES.RIGHT) seekVideo(SEEK_STEP_5, playerRef, containerRef);
-  if (e.keyCode === KEYCODES.LEFT) seekVideo(-SEEK_STEP_5, playerRef, containerRef);
-}
-
 function changePlaybackSpeed(shouldSpeedUp: boolean, playerRef) {
   const player = playerRef.current;
   if (!player) return;
@@ -118,23 +92,48 @@ function changePlaybackSpeed(shouldSpeedUp: boolean, playerRef) {
   }
 }
 
-function handleShiftKeyActions(e: KeyboardEvent, playerRef) {
+export default ({ playNext, playPrevious, toggleVideoTheaterMode }) => {
-  if (e.altKey || e.ctrlKey || e.metaKey || !e.shiftKey) return;
+  function toggleTheaterMode(playerRef) {
-  if (e.keyCode === KEYCODES.PERIOD) changePlaybackSpeed(true, playerRef);
+    const player = playerRef.current;
-  if (e.keyCode === KEYCODES.COMMA) changePlaybackSpeed(false, playerRef);
+    if (!player) return;
-  if (e.keyCode === KEYCODES.N) playNext();
+    // TODO: have to fix this
-  if (e.keyCode === KEYCODES.P) playPrevious();
+    toggleVideoTheaterMode();
-}
+    if (player.isFullscreen()) {
+      player.exitFullscreen();
+    }
+  }
 
-function handleKeyDown(e: KeyboardEvent, playerRef, containerRef) {
+  function handleKeyDown(e: KeyboardEvent, playerRef, containerRef) {
-  const player = playerRef.current;
+    const player = playerRef.current;
-  const videoNode = containerRef.current && containerRef.current.querySelector('video, audio');
+    const videoNode = containerRef.current && containerRef.current.querySelector('video, audio');
-  if (!videoNode || !player || isUserTyping()) return;
+    if (!videoNode || !player || isUserTyping()) return;
-  handleSingleKeyActions(e, playerRef, containerRef);
+    handleSingleKeyActions(e, playerRef, containerRef);
-  handleShiftKeyActions(e, playerRef);
+    handleShiftKeyActions(e, playerRef);
-}
+  }
 
-export default () => {
+  function handleShiftKeyActions(e: KeyboardEvent, playerRef) {
+    if (e.altKey || e.ctrlKey || e.metaKey || !e.shiftKey) return;
+    if (e.keyCode === KEYCODES.PERIOD) changePlaybackSpeed(true, playerRef);
+    if (e.keyCode === KEYCODES.COMMA) changePlaybackSpeed(false, playerRef);
+    if (e.keyCode === KEYCODES.N) playNext();
+    if (e.keyCode === KEYCODES.P) playPrevious();
+  }
+
+  // eslint-disable-next-line flowtype/no-types-missing-file-annotation
+  function handleSingleKeyActions(e: KeyboardEvent, playerRef, containerRef) {
+
+    if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
+    if (e.keyCode === KEYCODES.SPACEBAR || e.keyCode === KEYCODES.K) togglePlay(containerRef);
+    if (e.keyCode === KEYCODES.F) toggleFullscreen(playerRef);
+    if (e.keyCode === KEYCODES.M) toggleMute(containerRef);
+    if (e.keyCode === KEYCODES.UP) volumeUp(e, playerRef);
+    if (e.keyCode === KEYCODES.DOWN) volumeDown(e, playerRef);
+    if (e.keyCode === KEYCODES.T) toggleTheaterMode(playerRef);
+    if (e.keyCode === KEYCODES.L) seekVideo(SEEK_STEP, playerRef, containerRef);
+    if (e.keyCode === KEYCODES.J) seekVideo(-SEEK_STEP, playerRef, containerRef);
+    if (e.keyCode === KEYCODES.RIGHT) seekVideo(SEEK_STEP_5, playerRef, containerRef);
+    if (e.keyCode === KEYCODES.LEFT) seekVideo(-SEEK_STEP_5, playerRef, containerRef);
+  }
 
   var curried_function = function(playerRef, containerRef) {
     return function curried_func(e) {

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

@@ -19,9 +19,6 @@ import LbryVolumeBarClass from './lbry-volume-bar';
 import keyboardShorcuts from './videojs-keyboard-shortcuts';
 import events from './videojs-events';
 
-const { curried_function } = keyboardShorcuts();
-const { initializeEvents } = events();
-
 export type Player = {
   on: (string, (any) => void) => void,
   one: (string, (any) => void) => void,
@@ -71,15 +68,6 @@ type Props = {
   playPrevious: () => void,
 };
 
-// type VideoJSOptions = {
-//   controls: boolean,
-//   preload: string,
-//   playbackRates: Array<number>,
-//   responsive: boolean,
-//   poster?: string,
-//   muted?: boolean,
-// };
-
 const videoPlaybackRates = [0.25, 0.5, 0.75, 1, 1.1, 1.25, 1.5, 1.75, 2];
 
 const IS_IOS =
@@ -134,7 +122,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
     isAudio,
     onPlayerReady,
     toggleVideoTheaterMode,
-    adUrl,
+    adUrl, // TODO: this ad functionality isn't used, can be pulled out
     claimId,
     userId,
     allowPreRoll,
@@ -146,10 +134,23 @@ export default React.memo<Props>(function VideoJs(props: Props) {
     playPrevious,
   } = props;
 
+  const { curried_function } = keyboardShorcuts({
+    toggleVideoTheaterMode,
+    playNext,
+    playPrevious,
+  });
+
+  // const { initializeEvents, unmuteAndHideHint, retryVideoAfterFailure } = events();
+
+
   const [reload, setReload] = useState('initial');
   // will later store the videojs player
   const playerRef = useRef();
   const containerRef = useRef();
+
+  const tapToUnmuteRef = useRef();
+  const tapToRetryRef = useRef();
+
   const videoJsOptions = {
     ...VIDEO_JS_OPTIONS,
     autoplay: autoplay,
@@ -232,7 +233,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
 
       runAds(internalFeatureEnabled, allowPreRoll, player);
 
-      initializeEvents(player);
+      // initializeEvents(player, tapToRetryRef, tapToUnmuteRef);
 
       // Replace volume bar with custom LBRY volume bar
       LbryVolumeBarClass.replaceExisting(player);
@@ -353,7 +354,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
         button="link"
         icon={ICONS.VOLUME_MUTED}
         className="video-js--tap-to-unmute"
-        onClick={unmuteAndHideHint}
+        // onClick={unmuteAndHideHint}
         ref={tapToUnmuteRef}
       />
       <Button
@@ -361,7 +362,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
         button="link"
         icon={ICONS.REFRESH}
         className="video-js--tap-to-unmute"
-        onClick={retryVideoAfterFailure}
+        // onClick={retryVideoAfterFailure}
         ref={tapToRetryRef}
       />
     </div>