mirror of
https://github.com/stashapp/stash.git
synced 2025-12-18 21:04:37 +03:00
Scene player fixes (#2441)
* Fix scene player stopping on save * Restore previous player hotkeys * Volume control over seek bar
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user