Fix scene missing flicker on scene page (#3857)

* use useLayoutEffect
* Remove unnecessary nullability in ScenePlayer

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<IScenePlayerProps> = ({
   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<IScenePlayerProps> = ({
   }, [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<IScenePlayerProps> = ({
   }, [
     uploadScript,
     interactiveInitialised,
-    scene?.interactive,
-    scene?.paths.funscript,
+    scene.interactive,
+    scene.paths.funscript,
   ]);
 
   useEffect(() => {
@@ -384,7 +384,7 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
 
     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<IScenePlayerProps> = ({
 
     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<IScenePlayerProps> = ({
 
     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<IScenePlayerProps> = ({
     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<IScenePlayerProps> = ({
 
   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<IScenePlayerProps> = ({
     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<IScenePlayerProps> = ({
     }
 
     async function incrementPlayCount() {
-      if (!scene?.id) return;
+      if (!scene.id) return;
 
       await sceneIncrementPlayCount({
         variables: {
@@ -698,7 +698,7 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
 
   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<IScenePlayerProps> = ({
   }
 
   const isPortrait =
-    scene && file && file.height && file.width && file.height > file.width;
+    file && file.height && file.width && file.height > file.width;
 
   return (
     <div
@@ -774,10 +774,10 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
       onKeyDownCapture={onKeyDown}
     >
       <div className="video-wrapper" ref={videoRef} />
-      {scene?.interactive &&
+      {scene.interactive &&
         (interactiveState !== ConnectionState.Ready ||
           getPlayer()?.paused()) && <SceneInteractiveStatus />}
-      {scene && file && showScrubber && (
+      {file && showScrubber && (
         <ScenePlayerScrubber
           file={file}
           scene={scene}

ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx

@@ -1,5 +1,12 @@
 import { Tab, Nav, Dropdown, Button, ButtonGroup } from "react-bootstrap";
-import React, { useEffect, useState, useMemo, useContext, useRef } from "react";
+import React, {
+  useEffect,
+  useState,
+  useMemo,
+  useContext,
+  useRef,
+  useLayoutEffect,
+} from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useParams, useLocation, useHistory, Link } from "react-router-dom";
 import { Helmet } from "react-helmet";
@@ -541,12 +548,11 @@ const SceneLoader: React.FC = () => {
   const { configuration } = useContext(ConfigurationContext);
   const { data, loading, error } = useFindScene(id ?? "");
 
-  const [scene, setScene] = useState<GQL.SceneDataFragment | undefined>(
-    data?.findScene ?? undefined
-  );
+  const [scene, setScene] = useState<GQL.SceneDataFragment>();
 
-  // 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 <LoadingIndicator />;
-  if (error) return <ErrorMessage error={error.message} />;
-
-  if (!loading && !scene)
+  if (!scene) {
+    if (loading) return <LoadingIndicator />;
+    if (error) return <ErrorMessage error={error.message} />;
     return <ErrorMessage error={`No scene found with id ${id}.`} />;
+  }
 
   return (
     <div className="row">
-      {scene && (
-        <ScenePage
-          scene={scene}
-          setTimestamp={setTimestamp}
-          queueScenes={queueScenes ?? []}
-          queueStart={queueStart}
-          onDelete={onDelete}
-          onQueueNext={onQueueNext}
-          onQueuePrevious={onQueuePrevious}
-          onQueueRandom={onQueueRandom}
-          continuePlaylist={continuePlaylist}
-          loadScene={loadScene}
-          queueHasMoreScenes={queueHasMoreScenes}
-          onQueueLessScenes={onQueueLessScenes}
-          onQueueMoreScenes={onQueueMoreScenes}
-          collapsed={collapsed}
-          setCollapsed={setCollapsed}
-          setContinuePlaylist={setContinuePlaylist}
-        />
-      )}
+      <ScenePage
+        scene={scene}
+        setTimestamp={setTimestamp}
+        queueScenes={queueScenes ?? []}
+        queueStart={queueStart}
+        onDelete={onDelete}
+        onQueueNext={onQueueNext}
+        onQueuePrevious={onQueuePrevious}
+        onQueueRandom={onQueueRandom}
+        continuePlaylist={continuePlaylist}
+        loadScene={loadScene}
+        queueHasMoreScenes={queueHasMoreScenes}
+        onQueueLessScenes={onQueueLessScenes}
+        onQueueMoreScenes={onQueueMoreScenes}
+        collapsed={collapsed}
+        setCollapsed={setCollapsed}
+        setContinuePlaylist={setContinuePlaylist}
+      />
       <div className={`scene-player-container ${collapsed ? "expanded" : ""}`}>
         <ScenePlayer
           key="ScenePlayer"