diff --git a/ui/component/viewers/videoViewer/internal/videojs-events.jsx b/ui/component/viewers/videoViewer/internal/videojs-events.jsx new file mode 100644 index 000000000..29db3ec50 --- /dev/null +++ b/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]); diff --git a/ui/component/viewers/videoViewer/internal/videojs-keyboard-shortcuts.jsx b/ui/component/viewers/videoViewer/internal/videojs-keyboard-shortcuts.jsx index af4f514ad..7fc8eebb8 100644 --- a/ui/component/viewers/videoViewer/internal/videojs-keyboard-shortcuts.jsx +++ b/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) { - 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(); -} +export default ({ playNext, playPrevious, toggleVideoTheaterMode }) => { + function toggleTheaterMode(playerRef) { + const player = playerRef.current; + if (!player) return; + // TODO: have to fix this + toggleVideoTheaterMode(); + if (player.isFullscreen()) { + player.exitFullscreen(); + } + } -function handleKeyDown(e: KeyboardEvent, playerRef, containerRef) { - const player = playerRef.current; - const videoNode = containerRef.current && containerRef.current.querySelector('video, audio'); - if (!videoNode || !player || isUserTyping()) return; - handleSingleKeyActions(e, playerRef, containerRef); - handleShiftKeyActions(e, playerRef); -} + function handleKeyDown(e: KeyboardEvent, playerRef, containerRef) { + const player = playerRef.current; + const videoNode = containerRef.current && containerRef.current.querySelector('video, audio'); + if (!videoNode || !player || isUserTyping()) return; + handleSingleKeyActions(e, playerRef, containerRef); + 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) { diff --git a/ui/component/viewers/videoViewer/internal/videojs.jsx b/ui/component/viewers/videoViewer/internal/videojs.jsx index 7a4aa5c39..cc1ed701f 100644 --- a/ui/component/viewers/videoViewer/internal/videojs.jsx +++ b/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, -// 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(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(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(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(function VideoJs(props: Props) { button="link" icon={ICONS.VOLUME_MUTED} className="video-js--tap-to-unmute" - onClick={unmuteAndHideHint} + // onClick={unmuteAndHideHint} ref={tapToUnmuteRef} />