2020-04-16 23:43:09 +02:00
|
|
|
// @flow
|
2020-07-15 13:20:27 +02:00
|
|
|
import React, { useEffect, useRef, useState } from 'react';
|
2021-07-20 17:30:12 +02:00
|
|
|
// import { SIMPLE_SITE } from 'config';
|
2020-06-10 15:01:54 +02:00
|
|
|
import Button from 'component/button';
|
|
|
|
import * as ICONS from 'constants/icons';
|
2020-04-28 21:33:30 +02:00
|
|
|
import classnames from 'classnames';
|
2021-07-01 04:12:21 +02:00
|
|
|
import videojs from 'video.js';
|
2021-07-06 11:02:05 +02:00
|
|
|
import 'video.js/dist/alt/video-js-cdn.min.css';
|
2020-04-16 01:21:17 +02:00
|
|
|
import eventTracking from 'videojs-event-tracking';
|
2020-12-14 17:40:59 +01:00
|
|
|
import * as OVERLAY from './overlays';
|
2020-12-19 07:42:48 +01:00
|
|
|
import './plugins/videojs-mobile-ui/plugin';
|
2021-02-18 03:53:25 +01:00
|
|
|
import hlsQualitySelector from './plugins/videojs-hls-quality-selector/plugin';
|
2021-06-29 03:51:04 +02:00
|
|
|
import recsys from './plugins/videojs-recsys/plugin';
|
2021-01-14 20:43:16 +01:00
|
|
|
import qualityLevels from 'videojs-contrib-quality-levels';
|
2020-04-16 23:43:09 +02:00
|
|
|
import isUserTyping from 'util/detect-typing';
|
2021-07-20 17:30:12 +02:00
|
|
|
// import './plugins/videojs-aniview/plugin';
|
2020-10-30 05:19:05 +01:00
|
|
|
|
2020-07-15 13:20:27 +02:00
|
|
|
const isDev = process.env.NODE_ENV !== 'production';
|
2020-04-16 01:21:17 +02:00
|
|
|
|
2020-04-28 21:33:30 +02:00
|
|
|
export type Player = {
|
|
|
|
on: (string, (any) => void) => void,
|
2020-06-10 15:01:54 +02:00
|
|
|
one: (string, (any) => void) => void,
|
2020-04-28 21:33:30 +02:00
|
|
|
isFullscreen: () => boolean,
|
|
|
|
exitFullscreen: () => boolean,
|
|
|
|
requestFullscreen: () => boolean,
|
|
|
|
play: () => Promise<any>,
|
|
|
|
volume: (?number) => number,
|
|
|
|
muted: (?boolean) => boolean,
|
|
|
|
dispose: () => void,
|
2020-04-30 09:49:52 +02:00
|
|
|
currentTime: (?number) => number,
|
2020-05-15 03:18:54 +02:00
|
|
|
ended: () => boolean,
|
2020-05-21 17:38:28 +02:00
|
|
|
error: () => any,
|
2020-07-15 10:50:25 +02:00
|
|
|
loadingSpinner: any,
|
2021-02-17 03:05:23 +01:00
|
|
|
getChild: (string) => any,
|
2020-11-20 10:40:25 +01:00
|
|
|
playbackRate: (?number) => number,
|
2021-02-17 18:01:12 +01:00
|
|
|
readyState: () => number,
|
2020-11-20 10:40:25 +01:00
|
|
|
userActive: (?boolean) => boolean,
|
2021-02-17 03:05:23 +01:00
|
|
|
overlay: (any) => void,
|
|
|
|
mobileUi: (any) => void,
|
2021-01-08 16:21:27 +01:00
|
|
|
controlBar: {
|
|
|
|
addChild: (string, any) => void,
|
|
|
|
},
|
2021-05-19 17:56:54 +02:00
|
|
|
autoplay: (any) => boolean,
|
2020-04-28 21:33:30 +02:00
|
|
|
};
|
|
|
|
|
2020-04-16 01:21:17 +02:00
|
|
|
type Props = {
|
|
|
|
source: string,
|
|
|
|
sourceType: string,
|
2020-04-28 21:33:30 +02:00
|
|
|
poster: ?string,
|
2021-02-17 03:05:23 +01:00
|
|
|
onPlayerReady: (Player) => void,
|
2020-04-16 01:21:17 +02:00
|
|
|
isAudio: boolean,
|
2020-04-24 22:40:31 +02:00
|
|
|
startMuted: boolean,
|
2021-01-27 14:49:30 +01:00
|
|
|
autoplay: boolean,
|
2021-01-20 09:50:16 +01:00
|
|
|
toggleVideoTheaterMode: () => void,
|
2021-04-12 18:43:47 +02:00
|
|
|
adUrl: ?string,
|
2021-06-29 03:51:04 +02:00
|
|
|
claimId: ?string,
|
|
|
|
userId: ?number,
|
2021-06-30 18:29:00 +02:00
|
|
|
allowPreRoll: ?boolean,
|
2020-04-16 01:21:17 +02:00
|
|
|
};
|
|
|
|
|
2021-07-19 18:54:05 +02:00
|
|
|
// type VideoJSOptions = {
|
|
|
|
// controls: boolean,
|
|
|
|
// preload: string,
|
|
|
|
// playbackRates: Array<number>,
|
|
|
|
// responsive: boolean,
|
|
|
|
// poster?: string,
|
|
|
|
// muted?: boolean,
|
|
|
|
// };
|
2020-04-16 01:21:17 +02:00
|
|
|
|
2020-11-20 10:40:25 +01:00
|
|
|
const videoPlaybackRates = [0.25, 0.5, 0.75, 1, 1.1, 1.25, 1.5, 1.75, 2];
|
|
|
|
|
2020-05-25 16:36:17 +02:00
|
|
|
const IS_IOS =
|
|
|
|
(/iPad|iPhone|iPod/.test(navigator.platform) ||
|
|
|
|
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) &&
|
|
|
|
!window.MSStream;
|
|
|
|
|
2021-07-19 18:54:05 +02:00
|
|
|
const VIDEO_JS_OPTIONS = {
|
2020-04-16 23:43:09 +02:00
|
|
|
preload: 'auto',
|
2020-11-20 10:40:25 +01:00
|
|
|
playbackRates: videoPlaybackRates,
|
2020-04-16 23:43:09 +02:00
|
|
|
responsive: true,
|
2020-04-28 21:33:30 +02:00
|
|
|
controls: true,
|
2021-01-14 20:43:16 +01:00
|
|
|
html5: {
|
2021-06-30 18:29:00 +02:00
|
|
|
vhs: {
|
2021-01-20 23:22:49 +01:00
|
|
|
overrideNative: !videojs.browser.IS_ANY_SAFARI,
|
2021-01-14 20:43:16 +01:00
|
|
|
},
|
|
|
|
},
|
2020-04-16 23:43:09 +02:00
|
|
|
};
|
|
|
|
|
2020-04-16 01:21:17 +02:00
|
|
|
const SPACE_BAR_KEYCODE = 32;
|
|
|
|
const SMALL_F_KEYCODE = 70;
|
|
|
|
const SMALL_M_KEYCODE = 77;
|
2021-01-20 09:50:16 +01:00
|
|
|
const SMALL_T_KEYCODE = 84;
|
2020-04-16 01:21:17 +02:00
|
|
|
const ARROW_LEFT_KEYCODE = 37;
|
2021-03-19 21:18:39 +01:00
|
|
|
const ARROW_UP_KEYCODE = 38;
|
2020-04-16 01:21:17 +02:00
|
|
|
const ARROW_RIGHT_KEYCODE = 39;
|
2021-03-19 21:18:39 +01:00
|
|
|
const ARROW_DOWN_KEYCODE = 40;
|
2020-11-20 10:40:25 +01:00
|
|
|
const COMMA_KEYCODE = 188;
|
|
|
|
const PERIOD_KEYCODE = 190;
|
2021-03-19 20:41:22 +01:00
|
|
|
const SMALL_J_KEYCODE = 74;
|
|
|
|
const SMALL_K_KEYCODE = 75;
|
|
|
|
const SMALL_L_KEYCODE = 76;
|
|
|
|
|
2020-04-16 01:21:17 +02:00
|
|
|
const FULLSCREEN_KEYCODE = SMALL_F_KEYCODE;
|
|
|
|
const MUTE_KEYCODE = SMALL_M_KEYCODE;
|
2021-01-20 09:50:16 +01:00
|
|
|
const THEATER_MODE_KEYCODE = SMALL_T_KEYCODE;
|
2020-04-16 01:21:17 +02:00
|
|
|
|
2021-03-19 21:18:39 +01:00
|
|
|
const VOLUME_UP_KEYCODE = ARROW_UP_KEYCODE;
|
|
|
|
const VOLUME_DOWN_KEYCODE = ARROW_DOWN_KEYCODE;
|
|
|
|
|
2021-03-19 20:41:22 +01:00
|
|
|
const SEEK_FORWARD_KEYCODE = SMALL_L_KEYCODE;
|
|
|
|
const SEEK_BACKWARD_KEYCODE = SMALL_J_KEYCODE;
|
|
|
|
const SEEK_FORWARD_KEYCODE_5 = ARROW_RIGHT_KEYCODE;
|
|
|
|
const SEEK_BACKWARD_KEYCODE_5 = ARROW_LEFT_KEYCODE;
|
2020-04-16 01:21:17 +02:00
|
|
|
|
2021-03-19 20:41:22 +01:00
|
|
|
const SEEK_STEP_5 = 5;
|
2020-04-16 01:21:17 +02:00
|
|
|
const SEEK_STEP = 10; // time to seek in seconds
|
|
|
|
|
|
|
|
if (!Object.keys(videojs.getPlugins()).includes('eventTracking')) {
|
|
|
|
videojs.registerPlugin('eventTracking', eventTracking);
|
|
|
|
}
|
|
|
|
|
2021-01-14 20:43:16 +01:00
|
|
|
if (!Object.keys(videojs.getPlugins()).includes('hlsQualitySelector')) {
|
2021-02-18 03:53:25 +01:00
|
|
|
videojs.registerPlugin('hlsQualitySelector', hlsQualitySelector);
|
2021-01-14 20:43:16 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
if (!Object.keys(videojs.getPlugins()).includes('qualityLevels')) {
|
|
|
|
videojs.registerPlugin('qualityLevels', qualityLevels);
|
|
|
|
}
|
|
|
|
|
2021-06-29 03:51:04 +02:00
|
|
|
if (!Object.keys(videojs.getPlugins()).includes('recsys')) {
|
|
|
|
videojs.registerPlugin('recsys', recsys);
|
|
|
|
}
|
|
|
|
|
2020-12-14 17:40:59 +01:00
|
|
|
// ****************************************************************************
|
2020-11-13 09:02:54 +01:00
|
|
|
// LbryVolumeBarClass
|
2020-12-14 17:40:59 +01:00
|
|
|
// ****************************************************************************
|
2020-11-13 09:02:54 +01:00
|
|
|
|
|
|
|
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();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-12-14 17:40:59 +01:00
|
|
|
// ****************************************************************************
|
|
|
|
// VideoJs
|
|
|
|
// ****************************************************************************
|
2020-11-13 09:02:54 +01:00
|
|
|
|
2020-04-16 01:21:17 +02:00
|
|
|
/*
|
|
|
|
properties for this component should be kept to ONLY those that if changed should REQUIRE an entirely new videojs element
|
|
|
|
*/
|
2020-04-28 21:33:30 +02:00
|
|
|
export default React.memo<Props>(function VideoJs(props: Props) {
|
2021-04-12 18:43:47 +02:00
|
|
|
const {
|
|
|
|
autoplay,
|
|
|
|
startMuted,
|
|
|
|
source,
|
|
|
|
sourceType,
|
|
|
|
poster,
|
|
|
|
isAudio,
|
|
|
|
onPlayerReady,
|
|
|
|
toggleVideoTheaterMode,
|
|
|
|
adUrl,
|
2021-06-29 03:51:04 +02:00
|
|
|
claimId,
|
|
|
|
userId,
|
2021-07-20 17:30:12 +02:00
|
|
|
// allowPreRoll,
|
2021-04-12 18:43:47 +02:00
|
|
|
} = props;
|
2021-01-27 14:49:30 +01:00
|
|
|
|
2020-07-15 13:20:27 +02:00
|
|
|
const [reload, setReload] = useState('initial');
|
2021-01-27 17:36:24 +01:00
|
|
|
const playerRef = useRef();
|
2020-04-16 23:43:09 +02:00
|
|
|
const containerRef = useRef();
|
2021-01-20 21:10:16 +01:00
|
|
|
const videoJsOptions = {
|
2020-04-16 01:21:17 +02:00
|
|
|
...VIDEO_JS_OPTIONS,
|
2021-01-27 14:49:30 +01:00
|
|
|
autoplay: autoplay,
|
|
|
|
muted: startMuted,
|
2020-04-16 01:21:17 +02:00
|
|
|
sources: [
|
|
|
|
{
|
|
|
|
src: source,
|
|
|
|
type: sourceType,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
poster: poster, // thumb looks bad in app, and if autoplay, flashing poster is annoying
|
2020-12-14 17:40:59 +01:00
|
|
|
plugins: {
|
|
|
|
eventTracking: true,
|
|
|
|
overlay: OVERLAY.OVERLAY_DATA,
|
|
|
|
},
|
2021-06-22 21:24:15 +02:00
|
|
|
// fixes problem of errant CC button showing up on iOS
|
2021-06-25 18:26:00 +02:00
|
|
|
// the true fix here is to fix the m3u8 file, see: https://github.com/lbryio/lbry-desktop/pull/6315
|
2021-06-22 21:24:15 +02:00
|
|
|
controlBar: {
|
|
|
|
subsCapsButton: false,
|
|
|
|
},
|
2020-04-16 01:21:17 +02:00
|
|
|
};
|
|
|
|
|
2020-06-10 15:01:54 +02:00
|
|
|
const tapToUnmuteRef = useRef();
|
2020-07-15 13:20:27 +02:00
|
|
|
const tapToRetryRef = useRef();
|
|
|
|
|
|
|
|
const TAP = {
|
2020-07-15 17:51:05 +02:00
|
|
|
NONE: 'NONE',
|
2020-07-15 13:20:27 +02:00
|
|
|
UNMUTE: 'UNMUTE',
|
|
|
|
RETRY: 'RETRY',
|
|
|
|
};
|
|
|
|
|
2020-07-15 17:51:05 +02:00
|
|
|
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';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2020-07-15 13:20:27 +02:00
|
|
|
switch (tapButton) {
|
2020-07-15 17:51:05 +02:00
|
|
|
case TAP.NONE:
|
|
|
|
setButtonVisibility(tapToUnmuteRef, false);
|
|
|
|
setButtonVisibility(tapToRetryRef, false);
|
|
|
|
break;
|
2020-07-15 13:20:27 +02:00
|
|
|
case TAP.UNMUTE:
|
2020-07-15 17:51:05 +02:00
|
|
|
setButtonVisibility(tapToUnmuteRef, true);
|
|
|
|
setButtonVisibility(tapToRetryRef, false);
|
2020-07-15 13:20:27 +02:00
|
|
|
break;
|
|
|
|
case TAP.RETRY:
|
2020-07-15 17:51:05 +02:00
|
|
|
setButtonVisibility(tapToUnmuteRef, false);
|
|
|
|
setButtonVisibility(tapToRetryRef, true);
|
2020-07-15 13:20:27 +02:00
|
|
|
break;
|
|
|
|
default:
|
|
|
|
if (isDev) throw new Error('showTapButton: unexpected ref');
|
2020-07-15 17:51:05 +02:00
|
|
|
break;
|
2020-06-10 15:01:54 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function unmuteAndHideHint() {
|
2021-01-27 17:36:24 +01:00
|
|
|
const player = playerRef.current;
|
2020-06-10 15:01:54 +02:00
|
|
|
if (player) {
|
|
|
|
player.muted(false);
|
2020-06-11 20:55:30 +02:00
|
|
|
if (player.volume() === 0) {
|
|
|
|
player.volume(1.0);
|
|
|
|
}
|
2020-06-10 15:01:54 +02:00
|
|
|
}
|
2020-07-15 17:51:05 +02:00
|
|
|
showTapButton(TAP.NONE);
|
2020-07-15 13:20:27 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
function retryVideoAfterFailure() {
|
2021-01-27 17:36:24 +01:00
|
|
|
const player = playerRef.current;
|
|
|
|
if (player) {
|
|
|
|
setReload(Date.now());
|
|
|
|
showTapButton(TAP.NONE);
|
|
|
|
}
|
2020-06-10 15:01:54 +02:00
|
|
|
}
|
|
|
|
|
2021-02-26 02:56:53 +01:00
|
|
|
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 player = playerRef.current;
|
|
|
|
if (player) {
|
|
|
|
const controlBar = player.getChild('controlBar');
|
|
|
|
switch (e.type) {
|
|
|
|
case 'play':
|
|
|
|
controlBar.getChild('PlayToggle').controlText(__('Pause (space)'));
|
|
|
|
break;
|
|
|
|
case 'pause':
|
|
|
|
controlBar.getChild('PlayToggle').controlText(__('Play (space)'));
|
|
|
|
break;
|
|
|
|
case 'volumechange':
|
|
|
|
controlBar
|
|
|
|
.getChild('VolumePanel')
|
|
|
|
.getChild('MuteToggle')
|
|
|
|
.controlText(player.muted() || player.volume() === 0 ? __('Unmute (m)') : __('Mute (m)'));
|
|
|
|
break;
|
|
|
|
case 'fullscreenchange':
|
|
|
|
controlBar
|
|
|
|
.getChild('FullscreenToggle')
|
|
|
|
.controlText(player.isFullscreen() ? __('Exit Fullscreen (f)') : __('Fullscreen (f)'));
|
|
|
|
break;
|
|
|
|
case 'loadstart':
|
|
|
|
// --- Do everything ---
|
|
|
|
controlBar.getChild('PlaybackRateMenuButton').controlText(__('Playback Rate (<, >)'));
|
|
|
|
controlBar.getChild('QualityButton').controlText(__('Quality'));
|
|
|
|
resolveCtrlText({ type: 'play' });
|
|
|
|
resolveCtrlText({ type: 'pause' });
|
|
|
|
resolveCtrlText({ type: 'volumechange' });
|
|
|
|
resolveCtrlText({ type: 'fullscreenchange' });
|
|
|
|
// (1) The 'Theater mode' button should probably be changed to a class
|
|
|
|
// so that we can use getChild() with a specific name. There might be
|
|
|
|
// clashes if we add a new button in the future.
|
|
|
|
// (2) We'll have to get 'makeSelectClientSetting(SETTINGS.VIDEO_THEATER_MODE)'
|
|
|
|
// as a prop here so we can say "Theater mode|Default mode" instead of
|
2021-06-30 18:29:00 +02:00
|
|
|
// "Toggle Theater mode".
|
2021-02-26 02:56:53 +01:00
|
|
|
controlBar.getChild('Button').controlText(__('Toggle Theater mode (t)'));
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
if (isDev) throw Error('Unexpected: ' + e.type);
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-06-10 15:01:54 +02:00
|
|
|
function onInitialPlay() {
|
2021-01-27 17:36:24 +01:00
|
|
|
const player = playerRef.current;
|
2020-06-11 20:55:30 +02:00
|
|
|
if (player && (player.muted() || player.volume() === 0)) {
|
2020-06-10 15:01:54 +02:00
|
|
|
// The css starts as "hidden". We make it visible here without
|
|
|
|
// re-rendering the whole thing.
|
2020-07-15 17:51:05 +02:00
|
|
|
showTapButton(TAP.UNMUTE);
|
2021-06-30 18:29:00 +02:00
|
|
|
} else {
|
|
|
|
showTapButton(TAP.NONE);
|
2020-06-10 15:01:54 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function onVolumeChange() {
|
2021-01-27 17:36:24 +01:00
|
|
|
const player = playerRef.current;
|
2020-06-10 15:01:54 +02:00
|
|
|
if (player && !player.muted()) {
|
2020-07-15 17:51:05 +02:00
|
|
|
showTapButton(TAP.NONE);
|
2020-06-10 15:01:54 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function onError() {
|
2021-01-27 17:36:24 +01:00
|
|
|
const player = playerRef.current;
|
2020-07-15 17:51:05 +02:00
|
|
|
showTapButton(TAP.RETRY);
|
2020-07-15 13:20:27 +02:00
|
|
|
|
2021-06-30 18:29:00 +02:00
|
|
|
// reattach initial play listener in case we recover from error successfully
|
|
|
|
// $FlowFixMe
|
|
|
|
player.one('play', onInitialPlay);
|
|
|
|
|
2020-07-15 10:50:25 +02:00
|
|
|
if (player && player.loadingSpinner) {
|
|
|
|
player.loadingSpinner.hide();
|
|
|
|
}
|
2020-06-10 15:01:54 +02:00
|
|
|
}
|
|
|
|
|
2021-04-12 18:43:47 +02:00
|
|
|
const onEnded = React.useCallback(() => {
|
|
|
|
if (!adUrl) {
|
|
|
|
showTapButton(TAP.NONE);
|
|
|
|
}
|
|
|
|
}, [adUrl]);
|
2020-06-10 15:01:54 +02:00
|
|
|
|
2020-04-16 01:21:17 +02:00
|
|
|
function handleKeyDown(e: KeyboardEvent) {
|
2021-01-27 17:36:24 +01:00
|
|
|
const player = playerRef.current;
|
2021-04-16 20:51:56 +02:00
|
|
|
const videoNode = containerRef.current && containerRef.current.querySelector('video, audio');
|
|
|
|
if (!videoNode || !player || isUserTyping()) return;
|
|
|
|
handleSingleKeyActions(e);
|
|
|
|
handleShiftKeyActions(e);
|
|
|
|
}
|
2020-04-16 01:21:17 +02:00
|
|
|
|
2021-04-16 20:51:56 +02:00
|
|
|
function handleShiftKeyActions(e: KeyboardEvent) {
|
|
|
|
if (e.altKey || e.ctrlKey || e.metaKey || !e.shiftKey) return;
|
|
|
|
if (e.keyCode === PERIOD_KEYCODE) changePlaybackSpeed(true);
|
|
|
|
if (e.keyCode === COMMA_KEYCODE) changePlaybackSpeed(false);
|
|
|
|
}
|
2020-04-16 01:21:17 +02:00
|
|
|
|
2021-04-16 20:51:56 +02:00
|
|
|
function handleSingleKeyActions(e: KeyboardEvent) {
|
|
|
|
if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
|
|
|
|
if (e.keyCode === SPACE_BAR_KEYCODE || e.keyCode === SMALL_K_KEYCODE) togglePlay();
|
|
|
|
if (e.keyCode === FULLSCREEN_KEYCODE) toggleFullscreen();
|
|
|
|
if (e.keyCode === MUTE_KEYCODE) toggleMute();
|
|
|
|
if (e.keyCode === VOLUME_UP_KEYCODE) volumeUp();
|
|
|
|
if (e.keyCode === VOLUME_DOWN_KEYCODE) volumeDown();
|
|
|
|
if (e.keyCode === THEATER_MODE_KEYCODE) toggleTheaterMode();
|
|
|
|
if (e.keyCode === SEEK_FORWARD_KEYCODE) seekVideo(SEEK_STEP);
|
|
|
|
if (e.keyCode === SEEK_BACKWARD_KEYCODE) seekVideo(-SEEK_STEP);
|
|
|
|
if (e.keyCode === SEEK_FORWARD_KEYCODE_5) seekVideo(SEEK_STEP_5);
|
|
|
|
if (e.keyCode === SEEK_BACKWARD_KEYCODE_5) seekVideo(-SEEK_STEP_5);
|
|
|
|
}
|
2020-04-16 01:21:17 +02:00
|
|
|
|
2021-04-16 20:51:56 +02:00
|
|
|
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;
|
2020-04-16 01:21:17 +02:00
|
|
|
}
|
2021-04-16 20:51:56 +02:00
|
|
|
OVERLAY.showSeekedOverlay(player, Math.abs(stepSize), stepSize > 0);
|
|
|
|
player.userActive(true);
|
|
|
|
}
|
2020-04-16 01:21:17 +02:00
|
|
|
|
2021-04-16 20:51:56 +02:00
|
|
|
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);
|
2021-03-19 21:18:39 +01:00
|
|
|
player.userActive(true);
|
2021-04-16 20:51:56 +02:00
|
|
|
player.playbackRate(nextRate);
|
2021-03-19 21:18:39 +01:00
|
|
|
}
|
2021-04-16 20:51:56 +02:00
|
|
|
}
|
2020-04-16 01:21:17 +02:00
|
|
|
|
2021-04-16 20:51:56 +02:00
|
|
|
function toggleFullscreen() {
|
|
|
|
const player = playerRef.current;
|
|
|
|
if (!player) return;
|
|
|
|
if (!player.isFullscreen()) {
|
|
|
|
player.requestFullscreen();
|
|
|
|
} else {
|
|
|
|
player.exitFullscreen();
|
2020-04-16 01:21:17 +02:00
|
|
|
}
|
2021-04-16 20:51:56 +02:00
|
|
|
}
|
2020-11-20 10:40:25 +01:00
|
|
|
|
2021-04-16 20:51:56 +02:00
|
|
|
function toggleTheaterMode() {
|
|
|
|
const player = playerRef.current;
|
|
|
|
if (!player) return;
|
|
|
|
toggleVideoTheaterMode();
|
|
|
|
if (player.isFullscreen()) {
|
|
|
|
player.exitFullscreen();
|
2020-11-20 10:40:25 +01:00
|
|
|
}
|
2021-04-16 20:51:56 +02:00
|
|
|
}
|
2021-01-20 09:50:16 +01:00
|
|
|
|
2021-04-16 20:51:56 +02:00
|
|
|
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() {
|
|
|
|
const player = playerRef.current;
|
|
|
|
if (!player) return;
|
|
|
|
player.volume(player.volume() + 0.05);
|
|
|
|
OVERLAY.showVolumeverlay(player, Math.round(player.volume() * 100));
|
|
|
|
player.userActive(true);
|
|
|
|
}
|
|
|
|
|
|
|
|
function volumeDown() {
|
|
|
|
const player = playerRef.current;
|
|
|
|
if (!player) return;
|
|
|
|
player.volume(player.volume() - 0.05);
|
|
|
|
OVERLAY.showVolumeverlay(player, Math.round(player.volume() * 100));
|
|
|
|
player.userActive(true);
|
2020-04-16 01:21:17 +02:00
|
|
|
}
|
|
|
|
|
2021-01-23 20:38:55 +01:00
|
|
|
// Create the video DOM element and wrapper
|
|
|
|
function createVideoPlayerDOM(container) {
|
2021-06-30 18:29:00 +02:00
|
|
|
if (!container) return;
|
2021-01-23 20:38:55 +01:00
|
|
|
|
|
|
|
// 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');
|
2021-07-09 05:05:58 +02:00
|
|
|
el.className = 'video-js vjs-big-play-centered ';
|
2021-01-23 20:38:55 +01:00
|
|
|
wrapper.appendChild(el);
|
|
|
|
|
|
|
|
container.appendChild(wrapper);
|
|
|
|
|
|
|
|
return el;
|
|
|
|
}
|
|
|
|
|
2021-06-30 18:29:00 +02:00
|
|
|
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);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2021-01-23 20:38:55 +01:00
|
|
|
// Initialize video.js
|
|
|
|
function initializeVideoPlayer(el) {
|
2021-06-30 18:29:00 +02:00
|
|
|
if (!el) return;
|
2021-01-23 20:38:55 +01:00
|
|
|
|
2021-01-27 17:36:24 +01:00
|
|
|
const vjs = videojs(el, videoJsOptions, () => {
|
|
|
|
const player = playerRef.current;
|
|
|
|
|
2021-01-23 20:38:55 +01:00
|
|
|
// this seems like a weird thing to have to check for here
|
2021-06-30 18:29:00 +02:00
|
|
|
if (!player) return;
|
2021-01-26 00:50:11 +01:00
|
|
|
|
2021-01-23 20:38:55 +01:00
|
|
|
// Add various event listeners to player
|
|
|
|
player.one('play', onInitialPlay);
|
2021-02-26 02:56:53 +01:00
|
|
|
player.on('play', resolveCtrlText);
|
|
|
|
player.on('pause', resolveCtrlText);
|
|
|
|
player.on('loadstart', resolveCtrlText);
|
|
|
|
player.on('fullscreenchange', resolveCtrlText);
|
|
|
|
player.on('volumechange', resolveCtrlText);
|
2021-01-23 20:38:55 +01:00
|
|
|
player.on('volumechange', onVolumeChange);
|
|
|
|
player.on('error', onError);
|
|
|
|
player.on('ended', onEnded);
|
|
|
|
|
|
|
|
// Replace volume bar with custom LBRY volume bar
|
|
|
|
LbryVolumeBarClass.replaceExisting(player);
|
2021-01-26 00:50:11 +01:00
|
|
|
|
2021-06-30 18:29:00 +02:00
|
|
|
// Add reloadSourceOnError plugin
|
|
|
|
player.reloadSourceOnError({ errorInterval: 10 });
|
|
|
|
|
2021-01-23 20:38:55 +01:00
|
|
|
// initialize mobile UI
|
|
|
|
player.mobileUi(); // Inits mobile version. No-op if Desktop.
|
|
|
|
|
2021-06-30 18:29:00 +02:00
|
|
|
// Add quality selector to player
|
|
|
|
player.hlsQualitySelector({
|
|
|
|
displayCurrentQuality: true,
|
|
|
|
});
|
|
|
|
|
|
|
|
// Add recsys plugin
|
|
|
|
// TODO: Add an if(odysee.com) around this function to only use recsys on odysee
|
|
|
|
player.recsys({
|
|
|
|
videoId: claimId,
|
|
|
|
userId: userId,
|
|
|
|
});
|
|
|
|
|
|
|
|
// set playsinline for mobile
|
|
|
|
// TODO: make this better
|
|
|
|
player.children_[0].setAttribute('playsinline', '');
|
|
|
|
|
2021-01-23 20:38:55 +01:00
|
|
|
// I think this is a callback function
|
|
|
|
onPlayerReady(player);
|
|
|
|
});
|
|
|
|
|
2021-06-30 18:29:00 +02:00
|
|
|
// pre-roll ads
|
|
|
|
// This must be initialized earlier than everything else
|
|
|
|
// otherwise a race condition occurs if we place this in the onReady call back
|
2021-07-13 10:00:25 +02:00
|
|
|
// allow if isDev because otherwise you'll never see ads when basing to master
|
2021-07-20 17:30:12 +02:00
|
|
|
// if ((allowPreRoll && SIMPLE_SITE) || isDev) {
|
|
|
|
// vjs.aniview();
|
|
|
|
// }
|
2021-06-30 18:29:00 +02:00
|
|
|
|
2021-01-23 20:38:55 +01:00
|
|
|
// fixes #3498 (https://github.com/lbryio/lbry-desktop/issues/3498)
|
|
|
|
// summary: on firefox the focus would stick to the fullscreen button which caused buggy behavior with spacebar
|
2021-01-27 17:36:24 +01:00
|
|
|
vjs.on('fullscreenchange', () => document.activeElement && document.activeElement.blur());
|
2021-01-23 20:38:55 +01:00
|
|
|
|
2021-01-27 17:36:24 +01:00
|
|
|
return vjs;
|
2021-01-23 20:38:55 +01:00
|
|
|
}
|
|
|
|
|
2021-02-17 16:32:25 +01:00
|
|
|
// This lifecycle hook is only called once (on mount), or when `isAudio` changes.
|
2020-04-16 23:43:09 +02:00
|
|
|
useEffect(() => {
|
2021-01-23 20:38:55 +01:00
|
|
|
const vjsElement = createVideoPlayerDOM(containerRef.current);
|
2020-04-28 21:33:30 +02:00
|
|
|
|
2021-06-30 18:29:00 +02:00
|
|
|
// Detect source file type via pre-fetch (async)
|
|
|
|
detectFileType().then(() => {
|
|
|
|
// Initialize Video.js
|
|
|
|
const vjsPlayer = initializeVideoPlayer(vjsElement);
|
2021-01-26 00:50:11 +01:00
|
|
|
|
2021-06-30 18:29:00 +02:00
|
|
|
// Add reference to player to global scope
|
|
|
|
window.player = vjsPlayer;
|
2021-01-27 17:36:24 +01:00
|
|
|
|
2021-06-30 18:29:00 +02:00
|
|
|
// Set reference in component state
|
|
|
|
playerRef.current = vjsPlayer;
|
|
|
|
|
|
|
|
// Add event listener for keyboard shortcuts
|
|
|
|
window.addEventListener('keydown', handleKeyDown);
|
|
|
|
});
|
2020-04-16 23:43:09 +02:00
|
|
|
|
2021-01-23 20:38:55 +01:00
|
|
|
// Cleanup
|
|
|
|
return () => {
|
|
|
|
window.removeEventListener('keydown', handleKeyDown);
|
2020-04-16 23:43:09 +02:00
|
|
|
|
2021-01-27 17:36:24 +01:00
|
|
|
const player = playerRef.current;
|
2021-01-23 20:38:55 +01:00
|
|
|
if (player) {
|
|
|
|
window.player = undefined;
|
2021-01-27 17:36:24 +01:00
|
|
|
player.dispose();
|
2021-01-23 20:38:55 +01:00
|
|
|
}
|
2021-01-26 00:50:11 +01:00
|
|
|
};
|
2021-02-17 16:32:25 +01:00
|
|
|
}, [isAudio]);
|
2021-01-04 16:12:46 +01:00
|
|
|
|
2021-01-23 21:28:31 +01:00
|
|
|
// Update video player and reload when source URL changes
|
2021-01-23 20:38:55 +01:00
|
|
|
useEffect(() => {
|
|
|
|
// For some reason the video player is responsible for detecting content type this way
|
2021-02-17 03:05:23 +01:00
|
|
|
fetch(source, { method: 'HEAD', cache: 'no-store' }).then((response) => {
|
2021-06-30 18:29:00 +02:00
|
|
|
let finalType = sourceType;
|
2021-06-11 19:32:56 +02:00
|
|
|
let finalSource = source;
|
2021-06-30 18:29:00 +02:00
|
|
|
|
2021-01-23 20:38:55 +01:00
|
|
|
// override type if we receive an .m3u8 (transcoded mp4)
|
2021-06-30 18:29:00 +02:00
|
|
|
// do we need to check if explicitly redirected
|
|
|
|
// or is checking extension only a safer method
|
2021-01-27 15:40:56 +01:00
|
|
|
if (response && response.redirected && response.url && response.url.endsWith('m3u8')) {
|
2021-07-20 19:17:45 +02:00
|
|
|
finalType = 'application/vnd.apple.mpegurl';
|
2021-06-11 19:32:56 +02:00
|
|
|
finalSource = response.url;
|
2021-01-23 20:38:55 +01:00
|
|
|
}
|
2021-01-07 04:58:09 +01:00
|
|
|
|
2021-06-30 18:29:00 +02:00
|
|
|
// Modify video source in options
|
|
|
|
videoJsOptions.sources = [
|
|
|
|
{
|
|
|
|
src: finalSource,
|
|
|
|
type: finalType,
|
|
|
|
},
|
|
|
|
];
|
2021-01-07 04:58:09 +01:00
|
|
|
|
2021-06-19 04:55:44 +02:00
|
|
|
// Update player source
|
2021-06-30 18:29:00 +02:00
|
|
|
const player = playerRef.current;
|
|
|
|
if (!player) return;
|
2021-03-02 03:01:05 +01:00
|
|
|
|
|
|
|
// PR #5570: Temp workaround to avoid double Play button until the next re-architecture.
|
|
|
|
if (!player.paused()) {
|
|
|
|
player.bigPlayButton.hide();
|
|
|
|
}
|
2021-01-23 20:38:55 +01:00
|
|
|
});
|
2021-01-27 15:40:56 +01:00
|
|
|
}, [source, reload]);
|
2020-04-16 01:21:17 +02:00
|
|
|
|
2021-06-30 18:29:00 +02:00
|
|
|
// Load IMA3 SDK for aniview
|
2021-07-20 17:48:46 +02:00
|
|
|
// disabled for now
|
|
|
|
// useEffect(() => {
|
|
|
|
// const script = document.createElement('script');
|
|
|
|
// script.src = `https://imasdk.googleapis.com/js/sdkloader/ima3.js`;
|
|
|
|
// script.async = true;
|
|
|
|
// // $FlowFixMe
|
|
|
|
// document.body.appendChild(script);
|
|
|
|
//
|
|
|
|
// return () => {
|
|
|
|
// // $FlowFixMe
|
|
|
|
// document.body.removeChild(script);
|
|
|
|
// };
|
|
|
|
// });
|
2021-06-30 18:29:00 +02:00
|
|
|
|
2020-06-10 15:01:54 +02:00
|
|
|
return (
|
2021-01-27 17:29:18 +01:00
|
|
|
// $FlowFixMe
|
|
|
|
<div className={classnames('video-js-parent', { 'video-js-parent--ios': IS_IOS })} ref={containerRef}>
|
|
|
|
<Button
|
|
|
|
label={__('Tap to unmute')}
|
|
|
|
button="link"
|
|
|
|
icon={ICONS.VOLUME_MUTED}
|
|
|
|
className="video-js--tap-to-unmute"
|
|
|
|
onClick={unmuteAndHideHint}
|
|
|
|
ref={tapToUnmuteRef}
|
|
|
|
/>
|
|
|
|
<Button
|
|
|
|
label={__('Retry')}
|
|
|
|
button="link"
|
|
|
|
icon={ICONS.REFRESH}
|
|
|
|
className="video-js--tap-to-unmute"
|
|
|
|
onClick={retryVideoAfterFailure}
|
|
|
|
ref={tapToRetryRef}
|
|
|
|
/>
|
|
|
|
</div>
|
2020-06-10 15:01:54 +02:00
|
|
|
);
|
2020-04-16 18:10:47 +02:00
|
|
|
});
|