@nikelroot/video-player 0.3.3 → 0.3.5

package/dist/index.cjs

@@ -791,6 +791,11 @@ var getSource = (data) => {
   const responseUrl = isRecord(data.response) ? asText(data.response.url) : null;
   return responseUrl;
 };
+var getErrorMessage = (error) => {
+  if (error instanceof Error) return error.message || error.name;
+  if (!isRecord(error)) return asText(error);
+  return asText(error.message) || asText(error.name);
+};
 var addDetail = (details, label, value) => {
   const text = asText(value);
   if (!text) return;
@@ -808,14 +813,44 @@ var formatPlaybackErrorDetails = (error, data) => {
     addDetail(details, "\u041E\u0448\u0438\u0431\u043A\u0430", error);
   }
   if (isRecord(data)) {
+    addDetail(details, "\u0412\u043B\u043E\u0436\u0435\u043D\u043D\u0430\u044F \u043E\u0448\u0438\u0431\u043A\u0430", getErrorMessage(data.error));
     addDetail(details, "\u0422\u0438\u043F", data.type);
     addDetail(details, "\u0414\u0435\u0442\u0430\u043B\u0438", data.details);
     addDetail(details, "\u041F\u0440\u0438\u0447\u0438\u043D\u0430", data.reason);
     addDetail(details, "HTTP", getResponseSummary(data.response));
     addDetail(details, "\u0418\u0441\u0442\u043E\u0447\u043D\u0438\u043A", getSource(data));
+    addDetail(details, "init.mp4", data.initSegmentUrl);
+    addDetail(details, "MIME", data.mimeType);
+    addDetail(details, "MIME \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F", data.mimeSupported);
+    addDetail(details, "\u0411\u0443\u0444\u0435\u0440", data.sourceBufferName);
+    addDetail(details, "\u0412\u0435\u0440\u0441\u0438\u044F HLS.js", data.hlsVersion);
+    addDetail(details, "\u041E\u0448\u0438\u0431\u043A\u0430 \u0431\u0443\u0444\u0435\u0440\u0430", getErrorMessage(data.bufferError));
+    if (isRecord(data.bufferAddCodecError)) {
+      addDetail(details, "\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 MIME", data.bufferAddCodecError.mimeType);
+      addDetail(details, "\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 init.mp4", data.bufferAddCodecError.initSegmentUrl);
+      addDetail(details, "\u041E\u0448\u0438\u0431\u043A\u0430 \u0434\u043E\u0431\u0430\u0432\u043B\u0435\u043D\u0438\u044F \u0431\u0443\u0444\u0435\u0440\u0430", getErrorMessage(data.bufferAddCodecError.error));
+    }
   }
   return details;
 };
+var serializePlaybackErrorData = (data) => {
+  if (!isRecord(data) || !("error" in data)) return data;
+  const { error, ...rest } = data;
+  if (error instanceof Error) {
+    return { ...rest, error: { name: error.name, message: error.message } };
+  }
+  if (isRecord(error)) {
+    return {
+      ...rest,
+      error: {
+        ..."name" in error ? { name: error.name } : {},
+        ..."message" in error ? { message: error.message } : {},
+        ..."code" in error ? { code: error.code } : {}
+      }
+    };
+  }
+  return { ...rest, error };
+};
 
 // src/VideoPlayer.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -958,6 +993,7 @@ var VideoPlayerBase = (props, ref) => {
     videoOnlySrc,
     audioRanges,
     onAudioFallbackChange,
+    afterScroll,
     ...videoProps
   } = props;
   const primarySrc = rawVideoSrc.replaceAll(" ", "%20").replaceAll("#", "%23");
