every ui and signals from vertial video and video aspect ratios

Wil will need to patch a tiny bit.

app/hooks/useBackgroundLoadingMedia/utilities.ts

@@ -13,6 +13,7 @@ import {
   setUserAudioItems,
   setUserMovies,
   userMovies,
+  isRetreivingAudioItems,
 } from "~/signals";
 const { userInfo } = authentication;
 
@@ -43,6 +44,7 @@ export function PollUserAudioItems() {
     //do nothing return if login info does not exist
     return;
   }
+  isRetreivingAudioItems.value = true;
   return GetMediaByUser(
     userInfo.value.username,
     {},
@@ -51,9 +53,11 @@ export function PollUserAudioItems() {
     },
   )
     .then((res: GetMediaListResponse) => {
+      isRetreivingAudioItems.value = false;
       setUserAudioItems(res.results);
     })
     .catch(() => {
+      isRetreivingAudioItems.value = false;
       addToast(ToastTypes.ERROR, "Unknown Error in Loading My Audio Items");
     });
 }

app/pages/PageEnigma/Queue/index.ts

@@ -0,0 +1,3 @@
+import Queue from "./Queue";
+export default Queue;
+export * from "./QueueNames";

app/pages/PageEnigma/comps/AspectRatioMenu/index.ts

@@ -0,0 +1 @@
+export * from "./AspectRatioMenu";

app/pages/PageEnigma/comps/EngineCanvases.tsx

