mirror of
https://github.com/stashapp/stash.git
synced 2026-02-26 09:12:23 +01:00
Handy integration improvements (#5576)
* Use playing event instead of play * Remove unnecessary ensurePlaying() from timeupdate listener Eliminates redundant API calls by only relying on playing and pause events. Handles edge cases for playback before script upload completion. * Remove unnecessary video seeking event listener We don't need it anymore, listening for playing and pause events is enough. * Send second play event after a play event to adjust for video player issues * Fix script being paused and played after 10 seconds because of activity tracker dependency change
This commit is contained in:
parent
5f595f8ca7
commit
bf3a0e7944
1 changed files with 29 additions and 20 deletions
|
|
@ -434,6 +434,14 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
|
|||
scene.paths.funscript,
|
||||
]);
|
||||
|
||||
// play the script if video started before script upload finished
|
||||
useEffect(() => {
|
||||
if (interactiveState !== ConnectionState.Ready) return;
|
||||
const player = getPlayer();
|
||||
if (!player || player.paused()) return;
|
||||
interactiveClient.ensurePlaying(player.currentTime());
|
||||
}, [interactiveState, getPlayer, interactiveClient]);
|
||||
|
||||
useEffect(() => {
|
||||
const player = getPlayer();
|
||||
if (!player) return;
|
||||
|
|
@ -492,13 +500,23 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
|
|||
};
|
||||
}, [getPlayer]);
|
||||
|
||||
// delay before second play event after a play event to adjust for video player issues
|
||||
const DELAY_FOR_SECOND_PLAY_MS = 1000;
|
||||
const playingTimer = useRef<number>();
|
||||
|
||||
useEffect(() => {
|
||||
const player = getPlayer();
|
||||
if (!player) return;
|
||||
|
||||
function onplay(this: VideoJsPlayer) {
|
||||
function playing(this: VideoJsPlayer) {
|
||||
if (scene.interactive && interactiveReady.current) {
|
||||
interactiveClient.play(this.currentTime());
|
||||
// trigger a second script play event to adjust for video player issues
|
||||
clearTimeout(playingTimer.current);
|
||||
playingTimer.current = setTimeout(() => {
|
||||
if (this.paused()) return;
|
||||
interactiveClient.play(this.currentTime());
|
||||
}, DELAY_FOR_SECOND_PLAY_MS);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -506,31 +524,20 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
|
|||
interactiveClient.pause();
|
||||
}
|
||||
|
||||
function seeking(this: VideoJsPlayer) {
|
||||
if (this.paused()) return;
|
||||
if (scene.interactive && interactiveReady.current) {
|
||||
interactiveClient.play(this.currentTime());
|
||||
}
|
||||
}
|
||||
|
||||
function timeupdate(this: VideoJsPlayer) {
|
||||
if (this.paused()) return;
|
||||
if (scene.interactive && interactiveReady.current) {
|
||||
interactiveClient.ensurePlaying(this.currentTime());
|
||||
}
|
||||
setTime(this.currentTime());
|
||||
}
|
||||
|
||||
player.on("play", onplay);
|
||||
player.on("playing", playing);
|
||||
player.on("pause", pause);
|
||||
player.on("seeking", seeking);
|
||||
player.on("timeupdate", timeupdate);
|
||||
|
||||
return () => {
|
||||
player.off("play", onplay);
|
||||
player.off("playing", playing);
|
||||
player.off("pause", pause);
|
||||
player.off("seeking", seeking);
|
||||
player.off("timeupdate", timeupdate);
|
||||
clearTimeout(playingTimer.current);
|
||||
};
|
||||
}, [getPlayer, interactiveClient, scene]);
|
||||
|
||||
|
|
@ -676,11 +683,6 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
|
|||
});
|
||||
|
||||
started.current = false;
|
||||
|
||||
return () => {
|
||||
// stop the interactive client
|
||||
interactiveClient.pause();
|
||||
};
|
||||
}, [
|
||||
getPlayer,
|
||||
file,
|
||||
|
|
@ -693,6 +695,13 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
|
|||
_initialTimestamp,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
// stop the interactive client on unmount
|
||||
interactiveClient.pause();
|
||||
};
|
||||
}, [interactiveClient]);
|
||||
|
||||
const loadMarkers = useCallback(() => {
|
||||
const player = getPlayer();
|
||||
if (!player) return;
|
||||
|
|
|
|||
Loading…
Reference in a new issue