@nikelroot/video-player 0.3.0 → 0.3.3

package/README.md

@@ -8,6 +8,44 @@ Standalone React video player with HLS support, retry/recovery behavior, fullscr
 npm install @nikelroot/video-player
 ```
 
+## GitLab CI and automatic npm releases
+ 
+The repository is hosted at https://gitlab.nikelroot.ru/home/nvideoplayer.
+Every push to the default branch runs validation and publishes a new public
+version of `@nikelroot/video-player` to npmjs.com. Merge requests and other
+branches only run validation. Tag pipelines are disabled.
+
+The release chooses the highest stable version from `package.json` and npm,
+then increases its patch number (for example, `0.3.2` → `0.3.3`) inside the
+CI workspace, builds the package, and publishes it directly to npm. The source
+repository is not modified: CI does not push commits or create Git tags.
+The published version is visible on npmjs.com; `package.json` in Git remains
+the starting version. Releases are serialized to avoid version collisions.
+The npm package records the source commit as `gitHead`; retrying a job for an
+already-published commit skips publication. If publishing failed before the
+version reached npm, retry the failed `publish` job to calculate the next
+available version and publish again.
+
+One-time setup in GitLab:
+
+1. Configure a Docker-compatible runner capable of using `node:24-bookworm`.
+2. Protect the default branch (usually `main`).
+3. In **Settings → CI/CD → Variables**, add this **Masked** and **Protected**
+   variable with variable expansion disabled:
+   - `NPM_TOKEN`: an npm granular access token with read/write permission for
+     `@nikelroot/video-player` and **Bypass two-factor authentication** enabled.
+     The package publishing settings must permit token publishing. Renew the
+     token before its expiration.
+4. Push the repository and CI configuration to GitLab. Do not add secrets to Git.
+
+Only `NPM_TOKEN` is required. No GitLab push token or job-token push permission
+is needed.
+
+This self-hosted GitLab uses token authentication because npm trusted publishing
+currently supports GitLab.com shared runners only. See the
+[npm CI token guide](https://docs.npmjs.com/using-private-packages-in-a-ci-cd-workflow/)
+and [trusted publishing documentation](https://docs.npmjs.com/trusted-publishers/).
+
 Peer dependencies:
 
 ```bash

package/dist/index.cjs

