@geekapps/silo-elements-nextjs 0.3.5 → 0.3.7

package/dist/VideoPlayer.js

@@ -218,7 +218,12 @@ function Video({
     const best = sorted.find((e) => e.px >= targetPx) ?? sorted[sorted.length - 1];
     setPoster(best.url);
   }, [parsed.thumbnailUrls, parsed.thumbnailSrc, playerWidth]);
-  const activeSource = parsed.sources[sourceIndex] ?? parsed.sources[0] ?? null;
+  const rawActiveSource = parsed.sources[sourceIndex] ?? parsed.sources[0] ?? null;
+  const activeSourceRef = useRef(null);
+  if (rawActiveSource?.src !== activeSourceRef.current?.src || rawActiveSource?.type !== activeSourceRef.current?.type) {
+    activeSourceRef.current = rawActiveSource;
+  }
+  const activeSource = activeSourceRef.current;
   const progressPercent = duration ? currentTime / duration * 100 : 0;
   const bufferedPercent = duration ? bufferedTime / duration * 100 : 0;
   const destroyMediaEngines = useCallback(() => {
@@ -466,7 +471,9 @@ function Video({
         }, 60 * 1e3);
       }
     };
-    const onWaiting = () => setIsLoading(true);
+    const onWaiting = () => {
+      if (video.played.length > 0) setIsLoading(true);
+    };
     const onCanPlay = () => setIsLoading(false);
     const onEnded = () => setControlsVisible(true);
     video.addEventListener("timeupdate", syncTime);
@@ -751,6 +758,7 @@ function Video({
           const HlsModule = await import('hls.js');
           if (cancelled) return;
           const Hls = HlsModule.default;
+          console.debug("[Silo/hls] Hls.isSupported()=", Hls.isSupported());
           if (Hls.isSupported()) {
             const hls = new Hls({
               enableWorker: true,
@@ -759,10 +767,12 @@ function Video({
               maxBufferSize: 20 * 1e3 * 1e3
             });
             hlsRef.current = hls;
+            console.debug("[Silo/hls] loadSource", activeSource.src);
             hls.loadSource(activeSource.src);
             hls.attachMedia(video);
             hls.on(Hls.Events.MANIFEST_PARSED, (_, data) => {
               const levels = data.levels ?? hls.levels ?? [];
+              console.debug("[Silo/hls] MANIFEST_PARSED levels=", levels.length, "audioTracks=", hls.audioTracks?.length ?? 0);
               setQualities([
                 AUTO_QUALITY,
                 ...levels.map((level, index) => ({
@@ -773,6 +783,7 @@ function Video({
                 }))
               ]);
               const tracks = hls.audioTracks ?? [];
+              console.debug("[Silo/hls] audio tracks:", tracks.map((t) => ({ name: t.name, lang: t.lang, url: t.url })));
               if (tracks.length > 1) {
                 setAudioTracks(
                   tracks.map((t, i) => ({
@@ -786,6 +797,7 @@ function Video({
             });
             hls.on(Hls.Events.AUDIO_TRACKS_UPDATED, (_, data) => {
               const tracks = data.audioTracks ?? [];
+              console.debug("[Silo/hls] AUDIO_TRACKS_UPDATED", tracks.length);
               if (tracks.length > 1) {
                 setAudioTracks(
                   tracks.map((t, i) => ({
@@ -795,18 +807,41 @@ function Video({
                 );
               }
             });
+            hls.on(Hls.Events.LEVEL_LOADED, (_, data) => {
+              console.debug("[Silo/hls] LEVEL_LOADED level=", data.level, "fragments=", data.details?.fragments?.length);
+            });
+            hls.on(Hls.Events.AUDIO_TRACK_LOADED, (_, data) => {
+              console.debug("[Silo/hls] AUDIO_TRACK_LOADED track=", data.id, "fragments=", data.details?.fragments?.length);
+            });
+            hls.on(Hls.Events.FRAG_LOADING, (_, data) => {
+              console.debug("[Silo/hls] FRAG_LOADING", data.frag?.type, data.frag?.url?.slice(-60));
+            });
+            hls.on(Hls.Events.FRAG_LOADED, (_, data) => {
+              console.debug("[Silo/hls] FRAG_LOADED", data.frag?.type, data.frag?.sn);
+            });
+            let mediaErrorAttempts = 0;
             hls.on(Hls.Events.ERROR, (_, data) => {
+              console.debug("[Silo/hls] ERROR fatal=", data.fatal, "type=", data.type, "details=", data.details, "url=", (data.frag?.url ?? data.url ?? "").slice(-80));
               if (!data.fatal) return;
-              if (data.type === Hls.ErrorTypes.MEDIA_ERROR) {
+              if (data.type === Hls.ErrorTypes.MEDIA_ERROR && mediaErrorAttempts < 2) {
+                mediaErrorAttempts += 1;
+                console.debug("[Silo/hls] recoverMediaError attempt", mediaErrorAttempts);
                 hls.recoverMediaError();
                 return;
               }
-              console.error("[Silo] HLS playback failed");
+              console.error("[Silo] HLS playback failed", data.details);
+              hls.destroy();
+              hlsRef.current = null;
               setIsLoading(false);
             });
+            video.addEventListener("waiting", () => console.debug("[Silo/hls] video:waiting readyState=", video.readyState, "played=", video.played.length));
+            video.addEventListener("canplay", () => console.debug("[Silo/hls] video:canplay readyState=", video.readyState));
+            video.addEventListener("stalled", () => console.debug("[Silo/hls] video:stalled"));
+            video.addEventListener("suspend", () => console.debug("[Silo/hls] video:suspend"));
             return;
           }
           if (video.canPlayType("application/vnd.apple.mpegurl")) {
+            console.debug("[Silo/hls] using native HLS (Safari)");
             video.src = activeSource.src;
             video.load();
             setIsLoading(false);
@@ -1178,7 +1213,7 @@ function Video({
               "video",
               {
                 ref: videoRef,
-                className: `h-full w-full ${isFullscreen ? "object-contain" : "object-cover"}`,
+                className: "h-full w-full object-contain",
                 playsInline: true,
                 preload: "metadata",
                 crossOrigin: "anonymous",