npm - jvetrau-ds - Versions diffs - 0.2.45 → 0.2.47 - Mend

jvetrau-ds 0.2.45 → 0.2.47

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (150) hide show

package/components/button/button.css CHANGED Viewed

@@ -66,6 +66,7 @@
 .button__icon {
   /* color */
+  color: inherit;
   /* typography */
   line-height: 0;

package/components/course-outline/course-outline.css CHANGED Viewed

@@ -101,7 +101,9 @@
 }
 .layout-sidebar__side
-  .course-outline__action {
+  .course-outline__action,
+.layout-sidebar__side
+  .course-outline__meta {
   /* color */
   /* typography */

package/components/video/video.cjs CHANGED Viewed

@@ -265,6 +265,10 @@ const Video = ({
     }
     video.pause();
   };
+  const handleMainActionClick = (event) => {
+    event.stopPropagation();
+    void handlePlayToggle();
+  };
   const handleSeek = (nextValue) => {
     const video = videoRef.current;
     if (!video) {
@@ -380,71 +384,81 @@ const Video = ({
       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(
-            Button__default.default,
-            {
-              mode: "toolbar",
-              className: "video__main-action",
-              icon: "play",
-              "aria-label": "Play video",
-              onClick: handlePlayToggle
-            }
-          )
-        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "video__surface",
+            onClick: () => {
+              void handlePlayToggle();
+            },
+            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(
+                Button__default.default,
+                {
+                  className: "video__main-action",
+                  icon: "play",
+                  "aria-label": "Play video",
+                  onClick: handleMainActionClick
+                }
+              )
+            ]
+          }
+        ),
         hasControls && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "video__controls", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Button__default.default,
-            {
-              mode: "toolbar",
-              icon: isPlaying ? "pause" : "play",
-              "aria-label": isPlaying ? "Pause video" : "Play video",
-              onClick: handlePlayToggle
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "video__time", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "video__time-minutes", children: renderTimeDigits(
-              timeParts.minutes
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "video__time-separator", children: ":" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "video__time-seconds", children: renderTimeDigits(
-              timeParts.seconds
-            ) })
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "video__controls-play", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button__default.default,
+              {
+                mode: "toolbar",
+                icon: isPlaying ? "pause" : "play",
+                "aria-label": isPlaying ? "Pause video" : "Play video",
+                onClick: handlePlayToggle
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "video__time", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "video__time-minutes", children: renderTimeDigits(
+                timeParts.minutes
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "video__time-separator", children: ":" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "video__time-seconds", children: renderTimeDigits(
+                timeParts.seconds
+              ) })
+            ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "video__controls-progress", children: /* @__PURE__ */ jsxRuntime.jsx(
             ProgressBar__default.default,
             {
               className: "video__progress",
@@ -456,71 +470,73 @@ const Video = ({
               label: "Video progress",
               onValueChange: handleSeek
             }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Button__default.default,
-            {
-              mode: "toolbar",
-              icon: "fullscreen",
-              "aria-label": "Fullscreen",
-              onClick: handleFullscreen
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: "video__sound-control",
-              onMouseLeave: () => setIsVolumeOpen(
-                false
-              ),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "video__controls-settings", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button__default.default,
+              {
+                mode: "toolbar",
+                icon: "fullscreen",
+                "aria-label": "Fullscreen",
+                onClick: handleFullscreen
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "video__sound-control",
+                onMouseLeave: () => setIsVolumeOpen(
+                  false
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Button__default.default,
+                    {
+                      mode: "toolbar",
+                      icon: isMuted ? "sound-off" : "sound",
+                      "aria-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(
                   Button__default.default,
                   {
                     mode: "toolbar",
-                    icon: isMuted ? "sound-off" : "sound",
-                    "aria-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
+                    icon: "settings",
+                    "aria-label": "Video quality"
                   }
-                ) })
-              ]
-            }
-          ),
-          hasQualityOptions && /* @__PURE__ */ jsxRuntime.jsx(
-            Dropdown__default.default,
-            {
-              align: "top-end",
-              value: selectedQuality,
-              options: qualityOptions,
-              label: "Video quality",
-              onChange: handleQualityChange,
-              trigger: /* @__PURE__ */ jsxRuntime.jsx(
-                Button__default.default,
-                {
-                  mode: "toolbar",
-                  icon: "settings",
-                  "aria-label": "Video quality"
-                }
-              )
-            }
-          )
+                )
+              }
+            )
+          ] })
         ] })
       ]
     }

package/components/video/video.cjs.map CHANGED Viewed

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

package/components/video/video.css CHANGED Viewed

@@ -16,7 +16,8 @@
   /* size */
   --video-width: 100%;
   --video-aspect-ratio: 16 / 9;
-  --video-controls-gap: var(--margin-icon);
+  --video-controls-gap: var(--margin-control);
+  --video-icons-gap: var(--margin-icon);
   --video-volume-height: 400px;
   --video-time-digit-width: 0.6em;
   --video-time-digit-gap: 0.04em;
@@ -52,6 +53,7 @@
   /* depth */
   /* motion */
+  cursor: pointer;
 }
 .video__media {
@@ -150,6 +152,57 @@
   /* motion */
 }
+.video__controls-play,
+.video__controls-progress,
+.video__controls-settings {
+  /* color */
+  /* typography */
+  /* size */
+  display: flex;
+  align-items: center;
+  gap: var(--video-icons-gap);
+  /* border */
+  /* depth */
+  /* motion */
+}
+.video__controls-play,
+.video__controls-settings {
+  /* color */
+  /* typography */
+  /* size */
+  flex-shrink: 0;
+  /* border */
+  /* depth */
+  /* motion */
+}
+.video__controls-progress {
+  /* color */
+  /* typography */
+  /* size */
+  flex: 1;
+  min-width: 0;
+  /* border */
+  /* depth */
+  /* motion */
+}
 .video__time {
   /* color */
   color: var(--video-control-color);