LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Videojs component refactor (#240)

Browse source 
* pull out ads into its own file

* final touchup

* pull out lbry volume class

* using curried function

* coming along well

* almost done keyboard shortcuts

* pulling the guts out

* finishing keyboard shortcuts

* coming along well

* running but needs some testing

* almost done but could still use some testing

* all code working with some flow fixes needed

* fixing flow errors

* finishing flow errors
This commit is contained in:
mayeaux 2021-11-12 15:56:46 +01:00 committed by GitHub
parent 6f8758c819
commit 529a9cbc40
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 631 additions and 533 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
ui/analytics.js
View file

@ -277,7 +277,6 @@ const analytics: Analytics = {
videoType = passedPlayer.currentSource().type;
videoPlayer = passedPlayer;
bitrateAsBitsPerSecond = videoBitrate;
sendPromMetric('time_to_start', timeToStartVideo);
},
error: (message) => {
@ -481,7 +480,7 @@ function sendPromMetric(name: string, value?: number) {
let url = new URL(SDK_API_PATH + '/metric/ui');
const params = { name: name, value: value ? value.toString() : '' };
url.search = new URLSearchParams(params).toString();
return fetch(url, { method: 'post' });
return fetch(url, { method: 'post' }).catch(function(error) {});
}
}

97
ui/component/viewers/videoViewer/internal/ads.js Normal file
View file

@ -0,0 +1,97 @@
import videojs from 'video.js';
function hitsFiftyPercent() {
// from 0 - 999
const rand = Math.floor(Math.random() * (1000 + 1));
// 499 is 50% chance of running
if (rand > 499) {
return true;
} else {
return false;
}
}
const adTags = {
ford: '612fb75a42715a07645a614c',
live: '60b354389c7adb506d0bd9a4',
};
// Modified to work with IMA
// const vastMacroUrl =
// `https://vast.aniview.com/api/adserver61/vast/` +
// `?AV_PUBLISHERID=60afcbc58cfdb065440d2426` +
// `&AV_CHANNELID=${adTags.ford}` +
// `&AV_URL=[URL]` +
// `&cb=[CACHEBUSTING]` +
// `&AV_WIDTH=[WIDTH]` +
// `&AV_HEIGHT=[HEIGHT]` +
// // `&AV_SCHAIN=[SCHAIN_MACRO]` +
// // `&AV_CCPA=[CCPA_MACRO]` +
// // `&AV_GDPR=[GDPR_MACRO]` +
// // `&AV_CONSENT=[CONSENT_MACRO]` +
// `&skip=true` +
// `&skiptimer=5` +
// `&logo=true` +
// `&usevslot=true` +
// `&vastretry=2` +
// `&hidecontrols=false`;
// only run on chrome (brave included) and don't run on mobile for time being
const browserIsChrome = videojs.browser.IS_CHROME;
const IS_IOS = videojs.browser.IS_IOS;
const IS_ANDROID = videojs.browser.IS_ANDROID;
const IS_MOBILE = IS_IOS || IS_ANDROID;
const hitsAtFiftyPercentChance = hitsFiftyPercent();
/**
*
* @param internalFeatureEnabled
* @param allowPreRoll
* @param player
*/
function runAds(internalFeatureEnabled, allowPreRoll, player) {
// current timestamp for vpaid
const timestamp = new Date().toISOString();
const videoElement = document.getElementsByClassName('vjs-tech')[0];
// height and width of player
const height = videoElement.offsetHeight;
const width = videoElement.offsetWidth;
const vpaidMacroUrl =
'https://gov.aniview.com/api/adserver/vast3/' +
'?AV_PUBLISHERID=60afcbc58cfdb065440d2426' +
`&AV_CHANNELID=${adTags.live}` +
`&AV_URL=${encodeURIComponent(window.location.href)}` +
`&cb=${encodeURIComponent(timestamp)}` +
`&AV_WIDTH=${width}` +
`&AV_HEIGHT=${height}` +
// '&AV_SCHAIN=[SCHAIN_MACRO]' +
// '&AV_CCPA=[CCPA_MACRO]' +
// '&AV_GDPR=[GDPR_MACRO]' +
// '&AV_CONSENT=[CONSENT_MACRO]' +
`&skip=true` +
`&skiptimer=5` +
`&logo=true` +
`&usevslot=true` +
`&vastretry=2` +
`&hidecontrols=false`;
// always have ads on if internal feature is on,
// otherwise if not authed, roll for 20% to see an ad
// allowPreRoll currently means unauthenticated (don't show to logged in users)
const shouldShowAnAd = internalFeatureEnabled || (allowPreRoll && hitsAtFiftyPercentChance);
if (shouldShowAnAd && browserIsChrome && !IS_MOBILE) {
// fire up ima integration via module
player.ima({
adTagUrl: vpaidMacroUrl,
vpaidMode: 2, // 2 maps to insecure
});
}
}
export default runAds;

46
ui/component/viewers/videoViewer/internal/lbry-volume-bar.js Normal file
View file

@ -0,0 +1,46 @@
// ****************************************************************************
// LbryVolumeBarClass
// ****************************************************************************
import videojs from 'video.js';
const isDev = process.env.NODE_ENV !== 'production';
const VIDEOJS_CONTROL_BAR_CLASS = 'ControlBar';
const VIDEOJS_VOLUME_PANEL_CLASS = 'VolumePanel';
const VIDEOJS_VOLUME_CONTROL_CLASS = 'VolumeControl';
const VIDEOJS_VOLUME_BAR_CLASS = 'VolumeBar';
class LbryVolumeBarClass extends videojs.getComponent(VIDEOJS_VOLUME_BAR_CLASS) {
constructor(player, options = {}) {
super(player, options);
}
static replaceExisting(player) {
try {
const volumeControl = player
.getChild(VIDEOJS_CONTROL_BAR_CLASS)
.getChild(VIDEOJS_VOLUME_PANEL_CLASS)
.getChild(VIDEOJS_VOLUME_CONTROL_CLASS);
const volumeBar = volumeControl.getChild(VIDEOJS_VOLUME_BAR_CLASS);
volumeControl.removeChild(volumeBar);
volumeControl.addChild(new LbryVolumeBarClass(player));
} catch (error) {
// In case it slips in 'Production', the original volume bar will be used and the site should still be working
// (just not exactly the way we want).
if (isDev) throw Error('\n\nvideojs.jsx: Volume Panel hierarchy changed?\n\n' + error);
}
}
handleMouseDown(event) {
super.handleMouseDown(event);
event.stopPropagation();
}
handleMouseMove(event) {
super.handleMouseMove(event);
event.stopPropagation();
}
}
export default LbryVolumeBarClass;

236
ui/component/viewers/videoViewer/internal/videojs-events.jsx Normal file
View file

@ -0,0 +1,236 @@
// @flow
import { useEffect } from 'react';
const isDev = process.env.NODE_ENV !== 'production';
const TAP = {
NONE: 'NONE',
UNMUTE: 'UNMUTE',
RETRY: 'RETRY',
};
const setLabel = (controlBar, childName, label) => {
const c = controlBar.getChild(childName);
if (c) {
c.controlText(label);
}
};
// $FlowFixMe
const VideoJsEvents = ({
tapToUnmuteRef,
tapToRetryRef,
setReload,
videoTheaterMode,
playerRef,
autoplaySetting,
replay,
}: {
tapToUnmuteRef: any, // DOM element
tapToRetryRef: any, // DOM element
setReload: any, // react hook
videoTheaterMode: any, // dispatch function
playerRef: any, // DOM element
autoplaySetting: boolean,
replay: boolean,
}) => {
// 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.
function resolveCtrlText(e) {
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]);
// when user clicks 'Unmute' button, turn audio on and hide unmute button
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 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;
}
}
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]);
useEffect(() => {
const player = playerRef.current;
if (replay && player) {
player.play();
}
}, [replay]);
function initializeEvents() {
const player = playerRef.current;
// 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);
}
return {
retryVideoAfterFailure,
unmuteAndHideHint,
initializeEvents,
};
};
export default VideoJsEvents;

