jvetrau-ds 0.1.45 → 0.2.2

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 (194) hide show
  1. package/components/button/button.cjs +41 -16
  2. package/components/button/button.cjs.map +1 -1
  3. package/components/button/button.css +226 -7
  4. package/components/button/button.d.ts +26 -3
  5. package/components/button/button.js +41 -16
  6. package/components/button/button.js.map +1 -1
  7. package/components/checkbox/checkbox.cjs +3 -1
  8. package/components/checkbox/checkbox.cjs.map +1 -1
  9. package/components/checkbox/checkbox.css +24 -1
  10. package/components/checkbox/checkbox.d.ts +1 -0
  11. package/components/checkbox/checkbox.js +3 -1
  12. package/components/checkbox/checkbox.js.map +1 -1
  13. package/components/field/field.cjs +37 -17
  14. package/components/field/field.cjs.map +1 -1
  15. package/components/field/field.css +17 -0
  16. package/components/field/field.d.ts +2 -2
  17. package/components/field/field.js +37 -17
  18. package/components/field/field.js.map +1 -1
  19. package/components/flip-list/flip-list.cjs +8 -2
  20. package/components/flip-list/flip-list.cjs.map +1 -1
  21. package/components/flip-list/flip-list.css +49 -3
  22. package/components/flip-list/flip-list.d.ts +1 -0
  23. package/components/flip-list/flip-list.js +8 -2
  24. package/components/flip-list/flip-list.js.map +1 -1
  25. package/components/index.cjs +0 -6
  26. package/components/index.d.ts +0 -2
  27. package/components/index.js +0 -1
  28. package/components/radio/radio.cjs +3 -1
  29. package/components/radio/radio.cjs.map +1 -1
  30. package/components/radio/radio.css +24 -1
  31. package/components/radio/radio.d.ts +1 -0
  32. package/components/radio/radio.js +3 -1
  33. package/components/radio/radio.js.map +1 -1
  34. package/components/tabs/tabs.cjs +25 -9
  35. package/components/tabs/tabs.cjs.map +1 -1
  36. package/components/tabs/tabs.css +63 -0
  37. package/components/tabs/tabs.d.ts +1 -0
  38. package/components/tabs/tabs.js +26 -10
  39. package/components/tabs/tabs.js.map +1 -1
  40. package/components/video/video.cjs +150 -60
  41. package/components/video/video.cjs.map +1 -1
  42. package/components/video/video.js +147 -58
  43. package/components/video/video.js.map +1 -1
  44. package/index.cjs +0 -6
  45. package/index.d.ts +0 -2
  46. package/index.js +0 -1
  47. package/package.json +1 -1
  48. package/styles.css +379 -57
  49. package/themes/base/desktop.css +1 -0
  50. package/themes/base/desktop.md +1 -0
  51. package/themes/base/desktop.scoped.css +1 -0
  52. package/themes/base/diagram.css +1 -0
  53. package/themes/base/diagram.md +1 -0
  54. package/themes/base/diagram.scoped.css +1 -0
  55. package/themes/base/mobile.css +1 -0
  56. package/themes/base/mobile.md +1 -0
  57. package/themes/base/mobile.scoped.css +1 -0
  58. package/themes/brandcopilot/desktop.css +1 -0
  59. package/themes/brandcopilot/desktop.md +1 -0
  60. package/themes/brandcopilot/desktop.scoped.css +1 -0
  61. package/themes/brandcopilot/diagram.css +1 -0
  62. package/themes/brandcopilot/diagram.md +1 -0
  63. package/themes/brandcopilot/diagram.scoped.css +1 -0
  64. package/themes/brandcopilot/mobile.css +1 -0
  65. package/themes/brandcopilot/mobile.md +1 -0
  66. package/themes/brandcopilot/mobile.scoped.css +1 -0
  67. package/themes/dmpatterns/desktop.css +1 -0
  68. package/themes/dmpatterns/desktop.md +1 -0
  69. package/themes/dmpatterns/desktop.scoped.css +1 -0
  70. package/themes/dmpatterns/diagram.css +1 -0
  71. package/themes/dmpatterns/diagram.md +1 -0
  72. package/themes/dmpatterns/diagram.scoped.css +1 -0
  73. package/themes/dmpatterns/mobile.css +1 -0
  74. package/themes/dmpatterns/mobile.md +1 -0
  75. package/themes/dmpatterns/mobile.scoped.css +1 -0
  76. package/themes/pdigest/desktop.css +1 -0
  77. package/themes/pdigest/desktop.md +1 -0
  78. package/themes/pdigest/desktop.scoped.css +1 -0
  79. package/themes/pdigest/diagram.css +1 -0
  80. package/themes/pdigest/diagram.md +1 -0
  81. package/themes/pdigest/diagram.scoped.css +1 -0
  82. package/themes/pdigest/mobile.css +1 -0
  83. package/themes/pdigest/mobile.md +1 -0
  84. package/themes/pdigest/mobile.scoped.css +1 -0
  85. package/themes/redesigntrack/desktop.css +1 -0
  86. package/themes/redesigntrack/desktop.md +1 -0
  87. package/themes/redesigntrack/desktop.scoped.css +1 -0
  88. package/themes/redesigntrack/diagram.css +1 -0
  89. package/themes/redesigntrack/diagram.md +1 -0
  90. package/themes/redesigntrack/diagram.scoped.css +1 -0
  91. package/themes/redesigntrack/mobile.css +1 -0
  92. package/themes/redesigntrack/mobile.md +1 -0
  93. package/themes/redesigntrack/mobile.scoped.css +1 -0
  94. package/tokens/runtime/tokens.base.desktop.runtime.cjs +1 -0
  95. package/tokens/runtime/tokens.base.desktop.runtime.cjs.map +1 -1
  96. package/tokens/runtime/tokens.base.desktop.runtime.d.ts +1 -0
  97. package/tokens/runtime/tokens.base.desktop.runtime.js +1 -0
  98. package/tokens/runtime/tokens.base.desktop.runtime.js.map +1 -1
  99. package/tokens/runtime/tokens.base.diagram.runtime.cjs +1 -0
  100. package/tokens/runtime/tokens.base.diagram.runtime.cjs.map +1 -1
  101. package/tokens/runtime/tokens.base.diagram.runtime.d.ts +1 -0
  102. package/tokens/runtime/tokens.base.diagram.runtime.js +1 -0
  103. package/tokens/runtime/tokens.base.diagram.runtime.js.map +1 -1
  104. package/tokens/runtime/tokens.base.mobile.runtime.cjs +1 -0
  105. package/tokens/runtime/tokens.base.mobile.runtime.cjs.map +1 -1
  106. package/tokens/runtime/tokens.base.mobile.runtime.d.ts +1 -0
  107. package/tokens/runtime/tokens.base.mobile.runtime.js +1 -0
  108. package/tokens/runtime/tokens.base.mobile.runtime.js.map +1 -1
  109. package/tokens/runtime/tokens.brandcopilot.desktop.runtime.cjs +1 -0
  110. package/tokens/runtime/tokens.brandcopilot.desktop.runtime.cjs.map +1 -1
  111. package/tokens/runtime/tokens.brandcopilot.desktop.runtime.d.ts +1 -0
  112. package/tokens/runtime/tokens.brandcopilot.desktop.runtime.js +1 -0
  113. package/tokens/runtime/tokens.brandcopilot.desktop.runtime.js.map +1 -1
  114. package/tokens/runtime/tokens.brandcopilot.diagram.runtime.cjs +1 -0
  115. package/tokens/runtime/tokens.brandcopilot.diagram.runtime.cjs.map +1 -1
  116. package/tokens/runtime/tokens.brandcopilot.diagram.runtime.d.ts +1 -0
  117. package/tokens/runtime/tokens.brandcopilot.diagram.runtime.js +1 -0
  118. package/tokens/runtime/tokens.brandcopilot.diagram.runtime.js.map +1 -1
  119. package/tokens/runtime/tokens.brandcopilot.mobile.runtime.cjs +1 -0
  120. package/tokens/runtime/tokens.brandcopilot.mobile.runtime.cjs.map +1 -1
  121. package/tokens/runtime/tokens.brandcopilot.mobile.runtime.d.ts +1 -0
  122. package/tokens/runtime/tokens.brandcopilot.mobile.runtime.js +1 -0
  123. package/tokens/runtime/tokens.brandcopilot.mobile.runtime.js.map +1 -1
  124. package/tokens/runtime/tokens.dmpatterns.desktop.runtime.cjs +1 -0
  125. package/tokens/runtime/tokens.dmpatterns.desktop.runtime.cjs.map +1 -1
  126. package/tokens/runtime/tokens.dmpatterns.desktop.runtime.d.ts +1 -0
  127. package/tokens/runtime/tokens.dmpatterns.desktop.runtime.js +1 -0
  128. package/tokens/runtime/tokens.dmpatterns.desktop.runtime.js.map +1 -1
  129. package/tokens/runtime/tokens.dmpatterns.diagram.runtime.cjs +1 -0
  130. package/tokens/runtime/tokens.dmpatterns.diagram.runtime.cjs.map +1 -1
  131. package/tokens/runtime/tokens.dmpatterns.diagram.runtime.d.ts +1 -0
  132. package/tokens/runtime/tokens.dmpatterns.diagram.runtime.js +1 -0
  133. package/tokens/runtime/tokens.dmpatterns.diagram.runtime.js.map +1 -1
  134. package/tokens/runtime/tokens.dmpatterns.mobile.runtime.cjs +1 -0
  135. package/tokens/runtime/tokens.dmpatterns.mobile.runtime.cjs.map +1 -1
  136. package/tokens/runtime/tokens.dmpatterns.mobile.runtime.d.ts +1 -0
  137. package/tokens/runtime/tokens.dmpatterns.mobile.runtime.js +1 -0
  138. package/tokens/runtime/tokens.dmpatterns.mobile.runtime.js.map +1 -1
  139. package/tokens/runtime/tokens.pdigest.desktop.runtime.cjs +1 -0
  140. package/tokens/runtime/tokens.pdigest.desktop.runtime.cjs.map +1 -1
  141. package/tokens/runtime/tokens.pdigest.desktop.runtime.d.ts +1 -0
  142. package/tokens/runtime/tokens.pdigest.desktop.runtime.js +1 -0
  143. package/tokens/runtime/tokens.pdigest.desktop.runtime.js.map +1 -1
  144. package/tokens/runtime/tokens.pdigest.diagram.runtime.cjs +1 -0
  145. package/tokens/runtime/tokens.pdigest.diagram.runtime.cjs.map +1 -1
  146. package/tokens/runtime/tokens.pdigest.diagram.runtime.d.ts +1 -0
  147. package/tokens/runtime/tokens.pdigest.diagram.runtime.js +1 -0
  148. package/tokens/runtime/tokens.pdigest.diagram.runtime.js.map +1 -1
  149. package/tokens/runtime/tokens.pdigest.mobile.runtime.cjs +1 -0
  150. package/tokens/runtime/tokens.pdigest.mobile.runtime.cjs.map +1 -1
  151. package/tokens/runtime/tokens.pdigest.mobile.runtime.d.ts +1 -0
  152. package/tokens/runtime/tokens.pdigest.mobile.runtime.js +1 -0
  153. package/tokens/runtime/tokens.pdigest.mobile.runtime.js.map +1 -1
  154. package/tokens/runtime/tokens.redesigntrack.desktop.runtime.cjs +1 -0
  155. package/tokens/runtime/tokens.redesigntrack.desktop.runtime.cjs.map +1 -1
  156. package/tokens/runtime/tokens.redesigntrack.desktop.runtime.d.ts +1 -0
  157. package/tokens/runtime/tokens.redesigntrack.desktop.runtime.js +1 -0
  158. package/tokens/runtime/tokens.redesigntrack.desktop.runtime.js.map +1 -1
  159. package/tokens/runtime/tokens.redesigntrack.diagram.runtime.cjs +1 -0
  160. package/tokens/runtime/tokens.redesigntrack.diagram.runtime.cjs.map +1 -1
  161. package/tokens/runtime/tokens.redesigntrack.diagram.runtime.d.ts +1 -0
  162. package/tokens/runtime/tokens.redesigntrack.diagram.runtime.js +1 -0
  163. package/tokens/runtime/tokens.redesigntrack.diagram.runtime.js.map +1 -1
  164. package/tokens/runtime/tokens.redesigntrack.mobile.runtime.cjs +1 -0
  165. package/tokens/runtime/tokens.redesigntrack.mobile.runtime.cjs.map +1 -1
  166. package/tokens/runtime/tokens.redesigntrack.mobile.runtime.d.ts +1 -0
  167. package/tokens/runtime/tokens.redesigntrack.mobile.runtime.js +1 -0
  168. package/tokens/runtime/tokens.redesigntrack.mobile.runtime.js.map +1 -1
  169. package/tokens/themes/base/dist/desktop.json +8 -0
  170. package/tokens/themes/base/dist/diagram.json +8 -0
  171. package/tokens/themes/base/dist/mobile.json +8 -0
  172. package/tokens/themes/brandcopilot/dist/desktop.json +8 -0
  173. package/tokens/themes/brandcopilot/dist/diagram.json +8 -0
  174. package/tokens/themes/brandcopilot/dist/mobile.json +8 -0
  175. package/tokens/themes/dmpatterns/dist/desktop.json +8 -0
  176. package/tokens/themes/dmpatterns/dist/diagram.json +8 -0
  177. package/tokens/themes/dmpatterns/dist/mobile.json +8 -0
  178. package/tokens/themes/pdigest/dist/desktop.json +8 -0
  179. package/tokens/themes/pdigest/dist/diagram.json +8 -0
  180. package/tokens/themes/pdigest/dist/mobile.json +8 -0
  181. package/tokens/themes/redesigntrack/dist/desktop.json +8 -0
  182. package/tokens/themes/redesigntrack/dist/diagram.json +8 -0
  183. package/tokens/themes/redesigntrack/dist/mobile.json +8 -0
  184. package/components/button-icon/button-icon.cjs +0 -48
  185. package/components/button-icon/button-icon.cjs.map +0 -1
  186. package/components/button-icon/button-icon.css +0 -67
  187. package/components/button-icon/button-icon.d.ts +0 -10
  188. package/components/button-icon/button-icon.js +0 -42
  189. package/components/button-icon/button-icon.js.map +0 -1
  190. package/components/button-icon/index.cjs +0 -13
  191. package/components/button-icon/index.cjs.map +0 -1
  192. package/components/button-icon/index.d.ts +0 -2
  193. package/components/button-icon/index.js +0 -3
  194. package/components/button-icon/index.js.map +0 -1
