@therealtinhtute/baroiplayer 1.2.1 → 2.0.0-beta.1
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.
- package/README.md +90 -71
- package/dist/components/icons/index.d.ts +36 -0
- package/dist/components/icons/index.d.ts.map +1 -0
- package/dist/components/icons/svg-icons/ArrowLeftIcon.d.ts +4 -0
- package/dist/components/icons/svg-icons/ArrowLeftIcon.d.ts.map +1 -0
- package/dist/components/icons/svg-icons/ArrowRightIcon.d.ts +5 -0
- package/dist/components/icons/svg-icons/ArrowRightIcon.d.ts.map +1 -0
- package/dist/components/icons/svg-icons/AudioIcon.d.ts +5 -0
- package/dist/components/icons/svg-icons/AudioIcon.d.ts.map +1 -0
- package/dist/components/icons/svg-icons/BackwardIcon.d.ts +5 -0
- package/dist/components/icons/svg-icons/BackwardIcon.d.ts.map +1 -0
- package/dist/components/icons/svg-icons/CameraIcon.d.ts +5 -0
- package/dist/components/icons/svg-icons/CameraIcon.d.ts.map +1 -0
- package/dist/components/icons/svg-icons/CheckIcon.d.ts +5 -0
- package/dist/components/icons/svg-icons/CheckIcon.d.ts.map +1 -0
- package/dist/components/icons/svg-icons/EnablePiPIcon.d.ts +4 -0
- package/dist/components/icons/svg-icons/EnablePiPIcon.d.ts.map +1 -0
- package/dist/components/icons/svg-icons/ForwardIcon.d.ts +5 -0
- package/dist/components/icons/svg-icons/ForwardIcon.d.ts.map +1 -0
- package/dist/components/icons/svg-icons/FullscreenEnterIcon.d.ts +5 -0
- package/dist/components/icons/svg-icons/FullscreenEnterIcon.d.ts.map +1 -0
- package/dist/components/icons/svg-icons/FullscreenExitIcon.d.ts +5 -0
- package/dist/components/icons/svg-icons/FullscreenExitIcon.d.ts.map +1 -0
- package/dist/components/icons/svg-icons/LoadingIcon.d.ts +5 -0
- package/dist/components/icons/svg-icons/LoadingIcon.d.ts.map +1 -0
- package/dist/components/icons/svg-icons/PauseIcon.d.ts +5 -0
- package/dist/components/icons/svg-icons/PauseIcon.d.ts.map +1 -0
- package/dist/components/icons/svg-icons/PlayIcon.d.ts +5 -0
- package/dist/components/icons/svg-icons/PlayIcon.d.ts.map +1 -0
- package/dist/components/icons/svg-icons/PlaybackSpeedIcon.d.ts +5 -0
- package/dist/components/icons/svg-icons/PlaybackSpeedIcon.d.ts.map +1 -0
- package/dist/components/icons/svg-icons/QualityIcon.d.ts +5 -0
- package/dist/components/icons/svg-icons/QualityIcon.d.ts.map +1 -0
- package/dist/components/icons/svg-icons/SettingsIcon.d.ts +5 -0
- package/dist/components/icons/svg-icons/SettingsIcon.d.ts.map +1 -0
- package/dist/components/icons/svg-icons/SliderIcon.d.ts +5 -0
- package/dist/components/icons/svg-icons/SliderIcon.d.ts.map +1 -0
- package/dist/components/icons/svg-icons/SubtitleIcon.d.ts +5 -0
- package/dist/components/icons/svg-icons/SubtitleIcon.d.ts.map +1 -0
- package/dist/components/icons/svg-icons/SubtitleOffIcon.d.ts +5 -0
- package/dist/components/icons/svg-icons/SubtitleOffIcon.d.ts.map +1 -0
- package/dist/components/icons/svg-icons/UnPiPIcon.d.ts +4 -0
- package/dist/components/icons/svg-icons/UnPiPIcon.d.ts.map +1 -0
- package/dist/components/icons/svg-icons/VolumeMutedIcon.d.ts +5 -0
- package/dist/components/icons/svg-icons/VolumeMutedIcon.d.ts.map +1 -0
- package/dist/components/icons/svg-icons/VolumeOneIcon.d.ts +5 -0
- package/dist/components/icons/svg-icons/VolumeOneIcon.d.ts.map +1 -0
- package/dist/components/icons/svg-icons/VolumeThreeIcon.d.ts +5 -0
- package/dist/components/icons/svg-icons/VolumeThreeIcon.d.ts.map +1 -0
- package/dist/components/icons/svg-icons/VolumeTwoIcon.d.ts +5 -0
- package/dist/components/icons/svg-icons/VolumeTwoIcon.d.ts.map +1 -0
- package/dist/components/variants/gradient/gradient-audio.d.ts +13 -0
- package/dist/components/variants/gradient/gradient-audio.d.ts.map +1 -0
- package/dist/components/variants/gradient/gradient-controls.d.ts +4 -0
- package/dist/components/variants/gradient/gradient-controls.d.ts.map +1 -0
- package/dist/components/variants/gradient/gradient-glyphs.d.ts +30 -0
- package/dist/components/variants/gradient/gradient-glyphs.d.ts.map +1 -0
- package/dist/components/variants/gradient/gradient-video.d.ts +16 -0
- package/dist/components/variants/gradient/gradient-video.d.ts.map +1 -0
- package/dist/index.css +1 -1
- package/dist/index.d.ts +5 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +1 -41
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +750 -5640
- package/dist/index.mjs.map +1 -1
- package/dist/package.json +3 -0
- package/package.json +110 -114
- package/src/components/variants/gradient/gradient-audio.tsx +47 -0
- package/src/components/variants/gradient/gradient-controls.tsx +254 -0
- package/src/components/variants/gradient/gradient-glyphs.test.tsx +69 -0
- package/src/components/variants/gradient/gradient-glyphs.tsx +129 -0
- package/src/components/variants/gradient/gradient-skin.css +211 -0
- package/src/components/variants/gradient/gradient-video.tsx +70 -0
- package/src/index.ts +5 -198
- package/src/test/accessibility-utils.ts +0 -59
- package/dist/context/media.js +0 -1
- package/dist/context/media.mjs +0 -3
- package/dist/context/store.js +0 -1
- package/dist/context/store.mjs +0 -3
- package/dist/context-Bzd5QCKM.cjs +0 -7
- package/dist/context-Bzd5QCKM.cjs.map +0 -1
- package/dist/context-DD_SH4tT.js +0 -1053
- package/dist/context-DD_SH4tT.js.map +0 -1
- package/dist/core-events-BRnLMB7s.cjs +0 -2
- package/dist/core-events-BRnLMB7s.cjs.map +0 -1
- package/dist/core-events-v_mKdj5p.js +0 -417
- package/dist/core-events-v_mKdj5p.js.map +0 -1
- package/dist/core-plugins-CMBv-yVh.cjs +0 -2
- package/dist/core-plugins-CMBv-yVh.cjs.map +0 -1
- package/dist/core-plugins-CqCxLkbd.js +0 -754
- package/dist/core-plugins-CqCxLkbd.js.map +0 -1
- package/dist/core.js +0 -15
- package/dist/core.js.map +0 -1
- package/dist/core.mjs +0 -960
- package/dist/core.mjs.map +0 -1
- package/dist/enhanced-components-BwjBqSA1.js +0 -2858
- package/dist/enhanced-components-BwjBqSA1.js.map +0 -1
- package/dist/enhanced-components-C-ka-XLp.cjs +0 -2
- package/dist/enhanced-components-C-ka-XLp.cjs.map +0 -1
- package/dist/hooks-B-IIWPJr.js +0 -1842
- package/dist/hooks-B-IIWPJr.js.map +0 -1
- package/dist/hooks-DcHzmBwA.cjs +0 -4
- package/dist/hooks-DcHzmBwA.cjs.map +0 -1
- package/dist/minimal-components-BYsMQde5.js +0 -1610
- package/dist/minimal-components-BYsMQde5.js.map +0 -1
- package/dist/minimal-components-CsxQbDp7.cjs +0 -2
- package/dist/minimal-components-CsxQbDp7.cjs.map +0 -1
- package/dist/minimal-components.css +0 -1
- package/dist/mona-loading.gif +0 -0
- package/dist/performance-monitor-DCSijLJg.js +0 -312
- package/dist/performance-monitor-DCSijLJg.js.map +0 -1
- package/dist/performance-monitor-wNFKmqMr.cjs +0 -2
- package/dist/performance-monitor-wNFKmqMr.cjs.map +0 -1
- package/dist/rolldown-runtime-BmowowmI.js +0 -14
- package/dist/rolldown-runtime-mLOUI7ql.cjs +0 -1
- package/dist/utils-D2gQ7c2R.js +0 -64
- package/dist/utils-D2gQ7c2R.js.map +0 -1
- package/dist/utils-DJaAwiZ9.cjs +0 -2
- package/dist/utils-DJaAwiZ9.cjs.map +0 -1
- package/dist/utils.js +0 -1
- package/dist/utils.mjs +0 -3
- package/src/adapters/videojs-adapter.tsx +0 -470
- package/src/assets/mona-loading.gif +0 -0
- package/src/components/AnimateLoading.tsx +0 -111
- package/src/components/LoadingState.tsx +0 -239
- package/src/components/__tests__/media-player-accessibility.test.tsx +0 -510
- package/src/components/__tests__/media-player-react19.test.tsx +0 -457
- package/src/components/accessibility/keyboard-help-overlay.tsx +0 -207
- package/src/components/audio-player.tsx +0 -85
- package/src/components/basic/index.ts +0 -37
- package/src/components/enhanced/advanced-features.tsx +0 -311
- package/src/components/enhanced/debug-panel.tsx +0 -448
- package/src/components/enhanced/enhanced-controls.tsx +0 -597
- package/src/components/enhanced/enhanced-media-player.tsx +0 -566
- package/src/components/enhanced/error-handling.tsx +0 -338
- package/src/components/enhanced/index.ts +0 -39
- package/src/components/enhanced/media-player-enhanced.tsx +0 -383
- package/src/components/examples/basic-video-player.tsx +0 -50
- package/src/components/examples/custom-controls-example.tsx +0 -63
- package/src/components/examples/enhanced-controls-example.tsx +0 -100
- package/src/components/examples/enhanced-media-player-example.tsx +0 -302
- package/src/components/examples/loading-states-demo.tsx +0 -141
- package/src/components/examples/react-19-demo.tsx +0 -349
- package/src/components/examples/volume-orientation-demo.tsx +0 -105
- package/src/components/icon-demo.tsx +0 -196
- package/src/components/legacy.tsx +0 -87
- package/src/components/media-metadata-display.tsx +0 -99
- package/src/components/media-player-audio.tsx +0 -39
- package/src/components/media-player-controls.tsx +0 -223
- package/src/components/media-player-error.tsx +0 -163
- package/src/components/media-player-fullscreen.tsx +0 -109
- package/src/components/media-player-hls.tsx +0 -111
- package/src/components/media-player-loading.tsx +0 -76
- package/src/components/media-player-play.tsx +0 -75
- package/src/components/media-player-root.tsx +0 -338
- package/src/components/media-player-seek.tsx +0 -168
- package/src/components/media-player-time.tsx +0 -99
- package/src/components/media-player-tooltip.tsx +0 -58
- package/src/components/media-player-video.tsx +0 -54
- package/src/components/media-player-volume.tsx +0 -155
- package/src/components/media-player.tsx +0 -292
- package/src/components/media-suspense.tsx +0 -344
- package/src/components/player-settings-form.tsx +0 -158
- package/src/components/react-player-wrapper.tsx +0 -651
- package/src/components/simple-video-player.tsx +0 -62
- package/src/components/ui/blur-poster.tsx +0 -96
- package/src/components/ui/empty-state.tsx +0 -91
- package/src/components/ui/enhanced-seek-bar.tsx +0 -254
- package/src/components/ui/error-state.tsx +0 -124
- package/src/components/ui/fullscreen-button.tsx +0 -81
- package/src/components/ui/loading-skeleton.tsx +0 -107
- package/src/components/ui/media-resource-preloader.tsx +0 -458
- package/src/components/ui/offline-message.tsx +0 -98
- package/src/components/ui/play-button.tsx +0 -99
- package/src/components/ui/seek-bar.tsx +0 -191
- package/src/components/ui/time-display.tsx +0 -61
- package/src/components/ui/volume-control.tsx +0 -190
- package/src/components/unified/base-media-player.tsx +0 -252
- package/src/components/unified/media-player.tsx +0 -75
- package/src/components/variants/minimal/AccessibleMinimalPlayer.tsx +0 -587
- package/src/components/variants/minimal/EnhancedMinimalMediaPlayer.tsx +0 -573
- package/src/components/variants/minimal/MinimalControls.tsx +0 -124
- package/src/components/variants/minimal/MinimalLoading.tsx +0 -28
- package/src/components/variants/minimal/MinimalMediaPlayer.tsx +0 -318
- package/src/components/variants/minimal/MinimalOverlay.tsx +0 -58
- package/src/components/variants/minimal/MinimalPlayButton.tsx +0 -56
- package/src/components/variants/minimal/MinimalSeekBar.tsx +0 -140
- package/src/components/variants/minimal/MinimalVolumeControl.tsx +0 -75
- package/src/components/variants/minimal/SimpleMinimalPlayer.tsx +0 -206
- package/src/components/variants/minimal/components/CenterPlayButton.tsx +0 -22
- package/src/components/variants/minimal/components/ControlBar.tsx +0 -142
- package/src/components/variants/minimal/components/EnhancedSettingsMenu.tsx +0 -412
- package/src/components/variants/minimal/components/PlaybackControls.tsx +0 -46
- package/src/components/variants/minimal/components/RightControls.tsx +0 -164
- package/src/components/variants/minimal/components/SeekBar.tsx +0 -127
- package/src/components/variants/minimal/components/SettingsDropdown.tsx +0 -68
- package/src/components/variants/minimal/components/SubtitleDisplay.tsx +0 -21
- package/src/components/variants/minimal/components/TimeDisplay.tsx +0 -15
- package/src/components/variants/minimal/components/VideoElement.tsx +0 -35
- package/src/components/variants/minimal/components/VolumeControl.tsx +0 -220
- package/src/components/variants/minimal/index.ts +0 -23
- package/src/components/video-player.tsx +0 -100
- package/src/context/__tests__/media-store.test.ts +0 -509
- package/src/context/error-handling.ts +0 -398
- package/src/context/media-context.tsx +0 -254
- package/src/context/media-provider.tsx +0 -264
- package/src/context/media-store.ts +0 -387
- package/src/context/persistence.ts +0 -462
- package/src/core/events/event-system.ts +0 -448
- package/src/core/events/hooks.ts +0 -325
- package/src/core/events/index.ts +0 -22
- package/src/core/events/middleware.ts +0 -286
- package/src/core/index.ts +0 -22
- package/src/core/optimization/bundle-optimizer.tsx +0 -312
- package/src/core/performance/cicd.ts +0 -98
- package/src/core/performance/index.ts +0 -38
- package/src/core/performance/media-loading-optimizer.ts +0 -545
- package/src/core/performance/performance-budgets.ts +0 -437
- package/src/core/performance/performance-monitor.tsx +0 -488
- package/src/core/performance/performance-testing.ts +0 -461
- package/src/core/plugins/__tests__/registry.test.ts +0 -595
- package/src/core/plugins/base-plugin.ts +0 -225
- package/src/core/plugins/enhanced-plugin-system.ts +0 -435
- package/src/core/plugins/examples/analytics-plugin.ts +0 -241
- package/src/core/plugins/index.ts +0 -39
- package/src/core/plugins/registry.ts +0 -546
- package/src/core/plugins/types.ts +0 -169
- package/src/core/plugins/utils.ts +0 -317
- package/src/core/progressive-loading.tsx +0 -331
- package/src/core/providers/enhanced-hls-provider.ts +0 -307
- package/src/core/providers/lazy-provider.tsx +0 -14
- package/src/core/providers/service-provider.tsx +0 -164
- package/src/core/utils.tsx +0 -34
- package/src/features/media-session/media-session-manager.ts +0 -411
- package/src/features/picture-in-picture/pip-manager.ts +0 -428
- package/src/features/playlist/playlist-manager.ts +0 -626
- package/src/features/subtitles/subtitle-manager.ts +0 -435
- package/src/features/subtitles/subtitle-parser.ts +0 -284
- package/src/features/thumbnails/thumbnail-generator.ts +0 -528
- package/src/hooks/__tests__/currentTime-fix.test.ts +0 -149
- package/src/hooks/__tests__/use-media-player.test.ts +0 -712
- package/src/hooks/__tests__/use-media-state.test.tsx +0 -316
- package/src/hooks/accessibility/index.ts +0 -27
- package/src/hooks/accessibility/use-accessibility-preferences.ts +0 -190
- package/src/hooks/accessibility/use-focus-management.ts +0 -183
- package/src/hooks/accessibility/use-keyboard-shortcuts.ts +0 -152
- package/src/hooks/accessibility/use-screen-reader.ts +0 -212
- package/src/hooks/core/index.ts +0 -47
- package/src/hooks/legacy.ts +0 -21
- package/src/hooks/use-buffer-health.ts +0 -218
- package/src/hooks/use-enhanced-media-player.ts +0 -575
- package/src/hooks/use-focus-trap.tsx +0 -162
- package/src/hooks/use-intelligent-preloading.ts +0 -387
- package/src/hooks/use-keyboard-controls.ts +0 -115
- package/src/hooks/use-keyboard-shortcuts.ts +0 -255
- package/src/hooks/use-media-actions.ts +0 -184
- package/src/hooks/use-media-metadata.ts +0 -91
- package/src/hooks/use-media-optimistic.ts +0 -264
- package/src/hooks/use-media-player.ts +0 -343
- package/src/hooks/use-media-state.ts +0 -194
- package/src/hooks/use-memory-optimization.ts +0 -360
- package/src/hooks/use-network-status.ts +0 -124
- package/src/hooks/use-optimistic-controls.ts +0 -95
- package/src/hooks/use-optimized-media.ts +0 -283
- package/src/hooks/use-smart-preload.ts +0 -229
- package/src/hooks/use-touch-gestures.ts +0 -461
- package/src/hooks/useEnhancedSubtitles.ts +0 -258
- package/src/hooks/useKeyboardShortcuts.ts +0 -106
- package/src/hooks/useMediaControls.ts +0 -52
- package/src/hooks/useScreenshot.ts +0 -77
- package/src/hooks/useSubtitles.ts +0 -91
- package/src/hooks/useVideoPlayer.ts +0 -278
- package/src/icons/components/FullscreenIcon.tsx +0 -36
- package/src/icons/components/SettingsIcon.tsx +0 -37
- package/src/icons/components/animated/LoadingIcon.tsx +0 -27
- package/src/icons/components/animated/PlayPauseIcon.tsx +0 -42
- package/src/icons/components/media/PauseIcon.tsx +0 -38
- package/src/icons/components/media/PlayIcon.tsx +0 -37
- package/src/icons/components/volume/VolumeIcon.tsx +0 -38
- package/src/icons/components/volume/VolumeOffIcon.tsx +0 -38
- package/src/icons/index.ts +0 -56
- package/src/icons/provider.tsx +0 -58
- package/src/icons/types.ts +0 -60
- package/src/index-enhanced.ts +0 -35
- package/src/index-legacy.ts +0 -324
- package/src/index.css +0 -102
- package/src/lib/__tests__/async-utils.test.ts +0 -291
- package/src/lib/async-utils.ts +0 -194
- package/src/lib/deprecation.ts +0 -51
- package/src/lib/format-time.ts +0 -37
- package/src/lib/index.ts +0 -4
- package/src/lib/utils.ts +0 -6
- package/src/styles/globals.css +0 -462
- package/src/styles/minimal-player.css +0 -621
- package/src/styles/pixel-art.css +0 -41
- package/src/styles/videojs.css +0 -100
- package/src/types/assets.d.ts +0 -29
- package/src/types/events.ts +0 -47
- package/src/types/formats.ts +0 -79
- package/src/types/index.ts +0 -203
- package/src/types/videojs-plugins.d.ts +0 -14
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
import {
|
|
4
|
+
MinimalExitFullscreenIcon,
|
|
5
|
+
MinimalFullscreenIcon,
|
|
6
|
+
MinimalPauseIcon,
|
|
7
|
+
MinimalPlayIcon,
|
|
8
|
+
MinimalSettingsIcon,
|
|
9
|
+
MinimalSpeedIcon,
|
|
10
|
+
MinimalSpinner,
|
|
11
|
+
MinimalSubtitleIcon,
|
|
12
|
+
MinimalVolumeMutedIcon
|
|
13
|
+
} from "../../icons"
|
|
14
|
+
import ArrowLeftIcon from "../../icons/svg-icons/ArrowLeftIcon"
|
|
15
|
+
import ArrowRightIcon from "../../icons/svg-icons/ArrowRightIcon"
|
|
16
|
+
import AudioIcon from "../../icons/svg-icons/AudioIcon"
|
|
17
|
+
import BackwardIcon from "../../icons/svg-icons/BackwardIcon"
|
|
18
|
+
import CheckIcon from "../../icons/svg-icons/CheckIcon"
|
|
19
|
+
import EnablePiPIcon from "../../icons/svg-icons/EnablePiPIcon"
|
|
20
|
+
import ForwardIcon from "../../icons/svg-icons/ForwardIcon"
|
|
21
|
+
import QualityIcon from "../../icons/svg-icons/QualityIcon"
|
|
22
|
+
import SliderIcon from "../../icons/svg-icons/SliderIcon"
|
|
23
|
+
import SubtitleOffIcon from "../../icons/svg-icons/SubtitleOffIcon"
|
|
24
|
+
import UnPiPIcon from "../../icons/svg-icons/UnPiPIcon"
|
|
25
|
+
import VolumeOneIcon from "../../icons/svg-icons/VolumeOneIcon"
|
|
26
|
+
import VolumeThreeIcon from "../../icons/svg-icons/VolumeThreeIcon"
|
|
27
|
+
import VolumeTwoIcon from "../../icons/svg-icons/VolumeTwoIcon"
|
|
28
|
+
|
|
29
|
+
export interface GradientGlyphProps {
|
|
30
|
+
size?: number
|
|
31
|
+
className?: string
|
|
32
|
+
color?: string
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
const glyphProps = (size = 24, className = "", color = "currentColor") => ({
|
|
36
|
+
width: size,
|
|
37
|
+
height: size,
|
|
38
|
+
className,
|
|
39
|
+
style: { color }
|
|
40
|
+
})
|
|
41
|
+
|
|
42
|
+
export const GradientPlayIcon = ({ size, className, color }: GradientGlyphProps) => (
|
|
43
|
+
<MinimalPlayIcon size={size} className={className} color={color} />
|
|
44
|
+
)
|
|
45
|
+
|
|
46
|
+
export const GradientPauseIcon = ({ size, className, color }: GradientGlyphProps) => (
|
|
47
|
+
<MinimalPauseIcon size={size} className={className} color={color} />
|
|
48
|
+
)
|
|
49
|
+
|
|
50
|
+
export const GradientVolumeMutedIcon = ({ size, className, color }: GradientGlyphProps) => (
|
|
51
|
+
<MinimalVolumeMutedIcon size={size} className={className} color={color} />
|
|
52
|
+
)
|
|
53
|
+
|
|
54
|
+
/** Level-switched volume glyph: `off`/`low`/`medium`/`high` → the four v1 volume SVGs. */
|
|
55
|
+
export const GradientVolumeLevelIcon = ({ level, size, className, color }: GradientGlyphProps & { level: "off" | "low" | "medium" | "high" }) => {
|
|
56
|
+
const props = glyphProps(size, className, color)
|
|
57
|
+
if (level === "off") return <VolumeOneIcon {...props} />
|
|
58
|
+
if (level === "low") return <VolumeOneIcon {...props} />
|
|
59
|
+
if (level === "medium") return <VolumeTwoIcon {...props} />
|
|
60
|
+
return <VolumeThreeIcon {...props} />
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
export const GradientFullscreenIcon = ({ size, className, color }: GradientGlyphProps) => (
|
|
64
|
+
<MinimalFullscreenIcon size={size} className={className} color={color} />
|
|
65
|
+
)
|
|
66
|
+
|
|
67
|
+
export const GradientExitFullscreenIcon = ({ size, className, color }: GradientGlyphProps) => (
|
|
68
|
+
<MinimalExitFullscreenIcon size={size} className={className} color={color} />
|
|
69
|
+
)
|
|
70
|
+
|
|
71
|
+
export const GradientCaptionsOnIcon = ({ size, className, color }: GradientGlyphProps) => (
|
|
72
|
+
<MinimalSubtitleIcon size={size} className={className} color={color} />
|
|
73
|
+
)
|
|
74
|
+
|
|
75
|
+
export const GradientCaptionsOffIcon = ({ size, className, color }: GradientGlyphProps) => (
|
|
76
|
+
<SubtitleOffIcon {...glyphProps(size, className, color)} />
|
|
77
|
+
)
|
|
78
|
+
|
|
79
|
+
export const GradientSpeedIcon = ({ size, className, color }: GradientGlyphProps) => (
|
|
80
|
+
<MinimalSpeedIcon size={size} className={className} color={color} />
|
|
81
|
+
)
|
|
82
|
+
|
|
83
|
+
export const GradientBackward10Icon = ({ size, className, color }: GradientGlyphProps) => (
|
|
84
|
+
<BackwardIcon {...glyphProps(size, className, color)} />
|
|
85
|
+
)
|
|
86
|
+
|
|
87
|
+
export const GradientForward10Icon = ({ size, className, color }: GradientGlyphProps) => (
|
|
88
|
+
<ForwardIcon {...glyphProps(size, className, color)} />
|
|
89
|
+
)
|
|
90
|
+
|
|
91
|
+
export const GradientSpinnerIcon = ({ size, className, color }: GradientGlyphProps) => (
|
|
92
|
+
<MinimalSpinner size={size} className={className} color={color} />
|
|
93
|
+
)
|
|
94
|
+
|
|
95
|
+
export const GradientPiPEnterIcon = ({ size, className, color }: GradientGlyphProps) => (
|
|
96
|
+
<EnablePiPIcon {...glyphProps(size, className, color)} />
|
|
97
|
+
)
|
|
98
|
+
|
|
99
|
+
export const GradientPiPExitIcon = ({ size, className, color }: GradientGlyphProps) => (
|
|
100
|
+
<UnPiPIcon {...glyphProps(size, className, color)} />
|
|
101
|
+
)
|
|
102
|
+
|
|
103
|
+
export const GradientSettingsIcon = ({ size, className, color }: GradientGlyphProps) => (
|
|
104
|
+
<MinimalSettingsIcon size={size} className={className} color={color} />
|
|
105
|
+
)
|
|
106
|
+
|
|
107
|
+
export const GradientQualityIcon = ({ size, className, color }: GradientGlyphProps) => (
|
|
108
|
+
<QualityIcon {...glyphProps(size, className, color)} />
|
|
109
|
+
)
|
|
110
|
+
|
|
111
|
+
export const GradientCheckIcon = ({ size, className, color }: GradientGlyphProps) => (
|
|
112
|
+
<CheckIcon {...glyphProps(size, className, color)} />
|
|
113
|
+
)
|
|
114
|
+
|
|
115
|
+
export const GradientArrowLeftIcon = ({ size, className, color }: GradientGlyphProps) => (
|
|
116
|
+
<ArrowLeftIcon {...glyphProps(size, className, color)} />
|
|
117
|
+
)
|
|
118
|
+
|
|
119
|
+
export const GradientArrowRightIcon = ({ size, className, color }: GradientGlyphProps) => (
|
|
120
|
+
<ArrowRightIcon {...glyphProps(size, className, color)} />
|
|
121
|
+
)
|
|
122
|
+
|
|
123
|
+
export const GradientSliderThumbIcon = ({ size, className, color }: GradientGlyphProps) => (
|
|
124
|
+
<SliderIcon {...glyphProps(size, className, color)} />
|
|
125
|
+
)
|
|
126
|
+
|
|
127
|
+
export const GradientAudioIcon = ({ size, className, color }: GradientGlyphProps) => (
|
|
128
|
+
<AudioIcon {...glyphProps(size, className, color)} />
|
|
129
|
+
)
|
|
@@ -0,0 +1,211 @@
|
|
|
1
|
+
/* Gradient skin — BaroiPlayer's design layer on Video.js v10 skins. */
|
|
2
|
+
|
|
3
|
+
.gradient-skin {
|
|
4
|
+
--media-accent-color: #06b6d4;
|
|
5
|
+
--media-accent-text-color: #062a33;
|
|
6
|
+
--media-border-radius: 0.75rem;
|
|
7
|
+
--gradient-accent-from: #22d3ee;
|
|
8
|
+
--gradient-accent-to: #0891b2;
|
|
9
|
+
color: #ffffff;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
/* Video frame */
|
|
13
|
+
.gradient-video {
|
|
14
|
+
position: relative;
|
|
15
|
+
background: #000000;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.gradient-video-element {
|
|
19
|
+
width: 100%;
|
|
20
|
+
height: 100%;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/* Audio frame */
|
|
24
|
+
.gradient-audio {
|
|
25
|
+
position: relative;
|
|
26
|
+
background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #0f172a 100%);
|
|
27
|
+
border-radius: var(--media-border-radius);
|
|
28
|
+
padding: 1.5rem 1.5rem 0.75rem;
|
|
29
|
+
min-width: 320px;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.gradient-audio-title {
|
|
33
|
+
margin: 0 0 1rem;
|
|
34
|
+
font-size: 1rem;
|
|
35
|
+
font-weight: 600;
|
|
36
|
+
color: #e2e8f0;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/* Control bar: glassy gradient, v1 minimal-player lineage */
|
|
40
|
+
.gradient-controls {
|
|
41
|
+
position: absolute;
|
|
42
|
+
inset-inline: 0;
|
|
43
|
+
bottom: 0;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.gradient-controls-backdrop {
|
|
47
|
+
background: linear-gradient(to top, rgba(2, 6, 23, 0.92) 0%, rgba(2, 6, 23, 0.6) 60%, transparent 100%);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.gradient-controls-content {
|
|
51
|
+
display: flex;
|
|
52
|
+
align-items: center;
|
|
53
|
+
gap: 0.25rem;
|
|
54
|
+
padding: 0.5rem 0.75rem;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.gradient-controls-primary,
|
|
58
|
+
.gradient-controls-secondary {
|
|
59
|
+
display: flex;
|
|
60
|
+
align-items: center;
|
|
61
|
+
gap: 0.125rem;
|
|
62
|
+
flex-shrink: 0;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.gradient-controls-time {
|
|
66
|
+
display: flex;
|
|
67
|
+
align-items: center;
|
|
68
|
+
gap: 0.5rem;
|
|
69
|
+
flex: 1 1 auto;
|
|
70
|
+
min-width: 0;
|
|
71
|
+
padding: 0 0.5rem;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.gradient-control-btn {
|
|
75
|
+
display: inline-flex;
|
|
76
|
+
align-items: center;
|
|
77
|
+
justify-content: center;
|
|
78
|
+
width: 2.5rem;
|
|
79
|
+
height: 2.5rem;
|
|
80
|
+
border-radius: 9999px;
|
|
81
|
+
color: #ffffff;
|
|
82
|
+
background: none;
|
|
83
|
+
border: none;
|
|
84
|
+
transition: color 200ms ease, transform 200ms ease;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.gradient-control-btn:hover {
|
|
88
|
+
color: var(--gradient-accent-from);
|
|
89
|
+
transform: scale(1.08);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.gradient-control-btn:active {
|
|
93
|
+
transform: scale(0.95);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.gradient-control-btn:focus-visible {
|
|
97
|
+
outline: 2px solid var(--gradient-accent-from);
|
|
98
|
+
outline-offset: 2px;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
/* Sliders */
|
|
102
|
+
.gradient-seekbar,
|
|
103
|
+
.gradient-volume-slider {
|
|
104
|
+
--media-slider-preview-offset: -2.5rem;
|
|
105
|
+
flex: 1 1 auto;
|
|
106
|
+
min-width: 0;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.gradient-volume-slider {
|
|
110
|
+
flex: 0 0 5rem;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.gradient-slider-track {
|
|
114
|
+
height: 4px;
|
|
115
|
+
border-radius: 9999px;
|
|
116
|
+
background: rgba(255, 255, 255, 0.25);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.gradient-slider-fill {
|
|
120
|
+
background: linear-gradient(90deg, var(--gradient-accent-from), var(--gradient-accent-to));
|
|
121
|
+
border-radius: 9999px;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.gradient-slider-thumb {
|
|
125
|
+
width: 20px;
|
|
126
|
+
height: 20px;
|
|
127
|
+
margin-top: -8px;
|
|
128
|
+
border-radius: 9999px;
|
|
129
|
+
background: #ffffff;
|
|
130
|
+
color: var(--gradient-accent-to);
|
|
131
|
+
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
|
|
132
|
+
display: flex;
|
|
133
|
+
align-items: center;
|
|
134
|
+
justify-content: center;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.gradient-slider-thumb:hover {
|
|
138
|
+
transform: scale(1.15);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
/* Time */
|
|
142
|
+
.gradient-time,
|
|
143
|
+
.gradient-time-sep {
|
|
144
|
+
font-variant-numeric: tabular-nums;
|
|
145
|
+
font-size: 0.8rem;
|
|
146
|
+
color: rgba(255, 255, 255, 0.85);
|
|
147
|
+
white-space: nowrap;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.gradient-time-sep {
|
|
151
|
+
margin: 0 0.2rem;
|
|
152
|
+
color: rgba(255, 255, 255, 0.4);
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
/* Buffering spinner */
|
|
156
|
+
.gradient-buffering {
|
|
157
|
+
position: absolute;
|
|
158
|
+
inset: 0;
|
|
159
|
+
display: flex;
|
|
160
|
+
align-items: center;
|
|
161
|
+
justify-content: center;
|
|
162
|
+
pointer-events: none;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.gradient-spinner {
|
|
166
|
+
color: var(--gradient-accent-from);
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
/* Menus */
|
|
170
|
+
.gradient-menu-popup {
|
|
171
|
+
z-index: 60;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.gradient-menu {
|
|
175
|
+
background: rgba(15, 23, 42, 0.96);
|
|
176
|
+
border: 1px solid rgba(148, 163, 184, 0.25);
|
|
177
|
+
border-radius: 0.5rem;
|
|
178
|
+
padding: 0.375rem;
|
|
179
|
+
color: #e2e8f0;
|
|
180
|
+
min-width: 11rem;
|
|
181
|
+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.gradient-menu-item {
|
|
185
|
+
display: flex;
|
|
186
|
+
align-items: center;
|
|
187
|
+
gap: 0.5rem;
|
|
188
|
+
padding: 0.375rem 0.5rem;
|
|
189
|
+
border-radius: 0.375rem;
|
|
190
|
+
font-size: 0.85rem;
|
|
191
|
+
cursor: pointer;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.gradient-menu-item[data-highlighted] {
|
|
195
|
+
background: rgba(6, 182, 212, 0.18);
|
|
196
|
+
color: #ffffff;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.gradient-menu-label {
|
|
200
|
+
flex: 1 1 auto;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
/* Tooltip */
|
|
204
|
+
.gradient-tooltip {
|
|
205
|
+
background: rgba(15, 23, 42, 0.95);
|
|
206
|
+
border: 1px solid rgba(148, 163, 184, 0.25);
|
|
207
|
+
border-radius: 0.375rem;
|
|
208
|
+
padding: 0.25rem 0.5rem;
|
|
209
|
+
font-size: 0.75rem;
|
|
210
|
+
color: #e2e8f0;
|
|
211
|
+
}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
import "@videojs/react/video/skin.css"
|
|
4
|
+
import "./gradient-skin.css"
|
|
5
|
+
import { Video, VideoPlayer } from "@videojs/react/video"
|
|
6
|
+
import { BufferingIndicator, Container, Dialog, ErrorDialog, Gesture, Hotkey, Poster } from "@videojs/react"
|
|
7
|
+
import { GradientSpinnerIcon } from "./gradient-glyphs"
|
|
8
|
+
import { GradientControls } from "./gradient-controls"
|
|
9
|
+
|
|
10
|
+
export interface GradientVideoProps {
|
|
11
|
+
src: string
|
|
12
|
+
poster?: string
|
|
13
|
+
className?: string
|
|
14
|
+
autoPlay?: boolean
|
|
15
|
+
playsInline?: boolean
|
|
16
|
+
loop?: boolean
|
|
17
|
+
title?: string
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* Gradient skin on Video.js v10 — `VideoPlayer` + `Video` from the preset, with a
|
|
22
|
+
* BaroiPlayer-owned skin layer (ejected per the upstream customize-skins model) that binds
|
|
23
|
+
* the untouched v1 glyphs through v10 `render` props.
|
|
24
|
+
*/
|
|
25
|
+
export function GradientVideo({ src, poster, className, autoPlay, playsInline, loop, title }: GradientVideoProps) {
|
|
26
|
+
return (
|
|
27
|
+
<VideoPlayer title={title}>
|
|
28
|
+
<Container className={`gradient-skin gradient-video ${className ?? ""}`} data-theme="gradient" data-preset="video">
|
|
29
|
+
<Video src={src} autoPlay={autoPlay} loop={loop} playsInline={playsInline ?? true} className="gradient-video-element" />
|
|
30
|
+
{poster ? (
|
|
31
|
+
<Poster.Root>
|
|
32
|
+
<Poster.Image className="gradient-poster" />
|
|
33
|
+
</Poster.Root>
|
|
34
|
+
) : null}
|
|
35
|
+
<BufferingIndicator
|
|
36
|
+
className="gradient-buffering"
|
|
37
|
+
render={(props, state) => (
|
|
38
|
+
<div {...props}>{state.visible && <GradientSpinnerIcon size={48} className="gradient-spinner" />}</div>
|
|
39
|
+
)}
|
|
40
|
+
/>
|
|
41
|
+
<ErrorDialog.Root>
|
|
42
|
+
<Dialog.Backdrop className="media-dialog-backdrop" />
|
|
43
|
+
<Dialog.Popup className="media-dialog-popup">
|
|
44
|
+
<div className="media-dialog-content">
|
|
45
|
+
<ErrorDialog.Title className="media-dialog-title" />
|
|
46
|
+
<ErrorDialog.Description className="media-dialog-description" />
|
|
47
|
+
</div>
|
|
48
|
+
<div className="media-dialog-actions">
|
|
49
|
+
<ErrorDialog.Close className="media-dialog-close">Dismiss</ErrorDialog.Close>
|
|
50
|
+
</div>
|
|
51
|
+
</Dialog.Popup>
|
|
52
|
+
</ErrorDialog.Root>
|
|
53
|
+
<GradientControls />
|
|
54
|
+
<Hotkey keys="f" action="toggleFullscreen" />
|
|
55
|
+
<Hotkey keys="c" action="toggleSubtitles" />
|
|
56
|
+
<Hotkey keys="i" action="togglePictureInPicture" />
|
|
57
|
+
<Hotkey keys="Space" action="togglePaused" />
|
|
58
|
+
<Hotkey keys="k" action="togglePaused" />
|
|
59
|
+
<Hotkey keys="m" action="toggleMuted" />
|
|
60
|
+
<Hotkey keys="ArrowRight" action="seekStep" />
|
|
61
|
+
<Hotkey keys="ArrowLeft" action="seekStep" />
|
|
62
|
+
<Gesture type="tap" action="togglePaused" pointer="mouse" region="center" />
|
|
63
|
+
<Gesture type="tap" action="toggleControls" pointer="touch" />
|
|
64
|
+
<Gesture type="doubletap" action="seekStep" region="left" />
|
|
65
|
+
<Gesture type="doubletap" action="toggleFullscreen" region="center" />
|
|
66
|
+
<Gesture type="doubletap" action="seekStep" region="right" />
|
|
67
|
+
</Container>
|
|
68
|
+
</VideoPlayer>
|
|
69
|
+
)
|
|
70
|
+
}
|
package/src/index.ts
CHANGED
|
@@ -1,201 +1,8 @@
|
|
|
1
1
|
// ========================================
|
|
2
|
-
// 🎯 BaroiPlayer -
|
|
2
|
+
// 🎯 BaroiPlayer v2 - Gradient Skins (Video.js v10)
|
|
3
3
|
// ========================================
|
|
4
|
-
// Main media player components - use these for most cases
|
|
5
4
|
|
|
6
|
-
|
|
7
|
-
export {
|
|
8
|
-
export {
|
|
9
|
-
export {
|
|
10
|
-
|
|
11
|
-
// Modern Compound Components (Advanced)
|
|
12
|
-
export { MediaPlayerRoot } from "./components/media-player-root"
|
|
13
|
-
export type { MediaPlayerRootProps } from "./components/media-player-root"
|
|
14
|
-
|
|
15
|
-
// Enhanced Player (React 19 Optimized)
|
|
16
|
-
export { EnhancedMediaPlayer } from "./components/enhanced/media-player-enhanced"
|
|
17
|
-
|
|
18
|
-
// ========================================
|
|
19
|
-
// 🎨 Component Variants
|
|
20
|
-
// ========================================
|
|
21
|
-
// Specialized player variants for different use cases
|
|
22
|
-
|
|
23
|
-
// Minimal Player (Clean & Simple)
|
|
24
|
-
export {
|
|
25
|
-
MinimalMediaPlayer,
|
|
26
|
-
SimpleMinimalPlayer
|
|
27
|
-
} from "./components/variants/minimal"
|
|
28
|
-
export type { MinimalMediaPlayerProps } from "./components/variants/minimal"
|
|
29
|
-
|
|
30
|
-
// ========================================
|
|
31
|
-
// 🛠️ Advanced Features
|
|
32
|
-
// ========================================
|
|
33
|
-
// Advanced components for specific requirements
|
|
34
|
-
|
|
35
|
-
// HLS Streaming
|
|
36
|
-
export { MediaPlayerHLS } from "./components/media-player-hls"
|
|
37
|
-
|
|
38
|
-
// Enhanced Controls & Features
|
|
39
|
-
export {
|
|
40
|
-
ChaptersPanel,
|
|
41
|
-
PictureInPictureButton,
|
|
42
|
-
PlaybackSpeedSelector,
|
|
43
|
-
QualitySelector,
|
|
44
|
-
SubtitleSelector
|
|
45
|
-
} from "./components/enhanced/advanced-features"
|
|
46
|
-
|
|
47
|
-
// Enhanced Controls
|
|
48
|
-
export {
|
|
49
|
-
EnhancedPlayButton,
|
|
50
|
-
EnhancedSeekBar,
|
|
51
|
-
EnhancedTimeDisplay,
|
|
52
|
-
EnhancedVolumeControl,
|
|
53
|
-
EnhancedControlBar
|
|
54
|
-
} from "./components/enhanced/enhanced-controls"
|
|
55
|
-
|
|
56
|
-
// React 19 Concurrent Features
|
|
57
|
-
export {
|
|
58
|
-
ConcurrentMedia,
|
|
59
|
-
MediaSuspense,
|
|
60
|
-
MediaLoading,
|
|
61
|
-
MediaErrorBoundary,
|
|
62
|
-
useDeferredMediaLoading
|
|
63
|
-
} from "./components/media-suspense"
|
|
64
|
-
|
|
65
|
-
// ========================================
|
|
66
|
-
// 🎣 Core Hooks
|
|
67
|
-
// ========================================
|
|
68
|
-
// React hooks for media player functionality
|
|
69
|
-
|
|
70
|
-
// Core Hooks (Most Used)
|
|
71
|
-
export { useMediaPlayer } from "./hooks/use-media-player"
|
|
72
|
-
export { useMediaState } from "./hooks/use-media-state"
|
|
73
|
-
export { useMediaControls } from "./hooks/useMediaControls"
|
|
74
|
-
|
|
75
|
-
// React 19 Enhanced Hooks
|
|
76
|
-
export { useEnhancedMediaPlayer } from "./hooks/use-enhanced-media-player"
|
|
77
|
-
export { useMediaActions } from "./hooks/use-media-actions"
|
|
78
|
-
export { useMediaActionState } from "./hooks/use-media-actions"
|
|
79
|
-
|
|
80
|
-
// Performance & Optimization Hooks
|
|
81
|
-
export { useIntelligentPreloading } from "./hooks/use-intelligent-preloading"
|
|
82
|
-
|
|
83
|
-
// Specialized Hooks
|
|
84
|
-
export { useKeyboardControls } from "./hooks/use-keyboard-controls"
|
|
85
|
-
|
|
86
|
-
export { useTouchGestures } from "./hooks/use-touch-gestures"
|
|
87
|
-
|
|
88
|
-
export { useScreenshot } from "./hooks/useScreenshot"
|
|
89
|
-
export { useSubtitles } from "./hooks/useSubtitles"
|
|
90
|
-
|
|
91
|
-
// ========================================
|
|
92
|
-
// 🔧 Utilities & Types
|
|
93
|
-
// ========================================
|
|
94
|
-
// Utilities, types, and helper functions
|
|
95
|
-
|
|
96
|
-
// Core Utilities
|
|
97
|
-
export { formatTime, parseTime } from "./lib/format-time"
|
|
98
|
-
export { cn } from "./lib/utils"
|
|
99
|
-
|
|
100
|
-
// Media Type Detection
|
|
101
|
-
export {
|
|
102
|
-
getMediaTypeFromUrl,
|
|
103
|
-
getMimeTypeFromUrl,
|
|
104
|
-
SUPPORTED_AUDIO_FORMATS,
|
|
105
|
-
SUPPORTED_VIDEO_FORMATS,
|
|
106
|
-
AUDIO_MIME_TYPES,
|
|
107
|
-
VIDEO_MIME_TYPES
|
|
108
|
-
} from "./types"
|
|
109
|
-
|
|
110
|
-
// Performance Monitoring
|
|
111
|
-
export { PerformanceMonitor } from "./core/performance"
|
|
112
|
-
|
|
113
|
-
// ========================================
|
|
114
|
-
// 📚 Context & State
|
|
115
|
-
// ========================================
|
|
116
|
-
// React context and state management
|
|
117
|
-
|
|
118
|
-
// Media Context
|
|
119
|
-
export { MediaProvider } from "./context/media-provider"
|
|
120
|
-
|
|
121
|
-
export {
|
|
122
|
-
useMediaContext,
|
|
123
|
-
useMediaDispatch,
|
|
124
|
-
useMediaSelector,
|
|
125
|
-
useOptimisticMediaSelector
|
|
126
|
-
} from "./context/media-context"
|
|
127
|
-
|
|
128
|
-
// Enhanced State Management (React 19)
|
|
129
|
-
export { createEnhancedMediaStore } from "./context/media-store"
|
|
130
|
-
|
|
131
|
-
// ========================================
|
|
132
|
-
// 🎨 Icons & Styling
|
|
133
|
-
// ========================================
|
|
134
|
-
// Icon components and styling utilities
|
|
135
|
-
|
|
136
|
-
// Icon Sets
|
|
137
|
-
export {
|
|
138
|
-
defaultMinimalIcons,
|
|
139
|
-
MinimalPlayIcon,
|
|
140
|
-
MinimalPauseIcon,
|
|
141
|
-
MinimalVolumeIcon,
|
|
142
|
-
MinimalFullscreenIcon
|
|
143
|
-
} from "./components/icons"
|
|
144
|
-
export type { IconProps, IconSet } from "./components/icons"
|
|
145
|
-
|
|
146
|
-
// ========================================
|
|
147
|
-
// ⚠️ Legacy Exports (Deprecated)
|
|
148
|
-
// ========================================
|
|
149
|
-
// These will be removed in v2.0 - migrate to the APIs above
|
|
150
|
-
// Each usage will show a deprecation warning in the console
|
|
151
|
-
|
|
152
|
-
// Legacy Components (with deprecation warnings)
|
|
153
|
-
export {
|
|
154
|
-
ModernMediaPlayer,
|
|
155
|
-
SimpleVideoPlayer,
|
|
156
|
-
LegacyPlayButton as PlayButton,
|
|
157
|
-
LegacySeekBar as SeekBar,
|
|
158
|
-
LegacyTimeDisplay as TimeDisplay,
|
|
159
|
-
LegacyVolumeControl as VolumeControl,
|
|
160
|
-
LegacyFullscreenButton as FullscreenButton
|
|
161
|
-
} from "./components/legacy"
|
|
162
|
-
|
|
163
|
-
// Legacy Hooks (with deprecation warnings)
|
|
164
|
-
export {
|
|
165
|
-
useVideoPlayer,
|
|
166
|
-
useEnhancedSubtitles
|
|
167
|
-
} from "./hooks/legacy"
|
|
168
|
-
|
|
169
|
-
// ========================================
|
|
170
|
-
// 🔒 Development Tools
|
|
171
|
-
// ========================================
|
|
172
|
-
// Development and debugging tools (dev only)
|
|
173
|
-
|
|
174
|
-
export { DebugPanel } from "./components/enhanced/debug-panel"
|
|
175
|
-
export { MediaResourcePreloader } from "./components/ui/media-resource-preloader"
|
|
176
|
-
|
|
177
|
-
// ========================================
|
|
178
|
-
// 📖 Type Exports
|
|
179
|
-
// ========================================
|
|
180
|
-
// Complete type definitions
|
|
181
|
-
|
|
182
|
-
export type {
|
|
183
|
-
// Core Media Types
|
|
184
|
-
MediaSource,
|
|
185
|
-
MediaFormat,
|
|
186
|
-
MediaPlayerConfig,
|
|
187
|
-
MediaPlayerState,
|
|
188
|
-
MediaCapabilities,
|
|
189
|
-
// Event Types
|
|
190
|
-
MediaEventMap,
|
|
191
|
-
MediaEventType,
|
|
192
|
-
MediaErrorEvent,
|
|
193
|
-
MediaProgressEvent,
|
|
194
|
-
MediaTimeUpdateEvent,
|
|
195
|
-
MediaVolumeChangeEvent,
|
|
196
|
-
// Component Props
|
|
197
|
-
VideoFormat,
|
|
198
|
-
AudioFormat,
|
|
199
|
-
VideoMimeType,
|
|
200
|
-
AudioMimeType
|
|
201
|
-
} from "./types"
|
|
5
|
+
export { GradientVideo } from "./components/variants/gradient/gradient-video"
|
|
6
|
+
export type { GradientVideoProps } from "./components/variants/gradient/gradient-video"
|
|
7
|
+
export { GradientAudio } from "./components/variants/gradient/gradient-audio"
|
|
8
|
+
export type { GradientAudioProps } from "./components/variants/gradient/gradient-audio"
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import { vi } from "vitest"
|
|
2
|
-
|
|
3
1
|
// Custom accessibility testing utilities
|
|
4
2
|
export const a11yTestUtils = {
|
|
5
3
|
// Test keyboard navigation
|
|
@@ -149,60 +147,3 @@ export const a11yTestUtils = {
|
|
|
149
147
|
return issues
|
|
150
148
|
}
|
|
151
149
|
}
|
|
152
|
-
|
|
153
|
-
// Mock axe-core for accessibility testing
|
|
154
|
-
export const mockAxe = {
|
|
155
|
-
run: vi.fn().mockResolvedValue({
|
|
156
|
-
violations: [],
|
|
157
|
-
passes: [],
|
|
158
|
-
incomplete: [],
|
|
159
|
-
url: "mock-url"
|
|
160
|
-
})
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
// Custom test matchers for accessibility
|
|
164
|
-
export const accessibilityMatchers = {
|
|
165
|
-
toBeAccessible: async (container: HTMLElement) => {
|
|
166
|
-
const axeResults = await mockAxe.run(container)
|
|
167
|
-
const keyboardResults = await a11yTestUtils.testKeyboardNavigation(container)
|
|
168
|
-
const ariaResults = a11yTestUtils.testAriaAttributes(container)
|
|
169
|
-
|
|
170
|
-
const allViolations = [...axeResults.violations, ...keyboardResults, ...ariaResults]
|
|
171
|
-
|
|
172
|
-
if (allViolations.length === 0) {
|
|
173
|
-
return {
|
|
174
|
-
pass: true,
|
|
175
|
-
message: () => "Element is accessible"
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
return {
|
|
180
|
-
pass: false,
|
|
181
|
-
message: () => `Accessibility violations found: ${JSON.stringify(allViolations, null, 2)}`
|
|
182
|
-
}
|
|
183
|
-
},
|
|
184
|
-
|
|
185
|
-
toHaveCorrectAria: (element: HTMLElement) => {
|
|
186
|
-
const violations = a11yTestUtils.testAriaAttributes(element.parentElement!)
|
|
187
|
-
|
|
188
|
-
return {
|
|
189
|
-
pass: violations.length === 0,
|
|
190
|
-
message: () =>
|
|
191
|
-
violations.length > 0
|
|
192
|
-
? `ARIA violations: ${JSON.stringify(violations)}`
|
|
193
|
-
: "Element has correct ARIA attributes"
|
|
194
|
-
}
|
|
195
|
-
},
|
|
196
|
-
|
|
197
|
-
toSupportKeyboardNavigation: async (container: HTMLElement) => {
|
|
198
|
-
const issues = await a11yTestUtils.testKeyboardNavigation(container)
|
|
199
|
-
|
|
200
|
-
return {
|
|
201
|
-
pass: issues.length === 0,
|
|
202
|
-
message: () =>
|
|
203
|
-
issues.length > 0
|
|
204
|
-
? `Keyboard navigation issues: ${JSON.stringify(issues)}`
|
|
205
|
-
: "Element supports keyboard navigation"
|
|
206
|
-
}
|
|
207
|
-
}
|
|
208
|
-
}
|
package/dist/context/media.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../context-Bzd5QCKM.cjs");exports.MediaActionTypes=e.a,exports.MediaContext=e.o,exports.MediaStoreContext=e.s,exports.initialMediaState=e.c,exports.useMediaContext=e.l,exports.useMediaDispatch=e.u,exports.useMediaEnhancements=e.d,exports.useMediaSelector=e.f,exports.useMediaStore=e.p,exports.useOptimisticMediaSelector=e.m;
|
package/dist/context/media.mjs
DELETED
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { a as e, c as t, d as n, f as r, l as i, m as a, o, p as s, s as c, u as l } from "../context-DD_SH4tT.js";
|
|
3
|
-
export { e as MediaActionTypes, o as MediaContext, c as MediaStoreContext, t as initialMediaState, i as useMediaContext, l as useMediaDispatch, n as useMediaEnhancements, r as useMediaSelector, s as useMediaStore, a as useOptimisticMediaSelector };
|
package/dist/context/store.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../context-Bzd5QCKM.cjs");exports.createEnhancedMediaStore=e.n;
|
package/dist/context/store.mjs
DELETED