base load viewer

src/pages/editor/components/EditorSidebar.tsx

@@ -1,13 +1,13 @@
 import Logo from "@/assets/images/logo.svg";
 import { clx } from "@/helpers/utils";
 import { useSharedStore } from "@/shared/store/sharedStore";
-import { CloseSquare } from "iconsax-react";
+import { CloseSquare, DocumentUpload } from "iconsax-react";
 import { useEditorStore, type ToolType } from "../store/editorStore";
 import { ToolsBar, ObjectSettings, ToolInstructions } from "./sidebar";
 
 const EditorSidebar = () => {
     const { openSidebar, setOpenSidebar } = useSharedStore();
-    const { tool, setTool, selectedObjectId, objects, updateObject, deleteObject } = useEditorStore();
+    const { tool, setTool, selectedObjectId, objects, updateObject, deleteObject, loadPages } = useEditorStore();
 
     const selectedObject = objects.find((obj) => obj.id === selectedObjectId);
 
@@ -15,6 +15,19 @@ const EditorSidebar = () => {
         setTool(selectedTool);
     };
 
+    const handleLoadJSON = async () => {
+        try {
+            const response = await fetch('/viewer-data.json');
+            const data = await response.json();
+            if (data.pages && Array.isArray(data.pages)) {
+                loadPages(data.pages);
+            }
+        } catch (error) {
+            console.error('خطا در لود JSON:', error);
+            alert('خطا در لود فایل JSON');
+        }
+    };
+
 
     return (
         <>
@@ -29,12 +42,21 @@ const EditorSidebar = () => {
             >
                 <div className="mb-10 flex items-center justify-between">
                     <img src={Logo} alt="لوگو دانک" className="h-9" />
-                    <button
-                        onClick={() => setOpenSidebar(false)}
-                        className="xl:hidden p-2 hover:bg-gray-100 rounded-lg transition-colors"
-                    >
-                        <CloseSquare color="black" size={24} />
-                    </button>
+                    <div className="flex items-center gap-2">
+                        <button
+                            onClick={handleLoadJSON}
+                            className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                            title="لود JSON"
+                        >
+                            <DocumentUpload color="black" size={24} />
+                        </button>
+                        <button
+                            onClick={() => setOpenSidebar(false)}
+                            className="xl:hidden p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                        >
+                            <CloseSquare color="black" size={24} />
+                        </button>
+                    </div>
                 </div>
 
                 <div className="flex gap-8 flex-1 min-h-0">

src/pages/editor/components/tools/VideoShape.tsx

@@ -99,10 +99,6 @@ const VideoShape = ({
         }
     };
 
-    if (!image) {
-        return null;
-    }
-
     return (
         <>
             <Group
@@ -130,14 +126,25 @@ const VideoShape = ({
                     strokeWidth={isSelected ? 3 : (obj.strokeWidth ?? 0)}
                     onClick={handleGroupClick}
                 />
-                <KonvaImage
-                    x={0}
-                    y={0}
-                    width={containerWidth}
-                    height={containerHeight}
-                    image={image}
-                    onClick={handleGroupClick}
-                />
+                {image ? (
+                    <KonvaImage
+                        x={0}
+                        y={0}
+                        width={containerWidth}
+                        height={containerHeight}
+                        image={image}
+                        onClick={handleGroupClick}
+                    />
+                ) : (
+                    <Rect
+                        x={0}
+                        y={0}
+                        width={containerWidth}
+                        height={containerHeight}
+                        fill="#1a1a1a"
+                        onClick={handleGroupClick}
+                    />
+                )}
                 <Group
                     name="playButton"
                     onClick={handlePlayClick}