Scene player fixes (#2441)

* Fix scene player stopping on save
* Restore previous player hotkeys
* Volume control over seek bar
This commit is contained in:
WithoutPants
2022-03-29 17:17:02 +11:00
committed by GitHub
parent 743bbc4613
commit c4c62d2516
2 changed files with 76 additions and 2 deletions

View File

@@ -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<IScenePlayerProps> = ({
const config = configuration?.interface;
const videoRef = useRef<HTMLVideoElement>(null);
const playerRef = useRef<VideoJsPlayer | undefined>();
const sceneId = useRef<string | undefined>();
const skipButtonsRef = useRef<any>();
const [time, setTime] = useState(0);
@@ -76,7 +142,10 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
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<IScenePlayerProps> = ({
return false;
}
if (!scene) return;
if (!scene || scene.id === sceneId.current) return;
sceneId.current = scene.id;
const player = playerRef.current;
if (!player) return;

View File

@@ -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;