diff --git a/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx b/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx index 249111b92..06bfb0d4e 100644 --- a/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx +++ b/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx @@ -162,7 +162,7 @@ function getMarkerTitle(marker: MarkerFragment) { } interface IScenePlayerProps { - scene: GQL.SceneDataFragment | undefined | null; + scene: GQL.SceneDataFragment; hideScrubberOverride: boolean; autoplay?: boolean; permitLoop?: boolean; @@ -217,7 +217,7 @@ export const ScenePlayer: React.FC = ({ const vrTag = uiConfig?.vrTag ?? undefined; const file = useMemo( - () => ((scene?.files.length ?? 0) > 0 ? scene?.files[0] : undefined), + () => (scene.files.length > 0 ? scene.files[0] : undefined), [scene] ); @@ -363,7 +363,7 @@ export const ScenePlayer: React.FC = ({ }, [getPlayer, onNext, onPrevious]); useEffect(() => { - if (scene?.interactive && interactiveInitialised) { + if (scene.interactive && interactiveInitialised) { interactiveReady.current = false; uploadScript(scene.paths.funscript || "").then(() => { interactiveReady.current = true; @@ -372,8 +372,8 @@ export const ScenePlayer: React.FC = ({ }, [ uploadScript, interactiveInitialised, - scene?.interactive, - scene?.paths.funscript, + scene.interactive, + scene.paths.funscript, ]); useEffect(() => { @@ -384,7 +384,7 @@ export const ScenePlayer: React.FC = ({ let showButton = false; - if (scene && vrTag) { + if (vrTag) { showButton = scene.tags.some((tag) => vrTag === tag.name); } @@ -438,7 +438,7 @@ export const ScenePlayer: React.FC = ({ function onplay(this: VideoJsPlayer) { this.persistVolume().enabled = true; - if (scene?.interactive && interactiveReady.current) { + if (scene.interactive && interactiveReady.current) { interactiveClient.play(this.currentTime()); } } @@ -449,14 +449,14 @@ export const ScenePlayer: React.FC = ({ function seeking(this: VideoJsPlayer) { if (this.paused()) return; - if (scene?.interactive && interactiveReady.current) { + if (scene.interactive && interactiveReady.current) { interactiveClient.play(this.currentTime()); } } function timeupdate(this: VideoJsPlayer) { if (this.paused()) return; - if (scene?.interactive && interactiveReady.current) { + if (scene.interactive && interactiveReady.current) { interactiveClient.ensurePlaying(this.currentTime()); } setTime(this.currentTime()); @@ -480,7 +480,7 @@ export const ScenePlayer: React.FC = ({ if (!player) return; // don't re-initialise the player unless the scene has changed - if (!scene || !file || scene.id === sceneId.current) return; + if (!file || scene.id === sceneId.current) return; sceneId.current = scene.id; @@ -629,7 +629,7 @@ export const ScenePlayer: React.FC = ({ useEffect(() => { const player = getPlayer(); - if (!player || !scene) return; + if (!player) return; const markers = player.markers(); markers.clearMarkers(); @@ -652,7 +652,7 @@ export const ScenePlayer: React.FC = ({ if (!player) return; async function saveActivity(resumeTime: number, playDuration: number) { - if (!scene?.id) return; + if (!scene.id) return; await sceneSaveActivity({ variables: { @@ -664,7 +664,7 @@ export const ScenePlayer: React.FC = ({ } async function incrementPlayCount() { - if (!scene?.id) return; + if (!scene.id) return; await sceneIncrementPlayCount({ variables: { @@ -698,7 +698,7 @@ export const ScenePlayer: React.FC = ({ useEffect(() => { const player = getPlayer(); - if (!player || !scene || !ready || !auto.current) { + if (!player || !ready || !auto.current) { return; } @@ -766,7 +766,7 @@ export const ScenePlayer: React.FC = ({ } const isPortrait = - scene && file && file.height && file.width && file.height > file.width; + file && file.height && file.width && file.height > file.width; return (
= ({ onKeyDownCapture={onKeyDown} >
- {scene?.interactive && + {scene.interactive && (interactiveState !== ConnectionState.Ready || getPlayer()?.paused()) && } - {scene && file && showScrubber && ( + {file && showScrubber && ( { const { configuration } = useContext(ConfigurationContext); const { data, loading, error } = useFindScene(id ?? ""); - const [scene, setScene] = useState( - data?.findScene ?? undefined - ); + const [scene, setScene] = useState(); - // only update scene when loading is done - useEffect(() => { + // useLayoutEffect to update before paint + useLayoutEffect(() => { + // only update scene when loading is done if (!loading) { setScene(data?.findScene ?? undefined); } @@ -763,34 +769,32 @@ const SceneLoader: React.FC = () => { } } - if (!scene && loading) return ; - if (error) return ; - - if (!loading && !scene) + if (!scene) { + if (loading) return ; + if (error) return ; return ; + } return (
- {scene && ( - - )} +