Refactor "Theather Mode"
This commit is contained in:
parent
535d02807a
commit
5e944499f3
6 changed files with 74 additions and 45 deletions
|
@ -0,0 +1,70 @@
|
||||||
|
/**
|
||||||
|
* Videojs "Theater Mode" button.
|
||||||
|
*
|
||||||
|
* --- How to use ---
|
||||||
|
* Apply `useTheaterMode` in your React component. It registers an effect that
|
||||||
|
* listens to the given Redux state, and returns a callback for you to mount the
|
||||||
|
* custom videojs component.
|
||||||
|
*
|
||||||
|
* --- Notes ---
|
||||||
|
* Usually, custom videojs components can just listen to videojs events, query
|
||||||
|
* states from `player` (e.g. player.paused()) and update accordingly. But since
|
||||||
|
* the state comes from Redux, there will be a need to listen and pass the info
|
||||||
|
* to videojs somehow.
|
||||||
|
*
|
||||||
|
* Instead of going through an 'effect->css->videojs' trip, we'll just listen to
|
||||||
|
* the Redux state through a normal effect to update the component.
|
||||||
|
*
|
||||||
|
* This file aims to encapsulate both the React and Videojs side of things
|
||||||
|
* through a single `useAutoplayNext` call.
|
||||||
|
*/
|
||||||
|
|
||||||
|
// @flow
|
||||||
|
import React from 'react';
|
||||||
|
import videojs from 'video.js';
|
||||||
|
import type { Player } from '../videojs';
|
||||||
|
|
||||||
|
// ****************************************************************************
|
||||||
|
// TheaterModeButton
|
||||||
|
// ****************************************************************************
|
||||||
|
|
||||||
|
class TheaterModeButton extends videojs.getComponent('Button') {
|
||||||
|
constructor(player, options = {}) {
|
||||||
|
super(player, options);
|
||||||
|
this.addClass('vjs-button--theater-mode');
|
||||||
|
this.controlText(__('Theater Mode (t)'));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function addTheaterModeButton(player: Player, toggleVideoTheaterMode: () => void) {
|
||||||
|
const controlBar = player.getChild('controlBar');
|
||||||
|
|
||||||
|
const theaterMode = new TheaterModeButton(player, {
|
||||||
|
name: 'TheaterModeButton',
|
||||||
|
text: 'Theater mode',
|
||||||
|
clickHandler: () => {
|
||||||
|
toggleVideoTheaterMode();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
controlBar.addChild(theaterMode);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ****************************************************************************
|
||||||
|
// useAutoplayNext
|
||||||
|
// ****************************************************************************
|
||||||
|
|
||||||
|
export default function useTheaterMode(playerRef: any, videoTheaterMode: boolean) {
|
||||||
|
React.useEffect(() => {
|
||||||
|
const player = playerRef.current;
|
||||||
|
if (player) {
|
||||||
|
const controlBar = player.getChild('controlBar');
|
||||||
|
const theaterButton = controlBar.getChild('TheaterModeButton');
|
||||||
|
if (theaterButton) {
|
||||||
|
theaterButton.controlText(videoTheaterMode ? __('Default Mode (t)') : __('Theater Mode (t)'));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [videoTheaterMode]);
|
||||||
|
|
||||||
|
return addTheaterModeButton;
|
||||||
|
}
|
|
@ -13,7 +13,8 @@
|
||||||
* static-text components.
|
* static-text components.
|
||||||
*
|
*
|
||||||
* --- Notes ---
|
* --- Notes ---
|
||||||
* (1) 'AutoplayNextButton' handles i18n (among other things) on its own.
|
* (1) 'AutoplayNextButton' and 'TheaterModeButton' handles i18n (among other
|
||||||
|
* things) on its own.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// @flow
|
// @flow
|
||||||
|
@ -60,7 +61,6 @@ function resolveCtrlText(e, player) {
|
||||||
setLabel(ctrlBar, 'QualityButton', __('Quality'));
|
setLabel(ctrlBar, 'QualityButton', __('Quality'));
|
||||||
setLabel(ctrlBar, 'PlayNextButton', __('Play Next (SHIFT+N)'));
|
setLabel(ctrlBar, 'PlayNextButton', __('Play Next (SHIFT+N)'));
|
||||||
setLabel(ctrlBar, 'PlayPreviousButton', __('Play Previous (SHIFT+P)'));
|
setLabel(ctrlBar, 'PlayPreviousButton', __('Play Previous (SHIFT+P)'));
|
||||||
setLabel(ctrlBar, 'TheaterModeButton', __('Toggle Theater Mode (t)'));
|
|
||||||
ctrlBar
|
ctrlBar
|
||||||
.getChild('VolumePanel')
|
.getChild('VolumePanel')
|
||||||
.getChild('MuteToggle')
|
.getChild('MuteToggle')
|
||||||
|
|
|
@ -1,25 +0,0 @@
|
||||||
// @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) {
|
|
||||||
const controlBar = player.getChild('controlBar');
|
|
||||||
|
|
||||||
const theaterMode = new TheaterModeButton(player, {
|
|
||||||
name: 'TheaterModeButton',
|
|
||||||
text: 'Theater mode',
|
|
||||||
clickHandler: () => {
|
|
||||||
toggleVideoTheaterMode();
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
controlBar.addChild(theaterMode);
|
|
||||||
}
|
|
|
@ -14,7 +14,6 @@ const VideoJsEvents = ({
|
||||||
tapToUnmuteRef,
|
tapToUnmuteRef,
|
||||||
tapToRetryRef,
|
tapToRetryRef,
|
||||||
setReload,
|
setReload,
|
||||||
videoTheaterMode,
|
|
||||||
playerRef,
|
playerRef,
|
||||||
replay,
|
replay,
|
||||||
claimId,
|
claimId,
|
||||||
|
@ -30,7 +29,6 @@ const VideoJsEvents = ({
|
||||||
tapToUnmuteRef: any, // DOM element
|
tapToUnmuteRef: any, // DOM element
|
||||||
tapToRetryRef: any, // DOM element
|
tapToRetryRef: any, // DOM element
|
||||||
setReload: any, // react hook
|
setReload: any, // react hook
|
||||||
videoTheaterMode: any, // dispatch function
|
|
||||||
playerRef: any, // DOM element
|
playerRef: any, // DOM element
|
||||||
replay: boolean,
|
replay: boolean,
|
||||||
claimId: ?string,
|
claimId: ?string,
|
||||||
|
@ -128,17 +126,6 @@ const VideoJsEvents = ({
|
||||||
// }
|
// }
|
||||||
// }, [adUrl]);
|
// }, [adUrl]);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const player = playerRef.current;
|
|
||||||
if (player) {
|
|
||||||
const controlBar = player.getChild('controlBar');
|
|
||||||
const theaterButton = controlBar.getChild('TheaterModeButton');
|
|
||||||
if (theaterButton) {
|
|
||||||
theaterButton.controlText(videoTheaterMode ? __('Default Mode (t)') : __('Theater Mode (t)'));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [videoTheaterMode]);
|
|
||||||
|
|
||||||
// when user clicks 'Unmute' button, turn audio on and hide unmute button
|
// when user clicks 'Unmute' button, turn audio on and hide unmute button
|
||||||
function unmuteAndHideHint() {
|
function unmuteAndHideHint() {
|
||||||
const player = playerRef.current;
|
const player = playerRef.current;
|
||||||
|
|
|
@ -87,7 +87,6 @@ type Props = {
|
||||||
sourceType: string,
|
sourceType: string,
|
||||||
startMuted: boolean,
|
startMuted: boolean,
|
||||||
userId: ?number,
|
userId: ?number,
|
||||||
videoTheaterMode: boolean,
|
|
||||||
defaultQuality: ?string,
|
defaultQuality: ?string,
|
||||||
onPlayerReady: (Player, any) => void,
|
onPlayerReady: (Player, any) => void,
|
||||||
playNext: () => void,
|
playNext: () => void,
|
||||||
|
@ -145,7 +144,6 @@ export default React.memo<Props>(function VideoJs(props: Props) {
|
||||||
sourceType,
|
sourceType,
|
||||||
startMuted,
|
startMuted,
|
||||||
userId,
|
userId,
|
||||||
videoTheaterMode,
|
|
||||||
defaultQuality,
|
defaultQuality,
|
||||||
onPlayerReady,
|
onPlayerReady,
|
||||||
playNext,
|
playNext,
|
||||||
|
@ -198,7 +196,6 @@ export default React.memo<Props>(function VideoJs(props: Props) {
|
||||||
tapToUnmuteRef,
|
tapToUnmuteRef,
|
||||||
tapToRetryRef,
|
tapToRetryRef,
|
||||||
setReload,
|
setReload,
|
||||||
videoTheaterMode,
|
|
||||||
playerRef,
|
playerRef,
|
||||||
replay,
|
replay,
|
||||||
claimValues,
|
claimValues,
|
||||||
|
|
|
@ -16,7 +16,7 @@ import usePrevious from 'effects/use-previous';
|
||||||
import FileViewerEmbeddedEnded from 'web/component/fileViewerEmbeddedEnded';
|
import FileViewerEmbeddedEnded from 'web/component/fileViewerEmbeddedEnded';
|
||||||
import FileViewerEmbeddedTitle from 'component/fileViewerEmbeddedTitle';
|
import FileViewerEmbeddedTitle from 'component/fileViewerEmbeddedTitle';
|
||||||
import useAutoplayNext from './internal/effects/use-autoplay-next';
|
import useAutoplayNext from './internal/effects/use-autoplay-next';
|
||||||
import { addTheaterModeButton } from './internal/theater-mode';
|
import useTheaterMode from './internal/effects/use-theater-mode';
|
||||||
import { addPlayNextButton } from './internal/play-next';
|
import { addPlayNextButton } from './internal/play-next';
|
||||||
import { addPlayPreviousButton } from './internal/play-previous';
|
import { addPlayPreviousButton } from './internal/play-previous';
|
||||||
import { useGetAds } from 'effects/use-get-ads';
|
import { useGetAds } from 'effects/use-get-ads';
|
||||||
|
@ -155,6 +155,7 @@ function VideoViewer(props: Props) {
|
||||||
const playerRef = React.useRef(null);
|
const playerRef = React.useRef(null);
|
||||||
|
|
||||||
const addAutoplayNextButton = useAutoplayNext(playerRef, autoplayNext);
|
const addAutoplayNextButton = useAutoplayNext(playerRef, autoplayNext);
|
||||||
|
const addTheaterModeButton = useTheaterMode(playerRef, videoTheaterMode);
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
if (isPlaying) {
|
if (isPlaying) {
|
||||||
|
@ -513,7 +514,6 @@ function VideoViewer(props: Props) {
|
||||||
internalFeatureEnabled={internalFeature}
|
internalFeatureEnabled={internalFeature}
|
||||||
shareTelemetry={shareTelemetry}
|
shareTelemetry={shareTelemetry}
|
||||||
replay={replay}
|
replay={replay}
|
||||||
videoTheaterMode={videoTheaterMode}
|
|
||||||
playNext={doPlayNext}
|
playNext={doPlayNext}
|
||||||
playPrevious={doPlayPrevious}
|
playPrevious={doPlayPrevious}
|
||||||
embedded={embedded}
|
embedded={embedded}
|
||||||
|
|
Loading…
Reference in a new issue