@@ -1 +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 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;"]}
1
+ {"version":3,"sources":["../../../src/components/video/video.tsx"],"names":["useRef","useState","useEffect","Hls","classnames","jsxs","jsx","Button","Icon","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 Icon from '../../icons/icon';\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\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 formatTime(value: number) {\n if (!Number.isFinite(value)) {\n return '0:00';\n }\n\n const minutes = Math.floor(\n value / 60,\n );\n\n const seconds = Math.floor(\n value % 60,\n );\n\n return `${minutes}:${String(\n seconds,\n ).padStart(2, '0')}`;\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 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={\n <Icon name=\"play\" />\n }\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 <Icon\n name={\n isPlaying\n ? 'pause'\n : 'play'\n }\n />\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 {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={\n handleSeek\n }\n />\n\n <Button\n mode=\"toolbar\"\n icon={\n <Icon name=\"fullscreen\" />\n }\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 <Icon\n name={\n isMuted\n ? 'sound-off'\n : 'sound'\n }\n />\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={\n <Icon name=\"settings\" />\n }\n aria-label=\"Video quality\"\n />\n }\n />\n )}\n </div>\n )}\n </div>\n );\n};\n\nexport default Video;\n"]}
@@ -2,23 +2,39 @@ import { jsxs, jsx } from 'react/jsx-runtime';
2
2
  import { useRef, useState, useEffect } from 'react';
