finishing keyboard shortcuts
This commit is contained in:
Anthony
parent
db7e59b65e
commit
2133afff35
3 changed files with 253 additions and 57 deletions
196
ui/component/viewers/videoViewer/internal/videojs-events.jsx
Normal file
196
ui/component/viewers/videoViewer/internal/videojs-events.jsx
Normal file
|
|
@ -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]);
|
||||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue