also add keybinds for volume

This commit is contained in:
r0ckinn 2021-03-19 17:18:39 -03:00 committed by Sean Yesmunt
parent 6b3dce0450
commit 6b8554517c
2 changed files with 34 additions and 1 deletions

View file

@ -97,3 +97,22 @@ export function showSeekedOverlay(player, duration, isForward) {
showOneOffOverlay(player, OVERLAY_CLASS_SEEKED, overlayJsx, 'center');
}
/**
* Displays a transient "Volume Percentage" overlay.
*
* @param player The videojs instance.
* @param percentage how much % of volume active.
*/
export function showVolumeverlay(player, percentage) {
const overlayJsx = (
<div>
<p>
{percentage}
{'%'}
</p>
</div>
);
showOneOffOverlay(player, OVERLAY_CLASS_SEEKED, overlayJsx, 'center');
}

View file

@ -86,18 +86,22 @@ const SMALL_F_KEYCODE = 70;
const SMALL_M_KEYCODE = 77;
const SMALL_T_KEYCODE = 84;
const ARROW_LEFT_KEYCODE = 37;
const ARROW_UP_KEYCODE = 38;
const ARROW_RIGHT_KEYCODE = 39;
const ARROW_DOWN_KEYCODE = 40;
const COMMA_KEYCODE = 188;
const PERIOD_KEYCODE = 190;
const SMALL_J_KEYCODE = 74;
const SMALL_K_KEYCODE = 75;
const SMALL_L_KEYCODE = 76;
const FULLSCREEN_KEYCODE = SMALL_F_KEYCODE;
const MUTE_KEYCODE = SMALL_M_KEYCODE;
const THEATER_MODE_KEYCODE = SMALL_T_KEYCODE;
const VOLUME_UP_KEYCODE = ARROW_UP_KEYCODE;
const VOLUME_DOWN_KEYCODE = ARROW_DOWN_KEYCODE;
const SEEK_FORWARD_KEYCODE = SMALL_L_KEYCODE;
const SEEK_BACKWARD_KEYCODE = SMALL_J_KEYCODE;
const SEEK_FORWARD_KEYCODE_5 = ARROW_RIGHT_KEYCODE;
@ -358,6 +362,16 @@ export default React.memo<Props>(function VideoJs(props: Props) {
if (e.keyCode === MUTE_KEYCODE) {
videoNode.muted = !videoNode.muted;
}
if (e.keyCode === VOLUME_DOWN_KEYCODE) {
player.volume(player.volume()-0.05);
OVERLAY.showVolumeverlay(player, Math.round(player.volume()*100));
player.userActive(true);
}
if (e.keyCode === VOLUME_UP_KEYCODE) {
player.volume(player.volume()+0.05);
OVERLAY.showVolumeverlay(player, Math.round(player.volume()*100));
player.userActive(true);
}
// Seeking Shortcuts
if (!e.altKey) {