69
ui/component/viewers/videoViewer/internal/videojs-functions.jsx Normal file
View file

@ -0,0 +1,69 @@
// @flow
const VideoJsFunctions = ({
source,
sourceType,
videoJsOptions,
isAudio,
}: {
source: string,
sourceType: string,
videoJsOptions: Object,
isAudio: boolean,
}) => {
function detectFileType() {
// $FlowFixMe
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: any) {
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,
};
};
export default VideoJsFunctions;

157
ui/component/viewers/videoViewer/internal/videojs-keyboard-shortcuts.jsx Normal file
View file

@ -0,0 +1,157 @@
// @flow
import * as OVERLAY from './overlays';
import * as KEYCODES from 'constants/keycodes';
import isUserTyping from 'util/detect-typing';
const SEEK_STEP_5 = 5;
const SEEK_STEP = 10; // time to seek in seconds
const videoPlaybackRates = [0.25, 0.5, 0.75, 1, 1.1, 1.25, 1.5, 1.75, 2];
// check if active (clicked) element is part of video div, used for keyboard shortcuts (volume etc)
function activeElementIsPartOfVideoElement() {
const videoElementParent = document.getElementsByClassName('video-js-parent')[0];
const activeElement = document.activeElement;
return videoElementParent.contains(activeElement);
}
function volumeUp(event, playerRef) {
// dont run if video element is not active element (otherwise runs when scrolling using keypad)
const videoElementIsActive = activeElementIsPartOfVideoElement();
const player = playerRef.current;
if (!player || !videoElementIsActive) return;
event.preventDefault();
player.volume(player.volume() + 0.05);
OVERLAY.showVolumeverlay(player, Math.round(player.volume() * 100));
player.userActive(true);
}
function volumeDown(event, playerRef) {
// dont run if video element is not active element (otherwise runs when scrolling using keypad)
const videoElementIsActive = activeElementIsPartOfVideoElement();
const player = playerRef.current;
if (!player || !videoElementIsActive) return;
event.preventDefault();
player.volume(player.volume() - 0.05);
OVERLAY.showVolumeverlay(player, Math.round(player.volume() * 100));
player.userActive(true);
}
function seekVideo(stepSize: number, playerRef, containerRef) {
const player = playerRef.current;
const videoNode = containerRef.current && containerRef.current.querySelector('video, audio');
if (!videoNode || !player) return;
const duration = videoNode.duration;
const currentTime = videoNode.currentTime;
const newDuration = currentTime + stepSize;
if (newDuration < 0) {
videoNode.currentTime = 0;
} else if (newDuration > duration) {
videoNode.currentTime = duration;
} else {
videoNode.currentTime = newDuration;
}
OVERLAY.showSeekedOverlay(player, Math.abs(stepSize), stepSize > 0);
player.userActive(true);
}
function toggleFullscreen(playerRef) {
const player = playerRef.current;
if (!player) return;
if (!player.isFullscreen()) {
player.requestFullscreen();
} else {
player.exitFullscreen();
}
}
function toggleMute(containerRef) {
const videoNode = containerRef.current && containerRef.current.querySelector('video, audio');
if (!videoNode) return;
videoNode.muted = !videoNode.muted;
}
function togglePlay(containerRef) {
const videoNode = containerRef.current && containerRef.current.querySelector('video, audio');
if (!videoNode) return;
videoNode.paused ? videoNode.play() : videoNode.pause();
}
function changePlaybackSpeed(shouldSpeedUp: boolean, playerRef) {
const player = playerRef.current;
if (!player) return;
const isSpeedUp = shouldSpeedUp;
const rate = player.playbackRate();
let rateIndex = videoPlaybackRates.findIndex((x) => x === rate);
if (rateIndex >= 0) {
rateIndex = isSpeedUp ? Math.min(rateIndex + 1, videoPlaybackRates.length - 1) : Math.max(rateIndex - 1, 0);
const nextRate = videoPlaybackRates[rateIndex];
OVERLAY.showPlaybackRateOverlay(player, nextRate, isSpeedUp);
player.userActive(true);
player.playbackRate(nextRate);
}
}
const VideoJsKeyboardShorcuts = ({
playNext,
playPrevious,
toggleVideoTheaterMode,
}: {
playNext: any, // function
playPrevious: any, // function
toggleVideoTheaterMode: any, // function
}) => {
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 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: any, containerRef: any) {
return function curried_func(e: any) {
handleKeyDown(e, playerRef, containerRef);
};
};
return {
curried_function,
};
};
export default VideoJsKeyboardShorcuts;

