feat: better video file uploader

apps/web/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx

@@ -1,85 +1,494 @@
 import { NodeViewWrapper } from '@tiptap/react'
-import { Video } from 'lucide-react'
+import { 
-import React, { useEffect } from 'react'
+  Loader2, Video, Upload, X, HelpCircle, 
-import styled from 'styled-components'
+  Maximize2, Minimize2, ArrowLeftRight, 
+  CheckCircle2, AlertCircle
+} from 'lucide-react'
+import React from 'react'
 import { uploadNewVideoFile } from '../../../../../services/blocks/Video/video'
 import { getActivityBlockMediaDirectory } from '@services/media/media'
 import { useOrg } from '@components/Contexts/OrgContext'
 import { useCourse } from '@components/Contexts/CourseContext'
 import { useEditorProvider } from '@components/Contexts/Editor/EditorContext'
 import { useLHSession } from '@components/Contexts/LHSessionContext'
-import { FileUploadBlock, FileUploadBlockButton, FileUploadBlockInput } from '../../FileUploadBlock'
+import { constructAcceptValue } from '@/lib/constants'
-import { constructAcceptValue } from '@/lib/constants';
+import { cn } from '@/lib/utils'
+import { motion, AnimatePresence } from 'framer-motion'
+import styled from 'styled-components'
 
 const SUPPORTED_FILES = constructAcceptValue(['webm', 'mp4'])
 
-function VideoBlockComponents(props: any) {
+const VIDEO_SIZES = {
-  const org = useOrg() as any
+  small: { width: 480, label: 'Small' },
-  const course = useCourse() as any
+  medium: { width: 720, label: 'Medium' },
-  const editorState = useEditorProvider() as any
+  large: { width: 960, label: 'Large' },
-  const isEditable = editorState.isEditable
+  full: { width: '100%', label: 'Full Width' }
-  const [video, setVideo] = React.useState(null)
+} as const
-  const session = useLHSession() as any
+
-  const access_token = session?.data?.tokens?.access_token;
+type VideoSize = keyof typeof VIDEO_SIZES
+
+// Helper function to determine video size from width
+const getVideoSizeFromWidth = (width: number | string | undefined): VideoSize => {
+  if (!width) return 'medium'
+  if (width === '100%') return 'full'
+  
+  const numWidth = typeof width === 'string' ? parseInt(width) : width
+  
+  if (numWidth <= VIDEO_SIZES.small.width) return 'small'
+  if (numWidth <= VIDEO_SIZES.medium.width) return 'medium'
+  if (numWidth <= VIDEO_SIZES.large.width) return 'large'
+  return 'full'
+}
+
+const VideoWrapper = styled.div`
+  transition: all 0.2s ease;
+  background-color: #f9f9f9;
+  border: 1px solid #eaeaea;
+`
+
+const VideoContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+`
+
+const UploadZone = styled(motion.div)<{ isDragging: boolean }>`
+  border: 2px dashed ${props => props.isDragging ? '#3b82f6' : '#e5e7eb'};
+  background: ${props => props.isDragging ? 'rgba(59, 130, 246, 0.05)' : '#ffffff'};
+  transition: all 0.2s ease;
+  border-radius: 0.75rem;
+  padding: 2rem;
+  text-align: center;
+  cursor: pointer;
+
+  &:hover {
+    border-color: #3b82f6;
+    background: rgba(59, 130, 246, 0.05);
+  }
+`
+
+const SizeButton = styled(motion.button)<{ isActive: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  color: ${props => props.isActive ? '#ffffff' : '#4b5563'};
+  background: ${props => props.isActive ? '#3b82f6' : 'transparent'};
+  border: 1px solid ${props => props.isActive ? '#3b82f6' : '#e5e7eb'};
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: ${props => props.isActive ? '#2563eb' : '#f9fafb'};
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`
+
+interface Organization {
+  org_uuid: string
+}
+
+interface Course {
+  courseStructure: {
+    course_uuid: string
+  }
+}
+
+interface EditorState {
+  isEditable: boolean
+}
+
+interface Session {
+  data?: {
+    tokens?: {
+      access_token?: string
+    }
+  }
+}
+
+// Legacy interface for backward compatibility
+interface LegacyVideoBlockObject {
+  block_uuid: string
+  content: {
+    file_id: string
+    file_format: string
+  }
+  size?: {
+    width?: number | string
+  }
+}
+
+interface VideoBlockObject {
+  block_uuid: string
+  content: {
+    file_id: string
+    file_format: string
+  }
+  size: VideoSize
+}
+
+interface VideoBlockProps {
+  node: {
+    attrs: {
+      blockObject: VideoBlockObject | LegacyVideoBlockObject | null
+    }
+  }
+  extension: {
+    options: {
+      activity: {
+        activity_uuid: string
+      }
+    }
+  }
+  updateAttributes: (attrs: { blockObject: VideoBlockObject | null }) => void
+}
+
+function VideoBlockComponent({ node, extension, updateAttributes }: VideoBlockProps) {
+  const org = useOrg() as Organization | null
+  const course = useCourse() as Course | null
+  const editorState = useEditorProvider() as EditorState
+  const session = useLHSession() as Session
+  const fileInputRef = React.useRef<HTMLInputElement>(null)
+  const uploadZoneRef = React.useRef<HTMLDivElement>(null)
+  
+  // Convert legacy block object to new format
+  const convertLegacyBlock = React.useCallback((block: LegacyVideoBlockObject): VideoBlockObject => {
+    const videoSize = getVideoSizeFromWidth(block.size?.width)
+    return {
+      ...block,
+      size: videoSize
+    }
+  }, [])
+
+  const initialBlockObject = React.useMemo(() => {
+    if (!node.attrs.blockObject) return null
+    if ('size' in node.attrs.blockObject && typeof node.attrs.blockObject.size === 'string') {
+      return node.attrs.blockObject as VideoBlockObject
+    }
+    return convertLegacyBlock(node.attrs.blockObject as LegacyVideoBlockObject)
+  }, [node.attrs.blockObject, convertLegacyBlock])
+
+  const [video, setVideo] = React.useState<File | null>(null)
   const [isLoading, setIsLoading] = React.useState(false)
-  const [blockObject, setblockObject] = React.useState(
+  const [error, setError] = React.useState<string | null>(null)
-    props.node.attrs.blockObject
+  const [isDragging, setIsDragging] = React.useState(false)
-  )
+  const [uploadProgress, setUploadProgress] = React.useState(0)
-  const fileId = blockObject
+  const [blockObject, setBlockObject] = React.useState<VideoBlockObject | null>(initialBlockObject)
-    ? `${blockObject.content.file_id}.${blockObject.content.file_format}`
+  const [selectedSize, setSelectedSize] = React.useState<VideoSize>(initialBlockObject?.size || 'medium')
-    : null
 
-  const handleVideoChange = (event: React.ChangeEvent<any>) => {
+  // Update block object when size changes
-    setVideo(event.target.files[0])
+  React.useEffect(() => {
+    if (blockObject && blockObject.size !== selectedSize) {
+      const newBlockObject = {
+        ...blockObject,
+        size: selectedSize
+      }
+      setBlockObject(newBlockObject)
+      updateAttributes({ blockObject: newBlockObject })
+    }
+  }, [selectedSize])
+
+  const isEditable = editorState?.isEditable
+  const access_token = session?.data?.tokens?.access_token
+  const fileId = blockObject ? `${blockObject.content.file_id}.${blockObject.content.file_format}` : null
+
+  const handleVideoChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    if (file) {
+      setVideo(file)
+      setError(null)
+      handleUpload(file)
+    }
   }
 
-  const handleSubmit = async (e: any) => {
+  const handleDragEnter = (e: React.DragEvent) => {
     e.preventDefault()
-    setIsLoading(true)
+    e.stopPropagation()
-    let object = await uploadNewVideoFile(
+    setIsDragging(true)
-      video,
-      props.extension.options.activity.activity_uuid, access_token
-    )
-    setIsLoading(false)
-    setblockObject(object)
-    props.updateAttributes({
-      blockObject: object,
-    })
   }
 
-  useEffect(() => { }, [course, org])
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    if (e.currentTarget === uploadZoneRef.current) {
+      setIsDragging(false)
+    }
+  }
 
-  console.log(blockObject)
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setIsDragging(false)
 
+    const file = e.dataTransfer.files[0]
+    if (file && SUPPORTED_FILES.split(',').some(format => file.name.toLowerCase().endsWith(format.trim()))) {
+      setVideo(file)
+      setError(null)
+      handleUpload(file)
+    } else {
+      setError('Please upload a supported video format (MP4 or WebM)')
+    }
+  }
+
+  const handleUpload = async (file: File) => {
+    if (!access_token) return
+
+    try {
+      setIsLoading(true)
+      setError(null)
+      setUploadProgress(0)
+
+      // Simulate upload progress
+      const progressInterval = setInterval(() => {
+        setUploadProgress(prev => Math.min(prev + 10, 90))
+      }, 200)
+
+      const object = await uploadNewVideoFile(
+        file,
+        extension.options.activity.activity_uuid,
+        access_token
+      )
+
+      clearInterval(progressInterval)
+      setUploadProgress(100)
+
+      const newBlockObject = {
+        ...object,
+        size: selectedSize
+      }
+      setBlockObject(newBlockObject)
+      updateAttributes({ blockObject: newBlockObject })
+      setVideo(null)
+
+      // Reset progress after a delay
+      setTimeout(() => {
+        setUploadProgress(0)
+      }, 1000)
+    } catch (err) {
+      setError('Failed to upload video. Please try again.')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleRemove = () => {
+    setBlockObject(null)
+    updateAttributes({ blockObject: null })
+    setVideo(null)
+    setError(null)
+    setUploadProgress(0)
+  }
+
+  const handleSizeChange = (size: VideoSize) => {
+    setSelectedSize(size)
+  }
+
+  const videoUrl = blockObject && org?.org_uuid && course?.courseStructure.course_uuid ? getActivityBlockMediaDirectory(
+    org.org_uuid,
+    course.courseStructure.course_uuid,
+    extension.options.activity.activity_uuid,
+    blockObject.block_uuid,
+    fileId || '',
+    'videoBlock'
+  ) : null
+
+  // If we're in preview mode and have a video, show only the video player
+  if (!isEditable && blockObject && videoUrl) {
+    const width = VIDEO_SIZES[blockObject.size].width
     return (
-    <NodeViewWrapper className="block-video">    
+      <NodeViewWrapper className="block-video w-full">
-      <FileUploadBlock isEditable={isEditable} isLoading={isLoading} isEmpty={!blockObject} Icon={Video}>
+        <motion.div
-        <FileUploadBlockInput onChange={handleVideoChange} accept={SUPPORTED_FILES} />
+          initial={{ opacity: 0 }}
-        <FileUploadBlockButton onClick={handleSubmit} disabled={!video}/>
+          animate={{ opacity: 1 }}
-      </FileUploadBlock>
+          transition={{ duration: 0.3 }}
-
+          className="w-full flex justify-center"
-      {blockObject && (
+        >
-        <BlockVideo>
+          <div
+            style={{ 
+              maxWidth: typeof width === 'number' ? width : '100%',
+              width: '100%'
+            }}
+          >
             <video
               controls
-            className="rounded-lg shadow-sm h-96 w-full object-scale-down bg-black"
+              className="w-full aspect-video object-contain rounded-lg shadow-sm"
-            src={`${getActivityBlockMediaDirectory(
+              src={videoUrl}
-              org?.org_uuid,
+            />
-              course?.courseStructure.course_uuid,
+          </div>
-              props.extension.options.activity.activity_uuid,
+        </motion.div>
-              blockObject.block_uuid,
+      </NodeViewWrapper>
-              blockObject ? fileId : ' ',
+    )
-              'videoBlock'
+  }
-            )}`}
+
-          ></video>
+  // If we're in preview mode but don't have a video, show nothing
-        </BlockVideo>
+  if (!isEditable && (!blockObject || !videoUrl)) {
+    return null
+  }
+
+  // Show the full editor UI when in edit mode
+  return (
+    <NodeViewWrapper className="block-video w-full">
+      <motion.div
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3 }}
+      >
+        <VideoWrapper className="flex flex-col space-y-4 rounded-lg py-6 px-5">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-2 text-sm text-zinc-500">
+              <Video size={16} />
+              <span className="font-medium">Video Block</span>
+            </div>
+            {blockObject && (
+              <motion.button
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                onClick={handleRemove}
+                className="text-zinc-400 hover:text-red-500 transition-colors"
+              >
+                <X size={16} />
+              </motion.button>
             )}
+          </div>
+
+          {(!blockObject || !videoUrl) && (
+            <motion.div
+              initial={{ opacity: 0, height: 0 }}
+              animate={{ opacity: 1, height: 'auto' }}
+              transition={{ duration: 0.2 }}
+              className="space-y-4"
+            >
+              <input
+                ref={fileInputRef}
+                type="file"
+                onChange={handleVideoChange}
+                accept={SUPPORTED_FILES}
+                className="hidden"
+              />
+
+              <UploadZone
+                ref={uploadZoneRef}
+                isDragging={isDragging}
+                onDragEnter={handleDragEnter}
+                onDragOver={handleDragEnter}
+                onDragLeave={handleDragLeave}
+                onDrop={handleDrop}
+                onClick={() => fileInputRef.current?.click()}
+                className="relative"
+              >
+                <AnimatePresence>
+                  {isLoading ? (
+                    <motion.div
+                      initial={{ opacity: 0 }}
+                      animate={{ opacity: 1 }}
+                      exit={{ opacity: 0 }}
+                      className="space-y-3"
+                    >
+                      <Loader2 className="w-8 h-8 animate-spin mx-auto text-blue-500" />
+                      <div className="text-sm text-zinc-600">Uploading video... {uploadProgress}%</div>
+                      <div className="w-48 h-1 bg-gray-200 rounded-full mx-auto overflow-hidden">
+                        <motion.div
+                          className="h-full bg-blue-500 rounded-full"
+                          initial={{ width: 0 }}
+                          animate={{ width: `${uploadProgress}%` }}
+                          transition={{ duration: 0.2 }}
+                        />
+                      </div>
+                    </motion.div>
+                  ) : (
+                    <motion.div
+                      initial={{ opacity: 0 }}
+                      animate={{ opacity: 1 }}
+                      exit={{ opacity: 0 }}
+                      className="space-y-3"
+                    >
+                      <Upload className="w-8 h-8 mx-auto text-blue-500" />
+                      <div>
+                        <div className="text-sm font-medium text-zinc-700">
+                          Drop your video here or click to browse
+                        </div>
+                        <div className="text-xs text-zinc-500 mt-1">
+                          Supports MP4 and WebM formats
+                        </div>
+                      </div>
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </UploadZone>
+
+              {error && (
+                <div className="flex items-center gap-2 text-sm text-red-500 font-medium bg-red-50 rounded-lg p-3">
+                  <AlertCircle size={16} />
+                  {error}
+                </div>
+              )}
+            </motion.div>
+          )}
+
+          {blockObject && videoUrl && (
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ duration: 0.3 }}
+              className="space-y-4"
+            >
+              <div className="flex items-center gap-2 flex-wrap">
+                <div className="text-sm text-zinc-500 font-medium flex items-center gap-1">
+                  <ArrowLeftRight size={14} />
+                  Video Size:
+                </div>
+                {(Object.keys(VIDEO_SIZES) as VideoSize[]).map((size) => (
+                  <SizeButton
+                    key={size}
+                    isActive={selectedSize === size}
+                    onClick={() => handleSizeChange(size)}
+                    whileHover={{ scale: 1.02 }}
+                    whileTap={{ scale: 0.98 }}
+                  >
+                    {size === selectedSize && <CheckCircle2 size={14} />}
+                    {VIDEO_SIZES[size].label}
+                  </SizeButton>
+                ))}
+              </div>
+
+              <VideoContainer>
+                <div
+                  style={{ 
+                    maxWidth: typeof VIDEO_SIZES[selectedSize].width === 'number' 
+                      ? VIDEO_SIZES[selectedSize].width 
+                      : '100%',
+                    width: '100%'
+                  }}
+                >
+                  <div className="relative rounded-lg overflow-hidden bg-black/5">
+                    {isLoading && (
+                      <div className="absolute inset-0 flex items-center justify-center bg-black/10 backdrop-blur-sm">
+                        <Loader2 className="w-8 h-8 animate-spin text-white" />
+                      </div>
+                    )}
+                    <video
+                      controls
+                      className={cn(
+                        "w-full aspect-video object-contain bg-black/95 shadow-sm transition-all duration-200",
+                        isLoading && "opacity-50 blur-sm"
+                      )}
+                      src={videoUrl}
+                    />
+                  </div>
+                </div>
+              </VideoContainer>
+            </motion.div>
+          )}
+        </VideoWrapper>
+      </motion.div>
     </NodeViewWrapper>
   )
 }
 
-const BlockVideo = styled.div`
+export default VideoBlockComponent
-  display: flex;
-  flex-direction: column;
-`
-export default VideoBlockComponents