3
3
  import Hls from 'hls.js';
4
4
  import './video.css';
5
+ import Icon from '../../icons/icon';
6
+ import Button from '../button';
7
+ import Dropdown from '../dropdown';
5
8
  import { classnames } from '../helpers/classnames';
6
- import ButtonIcon from '../button-icon';
7
9
  import ProgressBar from '../progressbar';
8
- import Dropdown from '../dropdown';
9
10
 
10
11
  function getClampedValue(value, min, max) {
11
- return Math.min(Math.max(value, min), max);
12
+ return Math.min(
13
+ Math.max(value, min),
14
+ max
15
+ );
12
16
  }
13
17
  function formatTime(value) {
14
- if (!Number.isFinite(value)) return "0:00";
15
- const minutes = Math.floor(value / 60);
16
- const seconds = Math.floor(value % 60);
17
- return `${minutes}:${String(seconds).padStart(2, "0")}`;
18
+ if (!Number.isFinite(value)) {
19
+ return "0:00";
20
+ }
21
+ const minutes = Math.floor(
22
+ value / 60
23
+ );
24
+ const seconds = Math.floor(
25
+ value % 60
26
+ );
27
+ return `${minutes}:${String(
28
+ seconds
29
+ ).padStart(2, "0")}`;
18
30
  }
