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

Add percentage video duration keybinds›

Browse source
This commit is contained in:
Rafael 2022-03-29 17:40:21 -03:00 committed by Thomas Zarebczan
parent 9fe20699a0
commit 8823461ebd
3 changed files with 30 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
ui/component/viewers/videoViewer/internal/overlays.js
View file

@ -85,12 +85,13 @@ export function showPlaybackRateOverlay(player, newRate, isSpeedUp) {
* @param duration The seek delta duration.
* @param isForward true if seeking forward, false otherwise.
*/
export function showSeekedOverlay(player, duration, isForward) {
export function showSeekedOverlay(player, duration, isForward, isJumpTo) {
const overlayJsx = (
<div>
<p>
{isForward ? '+' : '-'}
{!isJumpTo && (isForward ? '+' : '-')}
{duration}
{isJumpTo && '%'}
</p>
</div>
);

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

@ -37,13 +37,15 @@ function volumeDown(event, playerRef) {
player.userActive(true);
}
function seekVideo(stepSize: number, playerRef, containerRef) {
function seekVideo(stepSize: number, playerRef, containerRef, jumpTo?: boolean) {
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;
const newDuration = jumpTo ? duration * stepSize : currentTime + stepSize;
if (newDuration < 0) {
videoNode.currentTime = 0;
} else if (newDuration > duration) {
@ -51,7 +53,7 @@ function seekVideo(stepSize: number, playerRef, containerRef) {
} else {
videoNode.currentTime = newDuration;
}
OVERLAY.showSeekedOverlay(player, Math.abs(stepSize), stepSize > 0);
OVERLAY.showSeekedOverlay(player, Math.abs(jumpTo ? stepSize * 100 : stepSize), !jumpTo && stepSize > 0, jumpTo);
player.userActive(true);
}
@ -150,6 +152,16 @@ const VideoJsKeyboardShorcuts = ({
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);
if (e.keyCode === KEYCODES.ZERO) seekVideo(0, playerRef, containerRef, true);
if (e.keyCode === KEYCODES.ONE) seekVideo(10 / 100, playerRef, containerRef, true);
if (e.keyCode === KEYCODES.TWO) seekVideo(20 / 100, playerRef, containerRef, true);
if (e.keyCode === KEYCODES.THREE) seekVideo(30 / 100, playerRef, containerRef, true);
if (e.keyCode === KEYCODES.FOUR) seekVideo(40 / 100, playerRef, containerRef, true);
if (e.keyCode === KEYCODES.FIVE) seekVideo(50 / 100, playerRef, containerRef, true);
if (e.keyCode === KEYCODES.SIX) seekVideo(60 / 100, playerRef, containerRef, true);
if (e.keyCode === KEYCODES.SEVEN) seekVideo(70 / 100, playerRef, containerRef, true);
if (e.keyCode === KEYCODES.EIGHT) seekVideo(80 / 100, playerRef, containerRef, true);
if (e.keyCode === KEYCODES.NINE) seekVideo(90 / 100, playerRef, containerRef, true);
}
var curried_function = function (playerRef: any, containerRef: any) {

12
ui/constants/keycodes.js
View file

@ -18,6 +18,18 @@ export const RIGHT = 39;
export const DOWN = 40;
export const INSERT = 45;
export const DELETE = 46;
export const ZERO = 48;
export const ONE = 49;
export const TWO = 50;
export const THREE = 51;
export const FOUR = 52;
export const FIVE = 53;
export const SIX = 54;
export const SEVEN = 55;
export const EIGHT = 56;
export const NINE = 57;
export const COMMAND = 91;
export const COMMAND_LEFT = 91;
export const COMMAND_RIGHT = 93;