Adding Video Panel

frontend/apps/editor3d/app/src/components/signaled/TopBar/TopBar.tsx

@@ -19,7 +19,6 @@ import { Signal } from "@preact/signals-react";
 import { useSignals } from "@preact/signals-react/runtime";
 import { setLogoutStates } from "~/signals/authentication/utilities";
 import { EngineContext } from "~/pages/PageEnigma/contexts/EngineContext";
-import { useAppUiContext } from "~/pages/Page2d/contextSignals/appUi";
 
 function isEditorPath(path: string) {
   if (path === "/") return true;
@@ -37,6 +36,7 @@ interface Props {
 const appTabs: TabItem[] = [
   { id: "2D", label: "2D" },
   { id: "3D", label: "3D" },
+  { id: "VIDEO", label: "Video" },
 ];
 
 export const TopBar = ({

frontend/apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx

@@ -8,6 +8,7 @@ import { PreviewEngineCamera } from "./comps/PreviewEngineCamera";
 import { PreviewFrameImage } from "./comps/PreviewFrameImage";
 import { pageHeight, pageWidth } from "~/signals";
 import { PoseModeSelector } from "./comps/PoseModeSelector";
+import ImageToVideo from "../PageVideo/ImageToVideo";
 import {
   timelineHeight,
   sidePanelWidth,
@@ -145,13 +146,6 @@ export const PageEditor = () => {
 
         // Force a render to update the view
         editorEngine.renderScene();
-
-        // Queue an update to ensure the engine processes the camera change
-        // Queue.publish({
-        //   queueName: QueueNames.TO_ENGINE,
-        //   action: toEngineActions.CAMERA_CHANGED,
-        //   data: selectedCamera,
-        // });
       }
 
       // Force update camera properties in the state
@@ -215,19 +209,6 @@ export const PageEditor = () => {
 
       // Force a render to update the view
       editorEngine.renderScene();
-
-      // Queue.publish({
-      //   queueName: QueueNames.TO_ENGINE,
-      //   action: toEngineActions.CAMERA_CHANGED,
-      //   data: {
-      //     id: newId,
-      //     label: `Camera ${newIndex}`,
-      //     focalLength: 24,
-      //     position: { x: randomX, y: randomY, z: randomZ },
-      //     rotation: { x: 0, y: 0, z: 0 },
-      //     lookAt: { x: 0, y: 0, z: 0 },
-      //   },
-      // });
     }
   };
 
@@ -253,6 +234,7 @@ export const PageEditor = () => {
 
   const display3d = appTabId.value === "3D" ? "block" : "none";
   const display2d = appTabId.value === "2D" ? "block" : "none";
+  const displayVideo = appTabId.value === "VIDEO" ? "block" : "none";
 
   return (
     <div className="w-screen">
@@ -343,7 +325,9 @@ export const PageEditor = () => {
                   }
                   editorEngine!.positive_prompt = prompt;
                 }}
-                snapshotCurrentFrame={editorEngine?.snapShotOfCurrentFrame.bind(editorEngine)}
+                snapshotCurrentFrame={editorEngine?.snapShotOfCurrentFrame.bind(
+                  editorEngine,
+                )}
               />
 
               <LoadingDots
@@ -360,9 +344,12 @@ export const PageEditor = () => {
         <KonvaRootComponent className="h-full w-full" />
       </KonvaCanvasContainer>
 
+      <div style={{ display: displayVideo }}>
+        <ImageToVideo className="h-full w-full" />
+      </div>
 
       <LoginModal
-        onClose={() => { }}
+        onClose={() => {}}
         videoSrc2D="/resources/videos/artcraft-canvas-demo.mp4"
         videoSrc3D="/resources/videos/artcraft-3d-demo.mp4"
         openAiLogo="/resources/images/openai-logo.png"

frontend/apps/editor3d/app/src/pages/PageEnigma/PageEnigma.tsx

@@ -12,7 +12,6 @@ import { useSignals } from "@preact/signals-react/runtime";
 import { useEffect, useState } from "react";
 import * as gpu from "detect-gpu";
 import { UsersApi } from "~/Classes/ApiManager";
-import { PageEnigmaComponent } from "~/pages/PageEnigma/PageEnigmaComponent";
 import { TurnOnGpu } from "~/pages/PageEnigma/TurnOnGpu";
 import { PrecisionSelector } from "./comps/PrecisionSelector/PrecisionSelector";
 import {
@@ -24,7 +23,7 @@ import {
 import { InstallSounds } from "~/pages/PageEnigma/InstallSounds";
 import { useImageGenerationFailureEvent } from "./TauriEvents/useImageGenerationFailureEvent";
 import { useImageGenerationSuccessEvent } from "./TauriEvents/useImageGenerationSuccessEvent";
-
+import { PageEditor } from "~/pages/PageEnigma/PageEditor";
 export const PageEnigma = ({ sceneToken }: { sceneToken?: string }) => {
   useSignals();
   useActiveJobs();
@@ -107,7 +106,7 @@ export const PageEnigma = ({ sceneToken }: { sceneToken?: string }) => {
   return (
     <TrackProvider>
       <EngineProvider sceneToken={sceneToken}>
-        <PageEnigmaComponent />
+        <PageEditor />
         <DragComponent />
         <PrecisionSelector
           showSignal={showPrecisionSelector}

frontend/apps/editor3d/app/src/pages/PageEnigma/PageEnigmaComponent.tsx

@@ -1,20 +1,15 @@
 import { useSignals } from "@preact/signals-react/runtime";
 import { PageEditor } from "~/pages/PageEnigma/PageEditor";
-import { PageStyling } from "~/pages/PageEnigma/PageStyling";
+
+// TODO: Remove these file
 import { currentPage } from "~/signals";
 import { Pages } from "~/pages/PageEnigma/constants/page";
 
 export const PageEnigmaComponent = () => {
   useSignals();
-
   return (
     <>
-      <div className={currentPage.value === Pages.EDIT ? "visible" : "hidden"}>
-        <PageEditor />
-      </div>
-      <div className={currentPage.value === Pages.STYLE ? "visible" : "hidden"}>
-        <PageStyling />
-      </div>
+      <PageEditor />
     </>
   );
 };

frontend/apps/editor3d/app/src/pages/PageEnigma/constants/page.ts

@@ -1,3 +1,4 @@
+// TODO: Remove this file
 export enum Pages {
   EDIT,
   STYLE,

frontend/apps/editor3d/app/src/pages/PageVideo/ImageToVideo.tsx

@@ -0,0 +1,63 @@
+import { useState, useEffect, useRef } from "react";
+import { PromptBox2D } from "@storyteller/ui-promptbox";
+import { UploaderState } from "libs/common/src/lib/interfaces";
+import {
+  MaybeCanvasRenderBitmapType,
+  JobContextType,
+} from "libs/common/src/lib/types";
+
+const ImageToVideo = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const uploadImage = ({
+    title,
+    assetFile,
+    progressCallback,
+  }: {
+    title: string;
+    assetFile: File;
+    progressCallback: (newState: UploaderState) => void;
+  }): Promise<void> => {
+    throw new Error("Function not implemented.");
+  };
+
+  const getCanvasRenderBitmap = (): MaybeCanvasRenderBitmapType => {
+    throw new Error("Function not implemented.");
+  };
+
+  const EncodeImageBitmapToBase64 = (
+    imageBitmap: ImageBitmap,
+  ): Promise<string> => {
+    throw new Error("Function not implemented.");
+  };
+
+  const useJobContext = (): JobContextType => {
+    throw new Error("Function not implemented.");
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className="flex h-[calc(100vh-56px)] w-full bg-ui-background"
+    >
+      <div className="h-full w-1/2 p-4">
+        <div className="flex h-full w-full items-center justify-center rounded-md bg-gray-800">
+          <div className="text-white text-opacity-50">Image Display</div>
+          <div className="relative flex h-full w-full items-center justify-center">
+            <img
+              src=""
+              alt="Preview"
+              className="max-h-full max-w-full object-contain"
+              onError={(e) => {
+                const target = e.target as HTMLImageElement;
+                target.style.display = "none";
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ImageToVideo;

frontend/apps/editor3d/app/src/signals/appTab.ts

@@ -3,7 +3,7 @@ import { signal } from "@preact/signals-react";
 export const appTabId = signal("3D");
 
 export const setAppTabId = (newId: string) => {
-  if (newId != "2D" && newId != "3D") {
+  if (newId != "2D" && newId != "3D" && newId != "VIDEO") {
     console.error("Provided app ID is not valid");
     return;
   }
@@ -14,4 +14,4 @@ export const setAppTabId = (newId: string) => {
 export const is3DEditorInitialized = signal(false);
 export const setIs3DEditorInitialized = (isInitialized: boolean) => {
   is3DEditorInitialized.value = isInitialized;
-}
+};