Fix subtitles

Author: adimiz1

example/ActiveLayerLayoutDemo.tsx

@@ -305,6 +305,7 @@ export const ActiveLayerLayoutDemo: React.FC<ActiveLayerLayoutDemoProps> = ({ on
       <View style={styles.videoContainer}>
         <View style={styles.videoWrapper}>
           <CLDVideoLayer
+            key={currentExample} // Force remount when switching examples to reset state
             cldVideo={createMyVideoObject()}
             videoUrl={(currentExample === 'subtitles' || currentExample === 'quality') ? 'https://res.cloudinary.com/demo/video/upload/sp_sd:subtitles_((code_en-US;file_outdoors.vtt);(code_es;file_outdoors-es.vtt))/sea_turtle.m3u8' : undefined}
             autoPlay={false}

src/widgets/video/layer/utils.ts

@@ -87,6 +87,7 @@ export const isHLSVideo = (videoUrl: string | undefined): boolean => {
 export const parseHLSManifest = async (manifestUrl: string): Promise<SubtitleOption[]> => {
   try {
     const response = await fetch(manifestUrl);
+    
     if (!response.ok) {
       console.warn('Failed to fetch HLS manifest:', response.status);
       return [];
@@ -109,13 +110,21 @@ export const parseHLSManifest = async (manifestUrl: string): Promise<SubtitleOpt
         const attributes = parseM3U8Attributes(line);
 
         if (attributes.LANGUAGE && attributes.NAME) {
-          const languageCode = attributes.LANGUAGE;
-          const displayName = attributes.NAME.replace(/"/g, ''); // Remove quotes
+          const languageCode = attributes.LANGUAGE.replace(/"/g, ''); // Remove quotes from language code
+          const displayName = attributes.NAME.replace(/"/g, ''); // Remove quotes from display name
           let subtitleUrl = attributes.URI ? attributes.URI.replace(/"/g, '') : undefined;
 
-          // Resolve relative URLs
+          // Resolve relative URLs properly
           if (subtitleUrl && !subtitleUrl.startsWith('http')) {
-            subtitleUrl = baseUrl + subtitleUrl;
+            // Handle URLs that start with /
+            if (subtitleUrl.startsWith('/')) {
+              // Extract the base domain from the manifest URL
+              const urlObj = new URL(manifestUrl);
+              subtitleUrl = `${urlObj.protocol}//${urlObj.host}${subtitleUrl}`;
+            } else {
+              // For other relative URLs, use baseUrl
+              subtitleUrl = baseUrl + subtitleUrl;
+            }
           }
 
           // Only add if not already present

src/widgets/video/layer/utils/subtitleUtils.ts

@@ -95,12 +95,49 @@ export const findActiveSubtitle = (cues: SubtitleCue[], currentTime: number): Su
 export const fetchSubtitleFile = async (url: string): Promise<SubtitleCue[]> => {
   try {
     const response = await fetch(url);
+    
     if (!response.ok) {
       throw new Error(`Failed to fetch subtitle file: ${response.status}`);
     }
 
     const content = await response.text();
-    return parseWebVTT(content);
+    
+    // Check if this is an M3U8 playlist instead of a VTT file
+    if (content.trim().startsWith('#EXTM3U')) {
+      // Parse the M3U8 to find the actual VTT file URL
+      const lines = content.split('\n');
+      let vttUrl = null;
+      
+      for (const line of lines) {
+        const trimmedLine = line.trim();
+        // Look for lines that end with .vtt and don't start with #
+        if (!trimmedLine.startsWith('#') && trimmedLine.includes('.vtt')) {
+          vttUrl = trimmedLine;
+          break;
+        }
+      }
+      
+      if (vttUrl) {
+        // Resolve relative URL if needed
+        if (vttUrl.startsWith('/')) {
+          const urlObj = new URL(url);
+          vttUrl = `${urlObj.protocol}//${urlObj.host}${vttUrl}`;
+        } else if (!vttUrl.startsWith('http')) {
+          const baseUrl = url.substring(0, url.lastIndexOf('/') + 1);
+          vttUrl = baseUrl + vttUrl;
+        }
+        
+        // Recursively fetch the actual VTT file
+        return await fetchSubtitleFile(vttUrl);
+      } else {
+        console.warn('No VTT URL found in M3U8 playlist');
+        return [];
+      }
+    }
+    
+    // Content is already VTT, parse it directly
+    const cues = parseWebVTT(content);
+    return cues;
   } catch (error) {
     console.warn('Failed to fetch subtitle file:', error);
     return [];