556
ui/component/viewers/videoViewer/internal/videojs.jsx
View file

@ -3,11 +3,10 @@ import React, { useEffect, useRef, useState } from 'react';
// import { SIMPLE_SITE } from 'config';
import Button from 'component/button';
import * as ICONS from 'constants/icons';
import * as KEYCODES from 'constants/keycodes';
import classnames from 'classnames';
import videojs from 'video.js';
import 'videojs-contrib-ads';
import 'videojs-ima';
import 'videojs-contrib-ads'; // must be loaded in this order
import 'videojs-ima'; // loads directly after contrib-ads
import 'video.js/dist/alt/video-js-cdn.min.css';
import eventTracking from 'videojs-event-tracking';
import * as OVERLAY from './overlays';
@ -15,8 +14,11 @@ import './plugins/videojs-mobile-ui/plugin';
import hlsQualitySelector from './plugins/videojs-hls-quality-selector/plugin';
import recsys from './plugins/videojs-recsys/plugin';
import qualityLevels from 'videojs-contrib-quality-levels';
import isUserTyping from 'util/detect-typing';
const isDev = process.env.NODE_ENV !== 'production';
import runAds from './ads';
import LbryVolumeBarClass from './lbry-volume-bar';
import keyboardShorcuts from './videojs-keyboard-shortcuts';
import events from './videojs-events';
import functions from './videojs-functions';
export type Player = {
on: (string, (any) => void) => void,
@ -67,34 +69,6 @@ type Props = {
playPrevious: () => void,
};
// type VideoJSOptions = {
// controls: boolean,
// preload: string,
// playbackRates: Array<number>,
// responsive: boolean,
// poster?: string,
// muted?: boolean,
// };
function hitsFiftyPercent() {
// from 0 - 999
const rand = Math.floor(Math.random() * (1000 + 1));
// 499 is 50% chance of running
if (rand > 499) {
return true;
} else {
return false;
}
}
// check if active (clicked) element is part of video div, used for keyboard shortcuts (volume etc)
function activeElementIsPartOfVideoElement() {
const videoElementParent = document.getElementsByClassName('video-js-parent')[0];
const activeElement = document.activeElement;
return videoElementParent.contains(activeElement);
}
const videoPlaybackRates = [0.25, 0.5, 0.75, 1, 1.1, 1.25, 1.5, 1.75, 2];
const IS_IOS =
@ -114,9 +88,6 @@ const VIDEO_JS_OPTIONS = {
},
};
const SEEK_STEP_5 = 5;
const SEEK_STEP = 10; // time to seek in seconds
if (!Object.keys(videojs.getPlugins()).includes('eventTracking')) {
videojs.registerPlugin('eventTracking', eventTracking);
}
@ -133,47 +104,6 @@ if (!Object.keys(videojs.getPlugins()).includes('recsys')) {
videojs.registerPlugin('recsys', recsys);
}
// ****************************************************************************
// LbryVolumeBarClass
// ****************************************************************************
const VIDEOJS_CONTROL_BAR_CLASS = 'ControlBar';
const VIDEOJS_VOLUME_PANEL_CLASS = 'VolumePanel';
const VIDEOJS_VOLUME_CONTROL_CLASS = 'VolumeControl';
const VIDEOJS_VOLUME_BAR_CLASS = 'VolumeBar';
class LbryVolumeBarClass extends videojs.getComponent(VIDEOJS_VOLUME_BAR_CLASS) {
constructor(player, options = {}) {
super(player, options);
}
static replaceExisting(player) {
try {
const volumeControl = player
.getChild(VIDEOJS_CONTROL_BAR_CLASS)
.getChild(VIDEOJS_VOLUME_PANEL_CLASS)
.getChild(VIDEOJS_VOLUME_CONTROL_CLASS);
const volumeBar = volumeControl.getChild(VIDEOJS_VOLUME_BAR_CLASS);
volumeControl.removeChild(volumeBar);
volumeControl.addChild(new LbryVolumeBarClass(player));
} catch (error) {
// In case it slips in 'Production', the original volume bar will be used and the site should still be working
// (just not exactly the way we want).
if (isDev) throw Error('\n\nvideojs.jsx: Volume Panel hierarchy changed?\n\n' + error);
}
}
handleMouseDown(event) {
super.handleMouseDown(event);
event.stopPropagation();
}
handleMouseMove(event) {
super.handleMouseMove(event);
event.stopPropagation();
}
}
// ****************************************************************************
// VideoJs
// ****************************************************************************
@ -193,7 +123,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,
@ -205,9 +135,18 @@ export default React.memo<Props>(function VideoJs(props: Props) {
playPrevious,
} = props;
const [reload, setReload] = useState('initial');
// will later store the videojs player
const playerRef = useRef();
const containerRef = useRef();
const tapToUnmuteRef = useRef();
const tapToRetryRef = useRef();
// initiate keyboard shortcuts
const { curried_function } = keyboardShorcuts({ toggleVideoTheaterMode, playNext, playPrevious });
const [reload, setReload] = useState('initial');
const videoJsOptions = {
...VIDEO_JS_OPTIONS,
autoplay: autoplay,
@ -230,329 +169,9 @@ export default React.memo<Props>(function VideoJs(props: Props) {
},
};
const tapToUnmuteRef = useRef();
const tapToRetryRef = useRef();
const { detectFileType, createVideoPlayerDOM } = functions({ source, sourceType, videoJsOptions, isAudio });
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]);
function handleKeyDown(e: KeyboardEvent) {
const player = playerRef.current;
const videoNode = containerRef.current && containerRef.current.querySelector('video, audio');
if (!videoNode || !player || isUserTyping()) return;
handleSingleKeyActions(e);
handleShiftKeyActions(e);
}
function handleShiftKeyActions(e: KeyboardEvent) {
if (e.altKey || e.ctrlKey || e.metaKey || !e.shiftKey) return;
if (e.keyCode === KEYCODES.PERIOD) changePlaybackSpeed(true);
if (e.keyCode === KEYCODES.COMMA) changePlaybackSpeed(false);
if (e.keyCode === KEYCODES.N) playNext();
if (e.keyCode === KEYCODES.P) playPrevious();
}
function handleSingleKeyActions(e: KeyboardEvent) {
if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
if (e.keyCode === KEYCODES.SPACEBAR || e.keyCode === KEYCODES.K) togglePlay();
if (e.keyCode === KEYCODES.F) toggleFullscreen();
if (e.keyCode === KEYCODES.M) toggleMute();
if (e.keyCode === KEYCODES.UP) volumeUp(e);
if (e.keyCode === KEYCODES.DOWN) volumeDown(e);
if (e.keyCode === KEYCODES.T) toggleTheaterMode();
if (e.keyCode === KEYCODES.L) seekVideo(SEEK_STEP);
if (e.keyCode === KEYCODES.J) seekVideo(-SEEK_STEP);
if (e.keyCode === KEYCODES.RIGHT) seekVideo(SEEK_STEP_5);
if (e.keyCode === KEYCODES.LEFT) seekVideo(-SEEK_STEP_5);
}
function seekVideo(stepSize: number) {
const player = playerRef.current;
const videoNode = containerRef.current && containerRef.current.querySelector('video, audio');
if (!videoNode || !player) return;
const duration = videoNode.duration;
const currentTime = videoNode.currentTime;
const newDuration = currentTime + stepSize;
if (newDuration < 0) {
videoNode.currentTime = 0;
} else if (newDuration > duration) {
videoNode.currentTime = duration;
} else {
videoNode.currentTime = newDuration;
}
OVERLAY.showSeekedOverlay(player, Math.abs(stepSize), stepSize > 0);
player.userActive(true);
}
function changePlaybackSpeed(shouldSpeedUp: boolean) {
const player = playerRef.current;
if (!player) return;
const isSpeedUp = shouldSpeedUp;
const rate = player.playbackRate();
let rateIndex = videoPlaybackRates.findIndex((x) => x === rate);
if (rateIndex >= 0) {
rateIndex = isSpeedUp ? Math.min(rateIndex + 1, videoPlaybackRates.length - 1) : Math.max(rateIndex - 1, 0);
const nextRate = videoPlaybackRates[rateIndex];
OVERLAY.showPlaybackRateOverlay(player, nextRate, isSpeedUp);
player.userActive(true);
player.playbackRate(nextRate);
}
}
function toggleFullscreen() {
const player = playerRef.current;
if (!player) return;
if (!player.isFullscreen()) {
player.requestFullscreen();
} else {
player.exitFullscreen();
}
}
function toggleTheaterMode() {
const player = playerRef.current;
if (!player) return;
toggleVideoTheaterMode();
if (player.isFullscreen()) {
player.exitFullscreen();
}
}
function toggleMute() {
const videoNode = containerRef.current && containerRef.current.querySelector('video, audio');
if (!videoNode) return;
videoNode.muted = !videoNode.muted;
}
function togglePlay() {
const videoNode = containerRef.current && containerRef.current.querySelector('video, audio');
if (!videoNode) return;
videoNode.paused ? videoNode.play() : videoNode.pause();
}
function volumeUp(event) {
// dont run if video element is not active element (otherwise runs when scrolling using keypad)
const videoElementIsActive = activeElementIsPartOfVideoElement();
const player = playerRef.current;
if (!player || !videoElementIsActive) return;
event.preventDefault();
player.volume(player.volume() + 0.05);
OVERLAY.showVolumeverlay(player, Math.round(player.volume() * 100));
player.userActive(true);
}
function volumeDown(event) {
// dont run if video element is not active element (otherwise runs when scrolling using keypad)
const videoElementIsActive = activeElementIsPartOfVideoElement();
const player = playerRef.current;
if (!player || !videoElementIsActive) return;
event.preventDefault();
player.volume(player.volume() - 0.05);
OVERLAY.showVolumeverlay(player, Math.round(player.volume() * 100));
player.userActive(true);
}
// 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;
}
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);
}
});
}
const { unmuteAndHideHint, retryVideoAfterFailure, initializeEvents } = events({ tapToUnmuteRef, tapToRetryRef, setReload, videoTheaterMode, playerRef, autoplaySetting, replay });
// Initialize video.js
function initializeVideoPlayer(el) {
@ -564,99 +183,9 @@ export default React.memo<Props>(function VideoJs(props: Props) {
// this seems like a weird thing to have to check for here
if (!player) return;
// live channel
// 60b354389c7adb506d0bd9a4
runAds(internalFeatureEnabled, allowPreRoll, player);
// ford ad
// 612fb75a42715a07645a614c
// Modified to work with IMA
// const macroUrl =
// `https://vast.aniview.com/api/adserver61/vast/` +
// `?AV_PUBLISHERID=60afcbc58cfdb065440d2426` +
// `&AV_CHANNELID=60b354389c7adb506d0bd9a4` +
// `&AV_URL=[URL]` +
// `&cb=[CACHEBUSTING]` +
// `&AV_WIDTH=[WIDTH]` +
// `&AV_HEIGHT=[HEIGHT]` +
// // `&AV_SCHAIN=[SCHAIN_MACRO]` +
// // `&AV_CCPA=[CCPA_MACRO]` +
// // `&AV_GDPR=[GDPR_MACRO]` +
// // `&AV_CONSENT=[CONSENT_MACRO]` +
// `&skip=true` +
// `&skiptimer=5` +
// `&logo=true` +
// `&usevslot=true` +
// `&vastretry=2` +
// `&hidecontrols=false`;
const timestamp = new Date().toISOString();
const videoElement = document.getElementsByClassName('vjs-tech')[0];
const height = videoElement.offsetHeight;
const width = videoElement.offsetWidth;
// live channel
// 60b354389c7adb506d0bd9a4
// ford ad
// 612fb75a42715a07645a614c
const macroUrl1 =
'https://gov.aniview.com/api/adserver/vast3/' +
'?AV_PUBLISHERID=60afcbc58cfdb065440d2426' +
'&AV_CHANNELID=60b354389c7adb506d0bd9a4' +
`&AV_URL=${encodeURIComponent(window.location.href)}` +
`&cb=${encodeURIComponent(timestamp)}` +
`&AV_WIDTH=${width}` +
`&AV_HEIGHT=${height}` +
// '&AV_SCHAIN=[SCHAIN_MACRO]' +
// '&AV_CCPA=[CCPA_MACRO]' +
// '&AV_GDPR=[GDPR_MACRO]' +
// '&AV_CONSENT=[CONSENT_MACRO]' +
`&skip=true` +
`&skiptimer=5` +
`&logo=true` +
`&usevslot=true` +
`&vastretry=2` +
`&hidecontrols=false`;
// always have ads on if internal feature is on,
// otherwise if not authed, roll for 20% to see an ad
const shouldShowAnAd = internalFeatureEnabled || (allowPreRoll && hitsFiftyPercent());
// only run on chrome (brave included) and don't run on mobile for time being
const browserIsChrome = videojs.browser.IS_CHROME;
const IS_IOS = videojs.browser.IS_IOS;
const IS_ANDROID = videojs.browser.IS_ANDROID;
const IS_MOBILE = IS_IOS || IS_ANDROID;
if (shouldShowAnAd && browserIsChrome && !IS_MOBILE) {
// fire up ima integration via module
player.ima({
adTagUrl: macroUrl1,
vpaidMode: 2,
});
}
// kick player in the butt, sometimes it doesn't always autoplay when it should
player.on('loadstart', function (event) {
if (autoplay) {
player.play();
}
});
// 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);
initializeEvents();
// Replace volume bar with custom LBRY volume bar
LbryVolumeBarClass.replaceExisting(player);
@ -682,7 +211,6 @@ export default React.memo<Props>(function VideoJs(props: Props) {
}
// set playsinline for mobile
// TODO: make this better
player.children_[0].setAttribute('playsinline', '');
// I think this is a callback function
@ -698,40 +226,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
return vjs;
}
useEffect(() => {
const player = playerRef.current;
if (replay && player) {
player.play();
}
}, [replay]);
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]);
/** 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.
useEffect(() => {
const vjsElement = createVideoPlayerDOM(containerRef.current);
@ -747,13 +242,12 @@ export default React.memo<Props>(function VideoJs(props: Props) {
// Set reference in component state
playerRef.current = vjsPlayer;
// Add event listener for keyboard shortcuts
window.addEventListener('keydown', handleKeyDown);
window.addEventListener('keydown', curried_function(playerRef, containerRef));
});
// Cleanup
return () => {
window.removeEventListener('keydown', handleKeyDown);
window.removeEventListener('keydown', curried_function);
const player = playerRef.current;
if (player) {