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

Add Numbered Steps video key events

Browse source
This commit is contained in:
saltrafael 2021-08-31 10:19:21 -03:00
parent 21372037b4
commit 4c665b5705
No known key found for this signature in database
GPG key ID: 9C7F1DC0B0F54515
1 changed files with 30 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -103,6 +103,19 @@ const SMALL_J_KEYCODE = 74;
const SMALL_K_KEYCODE = 75; const SMALL_K_KEYCODE = 75;
const SMALL_L_KEYCODE = 76; const SMALL_L_KEYCODE = 76;
const numberCodes = {
'48': 0,
'49': 1,
'50': 2,
'51': 3,
'52': 4,
'53': 5,
'54': 6,
'55': 7,
'56': 8,
'57': 9,
};
const FULLSCREEN_KEYCODE = SMALL_F_KEYCODE; const FULLSCREEN_KEYCODE = SMALL_F_KEYCODE;
const MUTE_KEYCODE = SMALL_M_KEYCODE; const MUTE_KEYCODE = SMALL_M_KEYCODE;
const THEATER_MODE_KEYCODE = SMALL_T_KEYCODE; const THEATER_MODE_KEYCODE = SMALL_T_KEYCODE;
@ -400,19 +413,28 @@ export default React.memo<Props>(function VideoJs(props: Props) {
if (e.keyCode === VOLUME_UP_KEYCODE) volumeUp(); if (e.keyCode === VOLUME_UP_KEYCODE) volumeUp();
if (e.keyCode === VOLUME_DOWN_KEYCODE) volumeDown(); if (e.keyCode === VOLUME_DOWN_KEYCODE) volumeDown();
if (e.keyCode === THEATER_MODE_KEYCODE) toggleTheaterMode(); if (e.keyCode === THEATER_MODE_KEYCODE) toggleTheaterMode();
if (e.keyCode === SEEK_FORWARD_KEYCODE) seekVideo(SEEK_STEP); if (e.keyCode === SEEK_FORWARD_KEYCODE) seekVideo(SEEK_STEP, false);
if (e.keyCode === SEEK_BACKWARD_KEYCODE) seekVideo(-SEEK_STEP); if (e.keyCode === SEEK_BACKWARD_KEYCODE) seekVideo(-SEEK_STEP, false);
if (e.keyCode === SEEK_FORWARD_KEYCODE_5) seekVideo(SEEK_STEP_5); if (e.keyCode === SEEK_FORWARD_KEYCODE_5) seekVideo(SEEK_STEP_5, false);
if (e.keyCode === SEEK_BACKWARD_KEYCODE_5) seekVideo(-SEEK_STEP_5); if (e.keyCode === SEEK_BACKWARD_KEYCODE_5) seekVideo(-SEEK_STEP_5, false);
if (String(e.keyCode) in numberCodes) seekVideo(numberCodes[String(e.keyCode)], true);
} }
function seekVideo(stepSize: number) { function seekVideo(stepSize: number, numberedStep: boolean) {
const player = playerRef.current; const player = playerRef.current;
const videoNode = containerRef.current && containerRef.current.querySelector('video, audio'); const videoNode = containerRef.current && containerRef.current.querySelector('video, audio');
if (!videoNode || !player) return; if (!videoNode || !player) return;
const duration = videoNode.duration; const duration = videoNode.duration;
const numberedStepSize = duration / 10;
const currentTime = videoNode.currentTime; const currentTime = videoNode.currentTime;
const newDuration = currentTime + stepSize;
let newDuration;
if (numberedStep) {
newDuration = numberedStepSize * stepSize;
} else {
newDuration = currentTime + stepSize;
}
if (newDuration < 0) { if (newDuration < 0) {
videoNode.currentTime = 0; videoNode.currentTime = 0;
} else if (newDuration > duration) { } else if (newDuration > duration) {
@ -420,7 +442,8 @@ export default React.memo<Props>(function VideoJs(props: Props) {
} else { } else {
videoNode.currentTime = newDuration; videoNode.currentTime = newDuration;
} }
OVERLAY.showSeekedOverlay(player, Math.abs(stepSize), stepSize > 0);
if (!numberedStep) OVERLAY.showSeekedOverlay(player, Math.abs(stepSize), stepSize > 0);
player.userActive(true); player.userActive(true);
} }