jvetrau-ds 0.1.32 → 0.1.34

package/components/attach/attach.css

@@ -2,8 +2,9 @@
   /* color */
   --attachment-color: var(--color-text);
   --attachment-item-bg: var(--color-control);
+  --attachment-item-color: var(--color-text-control);
   --attachment-border-color: var(--color-line);
-  --attachment-meta-color: var(--color-text-note);
+  --attachment-item-meta-color: var(--color-text-note);
 
   color: var(--attachment-color);
 
@@ -37,6 +38,10 @@
 }
 
 .attach__list {
+  /* color */
+
+  /* typography */
+
   /* size */
   display: flex;
   flex-direction: column;
@@ -46,11 +51,18 @@
 
   /* border */
   list-style: none;
+
+  /* depth */
+
+  /* motion */
 }
 
 .attach__item {
   /* color */
   background: var(--attachment-item-bg);
+  color: var(--attachment-item-color);
+
+  /* typography */
 
   /* size */
   display: flex;
@@ -89,11 +101,25 @@
 }
 
 .attach__link:hover .attach__name {
+  /* color */
+
   /* typography */
   text-decoration: underline;
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .attach__preview {
+  /* color */
+
+  /* typography */
+
   /* size */
   display: block;
   max-width: var(--attachment-preview-max-width);
@@ -109,6 +135,10 @@
 }
 
 .attach__file {
+  /* color */
+
+  /* typography */
+
   /* size */
   display: flex;
   flex-direction: column;
@@ -122,6 +152,8 @@
 }
 
 .attach__name {
+  /* color */
+
   /* typography */
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -138,7 +170,7 @@
 
 .attach__meta {
   /* color */
-  color: var(--attachment-meta-color);
+  color: var(--attachment-item-meta-color);
 
   /* typography */
   font-size: 0.85em;
@@ -174,6 +206,16 @@
 }
 
 .attach__remove:hover {
+  /* color */
+
   /* typography */
   text-decoration: underline;
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }

package/components/video/video.cjs

@@ -30,7 +30,9 @@ function getBufferedEnd(video) {
   return video.buffered.end(video.buffered.length - 1);
 }
 function getVideoSource(src, qualities, selectedQuality) {
-  const selectedQualityItem = qualities.find((quality) => quality.value === selectedQuality);
+  const selectedQualityItem = qualities.find(
+    (quality) => quality.value === selectedQuality
+  );
   return selectedQualityItem?.src ?? src;
 }
 function getQualityOptions(qualities) {
@@ -52,6 +54,7 @@ function getVideoProgressState(video) {
 const defaultQualities = [];
 const Video = ({
   src,
+  mediaKey,
   cover,
   qualities = defaultQualities,
   defaultQuality = "",
@@ -67,9 +70,11 @@ const Video = ({
   playsInline = true,
   preload = "metadata",
   onQualityChange,
+  onPlaybackError,
   onPlay,
   onPause,
   onEnded,
+  onError,
   onLoadedMetadata,
   onTimeUpdate,
   onProgress,
@@ -89,14 +94,36 @@ const Video = ({
   const [isMuted, setIsMuted] = react.useState(muted ?? initialMuted);
   const hasAppliedInitialTimeRef = react.useRef(false);
   const lastProgressCommitAtRef = react.useRef(0);
-  const videoSrc = getVideoSource(src, qualities, selectedQuality);
+  const loadedMediaKeyRef = react.useRef(void 0);
+  const pendingRestoreTimeRef = react.useRef(null);
+  const onPlaybackErrorRef = react.useRef(onPlaybackError);
+  const videoSrc = getVideoSource(
+    src,
+    qualities,
+    selectedQuality
+  );
+  const effectiveMediaKey = mediaKey ?? videoSrc;
   const qualityOptions = getQualityOptions(qualities);
   const hasQualityOptions = qualityOptions.length > 0;
+  react.useEffect(() => {
+    onPlaybackErrorRef.current = onPlaybackError;
+  }, [onPlaybackError]);
   react.useEffect(() => {
     const video = videoRef.current;
-    hasAppliedInitialTimeRef.current = false;
-    lastProgressCommitAtRef.current = 0;
     if (!video || !videoSrc) return;
+    const isSameMedia = loadedMediaKeyRef.current !== void 0 && loadedMediaKeyRef.current === effectiveMediaKey;
+    if (isSameMedia) {
+      pendingRestoreTimeRef.current = video.currentTime;
+    } else {
+      pendingRestoreTimeRef.current = null;
+      hasAppliedInitialTimeRef.current = false;
+      lastProgressCommitAtRef.current = 0;
+      setCurrentTime(0);
+      setDuration(0);
+      setBuffered(0);
+      setIsPlaying(false);
+    }
+    loadedMediaKeyRef.current = effectiveMediaKey;
     video.removeAttribute("src");
     video.load();
     if (video.canPlayType("application/vnd.apple.mpegurl")) {
@@ -110,13 +137,18 @@ const Video = ({
     const hls = new Hls__default.default();
     hls.on(Hls__default.default.Events.ERROR, (_, data) => {
       console.error("HLS error", data);
+      onPlaybackErrorRef.current?.({
+        type: "hls",
+        fatal: data.fatal,
+        error: data
+      });
     });
     hls.loadSource(videoSrc);
     hls.attachMedia(video);
     return () => {
       hls.destroy();
     };
-  }, [videoSrc]);
+  }, [videoSrc, effectiveMediaKey]);
   const hasStarted = currentTime > 0 || isPlaying;
   const hasControls = hasStarted;
   const hasVolume = isVolumeOpen;
@@ -166,13 +198,21 @@ const Video = ({
   const handleSeek = (nextValue) => {
     const video = videoRef.current;
     if (!video) return;
-    video.currentTime = getClampedValue(nextValue, 0, duration);
+    video.currentTime = getClampedValue(
+      nextValue,
+      0,
+      duration
+    );
     setCurrentTime(video.currentTime);
   };
   const handleVolumeChange = (nextValue) => {
     const video = videoRef.current;
     if (!video) return;
-    const nextVolume = getClampedValue(nextValue, 0, 1);
+    const nextVolume = getClampedValue(
+      nextValue,
+      0,
+      1
+    );
     video.volume = nextVolume;
     video.muted = nextVolume === 0;
     setVolume(nextVolume);
@@ -195,7 +235,13 @@ const Video = ({
   };
   const handleLoadedMetadata = (event) => {
     const video = event.currentTarget;
-    if (!hasAppliedInitialTimeRef.current && initialTime > 0) {
+    if (pendingRestoreTimeRef.current !== null) {
+      video.currentTime = Math.min(
+        pendingRestoreTimeRef.current,
+        video.duration || pendingRestoreTimeRef.current
+      );
+      pendingRestoreTimeRef.current = null;
+    } else if (!hasAppliedInitialTimeRef.current && initialTime > 0) {
       video.currentTime = Math.min(
         initialTime,
         video.duration || initialTime
@@ -232,114 +278,150 @@ const Video = ({
     commitProgress(event.currentTarget);
     onEnded?.(event);
   };
+  const handleNativeError = (event) => {
+    onPlaybackError?.({
+      type: "media",
+      fatal: true,
+      error: event.currentTarget.error ?? event
+    });
+    onError?.(event);
+  };
   const handleNativeVolumeChange = (event) => {
     syncMediaState();
     onVolumeChange?.(event);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes, "aria-label": label, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "video__surface", children: [
-      cover && !hasStarted ? /* @__PURE__ */ jsxRuntime.jsx(
-        "img",
-        {
-          className: "video__cover",
-          src: cover,
-          alt: "",
-          "aria-hidden": "true"
-        }
-      ) : null,
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "video",
-        {
-          ...props,
-          ref: videoRef,
-          className: "video__media",
-          poster: cover,
-          autoPlay,
-          loop,
-          muted: isMuted,
-          playsInline,
-          preload,
-          controls: false,
-          onLoadedMetadata: handleLoadedMetadata,
-          onTimeUpdate: handleTimeUpdate,
-          onProgress: handleProgress,
-          onPlay: handlePlay,
-          onPause: handlePause,
-          onEnded: handleEnded,
-          onVolumeChange: handleNativeVolumeChange,
-          children
-        }
-      ),
-      !hasStarted && /* @__PURE__ */ jsxRuntime.jsx(
-        ButtonIcon__default.default,
-        {
-          className: "video__main-action",
-          icon: "play",
-          label: "Play video",
-          onClick: handlePlayToggle
-        }
-      )
-    ] }),
-    hasControls && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "video__controls", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        ButtonIcon__default.default,
-        {
-          icon: isPlaying ? "pause" : "play",
-          label: isPlaying ? "Pause video" : "Play video",
-          onClick: handlePlayToggle
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "video__time", children: formatTime(currentTime) }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        ProgressBar__default.default,
-        {
-          className: "video__progress",
-          mode: "player",
-          value: currentTime,
-          buffered,
-          max: duration || 1,
-          step: 1,
-          label: "Video progress",
-          onValueChange: handleSeek
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(ButtonIcon__default.default, { icon: "fullscreen", label: "Fullscreen", onClick: handleFullscreen }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "video__sound-control", onMouseLeave: () => setIsVolumeOpen(false), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ButtonIcon__default.default,
-          {
-            icon: isMuted ? "sound-off" : "sound",
-            label: isMuted ? "Unmute video" : "Mute video",
-            onClick: handleSoundToggle,
-            onMouseEnter: () => setIsVolumeOpen(true),
-            onFocus: () => setIsVolumeOpen(true)
-          }
-        ),
-        hasVolume && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "video__volume", children: /* @__PURE__ */ jsxRuntime.jsx(
-          ProgressBar__default.default,
-          {
-            mode: "level",
-            value: isMuted ? 0 : volume,
-            max: 1,
-            step: 0.05,
-            label: "Volume",
-            onValueChange: handleVolumeChange
-          }
-        ) })
-      ] }),
-      hasQualityOptions && /* @__PURE__ */ jsxRuntime.jsx(
-        Dropdown__default.default,
-        {
-          align: "top-end",
-          value: selectedQuality,
-          options: qualityOptions,
-          label: "Video quality",
-          onChange: handleQualityChange,
-          trigger: /* @__PURE__ */ jsxRuntime.jsx(ButtonIcon__default.default, { icon: "settings", label: "Video quality" })
-        }
-      )
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: classes,
+      "aria-label": label,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "video__surface", children: [
+          cover && !hasStarted ? /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              className: "video__cover",
+              src: cover,
+              alt: "",
+              "aria-hidden": "true"
+            }
+          ) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "video",
+            {
+              ...props,
+              ref: videoRef,
+              className: "video__media",
+              poster: cover,
+              autoPlay,
+              loop,
+              muted: isMuted,
+              playsInline,
+              preload,
+              controls: false,
+              onLoadedMetadata: handleLoadedMetadata,
+              onTimeUpdate: handleTimeUpdate,
+              onProgress: handleProgress,
+              onPlay: handlePlay,
+              onPause: handlePause,
+              onEnded: handleEnded,
+              onError: handleNativeError,
+              onVolumeChange: handleNativeVolumeChange,
+              children
+            }
+          ),
+          !hasStarted && /* @__PURE__ */ jsxRuntime.jsx(
+            ButtonIcon__default.default,
+            {
+              className: "video__main-action",
+              icon: "play",
+              label: "Play video",
+              onClick: handlePlayToggle
+            }
+          )
+        ] }),
+        hasControls && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "video__controls", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ButtonIcon__default.default,
+            {
+              icon: isPlaying ? "pause" : "play",
+              label: isPlaying ? "Pause video" : "Play video",
+              onClick: handlePlayToggle
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "video__time", children: formatTime(currentTime) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ProgressBar__default.default,
+            {
+              className: "video__progress",
+              mode: "player",
+              value: currentTime,
+              buffered,
+              max: duration || 1,
+              step: 1,
+              label: "Video progress",
+              onValueChange: handleSeek
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ButtonIcon__default.default,
+            {
+              icon: "fullscreen",
+              label: "Fullscreen",
+              onClick: handleFullscreen
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "video__sound-control",
+              onMouseLeave: () => setIsVolumeOpen(false),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ButtonIcon__default.default,
+                  {
+                    icon: isMuted ? "sound-off" : "sound",
+                    label: isMuted ? "Unmute video" : "Mute video",
+                    onClick: handleSoundToggle,
+                    onMouseEnter: () => setIsVolumeOpen(true),
+                    onFocus: () => setIsVolumeOpen(true)
+                  }
+                ),
+                hasVolume && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "video__volume", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  ProgressBar__default.default,
+                  {
+                    mode: "level",
+                    value: isMuted ? 0 : volume,
+                    max: 1,
+                    step: 0.05,
+                    label: "Volume",
+                    onValueChange: handleVolumeChange
+                  }
+                ) })
+              ]
+            }
+          ),
+          hasQualityOptions && /* @__PURE__ */ jsxRuntime.jsx(
+            Dropdown__default.default,
+            {
+              align: "top-end",
+              value: selectedQuality,
+              options: qualityOptions,
+              label: "Video quality",
+              onChange: handleQualityChange,
+              trigger: /* @__PURE__ */ jsxRuntime.jsx(
+                ButtonIcon__default.default,
+                {
+                  icon: "settings",
+                  label: "Video quality"
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
 };
 var video_default = Video;
 

package/components/video/video.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/video/video.tsx"],"names":["useRef","useState","useEffect","Hls","classnames","jsxs","jsx","ButtonIcon","ProgressBar","Dropdown"],"mappings":"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","file":"video.cjs","sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport Hls from 'hls.js';\n\nimport './video.css';\nimport { classnames } from '../helpers/classnames';\nimport ButtonIcon from '../button-icon';\nimport ProgressBar from '../progressbar';\nimport Dropdown, { type DropdownOption } from '../dropdown';\n\nexport interface VideoQuality {\n  value: string;\n  label: string;\n  src?: string;\n  disabled?: boolean;\n}\n\nexport interface VideoProgressState {\n  currentTime: number;\n  duration: number;\n  completed: boolean;\n}\n\nexport interface VideoProps\n  extends Omit<React.VideoHTMLAttributes<HTMLVideoElement>, 'controls' | 'src' | 'poster'> {\n  src?: string;\n  cover?: string;\n  qualities?: VideoQuality[];\n  defaultQuality?: string;\n  label?: string;\n  initialVolume?: number;\n  initialMuted?: boolean;\n  initialTime?: number;\n  progressCommitIntervalSec?: number;\n  onProgressCommit?: (state: VideoProgressState) => void;\n  onQualityChange?: (quality: string) => void;\n}\n\nfunction getClampedValue(value: number, min: number, max: number) {\n  return Math.min(Math.max(value, min), max);\n}\n\nfunction formatTime(value: number) {\n  if (!Number.isFinite(value)) return '0:00';\n\n  const minutes = Math.floor(value / 60);\n  const seconds = Math.floor(value % 60);\n\n  return `${minutes}:${String(seconds).padStart(2, '0')}`;\n}\n\nfunction getBufferedEnd(video: HTMLVideoElement) {\n  if (video.buffered.length === 0) return 0;\n\n  return video.buffered.end(video.buffered.length - 1);\n}\n\nfunction getVideoSource(src: string | undefined, qualities: VideoQuality[], selectedQuality: string) {\n  const selectedQualityItem = qualities.find((quality) => quality.value === selectedQuality);\n\n  return selectedQualityItem?.src ?? src;\n}\n\nfunction getQualityOptions(qualities: VideoQuality[]): DropdownOption[] {\n  return qualities.map((quality) => ({\n    value: quality.value,\n    label: quality.label,\n    disabled: quality.disabled,\n  }));\n}\n\nfunction getVideoProgressState(\n  video: HTMLVideoElement,\n): VideoProgressState {\n  const duration = video.duration || 0;\n  const currentTime = video.currentTime || 0;\n\n  return {\n    currentTime,\n    duration,\n\n    completed:\n      video.ended ||\n      (\n        duration > 0 &&\n        currentTime >= duration * 0.9\n      ),\n  };\n}\n\nconst defaultQualities: VideoQuality[] = [];\n\nconst Video: React.FC<VideoProps> = ({\n  src,\n  cover,\n  qualities = defaultQualities,\n  defaultQuality = '',\n  label = 'Video player',\n  initialVolume = 1,\n  initialMuted = false,\n  initialTime = 0,\n  progressCommitIntervalSec = 15,\n  className = '',\n  autoPlay,\n  loop,\n  muted,\n  playsInline = true,\n  preload = 'metadata',\n  onQualityChange,\n  onPlay,\n  onPause,\n  onEnded,\n  onLoadedMetadata,\n  onTimeUpdate,\n  onProgress,\n  onVolumeChange,\n  onProgressCommit,\n  children,\n  ...props\n}) => {\n  const videoRef = useRef<HTMLVideoElement>(null);\n\n  const [isPlaying, setIsPlaying] = useState(false);\n  const [isVolumeOpen, setIsVolumeOpen] = useState(false);\n  const [selectedQuality, setSelectedQuality] = useState(defaultQuality);\n  const [currentTime, setCurrentTime] = useState(0);\n  const [duration, setDuration] = useState(0);\n  const [buffered, setBuffered] = useState(0);\n  const [volume, setVolume] = useState(initialVolume);\n  const [isMuted, setIsMuted] = useState(muted ?? initialMuted);\n\n  const hasAppliedInitialTimeRef = useRef(false);\n  const lastProgressCommitAtRef = useRef(0);\n\n  const videoSrc = getVideoSource(src, qualities, selectedQuality);\n  const qualityOptions = getQualityOptions(qualities);\n  const hasQualityOptions = qualityOptions.length > 0;\n\n  useEffect(() => {\n    const video = videoRef.current;\n\n    hasAppliedInitialTimeRef.current = false;\n    lastProgressCommitAtRef.current = 0;\n\n    if (!video || !videoSrc) return;\n\n    video.removeAttribute('src');\n    video.load();\n\n    if (video.canPlayType('application/vnd.apple.mpegurl')) {\n      video.src = videoSrc;\n      return;\n    }\n\n    if (!Hls.isSupported()) {\n      video.src = videoSrc;\n      return;\n    }\n\n    const hls = new Hls();\n\n    hls.on(Hls.Events.ERROR, (_, data) => {\n      console.error('HLS error', data);\n    });\n\n    hls.loadSource(videoSrc);\n    hls.attachMedia(video);\n\n    return () => {\n      hls.destroy();\n    };\n  }, [videoSrc]);\n\n  const hasStarted = currentTime > 0 || isPlaying;\n  const hasControls = hasStarted;\n  const hasVolume = isVolumeOpen;\n\n  const classes = classnames('video', className, {\n    'video--with-controls': hasControls,\n    'video--with-volume': hasVolume,\n  });\n\n  const syncMediaState = () => {\n    const video = videoRef.current;\n\n    if (!video) return;\n\n    setCurrentTime(video.currentTime);\n    setDuration(video.duration || 0);\n    setBuffered(getBufferedEnd(video));\n    setVolume(video.volume);\n    setIsMuted(video.muted);\n    setIsPlaying(!video.paused);\n  };\n\n  const commitProgress = (\n    video: HTMLVideoElement,\n  ) => {\n    if (!onProgressCommit) {\n      return;\n    }\n\n    onProgressCommit(\n      getVideoProgressState(video),\n    );\n  };\n\n  const handlePlayToggle = async () => {\n    const video = videoRef.current;\n\n    if (!video) return;\n\n    console.log('play click', {\n      paused: video.paused,\n      readyState: video.readyState,\n      src: video.currentSrc,\n      networkState: video.networkState,\n      error: video.error,\n    });\n\n    if (video.paused) {\n      try {\n        await video.play();\n        console.log('play success');\n      } catch (error) {\n        console.error('play failed', error);\n      }\n\n      return;\n    }\n\n    video.pause();\n  };\n\n  const handleSeek = (nextValue: number) => {\n    const video = videoRef.current;\n\n    if (!video) return;\n\n    video.currentTime = getClampedValue(nextValue, 0, duration);\n    setCurrentTime(video.currentTime);\n  };\n\n  const handleVolumeChange = (nextValue: number) => {\n    const video = videoRef.current;\n\n    if (!video) return;\n\n    const nextVolume = getClampedValue(nextValue, 0, 1);\n\n    video.volume = nextVolume;\n    video.muted = nextVolume === 0;\n\n    setVolume(nextVolume);\n    setIsMuted(video.muted);\n  };\n\n  const handleSoundToggle = () => {\n    const video = videoRef.current;\n\n    if (!video) return;\n\n    video.muted = !video.muted;\n    setIsMuted(video.muted);\n  };\n\n  const handleFullscreen = () => {\n    const video = videoRef.current;\n\n    if (!video) return;\n\n    video.requestFullscreen?.();\n  };\n\n  const handleQualityChange = (quality: string) => {\n    setSelectedQuality(quality);\n    onQualityChange?.(quality);\n  };\n\n  const handleLoadedMetadata = (\n    event: React.SyntheticEvent<HTMLVideoElement>,\n  ) => {\n    const video = event.currentTarget;\n\n    if (\n      !hasAppliedInitialTimeRef.current &&\n      initialTime > 0\n    ) {\n      video.currentTime = Math.min(\n        initialTime,\n        video.duration || initialTime,\n      );\n\n      hasAppliedInitialTimeRef.current = true;\n    }\n\n    syncMediaState();\n\n    onLoadedMetadata?.(event);\n  };\n\n  const handleTimeUpdate = (\n    event: React.SyntheticEvent<HTMLVideoElement>,\n  ) => {\n    const video = event.currentTarget;\n\n    syncMediaState();\n\n    if (\n      onProgressCommit &&\n      (\n        video.currentTime -\n        lastProgressCommitAtRef.current\n      ) >= progressCommitIntervalSec\n    ) {\n      lastProgressCommitAtRef.current =\n        video.currentTime;\n\n      commitProgress(video);\n    }\n\n    onTimeUpdate?.(event);\n  };\n\n  const handleProgress = (event: React.SyntheticEvent<HTMLVideoElement>) => {\n    syncMediaState();\n    onProgress?.(event);\n  };\n\n  const handlePlay = (event: React.SyntheticEvent<HTMLVideoElement>) => {\n    setIsPlaying(true);\n    onPlay?.(event);\n  };\n\n  const handlePause = (\n    event: React.SyntheticEvent<HTMLVideoElement>,\n  ) => {\n    setIsPlaying(false);\n\n    commitProgress(event.currentTarget);\n\n    onPause?.(event);\n  };\n\n  const handleEnded = (\n    event: React.SyntheticEvent<HTMLVideoElement>,\n  ) => {\n    syncMediaState();\n\n    commitProgress(event.currentTarget);\n\n    onEnded?.(event);\n  };\n\n  const handleNativeVolumeChange = (event: React.SyntheticEvent<HTMLVideoElement>) => {\n    syncMediaState();\n    onVolumeChange?.(event);\n  };\n\n  return (\n    <div className={classes} aria-label={label}>\n      <div className=\"video__surface\">\n        {cover && !hasStarted ? (\n          <img\n            className=\"video__cover\"\n            src={cover}\n            alt=\"\"\n            aria-hidden=\"true\"\n          />\n        ) : null}\n\n        <video\n          {...props}\n          ref={videoRef}\n          className=\"video__media\"\n          poster={cover}\n          autoPlay={autoPlay}\n          loop={loop}\n          muted={isMuted}\n          playsInline={playsInline}\n          preload={preload}\n          controls={false}\n          onLoadedMetadata={handleLoadedMetadata}\n          onTimeUpdate={handleTimeUpdate}\n          onProgress={handleProgress}\n          onPlay={handlePlay}\n          onPause={handlePause}\n          onEnded={handleEnded}\n          onVolumeChange={handleNativeVolumeChange}\n        >\n          {children}\n        </video>\n\n        {!hasStarted && (\n          <ButtonIcon\n            className=\"video__main-action\"\n            icon=\"play\"\n            label=\"Play video\"\n            onClick={handlePlayToggle}\n          />\n        )}\n      </div>\n\n      {hasControls && (\n        <div className=\"video__controls\">\n          <ButtonIcon\n            icon={isPlaying ? 'pause' : 'play'}\n            label={isPlaying ? 'Pause video' : 'Play video'}\n            onClick={handlePlayToggle}\n          />\n\n          <div className=\"video__time\">{formatTime(currentTime)}</div>\n\n          <ProgressBar\n            className=\"video__progress\"\n            mode=\"player\"\n            value={currentTime}\n            buffered={buffered}\n            max={duration || 1}\n            step={1}\n            label=\"Video progress\"\n            onValueChange={handleSeek}\n          />\n\n          <ButtonIcon icon=\"fullscreen\" label=\"Fullscreen\" onClick={handleFullscreen} />\n\n          <div className=\"video__sound-control\" onMouseLeave={() => setIsVolumeOpen(false)}>\n            <ButtonIcon\n              icon={isMuted ? 'sound-off' : 'sound'}\n              label={isMuted ? 'Unmute video' : 'Mute video'}\n              onClick={handleSoundToggle}\n              onMouseEnter={() => setIsVolumeOpen(true)}\n              onFocus={() => setIsVolumeOpen(true)}\n            />\n\n            {hasVolume && (\n              <div className=\"video__volume\">\n                <ProgressBar\n                  mode=\"level\"\n                  value={isMuted ? 0 : volume}\n                  max={1}\n                  step={0.05}\n                  label=\"Volume\"\n                  onValueChange={handleVolumeChange}\n                />\n              </div>\n            )}\n          </div>\n\n          {hasQualityOptions && (\n            <Dropdown\n              align=\"top-end\"\n              value={selectedQuality}\n              options={qualityOptions}\n              label=\"Video quality\"\n              onChange={handleQualityChange}\n              trigger={<ButtonIcon icon=\"settings\" label=\"Video quality\" />}\n            />\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Video;"]}
+{"version":3,"sources":["../../../src/components/video/video.tsx"],"names":["useRef","useState","useEffect","Hls","classnames","jsxs","jsx","ButtonIcon","ProgressBar","Dropdown"],"mappings":"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","file":"video.cjs","sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport Hls from 'hls.js';\n\nimport './video.css';\nimport { classnames } from '../helpers/classnames';\nimport ButtonIcon from '../button-icon';\nimport ProgressBar from '../progressbar';\nimport Dropdown, { type DropdownOption } from '../dropdown';\n\nexport interface VideoQuality {\n  value: string;\n  label: string;\n  src?: string;\n  disabled?: boolean;\n}\n\nexport interface VideoProgressState {\n  currentTime: number;\n  duration: number;\n  completed: boolean;\n}\n\nexport interface VideoPlaybackError {\n  type: 'media' | 'hls';\n  fatal: boolean;\n  error: unknown;\n}\n\nexport interface VideoProps\n  extends Omit<React.VideoHTMLAttributes<HTMLVideoElement>, 'controls' | 'src' | 'poster'> {\n  src?: string;\n  mediaKey?: string;\n  cover?: string;\n  qualities?: VideoQuality[];\n  defaultQuality?: string;\n  label?: string;\n  initialVolume?: number;\n  initialMuted?: boolean;\n  initialTime?: number;\n  progressCommitIntervalSec?: number;\n  onProgressCommit?: (state: VideoProgressState) => void;\n  onQualityChange?: (quality: string) => void;\n  onPlaybackError?: (error: VideoPlaybackError) => void;\n}\n\nfunction getClampedValue(value: number, min: number, max: number) {\n  return Math.min(Math.max(value, min), max);\n}\n\nfunction formatTime(value: number) {\n  if (!Number.isFinite(value)) return '0:00';\n\n  const minutes = Math.floor(value / 60);\n  const seconds = Math.floor(value % 60);\n\n  return `${minutes}:${String(seconds).padStart(2, '0')}`;\n}\n\nfunction getBufferedEnd(video: HTMLVideoElement) {\n  if (video.buffered.length === 0) return 0;\n\n  return video.buffered.end(video.buffered.length - 1);\n}\n\nfunction getVideoSource(\n  src: string | undefined,\n  qualities: VideoQuality[],\n  selectedQuality: string,\n) {\n  const selectedQualityItem = qualities.find(\n    (quality) => quality.value === selectedQuality,\n  );\n\n  return selectedQualityItem?.src ?? src;\n}\n\nfunction getQualityOptions(qualities: VideoQuality[]): DropdownOption[] {\n  return qualities.map((quality) => ({\n    value: quality.value,\n    label: quality.label,\n    disabled: quality.disabled,\n  }));\n}\n\nfunction getVideoProgressState(\n  video: HTMLVideoElement,\n): VideoProgressState {\n  const duration = video.duration || 0;\n  const currentTime = video.currentTime || 0;\n\n  return {\n    currentTime,\n    duration,\n\n    completed:\n      video.ended ||\n      (\n        duration > 0 &&\n        currentTime >= duration * 0.9\n      ),\n  };\n}\n\nconst defaultQualities: VideoQuality[] = [];\n\nconst Video: React.FC<VideoProps> = ({\n  src,\n  mediaKey,\n  cover,\n  qualities = defaultQualities,\n  defaultQuality = '',\n  label = 'Video player',\n  initialVolume = 1,\n  initialMuted = false,\n  initialTime = 0,\n  progressCommitIntervalSec = 15,\n  className = '',\n  autoPlay,\n  loop,\n  muted,\n  playsInline = true,\n  preload = 'metadata',\n  onQualityChange,\n  onPlaybackError,\n  onPlay,\n  onPause,\n  onEnded,\n  onError,\n  onLoadedMetadata,\n  onTimeUpdate,\n  onProgress,\n  onVolumeChange,\n  onProgressCommit,\n  children,\n  ...props\n}) => {\n  const videoRef = useRef<HTMLVideoElement>(null);\n\n  const [isPlaying, setIsPlaying] = useState(false);\n  const [isVolumeOpen, setIsVolumeOpen] = useState(false);\n  const [selectedQuality, setSelectedQuality] = useState(defaultQuality);\n  const [currentTime, setCurrentTime] = useState(0);\n  const [duration, setDuration] = useState(0);\n  const [buffered, setBuffered] = useState(0);\n  const [volume, setVolume] = useState(initialVolume);\n  const [isMuted, setIsMuted] = useState(muted ?? initialMuted);\n\n  const hasAppliedInitialTimeRef = useRef(false);\n  const lastProgressCommitAtRef = useRef(0);\n  const loadedMediaKeyRef = useRef<string | undefined>(undefined);\n  const pendingRestoreTimeRef = useRef<number | null>(null);\n  const onPlaybackErrorRef = useRef(onPlaybackError);\n\n  const videoSrc = getVideoSource(\n    src,\n    qualities,\n    selectedQuality,\n  );\n\n  const effectiveMediaKey = mediaKey ?? videoSrc;\n\n  const qualityOptions = getQualityOptions(qualities);\n  const hasQualityOptions = qualityOptions.length > 0;\n\n  useEffect(() => {\n    onPlaybackErrorRef.current = onPlaybackError;\n  }, [onPlaybackError]);\n\n  useEffect(() => {\n    const video = videoRef.current;\n\n    if (!video || !videoSrc) return;\n\n    const isSameMedia =\n      loadedMediaKeyRef.current !== undefined &&\n      loadedMediaKeyRef.current === effectiveMediaKey;\n\n    if (isSameMedia) {\n      pendingRestoreTimeRef.current = video.currentTime;\n    } else {\n      pendingRestoreTimeRef.current = null;\n      hasAppliedInitialTimeRef.current = false;\n      lastProgressCommitAtRef.current = 0;\n\n      setCurrentTime(0);\n      setDuration(0);\n      setBuffered(0);\n      setIsPlaying(false);\n    }\n\n    loadedMediaKeyRef.current = effectiveMediaKey;\n\n    video.removeAttribute('src');\n    video.load();\n\n    if (video.canPlayType('application/vnd.apple.mpegurl')) {\n      video.src = videoSrc;\n      return;\n    }\n\n    if (!Hls.isSupported()) {\n      video.src = videoSrc;\n      return;\n    }\n\n    const hls = new Hls();\n\n    hls.on(Hls.Events.ERROR, (_, data) => {\n      console.error('HLS error', data);\n\n      onPlaybackErrorRef.current?.({\n        type: 'hls',\n        fatal: data.fatal,\n        error: data,\n      });\n    });\n\n    hls.loadSource(videoSrc);\n    hls.attachMedia(video);\n\n    return () => {\n      hls.destroy();\n    };\n  }, [videoSrc, effectiveMediaKey]);\n\n  const hasStarted = currentTime > 0 || isPlaying;\n  const hasControls = hasStarted;\n  const hasVolume = isVolumeOpen;\n\n  const classes = classnames('video', className, {\n    'video--with-controls': hasControls,\n    'video--with-volume': hasVolume,\n  });\n\n  const syncMediaState = () => {\n    const video = videoRef.current;\n\n    if (!video) return;\n\n    setCurrentTime(video.currentTime);\n    setDuration(video.duration || 0);\n    setBuffered(getBufferedEnd(video));\n    setVolume(video.volume);\n    setIsMuted(video.muted);\n    setIsPlaying(!video.paused);\n  };\n\n  const commitProgress = (\n    video: HTMLVideoElement,\n  ) => {\n    if (!onProgressCommit) {\n      return;\n    }\n\n    onProgressCommit(\n      getVideoProgressState(video),\n    );\n  };\n\n  const handlePlayToggle = async () => {\n    const video = videoRef.current;\n\n    if (!video) return;\n\n    console.log('play click', {\n      paused: video.paused,\n      readyState: video.readyState,\n      src: video.currentSrc,\n      networkState: video.networkState,\n      error: video.error,\n    });\n\n    if (video.paused) {\n      try {\n        await video.play();\n        console.log('play success');\n      } catch (error) {\n        console.error('play failed', error);\n      }\n\n      return;\n    }\n\n    video.pause();\n  };\n\n  const handleSeek = (nextValue: number) => {\n    const video = videoRef.current;\n\n    if (!video) return;\n\n    video.currentTime = getClampedValue(\n      nextValue,\n      0,\n      duration,\n    );\n\n    setCurrentTime(video.currentTime);\n  };\n\n  const handleVolumeChange = (nextValue: number) => {\n    const video = videoRef.current;\n\n    if (!video) return;\n\n    const nextVolume = getClampedValue(\n      nextValue,\n      0,\n      1,\n    );\n\n    video.volume = nextVolume;\n    video.muted = nextVolume === 0;\n\n    setVolume(nextVolume);\n    setIsMuted(video.muted);\n  };\n\n  const handleSoundToggle = () => {\n    const video = videoRef.current;\n\n    if (!video) return;\n\n    video.muted = !video.muted;\n    setIsMuted(video.muted);\n  };\n\n  const handleFullscreen = () => {\n    const video = videoRef.current;\n\n    if (!video) return;\n\n    video.requestFullscreen?.();\n  };\n\n  const handleQualityChange = (quality: string) => {\n    setSelectedQuality(quality);\n    onQualityChange?.(quality);\n  };\n\n  const handleLoadedMetadata = (\n    event: React.SyntheticEvent<HTMLVideoElement>,\n  ) => {\n    const video = event.currentTarget;\n\n    if (pendingRestoreTimeRef.current !== null) {\n      video.currentTime = Math.min(\n        pendingRestoreTimeRef.current,\n        video.duration || pendingRestoreTimeRef.current,\n      );\n\n      pendingRestoreTimeRef.current = null;\n    } else if (\n      !hasAppliedInitialTimeRef.current &&\n      initialTime > 0\n    ) {\n      video.currentTime = Math.min(\n        initialTime,\n        video.duration || initialTime,\n      );\n\n      hasAppliedInitialTimeRef.current = true;\n    }\n\n    syncMediaState();\n\n    onLoadedMetadata?.(event);\n  };\n\n  const handleTimeUpdate = (\n    event: React.SyntheticEvent<HTMLVideoElement>,\n  ) => {\n    const video = event.currentTarget;\n\n    syncMediaState();\n\n    if (\n      onProgressCommit &&\n      (\n        video.currentTime -\n        lastProgressCommitAtRef.current\n      ) >= progressCommitIntervalSec\n    ) {\n      lastProgressCommitAtRef.current =\n        video.currentTime;\n\n      commitProgress(video);\n    }\n\n    onTimeUpdate?.(event);\n  };\n\n  const handleProgress = (\n    event: React.SyntheticEvent<HTMLVideoElement>,\n  ) => {\n    syncMediaState();\n    onProgress?.(event);\n  };\n\n  const handlePlay = (\n    event: React.SyntheticEvent<HTMLVideoElement>,\n  ) => {\n    setIsPlaying(true);\n    onPlay?.(event);\n  };\n\n  const handlePause = (\n    event: React.SyntheticEvent<HTMLVideoElement>,\n  ) => {\n    setIsPlaying(false);\n\n    commitProgress(event.currentTarget);\n\n    onPause?.(event);\n  };\n\n  const handleEnded = (\n    event: React.SyntheticEvent<HTMLVideoElement>,\n  ) => {\n    syncMediaState();\n\n    commitProgress(event.currentTarget);\n\n    onEnded?.(event);\n  };\n\n  const handleNativeError = (\n    event: React.SyntheticEvent<HTMLVideoElement>,\n  ) => {\n    onPlaybackError?.({\n      type: 'media',\n      fatal: true,\n      error: event.currentTarget.error ?? event,\n    });\n\n    onError?.(event);\n  };\n\n  const handleNativeVolumeChange = (\n    event: React.SyntheticEvent<HTMLVideoElement>,\n  ) => {\n    syncMediaState();\n    onVolumeChange?.(event);\n  };\n\n  return (\n    <div\n      className={classes}\n      aria-label={label}\n    >\n      <div className=\"video__surface\">\n        {cover && !hasStarted ? (\n          <img\n            className=\"video__cover\"\n            src={cover}\n            alt=\"\"\n            aria-hidden=\"true\"\n          />\n        ) : null}\n\n        <video\n          {...props}\n          ref={videoRef}\n          className=\"video__media\"\n          poster={cover}\n          autoPlay={autoPlay}\n          loop={loop}\n          muted={isMuted}\n          playsInline={playsInline}\n          preload={preload}\n          controls={false}\n          onLoadedMetadata={handleLoadedMetadata}\n          onTimeUpdate={handleTimeUpdate}\n          onProgress={handleProgress}\n          onPlay={handlePlay}\n          onPause={handlePause}\n          onEnded={handleEnded}\n          onError={handleNativeError}\n          onVolumeChange={handleNativeVolumeChange}\n        >\n          {children}\n        </video>\n\n        {!hasStarted && (\n          <ButtonIcon\n            className=\"video__main-action\"\n            icon=\"play\"\n            label=\"Play video\"\n            onClick={handlePlayToggle}\n          />\n        )}\n      </div>\n\n      {hasControls && (\n        <div className=\"video__controls\">\n          <ButtonIcon\n            icon={isPlaying ? 'pause' : 'play'}\n            label={isPlaying ? 'Pause video' : 'Play video'}\n            onClick={handlePlayToggle}\n          />\n\n          <div className=\"video__time\">\n            {formatTime(currentTime)}\n          </div>\n\n          <ProgressBar\n            className=\"video__progress\"\n            mode=\"player\"\n            value={currentTime}\n            buffered={buffered}\n            max={duration || 1}\n            step={1}\n            label=\"Video progress\"\n            onValueChange={handleSeek}\n          />\n\n          <ButtonIcon\n            icon=\"fullscreen\"\n            label=\"Fullscreen\"\n            onClick={handleFullscreen}\n          />\n\n          <div\n            className=\"video__sound-control\"\n            onMouseLeave={() => setIsVolumeOpen(false)}\n          >\n            <ButtonIcon\n              icon={isMuted ? 'sound-off' : 'sound'}\n              label={isMuted ? 'Unmute video' : 'Mute video'}\n              onClick={handleSoundToggle}\n              onMouseEnter={() => setIsVolumeOpen(true)}\n              onFocus={() => setIsVolumeOpen(true)}\n            />\n\n            {hasVolume && (\n              <div className=\"video__volume\">\n                <ProgressBar\n                  mode=\"level\"\n                  value={isMuted ? 0 : volume}\n                  max={1}\n                  step={0.05}\n                  label=\"Volume\"\n                  onValueChange={handleVolumeChange}\n                />\n              </div>\n            )}\n          </div>\n\n          {hasQualityOptions && (\n            <Dropdown\n              align=\"top-end\"\n              value={selectedQuality}\n              options={qualityOptions}\n              label=\"Video quality\"\n              onChange={handleQualityChange}\n              trigger={\n                <ButtonIcon\n                  icon=\"settings\"\n                  label=\"Video quality\"\n                />\n              }\n            />\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Video;"]}

package/components/video/video.d.cts

@@ -11,8 +11,14 @@ interface VideoProgressState {
     duration: number;
     completed: boolean;
 }
+interface VideoPlaybackError {
+    type: 'media' | 'hls';
+    fatal: boolean;
+    error: unknown;
+}
 interface VideoProps extends Omit<React.VideoHTMLAttributes<HTMLVideoElement>, 'controls' | 'src' | 'poster'> {
     src?: string;
+    mediaKey?: string;
     cover?: string;
     qualities?: VideoQuality[];
     defaultQuality?: string;
@@ -23,7 +29,8 @@ interface VideoProps extends Omit<React.VideoHTMLAttributes<HTMLVideoElement>, '
     progressCommitIntervalSec?: number;
     onProgressCommit?: (state: VideoProgressState) => void;
     onQualityChange?: (quality: string) => void;
+    onPlaybackError?: (error: VideoPlaybackError) => void;
 }
 declare const Video: React.FC<VideoProps>;
 
-export { type VideoProgressState, type VideoProps, type VideoQuality, Video as default };
+export { type VideoPlaybackError, type VideoProgressState, type VideoProps, type VideoQuality, Video as default };

package/components/video/video.d.ts

@@ -11,8 +11,14 @@ interface VideoProgressState {
     duration: number;
     completed: boolean;
 }
+interface VideoPlaybackError {
+    type: 'media' | 'hls';
+    fatal: boolean;
+    error: unknown;
+}
 interface VideoProps extends Omit<React.VideoHTMLAttributes<HTMLVideoElement>, 'controls' | 'src' | 'poster'> {
     src?: string;
+    mediaKey?: string;
     cover?: string;
     qualities?: VideoQuality[];
     defaultQuality?: string;
@@ -23,7 +29,8 @@ interface VideoProps extends Omit<React.VideoHTMLAttributes<HTMLVideoElement>, '
     progressCommitIntervalSec?: number;
     onProgressCommit?: (state: VideoProgressState) => void;
     onQualityChange?: (quality: string) => void;
+    onPlaybackError?: (error: VideoPlaybackError) => void;
 }
 declare const Video: React.FC<VideoProps>;
 
-export { type VideoProgressState, type VideoProps, type VideoQuality, Video as default };
+export { type VideoPlaybackError, type VideoProgressState, type VideoProps, type VideoQuality, Video as default };

package/components/video/video.js

@@ -21,7 +21,9 @@ function getBufferedEnd(video) {
   return video.buffered.end(video.buffered.length - 1);
 }
 function getVideoSource(src, qualities, selectedQuality) {
-  const selectedQualityItem = qualities.find((quality) => quality.value === selectedQuality);
+  const selectedQualityItem = qualities.find(
+    (quality) => quality.value === selectedQuality
+  );
   return selectedQualityItem?.src ?? src;
 }
 function getQualityOptions(qualities) {
@@ -43,6 +45,7 @@ function getVideoProgressState(video) {
 const defaultQualities = [];
 const Video = ({
   src,
+  mediaKey,
   cover,
   qualities = defaultQualities,
   defaultQuality = "",
@@ -58,9 +61,11 @@ const Video = ({
   playsInline = true,
   preload = "metadata",
   onQualityChange,
+  onPlaybackError,
   onPlay,
   onPause,
   onEnded,
+  onError,
   onLoadedMetadata,
   onTimeUpdate,
   onProgress,
@@ -80,14 +85,36 @@ const Video = ({
   const [isMuted, setIsMuted] = useState(muted ?? initialMuted);
   const hasAppliedInitialTimeRef = useRef(false);
   const lastProgressCommitAtRef = useRef(0);
-  const videoSrc = getVideoSource(src, qualities, selectedQuality);
+  const loadedMediaKeyRef = useRef(void 0);
+  const pendingRestoreTimeRef = useRef(null);
+  const onPlaybackErrorRef = useRef(onPlaybackError);
+  const videoSrc = getVideoSource(
+    src,
+    qualities,
+    selectedQuality
+  );
+  const effectiveMediaKey = mediaKey ?? videoSrc;
   const qualityOptions = getQualityOptions(qualities);
   const hasQualityOptions = qualityOptions.length > 0;
+  useEffect(() => {
+    onPlaybackErrorRef.current = onPlaybackError;
+  }, [onPlaybackError]);
   useEffect(() => {
     const video = videoRef.current;
-    hasAppliedInitialTimeRef.current = false;
-    lastProgressCommitAtRef.current = 0;
     if (!video || !videoSrc) return;
+    const isSameMedia = loadedMediaKeyRef.current !== void 0 && loadedMediaKeyRef.current === effectiveMediaKey;
+    if (isSameMedia) {
+      pendingRestoreTimeRef.current = video.currentTime;
+    } else {
+      pendingRestoreTimeRef.current = null;
+      hasAppliedInitialTimeRef.current = false;
+      lastProgressCommitAtRef.current = 0;
+      setCurrentTime(0);
+      setDuration(0);
+      setBuffered(0);
+      setIsPlaying(false);
+    }
+    loadedMediaKeyRef.current = effectiveMediaKey;
     video.removeAttribute("src");
     video.load();
     if (video.canPlayType("application/vnd.apple.mpegurl")) {
@@ -101,13 +128,18 @@ const Video = ({
     const hls = new Hls();
     hls.on(Hls.Events.ERROR, (_, data) => {
       console.error("HLS error", data);
+      onPlaybackErrorRef.current?.({
+        type: "hls",
+        fatal: data.fatal,
+        error: data
+      });
     });
     hls.loadSource(videoSrc);
     hls.attachMedia(video);
     return () => {
       hls.destroy();
     };
-  }, [videoSrc]);
+  }, [videoSrc, effectiveMediaKey]);
   const hasStarted = currentTime > 0 || isPlaying;
   const hasControls = hasStarted;
   const hasVolume = isVolumeOpen;
@@ -157,13 +189,21 @@ const Video = ({
   const handleSeek = (nextValue) => {
     const video = videoRef.current;
     if (!video) return;
-    video.currentTime = getClampedValue(nextValue, 0, duration);
+    video.currentTime = getClampedValue(
+      nextValue,
+      0,
+      duration
+    );
     setCurrentTime(video.currentTime);
   };
   const handleVolumeChange = (nextValue) => {
     const video = videoRef.current;
     if (!video) return;
-    const nextVolume = getClampedValue(nextValue, 0, 1);
+    const nextVolume = getClampedValue(
+      nextValue,
+      0,
+      1
+    );
     video.volume = nextVolume;
     video.muted = nextVolume === 0;
     setVolume(nextVolume);
@@ -186,7 +226,13 @@ const Video = ({
   };
   const handleLoadedMetadata = (event) => {
     const video = event.currentTarget;
-    if (!hasAppliedInitialTimeRef.current && initialTime > 0) {
+    if (pendingRestoreTimeRef.current !== null) {
+      video.currentTime = Math.min(
+        pendingRestoreTimeRef.current,
+        video.duration || pendingRestoreTimeRef.current
+      );
+      pendingRestoreTimeRef.current = null;
+    } else if (!hasAppliedInitialTimeRef.current && initialTime > 0) {
       video.currentTime = Math.min(
         initialTime,
         video.duration || initialTime
@@ -223,114 +269,150 @@ const Video = ({
     commitProgress(event.currentTarget);
     onEnded?.(event);
   };
+  const handleNativeError = (event) => {
+    onPlaybackError?.({
+      type: "media",
+      fatal: true,
+      error: event.currentTarget.error ?? event
+    });
+    onError?.(event);
+  };
   const handleNativeVolumeChange = (event) => {
     syncMediaState();
     onVolumeChange?.(event);
   };
-  return /* @__PURE__ */ jsxs("div", { className: classes, "aria-label": label, children: [
-    /* @__PURE__ */ jsxs("div", { className: "video__surface", children: [
-      cover && !hasStarted ? /* @__PURE__ */ jsx(
-        "img",
-        {
-          className: "video__cover",
-          src: cover,
-          alt: "",
-          "aria-hidden": "true"
-        }
-      ) : null,
-      /* @__PURE__ */ jsx(
-        "video",
-        {
-          ...props,
-          ref: videoRef,
-          className: "video__media",
-          poster: cover,
-          autoPlay,
-          loop,
-          muted: isMuted,
-          playsInline,
-          preload,
-          controls: false,
-          onLoadedMetadata: handleLoadedMetadata,
-          onTimeUpdate: handleTimeUpdate,
-          onProgress: handleProgress,
-          onPlay: handlePlay,
-          onPause: handlePause,
-          onEnded: handleEnded,
-          onVolumeChange: handleNativeVolumeChange,
-          children
-        }
-      ),
-      !hasStarted && /* @__PURE__ */ jsx(
-        ButtonIcon,
-        {
-          className: "video__main-action",
-          icon: "play",
-          label: "Play video",
-          onClick: handlePlayToggle
-        }
-      )
-    ] }),
-    hasControls && /* @__PURE__ */ jsxs("div", { className: "video__controls", children: [
-      /* @__PURE__ */ jsx(
-        ButtonIcon,
-        {
-          icon: isPlaying ? "pause" : "play",
-          label: isPlaying ? "Pause video" : "Play video",
-          onClick: handlePlayToggle
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "video__time", children: formatTime(currentTime) }),
-      /* @__PURE__ */ jsx(
-        ProgressBar,
-        {
-          className: "video__progress",
-          mode: "player",
-          value: currentTime,
-          buffered,
-          max: duration || 1,
-          step: 1,
-          label: "Video progress",
-          onValueChange: handleSeek
-        }
-      ),
-      /* @__PURE__ */ jsx(ButtonIcon, { icon: "fullscreen", label: "Fullscreen", onClick: handleFullscreen }),
-      /* @__PURE__ */ jsxs("div", { className: "video__sound-control", onMouseLeave: () => setIsVolumeOpen(false), children: [
-        /* @__PURE__ */ jsx(
-          ButtonIcon,
-          {
-            icon: isMuted ? "sound-off" : "sound",
-            label: isMuted ? "Unmute video" : "Mute video",
-            onClick: handleSoundToggle,
-            onMouseEnter: () => setIsVolumeOpen(true),
-            onFocus: () => setIsVolumeOpen(true)
-          }
-        ),
-        hasVolume && /* @__PURE__ */ jsx("div", { className: "video__volume", children: /* @__PURE__ */ jsx(
-          ProgressBar,
-          {
-            mode: "level",
-            value: isMuted ? 0 : volume,
-            max: 1,
-            step: 0.05,
-            label: "Volume",
-            onValueChange: handleVolumeChange
-          }
-        ) })
-      ] }),
-      hasQualityOptions && /* @__PURE__ */ jsx(
-        Dropdown,
-        {
-          align: "top-end",
-          value: selectedQuality,
-          options: qualityOptions,
-          label: "Video quality",
-          onChange: handleQualityChange,
-          trigger: /* @__PURE__ */ jsx(ButtonIcon, { icon: "settings", label: "Video quality" })
-        }
-      )
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classes,
+      "aria-label": label,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "video__surface", children: [
+          cover && !hasStarted ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              className: "video__cover",
+              src: cover,
+              alt: "",
+              "aria-hidden": "true"
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            "video",
+            {
+              ...props,
+              ref: videoRef,
+              className: "video__media",
+              poster: cover,
+              autoPlay,
+              loop,
+              muted: isMuted,
+              playsInline,
+              preload,
+              controls: false,
+              onLoadedMetadata: handleLoadedMetadata,
+              onTimeUpdate: handleTimeUpdate,
+              onProgress: handleProgress,
+              onPlay: handlePlay,
+              onPause: handlePause,
+              onEnded: handleEnded,
+              onError: handleNativeError,
+              onVolumeChange: handleNativeVolumeChange,
+              children
+            }
+          ),
+          !hasStarted && /* @__PURE__ */ jsx(
+            ButtonIcon,
+            {
+              className: "video__main-action",
+              icon: "play",
+              label: "Play video",
+              onClick: handlePlayToggle
+            }
+          )
+        ] }),
+        hasControls && /* @__PURE__ */ jsxs("div", { className: "video__controls", children: [
+          /* @__PURE__ */ jsx(
+            ButtonIcon,
+            {
+              icon: isPlaying ? "pause" : "play",
+              label: isPlaying ? "Pause video" : "Play video",
+              onClick: handlePlayToggle
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "video__time", children: formatTime(currentTime) }),
+          /* @__PURE__ */ jsx(
+            ProgressBar,
+            {
+              className: "video__progress",
+              mode: "player",
+              value: currentTime,
+              buffered,
+              max: duration || 1,
+              step: 1,
+              label: "Video progress",
+              onValueChange: handleSeek
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ButtonIcon,
+            {
+              icon: "fullscreen",
+              label: "Fullscreen",
+              onClick: handleFullscreen
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "video__sound-control",
+              onMouseLeave: () => setIsVolumeOpen(false),
+              children: [
+                /* @__PURE__ */ jsx(
+                  ButtonIcon,
+                  {
+                    icon: isMuted ? "sound-off" : "sound",
+                    label: isMuted ? "Unmute video" : "Mute video",
+                    onClick: handleSoundToggle,
+                    onMouseEnter: () => setIsVolumeOpen(true),
+                    onFocus: () => setIsVolumeOpen(true)
+                  }
+                ),
+                hasVolume && /* @__PURE__ */ jsx("div", { className: "video__volume", children: /* @__PURE__ */ jsx(
+                  ProgressBar,
+                  {
+                    mode: "level",
+                    value: isMuted ? 0 : volume,
+                    max: 1,
+                    step: 0.05,
+                    label: "Volume",
+                    onValueChange: handleVolumeChange
+                  }
+                ) })
+              ]
+            }
+          ),
+          hasQualityOptions && /* @__PURE__ */ jsx(
+            Dropdown,
+            {
+              align: "top-end",
+              value: selectedQuality,
+              options: qualityOptions,
+              label: "Video quality",
+              onChange: handleQualityChange,
+              trigger: /* @__PURE__ */ jsx(
+                ButtonIcon,
+                {
+                  icon: "settings",
+                  label: "Video quality"
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
 };
 var video_default = Video;
 

package/components/video/video.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/video/video.tsx"],"names":[],"mappings":"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","file":"video.js","sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport Hls from 'hls.js';\n\nimport './video.css';\nimport { classnames } from '../helpers/classnames';\nimport ButtonIcon from '../button-icon';\nimport ProgressBar from '../progressbar';\nimport Dropdown, { type DropdownOption } from '../dropdown';\n\nexport interface VideoQuality {\n  value: string;\n  label: string;\n  src?: string;\n  disabled?: boolean;\n}\n\nexport interface VideoProgressState {\n  currentTime: number;\n  duration: number;\n  completed: boolean;\n}\n\nexport interface VideoProps\n  extends Omit<React.VideoHTMLAttributes<HTMLVideoElement>, 'controls' | 'src' | 'poster'> {\n  src?: string;\n  cover?: string;\n  qualities?: VideoQuality[];\n  defaultQuality?: string;\n  label?: string;\n  initialVolume?: number;\n  initialMuted?: boolean;\n  initialTime?: number;\n  progressCommitIntervalSec?: number;\n  onProgressCommit?: (state: VideoProgressState) => void;\n  onQualityChange?: (quality: string) => void;\n}\n\nfunction getClampedValue(value: number, min: number, max: number) {\n  return Math.min(Math.max(value, min), max);\n}\n\nfunction formatTime(value: number) {\n  if (!Number.isFinite(value)) return '0:00';\n\n  const minutes = Math.floor(value / 60);\n  const seconds = Math.floor(value % 60);\n\n  return `${minutes}:${String(seconds).padStart(2, '0')}`;\n}\n\nfunction getBufferedEnd(video: HTMLVideoElement) {\n  if (video.buffered.length === 0) return 0;\n\n  return video.buffered.end(video.buffered.length - 1);\n}\n\nfunction getVideoSource(src: string | undefined, qualities: VideoQuality[], selectedQuality: string) {\n  const selectedQualityItem = qualities.find((quality) => quality.value === selectedQuality);\n\n  return selectedQualityItem?.src ?? src;\n}\n\nfunction getQualityOptions(qualities: VideoQuality[]): DropdownOption[] {\n  return qualities.map((quality) => ({\n    value: quality.value,\n    label: quality.label,\n    disabled: quality.disabled,\n  }));\n}\n\nfunction getVideoProgressState(\n  video: HTMLVideoElement,\n): VideoProgressState {\n  const duration = video.duration || 0;\n  const currentTime = video.currentTime || 0;\n\n  return {\n    currentTime,\n    duration,\n\n    completed:\n      video.ended ||\n      (\n        duration > 0 &&\n        currentTime >= duration * 0.9\n      ),\n  };\n}\n\nconst defaultQualities: VideoQuality[] = [];\n\nconst Video: React.FC<VideoProps> = ({\n  src,\n  cover,\n  qualities = defaultQualities,\n  defaultQuality = '',\n  label = 'Video player',\n  initialVolume = 1,\n  initialMuted = false,\n  initialTime = 0,\n  progressCommitIntervalSec = 15,\n  className = '',\n  autoPlay,\n  loop,\n  muted,\n  playsInline = true,\n  preload = 'metadata',\n  onQualityChange,\n  onPlay,\n  onPause,\n  onEnded,\n  onLoadedMetadata,\n  onTimeUpdate,\n  onProgress,\n  onVolumeChange,\n  onProgressCommit,\n  children,\n  ...props\n}) => {\n  const videoRef = useRef<HTMLVideoElement>(null);\n\n  const [isPlaying, setIsPlaying] = useState(false);\n  const [isVolumeOpen, setIsVolumeOpen] = useState(false);\n  const [selectedQuality, setSelectedQuality] = useState(defaultQuality);\n  const [currentTime, setCurrentTime] = useState(0);\n  const [duration, setDuration] = useState(0);\n  const [buffered, setBuffered] = useState(0);\n  const [volume, setVolume] = useState(initialVolume);\n  const [isMuted, setIsMuted] = useState(muted ?? initialMuted);\n\n  const hasAppliedInitialTimeRef = useRef(false);\n  const lastProgressCommitAtRef = useRef(0);\n\n  const videoSrc = getVideoSource(src, qualities, selectedQuality);\n  const qualityOptions = getQualityOptions(qualities);\n  const hasQualityOptions = qualityOptions.length > 0;\n\n  useEffect(() => {\n    const video = videoRef.current;\n\n    hasAppliedInitialTimeRef.current = false;\n    lastProgressCommitAtRef.current = 0;\n\n    if (!video || !videoSrc) return;\n\n    video.removeAttribute('src');\n    video.load();\n\n    if (video.canPlayType('application/vnd.apple.mpegurl')) {\n      video.src = videoSrc;\n      return;\n    }\n\n    if (!Hls.isSupported()) {\n      video.src = videoSrc;\n      return;\n    }\n\n    const hls = new Hls();\n\n    hls.on(Hls.Events.ERROR, (_, data) => {\n      console.error('HLS error', data);\n    });\n\n    hls.loadSource(videoSrc);\n    hls.attachMedia(video);\n\n    return () => {\n      hls.destroy();\n    };\n  }, [videoSrc]);\n\n  const hasStarted = currentTime > 0 || isPlaying;\n  const hasControls = hasStarted;\n  const hasVolume = isVolumeOpen;\n\n  const classes = classnames('video', className, {\n    'video--with-controls': hasControls,\n    'video--with-volume': hasVolume,\n  });\n\n  const syncMediaState = () => {\n    const video = videoRef.current;\n\n    if (!video) return;\n\n    setCurrentTime(video.currentTime);\n    setDuration(video.duration || 0);\n    setBuffered(getBufferedEnd(video));\n    setVolume(video.volume);\n    setIsMuted(video.muted);\n    setIsPlaying(!video.paused);\n  };\n\n  const commitProgress = (\n    video: HTMLVideoElement,\n  ) => {\n    if (!onProgressCommit) {\n      return;\n    }\n\n    onProgressCommit(\n      getVideoProgressState(video),\n    );\n  };\n\n  const handlePlayToggle = async () => {\n    const video = videoRef.current;\n\n    if (!video) return;\n\n    console.log('play click', {\n      paused: video.paused,\n      readyState: video.readyState,\n      src: video.currentSrc,\n      networkState: video.networkState,\n      error: video.error,\n    });\n\n    if (video.paused) {\n      try {\n        await video.play();\n        console.log('play success');\n      } catch (error) {\n        console.error('play failed', error);\n      }\n\n      return;\n    }\n\n    video.pause();\n  };\n\n  const handleSeek = (nextValue: number) => {\n    const video = videoRef.current;\n\n    if (!video) return;\n\n    video.currentTime = getClampedValue(nextValue, 0, duration);\n    setCurrentTime(video.currentTime);\n  };\n\n  const handleVolumeChange = (nextValue: number) => {\n    const video = videoRef.current;\n\n    if (!video) return;\n\n    const nextVolume = getClampedValue(nextValue, 0, 1);\n\n    video.volume = nextVolume;\n    video.muted = nextVolume === 0;\n\n    setVolume(nextVolume);\n    setIsMuted(video.muted);\n  };\n\n  const handleSoundToggle = () => {\n    const video = videoRef.current;\n\n    if (!video) return;\n\n    video.muted = !video.muted;\n    setIsMuted(video.muted);\n  };\n\n  const handleFullscreen = () => {\n    const video = videoRef.current;\n\n    if (!video) return;\n\n    video.requestFullscreen?.();\n  };\n\n  const handleQualityChange = (quality: string) => {\n    setSelectedQuality(quality);\n    onQualityChange?.(quality);\n  };\n\n  const handleLoadedMetadata = (\n    event: React.SyntheticEvent<HTMLVideoElement>,\n  ) => {\n    const video = event.currentTarget;\n\n    if (\n      !hasAppliedInitialTimeRef.current &&\n      initialTime > 0\n    ) {\n      video.currentTime = Math.min(\n        initialTime,\n        video.duration || initialTime,\n      );\n\n      hasAppliedInitialTimeRef.current = true;\n    }\n\n    syncMediaState();\n\n    onLoadedMetadata?.(event);\n  };\n\n  const handleTimeUpdate = (\n    event: React.SyntheticEvent<HTMLVideoElement>,\n  ) => {\n    const video = event.currentTarget;\n\n    syncMediaState();\n\n    if (\n      onProgressCommit &&\n      (\n        video.currentTime -\n        lastProgressCommitAtRef.current\n      ) >= progressCommitIntervalSec\n    ) {\n      lastProgressCommitAtRef.current =\n        video.currentTime;\n\n      commitProgress(video);\n    }\n\n    onTimeUpdate?.(event);\n  };\n\n  const handleProgress = (event: React.SyntheticEvent<HTMLVideoElement>) => {\n    syncMediaState();\n    onProgress?.(event);\n  };\n\n  const handlePlay = (event: React.SyntheticEvent<HTMLVideoElement>) => {\n    setIsPlaying(true);\n    onPlay?.(event);\n  };\n\n  const handlePause = (\n    event: React.SyntheticEvent<HTMLVideoElement>,\n  ) => {\n    setIsPlaying(false);\n\n    commitProgress(event.currentTarget);\n\n    onPause?.(event);\n  };\n\n  const handleEnded = (\n    event: React.SyntheticEvent<HTMLVideoElement>,\n  ) => {\n    syncMediaState();\n\n    commitProgress(event.currentTarget);\n\n    onEnded?.(event);\n  };\n\n  const handleNativeVolumeChange = (event: React.SyntheticEvent<HTMLVideoElement>) => {\n    syncMediaState();\n    onVolumeChange?.(event);\n  };\n\n  return (\n    <div className={classes} aria-label={label}>\n      <div className=\"video__surface\">\n        {cover && !hasStarted ? (\n          <img\n            className=\"video__cover\"\n            src={cover}\n            alt=\"\"\n            aria-hidden=\"true\"\n          />\n        ) : null}\n\n        <video\n          {...props}\n          ref={videoRef}\n          className=\"video__media\"\n          poster={cover}\n          autoPlay={autoPlay}\n          loop={loop}\n          muted={isMuted}\n          playsInline={playsInline}\n          preload={preload}\n          controls={false}\n          onLoadedMetadata={handleLoadedMetadata}\n          onTimeUpdate={handleTimeUpdate}\n          onProgress={handleProgress}\n          onPlay={handlePlay}\n          onPause={handlePause}\n          onEnded={handleEnded}\n          onVolumeChange={handleNativeVolumeChange}\n        >\n          {children}\n        </video>\n\n        {!hasStarted && (\n          <ButtonIcon\n            className=\"video__main-action\"\n            icon=\"play\"\n            label=\"Play video\"\n            onClick={handlePlayToggle}\n          />\n        )}\n      </div>\n\n      {hasControls && (\n        <div className=\"video__controls\">\n          <ButtonIcon\n            icon={isPlaying ? 'pause' : 'play'}\n            label={isPlaying ? 'Pause video' : 'Play video'}\n            onClick={handlePlayToggle}\n          />\n\n          <div className=\"video__time\">{formatTime(currentTime)}</div>\n\n          <ProgressBar\n            className=\"video__progress\"\n            mode=\"player\"\n            value={currentTime}\n            buffered={buffered}\n            max={duration || 1}\n            step={1}\n            label=\"Video progress\"\n            onValueChange={handleSeek}\n          />\n\n          <ButtonIcon icon=\"fullscreen\" label=\"Fullscreen\" onClick={handleFullscreen} />\n\n          <div className=\"video__sound-control\" onMouseLeave={() => setIsVolumeOpen(false)}>\n            <ButtonIcon\n              icon={isMuted ? 'sound-off' : 'sound'}\n              label={isMuted ? 'Unmute video' : 'Mute video'}\n              onClick={handleSoundToggle}\n              onMouseEnter={() => setIsVolumeOpen(true)}\n              onFocus={() => setIsVolumeOpen(true)}\n            />\n\n            {hasVolume && (\n              <div className=\"video__volume\">\n                <ProgressBar\n                  mode=\"level\"\n                  value={isMuted ? 0 : volume}\n                  max={1}\n                  step={0.05}\n                  label=\"Volume\"\n                  onValueChange={handleVolumeChange}\n                />\n              </div>\n            )}\n          </div>\n\n          {hasQualityOptions && (\n            <Dropdown\n              align=\"top-end\"\n              value={selectedQuality}\n              options={qualityOptions}\n              label=\"Video quality\"\n              onChange={handleQualityChange}\n              trigger={<ButtonIcon icon=\"settings\" label=\"Video quality\" />}\n            />\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Video;"]}
+{"version":3,"sources":["../../../src/components/video/video.tsx"],"names":[],"mappings":"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","file":"video.js","sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport Hls from 'hls.js';\n\nimport './video.css';\nimport { classnames } from '../helpers/classnames';\nimport ButtonIcon from '../button-icon';\nimport ProgressBar from '../progressbar';\nimport Dropdown, { type DropdownOption } from '../dropdown';\n\nexport interface VideoQuality {\n  value: string;\n  label: string;\n  src?: string;\n  disabled?: boolean;\n}\n\nexport interface VideoProgressState {\n  currentTime: number;\n  duration: number;\n  completed: boolean;\n}\n\nexport interface VideoPlaybackError {\n  type: 'media' | 'hls';\n  fatal: boolean;\n  error: unknown;\n}\n\nexport interface VideoProps\n  extends Omit<React.VideoHTMLAttributes<HTMLVideoElement>, 'controls' | 'src' | 'poster'> {\n  src?: string;\n  mediaKey?: string;\n  cover?: string;\n  qualities?: VideoQuality[];\n  defaultQuality?: string;\n  label?: string;\n  initialVolume?: number;\n  initialMuted?: boolean;\n  initialTime?: number;\n  progressCommitIntervalSec?: number;\n  onProgressCommit?: (state: VideoProgressState) => void;\n  onQualityChange?: (quality: string) => void;\n  onPlaybackError?: (error: VideoPlaybackError) => void;\n}\n\nfunction getClampedValue(value: number, min: number, max: number) {\n  return Math.min(Math.max(value, min), max);\n}\n\nfunction formatTime(value: number) {\n  if (!Number.isFinite(value)) return '0:00';\n\n  const minutes = Math.floor(value / 60);\n  const seconds = Math.floor(value % 60);\n\n  return `${minutes}:${String(seconds).padStart(2, '0')}`;\n}\n\nfunction getBufferedEnd(video: HTMLVideoElement) {\n  if (video.buffered.length === 0) return 0;\n\n  return video.buffered.end(video.buffered.length - 1);\n}\n\nfunction getVideoSource(\n  src: string | undefined,\n  qualities: VideoQuality[],\n  selectedQuality: string,\n) {\n  const selectedQualityItem = qualities.find(\n    (quality) => quality.value === selectedQuality,\n  );\n\n  return selectedQualityItem?.src ?? src;\n}\n\nfunction getQualityOptions(qualities: VideoQuality[]): DropdownOption[] {\n  return qualities.map((quality) => ({\n    value: quality.value,\n    label: quality.label,\n    disabled: quality.disabled,\n  }));\n}\n\nfunction getVideoProgressState(\n  video: HTMLVideoElement,\n): VideoProgressState {\n  const duration = video.duration || 0;\n  const currentTime = video.currentTime || 0;\n\n  return {\n    currentTime,\n    duration,\n\n    completed:\n      video.ended ||\n      (\n        duration > 0 &&\n        currentTime >= duration * 0.9\n      ),\n  };\n}\n\nconst defaultQualities: VideoQuality[] = [];\n\nconst Video: React.FC<VideoProps> = ({\n  src,\n  mediaKey,\n  cover,\n  qualities = defaultQualities,\n  defaultQuality = '',\n  label = 'Video player',\n  initialVolume = 1,\n  initialMuted = false,\n  initialTime = 0,\n  progressCommitIntervalSec = 15,\n  className = '',\n  autoPlay,\n  loop,\n  muted,\n  playsInline = true,\n  preload = 'metadata',\n  onQualityChange,\n  onPlaybackError,\n  onPlay,\n  onPause,\n  onEnded,\n  onError,\n  onLoadedMetadata,\n  onTimeUpdate,\n  onProgress,\n  onVolumeChange,\n  onProgressCommit,\n  children,\n  ...props\n}) => {\n  const videoRef = useRef<HTMLVideoElement>(null);\n\n  const [isPlaying, setIsPlaying] = useState(false);\n  const [isVolumeOpen, setIsVolumeOpen] = useState(false);\n  const [selectedQuality, setSelectedQuality] = useState(defaultQuality);\n  const [currentTime, setCurrentTime] = useState(0);\n  const [duration, setDuration] = useState(0);\n  const [buffered, setBuffered] = useState(0);\n  const [volume, setVolume] = useState(initialVolume);\n  const [isMuted, setIsMuted] = useState(muted ?? initialMuted);\n\n  const hasAppliedInitialTimeRef = useRef(false);\n  const lastProgressCommitAtRef = useRef(0);\n  const loadedMediaKeyRef = useRef<string | undefined>(undefined);\n  const pendingRestoreTimeRef = useRef<number | null>(null);\n  const onPlaybackErrorRef = useRef(onPlaybackError);\n\n  const videoSrc = getVideoSource(\n    src,\n    qualities,\n    selectedQuality,\n  );\n\n  const effectiveMediaKey = mediaKey ?? videoSrc;\n\n  const qualityOptions = getQualityOptions(qualities);\n  const hasQualityOptions = qualityOptions.length > 0;\n\n  useEffect(() => {\n    onPlaybackErrorRef.current = onPlaybackError;\n  }, [onPlaybackError]);\n\n  useEffect(() => {\n    const video = videoRef.current;\n\n    if (!video || !videoSrc) return;\n\n    const isSameMedia =\n      loadedMediaKeyRef.current !== undefined &&\n      loadedMediaKeyRef.current === effectiveMediaKey;\n\n    if (isSameMedia) {\n      pendingRestoreTimeRef.current = video.currentTime;\n    } else {\n      pendingRestoreTimeRef.current = null;\n      hasAppliedInitialTimeRef.current = false;\n      lastProgressCommitAtRef.current = 0;\n\n      setCurrentTime(0);\n      setDuration(0);\n      setBuffered(0);\n      setIsPlaying(false);\n    }\n\n    loadedMediaKeyRef.current = effectiveMediaKey;\n\n    video.removeAttribute('src');\n    video.load();\n\n    if (video.canPlayType('application/vnd.apple.mpegurl')) {\n      video.src = videoSrc;\n      return;\n    }\n\n    if (!Hls.isSupported()) {\n      video.src = videoSrc;\n      return;\n    }\n\n    const hls = new Hls();\n\n    hls.on(Hls.Events.ERROR, (_, data) => {\n      console.error('HLS error', data);\n\n      onPlaybackErrorRef.current?.({\n        type: 'hls',\n        fatal: data.fatal,\n        error: data,\n      });\n    });\n\n    hls.loadSource(videoSrc);\n    hls.attachMedia(video);\n\n    return () => {\n      hls.destroy();\n    };\n  }, [videoSrc, effectiveMediaKey]);\n\n  const hasStarted = currentTime > 0 || isPlaying;\n  const hasControls = hasStarted;\n  const hasVolume = isVolumeOpen;\n\n  const classes = classnames('video', className, {\n    'video--with-controls': hasControls,\n    'video--with-volume': hasVolume,\n  });\n\n  const syncMediaState = () => {\n    const video = videoRef.current;\n\n    if (!video) return;\n\n    setCurrentTime(video.currentTime);\n    setDuration(video.duration || 0);\n    setBuffered(getBufferedEnd(video));\n    setVolume(video.volume);\n    setIsMuted(video.muted);\n    setIsPlaying(!video.paused);\n  };\n\n  const commitProgress = (\n    video: HTMLVideoElement,\n  ) => {\n    if (!onProgressCommit) {\n      return;\n    }\n\n    onProgressCommit(\n      getVideoProgressState(video),\n    );\n  };\n\n  const handlePlayToggle = async () => {\n    const video = videoRef.current;\n\n    if (!video) return;\n\n    console.log('play click', {\n      paused: video.paused,\n      readyState: video.readyState,\n      src: video.currentSrc,\n      networkState: video.networkState,\n      error: video.error,\n    });\n\n    if (video.paused) {\n      try {\n        await video.play();\n        console.log('play success');\n      } catch (error) {\n        console.error('play failed', error);\n      }\n\n      return;\n    }\n\n    video.pause();\n  };\n\n  const handleSeek = (nextValue: number) => {\n    const video = videoRef.current;\n\n    if (!video) return;\n\n    video.currentTime = getClampedValue(\n      nextValue,\n      0,\n      duration,\n    );\n\n    setCurrentTime(video.currentTime);\n  };\n\n  const handleVolumeChange = (nextValue: number) => {\n    const video = videoRef.current;\n\n    if (!video) return;\n\n    const nextVolume = getClampedValue(\n      nextValue,\n      0,\n      1,\n    );\n\n    video.volume = nextVolume;\n    video.muted = nextVolume === 0;\n\n    setVolume(nextVolume);\n    setIsMuted(video.muted);\n  };\n\n  const handleSoundToggle = () => {\n    const video = videoRef.current;\n\n    if (!video) return;\n\n    video.muted = !video.muted;\n    setIsMuted(video.muted);\n  };\n\n  const handleFullscreen = () => {\n    const video = videoRef.current;\n\n    if (!video) return;\n\n    video.requestFullscreen?.();\n  };\n\n  const handleQualityChange = (quality: string) => {\n    setSelectedQuality(quality);\n    onQualityChange?.(quality);\n  };\n\n  const handleLoadedMetadata = (\n    event: React.SyntheticEvent<HTMLVideoElement>,\n  ) => {\n    const video = event.currentTarget;\n\n    if (pendingRestoreTimeRef.current !== null) {\n      video.currentTime = Math.min(\n        pendingRestoreTimeRef.current,\n        video.duration || pendingRestoreTimeRef.current,\n      );\n\n      pendingRestoreTimeRef.current = null;\n    } else if (\n      !hasAppliedInitialTimeRef.current &&\n      initialTime > 0\n    ) {\n      video.currentTime = Math.min(\n        initialTime,\n        video.duration || initialTime,\n      );\n\n      hasAppliedInitialTimeRef.current = true;\n    }\n\n    syncMediaState();\n\n    onLoadedMetadata?.(event);\n  };\n\n  const handleTimeUpdate = (\n    event: React.SyntheticEvent<HTMLVideoElement>,\n  ) => {\n    const video = event.currentTarget;\n\n    syncMediaState();\n\n    if (\n      onProgressCommit &&\n      (\n        video.currentTime -\n        lastProgressCommitAtRef.current\n      ) >= progressCommitIntervalSec\n    ) {\n      lastProgressCommitAtRef.current =\n        video.currentTime;\n\n      commitProgress(video);\n    }\n\n    onTimeUpdate?.(event);\n  };\n\n  const handleProgress = (\n    event: React.SyntheticEvent<HTMLVideoElement>,\n  ) => {\n    syncMediaState();\n    onProgress?.(event);\n  };\n\n  const handlePlay = (\n    event: React.SyntheticEvent<HTMLVideoElement>,\n  ) => {\n    setIsPlaying(true);\n    onPlay?.(event);\n  };\n\n  const handlePause = (\n    event: React.SyntheticEvent<HTMLVideoElement>,\n  ) => {\n    setIsPlaying(false);\n\n    commitProgress(event.currentTarget);\n\n    onPause?.(event);\n  };\n\n  const handleEnded = (\n    event: React.SyntheticEvent<HTMLVideoElement>,\n  ) => {\n    syncMediaState();\n\n    commitProgress(event.currentTarget);\n\n    onEnded?.(event);\n  };\n\n  const handleNativeError = (\n    event: React.SyntheticEvent<HTMLVideoElement>,\n  ) => {\n    onPlaybackError?.({\n      type: 'media',\n      fatal: true,\n      error: event.currentTarget.error ?? event,\n    });\n\n    onError?.(event);\n  };\n\n  const handleNativeVolumeChange = (\n    event: React.SyntheticEvent<HTMLVideoElement>,\n  ) => {\n    syncMediaState();\n    onVolumeChange?.(event);\n  };\n\n  return (\n    <div\n      className={classes}\n      aria-label={label}\n    >\n      <div className=\"video__surface\">\n        {cover && !hasStarted ? (\n          <img\n            className=\"video__cover\"\n            src={cover}\n            alt=\"\"\n            aria-hidden=\"true\"\n          />\n        ) : null}\n\n        <video\n          {...props}\n          ref={videoRef}\n          className=\"video__media\"\n          poster={cover}\n          autoPlay={autoPlay}\n          loop={loop}\n          muted={isMuted}\n          playsInline={playsInline}\n          preload={preload}\n          controls={false}\n          onLoadedMetadata={handleLoadedMetadata}\n          onTimeUpdate={handleTimeUpdate}\n          onProgress={handleProgress}\n          onPlay={handlePlay}\n          onPause={handlePause}\n          onEnded={handleEnded}\n          onError={handleNativeError}\n          onVolumeChange={handleNativeVolumeChange}\n        >\n          {children}\n        </video>\n\n        {!hasStarted && (\n          <ButtonIcon\n            className=\"video__main-action\"\n            icon=\"play\"\n            label=\"Play video\"\n            onClick={handlePlayToggle}\n          />\n        )}\n      </div>\n\n      {hasControls && (\n        <div className=\"video__controls\">\n          <ButtonIcon\n            icon={isPlaying ? 'pause' : 'play'}\n            label={isPlaying ? 'Pause video' : 'Play video'}\n            onClick={handlePlayToggle}\n          />\n\n          <div className=\"video__time\">\n            {formatTime(currentTime)}\n          </div>\n\n          <ProgressBar\n            className=\"video__progress\"\n            mode=\"player\"\n            value={currentTime}\n            buffered={buffered}\n            max={duration || 1}\n            step={1}\n            label=\"Video progress\"\n            onValueChange={handleSeek}\n          />\n\n          <ButtonIcon\n            icon=\"fullscreen\"\n            label=\"Fullscreen\"\n            onClick={handleFullscreen}\n          />\n\n          <div\n            className=\"video__sound-control\"\n            onMouseLeave={() => setIsVolumeOpen(false)}\n          >\n            <ButtonIcon\n              icon={isMuted ? 'sound-off' : 'sound'}\n              label={isMuted ? 'Unmute video' : 'Mute video'}\n              onClick={handleSoundToggle}\n              onMouseEnter={() => setIsVolumeOpen(true)}\n              onFocus={() => setIsVolumeOpen(true)}\n            />\n\n            {hasVolume && (\n              <div className=\"video__volume\">\n                <ProgressBar\n                  mode=\"level\"\n                  value={isMuted ? 0 : volume}\n                  max={1}\n                  step={0.05}\n                  label=\"Volume\"\n                  onValueChange={handleVolumeChange}\n                />\n              </div>\n            )}\n          </div>\n\n          {hasQualityOptions && (\n            <Dropdown\n              align=\"top-end\"\n              value={selectedQuality}\n              options={qualityOptions}\n              label=\"Video quality\"\n              onChange={handleQualityChange}\n              trigger={\n                <ButtonIcon\n                  icon=\"settings\"\n                  label=\"Video quality\"\n                />\n              }\n            />\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Video;"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jvetrau-ds",
-  "version": "0.1.32",
+  "version": "0.1.34",
   "description": "Multi-brand React design system with semantic tokens",
   "license": "UNLICENSED",
   "type": "module",

package/styles.css

@@ -31,8 +31,9 @@
   /* color */
   --attachment-color: var(--color-text);
   --attachment-item-bg: var(--color-control);
+  --attachment-item-color: var(--color-text-control);
   --attachment-border-color: var(--color-line);
-  --attachment-meta-color: var(--color-text-note);
+  --attachment-item-meta-color: var(--color-text-note);
 
   color: var(--attachment-color);
 
@@ -66,6 +67,10 @@
 }
 
 .attach__list {
+  /* color */
+
+  /* typography */
+
   /* size */
   display: flex;
   flex-direction: column;
@@ -75,11 +80,18 @@
 
   /* border */
   list-style: none;
+
+  /* depth */
+
+  /* motion */
 }
 
 .attach__item {
   /* color */
   background: var(--attachment-item-bg);
+  color: var(--attachment-item-color);
+
+  /* typography */
 
   /* size */
   display: flex;
@@ -118,11 +130,25 @@
 }
 
 .attach__link:hover .attach__name {
+  /* color */
+
   /* typography */
   text-decoration: underline;
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .attach__preview {
+  /* color */
+
+  /* typography */
+
   /* size */
   display: block;
   max-width: var(--attachment-preview-max-width);
@@ -138,6 +164,10 @@
 }
 
 .attach__file {
+  /* color */
+
+  /* typography */
+
   /* size */
   display: flex;
   flex-direction: column;
@@ -151,6 +181,8 @@
 }
 
 .attach__name {
+  /* color */
+
   /* typography */
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -167,7 +199,7 @@
 
 .attach__meta {
   /* color */
-  color: var(--attachment-meta-color);
+  color: var(--attachment-item-meta-color);
 
   /* typography */
   font-size: 0.85em;
@@ -203,8 +235,18 @@
 }
 
 .attach__remove:hover {
+  /* color */
+
   /* typography */
   text-decoration: underline;
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 /* src/components/avatar/avatar.css */