@@ -978,6 +1014,7 @@ var VideoPlayerBase = (props, ref) => {
   const netRetryCount = (0, import_react4.useRef)(0);
   const mediaRecoverCount = (0, import_react4.useRef)(0);
   const fatalReloadCount = (0, import_react4.useRef)(0);
+  const lastBufferAddCodecFailure = (0, import_react4.useRef)(null);
   const reloadTimer = (0, import_react4.useRef)(null);
   const stalledNudgeTimer = (0, import_react4.useRef)(null);
   const liveStabilityMode = (0, import_react4.useRef)(false);
@@ -1087,18 +1124,19 @@ var VideoPlayerBase = (props, ref) => {
   const reportError = (0, import_react4.useCallback)(
     (error, data, message = messages.defaultError) => {
       var _a, _b;
-      const details = formatPlaybackErrorDetails(error, data);
+      const serializableData = serializePlaybackErrorData(data);
+      const details = formatPlaybackErrorDetails(error, serializableData);
       const code = getPlaybackErrorCodeText(error);
       setNextPlaying(false);
-      setErrorState({ message, error, data, details });
+      setErrorState({ message, error, data: serializableData, details });
       console.error("[VideoPlayer] playback error", {
         message,
         code,
         details,
         error,
-        data
+        data: serializableData
       });
-      (_b = (_a = propsRef.current).onPlaybackError) == null ? void 0 : _b.call(_a, { error, data, message, details });
+      (_b = (_a = propsRef.current).onPlaybackError) == null ? void 0 : _b.call(_a, { error, data: serializableData, message, details });
     },
     [messages.defaultError, setNextPlaying]
   );
@@ -1217,6 +1255,7 @@ var VideoPlayerBase = (props, ref) => {
           block: "center",
           inline: "nearest"
         });
+        afterScroll && afterScroll();
       }
     }
   }, [
@@ -1324,11 +1363,40 @@ var VideoPlayerBase = (props, ref) => {
       if (!video) return;
       const h = new HlsCtor(resolvedHlsConfig());
       hlsRef.current = h;
+      let initSegmentUrl = null;
       const isStaleLoad = () => loadId !== sourceLoadId.current || hlsRef.current !== h || videoRef.current !== video;
+      h.on(HlsCtor.Events.FRAG_LOADING, (_evt, data) => {
+        if (!isStaleLoad() && data.frag.sn === "initSegment") initSegmentUrl = data.frag.url;
+      });
       h.on(HlsCtor.Events.ERROR, (_evt, data) => {
         var _a2, _b2;
         if (isStaleLoad()) return;
         const { type: errorType, details, fatal } = data;
+        if (details === HlsCtor.ErrorDetails.BUFFER_ADD_CODEC_ERROR) {
+          const mediaSourceCtor = typeof window === "undefined" ? void 0 : window.ManagedMediaSource || window.MediaSource;
+          const mimeSupported = data.mimeType && (mediaSourceCtor == null ? void 0 : mediaSourceCtor.isTypeSupported) ? mediaSourceCtor.isTypeSupported(data.mimeType) : null;
+          const bufferError = data.error instanceof Error ? { name: data.error.name, message: data.error.message } : null;
+          lastBufferAddCodecFailure.current = {
+            sourceBufferName: data.sourceBufferName,
+            mimeType: data.mimeType,
+            mimeSupported,
+            initSegmentUrl,
+            error: bufferError
+          };
+          if (mimeSupported === false) {
+            h.destroy();
+            if (hlsRef.current === h) hlsRef.current = null;
+            reportError(details, {
+              type: errorType,
+              details,
+              fatal,
+              src: videoSrc,
+              hlsVersion: HlsCtor.version,
+              ...lastBufferAddCodecFailure.current
+            }, messages.unsupported);
+            return;
+          }
+        }
         if (onAudioError(data)) return;
         if (!fatal && (details === HlsCtor.ErrorDetails.BUFFER_APPEND_ERROR || details === "bufferAppendingError")) return;
         if (!fatal) {
@@ -1402,7 +1470,7 @@ var VideoPlayerBase = (props, ref) => {
           }
           reportError(
             details,
-            data,
+            lastBufferAddCodecFailure.current ? { ...data, bufferAddCodecError: lastBufferAddCodecFailure.current, src: videoSrc, hlsVersion: HlsCtor.version } : data,
             errorType === HlsCtor.ErrorTypes.MEDIA_ERROR ? messages.streamDecodeFailed : messages.streamLoadFailed
           );
           return;
@@ -1643,6 +1711,7 @@ var VideoPlayerBase = (props, ref) => {
     const loadId = sourceLoadId.current + 1;
     sourceLoadId.current = loadId;
     clearErrorState();
+    lastBufferAddCodecFailure.current = null;
     fatalReloadCount.current = 0;
     netRetryCount.current = 0;
     mediaRecoverCount.current = 0;

package/dist/index.d.cts

@@ -90,6 +90,7 @@ interface VideoPlayerProps extends Omit<React.VideoHTMLAttributes<HTMLVideoEleme
     onPointerUp?: PointerHandler;
     onPointerCancel?: PointerHandler;
     accentColor?: string;
+    afterScroll?: () => void;
 }
 declare function hasNativeHlsSupport(): boolean;
 declare const VideoPlayer: React.NamedExoticComponent<VideoPlayerProps & React.RefAttributes<VideoPlayerHandle>>;

package/dist/index.d.ts

@@ -90,6 +90,7 @@ interface VideoPlayerProps extends Omit<React.VideoHTMLAttributes<HTMLVideoEleme
     onPointerUp?: PointerHandler;
     onPointerCancel?: PointerHandler;
     accentColor?: string;
+    afterScroll?: () => void;
 }
 declare function hasNativeHlsSupport(): boolean;
 declare const VideoPlayer: React.NamedExoticComponent<VideoPlayerProps & React.RefAttributes<VideoPlayerHandle>>;

package/dist/index.js

@@ -762,6 +762,11 @@ var getSource = (data) => {
   const responseUrl = isRecord(data.response) ? asText(data.response.url) : null;
   return responseUrl;
 };
+var getErrorMessage = (error) => {
+  if (error instanceof Error) return error.message || error.name;
+  if (!isRecord(error)) return asText(error);
+  return asText(error.message) || asText(error.name);
+};
 var addDetail = (details, label, value) => {
   const text = asText(value);
   if (!text) return;
@@ -779,14 +784,44 @@ var formatPlaybackErrorDetails = (error, data) => {
     addDetail(details, "\u041E\u0448\u0438\u0431\u043A\u0430", error);
   }
   if (isRecord(data)) {
+    addDetail(details, "\u0412\u043B\u043E\u0436\u0435\u043D\u043D\u0430\u044F \u043E\u0448\u0438\u0431\u043A\u0430", getErrorMessage(data.error));
     addDetail(details, "\u0422\u0438\u043F", data.type);
     addDetail(details, "\u0414\u0435\u0442\u0430\u043B\u0438", data.details);
     addDetail(details, "\u041F\u0440\u0438\u0447\u0438\u043D\u0430", data.reason);
     addDetail(details, "HTTP", getResponseSummary(data.response));
     addDetail(details, "\u0418\u0441\u0442\u043E\u0447\u043D\u0438\u043A", getSource(data));
+    addDetail(details, "init.mp4", data.initSegmentUrl);
+    addDetail(details, "MIME", data.mimeType);
+    addDetail(details, "MIME \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F", data.mimeSupported);
+    addDetail(details, "\u0411\u0443\u0444\u0435\u0440", data.sourceBufferName);
+    addDetail(details, "\u0412\u0435\u0440\u0441\u0438\u044F HLS.js", data.hlsVersion);
+    addDetail(details, "\u041E\u0448\u0438\u0431\u043A\u0430 \u0431\u0443\u0444\u0435\u0440\u0430", getErrorMessage(data.bufferError));
+    if (isRecord(data.bufferAddCodecError)) {
+      addDetail(details, "\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 MIME", data.bufferAddCodecError.mimeType);
+      addDetail(details, "\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 init.mp4", data.bufferAddCodecError.initSegmentUrl);
+      addDetail(details, "\u041E\u0448\u0438\u0431\u043A\u0430 \u0434\u043E\u0431\u0430\u0432\u043B\u0435\u043D\u0438\u044F \u0431\u0443\u0444\u0435\u0440\u0430", getErrorMessage(data.bufferAddCodecError.error));
+    }
   }
   return details;
 };
+var serializePlaybackErrorData = (data) => {
+  if (!isRecord(data) || !("error" in data)) return data;
+  const { error, ...rest } = data;
+  if (error instanceof Error) {
+    return { ...rest, error: { name: error.name, message: error.message } };
+  }
+  if (isRecord(error)) {
+    return {
+      ...rest,
+      error: {
+        ..."name" in error ? { name: error.name } : {},
+        ..."message" in error ? { message: error.message } : {},
+        ..."code" in error ? { code: error.code } : {}
+      }
+    };
+  }
+  return { ...rest, error };
+};
 
 // src/VideoPlayer.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -929,6 +964,7 @@ var VideoPlayerBase = (props, ref) => {
     videoOnlySrc,
     audioRanges,
     onAudioFallbackChange,
+    afterScroll,
     ...videoProps
   } = props;
   const primarySrc = rawVideoSrc.replaceAll(" ", "%20").replaceAll("#", "%23");
@@ -949,6 +985,7 @@ var VideoPlayerBase = (props, ref) => {
   const netRetryCount = useRef3(0);
   const mediaRecoverCount = useRef3(0);
   const fatalReloadCount = useRef3(0);
+  const lastBufferAddCodecFailure = useRef3(null);
   const reloadTimer = useRef3(null);
   const stalledNudgeTimer = useRef3(null);
   const liveStabilityMode = useRef3(false);
@@ -1058,18 +1095,19 @@ var VideoPlayerBase = (props, ref) => {
   const reportError = useCallback2(
     (error, data, message = messages.defaultError) => {
       var _a, _b;
-      const details = formatPlaybackErrorDetails(error, data);
+      const serializableData = serializePlaybackErrorData(data);
+      const details = formatPlaybackErrorDetails(error, serializableData);
       const code = getPlaybackErrorCodeText(error);
       setNextPlaying(false);
-      setErrorState({ message, error, data, details });
+      setErrorState({ message, error, data: serializableData, details });
       console.error("[VideoPlayer] playback error", {
         message,
         code,
         details,
         error,
-        data
+        data: serializableData
       });
-      (_b = (_a = propsRef.current).onPlaybackError) == null ? void 0 : _b.call(_a, { error, data, message, details });
+      (_b = (_a = propsRef.current).onPlaybackError) == null ? void 0 : _b.call(_a, { error, data: serializableData, message, details });
     },
     [messages.defaultError, setNextPlaying]
   );
@@ -1188,6 +1226,7 @@ var VideoPlayerBase = (props, ref) => {
           block: "center",
           inline: "nearest"
         });
+        afterScroll && afterScroll();
       }
     }
   }, [
@@ -1295,11 +1334,40 @@ var VideoPlayerBase = (props, ref) => {
       if (!video) return;
       const h = new HlsCtor(resolvedHlsConfig());
       hlsRef.current = h;
+      let initSegmentUrl = null;
       const isStaleLoad = () => loadId !== sourceLoadId.current || hlsRef.current !== h || videoRef.current !== video;
+      h.on(HlsCtor.Events.FRAG_LOADING, (_evt, data) => {
+        if (!isStaleLoad() && data.frag.sn === "initSegment") initSegmentUrl = data.frag.url;
+      });
       h.on(HlsCtor.Events.ERROR, (_evt, data) => {
         var _a2, _b2;
         if (isStaleLoad()) return;
         const { type: errorType, details, fatal } = data;
+        if (details === HlsCtor.ErrorDetails.BUFFER_ADD_CODEC_ERROR) {
+          const mediaSourceCtor = typeof window === "undefined" ? void 0 : window.ManagedMediaSource || window.MediaSource;
+          const mimeSupported = data.mimeType && (mediaSourceCtor == null ? void 0 : mediaSourceCtor.isTypeSupported) ? mediaSourceCtor.isTypeSupported(data.mimeType) : null;
+          const bufferError = data.error instanceof Error ? { name: data.error.name, message: data.error.message } : null;
+          lastBufferAddCodecFailure.current = {
+            sourceBufferName: data.sourceBufferName,
+            mimeType: data.mimeType,
+            mimeSupported,
+            initSegmentUrl,
+            error: bufferError
+          };
+          if (mimeSupported === false) {
+            h.destroy();
+            if (hlsRef.current === h) hlsRef.current = null;
+            reportError(details, {
+              type: errorType,
+              details,
+              fatal,
+              src: videoSrc,
+              hlsVersion: HlsCtor.version,
+              ...lastBufferAddCodecFailure.current
+            }, messages.unsupported);
+            return;
+          }
+        }
         if (onAudioError(data)) return;
         if (!fatal && (details === HlsCtor.ErrorDetails.BUFFER_APPEND_ERROR || details === "bufferAppendingError")) return;
         if (!fatal) {
@@ -1373,7 +1441,7 @@ var VideoPlayerBase = (props, ref) => {
           }
           reportError(
             details,
-            data,
+            lastBufferAddCodecFailure.current ? { ...data, bufferAddCodecError: lastBufferAddCodecFailure.current, src: videoSrc, hlsVersion: HlsCtor.version } : data,
             errorType === HlsCtor.ErrorTypes.MEDIA_ERROR ? messages.streamDecodeFailed : messages.streamLoadFailed
           );
           return;
@@ -1614,6 +1682,7 @@ var VideoPlayerBase = (props, ref) => {
     const loadId = sourceLoadId.current + 1;
     sourceLoadId.current = loadId;
     clearErrorState();
+    lastBufferAddCodecFailure.current = null;
     fatalReloadCount.current = 0;
     netRetryCount.current = 0;
     mediaRecoverCount.current = 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nikelroot/video-player",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "description": "Standalone React video player with HLS support.",
   "repository": {
     "type": "git",
@@ -48,5 +48,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "00fca415c7ef041917872f1349ff3739b1b8da47"
+  "gitHead": "3bc5c054756e591f2ba73678de16dd1dfc0bb80f"
 }