address review

Author: Ahtesham Quraish

frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/MediaDisplay.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import styled from "@emotion/styled"
-import { isVideoUrl, isHlsVideo } from "./lib"
+import { isVideoUrl } from "./lib"
 import { VideoJsPlayer } from "./VideoJsPlayer"
 
 const MediaContainer = styled.div(({ theme }) => ({
@@ -56,16 +56,15 @@ export const MediaDisplay = ({ src, caption }: MediaDisplayProps) => {
   return (
     <MediaContainer>
       {isVideoUrl(src) ? (
-        isHlsVideo(src) ? (
-          <VideoJsPlayer src={src} caption={caption} />
-        ) : (
-          // eslint-disable-next-line jsx-a11y/media-has-caption
-          <video src={src} controls title={caption}>
-            Your browser does not support the video tag.
-          </video>
-        )
+        <VideoJsPlayer src={src} caption={caption} />
       ) : (
-        <iframe src={src} frameBorder="0" allowFullScreen title={caption} />
+        <iframe
+          src={src}
+          frameBorder="0"
+          allowFullScreen
+          title={caption}
+          inert={true}
+        />
       )}
     </MediaContainer>
   )

frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/VideoJsPlayer.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react"
+import React, { useEffect, useRef, useState } from "react"
 import videojs from "video.js"
 import type Player from "video.js/dist/types/player"
 import "video.js/dist/video-js.css"
@@ -8,12 +8,88 @@ interface VideoJsPlayerProps {
   caption?: string
 }
 
+const getVideoType = (url: string): string => {
+  const lowerUrl = url.toLowerCase()
+  if (lowerUrl.endsWith(".m3u8")) {
+    return "application/x-mpegURL"
+  }
+  if (lowerUrl.endsWith(".mp4")) {
+    return "video/mp4"
+  }
+  // Default to mp4 for other cases
+  return "video/mp4"
+}
+
+const deriveMediaUrls = (
+  m3u8Url: string,
+): { subtitlesUrl: string; posterUrl: string } | null => {
+  try {
+    // Extract directory and filename
+    const lastSlashIndex = m3u8Url.lastIndexOf("/")
+    if (lastSlashIndex === -1) return null
+
+    const directory = m3u8Url.substring(0, lastSlashIndex)
+    const filename = m3u8Url.substring(lastSlashIndex + 1)
+
+    // Extract base name (remove .5M.m3u8 or similar pattern)
+    // Pattern: video_HLS1.5M.m3u8 -> video_HLS1
+    const baseMatch = filename.match(/^(.+?)(?:\.\d+[MK])?\.m3u8$/)
+    if (!baseMatch) return null
+
+    const baseName = baseMatch[1]
+
+    return {
+      subtitlesUrl: `${directory}/${baseName}.srt`,
+      posterUrl: `${directory}/${baseName}_cover.jpeg`,
+    }
+  } catch {
+    return null
+  }
+}
+
+const checkUrlExists = async (url: string): Promise<boolean> => {
+  try {
+    const response = await fetch(url, { method: "HEAD" })
+    return response.ok
+  } catch {
+    return false
+  }
+}
+
 export const VideoJsPlayer: React.FC<VideoJsPlayerProps> = ({
   src,
   caption,
 }) => {
   const videoRef = useRef<HTMLDivElement>(null)
   const playerRef = useRef<Player | null>(null)
+  const [posterUrl, setPosterUrl] = useState<string | undefined>()
+  const [subtitlesUrl, setSubtitlesUrl] = useState<string | undefined>()
+
+  // Check for related media files (poster and subtitles) for m3u8 videos
+  useEffect(() => {
+    const loadRelatedMedia = async () => {
+      if (!src.toLowerCase().endsWith(".m3u8")) {
+        return
+      }
+
+      const derivedUrls = deriveMediaUrls(src)
+      if (!derivedUrls) return
+      console.log("Derived URLs:", derivedUrls)
+      // Check if poster exists
+      const posterExists = await checkUrlExists(derivedUrls.posterUrl)
+      if (posterExists) {
+        setPosterUrl(derivedUrls.posterUrl)
+      }
+
+      // Check if subtitles exist
+      const subtitlesExist = await checkUrlExists(derivedUrls.subtitlesUrl)
+      if (subtitlesExist) {
+        setSubtitlesUrl(derivedUrls.subtitlesUrl)
+      }
+    }
+
+    loadRelatedMedia()
+  }, [src])
 
   useEffect(() => {
     // Make sure Video.js player is only initialized once
@@ -27,7 +103,9 @@ export const VideoJsPlayer: React.FC<VideoJsPlayerProps> = ({
         controls: true,
         responsive: true,
         fluid: true,
+        aspectRatio: "16:9",
         preload: "auto",
+        poster: posterUrl,
         html5: {
           vhs: {
             // Enable HLS.js integration
@@ -37,18 +115,32 @@ export const VideoJsPlayer: React.FC<VideoJsPlayerProps> = ({
         sources: [
           {
             src,
-            type: "application/x-mpegURL",
+            type: getVideoType(src),
           },
         ],
       }))
 
+      // Add subtitles track if available
+      if (subtitlesUrl) {
+        player.addRemoteTextTrack(
+          {
+            kind: "captions",
+            src: subtitlesUrl,
+            srclang: "en",
+            label: "English",
+            default: true,
+          },
+          false,
+        )
+      }
+
       // Error handling
       player.on("error", () => {
         const error = player.error()
         console.error("Video.js error:", error)
       })
     }
-  }, [src])
+  }, [src, posterUrl, subtitlesUrl])
 
   // Dispose the Video.js player when the component unmounts
   useEffect(() => {

frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/lib.ts

@@ -10,15 +10,6 @@ export function isVideoUrl(url: string): boolean {
   }
 }
 
-export function isHlsVideo(url: string): boolean {
-  try {
-    const parsed = new URL(url)
-    return parsed.pathname.toLowerCase().endsWith(".m3u8")
-  } catch {
-    return false
-  }
-}
-
 export function convertToEmbedUrl(url: string): string | null {
   let parsed: URL
 
@@ -32,9 +23,7 @@ export function convertToEmbedUrl(url: string): string | null {
   // --- MIT LEARN MP4 VIDEOS ---
   if (
     hostname ===
-      new URL(process.env.NEXT_PUBLIC_ORIGIN || "https://learn.mit.edu")
-        .hostname &&
-    parsed.pathname.toLowerCase().endsWith(".mp4")
+    new URL(process.env.NEXT_PUBLIC_ORIGIN || "https://learn.mit.edu").hostname
   ) {
     return url // Return the URL as-is for video element
   }
@@ -43,11 +32,10 @@ export function convertToEmbedUrl(url: string): string | null {
 
   if (
     hostname ===
-      new URL(
-        process.env.NEXT_PUBLIC_CLOUDFRONT_DOMAIN ||
-          "https://d3tsb3m56iwvoq.cloudfront.net",
-      ).hostname &&
-    parsed.pathname.toLowerCase().endsWith(".m3u8")
+    new URL(
+      process.env.NEXT_PUBLIC_CLOUDFRONT_DOMAIN ||
+        "https://d3tsb3m56iwvoq.cloudfront.net",
+    ).hostname
   ) {
     return url // Return the URL as-is for video element
   }