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

Volume Bar doc update and cleanup

Browse source
This commit is contained in:
infinite-persistence 2022-06-07 11:20:31 +08:00
commit df0b65daf1
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
2 changed files with 16 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
ui/component/viewers/videoViewer/internal/lbry-volume-bar.js
View file

@ -11,6 +11,12 @@ const VIDEOJS_VOLUME_PANEL_CLASS = 'VolumePanel';
const VIDEOJS_VOLUME_CONTROL_CLASS = 'VolumeControl'; const VIDEOJS_VOLUME_CONTROL_CLASS = 'VolumeControl';
const VIDEOJS_VOLUME_BAR_CLASS = 'VolumeBar'; const VIDEOJS_VOLUME_BAR_CLASS = 'VolumeBar';
/**
* LbryVolumeBarClass
*
* NOTE_1: https://github.com/lbryio/lbry-desktop/pull/5034 Stop propagation of
* mouse down/up events for it to work in Floating Player.
*/
class LbryVolumeBarClass extends videojs.getComponent(VIDEOJS_VOLUME_BAR_CLASS) { class LbryVolumeBarClass extends videojs.getComponent(VIDEOJS_VOLUME_BAR_CLASS) {
constructor(player, options = {}) { constructor(player, options = {}) {
super(player, options); super(player, options);
@ -34,12 +40,12 @@ class LbryVolumeBarClass extends videojs.getComponent(VIDEOJS_VOLUME_BAR_CLASS)
handleMouseDown(event) { handleMouseDown(event) {
super.handleMouseDown(event); super.handleMouseDown(event);
event.stopPropagation(); event.stopPropagation(); // @see NOTE_1
} }
handleMouseMove(event) { handleMouseMove(event) {
super.handleMouseMove(event); super.handleMouseMove(event);
event.stopPropagation(); event.stopPropagation(); // @see NOTE_1
} }
} }

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

@ -6,8 +6,8 @@ import isUserTyping from 'util/detect-typing';
const SEEK_STEP_5 = 5; const SEEK_STEP_5 = 5;
const SEEK_STEP = 10; // time to seek in seconds const SEEK_STEP = 10; // time to seek in seconds
const VOLUME_CHANGE_ON_SCROLL = 0.05; const VOLUME_STEP = 0.05;
const PRECISE_VOLUME_CHANGE_ON_SCROLL = 0.01; const VOLUME_STEP_FINE = 0.01;
// check if active (clicked) element is part of video div, used for keyboard shortcuts (volume etc) // check if active (clicked) element is part of video div, used for keyboard shortcuts (volume etc)
function activeElementIsPartOfVideoElement() { function activeElementIsPartOfVideoElement() {
@ -16,7 +16,7 @@ function activeElementIsPartOfVideoElement() {
return videoElementParent.contains(activeElement); return videoElementParent.contains(activeElement);
} }
function volumeUp(event, playerRef, checkIsActive = true, amount = 0.05) { function volumeUp(event, playerRef, checkIsActive = true, amount = VOLUME_STEP) {
// dont run if video element is not active element (otherwise runs when scrolling using keypad) // dont run if video element is not active element (otherwise runs when scrolling using keypad)
const videoElementIsActive = activeElementIsPartOfVideoElement(); const videoElementIsActive = activeElementIsPartOfVideoElement();
const player = playerRef.current; const player = playerRef.current;
@ -27,7 +27,7 @@ function volumeUp(event, playerRef, checkIsActive = true, amount = 0.05) {
player.userActive(true); player.userActive(true);
} }
function volumeDown(event, playerRef, checkIsActive = true, amount = 0.05) { function volumeDown(event, playerRef, checkIsActive = true, amount = VOLUME_STEP) {
// dont run if video element is not active element (otherwise runs when scrolling using keypad) // dont run if video element is not active element (otherwise runs when scrolling using keypad)
const videoElementIsActive = activeElementIsPartOfVideoElement(); const videoElementIsActive = activeElementIsPartOfVideoElement();
const player = playerRef.current; const player = playerRef.current;
@ -166,10 +166,10 @@ const VideoJsShorcuts = ({
} }
const handleVideoScrollWheel = (event, playerRef, containerRef) => { const handleVideoScrollWheel = (event, playerRef, containerRef) => {
// Handle precise volume control when scrolling over the video player while holding down the "SHIFT"-key
const player = playerRef.current; const player = playerRef.current;
const videoNode = containerRef.current && containerRef.current.querySelector('video'); const videoNode = containerRef.current && containerRef.current.querySelector('video');
// SHIFT key required. Scrolling the page will be the priority.
if (!videoNode || !player || isUserTyping() || !event.shiftKey) return; if (!videoNode || !player || isUserTyping() || !event.shiftKey) return;
event.preventDefault(); event.preventDefault();
@ -177,14 +177,13 @@ const VideoJsShorcuts = ({
const delta = event.deltaY; const delta = event.deltaY;
if (delta > 0) { if (delta > 0) {
volumeDown(event, playerRef, false, PRECISE_VOLUME_CHANGE_ON_SCROLL); volumeDown(event, playerRef, false, VOLUME_STEP_FINE);
} else if (delta < 0) { } else if (delta < 0) {
volumeUp(event, playerRef, false, PRECISE_VOLUME_CHANGE_ON_SCROLL); volumeUp(event, playerRef, false, VOLUME_STEP_FINE);
} }
}; };
const handleVolumeBarScrollWheel = (event, volumeElement, playerRef, containerRef) => { const handleVolumeBarScrollWheel = (event, volumeElement, playerRef, containerRef) => {
// Handle generic and precise volume control when scrolling over the volume bar
const player = playerRef.current; const player = playerRef.current;
const videoNode = containerRef.current && containerRef.current.querySelector('video'); const videoNode = containerRef.current && containerRef.current.querySelector('video');
@ -194,7 +193,7 @@ const VideoJsShorcuts = ({
event.stopImmediatePropagation(); event.stopImmediatePropagation();
const delta = event.deltaY; const delta = event.deltaY;
const changeAmount = event.shiftKey ? PRECISE_VOLUME_CHANGE_ON_SCROLL : VOLUME_CHANGE_ON_SCROLL; const changeAmount = event.shiftKey ? VOLUME_STEP_FINE : VOLUME_STEP;
if (delta > 0) { if (delta > 0) {
volumeDown(event, playerRef, false, changeAmount); volumeDown(event, playerRef, false, changeAmount);