preview window for camera

app/pages/PageEnigma/PageEnigma.tsx

@@ -9,6 +9,7 @@ import { SidePanel } from "~/modules/SidePanel";
 import { Controls3D } from "./comps/Controls3D";
 import { ControlsTopButtons } from "./comps/ControlsTopButtons";
 import { ControlsVideo } from "./comps/ControlsVideo";
+import { PreviewWindow } from "./comps/PreviewWindow";
 import { Timeline } from "./comps/Timeline";
 import { SidePanelTabs } from "./comps/SidePanelTabs";
 
@@ -74,6 +75,7 @@ export const PageEnigma = () => {
 
               {/* Bottom controls */}
               <div className="absolute bottom-0 left-0 w-full">
+                <PreviewWindow />
                 <ControlsVideo />
               </div>
             </div>

app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx

@@ -24,16 +24,14 @@ export const ControlsVideo = () => {
     console.log("Controls Video: Forward-Fast clicked");
   };
   return (
-    <div>
-      <div className="flex justify-center">
-        <div className="rounded-t-lg border-x border-t border-ui-panel-border bg-ui-controls p-2 text-white">
-          <div className="flex content-center gap-2">
-            <ButtonIcon icon={faBackwardFast} onClick={handleBackwardFast} />
-            <ButtonIcon icon={faBackwardStep} onClick={handleBackwardStep} />
-            <ButtonIcon icon={faPlay} onClick={handlePlay} />
-            <ButtonIcon icon={faForwardStep} onClick={handleForwardStep} />
-            <ButtonIcon icon={faForwardFast} onClick={handleForwardFast} />
-          </div>
+    <div className="flex justify-center">
+      <div className="rounded-t-lg border-x border-t border-ui-panel-border bg-ui-controls p-2 text-white">
+        <div className="flex content-center gap-2">
+          <ButtonIcon icon={faBackwardFast} onClick={handleBackwardFast} />
+          <ButtonIcon icon={faBackwardStep} onClick={handleBackwardStep} />
+          <ButtonIcon icon={faPlay} onClick={handlePlay} />
+          <ButtonIcon icon={faForwardStep} onClick={handleForwardStep} />
+          <ButtonIcon icon={faForwardFast} onClick={handleForwardFast} />
         </div>
       </div>
     </div>

app/pages/PageEnigma/comps/PreviewWindow/index.tsx

@@ -0,0 +1,30 @@
+import { useContext } from "react"
+import { EngineContext } from "~/contexts/EngineContext"
+
+export const PreviewWindow = ()=>{
+  const editorEngine = useContext(EngineContext);
+  //take data from egine context
+
+  return (
+    <div
+      id="preview-window"
+      className="absolute bottom-0 w-30 m-4"
+    >
+      <div className="relative">
+        <div
+          id="preview-window-label"
+          className="text-white bg-ui-panel pt-1 px-2 pb-3 -z-10 rounded-t-lg -mb-2 w-fit"
+        >
+          <p>Camera View</p>
+        </div>
+        <div className="rounded-lg border border-white box overflow-hidden">
+          <img
+            //shoot that datat from engine context to this image
+            className="aspect-video max-h-40" 
+            src="/resources/uiAssets/video_player_placeholder.gif"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}