@@ -44,8 +44,9 @@ var import_react = require("react");
 function useAudioFallback(options) {
   const latest = (0, import_react.useRef)(options);
   latest.current = options;
-  const [videoOnly, setVideoOnly] = (0, import_react.useState)(false);
-  const mode = (0, import_react.useRef)(false);
+  const [videoOnly, setVideoOnly] = (0, import_react.useState)(Boolean(options.fallback));
+  const mode = (0, import_react.useRef)(Boolean(options.fallback));
+  const progress = (0, import_react.useRef)({ time: 0, at: Date.now(), failed: false });
   const cooldown = (0, import_react.useRef)(0);
   const audioErrors = (0, import_react.useRef)(0);
   const audioErrorTimer = (0, import_react.useRef)(null);
@@ -62,6 +63,7 @@ function useAudioFallback(options) {
       muted: element.muted
     };
     mode.current = next;
+    progress.current = { time: element.currentTime, at: Date.now(), failed: false };
     audioErrors.current = 0;
     if (audioErrorTimer.current) clearTimeout(audioErrorTimer.current);
     audioErrorTimer.current = null;
@@ -71,15 +73,10 @@ function useAudioFallback(options) {
     return true;
   }, []);
   const onAudioError = (0, import_react.useCallback)((data) => {
-    var _a, _b, _c;
+    var _a, _b;
     if (!latest.current.fallback || mode.current) return false;
     const isAudio = ((_a = data == null ? void 0 : data.frag) == null ? void 0 : _a.type) === "audio" || (data == null ? void 0 : data.parent) === "audio" || ((_b = data == null ? void 0 : data.context) == null ? void 0 : _b.type) === "audioTrack" || /^audioTrack/.test((data == null ? void 0 : data.details) || "");
     if (!isAudio) return false;
-    if ((data == null ? void 0 : data.details) === "fragGap" && ((_c = latest.current.ranges) == null ? void 0 : _c.some((range) => {
-      var _a2, _b2;
-      const time = (_b2 = (_a2 = latest.current.video.current) == null ? void 0 : _a2.currentTime) != null ? _b2 : 0;
-      return time >= range.start - 0.05 && time < range.end - 0.05;
-    }))) return true;
     audioErrors.current++;
     if ((data == null ? void 0 : data.fatal) || audioErrors.current >= 2) return switchSource(true, true);
     if (!audioErrorTimer.current) {
@@ -96,8 +93,9 @@ function useAudioFallback(options) {
     audioErrorTimer.current = null;
   }, []);
   (0, import_react.useEffect)(() => {
-    mode.current = false;
-    setVideoOnly(false);
+    mode.current = Boolean(options.fallback);
+    setVideoOnly(Boolean(options.fallback));
+    progress.current = { time: 0, at: Date.now(), failed: false };
     snapshot.current = null;
     cooldown.current = 0;
     onAudioProgress();
@@ -105,14 +103,27 @@ function useAudioFallback(options) {
   }, [options.primary, options.fallback, onAudioProgress]);
   (0, import_react.useEffect)(() => {
     const check = () => {
-      const { ranges, video, fallback } = latest.current;
-      if (!fallback || !ranges || snapshot.current) return;
+      const { ranges, video, fallback, playingIntent, onStall } = latest.current;
+      if (!fallback) return;
       const element = video.current;
       if (!element) return;
       const time = element.currentTime;
-      const available = ranges.some((range) => time >= range.start - 0.05 && time < range.end - 0.05);
+      const now = Date.now();
+      const previous = progress.current;
+      if (!playingIntent.current || element.ended || Math.abs(time - previous.time) > 0.05) {
+        progress.current = { time, at: now, failed: false };
+      } else if (!previous.failed && now - previous.at >= 8e3) {
+        if (!mode.current) switchSource(true, true);
+        else {
+          progress.current.failed = true;
+          onStall == null ? void 0 : onStall();
+        }
+        return;
+      }
+      if (!ranges || snapshot.current) return;
+      const available = ranges.some((range) => time >= range.start + 0.1 && time < range.end - 0.1);
       if (!mode.current && !available) switchSource(true);
-      else if (mode.current && available && Date.now() >= cooldown.current && ranges.some((range) => time >= range.start - 0.05 && time + 4 <= range.end)) switchSource(false);
+      else if (mode.current && available && now >= cooldown.current && ranges.some((range) => time >= range.start + 0.1 && time + 4 <= range.end)) switchSource(false);
     };
     const timer = setInterval(check, 500);
     return () => clearInterval(timer);
@@ -956,7 +967,9 @@ var VideoPlayerBase = (props, ref) => {
   const [, isMobile, mobileType] = useWindowWidth();
   const videoRef = (0, import_react4.useRef)(null);
   const playbackIntent = (0, import_react4.useRef)(autoPlay || defaultPlaying || Boolean(playingProp));
-  const audioFallback = useAudioFallback({ primary: primarySrc, fallback: videoOnlySrc, ranges: audioRanges, video: videoRef, playingIntent: playbackIntent, onChange: onAudioFallbackChange });
+  const stallReporter = (0, import_react4.useRef)(() => {
+  });
+  const audioFallback = useAudioFallback({ primary: primarySrc, fallback: videoOnlySrc, ranges: audioRanges, video: videoRef, playingIntent: playbackIntent, onChange: onAudioFallbackChange, onStall: () => stallReporter.current() });
   const videoSrc = audioFallback.source;
   const { snapshot: resumeSnapshot, onAudioError, onAudioProgress, switchSource } = audioFallback;
   const hlsRef = (0, import_react4.useRef)(null);
@@ -1089,6 +1102,16 @@ var VideoPlayerBase = (props, ref) => {
     },
     [messages.defaultError, setNextPlaying]
   );
+  stallReporter.current = () => {
+    var _a, _b;
+    playbackIntent.current = false;
+    pendingPlay.current = false;
+    reportError("Playback did not advance for 8 seconds", {
+      type: "playback-stalled",
+      src: videoSrc,
+      reason: `readyState=${(_a = videoRef.current) == null ? void 0 : _a.readyState}; buffered=${(_b = videoRef.current) == null ? void 0 : _b.buffered.length}`
+    }, messages.streamLoadFailed);
+  };
   const notifyActiveChange = (0, import_react4.useCallback)(
     (video, reason) => {
       var _a, _b;
@@ -1404,7 +1427,7 @@ var VideoPlayerBase = (props, ref) => {
         } else {
           h.startLoad();
         }
-        if (resumeSnapshot.current ? resumeSnapshot.current.playing : autoPlay) void playAction();
+        if (resumeSnapshot.current ? resumeSnapshot.current.playing : propsRef.current.autoPlay) void playAction();
       });
       h.on(HlsCtor.Events.FRAG_BUFFERED, (_evt, data) => {
         if (isStaleLoad()) return;
@@ -1441,7 +1464,7 @@ var VideoPlayerBase = (props, ref) => {
       video.src = videoSrc;
       if (!(options == null ? void 0 : options.metadataOnly)) {
         video.currentTime = (_b = (_a = resumeSnapshot.current) == null ? void 0 : _a.time) != null ? _b : initialTime;
-        if (resumeSnapshot.current ? resumeSnapshot.current.playing : autoPlay) void playAction();
+        if (resumeSnapshot.current ? resumeSnapshot.current.playing : propsRef.current.autoPlay) void playAction();
       }
     },
     [autoPlay, initialTime, playAction, videoSrc]
@@ -1657,10 +1680,13 @@ var VideoPlayerBase = (props, ref) => {
     videoSrc
   ]);
   (0, import_react4.useEffect)(() => {
-    if (!autoPlay) return;
     if (resumeSnapshot.current) return;
-    if (!canAttemptPlayback(videoRef.current)) return;
-    void playAction();
+    if (!canAttemptPlayback(videoRef.current)) {
+      pendingPlay.current = Boolean(autoPlay);
+      playbackIntent.current = Boolean(autoPlay);
+      return;
+    }
+    if (autoPlay) void playAction();
   }, [autoPlay, playAction]);
   (0, import_react4.useEffect)(() => {
     if (typeof document === "undefined") return;
@@ -1753,7 +1779,10 @@ var VideoPlayerBase = (props, ref) => {
                 setNextPlaying(true);
               },
               onPause: () => {
-                if (!resumeSnapshot.current) setNextPlaying(false);
+                if (!resumeSnapshot.current) {
+                  playbackIntent.current = false;
+                  setNextPlaying(false);
+                }
               },
               onEnded: () => setNextPlaying(false),
               onLoadedMetadata: videoLoadedHandler,

package/dist/index.js

@@ -15,8 +15,9 @@ import { useCallback, useEffect, useRef, useState } from "react";
 function useAudioFallback(options) {
   const latest = useRef(options);
   latest.current = options;
-  const [videoOnly, setVideoOnly] = useState(false);
-  const mode = useRef(false);
+  const [videoOnly, setVideoOnly] = useState(Boolean(options.fallback));
+  const mode = useRef(Boolean(options.fallback));
+  const progress = useRef({ time: 0, at: Date.now(), failed: false });
   const cooldown = useRef(0);
   const audioErrors = useRef(0);
   const audioErrorTimer = useRef(null);
@@ -33,6 +34,7 @@ function useAudioFallback(options) {
       muted: element.muted
     };
     mode.current = next;
+    progress.current = { time: element.currentTime, at: Date.now(), failed: false };
     audioErrors.current = 0;
     if (audioErrorTimer.current) clearTimeout(audioErrorTimer.current);
     audioErrorTimer.current = null;
@@ -42,15 +44,10 @@ function useAudioFallback(options) {
     return true;
   }, []);
   const onAudioError = useCallback((data) => {
-    var _a, _b, _c;
+    var _a, _b;
     if (!latest.current.fallback || mode.current) return false;
     const isAudio = ((_a = data == null ? void 0 : data.frag) == null ? void 0 : _a.type) === "audio" || (data == null ? void 0 : data.parent) === "audio" || ((_b = data == null ? void 0 : data.context) == null ? void 0 : _b.type) === "audioTrack" || /^audioTrack/.test((data == null ? void 0 : data.details) || "");
     if (!isAudio) return false;
-    if ((data == null ? void 0 : data.details) === "fragGap" && ((_c = latest.current.ranges) == null ? void 0 : _c.some((range) => {
-      var _a2, _b2;
-      const time = (_b2 = (_a2 = latest.current.video.current) == null ? void 0 : _a2.currentTime) != null ? _b2 : 0;
-      return time >= range.start - 0.05 && time < range.end - 0.05;
-    }))) return true;
     audioErrors.current++;
     if ((data == null ? void 0 : data.fatal) || audioErrors.current >= 2) return switchSource(true, true);
     if (!audioErrorTimer.current) {
@@ -67,8 +64,9 @@ function useAudioFallback(options) {
     audioErrorTimer.current = null;
   }, []);
   useEffect(() => {
-    mode.current = false;
-    setVideoOnly(false);
+    mode.current = Boolean(options.fallback);
+    setVideoOnly(Boolean(options.fallback));
+    progress.current = { time: 0, at: Date.now(), failed: false };
     snapshot.current = null;
     cooldown.current = 0;
     onAudioProgress();
@@ -76,14 +74,27 @@ function useAudioFallback(options) {
   }, [options.primary, options.fallback, onAudioProgress]);
   useEffect(() => {
     const check = () => {
-      const { ranges, video, fallback } = latest.current;
-      if (!fallback || !ranges || snapshot.current) return;
+      const { ranges, video, fallback, playingIntent, onStall } = latest.current;
+      if (!fallback) return;
       const element = video.current;
       if (!element) return;
       const time = element.currentTime;
-      const available = ranges.some((range) => time >= range.start - 0.05 && time < range.end - 0.05);
+      const now = Date.now();
+      const previous = progress.current;
+      if (!playingIntent.current || element.ended || Math.abs(time - previous.time) > 0.05) {
+        progress.current = { time, at: now, failed: false };
+      } else if (!previous.failed && now - previous.at >= 8e3) {
+        if (!mode.current) switchSource(true, true);
+        else {
+          progress.current.failed = true;
+          onStall == null ? void 0 : onStall();
+        }
+        return;
+      }
+      if (!ranges || snapshot.current) return;
+      const available = ranges.some((range) => time >= range.start + 0.1 && time < range.end - 0.1);
       if (!mode.current && !available) switchSource(true);
-      else if (mode.current && available && Date.now() >= cooldown.current && ranges.some((range) => time >= range.start - 0.05 && time + 4 <= range.end)) switchSource(false);
+      else if (mode.current && available && now >= cooldown.current && ranges.some((range) => time >= range.start + 0.1 && time + 4 <= range.end)) switchSource(false);
     };
     const timer = setInterval(check, 500);
     return () => clearInterval(timer);
@@ -927,7 +938,9 @@ var VideoPlayerBase = (props, ref) => {
   const [, isMobile, mobileType] = useWindowWidth();
   const videoRef = useRef3(null);
   const playbackIntent = useRef3(autoPlay || defaultPlaying || Boolean(playingProp));
-  const audioFallback = useAudioFallback({ primary: primarySrc, fallback: videoOnlySrc, ranges: audioRanges, video: videoRef, playingIntent: playbackIntent, onChange: onAudioFallbackChange });
+  const stallReporter = useRef3(() => {
+  });
+  const audioFallback = useAudioFallback({ primary: primarySrc, fallback: videoOnlySrc, ranges: audioRanges, video: videoRef, playingIntent: playbackIntent, onChange: onAudioFallbackChange, onStall: () => stallReporter.current() });
   const videoSrc = audioFallback.source;
   const { snapshot: resumeSnapshot, onAudioError, onAudioProgress, switchSource } = audioFallback;
   const hlsRef = useRef3(null);
@@ -1060,6 +1073,16 @@ var VideoPlayerBase = (props, ref) => {
     },
     [messages.defaultError, setNextPlaying]
   );
+  stallReporter.current = () => {
+    var _a, _b;
+    playbackIntent.current = false;
+    pendingPlay.current = false;
+    reportError("Playback did not advance for 8 seconds", {
+      type: "playback-stalled",
+      src: videoSrc,
+      reason: `readyState=${(_a = videoRef.current) == null ? void 0 : _a.readyState}; buffered=${(_b = videoRef.current) == null ? void 0 : _b.buffered.length}`
+    }, messages.streamLoadFailed);
+  };
   const notifyActiveChange = useCallback2(
     (video, reason) => {
       var _a, _b;
@@ -1375,7 +1398,7 @@ var VideoPlayerBase = (props, ref) => {
         } else {
           h.startLoad();
         }
-        if (resumeSnapshot.current ? resumeSnapshot.current.playing : autoPlay) void playAction();
+        if (resumeSnapshot.current ? resumeSnapshot.current.playing : propsRef.current.autoPlay) void playAction();
       });
       h.on(HlsCtor.Events.FRAG_BUFFERED, (_evt, data) => {
         if (isStaleLoad()) return;
@@ -1412,7 +1435,7 @@ var VideoPlayerBase = (props, ref) => {
       video.src = videoSrc;
       if (!(options == null ? void 0 : options.metadataOnly)) {
         video.currentTime = (_b = (_a = resumeSnapshot.current) == null ? void 0 : _a.time) != null ? _b : initialTime;
-        if (resumeSnapshot.current ? resumeSnapshot.current.playing : autoPlay) void playAction();
+        if (resumeSnapshot.current ? resumeSnapshot.current.playing : propsRef.current.autoPlay) void playAction();
       }
     },
     [autoPlay, initialTime, playAction, videoSrc]
@@ -1628,10 +1651,13 @@ var VideoPlayerBase = (props, ref) => {
     videoSrc
   ]);
   useEffect2(() => {
-    if (!autoPlay) return;
     if (resumeSnapshot.current) return;
-    if (!canAttemptPlayback(videoRef.current)) return;
-    void playAction();
+    if (!canAttemptPlayback(videoRef.current)) {
+      pendingPlay.current = Boolean(autoPlay);
+      playbackIntent.current = Boolean(autoPlay);
+      return;
+    }
+    if (autoPlay) void playAction();
   }, [autoPlay, playAction]);
   useEffect2(() => {
     if (typeof document === "undefined") return;
@@ -1724,7 +1750,10 @@ var VideoPlayerBase = (props, ref) => {
                 setNextPlaying(true);
               },
               onPause: () => {
-                if (!resumeSnapshot.current) setNextPlaying(false);
+                if (!resumeSnapshot.current) {
+                  playbackIntent.current = false;
+                  setNextPlaying(false);
+                }
               },
               onEnded: () => setNextPlaying(false),
               onLoadedMetadata: videoLoadedHandler,

package/package.json

@@ -1,7 +1,11 @@
 {
   "name": "@nikelroot/video-player",
-  "version": "0.3.0",
+  "version": "0.3.3",
   "description": "Standalone React video player with HLS support.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.nikelroot.ru/home/nvideoplayer.git"
+  },
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -41,6 +45,8 @@
     "typescript": "^5.9.3"
   },
   "publishConfig": {
-    "access": "public"
-  }
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "gitHead": "00fca415c7ef041917872f1349ff3739b1b8da47"
 }