UI V2

Squashed commits: [e74bbf9] stuff [28476de] stuff [c7efb7b] stuff [2c78f94] stuff [f79338e] stuff [a697876] stuff [85bb60e] stuff [9f108b2] stuff [d8e00c0] stuff [7787ef9] stuff [f7f10b7] stuff [aa266f7] stuff [511ba6b] stuff [7453747] stuff [db55e2d] stuff [b362623] stuff [7288c17] stuff [86638cd] stuff [879dac4] stuff [65a4996] stuff [c6fb361] stuff [d449ce7] stuff [349dffa] stuff [84206ab] stuff [0253c65] stuff [cc0992e] stuff [3289e7d] stuff [d9ab290] stuff [dcc980d] stuff [7787da8] stuff [5bcf7cd] stuff [00e9316] stuff [54c9398] stuff [72b6ee1] stuff [4b4b26c] stuff [4cbdb06] stuff [1a240b3] stuff [650ea08] stuff [37440ef] stuff [9ee66ba] stuff [b430c86] stuff [37159c3] stuff [deba837] stuff [6ac65f6] stuff [a2ca1a1] stuff [c010229] stuff [3fd7306] stuff [cbe6efc] stuff [997a8d0] stuff [d0708a2] stuff [d316aba] stuff [4fe9900] Added initial files
2025-12-18 12:54:38 +03:00 · 2019-02-15 09:15:00 -08:00
parent c4d45db30c
commit 66d2c5ca04
102 changed files with 20432 additions and 29 deletions
--- a/ui/v2/src/components/scenes/SceneDetails/Scene.tsx
+++ b/ui/v2/src/components/scenes/SceneDetails/Scene.tsx
@@ -0,0 +1,91 @@
+import {
+  Card,
+  Spinner,
+  Tab,
+  Tabs,
+} from "@blueprintjs/core";
+import queryString from "query-string";
+import React, { FunctionComponent, useEffect, useState } from "react";
+import * as GQL from "../../../core/generated-graphql";
+import { StashService } from "../../../core/StashService";
+import { IBaseProps } from "../../../models";
+import { GalleryViewer } from "../../Galleries/GalleryViewer";
+import { ScenePlayer } from "../ScenePlayer/ScenePlayer";
+import { SceneDetailPanel } from "./SceneDetailPanel";
+import { SceneEditPanel } from "./SceneEditPanel";
+import { SceneFileInfoPanel } from "./SceneFileInfoPanel";
+import { SceneMarkersPanel } from "./SceneMarkersPanel";
+import { ScenePerformerPanel } from "./ScenePerformerPanel";
+
+interface ISceneProps extends IBaseProps {}
+
+export const Scene: FunctionComponent<ISceneProps> = (props: ISceneProps) => {
+  const [timestamp, setTimestamp] = useState<number>(0);
+  const [scene, setScene] = useState<Partial<GQL.SceneDataFragment>>({});
+  const [isLoading, setIsLoading] = useState(false);
+  const { data, error, loading } = StashService.useFindScene(props.match.params.id);
+
+  useEffect(() => {
+    setIsLoading(loading);
+    if (!data || !data.findScene || !!error) { return; }
+    setScene(StashService.nullToUndefined(data.findScene));
+  }, [data]);
+
+  useEffect(() => {
+    const queryParams = queryString.parse(props.location.search);
+    if (!!queryParams.t && typeof queryParams.t === "string" && timestamp === 0) {
+      const newTimestamp = parseInt(queryParams.t, 10);
+      setTimestamp(newTimestamp);
+    }
+  });
+
+  function onClickMarker(marker: GQL.SceneMarkerDataFragment) {
+    setTimestamp(marker.seconds);
+  }
+
+  if (!data || !data.findScene || isLoading || Object.keys(scene).length === 0) {
+    return <Spinner size={Spinner.SIZE_LARGE} />;
+  }
+  const modifiedScene =
+    Object.assign({scene_marker_tags: data.sceneMarkerTags}, scene) as GQL.SceneDataFragment; // TODO Hack from angular
+  if (!!error) { return <>error...</>; }
+
+  return (
+    <>
+      <ScenePlayer scene={modifiedScene} timestamp={timestamp} />
+      <Card id="details-container">
+        <Tabs
+          renderActiveTabPanelOnly={true}
+          large={true}
+        >
+            <Tab id="scene-details-panel" title="Details" panel={<SceneDetailPanel scene={modifiedScene} />} />
+            <Tab
+              id="scene-markers-panel"
+              title="Markers"
+              panel={<SceneMarkersPanel scene={modifiedScene} onClickMarker={onClickMarker} />}
+            />
+            {modifiedScene.performers.length > 0 ?
+              <Tab
+                id="scene-performer-panel"
+                title="Performers"
+                panel={<ScenePerformerPanel scene={modifiedScene} />}
+              /> : undefined
+            }
+            {!!modifiedScene.gallery ?
+              <Tab
+                id="scene-gallery-panel"
+                title="Gallery"
+                panel={<GalleryViewer gallery={modifiedScene.gallery} />}
+              /> : undefined
+            }
+            <Tab id="scene-file-info-panel" title="File Info" panel={<SceneFileInfoPanel scene={modifiedScene} />} />
+            <Tab
+              id="scene-edit-panel"
+              title="Edit"
+              panel={<SceneEditPanel scene={modifiedScene} onUpdate={(newScene) => setScene(newScene)} />}
+            />
+        </Tabs>
+      </Card>
+    </>
+  );
+};