@@ -25,7 +25,7 @@ export const EditorCanvas = () => {
 
 export const CameraViewCanvas = ({ className }: { className?: string }) => {
   const editorEngine = useContext(EngineContext);
-
+  // TODO PATCH WIL
   const canvasCallbackRef = useCallback(
     (node: HTMLCanvasElement) => {
       if (node && editorEngine) {

app/pages/PageEnigma/comps/PreviewEngineCamera/PreviewEngineCamera.tsx

@@ -1,5 +1,5 @@
+import { useSignals } from "@preact/signals-react/runtime";
 import { twMerge } from "tailwind-merge";
-import { Button, ButtonIcon, Tooltip } from "~/components";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faBlinds,
@@ -7,21 +7,21 @@ import {
   faCameraViewfinder,
   faSpinnerThird,
 } from "@fortawesome/pro-solid-svg-icons";
-import Queue from "~/pages/PageEnigma/Queue/Queue";
-import { QueueNames } from "~/pages/PageEnigma/Queue/QueueNames";
+
+import Queue, { QueueNames } from "~/pages/PageEnigma/Queue";
 import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions";
+
 import {
   cameraAspectRatio,
   editorState,
-} from "~/pages/PageEnigma/signals/engine";
-import { useSignals } from "@preact/signals-react/runtime";
-import {
   editorLetterBox,
   sidePanelHeight,
   toggleEditorLetterBox,
-} from "../../signals";
+} from "~/pages/PageEnigma/signals";
 import { CameraAspectRatio, EditorStates } from "~/pages/PageEnigma/enums";
-import { CameraViewCanvas } from "../EngineCanvases";
+import { CameraViewCanvas } from "~/pages/PageEnigma/comps/EngineCanvases";
+
+import { Button, ButtonIcon, Tooltip } from "~/components";
 
 export const PreviewEngineCamera = () => {
   useSignals();

app/pages/PageEnigma/comps/SceneContainer/Letterbox.tsx

@@ -23,6 +23,7 @@ export const Letterbox = ({
   useSignals();
 
   if (editorState.value !== EditorStates.CAMERA_VIEW || !isShowing) {
+    console.log("The Letterbox is loading.");
     return;
   }
 
@@ -45,9 +46,7 @@ export const Letterbox = ({
     width,
     height,
   });
-  console.log(matteOri, "matteOri");
-  console.log(matteWidth, "matteWidth");
-  console.log(matteHeight, "matteHeight");
+
   return (
     <div
       id="letterbox"

app/pages/PageEnigma/comps/SceneContainer/SceneContainer.tsx

@@ -1,34 +1,28 @@
-import { useCallback, useContext } from "react";
+import { useCallback } from "react";
 import { useSignals } from "@preact/signals-react/runtime";
-
-import { EngineContext } from "~/pages/PageEnigma/contexts/EngineContext";
 import { pageHeight, pageWidth } from "~/signals";
 import {
+  editorLetterBox,
   timelineHeight,
   sidePanelWidth,
   sidePanelVisible,
-  editorLetterBox,
 } from "~/pages/PageEnigma/signals";
-
+import Editor from "~/pages/PageEnigma/Editor/editor";
 import { Letterbox } from "./Letterbox";
 
 export const SceneContainer = ({ children }: { children: React.ReactNode }) => {
   useSignals();
-  const editorEngine = useContext(EngineContext);
 
   const containerWidth =
     pageWidth.value - (sidePanelVisible.value ? sidePanelWidth.value : 0) - 84;
 
   const containerHeight = pageHeight.value - timelineHeight.value - 68;
 
-  const callbackRef = useCallback(
-    (node: HTMLDivElement) => {
-      if (node && editorEngine && editorEngine.setSceneContainer) {
-        editorEngine.setSceneContainer(node);
-      }
-    },
-    [editorEngine],
-  );
+  const callbackRef = useCallback((node: HTMLDivElement) => {
+    if (node) {
+      // Editor.onSceneContainerChange(node); TODO FIX
+    }
+  }, []);
 
   return (
     <div

app/pages/PageEnigma/comps/SceneContainer/index.ts

@@ -0,0 +1 @@
+export * from "./SceneContainer";

app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/AudioTab/audioItemElement.tsx

@@ -4,11 +4,9 @@ import { WaveformPlayer, H5, H6 } from "~/components";
 import { AudioMediaItem } from "~/pages/PageEnigma/models";
 
 import { AudioTypePill } from "./audioTypePills";
-import {
-  cancelNewFromAudioItem,
-  updateAudioItemLength,
-  updateDemoAudioItemLength,
-} from "~/pages/PageEnigma/signals";
+import { cancelNewFromAudioItem, updateAudioItemLength } from "~/signals";
+import { updateDemoAudioItemLength } from "~/pages/PageEnigma/signals";
+
 import DndAsset from "~/pages/PageEnigma/DragAndDrop/DndAsset";
 
 function getGcsUrl(bucketRelativePath: string | undefined | null): string {

app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/AudioTab/audioItemElements.tsx

@@ -1,5 +1,5 @@
 import { useSignals } from "@preact/signals-react/runtime";
-import { isRetreivingAudioItems } from "~/pages/PageEnigma/signals";
+import { isRetreivingAudioItems } from "~/signals";
 import { AudioItemElement } from "./audioItemElement";
 import { faSpinnerThird } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

app/pages/PageEnigma/signals/engine.ts

@@ -2,6 +2,7 @@ import { signal } from "@preact/signals-core";
 import { CameraAspectRatio, EditorStates } from "~/pages/PageEnigma/enums";
 
 export const editorState = signal<EditorStates>(EditorStates.EDIT);
+
 export const cameraAspectRatio = signal<CameraAspectRatio>(
   CameraAspectRatio.HORIZONTAL_16_9,
 );

app/pages/PageEnigma/signals/index.ts

@@ -6,7 +6,6 @@ export * from "./engine";
 export * from "./dragAndDrop";
 export * from "./hotkeys";
 export * from "./media";
-export * from "./mediaFromServer";
 export * from "./myMovies";
 export * from "./objectGroup";
 export * from "./objectPanel";

app/pages/PageEnigma/signals/mediaFromServer.ts

@@ -1,21 +0,0 @@
-import { signal } from "@preact/signals-core";
-import { AudioMediaItem } from "~/pages/PageEnigma/models";
-
-export const audioItemsFromServer = signal<AudioMediaItem[]>([]);
-export const isRetreivingAudioItems = signal<boolean>(false);
-
-export const cancelNewFromAudioItem = (mediaId:string)=>{
-  const newList = audioItemsFromServer.value.map((item)=>{
-    if( item.media_id === mediaId ) item.isNew = false;
-    return item;
-  })
-  audioItemsFromServer.value = [...newList];
-}
-
-export const updateAudioItemLength = (mediaId:string, duration: number)=>{
-  const newList = audioItemsFromServer.value.map((item)=>{
-    if( item.media_id === mediaId ) item.length = duration;
-    return item;
-  })
-  audioItemsFromServer.value = [...newList];
-}

app/signals/backgroundLoadedMedia.ts

@@ -46,6 +46,8 @@ export const setUserAudioItems = (newSet: MediaInfo[]) => {
   userAudioItems.value = morphedNewSet;
 };
 
+export const isRetreivingAudioItems = signal<boolean>(false);
+
 export const cancelNewFromAudioItem = (mediaId: string) => {
   if (!userAudioItems.value || userAudioItems.value.length === 0) {
     return;