also add keybinds for volume
This commit is contained in:
parent
6b3dce0450
commit
6b8554517c
2 changed files with 34 additions and 1 deletions
|
@ -97,3 +97,22 @@ export function showSeekedOverlay(player, duration, isForward) {
|
||||||
|
|
||||||
showOneOffOverlay(player, OVERLAY_CLASS_SEEKED, overlayJsx, 'center');
|
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');
|
||||||
|
}
|
||||||
|
|
|
@ -86,18 +86,22 @@ const SMALL_F_KEYCODE = 70;
|
||||||
const SMALL_M_KEYCODE = 77;
|
const SMALL_M_KEYCODE = 77;
|
||||||
const SMALL_T_KEYCODE = 84;
|
const SMALL_T_KEYCODE = 84;
|
||||||
const ARROW_LEFT_KEYCODE = 37;
|
const ARROW_LEFT_KEYCODE = 37;
|
||||||
|
const ARROW_UP_KEYCODE = 38;
|
||||||
const ARROW_RIGHT_KEYCODE = 39;
|
const ARROW_RIGHT_KEYCODE = 39;
|
||||||
|
const ARROW_DOWN_KEYCODE = 40;
|
||||||
const COMMA_KEYCODE = 188;
|
const COMMA_KEYCODE = 188;
|
||||||
const PERIOD_KEYCODE = 190;
|
const PERIOD_KEYCODE = 190;
|
||||||
const SMALL_J_KEYCODE = 74;
|
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 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;
|
||||||
|
|
||||||
|
const VOLUME_UP_KEYCODE = ARROW_UP_KEYCODE;
|
||||||
|
const VOLUME_DOWN_KEYCODE = ARROW_DOWN_KEYCODE;
|
||||||
|
|
||||||
const SEEK_FORWARD_KEYCODE = SMALL_L_KEYCODE;
|
const SEEK_FORWARD_KEYCODE = SMALL_L_KEYCODE;
|
||||||
const SEEK_BACKWARD_KEYCODE = SMALL_J_KEYCODE;
|
const SEEK_BACKWARD_KEYCODE = SMALL_J_KEYCODE;
|
||||||
const SEEK_FORWARD_KEYCODE_5 = ARROW_RIGHT_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) {
|
if (e.keyCode === MUTE_KEYCODE) {
|
||||||
videoNode.muted = !videoNode.muted;
|
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
|
// Seeking Shortcuts
|
||||||
if (!e.altKey) {
|
if (!e.altKey) {
|
||||||
|
|
Loading…
Reference in a new issue