lbry-desktop/ui/component/viewers/videoViewer/view.jsx

245 lines
7.1 KiB
React
Raw Normal View History

2019-08-02 08:28:14 +02:00
// @flow
2020-01-31 19:25:48 +01:00
import React, { useRef, useEffect, useState, useContext } from 'react';
2019-08-02 08:28:14 +02:00
import { stopContextMenu } from 'util/context-menu';
2019-11-07 20:39:22 +01:00
import videojs from 'video.js/dist/alt/video.core.novtt.min.js';
import 'video.js/dist/alt/video-js-cdn.min.css';
2020-01-22 18:19:49 +01:00
import eventTracking from 'videojs-event-tracking';
2019-08-02 08:28:14 +02:00
import isUserTyping from 'util/detect-typing';
2020-01-22 18:19:49 +01:00
import analytics from 'analytics';
2020-01-31 19:25:48 +01:00
import { EmbedContext } from 'page/embedWrapper/view';
2019-08-02 08:28:14 +02:00
2019-10-11 01:31:21 +02:00
const F11_KEYCODE = 122;
2019-08-02 08:28:14 +02:00
const SPACE_BAR_KEYCODE = 32;
const SMALL_F_KEYCODE = 70;
const SMALL_M_KEYCODE = 77;
const ARROW_LEFT_KEYCODE = 37;
const ARROW_RIGHT_KEYCODE = 39;
const FULLSCREEN_KEYCODE = SMALL_F_KEYCODE;
const MUTE_KEYCODE = SMALL_M_KEYCODE;
const SEEK_FORWARD_KEYCODE = ARROW_RIGHT_KEYCODE;
const SEEK_BACKWARD_KEYCODE = ARROW_LEFT_KEYCODE;
const SEEK_STEP = 10; // time to seek in seconds
2020-01-31 19:25:48 +01:00
type VideoJSOptions = {
controls: boolean,
autoplay: boolean,
preload: string,
playbackRates: Array<number>,
responsive: boolean,
poster?: string,
};
const VIDEO_JS_OPTIONS: VideoJSOptions = {
2019-08-02 08:28:14 +02:00
controls: true,
2019-12-09 16:34:22 +01:00
autoplay: true,
2019-08-02 08:28:14 +02:00
preload: 'auto',
2019-08-13 07:35:13 +02:00
playbackRates: [0.25, 0.5, 0.75, 1, 1.1, 1.25, 1.5, 2],
responsive: true,
2019-08-02 08:28:14 +02:00
};
type Props = {
2019-09-06 02:26:03 +02:00
volume: number,
position: number,
muted: boolean,
hasFileInfo: boolean,
changeVolume: number => void,
savePosition: (string, number) => void,
changeMute: boolean => void,
2019-08-02 08:28:14 +02:00
source: string,
contentType: string,
thumbnail: string,
2019-08-13 07:35:13 +02:00
hasFileInfo: boolean,
2019-09-06 02:26:03 +02:00
onEndedCB: any,
2020-01-22 18:19:49 +01:00
claim: Claim,
2019-08-02 08:28:14 +02:00
};
function VideoViewer(props: Props) {
2020-01-27 19:52:25 +01:00
const { contentType, source, onEndedCB, changeVolume, changeMute, volume, muted, thumbnail, claim } = props;
2020-01-22 18:19:49 +01:00
const claimId = claim && claim.claim_id;
2019-08-13 07:35:13 +02:00
const videoRef = useRef();
const isAudio = contentType.includes('audio');
2020-01-31 19:25:48 +01:00
const embedded = useContext(EmbedContext);
if (embedded) {
VIDEO_JS_OPTIONS.autoplay = false;
}
let forceTypes = [
'video/quicktime',
'application/x-ext-mkv',
'video/x-matroska',
'application/octet-stream',
'video/x-ms-wmv',
'video/x-msvideo',
'video/mpeg',
2019-12-22 23:52:21 +01:00
'video/m4v',
];
const forceMp4 = forceTypes.includes(contentType);
2019-08-13 07:35:13 +02:00
const [requireRedraw, setRequireRedraw] = useState(false);
2019-10-25 04:58:21 +02:00
let player;
2019-08-02 08:28:14 +02:00
2019-09-06 02:26:03 +02:00
useEffect(() => {
const currentVideo: HTMLVideoElement | null = document.querySelector('video');
2020-01-22 18:19:49 +01:00
if (!Object.keys(videojs.getPlugins()).includes('eventTracking')) {
videojs.registerPlugin('eventTracking', eventTracking);
}
2019-09-06 02:26:03 +02:00
function doEnded() {
onEndedCB();
}
2020-01-27 19:52:25 +01:00
2019-09-09 19:31:00 +02:00
function doPause(e: Event) {
// store position e.target.currentTime
}
2020-01-27 19:52:25 +01:00
2019-09-09 19:31:00 +02:00
function doVolume(e: Event) {
2019-09-28 05:40:03 +02:00
// $FlowFixMe volume is missing in EventTarget
changeVolume(e.target.volume);
// $FlowFixMe muted is missing in EventTarget
changeMute(e.target.muted);
2019-09-09 19:31:00 +02:00
}
2019-09-06 02:26:03 +02:00
if (currentVideo) {
currentVideo.addEventListener('ended', doEnded);
2019-09-09 19:31:00 +02:00
currentVideo.addEventListener('pause', doPause);
currentVideo.addEventListener('volumechange', doVolume);
2019-09-06 02:26:03 +02:00
}
// cleanup function:
return () => {
if (currentVideo) {
currentVideo.removeEventListener('ended', doEnded);
2019-09-09 19:31:00 +02:00
currentVideo.removeEventListener('pause', doPause);
currentVideo.removeEventListener('volumechange', doVolume);
2019-09-06 02:26:03 +02:00
}
};
}, []);
2019-08-02 08:28:14 +02:00
useEffect(() => {
2019-08-06 05:25:33 +02:00
const videoNode = videoRef.current;
const videoJsOptions = {
...VIDEO_JS_OPTIONS,
sources: [
{
src: source,
type: forceMp4 ? 'video/mp4' : contentType,
2019-08-06 05:25:33 +02:00
},
],
2020-01-22 18:19:49 +01:00
plugins: { eventTracking: true },
2019-08-06 05:25:33 +02:00
};
2019-08-02 08:28:14 +02:00
if (isAudio) {
videoJsOptions.poster = thumbnail;
}
2019-08-13 07:35:13 +02:00
if (!requireRedraw) {
2019-09-28 05:40:03 +02:00
player = videojs(videoNode, videoJsOptions, function() {
2019-12-03 19:09:08 +01:00
player.volume(volume);
player.muted(muted);
2019-09-28 05:40:03 +02:00
});
2019-08-13 07:35:13 +02:00
}
2019-08-06 05:25:33 +02:00
return () => {
2019-08-13 07:35:13 +02:00
if (!player) {
return;
}
// Video.js has a player.dispose() function that is meant to cleanup a previous video
// We can't use this because it does some weird stuff to remove the video element from the page
// This makes it really hard to use because the ref we keep still thinks it's on the page
// requireRedraw just makes it so the video component is removed from the page _by react_
// Then it's set to false immediately after so we can re-mount a new player
setRequireRedraw(true);
2019-08-06 05:25:33 +02:00
};
2019-09-30 22:17:50 +02:00
}, [videoRef, source, contentType, setRequireRedraw, requireRedraw]);
2019-08-13 07:35:13 +02:00
useEffect(() => {
if (requireRedraw) {
setRequireRedraw(false);
}
}, [requireRedraw]);
2019-08-02 08:28:14 +02:00
useEffect(() => {
function handleKeyDown(e: KeyboardEvent) {
2019-08-13 07:35:13 +02:00
const videoNode = videoRef.current;
2019-08-02 08:28:14 +02:00
if (!videoNode || isUserTyping()) {
return;
}
if (e.keyCode === SPACE_BAR_KEYCODE) {
2019-08-13 07:35:13 +02:00
videoNode.paused ? videoNode.play() : videoNode.pause();
2019-08-02 08:28:14 +02:00
}
2019-10-11 23:39:46 +02:00
// Fullscreen toggle shortcuts
2019-10-11 01:31:21 +02:00
if (e.keyCode === FULLSCREEN_KEYCODE || e.keyCode === F11_KEYCODE) {
if (!player.isFullscreen()) {
2019-10-11 01:31:21 +02:00
player.requestFullscreen();
} else {
player.exitFullscreen();
}
}
// Mute/Unmute Shortcuts
if (e.keyCode === MUTE_KEYCODE) {
videoNode.muted = !videoNode.muted;
}
// Seeking Shortcuts
const duration = videoNode.duration;
const currentTime = videoNode.currentTime;
if (e.keyCode === SEEK_FORWARD_KEYCODE) {
const newDuration = currentTime + SEEK_STEP;
videoNode.currentTime = newDuration > duration ? duration : newDuration;
}
if (e.keyCode === SEEK_BACKWARD_KEYCODE) {
const newDuration = currentTime - SEEK_STEP;
videoNode.currentTime = newDuration < 0 ? 0 : newDuration;
}
2019-08-02 08:28:14 +02:00
}
window.addEventListener('keydown', handleKeyDown);
return () => {
window.removeEventListener('keydown', handleKeyDown);
};
2019-08-13 07:35:13 +02:00
// include requireRedraw here so the event listener is re-added when we need to manually remove/add the video player
}, [videoRef, requireRedraw]);
2019-08-02 08:28:14 +02:00
2020-01-22 18:19:49 +01:00
// player analytics
useEffect(() => {
function doTrackingBuffered(e: Event, data: any) {
analytics.videoBufferEvent(claimId, data.currentTime);
}
function doTrackingFirstPlay(e: Event, data: any) {
analytics.videoStartEvent(claimId, data.secondsToLoad);
}
if (player) {
player.on('tracking:buffered', (e, d) => doTrackingBuffered(e, d));
player.on('tracking:firstplay', (e, d) => doTrackingFirstPlay(e, d));
// 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
// $FlowFixMe
player.on('fullscreenchange', () => document.activeElement && document.activeElement.blur());
2020-01-22 18:19:49 +01:00
}
return () => {
if (player) {
player.off();
}
};
}, [player]);
2019-08-02 08:28:14 +02:00
return (
<div className="file-render__viewer" onContextMenu={stopContextMenu}>
2019-08-13 07:35:13 +02:00
{!requireRedraw && (
<div data-vjs-player>
{isAudio ? <audio ref={videoRef} className="video-js" /> : <video ref={videoRef} className="video-js" />}
2019-08-13 07:35:13 +02:00
</div>
)}
2019-08-02 08:28:14 +02:00
</div>
);
}
export default VideoViewer;