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

coming along well

Browse source
This commit is contained in:
Anthony 2021-11-05 13:07:58 +01:00
parent d4f6aae037
commit b518abc480
No known key found for this signature in database
GPG key ID: C386D3C93D50E356
2 changed files with 77 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,6 +2,9 @@ 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
// 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];
@ -20,27 +23,88 @@ function volumeUp(event, playerRef) {
player.userActive(true);
}
// eslint-disable-next-line flowtype/no-types-missing-file-annotation
function handleSingleKeyActions(e: KeyboardEvent, playerRef) {
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);
}
// 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();
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 toggleTheaterMode(playerRef) {
const player = playerRef.current;
if (!player) return;
// TODO: have to fix this
toggleVideoTheaterMode();
if (player.isFullscreen()) {
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();
}
// 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();
// 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);
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);
}
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);
handleSingleKeyActions(e, playerRef, containerRef);
// handleShiftKeyActions(e);
}

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

@ -101,9 +101,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);
}
@ -352,24 +349,6 @@ export default React.memo<Props>(function VideoJs(props: Props) {
if (e.keyCode === KEYCODES.P) playPrevious();
}
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;
@ -386,37 +365,6 @@ export default React.memo<Props>(function VideoJs(props: Props) {
}
}
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();
}
// Create the video DOM element and wrapper
function createVideoPlayerDOM(container) {
if (!container) return;