diff --git a/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx b/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx index 51919bf30..6bd2a39b1 100644 --- a/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx +++ b/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx @@ -15,6 +15,71 @@ import { Interactive } from "src/utils/interactive"; export const VIDEO_PLAYER_ID = "VideoJsPlayer"; +function handleHotkeys(player: VideoJsPlayer, event: VideoJS.KeyboardEvent) { + function seekPercent(percent: number) { + const duration = player.duration(); + const time = duration * percent; + player.currentTime(time); + } + + switch (event.which) { + case 32: // space + case 13: // enter + if (player.paused()) player.play(); + else player.pause(); + break; + case 77: // m + player.muted(!player.muted()); + break; + case 70: // f + if (player.isFullscreen()) player.exitFullscreen(); + else player.requestFullscreen(); + break; + case 39: // right arrow + player.currentTime(Math.max(player.duration(), player.currentTime() + 5)); + break; + case 37: // left arrow + player.currentTime(Math.max(0, player.currentTime() - 5)); + break; + case 38: // up arrow + player.volume(player.volume() + 0.1); + break; + case 40: // down arrow + player.volume(player.volume() - 0.1); + break; + case 48: // 0 + player.currentTime(0); + break; + case 49: // 1 + seekPercent(0.1); + break; + case 50: // 2 + seekPercent(0.2); + break; + case 51: // 3 + seekPercent(0.3); + break; + case 52: // 4 + seekPercent(0.4); + break; + case 53: // 5 + seekPercent(0.5); + break; + case 54: // 6 + seekPercent(0.6); + break; + case 55: // 7 + seekPercent(0.7); + break; + case 56: // 8 + seekPercent(0.8); + break; + case 57: // 9 + seekPercent(0.9); + break; + } +} + interface IScenePlayerProps { className?: string; scene: GQL.SceneDataFragment | undefined | null; @@ -38,6 +103,7 @@ export const ScenePlayer: React.FC = ({ const config = configuration?.interface; const videoRef = useRef(null); const playerRef = useRef(); + const sceneId = useRef(); const skipButtonsRef = useRef(); const [time, setTime] = useState(0); @@ -76,7 +142,10 @@ export const ScenePlayer: React.FC = ({ inactivityTimeout: 2000, preload: "none", userActions: { - hotkeys: true, + hotkeys: function (event) { + const player = this as VideoJsPlayer; + handleHotkeys(player, event); + }, }, }; @@ -186,7 +255,8 @@ export const ScenePlayer: React.FC = ({ return false; } - if (!scene) return; + if (!scene || scene.id === sceneId.current) return; + sceneId.current = scene.id; const player = playerRef.current; if (!player) return; diff --git a/ui/v2.5/src/components/ScenePlayer/styles.scss b/ui/v2.5/src/components/ScenePlayer/styles.scss index 43e558135..a557ab912 100644 --- a/ui/v2.5/src/components/ScenePlayer/styles.scss +++ b/ui/v2.5/src/components/ScenePlayer/styles.scss @@ -133,6 +133,10 @@ $sceneTabWidth: 450px; width: 98%; } + .vjs-volume-control { + z-index: 1; + } + .vjs-vtt-thumbnail-display { border: 2px solid white; border-radius: 2px;