background video

src/pages/editor/components/EditorCanvas.tsx

@@ -76,6 +76,9 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
       ? currentPage.backgroundColor
       : '#ffffff';
   const bgGradient = currentPage?.backgroundGradient;
+  const hasVideoBackground =
+    currentPage?.backgroundType === "video" &&
+    Boolean(currentPage.backgroundVideoUrl);
 
   const [bgImage] = useImage(
     currentPage?.backgroundType === 'image'
@@ -527,10 +530,20 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
           <div className="absolute -top-6 -left-6 w-6 h-6 bg-slate-200 border border-slate-300" />
           <div
             ref={stageWrapRef}
-            className="shadow-lg"
+            className="relative shadow-lg"
             onDragOver={handleSidebarDragOver}
             onDrop={handleSidebarDrop}
           >
+            {hasVideoBackground && (
+              <video
+                src={currentPage?.backgroundVideoUrl}
+                autoPlay
+                loop
+                muted
+                playsInline
+                className="absolute inset-0 w-full h-full object-cover pointer-events-none"
+              />
+            )}
             <Stage
               ref={stageRef}
               width={stageSize.width * finalScale}
@@ -549,16 +562,18 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
               onDragEnd={handleDragEnd}
             >
               <Layer listening={false}>
-                <Rect
-                  x={0}
-                  y={0}
-                  width={stageSize.width}
-                  height={stageSize.height}
-                  fill={bgColor}
-                  {...backgroundGradientProps}
-                  listening={false}
-                />
-                {currentPage?.backgroundType === 'image' && bgImage && (
+                {!hasVideoBackground && (
+                  <Rect
+                    x={0}
+                    y={0}
+                    width={stageSize.width}
+                    height={stageSize.height}
+                    fill={bgColor}
+                    {...backgroundGradientProps}
+                    listening={false}
+                  />
+                )}
+                {!hasVideoBackground && currentPage?.backgroundType === 'image' && bgImage && (
                   <KonvaImage
                     image={bgImage}
                     x={0}