coming along well
This commit is contained in:
Anthony
parent
2133afff35
commit
be4b8a4631
3 changed files with 277 additions and 255 deletions
|
|
@ -1,196 +1,209 @@
|
||||||
// // Add various event listeners to player
|
// @flow
|
||||||
// player.one('play', onInitialPlay);
|
import React, { useEffect, useRef, useState } from 'react';
|
||||||
// player.on('play', resolveCtrlText);
|
|
||||||
// player.on('pause', resolveCtrlText);
|
const isDev = process.env.NODE_ENV !== 'production';
|
||||||
// player.on('loadstart', resolveCtrlText);
|
|
||||||
// player.on('fullscreenchange', resolveCtrlText);
|
const TAP = {
|
||||||
// player.on('volumechange', resolveCtrlText);
|
NONE: 'NONE',
|
||||||
// player.on('volumechange', onVolumeChange);
|
UNMUTE: 'UNMUTE',
|
||||||
// player.on('error', onError);
|
RETRY: 'RETRY',
|
||||||
// player.on('ended', onEnded);
|
};
|
||||||
//
|
|
||||||
// const tapToUnmuteRef = useRef();
|
export default ({ tapToUnmuteRef, tapToRetryRef, setReload, }) => {
|
||||||
// const tapToRetryRef = useRef();
|
function resolveCtrlText(e) {
|
||||||
//
|
// Override the player's control text. We override to:
|
||||||
// const TAP = {
|
// 1. Add keyboard shortcut to the tool-tip.
|
||||||
// NONE: 'NONE',
|
// 2. Override videojs' i18n and use our own (don't want to have 2 systems).
|
||||||
// UNMUTE: 'UNMUTE',
|
//
|
||||||
// RETRY: 'RETRY',
|
// 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
|
||||||
// function showTapButton(tapButton) {
|
// updates the text), hence the need to listen to 'play', 'pause' and 'volumechange'
|
||||||
// const setButtonVisibility = (theRef, newState) => {
|
// on top of just 'loadstart'.
|
||||||
// // Use the DOM to control the state of the button to prevent re-renders.
|
// - videojs changes the MuteToggle text at 'loadstart', so this was chosen
|
||||||
// if (theRef.current) {
|
// as the listener to update static texts.
|
||||||
// const curState = theRef.current.style.visibility === 'visible';
|
|
||||||
// if (newState !== curState) {
|
const setLabel = (controlBar, childName, label) => {
|
||||||
// theRef.current.style.visibility = newState ? 'visible' : 'hidden';
|
const c = controlBar.getChild(childName);
|
||||||
// }
|
if (c) {
|
||||||
// }
|
c.controlText(label);
|
||||||
// };
|
}
|
||||||
//
|
};
|
||||||
// switch (tapButton) {
|
|
||||||
// case TAP.NONE:
|
const player = playerRef.current;
|
||||||
// setButtonVisibility(/*tapToUnmuteRef*/, false);
|
if (player) {
|
||||||
// setButtonVisibility(tapToRetryRef, false);
|
const ctrlBar = player.getChild('controlBar');
|
||||||
// break;
|
switch (e.type) {
|
||||||
// case TAP.UNMUTE:
|
case 'play':
|
||||||
// setButtonVisibility(tapToUnmuteRef, true);
|
setLabel(ctrlBar, 'PlayToggle', __('Pause (space)'));
|
||||||
// setButtonVisibility(tapToRetryRef, false);
|
break;
|
||||||
// break;
|
case 'pause':
|
||||||
// case TAP.RETRY:
|
setLabel(ctrlBar, 'PlayToggle', __('Play (space)'));
|
||||||
// setButtonVisibility(tapToUnmuteRef, false);
|
break;
|
||||||
// setButtonVisibility(tapToRetryRef, true);
|
case 'volumechange':
|
||||||
// break;
|
ctrlBar
|
||||||
// default:
|
.getChild('VolumePanel')
|
||||||
// if (isDev) throw new Error('showTapButton: unexpected ref');
|
.getChild('MuteToggle')
|
||||||
// break;
|
.controlText(player.muted() || player.volume() === 0 ? __('Unmute (m)') : __('Mute (m)'));
|
||||||
// }
|
break;
|
||||||
// }
|
case 'fullscreenchange':
|
||||||
//
|
setLabel(
|
||||||
// function unmuteAndHideHint() {
|
ctrlBar,
|
||||||
// const player = playerRef.current;
|
'FullscreenToggle',
|
||||||
// if (player) {
|
player.isFullscreen() ? __('Exit Fullscreen (f)') : __('Fullscreen (f)')
|
||||||
// player.muted(false);
|
);
|
||||||
// if (player.volume() === 0) {
|
break;
|
||||||
// player.volume(1.0);
|
case 'loadstart':
|
||||||
// }
|
// --- Do everything ---
|
||||||
// }
|
setLabel(ctrlBar, 'PlaybackRateMenuButton', __('Playback Rate (<, >)'));
|
||||||
// showTapButton(TAP.NONE);
|
setLabel(ctrlBar, 'QualityButton', __('Quality'));
|
||||||
// }
|
setLabel(ctrlBar, 'PlayNextButton', __('Play Next (SHIFT+N)'));
|
||||||
//
|
setLabel(ctrlBar, 'PlayPreviousButton', __('Play Previous (SHIFT+P)'));
|
||||||
// function retryVideoAfterFailure() {
|
setLabel(ctrlBar, 'TheaterModeButton', videoTheaterMode ? __('Default Mode (t)') : __('Theater Mode (t)'));
|
||||||
// const player = playerRef.current;
|
setLabel(ctrlBar, 'AutoplayNextButton', autoplaySetting ? __('Autoplay Next On') : __('Autoplay Next Off'));
|
||||||
// if (player) {
|
|
||||||
// setReload(Date.now());
|
resolveCtrlText({ type: 'play' });
|
||||||
// showTapButton(TAP.NONE);
|
resolveCtrlText({ type: 'pause' });
|
||||||
// }
|
resolveCtrlText({ type: 'volumechange' });
|
||||||
// }
|
resolveCtrlText({ type: 'fullscreenchange' });
|
||||||
//
|
break;
|
||||||
// function resolveCtrlText(e) {
|
default:
|
||||||
// // Override the player's control text. We override to:
|
if (isDev) throw Error('Unexpected: ' + e.type);
|
||||||
// // 1. Add keyboard shortcut to the tool-tip.
|
break;
|
||||||
// // 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
|
function onInitialPlay() {
|
||||||
// // updates the text), hence the need to listen to 'play', 'pause' and 'volumechange'
|
const player = playerRef.current;
|
||||||
// // on top of just 'loadstart'.
|
if (player && (player.muted() || player.volume() === 0)) {
|
||||||
// // - videojs changes the MuteToggle text at 'loadstart', so this was chosen
|
// The css starts as "hidden". We make it visible here without
|
||||||
// // as the listener to update static texts.
|
// re-rendering the whole thing.
|
||||||
//
|
showTapButton(TAP.UNMUTE);
|
||||||
// const setLabel = (controlBar, childName, label) => {
|
} else {
|
||||||
// const c = controlBar.getChild(childName);
|
showTapButton(TAP.NONE);
|
||||||
// if (c) {
|
}
|
||||||
// c.controlText(label);
|
}
|
||||||
// }
|
|
||||||
// };
|
function onVolumeChange() {
|
||||||
//
|
const player = playerRef.current;
|
||||||
// const player = playerRef.current;
|
if (player && !player.muted()) {
|
||||||
// if (player) {
|
showTapButton(TAP.NONE);
|
||||||
// const ctrlBar = player.getChild('controlBar');
|
}
|
||||||
// switch (e.type) {
|
}
|
||||||
// case 'play':
|
|
||||||
// setLabel(ctrlBar, 'PlayToggle', __('Pause (space)'));
|
function onError() {
|
||||||
// break;
|
const player = playerRef.current;
|
||||||
// case 'pause':
|
showTapButton(TAP.RETRY);
|
||||||
// setLabel(ctrlBar, 'PlayToggle', __('Play (space)'));
|
|
||||||
// break;
|
// reattach initial play listener in case we recover from error successfully
|
||||||
// case 'volumechange':
|
// $FlowFixMe
|
||||||
// ctrlBar
|
player.one('play', onInitialPlay);
|
||||||
// .getChild('VolumePanel')
|
|
||||||
// .getChild('MuteToggle')
|
if (player && player.loadingSpinner) {
|
||||||
// .controlText(player.muted() || player.volume() === 0 ? __('Unmute (m)') : __('Mute (m)'));
|
player.loadingSpinner.hide();
|
||||||
// break;
|
}
|
||||||
// case 'fullscreenchange':
|
}
|
||||||
// setLabel(
|
|
||||||
// ctrlBar,
|
// const onEnded = React.useCallback(() => {
|
||||||
// 'FullscreenToggle',
|
// if (!adUrl) {
|
||||||
// player.isFullscreen() ? __('Exit Fullscreen (f)') : __('Fullscreen (f)')
|
// showTapButton(TAP.NONE);
|
||||||
// );
|
// }
|
||||||
// break;
|
// }, [adUrl]);
|
||||||
// case 'loadstart':
|
|
||||||
// // --- Do everything ---
|
useEffect(() => {
|
||||||
// setLabel(ctrlBar, 'PlaybackRateMenuButton', __('Playback Rate (<, >)'));
|
const player = playerRef.current;
|
||||||
// setLabel(ctrlBar, 'QualityButton', __('Quality'));
|
if (player) {
|
||||||
// setLabel(ctrlBar, 'PlayNextButton', __('Play Next (SHIFT+N)'));
|
const controlBar = player.getChild('controlBar');
|
||||||
// setLabel(ctrlBar, 'PlayPreviousButton', __('Play Previous (SHIFT+P)'));
|
controlBar
|
||||||
// setLabel(ctrlBar, 'TheaterModeButton', videoTheaterMode ? __('Default Mode (t)') : __('Theater Mode (t)'));
|
.getChild('TheaterModeButton')
|
||||||
// setLabel(ctrlBar, 'AutoplayNextButton', autoplaySetting ? __('Autoplay Next On') : __('Autoplay Next Off'));
|
.controlText(videoTheaterMode ? __('Default Mode (t)') : __('Theater Mode (t)'));
|
||||||
//
|
}
|
||||||
// resolveCtrlText({ type: 'play' });
|
}, [videoTheaterMode]);
|
||||||
// resolveCtrlText({ type: 'pause' });
|
|
||||||
// resolveCtrlText({ type: 'volumechange' });
|
|
||||||
// resolveCtrlText({ type: 'fullscreenchange' });
|
function unmuteAndHideHint() {
|
||||||
// break;
|
const player = playerRef.current;
|
||||||
// default:
|
if (player) {
|
||||||
// if (isDev) throw Error('Unexpected: ' + e.type);
|
player.muted(false);
|
||||||
// break;
|
if (player.volume() === 0) {
|
||||||
// }
|
player.volume(1.0);
|
||||||
// }
|
}
|
||||||
// }
|
}
|
||||||
//
|
showTapButton(TAP.NONE);
|
||||||
// function onInitialPlay() {
|
}
|
||||||
// const player = playerRef.current;
|
|
||||||
// if (player && (player.muted() || player.volume() === 0)) {
|
function retryVideoAfterFailure() {
|
||||||
// // The css starts as "hidden". We make it visible here without
|
const player = playerRef.current;
|
||||||
// // re-rendering the whole thing.
|
if (player) {
|
||||||
// showTapButton(TAP.UNMUTE);
|
setReload(Date.now());
|
||||||
// } else {
|
showTapButton(TAP.NONE);
|
||||||
// showTapButton(TAP.NONE);
|
}
|
||||||
// }
|
}
|
||||||
// }
|
|
||||||
//
|
function showTapButton(tapButton) {
|
||||||
// function onVolumeChange() {
|
const setButtonVisibility = (theRef, newState) => {
|
||||||
// const player = playerRef.current;
|
// Use the DOM to control the state of the button to prevent re-renders.
|
||||||
// if (player && !player.muted()) {
|
if (theRef.current) {
|
||||||
// showTapButton(TAP.NONE);
|
const curState = theRef.current.style.visibility === 'visible';
|
||||||
// }
|
if (newState !== curState) {
|
||||||
// }
|
theRef.current.style.visibility = newState ? 'visible' : 'hidden';
|
||||||
//
|
}
|
||||||
// function onError() {
|
}
|
||||||
// const player = playerRef.current;
|
};
|
||||||
// showTapButton(TAP.RETRY);
|
|
||||||
//
|
switch (tapButton) {
|
||||||
// // reattach initial play listener in case we recover from error successfully
|
case TAP.NONE:
|
||||||
// // $FlowFixMe
|
setButtonVisibility(/*tapToUnmuteRef*/, false);
|
||||||
// player.one('play', onInitialPlay);
|
setButtonVisibility(tapToRetryRef, false);
|
||||||
//
|
break;
|
||||||
// if (player && player.loadingSpinner) {
|
case TAP.UNMUTE:
|
||||||
// player.loadingSpinner.hide();
|
setButtonVisibility(tapToUnmuteRef, true);
|
||||||
// }
|
setButtonVisibility(tapToRetryRef, false);
|
||||||
// }
|
break;
|
||||||
//
|
case TAP.RETRY:
|
||||||
// const onEnded = React.useCallback(() => {
|
setButtonVisibility(tapToUnmuteRef, false);
|
||||||
// if (!adUrl) {
|
setButtonVisibility(tapToRetryRef, true);
|
||||||
// showTapButton(TAP.NONE);
|
break;
|
||||||
// }
|
default:
|
||||||
// }, [adUrl]);
|
if (isDev) throw new Error('showTapButton: unexpected ref');
|
||||||
//
|
break;
|
||||||
// useEffect(() => {
|
}
|
||||||
// const player = playerRef.current;
|
}
|
||||||
// if (player) {
|
|
||||||
// const controlBar = player.getChild('controlBar');
|
|
||||||
// controlBar
|
useEffect(() => {
|
||||||
// .getChild('TheaterModeButton')
|
const player = playerRef.current;
|
||||||
// .controlText(videoTheaterMode ? __('Default Mode (t)') : __('Theater Mode (t)'));
|
if (player) {
|
||||||
// }
|
const touchOverlay = player.getChild('TouchOverlay');
|
||||||
// }, [videoTheaterMode]);
|
const controlBar = player.getChild('controlBar') || touchOverlay.getChild('controlBar');
|
||||||
//
|
const autoplayButton = controlBar.getChild('AutoplayNextButton');
|
||||||
// useEffect(() => {
|
|
||||||
// const player = playerRef.current;
|
if (autoplayButton) {
|
||||||
// if (player) {
|
const title = autoplaySetting ? __('Autoplay Next On') : __('Autoplay Next Off');
|
||||||
// const touchOverlay = player.getChild('TouchOverlay');
|
|
||||||
// const controlBar = player.getChild('controlBar') || touchOverlay.getChild('controlBar');
|
autoplayButton.controlText(title);
|
||||||
// const autoplayButton = controlBar.getChild('AutoplayNextButton');
|
autoplayButton.setAttribute('aria-label', title);
|
||||||
//
|
autoplayButton.setAttribute('aria-checked', autoplaySetting);
|
||||||
// if (autoplayButton) {
|
}
|
||||||
// const title = autoplaySetting ? __('Autoplay Next On') : __('Autoplay Next Off');
|
}
|
||||||
//
|
}, [autoplaySetting]);
|
||||||
// autoplayButton.controlText(title);
|
|
||||||
// autoplayButton.setAttribute('aria-label', title);
|
|
||||||
// autoplayButton.setAttribute('aria-checked', autoplaySetting);
|
// Add various event listeners to player
|
||||||
// }
|
player.one('play', onInitialPlay);
|
||||||
// }
|
player.on('play', resolveCtrlText);
|
||||||
// }, [autoplaySetting]);
|
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);
|
||||||
|
|
||||||
|
|
||||||
|
return {
|
||||||
|
detectFileType,
|
||||||
|
createVideoPlayerDOM,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,56 @@
|
||||||
|
export default ({ source, sourceType, videoJsOptions, isAudio }) => {
|
||||||
|
|
||||||
|
function detectFileType() {
|
||||||
|
return new Promise(async (res, rej) => {
|
||||||
|
try {
|
||||||
|
const response = await fetch(source, { method: 'HEAD', cache: 'no-store' });
|
||||||
|
|
||||||
|
// Temp variables to hold results
|
||||||
|
let finalType = sourceType;
|
||||||
|
let finalSource = source;
|
||||||
|
|
||||||
|
// override type if we receive an .m3u8 (transcoded mp4)
|
||||||
|
// do we need to check if explicitly redirected
|
||||||
|
// or is checking extension only a safer method
|
||||||
|
if (response && response.redirected && response.url && response.url.endsWith('m3u8')) {
|
||||||
|
finalType = 'application/x-mpegURL';
|
||||||
|
finalSource = response.url;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Modify video source in options
|
||||||
|
videoJsOptions.sources = [
|
||||||
|
{
|
||||||
|
src: finalSource,
|
||||||
|
type: finalType,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return res(videoJsOptions);
|
||||||
|
} catch (error) {
|
||||||
|
return rej(error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: can remove this function as well
|
||||||
|
// Create the video DOM element and wrapper
|
||||||
|
function createVideoPlayerDOM(container) {
|
||||||
|
if (!container) return;
|
||||||
|
|
||||||
|
// This seems like a poor way to generate the DOM for video.js
|
||||||
|
const wrapper = document.createElement('div');
|
||||||
|
wrapper.setAttribute('data-vjs-player', 'true');
|
||||||
|
const el = document.createElement(isAudio ? 'audio' : 'video');
|
||||||
|
el.className = 'video-js vjs-big-play-centered ';
|
||||||
|
wrapper.appendChild(el);
|
||||||
|
|
||||||
|
container.appendChild(wrapper);
|
||||||
|
|
||||||
|
return el;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
detectFileType,
|
||||||
|
createVideoPlayerDOM,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
@ -18,6 +18,7 @@ import runAds from './ads';
|
||||||
import LbryVolumeBarClass from './lbry-volume-bar';
|
import LbryVolumeBarClass from './lbry-volume-bar';
|
||||||
import keyboardShorcuts from './videojs-keyboard-shortcuts';
|
import keyboardShorcuts from './videojs-keyboard-shortcuts';
|
||||||
import events from './videojs-events';
|
import events from './videojs-events';
|
||||||
|
import functions from './videojs-functions';
|
||||||
|
|
||||||
export type Player = {
|
export type Player = {
|
||||||
on: (string, (any) => void) => void,
|
on: (string, (any) => void) => void,
|
||||||
|
|
@ -134,16 +135,13 @@ export default React.memo<Props>(function VideoJs(props: Props) {
|
||||||
playPrevious,
|
playPrevious,
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
const { curried_function } = keyboardShorcuts({
|
// initiate keyboard shortcuts
|
||||||
toggleVideoTheaterMode,
|
const { curried_function } = keyboardShorcuts({ toggleVideoTheaterMode, playNext, playPrevious });
|
||||||
playNext,
|
|
||||||
playPrevious,
|
|
||||||
});
|
|
||||||
|
|
||||||
// const { initializeEvents, unmuteAndHideHint, retryVideoAfterFailure } = events();
|
|
||||||
|
|
||||||
|
|
||||||
const [reload, setReload] = useState('initial');
|
const [reload, setReload] = useState('initial');
|
||||||
|
|
||||||
|
const { initializeEvents, unmuteAndHideHint, retryVideoAfterFailure } = events(videoTheaterMode, setReload, autoplaySetting);
|
||||||
|
|
||||||
// will later store the videojs player
|
// will later store the videojs player
|
||||||
const playerRef = useRef();
|
const playerRef = useRef();
|
||||||
const containerRef = useRef();
|
const containerRef = useRef();
|
||||||
|
|
@ -173,53 +171,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
// Create the video DOM element and wrapper
|
const { detectFileType, createVideoPlayerDOM } = functions({ source, sourceType, videoJsOptions, isAudio });
|
||||||
function createVideoPlayerDOM(container) {
|
|
||||||
if (!container) return;
|
|
||||||
|
|
||||||
// This seems like a poor way to generate the DOM for video.js
|
|
||||||
const wrapper = document.createElement('div');
|
|
||||||
wrapper.setAttribute('data-vjs-player', 'true');
|
|
||||||
const el = document.createElement(isAudio ? 'audio' : 'video');
|
|
||||||
el.className = 'video-js vjs-big-play-centered ';
|
|
||||||
wrapper.appendChild(el);
|
|
||||||
|
|
||||||
container.appendChild(wrapper);
|
|
||||||
|
|
||||||
return el;
|
|
||||||
}
|
|
||||||
|
|
||||||
function detectFileType() {
|
|
||||||
return new Promise(async (res, rej) => {
|
|
||||||
try {
|
|
||||||
const response = await fetch(source, { method: 'HEAD', cache: 'no-store' });
|
|
||||||
|
|
||||||
// Temp variables to hold results
|
|
||||||
let finalType = sourceType;
|
|
||||||
let finalSource = source;
|
|
||||||
|
|
||||||
// override type if we receive an .m3u8 (transcoded mp4)
|
|
||||||
// do we need to check if explicitly redirected
|
|
||||||
// or is checking extension only a safer method
|
|
||||||
if (response && response.redirected && response.url && response.url.endsWith('m3u8')) {
|
|
||||||
finalType = 'application/x-mpegURL';
|
|
||||||
finalSource = response.url;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Modify video source in options
|
|
||||||
videoJsOptions.sources = [
|
|
||||||
{
|
|
||||||
src: finalSource,
|
|
||||||
type: finalType,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
return res(videoJsOptions);
|
|
||||||
} catch (error) {
|
|
||||||
return rej(error);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize video.js
|
// Initialize video.js
|
||||||
function initializeVideoPlayer(el) {
|
function initializeVideoPlayer(el) {
|
||||||
|
|
@ -233,7 +185,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
|
||||||
|
|
||||||
runAds(internalFeatureEnabled, allowPreRoll, player);
|
runAds(internalFeatureEnabled, allowPreRoll, player);
|
||||||
|
|
||||||
// initializeEvents(player, tapToRetryRef, tapToUnmuteRef);
|
initializeEvents({ player, tapToRetryRef, tapToUnmuteRef });
|
||||||
|
|
||||||
// Replace volume bar with custom LBRY volume bar
|
// Replace volume bar with custom LBRY volume bar
|
||||||
LbryVolumeBarClass.replaceExisting(player);
|
LbryVolumeBarClass.replaceExisting(player);
|
||||||
|
|
@ -259,7 +211,6 @@ export default React.memo<Props>(function VideoJs(props: Props) {
|
||||||
}
|
}
|
||||||
|
|
||||||
// set playsinline for mobile
|
// set playsinline for mobile
|
||||||
// TODO: make this better
|
|
||||||
player.children_[0].setAttribute('playsinline', '');
|
player.children_[0].setAttribute('playsinline', '');
|
||||||
|
|
||||||
// I think this is a callback function
|
// I think this is a callback function
|
||||||
|
|
@ -275,6 +226,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
|
||||||
return vjs;
|
return vjs;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// todo: what does this do exactly?
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const player = playerRef.current;
|
const player = playerRef.current;
|
||||||
if (replay && player) {
|
if (replay && player) {
|
||||||
|
|
@ -282,6 +234,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
|
||||||
}
|
}
|
||||||
}, [replay]);
|
}, [replay]);
|
||||||
|
|
||||||
|
/** instantiate videoJS and dispose of it when done with code **/
|
||||||
// This lifecycle hook is only called once (on mount), or when `isAudio` or `source` changes.
|
// This lifecycle hook is only called once (on mount), or when `isAudio` or `source` changes.
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const vjsElement = createVideoPlayerDOM(containerRef.current);
|
const vjsElement = createVideoPlayerDOM(containerRef.current);
|
||||||
|
|
@ -354,7 +307,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
|
||||||
button="link"
|
button="link"
|
||||||
icon={ICONS.VOLUME_MUTED}
|
icon={ICONS.VOLUME_MUTED}
|
||||||
className="video-js--tap-to-unmute"
|
className="video-js--tap-to-unmute"
|
||||||
// onClick={unmuteAndHideHint}
|
onClick={unmuteAndHideHint}
|
||||||
ref={tapToUnmuteRef}
|
ref={tapToUnmuteRef}
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
|
|
@ -362,7 +315,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
|
||||||
button="link"
|
button="link"
|
||||||
icon={ICONS.REFRESH}
|
icon={ICONS.REFRESH}
|
||||||
className="video-js--tap-to-unmute"
|
className="video-js--tap-to-unmute"
|
||||||
// onClick={retryVideoAfterFailure}
|
onClick={retryVideoAfterFailure}
|
||||||
ref={tapToRetryRef}
|
ref={tapToRetryRef}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue