feat: add details to video activities

wip: uploadable video activities

apps/web/components/Objects/Activities/Video/Video.tsx

@@ -3,6 +3,13 @@ import YouTube from 'react-youtube'
 import { getActivityMediaDirectory } from '@services/media/media'
 import { useOrg } from '@components/Contexts/OrgContext'
 
+interface VideoDetails {
+  startTime?: number
+  endTime?: number | null
+  autoplay?: boolean
+  muted?: boolean
+}
+
 interface VideoActivityProps {
   activity: {
     activity_sub_type: string
@@ -11,6 +18,7 @@ interface VideoActivityProps {
       filename?: string
       uri?: string
     }
+    details?: VideoDetails
   }
   course: {
     course_uuid: string
@@ -20,6 +28,7 @@ interface VideoActivityProps {
 function VideoActivity({ activity, course }: VideoActivityProps) {
   const org = useOrg() as any
   const [videoId, setVideoId] = React.useState('')
+  const videoRef = React.useRef<HTMLVideoElement>(null)
 
   React.useEffect(() => {
     if (activity?.content?.uri) {
@@ -39,6 +48,26 @@ function VideoActivity({ activity, course }: VideoActivityProps) {
     )
   }
 
+  // Handle native video time update
+  const handleTimeUpdate = () => {
+    const video = videoRef.current
+    if (video && activity.details?.endTime) {
+      if (video.currentTime >= activity.details.endTime) {
+        video.pause()
+      }
+    }
+  }
+
+  // Handle native video load
+  const handleVideoLoad = () => {
+    const video = videoRef.current
+    if (video && activity.details) {
+      video.currentTime = activity.details.startTime || 0
+      video.autoplay = activity.details.autoplay || false
+      video.muted = activity.details.muted || false
+    }
+  }
+
   return (
     <div className="w-full max-w-full px-2 sm:px-4">
       {activity && (
@@ -47,9 +76,12 @@ function VideoActivity({ activity, course }: VideoActivityProps) {
             <div className="my-3 md:my-5 w-full">
               <div className="relative w-full aspect-video rounded-lg overflow-hidden ring-1 ring-gray-300/30 dark:ring-gray-600/30 sm:ring-gray-200/10 sm:dark:ring-gray-700/20 shadow-xs sm:shadow-none">
                 <video
+                  ref={videoRef}
                   className="w-full h-full object-cover"
                   controls
                   src={getVideoSrc()}
+                  onLoadedMetadata={handleVideoLoad}
+                  onTimeUpdate={handleTimeUpdate}
                 ></video>
               </div>
             </div>
@@ -63,7 +95,10 @@ function VideoActivity({ activity, course }: VideoActivityProps) {
                     width: '100%',
                     height: '100%',
                     playerVars: {
-                      autoplay: 0
+                      autoplay: activity.details?.autoplay ? 1 : 0,
+                      mute: activity.details?.muted ? 1 : 0,
+                      start: activity.details?.startTime || 0,
+                      end: activity.details?.endTime || undefined
                     },
                   }}
                   videoId={videoId}