File storage rewrite (#2676)

* Restructure data layer part 2 (#2599)
* Refactor and separate image model
* Refactor image query builder
* Handle relationships in image query builder
* Remove relationship management methods
* Refactor gallery model/query builder
* Add scenes to gallery model
* Convert scene model
* Refactor scene models
* Remove unused methods
* Add unit tests for gallery
* Add image tests
* Add scene tests
* Convert unnecessary scene value pointers to values
* Convert unnecessary pointer values to values
* Refactor scene partial
* Add scene partial tests
* Refactor ImagePartial
* Add image partial tests
* Refactor gallery partial update
* Add partial gallery update tests
* Use zero/null package for null values
* Add files and scan system
* Add sqlite implementation for files/folders
* Add unit tests for files/folders
* Image refactors
* Update image data layer
* Refactor gallery model and creation
* Refactor scene model
* Refactor scenes
* Don't set title from filename
* Allow galleries to freely add/remove images
* Add multiple scene file support to graphql and UI
* Add multiple file support for images in graphql/UI
* Add multiple file for galleries in graphql/UI
* Remove use of some deprecated fields
* Remove scene path usage
* Remove gallery path usage
* Remove path from image
* Move funscript to video file
* Refactor caption detection
* Migrate existing data
* Add post commit/rollback hook system
* Lint. Comment out import/export tests
* Add WithDatabase read only wrapper
* Prepend tasks to list
* Add 32 pre-migration
* Add warnings in release and migration notes

ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx

@@ -3,6 +3,7 @@ import React, {
   useCallback,
   useContext,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from "react";
@@ -153,6 +154,11 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
   const started = useRef(false);
   const interactiveReady = useRef(false);
 
+  const file = useMemo(
+    () => ((scene?.files.length ?? 0) > 0 ? scene?.files[0] : undefined),
+    [scene]
+  );
+
   const maxLoopDuration = config?.maximumLoopDuration ?? 0;
 
   useEffect(() => {
@@ -303,7 +309,7 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
     }
 
     function handleOffset(player: VideoJsPlayer) {
-      if (!scene) return;
+      if (!scene || !file) return;
 
       const currentSrc = player.currentSrc();
 
@@ -312,7 +318,7 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
 
       const curTime = player.currentTime();
       if (!isDirect) {
-        (player as any).setOffsetDuration(scene.file.duration);
+        (player as any).setOffsetDuration(file.duration);
       } else {
         (player as any).clearOffsetDuration();
       }
@@ -487,7 +493,7 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
     player.on("loadedmetadata", loadedmetadata);
 
     // don't re-initialise the player unless the scene has changed
-    if (!scene || scene.id === sceneId.current) return;
+    if (!scene || !file || scene.id === sceneId.current) return;
     sceneId.current = scene.id;
 
     // always stop the interactive client on initialisation
@@ -499,10 +505,7 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
     if (!auto && scene.paths?.screenshot) player.poster(scene.paths.screenshot);
     else player.poster("");
 
-    const isLandscape =
-      scene.file.height &&
-      scene.file.width &&
-      scene.file.width > scene.file.height;
+    const isLandscape = file.height && file.width && file.width > file.height;
 
     if (isLandscape) {
       (player as any).landscapeFullscreen({
@@ -551,9 +554,9 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
     player.currentTime(0);
 
     const looping =
-      !!scene.file.duration &&
+      !!file.duration &&
       maxLoopDuration !== 0 &&
-      scene.file.duration < maxLoopDuration;
+      file.duration < maxLoopDuration;
     player.loop(looping);
     interactiveClient.setLooping(looping);
 
@@ -588,6 +591,7 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
     };
   }, [
     scene,
+    file,
     config?.autostartVideo,
     maxLoopDuration,
     initialTimestamp,
@@ -649,10 +653,7 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
   };
 
   const isPortrait =
-    scene &&
-    scene.file.height &&
-    scene.file.width &&
-    scene.file.height > scene.file.width;
+    scene && file && file.height && file.width && file.height > file.width;
 
   return (
     <div className={cx("VideoPlayer", { portrait: isPortrait })}>
@@ -667,8 +668,9 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
       {scene?.interactive &&
         (interactiveState !== ConnectionState.Ready ||
           playerRef.current?.paused()) && <SceneInteractiveStatus />}
-      {scene && (
+      {scene && file && (
         <ScenePlayerScrubber
+          file={file}
           scene={scene}
           position={time}
           onSeek={onScrubberSeek}