background video

src/pages/editor/components/SettingsPanel.tsx

@@ -27,6 +27,7 @@ const BACKGROUND_TYPE_OPTIONS: { value: BackgroundType; label: string }[] = [
   { value: 'color', label: 'رنگ' },
   { value: 'gradient', label: 'گرادیانت' },
   { value: 'image', label: 'تصویر' },
+  { value: 'video', label: 'ویدیو' },
 ]
 
 const SettingsPanel = () => {
@@ -38,7 +39,7 @@ const SettingsPanel = () => {
     updateCurrentPageBackground,
   } = useEditorStore()
   const colorInputRef = useRef<HTMLInputElement>(null)
-  const { mutateAsync: uploadFile, isPending: imageLoading } = useSingleUpload()
+  const { mutateAsync: uploadFile, isPending: mediaLoading } = useSingleUpload()
   const currentPage = pages.find((page) => page.id === currentPageId)
   const backgroundType = currentPage?.backgroundType ?? 'color'
   const backgroundColor = currentPage?.backgroundColor ?? '#ffffff'
@@ -48,6 +49,7 @@ const SettingsPanel = () => {
     angle: 135,
   }
   const backgroundImageUrl = currentPage?.backgroundImageUrl ?? ''
+  const backgroundVideoUrl = currentPage?.backgroundVideoUrl ?? ''
   const [uploadedPreviews, setUploadedPreviews] = useState<string[]>(
     backgroundImageUrl ? [backgroundImageUrl] : []
   )
@@ -66,6 +68,11 @@ const SettingsPanel = () => {
     )
   }, [backgroundImageUrl])
 
+  useEffect(() => {
+    if (backgroundType !== 'video') return
+    setUploadedPreviews(backgroundVideoUrl ? [backgroundVideoUrl] : [])
+  }, [backgroundType, backgroundVideoUrl])
+
   const handleImageFiles = async (files: File[]) => {
     if (files.length === 0) return
     const file = files[files.length - 1]
@@ -83,10 +90,31 @@ const SettingsPanel = () => {
     }
   }
 
+  const handleVideoFiles = async (files: File[]) => {
+    if (files.length === 0) return
+    const file = files[files.length - 1]
+    if (!file) return
+
+    try {
+      const result = await uploadFile({ file })
+      const videoUrl = result?.data?.url
+      if (!videoUrl) return
+
+      updateCurrentPageBackground({ backgroundVideoUrl: videoUrl })
+      setUploadedPreviews([videoUrl])
+    } catch {
+      // TODO: show error toast
+    }
+  }
+
   const handlePreviewChange = (previews: string[]) => {
     setUploadedPreviews(previews)
     if (previews.length === 0) {
-      updateCurrentPageBackground({ backgroundImageUrl: '' })
+      if (backgroundType === 'image') {
+        updateCurrentPageBackground({ backgroundImageUrl: '' })
+      } else if (backgroundType === 'video') {
+        updateCurrentPageBackground({ backgroundVideoUrl: '' })
+      }
     }
   }
 
@@ -149,7 +177,7 @@ const SettingsPanel = () => {
         <h3 className="text-sm  mb-4">پس زمینه</h3>
 
         {/* نوع پس‌زمینه */}
-        <div className="flex items-center gap-5 mb-4">
+        <div className="flex flex-wrap items-center gap-5 mb-4">
           {BACKGROUND_TYPE_OPTIONS.map((opt) => (
             <label key={opt.value} className="flex items-center gap-1.5 cursor-pointer select-none">
               <span className="text-xs text-gray-600">{opt.label}</span>
@@ -166,6 +194,8 @@ const SettingsPanel = () => {
                         },
                       }
                       : {}),
+                    ...(opt.value !== 'image' ? { backgroundImageUrl: '' } : {}),
+                    ...(opt.value !== 'video' ? { backgroundVideoUrl: '' } : {}),
                   })
                 }
                 className={clx(
@@ -301,7 +331,7 @@ const SettingsPanel = () => {
         {/* ─── آپلود تصویر ─── */}
         {backgroundType === 'image' && (
           <div>
-            {imageLoading ? (
+            {mediaLoading ? (
               <div className="flex flex-col items-center justify-center gap-3 py-8">
                 <span className="h-6 w-6 animate-spin rounded-full border-2 border-gray-300 border-t-gray-800" />
                 <span className="text-xs text-gray-500">در حال آپلود...</span>
@@ -317,6 +347,44 @@ const SettingsPanel = () => {
             )}
           </div>
         )}
+
+        {backgroundType === 'video' && (
+          <div>
+            {mediaLoading ? (
+              <div className="flex flex-col items-center justify-center gap-3 py-8">
+                <span className="h-6 w-6 animate-spin rounded-full border-2 border-gray-300 border-t-gray-800" />
+                <span className="text-xs text-gray-500">در حال آپلود...</span>
+              </div>
+            ) : (
+              <UploadBoxDraggble
+                label="ویدیوی پس‌زمینه را آپلود کنید"
+                onChange={handleVideoFiles}
+                isMultiple={false}
+                hidePreview
+              />
+            )}
+            {backgroundVideoUrl && (
+              <div className="mt-3 space-y-2">
+                <video
+                  src={backgroundVideoUrl}
+                  controls
+                  muted
+                  className="w-full h-36 rounded-lg border border-border bg-black object-cover"
+                />
+                <button
+                  type="button"
+                  onClick={() => {
+                    updateCurrentPageBackground({ backgroundVideoUrl: '' })
+                    setUploadedPreviews([])
+                  }}
+                  className="text-xs text-red-500 hover:text-red-600"
+                >
+                  حذف ویدیو
+                </button>
+              </div>
+            )}
+          </div>
+        )}
       </section>
     </div>
   )