19
31
  function getBufferedEnd(video) {
20
- if (video.buffered.length === 0) return 0;
21
- return video.buffered.end(video.buffered.length - 1);
32
+ if (video.buffered.length === 0) {
33
+ return 0;
34
+ }
35
+ return video.buffered.end(
36
+ video.buffered.length - 1
37
+ );
22
38
  }
23
39
  function getVideoSource(src, qualities, selectedQuality) {
24
40
  const selectedQualityItem = qualities.find(
@@ -76,13 +92,24 @@ const Video = ({
76
92
  }) => {
77
93
  const videoRef = useRef(null);
78
94
  const [isPlaying, setIsPlaying] = useState(false);
79
- const [isVolumeOpen, setIsVolumeOpen] = useState(false);
80
- const [selectedQuality, setSelectedQuality] = useState(defaultQuality);
81
- const [currentTime, setCurrentTime] = useState(0);
95
+ const [
96
+ isVolumeOpen,
97
+ setIsVolumeOpen
98
+ ] = useState(false);
99
+ const [
100
+ selectedQuality,
101
+ setSelectedQuality
102
+ ] = useState(defaultQuality);
103
+ const [
104
+ currentTime,
105
+ setCurrentTime
106
+ ] = useState(0);
82
107
  const [duration, setDuration] = useState(0);
83
108
  const [buffered, setBuffered] = useState(0);
84
109
  const [volume, setVolume] = useState(initialVolume);
85
- const [isMuted, setIsMuted] = useState(muted ?? initialMuted);
110
+ const [isMuted, setIsMuted] = useState(
111
+ muted ?? initialMuted
112
+ );
86
113
  const hasAppliedInitialTimeRef = useRef(false);
87
114
  const lastProgressCommitAtRef = useRef(0);
88
115
  const loadedMediaKeyRef = useRef(void 0);
@@ -101,7 +128,9 @@ const Video = ({
101
128
  }, [onPlaybackError]);
102
129
  useEffect(() => {
103
130
  const video = videoRef.current;
104
- if (!video || !videoSrc) return;
131
+ if (!video || !videoSrc) {
132
+ return;
133
+ }
105
134
  const isSameMedia = loadedMediaKeyRef.current !== void 0 && loadedMediaKeyRef.current === effectiveMediaKey;
106
135
  if (isSameMedia) {
107
136
  pendingRestoreTimeRef.current = video.currentTime;
@@ -117,7 +146,9 @@ const Video = ({
117
146
  loadedMediaKeyRef.current = effectiveMediaKey;
118
147
  video.removeAttribute("src");
119
148
  video.load();
120
- if (video.canPlayType("application/vnd.apple.mpegurl")) {
149
+ if (video.canPlayType(
150
+ "application/vnd.apple.mpegurl"
151
+ )) {
121
152
  video.src = videoSrc;
122
153
  return;
123
154
  }
@@ -126,14 +157,20 @@ const Video = ({
126
157
  return;
127
158
  }
128
159
  const hls = new Hls();
129
- hls.on(Hls.Events.ERROR, (_, data) => {
130
- console.error("HLS error", data);
131
- onPlaybackErrorRef.current?.({
132
- type: "hls",
133
- fatal: data.fatal,
134
- error: data
135
- });
136
- });
160
+ hls.on(
161
+ Hls.Events.ERROR,
162
+ (_, data) => {
163
+ console.error(
164
+ "HLS error",
165
+ data
166
+ );
167
+ onPlaybackErrorRef.current?.({
168
+ type: "hls",
169
+ fatal: data.fatal,
170
+ error: data
171
+ });
172
+ }
173
+ );
137
174
  hls.loadSource(videoSrc);
138
175
  hls.attachMedia(video);
139
176
  return () => {
@@ -143,16 +180,26 @@ const Video = ({
143
180
  const hasStarted = currentTime > 0 || isPlaying;
144
181
  const hasControls = hasStarted;
145
182
  const hasVolume = isVolumeOpen;
146
- const classes = classnames("video", className, {
147
- "video--with-controls": hasControls,
148
- "video--with-volume": hasVolume
149
- });
183
+ const classes = classnames(
184
+ "video",
185
+ className,
186
+ {
187
+ "video--with-controls": hasControls,
188
+ "video--with-volume": hasVolume
189
+ }
190
+ );
150
191
  const syncMediaState = () => {
151
192
  const video = videoRef.current;
152
- if (!video) return;
193
+ if (!video) {
194
+ return;
195
+ }
153
196
  setCurrentTime(video.currentTime);
154
- setDuration(video.duration || 0);
155
- setBuffered(getBufferedEnd(video));
197
+ setDuration(
198
+ video.duration || 0
199
+ );
200
+ setBuffered(
201
+ getBufferedEnd(video)
202
+ );
156
203
  setVolume(video.volume);
157
204
  setIsMuted(video.muted);
158
205
  setIsPlaying(!video.paused);
@@ -167,7 +214,9 @@ const Video = ({
167
214
  };
168
215
  const handlePlayToggle = async () => {
169
216
  const video = videoRef.current;
170
- if (!video) return;
217
+ if (!video) {
218
+ return;
219
+ }
171
220
  console.log("play click", {
172
221
  paused: video.paused,
173
222
  readyState: video.readyState,
@@ -178,9 +227,14 @@ const Video = ({
178
227
  if (video.paused) {
179
228
  try {
180
229
  await video.play();
181
- console.log("play success");
230
+ console.log(
231
+ "play success"
232
+ );
182
233
  } catch (error) {
183
- console.error("play failed", error);
234
+ console.error(
235
+ "play failed",
236
+ error
237
+ );
184
238
  }
185
239
  return;
186
240
  }
@@ -188,17 +242,23 @@ const Video = ({
188
242
  };
189
243
  const handleSeek = (nextValue) => {
190
244
  const video = videoRef.current;
191
- if (!video) return;
245
+ if (!video) {
246
+ return;
247
+ }
192
248
  video.currentTime = getClampedValue(
193
249
  nextValue,
194
250
  0,
195
251
  duration
196
252
  );
197
- setCurrentTime(video.currentTime);
253
+ setCurrentTime(
254
+ video.currentTime
255
+ );
198
256
  };
199
257
  const handleVolumeChange = (nextValue) => {
200
258
  const video = videoRef.current;
201
- if (!video) return;
259
+ if (!video) {
260
+ return;
261
+ }
202
262
  const nextVolume = getClampedValue(
203
263
  nextValue,
204
264
  0,
@@ -211,13 +271,17 @@ const Video = ({
211
271
  };
212
272
  const handleSoundToggle = () => {
213
273
  const video = videoRef.current;
214
- if (!video) return;
274
+ if (!video) {
275
+ return;
276
+ }
215
277
  video.muted = !video.muted;
216
278
  setIsMuted(video.muted);
217
279
  };
218
280
  const handleFullscreen = () => {
219
281
  const video = videoRef.current;
220
- if (!video) return;
282
+ if (!video) {
283
+ return;
284
+ }
221
285
  video.requestFullscreen?.();
222
286
  };
223
287
  const handleQualityChange = (quality) => {
@@ -261,12 +325,16 @@ const Video = ({
261
325
  };
262
326
  const handlePause = (event) => {
263
327
  setIsPlaying(false);
264
- commitProgress(event.currentTarget);
328
+ commitProgress(
329
+ event.currentTarget
330
+ );
265
331
  onPause?.(event);
266
332
  };
267
333
  const handleEnded = (event) => {
268
334
  syncMediaState();
269
- commitProgress(event.currentTarget);
335
+ commitProgress(
336
+ event.currentTarget
337
+ );
270
338
  onEnded?.(event);
271
339
  };
272
340
  const handleNativeError = (event) => {
@@ -322,21 +390,28 @@ const Video = ({
322
390
  }
323
391
  ),
324
392
  !hasStarted && /* @__PURE__ */ jsx(
325
- ButtonIcon,
393
+ Button,
326
394
  {
395
+ mode: "toolbar",
327
396
  className: "video__main-action",
328
- icon: "play",
329
- label: "Play video",
397
+ icon: /* @__PURE__ */ jsx(Icon, { name: "play" }),
398
+ "aria-label": "Play video",
330
399
  onClick: handlePlayToggle
331
400
  }
332
401
  )
333
402
  ] }),
334
403
  hasControls && /* @__PURE__ */ jsxs("div", { className: "video__controls", children: [
335
404
  /* @__PURE__ */ jsx(
336
- ButtonIcon,
405
+ Button,
337
406
  {
338
- icon: isPlaying ? "pause" : "play",
339
- label: isPlaying ? "Pause video" : "Play video",
407
+ mode: "toolbar",
408
+ icon: /* @__PURE__ */ jsx(
409
+ Icon,
410
+ {
411
+ name: isPlaying ? "pause" : "play"
412
+ }
413
+ ),
414
+ "aria-label": isPlaying ? "Pause video" : "Play video",
340
415
  onClick: handlePlayToggle
341
416
  }
342
417
  ),
@@ -355,10 +430,11 @@ const Video = ({
355
430
  }
356
431
  ),
357
432
  /* @__PURE__ */ jsx(
358
- ButtonIcon,
433
+ Button,
359
434
  {
360
- icon: "fullscreen",
361
- label: "Fullscreen",
435
+ mode: "toolbar",
436
+ icon: /* @__PURE__ */ jsx(Icon, { name: "fullscreen" }),
437
+ "aria-label": "Fullscreen",
362
438
  onClick: handleFullscreen
363
439
  }
364
440
  ),
@@ -366,16 +442,28 @@ const Video = ({
366
442
  "div",
367
443
  {
368
444
  className: "video__sound-control",
369
- onMouseLeave: () => setIsVolumeOpen(false),
445
+ onMouseLeave: () => setIsVolumeOpen(
446
+ false
447
+ ),
370
448
  children: [
371
449
  /* @__PURE__ */ jsx(
372
- ButtonIcon,
450
+ Button,
373
451
  {
374
- icon: isMuted ? "sound-off" : "sound",
375
- label: isMuted ? "Unmute video" : "Mute video",
452
+ mode: "toolbar",
453
+ icon: /* @__PURE__ */ jsx(
454
+ Icon,
455
+ {
456
+ name: isMuted ? "sound-off" : "sound"
457
+ }
458
+ ),
459
+ "aria-label": isMuted ? "Unmute video" : "Mute video",
376
460
  onClick: handleSoundToggle,
377
- onMouseEnter: () => setIsVolumeOpen(true),
378
- onFocus: () => setIsVolumeOpen(true)
461
+ onMouseEnter: () => setIsVolumeOpen(
462
+ true
463
+ ),
464
+ onFocus: () => setIsVolumeOpen(
465
+ true
466
+ )
379
467
  }
380
468
  ),
381
469
  hasVolume && /* @__PURE__ */ jsx("div", { className: "video__volume", children: /* @__PURE__ */ jsx(
@@ -401,10 +489,11 @@ const Video = ({
401
489
  label: "Video quality",
402
490
  onChange: handleQualityChange,
403
491
  trigger: /* @__PURE__ */ jsx(
404
- ButtonIcon,
492
+ Button,
405
493
  {
406
- icon: "settings",
407
- label: "Video quality"
494
+ mode: "toolbar",
495
+ icon: /* @__PURE__ */ jsx(Icon, { name: "settings" }),
496
+ "aria-label": "Video quality"
408
497
  }
409
498
  )
410
499
  }
@@ -1 +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 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;"]}
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 Icon from '../../icons/icon';\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\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 formatTime(value: number) {\n if (!Number.isFinite(value)) {\n return '0:00';\n }\n\n const minutes = Math.floor(\n value / 60,\n );\n\n const seconds = Math.floor(\n value % 60,\n );\n\n return `${minutes}:${String(\n seconds,\n ).padStart(2, '0')}`;\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 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={\n <Icon name=\"play\" />\n }\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 <Icon\n name={\n isPlaying\n ? 'pause'\n : 'play'\n }\n />\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 {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={\n handleSeek\n }\n />\n\n <Button\n mode=\"toolbar\"\n icon={\n <Icon name=\"fullscreen\" />\n }\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 <Icon\n name={\n isMuted\n ? 'sound-off'\n : 'sound'\n }\n />\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={\n <Icon name=\"settings\" />\n }\n aria-label=\"Video quality\"\n />\n }\n />\n )}\n </div>\n )}\n </div>\n );\n};\n\nexport default Video;\n"]}
package/index.cjs CHANGED
@@ -1,7 +1,6 @@
1
1
  'use strict';
2
2
 
3
3
  var button = require('./components/button');
4
- var buttonIcon = require('./components/button-icon');
5
4
  var input = require('./components/input');
6
5
  var textarea = require('./components/textarea');
7
6
  var select = require('./components/select');
@@ -45,7 +44,6 @@ var auth = require('./layouts/auth');
45
44
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
46
45
 
47
46
  var button__default = /*#__PURE__*/_interopDefault(button);
48
- var buttonIcon__default = /*#__PURE__*/_interopDefault(buttonIcon);
49
47
  var input__default = /*#__PURE__*/_interopDefault(input);
50
48
  var textarea__default = /*#__PURE__*/_interopDefault(textarea);
51
49
  var select__default = /*#__PURE__*/_interopDefault(select);
@@ -91,10 +89,6 @@ Object.defineProperty(exports, "Button", {
91
89
  enumerable: true,
92
90
  get: function () { return button__default.default; }
93
91
  });
94
- Object.defineProperty(exports, "ButtonIcon", {
95
- enumerable: true,
96
- get: function () { return buttonIcon__default.default; }
97
- });
98
92
  Object.defineProperty(exports, "Input", {
99
93
  enumerable: true,
100
94
  get: function () { return input__default.default; }