@tiwz/react-video-player 2.0.0 → 2.0.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.
- package/README.md +103 -50
- package/dist/fonts/Kodchasan.woff2 +0 -0
- package/dist/index.css +1 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +10 -3
- package/dist/fonts/Kodchasan.ttf +0 -0
package/README.md
CHANGED
|
@@ -7,15 +7,20 @@ A modern, fully-featured, and mobile-friendly React video player component with
|
|
|
7
7
|
## ✨ Features
|
|
8
8
|
|
|
9
9
|
- 🎮 Custom video controls (no native controls UI)
|
|
10
|
-
- 📱 Mobile optimized (double-tap to seek ±10s)
|
|
10
|
+
- 📱 Mobile optimized (double-tap to seek ±10s, touch to toggle controls)
|
|
11
11
|
- ⌨️ Keyboard shortcuts support (desktop)
|
|
12
12
|
- 🖥 Fullscreen & Picture-in-Picture (PiP)
|
|
13
13
|
- 🔊 Volume control + mute toggle
|
|
14
|
+
- 🎯 Multi-quality source switching (resumes from same timestamp)
|
|
15
|
+
- ⚡ Playback speed control (0.25x – 4x)
|
|
16
|
+
- 📡 HLS streaming support via `hls.js` (optional)
|
|
14
17
|
- 🕒 Seek bar with buffered progress indicator
|
|
15
18
|
- 🚀 Smooth UX with throttled interactions
|
|
16
|
-
- 💡 Auto
|
|
19
|
+
- 💡 Auto-hide controls on inactivity
|
|
17
20
|
- 🧭 Landscape lock on fullscreen (mobile)
|
|
18
|
-
-
|
|
21
|
+
- 🔄 Loading indicator on buffering
|
|
22
|
+
- ❌ Error state UI when video fails to load
|
|
23
|
+
- 🧩 Fully typed with TypeScript
|
|
19
24
|
|
|
20
25
|
---
|
|
21
26
|
|
|
@@ -24,15 +29,11 @@ A modern, fully-featured, and mobile-friendly React video player component with
|
|
|
24
29
|
```bash
|
|
25
30
|
npm install @tiwz/react-video-player
|
|
26
31
|
```
|
|
27
|
-
|
|
28
32
|
or
|
|
29
|
-
|
|
30
33
|
```bash
|
|
31
34
|
bun add @tiwz/react-video-player
|
|
32
35
|
```
|
|
33
|
-
|
|
34
36
|
or
|
|
35
|
-
|
|
36
37
|
```bash
|
|
37
38
|
yarn add @tiwz/react-video-player
|
|
38
39
|
```
|
|
@@ -43,7 +44,7 @@ yarn add @tiwz/react-video-player
|
|
|
43
44
|
|
|
44
45
|
```tsx
|
|
45
46
|
import { VideoPlayer } from '@tiwz/react-video-player'
|
|
46
|
-
import '@tiwz/react-video-player/
|
|
47
|
+
import '@tiwz/react-video-player/style.css'
|
|
47
48
|
|
|
48
49
|
export default function App() {
|
|
49
50
|
return (
|
|
@@ -57,19 +58,71 @@ export default function App() {
|
|
|
57
58
|
|
|
58
59
|
---
|
|
59
60
|
|
|
60
|
-
## Video Types
|
|
61
|
-
```ts
|
|
62
|
-
type VideoTypes = 'video/mp4' | 'video/ogg' | 'video/webm' |'application/vnd.apple.mpegurl' | 'application/x-mpegURL'
|
|
63
|
-
```
|
|
64
|
-
|
|
65
61
|
## 🧩 Props
|
|
62
|
+
|
|
66
63
|
### VideoPlayerProps
|
|
67
64
|
|
|
68
65
|
| Prop | Type | Required | Description |
|
|
69
|
-
|
|
70
|
-
| `
|
|
71
|
-
| `title` | `string` | ❌ | Video title
|
|
72
|
-
| `
|
|
66
|
+
|------|------|----------|-------------|
|
|
67
|
+
| `source` | `string \| VideoSourceQuality[]` | ✅ | Single URL or array of quality sources |
|
|
68
|
+
| `title` | `string` | ❌ | Video title shown in top bar |
|
|
69
|
+
| `poster` | `string` | ❌ | Thumbnail image shown before playback |
|
|
70
|
+
| `hls` | `boolean \| Partial<HlsConfig>` | ❌ | Enable HLS streaming via hls.js |
|
|
71
|
+
|
|
72
|
+
### VideoSourceQuality
|
|
73
|
+
|
|
74
|
+
```ts
|
|
75
|
+
type VideoSourceQuality = {
|
|
76
|
+
src: string // Video URL
|
|
77
|
+
quality: number // e.g. 1080, 720, 480. Use 0 for Auto
|
|
78
|
+
}
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
**Example with multiple qualities:**
|
|
82
|
+
|
|
83
|
+
```tsx
|
|
84
|
+
<VideoPlayer
|
|
85
|
+
title="My Video"
|
|
86
|
+
poster="/thumbnail.jpg"
|
|
87
|
+
source={[
|
|
88
|
+
{ src: '/video-1080p.mp4', quality: 1080 },
|
|
89
|
+
{ src: '/video-720p.mp4', quality: 720 },
|
|
90
|
+
{ src: '/video-480p.mp4', quality: 480 },
|
|
91
|
+
{ src: '/video-auto.mp4', quality: 0 }, // Auto
|
|
92
|
+
]}
|
|
93
|
+
/>
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
> Quality sources are automatically sorted highest to lowest. Switching quality resumes from the same timestamp.
|
|
97
|
+
|
|
98
|
+
---
|
|
99
|
+
|
|
100
|
+
## 📡 HLS Streaming
|
|
101
|
+
|
|
102
|
+
HLS support requires `hls.js` to be installed separately (optional peer dependency):
|
|
103
|
+
|
|
104
|
+
```bash
|
|
105
|
+
npm install hls.js
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
```tsx
|
|
109
|
+
// Basic HLS
|
|
110
|
+
<VideoPlayer
|
|
111
|
+
title="Live Stream"
|
|
112
|
+
source="/stream.m3u8"
|
|
113
|
+
hls
|
|
114
|
+
/>
|
|
115
|
+
|
|
116
|
+
// HLS with custom config
|
|
117
|
+
<VideoPlayer
|
|
118
|
+
title="Live Stream"
|
|
119
|
+
source="/stream.m3u8"
|
|
120
|
+
hls={{ maxBufferLength: 30 }}
|
|
121
|
+
/>
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
> Safari uses native HLS automatically — `hls.js` is not required on Safari.
|
|
125
|
+
> If `hls.js` is not installed and `hls` prop is set, falls back to native `src` with a console warning.
|
|
73
126
|
|
|
74
127
|
---
|
|
75
128
|
|
|
@@ -78,22 +131,22 @@ type VideoTypes = 'video/mp4' | 'video/ogg' | 'video/webm' |'application/vnd.app
|
|
|
78
131
|
### Desktop
|
|
79
132
|
|
|
80
133
|
| Action | Control |
|
|
81
|
-
|
|
82
|
-
| Play / Pause | Click center
|
|
83
|
-
| Seek backward |
|
|
84
|
-
| Seek forward |
|
|
85
|
-
|
|
|
86
|
-
| Picture-in-Picture | P |
|
|
87
|
-
|
|
88
|
-
---
|
|
134
|
+
|--------|---------|
|
|
135
|
+
| Play / Pause | Click center or `Space` |
|
|
136
|
+
| Seek backward 10s | `←` Arrow |
|
|
137
|
+
| Seek forward 10s | `→` Arrow |
|
|
138
|
+
| Toggle fullscreen | `F` |
|
|
139
|
+
| Toggle Picture-in-Picture | `P` |
|
|
89
140
|
|
|
90
141
|
### Mobile
|
|
91
142
|
|
|
92
143
|
| Gesture | Action |
|
|
93
|
-
|
|
94
|
-
| Single
|
|
95
|
-
| Double
|
|
96
|
-
| Double
|
|
144
|
+
|---------|--------|
|
|
145
|
+
| Single tap | Show / hide controls |
|
|
146
|
+
| Double tap left | Seek backward 10s |
|
|
147
|
+
| Double tap right | Seek forward 10s |
|
|
148
|
+
| Consecutive taps | Stacked seek (±20s, ±30s, ...) |
|
|
149
|
+
| Drag seek bar | Seek with live preview |
|
|
97
150
|
|
|
98
151
|
---
|
|
99
152
|
|
|
@@ -101,49 +154,49 @@ type VideoTypes = 'video/mp4' | 'video/ogg' | 'video/webm' |'application/vnd.app
|
|
|
101
154
|
|
|
102
155
|
Supports all modern browsers including:
|
|
103
156
|
|
|
104
|
-
- Chrome
|
|
105
|
-
-
|
|
106
|
-
-
|
|
107
|
-
- Safari
|
|
108
|
-
- Mobile Safari
|
|
109
|
-
- Chrome Android
|
|
157
|
+
- Chrome / Edge / Firefox
|
|
158
|
+
- Safari (desktop)
|
|
159
|
+
- Mobile Safari / Chrome Android
|
|
110
160
|
|
|
111
|
-
Includes automatic **orientation lock** for landscape videos on mobile.
|
|
161
|
+
Includes automatic **orientation lock** to landscape for landscape videos on mobile.
|
|
112
162
|
|
|
113
163
|
---
|
|
114
164
|
|
|
115
165
|
## 📺 Picture-in-Picture (PiP)
|
|
116
166
|
|
|
117
|
-
Automatically enables PiP when supported by the browser.
|
|
118
|
-
|
|
119
167
|
Works on:
|
|
120
168
|
|
|
121
|
-
- Chrome
|
|
122
|
-
- Edge
|
|
169
|
+
- Chrome / Edge
|
|
123
170
|
- Safari (desktop & iPadOS)
|
|
124
171
|
|
|
172
|
+
> Automatically resumes playback when entering PiP if the video is paused.
|
|
173
|
+
|
|
125
174
|
---
|
|
126
175
|
|
|
127
176
|
## ⚡ Performance
|
|
128
177
|
|
|
129
|
-
- Throttled mouse movement
|
|
130
|
-
- Optimized re-rendering
|
|
131
|
-
-
|
|
178
|
+
- Throttled mouse movement (200ms)
|
|
179
|
+
- Optimized re-rendering via `useReducer` + `useRef`
|
|
180
|
+
- Stale closure prevention with refs for hot-path callbacks
|
|
181
|
+
- Smart seek stacking with auto-reset
|
|
182
|
+
- HLS loaded via dynamic `import()` — zero cost if unused
|
|
132
183
|
- Minimal event listeners
|
|
133
184
|
|
|
134
185
|
---
|
|
135
186
|
|
|
136
187
|
## 🧪 Browser Support
|
|
137
188
|
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
189
|
+
| Browser | Fullscreen | PiP | HLS | Orientation Lock |
|
|
190
|
+
|---------|-----------|-----|-----|-----------------|
|
|
191
|
+
| Chrome | ✅ | ✅ | ✅ (hls.js) | ✅ |
|
|
192
|
+
| Edge | ✅ | ✅ | ✅ (hls.js) | ✅ |
|
|
193
|
+
| Firefox | ✅ | ✅ | ✅ (hls.js) | ⚠️ Partial |
|
|
194
|
+
| Safari (desktop) | ✅ | ✅ | ✅ (native) | — |
|
|
195
|
+
| Mobile Safari | ✅ | ✅ (iPadOS) | ✅ (native) | ✅ |
|
|
196
|
+
| Chrome Android | ✅ | ✅ | ✅ (hls.js) | ✅ |
|
|
144
197
|
|
|
145
198
|
---
|
|
146
199
|
|
|
147
200
|
## 📄 License
|
|
148
201
|
|
|
149
|
-
MIT © tiwz
|
|
202
|
+
MIT © 2026 tiwz
|
|
Binary file
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@font-face{font-display:swap;font-family:
|
|
1
|
+
@font-face{font-display:swap;font-family:ReactVideoPlayerFontFamily;font-style:normal;font-weight:400;src:url(fonts/Kodchasan.woff2) format("woff2")}.style-module_PlayerButton__3pLMQ{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:5px;display:flex;height:30px;justify-content:center;transition:background-color .2s;width:30px}.style-module_PlayerDesktop__ccJTe .style-module_PlayerButton__3pLMQ:hover{background-color:#00b2ff;cursor:pointer}.style-module_PlayerWrapper__37Xpc,.style-module_PlayerWrapper__37Xpc *,.style-module_PlayerWrapper__37Xpc :after,.style-module_PlayerWrapper__37Xpc :before{box-sizing:border-box;color:#fff;font-family:ReactVideoPlayerFontFamily,sans-serif;font-optical-sizing:auto;font-style:normal;font-variation-settings:"wdth" 100,"YTLC" 500;font-weight:400;margin:0;padding:0}.style-module_PlayerWrapper__37Xpc{align-items:center;aspect-ratio:16/9;background-color:#000;cursor:none;display:flex;justify-content:center;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.style-module_PlayerVideo__NkoX3{height:100%;max-height:100%;max-width:100%;width:100%}.style-module_PlayerControls__IyMmM{background-color:#0000;display:flex;flex-direction:column;height:100%;left:0;opacity:0;position:absolute;top:0;transition:background-color .4s ease;visibility:hidden;width:100%}.style-module_PlayerControls__IyMmM.style-module_PlayerShown__uVIfu{background-color:#0006;cursor:default;opacity:1;visibility:visible}.style-module_PlayerPanelTop__x02Dp{align-items:center;display:flex;height:50px;padding-inline:14px}.style-module_PlayerTitle__yTvNu{flex:1;font-size:12pt;overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.style-module_PlayerPanelCenter__y8jR0{display:flex;flex:1}.style-module_PlayerSeekArea__z-qY-{align-items:center;display:flex;flex:1;height:100%;justify-content:center}.style-module_PlayerPanelBottom__bdhhD{align-items:center;display:flex;gap:10px;height:50px;padding-inline:14px;position:relative}.style-module_PlayerCurrentTime__IaolO,.style-module_PlayerDurationTime__uCgjW{font-family:monospace;font-size:13pt;padding-inline:4px}.style-module_PlayerVolume__r7ll8{align-items:center;display:flex;gap:6px;padding-right:5px}.style-module_PlayerVolumeZone__7LHeR{align-items:center;display:flex;height:4px;position:relative;width:70px}.style-module_PlayerRangeVolume__8XBa1{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;width:100%}.style-module_PlayerSeekTime__SEypx{flex:1;height:4px;position:relative}.style-module_PlayerHoverTime__iBu1D{background-color:#fff;border-radius:99px;color:#000;font-family:monospace;font-size:10pt;left:var(--player-hover-position);padding:2px 8px;position:absolute;top:-34px;transform:translateX(-50%)}.style-module_PlayerHoverTime__iBu1D:before{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #fff;content:"";height:0;left:50%;position:absolute;top:99%;transform:translateX(-50%);width:0}.style-module_PlayerRangeTime__QVr8d,.style-module_PlayerRangeVolume__8XBa1{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;background-image:linear-gradient(to right,#00b2ff var(--player-time-position),#fffa var(--player-time-position),#fffa var(--player-buffer-position),#fff6 var(--player-buffer-position));border-radius:4px;cursor:pointer;display:flex;height:100%;width:100%}.style-module_PlayerRangeTime__QVr8d::-webkit-slider-thumb,.style-module_PlayerRangeVolume__8XBa1::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;border:0;height:0;width:0}.style-module_PlayerRangeTime__QVr8d::-moz-range-thumb,.style-module_PlayerRangeVolume__8XBa1::-moz-range-thumb{-moz-appearance:none;appearance:none;border:0;height:0;width:0}.style-module_PlayerRangeTime__QVr8d::-ms-thumb,.style-module_PlayerRangeVolume__8XBa1::-ms-thumb{appearance:none;border:0;height:0;width:0}.style-module_PlayerRangeThumb__J5IcV{background-color:#fff;border-radius:11px;height:12px;left:var(--player-thumb-position);pointer-events:none;position:absolute;top:-4px;transform:translateX(-50%);transition:box-shadow .2s;width:12px}.style-module_PlayerRangeTime__QVr8d:hover+.style-module_PlayerRangeThumb__J5IcV,.style-module_PlayerRangeVolume__8XBa1:hover+.style-module_PlayerRangeThumb__J5IcV{box-shadow:0 0 1px 3px hsla(0,0%,100%,.28)}.style-module_PlayerCenter__qLy3K,.style-module_PlayerLoading__PBiIH{cursor:pointer;height:60px;left:50%;padding:2px;position:absolute;top:50%;transform:translate(-50%,-50%);width:60px}.style-module_PlayerLoading__PBiIH{height:80px;width:80px}.style-module_PlayerSetting__BhP11{background-color:#0006;cursor:default;height:100%;left:0;position:absolute;top:0;width:100%}.style-module_PlayerSettingPanelQuality__4UQId,.style-module_PlayerSettingPanelSpeed__ABgXy,.style-module_PlayerSettingPanel__tZE0z{background-color:#fff;border-radius:10px;bottom:20px;display:flex;flex-direction:column;gap:4px;left:50%;max-width:80%;padding:10px 4px;position:absolute;transform:translateX(-50%);width:240px}.style-module_PlayerSettingPanelQuality__4UQId *,.style-module_PlayerSettingPanelSpeed__ABgXy *,.style-module_PlayerSettingPanel__tZE0z *{color:#000}.style-module_PlayerSettingPanelQuality__4UQId{max-height:calc(100% - 40px)}.style-module_PlayerSettingList__KEYZR{align-items:center;border-radius:8px;cursor:pointer;display:flex;font-size:14pt;gap:8px;padding:6px 14px}.style-module_PlayerSettingDisplay__-yFqd{display:flex;flex:1;justify-content:space-between}.style-module_PlayerButtonCursor__4PyXl{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#eee;border:0;border-radius:55px;cursor:pointer;display:flex;height:30px;justify-content:center;width:30px}.style-module_PlayerSpeedShow__u1NIt{font-size:14pt;padding-block:4px;text-align:center;width:100%}.style-module_PlayerPlayback__EZYH2{align-items:center;display:flex;gap:8px;padding-inline:8px}.style-module_PlayerRangeSpeed__ElauL{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:linear-gradient(to right,#000 var(--spped-thumb-position),#0006 var(--spped-thumb-position));border-radius:4px;flex:1;height:4px}.style-module_PlayerRangeSpeed__ElauL::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:#000;border-radius:50%;cursor:pointer;height:12px;width:12px}.style-module_PlayerRangeSpeed__ElauL::-moz-range-thumb{background-color:#000;border:none;border-radius:50%;cursor:pointer;height:12px;width:12px}.style-module_PlayerRangeSpeed__ElauL::-ms-thumb{background-color:#000;border-radius:50%;cursor:pointer;height:12px;width:12px}.style-module_PlayerCheckbox__At22K{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#eee;border-radius:14px;height:14px;width:14px}.style-module_PlayerCheckbox__At22K:checked{background-image:radial-gradient(circle at center,#fff 34%,#00b2ff 0)}.style-module_PlayerQualityList__rvIel{display:flex;flex-direction:column;font-size:12pt;gap:4px;overflow-y:auto;padding-inline:10px}.style-module_PlayerSettingList__KEYZR:hover{background-color:#eee6}.style-module_seekLeft__9AAFX,.style-module_seekRight__RMywZ{animation:style-module_shaking__Hgx0x .2s;font-size:24pt;position:absolute;text-shadow:0 0 2px rgba(0,0,0,.3);top:50%;transform:translateY(-50%)}.style-module_PlayerError__t9v1M{align-items:center;background-color:#000;cursor:default;display:flex;flex-direction:column;font-size:16pt;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}@keyframes style-module_shaking__Hgx0x{0%{transform:translateY(-50%) scale(1)}50%{transform:translateY(-50%) scale(2)}to{transform:translateY(-50%) scale(1)}}@media (max-width:460px){.style-module_PlayerDurationTime__uCgjW,.style-module_PlayerVolumeZone__7LHeR{display:none}.style-module_PlayerVolume__r7ll8{padding-right:0}.style-module_seekLeft__9AAFX,.style-module_seekRight__RMywZ{font-size:18pt}}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { HlsConfig } from 'hls.js';
|
|
1
2
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
3
|
|
|
3
4
|
type VideoSourceQuality = {
|
|
@@ -7,10 +8,11 @@ type VideoSourceQuality = {
|
|
|
7
8
|
type VideoPlayerProps = {
|
|
8
9
|
title?: string;
|
|
9
10
|
poster?: string;
|
|
11
|
+
hls?: boolean | Partial<HlsConfig>;
|
|
10
12
|
source: string | VideoSourceQuality[];
|
|
11
13
|
};
|
|
12
14
|
|
|
13
|
-
declare function VideoPlayer({ title, poster, source }: VideoPlayerProps): react_jsx_runtime.JSX.Element;
|
|
15
|
+
declare function VideoPlayer({ title, poster, source, hls }: VideoPlayerProps): react_jsx_runtime.JSX.Element;
|
|
14
16
|
|
|
15
17
|
export { VideoPlayer };
|
|
16
18
|
export type { VideoSourceQuality };
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),t=require("react");function n(e,t){switch(t.type){case"SET_VOLUME":return{...e,volume:t.volume};case"SET_PAUSED":return{...e,isPaused:t.isPaused};case"SET_DURATION":return{...e,durationTime:t.duration};case"SET_CURRENT_TIME":return{...e,currentTime:t.time};case"SET_PLAYBACK_SPEED":return{...e,playbackSpeed:t.speed};default:return e}}function r(e,t){switch(t.type){case"SET_CONTROLS_VISIBLE":return{...e,isControlsVisible:t.visible};case"SET_SETTING_PANEL":return{...e,settingPanel:t.name};case"SET_HOVER_TIME":return{...e,hoverTime:{x:t.x,time:t.time}};case"SET_FULLSCREEN":return{...e,isFullscreen:t.active};case"SET_LOADING":return{...e,isLoading:t.loading};case"SET_SETTING":return{...e,isSettingsVisible:t.active};case"SET_MUTED":return{...e,isMuted:t.muted};case"ADD_SEEK":return{...e,seekStack:t.amount>0?e.seekStack<0?t.amount:e.seekStack+t.amount:e.seekStack>0?t.amount:e.seekStack+t.amount};case"RESET_SEEK":return{...e,seekStack:0};case"SET_SEEK_MODE":return{...e,isSeekMode:t.isActive};default:return e}}const a=["play","pause"];function s({name:t,style:n,bigger:r}){return"loading"===t?e.jsxs("svg",{version:"1.1",id:"L1",xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",x:"0px",y:"0px",viewBox:"0 0 100 100",enableBackground:"new 0 0 100 100",xmlSpace:"preserve",children:[e.jsx("title",{children:"loading"}),e.jsx("circle",{fill:"none",stroke:"currentColor",strokeWidth:"6",strokeMiterlimit:"15",strokeDasharray:"14.2472,14.2472",cx:"50",cy:"50",r:"47",children:e.jsx("animateTransform",{attributeName:"transform",attributeType:"XML",type:"rotate",dur:"5s",from:"0 50 50",to:"360 50 50",repeatCount:"indefinite"})}),e.jsx("circle",{fill:"none",stroke:"currentColor",strokeWidth:"1",strokeMiterlimit:"10",strokeDasharray:"10,10",cx:"50",cy:"50",r:"39",children:e.jsx("animateTransform",{attributeName:"transform",attributeType:"XML",type:"rotate",dur:"5s",from:"0 50 50",to:"-360 50 50",repeatCount:"indefinite"})}),e.jsxs("g",{fill:"currentColor",children:[e.jsx("rect",{x:"30",y:"35",width:"5",height:"30",children:e.jsx("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.1"})}),e.jsx("rect",{x:"40",y:"35",width:"5",height:"30",children:e.jsx("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.2"})}),e.jsx("rect",{x:"50",y:"35",width:"5",height:"30",children:e.jsx("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.3"})}),e.jsx("rect",{x:"60",y:"35",width:"5",height:"30",children:e.jsx("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.4"})}),e.jsx("rect",{x:"70",y:"35",width:"5",height:"30",children:e.jsx("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.5"})})]})]}):e.jsxs("svg",{fill:a.includes(t)?"currentColor":"none",strokeWidth:1.5,width:r?56:24,viewBox:"0 0 24 24",stroke:"currentColor",style:n,xmlns:"http://www.w3.org/2000/svg",children:[e.jsx("title",{children:t}),"play"===t&&e.jsx("path",{fillRule:"evenodd",d:"M4.5 5.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L7.28 19.99c-1.25.687-2.779-.217-2.779-1.643V5.653Z",clipRule:"evenodd"}),"pause"===t&&e.jsx("path",{fillRule:"evenodd",d:"M6.75 5.25a.75.75 0 0 1 .75-.75H9a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H7.5a.75.75 0 0 1-.75-.75V5.25Zm7.5 0A.75.75 0 0 1 15 4.5h1.5a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H15a.75.75 0 0 1-.75-.75V5.25Z",clipRule:"evenodd"}),"setting"===t&&e.jsxs(e.Fragment,{children:[e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"}),e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"})]}),"fullscreen"===t&&e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"}),"exit-fullscreen"===t&&e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9 9V4.5M9 9H4.5M9 9 3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25"}),"mute"===t&&e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M19.114 5.636a9 9 0 0 1 0 12.728M16.463 8.288a5.25 5.25 0 0 1 0 7.424M6.75 8.25l4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z"}),"unmute"===t&&e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M17.25 9.75 19.5 12m0 0 2.25 2.25M19.5 12l2.25-2.25M19.5 12l-2.25 2.25m-10.5-6 4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z"}),"picture-in-picture"===t&&e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"}),"quality"===t&&e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75"}),"playback"===t&&e.jsxs(e.Fragment,{children:[e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"}),e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M15.91 11.672a.375.375 0 0 1 0 .656l-5.603 3.113a.375.375 0 0 1-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112Z"})]}),"plus"===t&&e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M12 4.5v15m7.5-7.5h-15"}),"minus"===t&&e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M5 12h14"})]})}var i="style-module_PlayerButton__3pLMQ",l="style-module_PlayerDesktop__ccJTe",o="style-module_PlayerWrapper__37Xpc",u="style-module_PlayerVideo__NkoX3",c="style-module_PlayerControls__IyMmM",d="style-module_PlayerShown__uVIfu",m="style-module_PlayerPanelTop__x02Dp",y="style-module_PlayerTitle__yTvNu",p="style-module_PlayerPanelCenter__y8jR0",_="style-module_PlayerSeekArea__z-qY-",h="style-module_PlayerPanelBottom__bdhhD",T="style-module_PlayerCurrentTime__IaolO",k="style-module_PlayerDurationTime__uCgjW",E="style-module_PlayerVolume__r7ll8",x="style-module_PlayerVolumeZone__7LHeR",v="style-module_PlayerRangeVolume__8XBa1",S="style-module_PlayerSeekTime__SEypx",b="style-module_PlayerHoverTime__iBu1D",g="style-module_PlayerRangeTime__QVr8d",f="style-module_PlayerRangeThumb__J5IcV",j="style-module_PlayerLoading__PBiIH",P="style-module_PlayerCenter__qLy3K",C="style-module_PlayerSetting__BhP11",M="style-module_PlayerSettingPanel__tZE0z",N="style-module_PlayerSettingPanelSpeed__ABgXy",w="style-module_PlayerSettingPanelQuality__4UQId",L="style-module_PlayerSettingList__KEYZR",R="style-module_PlayerSettingDisplay__-yFqd",I="style-module_PlayerButtonCursor__4PyXl",A="style-module_PlayerSpeedShow__u1NIt",V="style-module_PlayerPlayback__EZYH2",F="style-module_PlayerRangeSpeed__ElauL",D="style-module_PlayerCheckbox__At22K",q="style-module_PlayerQualityList__rvIel",O="style-module_seekLeft__9AAFX",H="style-module_seekRight__RMywZ";function B(e){if(void 0===e||Number.isNaN(e)||e<0)return"00:00";const t=Math.floor(e),n=t%60;return`${Math.floor(t/60).toString().padStart(2,"0")}:${n.toString().padStart(2,"0")}`}function U(e){return 0===e?"Auto":e<1e3?`${e}p`:e/1e3+"k"}exports.VideoPlayer=function({title:a,poster:Z,source:K}){const G=t.useRef(0),X=t.useRef(null),$=t.useRef(null),W=t.useRef(null),Q=t.useRef("string"==typeof K?[{src:K,quality:0}]:[...K].sort((e,t)=>t.quality-e.quality)),z=t.useMemo(()=>/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobi/i.test(navigator.userAgent),[]),[Y,J]=t.useReducer(n,{volume:1,isPaused:!0,currentTime:0,durationTime:0,playbackSpeed:1}),[ee,te]=t.useReducer(r,{seekStack:0,isMuted:!1,isLoading:!0,isSeekMode:!1,settingPanel:null,isFullscreen:!1,isControlsVisible:!0,isSettingsVisible:!1,hoverTime:{x:null,time:0}}),[ne,re]=t.useState(0),ae=t.useCallback(async e=>{if($.current)try{return await e($.current)}catch(e){return console.error("Video operation failed:",e),null}return null},[]),se=t.useRef(Y.currentTime),ie=t.useRef(ee.isControlsVisible);t.useEffect(()=>{se.current=Y.currentTime,ie.current=ee.isControlsVisible},[Y.currentTime,ee.isControlsVisible]);const le=t.useCallback(e=>{if(!ie.current)return;const t=e.currentTarget.currentTime;(Math.abs(t-se.current)>1||Math.floor(t)!==Math.floor(se.current))&&J({type:"SET_CURRENT_TIME",time:t})},[]),oe=t.useCallback(()=>{ae(async e=>{e.paused?await e.play():e.pause()})},[ae]),ue=t.useCallback(async()=>{(function(){const e=document;return!!(e.fullscreenEnabled||e.webkitFullscreenEnabled||e.mozFullScreenEnabled||e.msFullscreenEnabled)})()&&X.current&&(document.fullscreenElement?await async function(){const e=document,t=e.exitFullscreen||e.webkitExitFullscreen||e.mozCancelFullScreen||e.msExitFullscreen;if(t)try{return await t.call(e),!0}catch(e){return console.error("Failed to exit fullscreen:",e),!1}return!1}():await async function(e){const t=e,n=t.requestFullscreen||t.webkitRequestFullscreen||t.webkitEnterFullscreen||t.mozRequestFullScreen||t.msRequestFullscreen;if(n)try{return await n.call(t),!0}catch(e){return console.error("Failed to enter fullscreen:",e),!1}return!1}(X.current))},[]),ce=t.useCallback(()=>{ae(e=>{e.muted||0!==e.volume?(e.muted=!e.muted,te({type:"SET_MUTED",muted:e.muted})):(e.volume=1,e.muted=!1,te({type:"SET_MUTED",muted:!1}))})},[]),de=t.useCallback(async()=>{ae(async e=>{"pictureInPictureEnabled"in document&&"requestPictureInPicture"in HTMLVideoElement.prototype&&(document.pictureInPictureElement===e?await async function(e){if(!1===e.disablePictureInPicture&&"pictureInPictureElement"in document&&document.pictureInPictureElement)try{return await document.exitPictureInPicture(),!0}catch(e){return console.error("Failed to exit Picture-in-Picture:",e),!1}return!1}(e):await async function(e){if(!("pictureInPictureEnabled"in document)||"function"!=typeof e.requestPictureInPicture)return console.error("Picture-in-Picture is not supported"),null;try{return e.paused&&await e.play().catch(()=>{console.warn("Auto-play was prevented")}),await e.requestPictureInPicture()}catch(e){return console.error("Failed to enter Picture-in-Picture:",e),null}}(e))})},[]),me=t.useCallback(()=>{te({type:"SET_CONTROLS_VISIBLE",visible:!1}),W.current&&(clearTimeout(W.current),W.current=null)},[]),ye=t.useCallback((e=2500)=>{W.current&&clearTimeout(W.current),te({type:"SET_CONTROLS_VISIBLE",visible:!0}),W.current=setTimeout(me,e)},[me]),pe=t.useCallback(e=>{ee.isControlsVisible&&ae(t=>{t.currentTime=e,J({type:"SET_CURRENT_TIME",time:e}),ye()})},[ae,ee.isControlsVisible,ye]),_e=t.useMemo(()=>function(e,t){let n=null,r=0;return function(...a){const s=Date.now();r?(n&&clearTimeout(n),n=setTimeout(()=>{s-r>=t&&(e.apply(this,a),r=s)},t-(s-r))):(e.apply(this,a),r=s)}}(()=>{ye()},200),[ye]),he=t.useCallback(()=>{_e()},[_e]),Te=t.useCallback(()=>{me()},[me]),ke=t.useCallback(e=>{const t=e.currentTarget.getBoundingClientRect(),n=e.clientX-t.left,r=Math.min(Math.max(n/t.width,0),1)*Y.durationTime;te({type:"SET_HOVER_TIME",x:n,time:r})},[Y.durationTime]),Ee=t.useCallback(()=>{te({type:"SET_HOVER_TIME",x:null,time:0})},[]),xe=t.useCallback(e=>{J({type:"SET_VOLUME",volume:e.currentTarget.volume})},[]),ve=t.useCallback(e=>{ae(t=>{t.volume=+e.currentTarget.value})},[]),Se=t.useCallback(e=>{te({type:"SET_LOADING",loading:e})},[]),be=t.useCallback(e=>{ae(t=>{G.current=t.currentTime;const n=Q.current.findIndex(t=>t.quality===e);n<0||(Se(!0),re(n))})},[ae,Se]);t.useEffect(()=>{const e=$.current;if(!e||0===G.current)return;const t=()=>{e.currentTime=G.current,e.play()};return e.addEventListener("loadedmetadata",t,{once:!0}),()=>e.removeEventListener("loadedmetadata",t)},[ne]);const ge=t.useCallback(e=>{J({type:"SET_PLAYBACK_SPEED",speed:e.currentTarget.playbackRate})},[]),fe=t.useCallback(e=>{ae(t=>{t.playbackRate=e})},[]),je=t.useCallback(()=>{te({type:"SET_SETTING",active:!ee.isSettingsVisible})},[ee.isSettingsVisible]),Pe=t.useMemo(()=>{if(!$.current||!Y.durationTime)return 0;const e=$.current.buffered;if(0===e.length)return 0;let t=0;for(let n=0;n<e.length;n++)if(e.start(n)<=Y.currentTime&&e.end(n)>Y.currentTime){t=e.end(n);break}return t/Y.durationTime*100},[Y.currentTime,Y.durationTime]),Ce=t.useMemo(()=>Y.durationTime?Y.currentTime/Y.durationTime*100:0,[Y.currentTime,Y.durationTime]),Me=t.useRef(null),Ne=t.useCallback(()=>{Me.current&&clearTimeout(Me.current),te({type:"SET_SEEK_MODE",isActive:!0}),Me.current=setTimeout(()=>{te({type:"SET_SEEK_MODE",isActive:!1}),te({type:"RESET_SEEK"}),Me.current=null},1200)},[]),we=t.useCallback(e=>{ae(t=>{const n="+"===e?10:-10;t.currentTime+=n,te({type:"ADD_SEEK",amount:n}),Ne()})},[ae,Ne]),Le=t.useRef(0),Re=t.useCallback(e=>{if(!z)return;const t=Date.now(),n=t-Le.current;(n>0&&n<300||ee.isSeekMode)&&(ee.isSeekMode||te({type:"SET_SEEK_MODE",isActive:!0}),we(e)),Le.current=t},[ee.isSeekMode,we]),Ie=t.useCallback(e=>{if(!z)return;if(e.target.closest("button, input, [data-no-toggle]"))return ye();ee.isControlsVisible?me():ye()},[z,ee.isControlsVisible,ye,me]),Ae=ee.isControlsVisible,Ve=ee.isMuted?0:Y.volume;return t.useEffect(()=>{if(z)return;const e=e=>{switch([" ","f","p","ArrowLeft","ArrowRight"].includes(e.key)&&(e.preventDefault(),ye()),e.key){case" ":oe();break;case"f":ue();break;case"p":de();break;case"ArrowLeft":we("-");break;case"ArrowRight":we("+")}};return window.addEventListener("keydown",e),()=>{window.removeEventListener("keydown",e)}},[oe,ue,de,ye,we]),t.useEffect(()=>{const e=async()=>{const e=document.fullscreenElement===X.current;te({type:"SET_FULLSCREEN",active:e}),$.current&&async function(e,t){const n=e.videoWidth>e.videoHeight;if("undefined"!=typeof window&&window.screen&&"orientation"in window.screen&&window.screen.orientation&&"lock"in window.screen.orientation&&"function"==typeof window.screen.orientation.lock)try{t&&n?await window.screen.orientation.lock("landscape"):window.screen.orientation.unlock()}catch(e){console.warn("Failed to lock orientation:",e)}}($.current,e)};return document.addEventListener("fullscreenchange",e),()=>{document.removeEventListener("fullscreenchange",e),W.current&&clearTimeout(W.current)}},[]),e.jsxs("div",{ref:X,onMouseMove:z?void 0:he,onMouseLeave:z?void 0:Te,onTouchEnd:z?Ie:void 0,className:o+(z?"":` ${l}`),children:[e.jsx("video",{ref:$,poster:Z,controls:!1,onContextMenu:()=>!1,className:u,src:Q.current[ne].src,onWaiting:()=>Se(!0),onPlaying:()=>Se(!1),onCanPlay:()=>Se(!1),onLoadedData:()=>Se(!1),onTimeUpdate:le,onVolumeChange:xe,onRateChange:ge,onPlay:()=>J({type:"SET_PAUSED",isPaused:!1}),onPause:()=>J({type:"SET_PAUSED",isPaused:!0}),onDurationChange:e=>J({type:"SET_DURATION",duration:e.currentTarget.duration}),onLoadedMetadata:e=>J({type:"SET_DURATION",duration:e.currentTarget.duration})}),e.jsxs("div",{className:c+(Ae?` ${d}`:""),children:[e.jsxs("div",{className:m,children:[e.jsx("article",{className:y,children:a}),e.jsx("button",{type:"button",className:i,onClick:e=>{e.stopPropagation(),je()},onFocus:e=>e.currentTarget.blur(),children:e.jsx(s,{name:"setting"})})]}),e.jsxs("div",{className:p,onClick:z?void 0:oe,children:[e.jsx("div",{className:_,"data-no-toggle":!0,onTouchEnd:()=>Re("-"),children:ee.seekStack<0&&e.jsx("div",{inert:!0,className:O,children:ee.seekStack.toString()},ee.seekStack)}),e.jsx("div",{className:_,"data-no-toggle":!0,onTouchEnd:()=>Re("+"),children:ee.seekStack>0&&e.jsx("div",{inert:!0,className:H,children:`+${ee.seekStack.toString()}`},ee.seekStack)})]}),e.jsxs("div",{className:h,children:[e.jsx("div",{className:T,children:B(Y.currentTime)}),e.jsxs("div",{className:S,children:[e.jsx("div",{className:b,style:{display:null===ee.hoverTime.x?"none":void 0,"--player-hover-position":`${ee.hoverTime.x}px`},children:B(ee.hoverTime.time)}),e.jsx("input",{step:"any",type:"range",onFocus:e=>e.currentTarget.blur(),max:Y.durationTime,value:Y.currentTime,className:g,onMouseMove:ke,onMouseLeave:Ee,onChange:e=>pe(+e.currentTarget.value),style:{"--player-buffer-position":`${Pe}%`,"--player-time-position":`${Ce}%`}}),e.jsx("div",{className:f,style:{"--player-thumb-position":`${Ce}%`}})]}),e.jsx("div",{className:k,children:B(Y.durationTime)}),e.jsxs("div",{className:E,children:[e.jsx("button",{type:"button",className:i,onClick:e=>{e.stopPropagation(),ce()},onFocus:e=>e.currentTarget.blur(),children:e.jsx(s,{name:ee.isMuted||0===Y.volume?"unmute":"mute"})}),e.jsxs("div",{className:x,children:[e.jsx("input",{style:{"--player-buffer-position":100*Ve+"%","--player-time-position":100*Ve+"%"},onFocus:e=>e.currentTarget.blur(),onChange:ve,className:v,value:Ve,type:"range",step:"any",max:1}),e.jsx("div",{className:f,style:{"--player-thumb-position":100*Ve+"%"}})]})]}),e.jsx("button",{type:"button",className:i,onClick:e=>{e.stopPropagation(),de()},onFocus:e=>e.currentTarget.blur(),children:e.jsx(s,{name:"picture-in-picture"})}),e.jsx("button",{type:"button",className:i,onClick:e=>{e.stopPropagation(),ue()},onFocus:e=>e.currentTarget.blur(),children:e.jsx(s,{name:ee.isFullscreen?"exit-fullscreen":"fullscreen"})})]}),ee.isLoading?e.jsx("div",{className:j,children:e.jsx(s,{name:"loading",style:{width:"100%"}})}):e.jsx("div",{className:P,"data-no-toggle":!0,onClick:oe,children:e.jsx(s,{name:Y.isPaused?"play":"pause",bigger:!0})})]}),e.jsxs("div",{className:C,style:{display:ee.isSettingsVisible?void 0:"none"},onClick:()=>{te({type:"SET_SETTING",active:!1}),te({type:"SET_SETTING_PANEL",name:null})},onMouseMove:e=>e.stopPropagation(),children:[e.jsxs("div",{className:M,onClick:e=>e.stopPropagation(),style:{display:null===ee.settingPanel?void 0:"none"},children:[e.jsxs("div",{className:L,children:[e.jsx(s,{name:"quality",style:{stroke:"#000"}}),e.jsxs("div",{className:R,onClick:()=>te({type:"SET_SETTING_PANEL",name:"quality"}),children:[e.jsx("span",{children:"Video quality"}),e.jsx("span",{children:U(Q.current[ne].quality)})]})]}),e.jsxs("div",{className:L,children:[e.jsx(s,{name:"playback",style:{stroke:"#000"}}),e.jsxs("div",{className:R,onClick:()=>te({type:"SET_SETTING_PANEL",name:"speed"}),children:[e.jsx("span",{children:"Playback speed"}),e.jsxs("span",{children:[Y.playbackSpeed,"x"]})]})]})]}),e.jsxs("div",{className:N,onClick:e=>e.stopPropagation(),style:{display:"speed"===ee.settingPanel?void 0:"none"},children:[e.jsxs("div",{className:A,children:["Speed ",Y.playbackSpeed,"x"]}),e.jsxs("div",{className:V,children:[e.jsx("button",{type:"button",className:I,onClick:()=>fe(.25===Y.playbackSpeed?.25:Y.playbackSpeed-.25),onFocus:e=>e.currentTarget.blur(),children:e.jsx(s,{name:"minus"})}),e.jsx("input",{max:4,min:.25,step:.25,type:"range",onFocus:e=>e.currentTarget.blur(),style:{"--spped-thumb-position":(Y.playbackSpeed-.25)/3.75*100+"%"},className:F,onChange:e=>fe(+e.currentTarget.value),value:Y.playbackSpeed}),e.jsx("button",{type:"button",className:I,onClick:()=>fe(4===Y.playbackSpeed?4:Y.playbackSpeed+.25),onFocus:e=>e.currentTarget.blur(),children:e.jsx(s,{name:"plus"})})]})]}),e.jsxs("div",{className:w,onClick:e=>e.stopPropagation(),style:{display:"quality"===ee.settingPanel?void 0:"none"},children:[e.jsxs("div",{className:A,children:["Quality ",U(Q.current[ne].quality)]}),e.jsx("div",{className:q,children:Q.current.map(t=>e.jsxs("div",{className:L,onClick:()=>{be(t.quality),te({type:"SET_SETTING",active:!1}),te({type:"SET_SETTING_PANEL",name:null})},children:[e.jsx("input",{type:"checkbox",readOnly:!0,onFocus:e=>e.currentTarget.blur(),className:D,checked:Q.current[ne].quality===t.quality}),U(t.quality)]},t.quality))})]})]})]})};
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("react");function r(e,t){switch(t.type){case"SET_VOLUME":return{...e,volume:t.volume};case"SET_PAUSED":return{...e,isPaused:t.isPaused};case"SET_DURATION":return{...e,durationTime:t.duration};case"SET_CURRENT_TIME":return{...e,currentTime:t.time};case"SET_PLAYBACK_SPEED":return{...e,playbackSpeed:t.speed};default:return e}}function n(e,t){switch(t.type){case"SET_CONTROLS_VISIBLE":return{...e,isControlsVisible:t.visible};case"SET_SETTING_PANEL":return{...e,settingPanel:t.name};case"SET_HOVER_TIME":return{...e,hoverTime:{x:t.x,time:t.time}};case"SET_FULLSCREEN":return{...e,isFullscreen:t.active};case"SET_LOADING":return{...e,isLoading:t.loading};case"SET_SETTING":return{...e,isSettingsVisible:t.active};case"SET_MUTED":return{...e,isMuted:t.muted};case"SET_ERROR":return{...e,isError:t.error,isLoading:!1};case"ADD_SEEK":return{...e,seekStack:t.amount>0?e.seekStack<0?t.amount:e.seekStack+t.amount:e.seekStack>0?t.amount:e.seekStack+t.amount};case"RESET_SEEK":return{...e,seekStack:0};case"SET_SEEK_MODE":return{...e,isSeekMode:t.isActive};default:return e}}const a=["play","pause"];function s({name:t,style:r,bigger:n}){return"loading"===t?e.jsxs("svg",{version:"1.1",id:"L1",xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",x:"0px",y:"0px",viewBox:"0 0 100 100",enableBackground:"new 0 0 100 100",xmlSpace:"preserve",children:[e.jsx("title",{children:"loading"}),e.jsx("circle",{fill:"none",stroke:"currentColor",strokeWidth:"6",strokeMiterlimit:"15",strokeDasharray:"14.2472,14.2472",cx:"50",cy:"50",r:"47",children:e.jsx("animateTransform",{attributeName:"transform",attributeType:"XML",type:"rotate",dur:"5s",from:"0 50 50",to:"360 50 50",repeatCount:"indefinite"})}),e.jsx("circle",{fill:"none",stroke:"currentColor",strokeWidth:"1",strokeMiterlimit:"10",strokeDasharray:"10,10",cx:"50",cy:"50",r:"39",children:e.jsx("animateTransform",{attributeName:"transform",attributeType:"XML",type:"rotate",dur:"5s",from:"0 50 50",to:"-360 50 50",repeatCount:"indefinite"})}),e.jsxs("g",{fill:"currentColor",children:[e.jsx("rect",{x:"30",y:"35",width:"5",height:"30",children:e.jsx("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.1"})}),e.jsx("rect",{x:"40",y:"35",width:"5",height:"30",children:e.jsx("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.2"})}),e.jsx("rect",{x:"50",y:"35",width:"5",height:"30",children:e.jsx("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.3"})}),e.jsx("rect",{x:"60",y:"35",width:"5",height:"30",children:e.jsx("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.4"})}),e.jsx("rect",{x:"70",y:"35",width:"5",height:"30",children:e.jsx("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.5"})})]})]}):e.jsxs("svg",{fill:a.includes(t)?"currentColor":"none",strokeWidth:1.5,width:n?56:24,viewBox:"0 0 24 24",stroke:"currentColor",style:r,xmlns:"http://www.w3.org/2000/svg",children:[e.jsx("title",{children:t}),"play"===t&&e.jsx("path",{fillRule:"evenodd",d:"M4.5 5.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L7.28 19.99c-1.25.687-2.779-.217-2.779-1.643V5.653Z",clipRule:"evenodd"}),"pause"===t&&e.jsx("path",{fillRule:"evenodd",d:"M6.75 5.25a.75.75 0 0 1 .75-.75H9a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H7.5a.75.75 0 0 1-.75-.75V5.25Zm7.5 0A.75.75 0 0 1 15 4.5h1.5a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H15a.75.75 0 0 1-.75-.75V5.25Z",clipRule:"evenodd"}),"setting"===t&&e.jsxs(e.Fragment,{children:[e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"}),e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"})]}),"fullscreen"===t&&e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"}),"exit-fullscreen"===t&&e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9 9V4.5M9 9H4.5M9 9 3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25"}),"mute"===t&&e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M19.114 5.636a9 9 0 0 1 0 12.728M16.463 8.288a5.25 5.25 0 0 1 0 7.424M6.75 8.25l4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z"}),"unmute"===t&&e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M17.25 9.75 19.5 12m0 0 2.25 2.25M19.5 12l2.25-2.25M19.5 12l-2.25 2.25m-10.5-6 4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z"}),"picture-in-picture"===t&&e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"}),"quality"===t&&e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75"}),"playback"===t&&e.jsxs(e.Fragment,{children:[e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"}),e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M15.91 11.672a.375.375 0 0 1 0 .656l-5.603 3.113a.375.375 0 0 1-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112Z"})]}),"error"===t&&e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"}),"plus"===t&&e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M12 4.5v15m7.5-7.5h-15"}),"minus"===t&&e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M5 12h14"})]})}var i="style-module_PlayerButton__3pLMQ",l="style-module_PlayerDesktop__ccJTe",o="style-module_PlayerWrapper__37Xpc",u="style-module_PlayerVideo__NkoX3",c="style-module_PlayerControls__IyMmM",d="style-module_PlayerShown__uVIfu",m="style-module_PlayerPanelTop__x02Dp",y="style-module_PlayerTitle__yTvNu",p="style-module_PlayerPanelCenter__y8jR0",h="style-module_PlayerSeekArea__z-qY-",_="style-module_PlayerPanelBottom__bdhhD",T="style-module_PlayerCurrentTime__IaolO",E="style-module_PlayerDurationTime__uCgjW",k="style-module_PlayerVolume__r7ll8",v="style-module_PlayerVolumeZone__7LHeR",x="style-module_PlayerRangeVolume__8XBa1",S="style-module_PlayerSeekTime__SEypx",b="style-module_PlayerHoverTime__iBu1D",f="style-module_PlayerRangeTime__QVr8d",g="style-module_PlayerRangeThumb__J5IcV",j="style-module_PlayerLoading__PBiIH",P="style-module_PlayerCenter__qLy3K",M="style-module_PlayerSetting__BhP11",C="style-module_PlayerSettingPanel__tZE0z",N="style-module_PlayerSettingPanelSpeed__ABgXy",w="style-module_PlayerSettingPanelQuality__4UQId",L="style-module_PlayerSettingList__KEYZR",R="style-module_PlayerSettingDisplay__-yFqd",A="style-module_PlayerButtonCursor__4PyXl",I="style-module_PlayerSpeedShow__u1NIt",V="style-module_PlayerPlayback__EZYH2",F="style-module_PlayerRangeSpeed__ElauL",D="style-module_PlayerCheckbox__At22K",O="style-module_PlayerQualityList__rvIel",q="style-module_seekLeft__9AAFX",H="style-module_seekRight__RMywZ",B="style-module_PlayerError__t9v1M";function U(e){if(void 0===e||Number.isNaN(e)||e<0)return"00:00";const t=Math.floor(e),r=t%60;return`${Math.floor(t/60).toString().padStart(2,"0")}:${r.toString().padStart(2,"0")}`}function Z(e){return 0===e?"Auto":e<1e3?`${e}p`:e/1e3+"k"}function K(){return"pictureInPictureEnabled"in document&&"requestPictureInPicture"in HTMLVideoElement.prototype}exports.VideoPlayer=function({title:a,poster:G,source:X,hls:$}){const W=t.useRef(0),Q=t.useRef(null),z=t.useRef(null),Y=t.useRef(null),J=t.useRef("string"==typeof X?[{src:X,quality:0}]:[...X].sort((e,t)=>t.quality-e.quality)),ee=t.useRef(null),te=t.useMemo(()=>/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobi/i.test(navigator.userAgent),[]),[re,ne]=t.useReducer(r,{volume:1,isPaused:!0,currentTime:0,durationTime:0,playbackSpeed:1}),[ae,se]=t.useReducer(n,{seekStack:0,isMuted:!1,isError:!1,isLoading:!0,isSeekMode:!1,settingPanel:null,isFullscreen:!1,isControlsVisible:!0,isSettingsVisible:!1,hoverTime:{x:null,time:0}}),[ie,le]=t.useState(0);t.useEffect(()=>{const e=z.current;if(!e||!$)return;const t=J.current[ie].src;return import("hls.js").then(({default:r})=>{if(!r.isSupported())return void(e.canPlayType("application/vnd.apple.mpegurl")&&(e.src=t));ee.current?.destroy();const n=new r("object"==typeof $?$:{});ee.current=n,n.loadSource(t),n.attachMedia(e),n.on(r.Events.ERROR,(e,t)=>{if(t.fatal)switch(t.type){case r.ErrorTypes.NETWORK_ERROR:case r.ErrorTypes.MEDIA_ERROR:se({type:"SET_ERROR",error:!0})}}),n.on(r.Events.MANIFEST_PARSED,()=>{W.current>0&&(e.currentTime=W.current,e.play())})}).catch(()=>{console.warn("hls.js not installed: npm install hls.js"),e.src=t}),()=>{ee.current?.destroy(),ee.current=null}},[ie,$]);const oe=t.useCallback(async e=>{if(z.current)try{return await e(z.current)}catch(e){return console.error("Video operation failed:",e),null}return null},[]),ue=t.useRef(re.currentTime),ce=t.useRef(ae.isControlsVisible);t.useEffect(()=>{ue.current=re.currentTime,ce.current=ae.isControlsVisible},[re.currentTime,ae.isControlsVisible]);const de=t.useCallback(e=>{if(!ce.current)return;const t=e.currentTarget.currentTime;(Math.abs(t-ue.current)>1||Math.floor(t)!==Math.floor(ue.current))&&ne({type:"SET_CURRENT_TIME",time:t})},[]),me=t.useCallback(()=>{oe(async e=>{e.paused?await e.play():e.pause()})},[oe]),ye=t.useCallback(async()=>{(function(){const e=document;return!!(e.fullscreenEnabled||e.webkitFullscreenEnabled||e.mozFullScreenEnabled||e.msFullscreenEnabled)})()&&Q.current&&(document.fullscreenElement?await async function(){const e=document,t=e.exitFullscreen||e.webkitExitFullscreen||e.mozCancelFullScreen||e.msExitFullscreen;if(t)try{return await t.call(e),!0}catch(e){return console.error("Failed to exit fullscreen:",e),!1}return!1}():await async function(e){const t=e,r=t.requestFullscreen||t.webkitRequestFullscreen||t.webkitEnterFullscreen||t.mozRequestFullScreen||t.msRequestFullscreen;if(r)try{return await r.call(t),!0}catch(e){return console.error("Failed to enter fullscreen:",e),!1}return!1}(Q.current))},[]),pe=t.useCallback(()=>{oe(e=>{e.muted||0!==e.volume?(e.muted=!e.muted,se({type:"SET_MUTED",muted:e.muted})):(e.volume=1,e.muted=!1,se({type:"SET_MUTED",muted:!1}))})},[]),he=t.useCallback(async()=>{oe(async e=>{K()&&(document.pictureInPictureElement===e?await async function(){if("pictureInPictureElement"in document&&document.pictureInPictureElement)try{return await document.exitPictureInPicture(),!0}catch(e){return console.error("Failed to exit Picture-in-Picture:",e),!1}return!1}():await async function(e){if(!K())return console.error("Picture-in-Picture is not supported"),null;try{return e.paused&&await e.play().catch(()=>{console.warn("Auto-play was prevented")}),await e.requestPictureInPicture()}catch(e){return console.error("Failed to enter Picture-in-Picture:",e),null}}(e))})},[]),_e=t.useCallback(()=>{se({type:"SET_CONTROLS_VISIBLE",visible:!1}),Y.current&&(clearTimeout(Y.current),Y.current=null)},[]),Te=t.useCallback((e=2500)=>{Y.current&&clearTimeout(Y.current),se({type:"SET_CONTROLS_VISIBLE",visible:!0}),Y.current=setTimeout(_e,e)},[_e]),Ee=t.useCallback(e=>{ae.isControlsVisible&&oe(t=>{t.currentTime=e,ne({type:"SET_CURRENT_TIME",time:e}),Te()})},[oe,ae.isControlsVisible,Te]),ke=t.useMemo(()=>function(e,t){let r=null,n=0;return function(...a){const s=Date.now();n?(r&&clearTimeout(r),r=setTimeout(()=>{s-n>=t&&(e.apply(this,a),n=s)},t-(s-n))):(e.apply(this,a),n=s)}}(()=>{Te()},200),[Te]),ve=t.useCallback(()=>{ke()},[ke]),xe=t.useCallback(()=>{_e()},[_e]),Se=t.useCallback(e=>{const t=e.currentTarget.getBoundingClientRect(),r=e.clientX-t.left,n=Math.min(Math.max(r/t.width,0),1)*re.durationTime;se({type:"SET_HOVER_TIME",x:r,time:n})},[re.durationTime]),be=t.useCallback(e=>{const t=e.currentTarget.getBoundingClientRect(),r=e.touches[0].clientX-t.left,n=Math.min(Math.max(r/t.width,0),1)*re.durationTime;se({type:"SET_HOVER_TIME",x:r,time:n}),Ee(n)},[re.durationTime,Ee]),fe=t.useCallback(()=>{se({type:"SET_HOVER_TIME",x:null,time:0})},[]),ge=t.useCallback(e=>{ne({type:"SET_VOLUME",volume:e.currentTarget.volume})},[]),je=t.useCallback(e=>{oe(t=>{t.volume=+e.currentTarget.value})},[]),Pe=t.useCallback(e=>{se({type:"SET_LOADING",loading:e})},[]),Me=t.useCallback(e=>{oe(t=>{W.current=t.currentTime;const r=J.current.findIndex(t=>t.quality===e);r<0||(Pe(!0),le(r))})},[oe,Pe]);t.useEffect(()=>{const e=z.current;if(!e||0===W.current)return;const t=()=>{e.currentTime=W.current,e.play()};return e.addEventListener("loadedmetadata",t,{once:!0}),()=>e.removeEventListener("loadedmetadata",t)},[ie]);const Ce=t.useCallback(e=>{ne({type:"SET_PLAYBACK_SPEED",speed:e.currentTarget.playbackRate})},[]),Ne=t.useCallback(e=>{oe(t=>{t.playbackRate=e})},[]),we=t.useCallback(()=>{se({type:"SET_SETTING",active:!ae.isSettingsVisible})},[ae.isSettingsVisible]),Le=t.useMemo(()=>{if(!z.current||!re.durationTime)return 0;const e=z.current.buffered;if(0===e.length)return 0;let t=0;for(let r=0;r<e.length;r++)if(e.start(r)<=re.currentTime&&e.end(r)>re.currentTime){t=e.end(r);break}return t/re.durationTime*100},[re.currentTime,re.durationTime]),Re=t.useMemo(()=>re.durationTime?re.currentTime/re.durationTime*100:0,[re.currentTime,re.durationTime]),Ae=t.useRef(null),Ie=t.useCallback(()=>{Ae.current&&clearTimeout(Ae.current),se({type:"SET_SEEK_MODE",isActive:!0}),Ae.current=setTimeout(()=>{se({type:"SET_SEEK_MODE",isActive:!1}),se({type:"RESET_SEEK"}),Ae.current=null},1200)},[]),Ve=t.useCallback(e=>{oe(t=>{const r="+"===e?10:-10;t.currentTime+=r,se({type:"ADD_SEEK",amount:r}),Ie()})},[oe,Ie]),Fe=t.useRef(0),De=t.useRef(null),Oe=t.useCallback(e=>{if(!te)return;const t=Date.now(),r=t-Fe.current;r>0&&r<300||ae.isSeekMode?(De.current&&(clearTimeout(De.current),De.current=null),ae.isSeekMode||se({type:"SET_SEEK_MODE",isActive:!0}),Ve(e)):De.current=setTimeout(()=>{ae.isControlsVisible?_e():Te(),De.current=null},300),Fe.current=t},[te,ae.isSeekMode,ae.isControlsVisible,Ve,Te,_e]),qe=t.useCallback(e=>{if(!te)return;if(e.target.closest("button, input, [data-no-toggle=true]"))return Te();ae.isControlsVisible?_e():Te()},[te,ae.isControlsVisible,Te,_e]),He=ae.isControlsVisible,Be=ae.isMuted?0:re.volume;return t.useEffect(()=>{if(te)return;const e=e=>{switch([" ","f","p","ArrowLeft","ArrowRight"].includes(e.key)&&(e.preventDefault(),Te()),e.key){case" ":me();break;case"f":ye();break;case"p":he();break;case"ArrowLeft":Ve("-");break;case"ArrowRight":Ve("+")}};return window.addEventListener("keydown",e),()=>{window.removeEventListener("keydown",e)}},[me,ye,he,Te,Ve]),t.useEffect(()=>{const e=async()=>{const e=document.fullscreenElement===Q.current;se({type:"SET_FULLSCREEN",active:e}),z.current&&async function(e,t){const r=e.videoWidth>e.videoHeight;if("undefined"!=typeof window&&window.screen&&"orientation"in window.screen&&window.screen.orientation&&"lock"in window.screen.orientation&&"function"==typeof window.screen.orientation.lock)try{t&&r?await window.screen.orientation.lock("landscape"):window.screen.orientation.unlock()}catch(e){console.warn("Failed to lock orientation:",e)}}(z.current,e)};return document.addEventListener("fullscreenchange",e),()=>{document.removeEventListener("fullscreenchange",e),Y.current&&clearTimeout(Y.current)}},[]),e.jsxs("div",{ref:Q,onMouseMove:te||ae.isError?void 0:ve,onMouseLeave:te||ae.isError?void 0:xe,onTouchEnd:te&&!ae.isError?qe:void 0,className:o+(te?"":` ${l}`),children:[e.jsx("video",{ref:z,poster:G,controls:!1,onContextMenu:()=>!1,className:u,src:$?void 0:J.current[ie].src,onWaiting:()=>Pe(!0),onPlaying:()=>Pe(!1),onCanPlay:()=>Pe(!1),onLoadedData:()=>Pe(!1),onError:()=>se({type:"SET_ERROR",error:!0}),onTimeUpdate:de,onVolumeChange:ge,onRateChange:Ce,onPlay:()=>ne({type:"SET_PAUSED",isPaused:!1}),onPause:()=>ne({type:"SET_PAUSED",isPaused:!0}),onDurationChange:e=>ne({type:"SET_DURATION",duration:e.currentTarget.duration}),onLoadedMetadata:e=>ne({type:"SET_DURATION",duration:e.currentTarget.duration})}),e.jsxs("div",{className:c+(He&&!ae.isError?` ${d}`:""),children:[e.jsxs("div",{className:m,children:[e.jsx("article",{className:y,children:a}),e.jsx("button",{type:"button",className:i,onClick:e=>{e.stopPropagation(),we()},onFocus:e=>e.currentTarget.blur(),children:e.jsx(s,{name:"setting"})})]}),e.jsxs("div",{className:p,onClick:te?void 0:me,children:[e.jsx("div",{className:h,"data-no-toggle":!0,onTouchEnd:()=>Oe("-"),children:ae.seekStack<0&&e.jsx("div",{inert:!0,className:q,children:ae.seekStack.toString()},ae.seekStack)}),e.jsx("div",{className:h,"data-no-toggle":!0,onTouchEnd:()=>Oe("+"),children:ae.seekStack>0&&e.jsx("div",{inert:!0,className:H,children:`+${ae.seekStack.toString()}`},ae.seekStack)})]}),e.jsxs("div",{className:_,children:[e.jsx("div",{className:T,children:U(re.currentTime)}),e.jsxs("div",{className:S,children:[e.jsx("div",{className:b,style:{display:null===ae.hoverTime.x?"none":void 0,"--player-hover-position":`${ae.hoverTime.x}px`},children:U(ae.hoverTime.time)}),e.jsx("input",{step:"any",type:"range",onFocus:e=>e.currentTarget.blur(),max:re.durationTime,value:re.currentTime,className:f,onMouseMove:te?void 0:Se,onMouseLeave:te?void 0:fe,onTouchMove:te?be:void 0,onTouchEnd:te?fe:void 0,onTouchCancel:te?fe:void 0,onChange:e=>Ee(+e.currentTarget.value),style:{"--player-buffer-position":`${Le}%`,"--player-time-position":`${Re}%`}}),e.jsx("div",{className:g,style:{"--player-thumb-position":`${Re}%`}})]}),e.jsx("div",{className:E,children:U(re.durationTime)}),e.jsxs("div",{className:k,children:[e.jsx("button",{type:"button",className:i,onClick:e=>{e.stopPropagation(),pe()},onFocus:e=>e.currentTarget.blur(),children:e.jsx(s,{name:ae.isMuted||0===re.volume?"unmute":"mute"})}),e.jsxs("div",{className:v,children:[e.jsx("input",{style:{"--player-buffer-position":100*Be+"%","--player-time-position":100*Be+"%"},onFocus:e=>e.currentTarget.blur(),onChange:je,className:x,value:Be,type:"range",step:"any",max:1}),e.jsx("div",{className:g,style:{"--player-thumb-position":100*Be+"%"}})]})]}),e.jsx("button",{type:"button",className:i,onClick:e=>{e.stopPropagation(),he()},onFocus:e=>e.currentTarget.blur(),children:e.jsx(s,{name:"picture-in-picture"})}),e.jsx("button",{type:"button",className:i,onClick:e=>{e.stopPropagation(),ye()},onFocus:e=>e.currentTarget.blur(),children:e.jsx(s,{name:ae.isFullscreen?"exit-fullscreen":"fullscreen"})})]}),ae.isLoading?e.jsx("div",{className:j,children:e.jsx(s,{name:"loading",style:{width:"100%"}})}):e.jsx("div",{className:P,"data-no-toggle":!0,onClick:me,children:e.jsx(s,{name:re.isPaused?"play":"pause",bigger:!0})})]}),e.jsxs("div",{className:M,style:{display:ae.isSettingsVisible?void 0:"none"},onClick:()=>{se({type:"SET_SETTING",active:!1}),se({type:"SET_SETTING_PANEL",name:null})},onMouseMove:e=>e.stopPropagation(),children:[e.jsxs("div",{className:C,onClick:e=>e.stopPropagation(),style:{display:null===ae.settingPanel?void 0:"none"},children:[e.jsxs("div",{className:L,children:[e.jsx(s,{name:"quality",style:{stroke:"#000"}}),e.jsxs("div",{className:R,onClick:()=>se({type:"SET_SETTING_PANEL",name:"quality"}),children:[e.jsx("span",{children:"Video quality"}),e.jsx("span",{children:Z(J.current[ie].quality)})]})]}),e.jsxs("div",{className:L,children:[e.jsx(s,{name:"playback",style:{stroke:"#000"}}),e.jsxs("div",{className:R,onClick:()=>se({type:"SET_SETTING_PANEL",name:"speed"}),children:[e.jsx("span",{children:"Playback speed"}),e.jsxs("span",{children:[re.playbackSpeed,"x"]})]})]})]}),e.jsxs("div",{className:N,onClick:e=>e.stopPropagation(),style:{display:"speed"===ae.settingPanel?void 0:"none"},children:[e.jsxs("div",{className:I,children:["Speed ",re.playbackSpeed,"x"]}),e.jsxs("div",{className:V,children:[e.jsx("button",{type:"button",className:A,onClick:()=>Ne(.25===re.playbackSpeed?.25:re.playbackSpeed-.25),onFocus:e=>e.currentTarget.blur(),children:e.jsx(s,{name:"minus"})}),e.jsx("input",{max:4,min:.25,step:.25,type:"range",onFocus:e=>e.currentTarget.blur(),style:{"--spped-thumb-position":(re.playbackSpeed-.25)/3.75*100+"%"},className:F,onChange:e=>Ne(+e.currentTarget.value),value:re.playbackSpeed}),e.jsx("button",{type:"button",className:A,onClick:()=>Ne(4===re.playbackSpeed?4:re.playbackSpeed+.25),onFocus:e=>e.currentTarget.blur(),children:e.jsx(s,{name:"plus"})})]})]}),e.jsxs("div",{className:w,onClick:e=>e.stopPropagation(),style:{display:"quality"===ae.settingPanel?void 0:"none"},children:[e.jsxs("div",{className:I,children:["Quality ",Z(J.current[ie].quality)]}),e.jsx("div",{className:O,children:J.current.map(t=>e.jsxs("div",{className:L,onClick:()=>{Me(t.quality),se({type:"SET_SETTING",active:!1}),se({type:"SET_SETTING_PANEL",name:null})},children:[e.jsx("input",{type:"checkbox",readOnly:!0,onFocus:e=>e.currentTarget.blur(),className:D,checked:J.current[ie].quality===t.quality}),Z(t.quality)]},t.quality))})]})]}),ae.isError&&e.jsxs("div",{className:B,children:[e.jsx(s,{name:"error",style:{width:"80px"}}),e.jsx("span",{children:"Unable to play video"})]})]})};
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import{useRef as r,useMemo as i,useReducer as a,useState as l,useCallback as o,useEffect as s}from"react";function u(e,t){switch(t.type){case"SET_VOLUME":return{...e,volume:t.volume};case"SET_PAUSED":return{...e,isPaused:t.isPaused};case"SET_DURATION":return{...e,durationTime:t.duration};case"SET_CURRENT_TIME":return{...e,currentTime:t.time};case"SET_PLAYBACK_SPEED":return{...e,playbackSpeed:t.speed};default:return e}}function c(e,t){switch(t.type){case"SET_CONTROLS_VISIBLE":return{...e,isControlsVisible:t.visible};case"SET_SETTING_PANEL":return{...e,settingPanel:t.name};case"SET_HOVER_TIME":return{...e,hoverTime:{x:t.x,time:t.time}};case"SET_FULLSCREEN":return{...e,isFullscreen:t.active};case"SET_LOADING":return{...e,isLoading:t.loading};case"SET_SETTING":return{...e,isSettingsVisible:t.active};case"SET_MUTED":return{...e,isMuted:t.muted};case"ADD_SEEK":return{...e,seekStack:t.amount>0?e.seekStack<0?t.amount:e.seekStack+t.amount:e.seekStack>0?t.amount:e.seekStack+t.amount};case"RESET_SEEK":return{...e,seekStack:0};case"SET_SEEK_MODE":return{...e,isSeekMode:t.isActive};default:return e}}const d=["play","pause"];function m({name:r,style:i,bigger:a}){return e("svg","loading"===r?{version:"1.1",id:"L1",xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",x:"0px",y:"0px",viewBox:"0 0 100 100",enableBackground:"new 0 0 100 100",xmlSpace:"preserve",children:[t("title",{children:"loading"}),t("circle",{fill:"none",stroke:"currentColor",strokeWidth:"6",strokeMiterlimit:"15",strokeDasharray:"14.2472,14.2472",cx:"50",cy:"50",r:"47",children:t("animateTransform",{attributeName:"transform",attributeType:"XML",type:"rotate",dur:"5s",from:"0 50 50",to:"360 50 50",repeatCount:"indefinite"})}),t("circle",{fill:"none",stroke:"currentColor",strokeWidth:"1",strokeMiterlimit:"10",strokeDasharray:"10,10",cx:"50",cy:"50",r:"39",children:t("animateTransform",{attributeName:"transform",attributeType:"XML",type:"rotate",dur:"5s",from:"0 50 50",to:"-360 50 50",repeatCount:"indefinite"})}),e("g",{fill:"currentColor",children:[t("rect",{x:"30",y:"35",width:"5",height:"30",children:t("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.1"})}),t("rect",{x:"40",y:"35",width:"5",height:"30",children:t("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.2"})}),t("rect",{x:"50",y:"35",width:"5",height:"30",children:t("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.3"})}),t("rect",{x:"60",y:"35",width:"5",height:"30",children:t("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.4"})}),t("rect",{x:"70",y:"35",width:"5",height:"30",children:t("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.5"})})]})]}:{fill:d.includes(r)?"currentColor":"none",strokeWidth:1.5,width:a?56:24,viewBox:"0 0 24 24",stroke:"currentColor",style:i,xmlns:"http://www.w3.org/2000/svg",children:[t("title",{children:r}),"play"===r&&t("path",{fillRule:"evenodd",d:"M4.5 5.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L7.28 19.99c-1.25.687-2.779-.217-2.779-1.643V5.653Z",clipRule:"evenodd"}),"pause"===r&&t("path",{fillRule:"evenodd",d:"M6.75 5.25a.75.75 0 0 1 .75-.75H9a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H7.5a.75.75 0 0 1-.75-.75V5.25Zm7.5 0A.75.75 0 0 1 15 4.5h1.5a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H15a.75.75 0 0 1-.75-.75V5.25Z",clipRule:"evenodd"}),"setting"===r&&e(n,{children:[t("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"}),t("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"})]}),"fullscreen"===r&&t("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"}),"exit-fullscreen"===r&&t("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9 9V4.5M9 9H4.5M9 9 3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25"}),"mute"===r&&t("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M19.114 5.636a9 9 0 0 1 0 12.728M16.463 8.288a5.25 5.25 0 0 1 0 7.424M6.75 8.25l4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z"}),"unmute"===r&&t("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M17.25 9.75 19.5 12m0 0 2.25 2.25M19.5 12l2.25-2.25M19.5 12l-2.25 2.25m-10.5-6 4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z"}),"picture-in-picture"===r&&t("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"}),"quality"===r&&t("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75"}),"playback"===r&&e(n,{children:[t("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"}),t("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M15.91 11.672a.375.375 0 0 1 0 .656l-5.603 3.113a.375.375 0 0 1-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112Z"})]}),"plus"===r&&t("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M12 4.5v15m7.5-7.5h-15"}),"minus"===r&&t("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M5 12h14"})]})}var y="style-module_PlayerButton__3pLMQ",p="style-module_PlayerDesktop__ccJTe",_="style-module_PlayerWrapper__37Xpc",h="style-module_PlayerVideo__NkoX3",T="style-module_PlayerControls__IyMmM",E="style-module_PlayerShown__uVIfu",v="style-module_PlayerPanelTop__x02Dp",k="style-module_PlayerTitle__yTvNu",S="style-module_PlayerPanelCenter__y8jR0",g="style-module_PlayerSeekArea__z-qY-",b="style-module_PlayerPanelBottom__bdhhD",f="style-module_PlayerCurrentTime__IaolO",P="style-module_PlayerDurationTime__uCgjW",M="style-module_PlayerVolume__r7ll8",N="style-module_PlayerVolumeZone__7LHeR",w="style-module_PlayerRangeVolume__8XBa1",L="style-module_PlayerSeekTime__SEypx",C="style-module_PlayerHoverTime__iBu1D",x="style-module_PlayerRangeTime__QVr8d",I="style-module_PlayerRangeThumb__J5IcV",A="style-module_PlayerLoading__PBiIH",V="style-module_PlayerCenter__qLy3K",R="style-module_PlayerSetting__BhP11",D="style-module_PlayerSettingPanel__tZE0z",F="style-module_PlayerSettingPanelSpeed__ABgXy",q="style-module_PlayerSettingPanelQuality__4UQId",O="style-module_PlayerSettingList__KEYZR",H="style-module_PlayerSettingDisplay__-yFqd",B="style-module_PlayerButtonCursor__4PyXl",U="style-module_PlayerSpeedShow__u1NIt",j="style-module_PlayerPlayback__EZYH2",Z="style-module_PlayerRangeSpeed__ElauL",K="style-module_PlayerCheckbox__At22K",G="style-module_PlayerQualityList__rvIel",X="style-module_seekLeft__9AAFX",$="style-module_seekRight__RMywZ";function W(e){if(void 0===e||Number.isNaN(e)||e<0)return"00:00";const t=Math.floor(e),n=t%60;return`${Math.floor(t/60).toString().padStart(2,"0")}:${n.toString().padStart(2,"0")}`}function Q(e){return 0===e?"Auto":e<1e3?`${e}p`:e/1e3+"k"}function z({title:n,poster:d,source:z}){const Y=r(0),J=r(null),ee=r(null),te=r(null),ne=r("string"==typeof z?[{src:z,quality:0}]:[...z].sort((e,t)=>t.quality-e.quality)),re=i(()=>/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobi/i.test(navigator.userAgent),[]),[ie,ae]=a(u,{volume:1,isPaused:!0,currentTime:0,durationTime:0,playbackSpeed:1}),[le,oe]=a(c,{seekStack:0,isMuted:!1,isLoading:!0,isSeekMode:!1,settingPanel:null,isFullscreen:!1,isControlsVisible:!0,isSettingsVisible:!1,hoverTime:{x:null,time:0}}),[se,ue]=l(0),ce=o(async e=>{if(ee.current)try{return await e(ee.current)}catch(e){return console.error("Video operation failed:",e),null}return null},[]),de=r(ie.currentTime),me=r(le.isControlsVisible);s(()=>{de.current=ie.currentTime,me.current=le.isControlsVisible},[ie.currentTime,le.isControlsVisible]);const ye=o(e=>{if(!me.current)return;const t=e.currentTarget.currentTime;(Math.abs(t-de.current)>1||Math.floor(t)!==Math.floor(de.current))&&ae({type:"SET_CURRENT_TIME",time:t})},[]),pe=o(()=>{ce(async e=>{e.paused?await e.play():e.pause()})},[ce]),_e=o(async()=>{(function(){const e=document;return!!(e.fullscreenEnabled||e.webkitFullscreenEnabled||e.mozFullScreenEnabled||e.msFullscreenEnabled)})()&&J.current&&(document.fullscreenElement?await async function(){const e=document,t=e.exitFullscreen||e.webkitExitFullscreen||e.mozCancelFullScreen||e.msExitFullscreen;if(t)try{return await t.call(e),!0}catch(e){return console.error("Failed to exit fullscreen:",e),!1}return!1}():await async function(e){const t=e,n=t.requestFullscreen||t.webkitRequestFullscreen||t.webkitEnterFullscreen||t.mozRequestFullScreen||t.msRequestFullscreen;if(n)try{return await n.call(t),!0}catch(e){return console.error("Failed to enter fullscreen:",e),!1}return!1}(J.current))},[]),he=o(()=>{ce(e=>{e.muted||0!==e.volume?(e.muted=!e.muted,oe({type:"SET_MUTED",muted:e.muted})):(e.volume=1,e.muted=!1,oe({type:"SET_MUTED",muted:!1}))})},[]),Te=o(async()=>{ce(async e=>{"pictureInPictureEnabled"in document&&"requestPictureInPicture"in HTMLVideoElement.prototype&&(document.pictureInPictureElement===e?await async function(e){if(!1===e.disablePictureInPicture&&"pictureInPictureElement"in document&&document.pictureInPictureElement)try{return await document.exitPictureInPicture(),!0}catch(e){return console.error("Failed to exit Picture-in-Picture:",e),!1}return!1}(e):await async function(e){if(!("pictureInPictureEnabled"in document)||"function"!=typeof e.requestPictureInPicture)return console.error("Picture-in-Picture is not supported"),null;try{return e.paused&&await e.play().catch(()=>{console.warn("Auto-play was prevented")}),await e.requestPictureInPicture()}catch(e){return console.error("Failed to enter Picture-in-Picture:",e),null}}(e))})},[]),Ee=o(()=>{oe({type:"SET_CONTROLS_VISIBLE",visible:!1}),te.current&&(clearTimeout(te.current),te.current=null)},[]),ve=o((e=2500)=>{te.current&&clearTimeout(te.current),oe({type:"SET_CONTROLS_VISIBLE",visible:!0}),te.current=setTimeout(Ee,e)},[Ee]),ke=o(e=>{le.isControlsVisible&&ce(t=>{t.currentTime=e,ae({type:"SET_CURRENT_TIME",time:e}),ve()})},[ce,le.isControlsVisible,ve]),Se=i(()=>function(e,t){let n=null,r=0;return function(...i){const a=Date.now();r?(n&&clearTimeout(n),n=setTimeout(()=>{a-r>=t&&(e.apply(this,i),r=a)},t-(a-r))):(e.apply(this,i),r=a)}}(()=>{ve()},200),[ve]),ge=o(()=>{Se()},[Se]),be=o(()=>{Ee()},[Ee]),fe=o(e=>{const t=e.currentTarget.getBoundingClientRect(),n=e.clientX-t.left,r=Math.min(Math.max(n/t.width,0),1)*ie.durationTime;oe({type:"SET_HOVER_TIME",x:n,time:r})},[ie.durationTime]),Pe=o(()=>{oe({type:"SET_HOVER_TIME",x:null,time:0})},[]),Me=o(e=>{ae({type:"SET_VOLUME",volume:e.currentTarget.volume})},[]),Ne=o(e=>{ce(t=>{t.volume=+e.currentTarget.value})},[]),we=o(e=>{oe({type:"SET_LOADING",loading:e})},[]),Le=o(e=>{ce(t=>{Y.current=t.currentTime;const n=ne.current.findIndex(t=>t.quality===e);n<0||(we(!0),ue(n))})},[ce,we]);s(()=>{const e=ee.current;if(!e||0===Y.current)return;const t=()=>{e.currentTime=Y.current,e.play()};return e.addEventListener("loadedmetadata",t,{once:!0}),()=>e.removeEventListener("loadedmetadata",t)},[se]);const Ce=o(e=>{ae({type:"SET_PLAYBACK_SPEED",speed:e.currentTarget.playbackRate})},[]),xe=o(e=>{ce(t=>{t.playbackRate=e})},[]),Ie=o(()=>{oe({type:"SET_SETTING",active:!le.isSettingsVisible})},[le.isSettingsVisible]),Ae=i(()=>{if(!ee.current||!ie.durationTime)return 0;const e=ee.current.buffered;if(0===e.length)return 0;let t=0;for(let n=0;n<e.length;n++)if(e.start(n)<=ie.currentTime&&e.end(n)>ie.currentTime){t=e.end(n);break}return t/ie.durationTime*100},[ie.currentTime,ie.durationTime]),Ve=i(()=>ie.durationTime?ie.currentTime/ie.durationTime*100:0,[ie.currentTime,ie.durationTime]),Re=r(null),De=o(()=>{Re.current&&clearTimeout(Re.current),oe({type:"SET_SEEK_MODE",isActive:!0}),Re.current=setTimeout(()=>{oe({type:"SET_SEEK_MODE",isActive:!1}),oe({type:"RESET_SEEK"}),Re.current=null},1200)},[]),Fe=o(e=>{ce(t=>{const n="+"===e?10:-10;t.currentTime+=n,oe({type:"ADD_SEEK",amount:n}),De()})},[ce,De]),qe=r(0),Oe=o(e=>{if(!re)return;const t=Date.now(),n=t-qe.current;(n>0&&n<300||le.isSeekMode)&&(le.isSeekMode||oe({type:"SET_SEEK_MODE",isActive:!0}),Fe(e)),qe.current=t},[le.isSeekMode,Fe]),He=o(e=>{if(!re)return;if(e.target.closest("button, input, [data-no-toggle]"))return ve();le.isControlsVisible?Ee():ve()},[re,le.isControlsVisible,ve,Ee]),Be=le.isControlsVisible,Ue=le.isMuted?0:ie.volume;return s(()=>{if(re)return;const e=e=>{switch([" ","f","p","ArrowLeft","ArrowRight"].includes(e.key)&&(e.preventDefault(),ve()),e.key){case" ":pe();break;case"f":_e();break;case"p":Te();break;case"ArrowLeft":Fe("-");break;case"ArrowRight":Fe("+")}};return window.addEventListener("keydown",e),()=>{window.removeEventListener("keydown",e)}},[pe,_e,Te,ve,Fe]),s(()=>{const e=async()=>{const e=document.fullscreenElement===J.current;oe({type:"SET_FULLSCREEN",active:e}),ee.current&&async function(e,t){const n=e.videoWidth>e.videoHeight;if("undefined"!=typeof window&&window.screen&&"orientation"in window.screen&&window.screen.orientation&&"lock"in window.screen.orientation&&"function"==typeof window.screen.orientation.lock)try{t&&n?await window.screen.orientation.lock("landscape"):window.screen.orientation.unlock()}catch(e){console.warn("Failed to lock orientation:",e)}}(ee.current,e)};return document.addEventListener("fullscreenchange",e),()=>{document.removeEventListener("fullscreenchange",e),te.current&&clearTimeout(te.current)}},[]),e("div",{ref:J,onMouseMove:re?void 0:ge,onMouseLeave:re?void 0:be,onTouchEnd:re?He:void 0,className:_+(re?"":` ${p}`),children:[t("video",{ref:ee,poster:d,controls:!1,onContextMenu:()=>!1,className:h,src:ne.current[se].src,onWaiting:()=>we(!0),onPlaying:()=>we(!1),onCanPlay:()=>we(!1),onLoadedData:()=>we(!1),onTimeUpdate:ye,onVolumeChange:Me,onRateChange:Ce,onPlay:()=>ae({type:"SET_PAUSED",isPaused:!1}),onPause:()=>ae({type:"SET_PAUSED",isPaused:!0}),onDurationChange:e=>ae({type:"SET_DURATION",duration:e.currentTarget.duration}),onLoadedMetadata:e=>ae({type:"SET_DURATION",duration:e.currentTarget.duration})}),e("div",{className:T+(Be?` ${E}`:""),children:[e("div",{className:v,children:[t("article",{className:k,children:n}),t("button",{type:"button",className:y,onClick:e=>{e.stopPropagation(),Ie()},onFocus:e=>e.currentTarget.blur(),children:t(m,{name:"setting"})})]}),e("div",{className:S,onClick:re?void 0:pe,children:[t("div",{className:g,"data-no-toggle":!0,onTouchEnd:()=>Oe("-"),children:le.seekStack<0&&t("div",{inert:!0,className:X,children:le.seekStack.toString()},le.seekStack)}),t("div",{className:g,"data-no-toggle":!0,onTouchEnd:()=>Oe("+"),children:le.seekStack>0&&t("div",{inert:!0,className:$,children:`+${le.seekStack.toString()}`},le.seekStack)})]}),e("div",{className:b,children:[t("div",{className:f,children:W(ie.currentTime)}),e("div",{className:L,children:[t("div",{className:C,style:{display:null===le.hoverTime.x?"none":void 0,"--player-hover-position":`${le.hoverTime.x}px`},children:W(le.hoverTime.time)}),t("input",{step:"any",type:"range",onFocus:e=>e.currentTarget.blur(),max:ie.durationTime,value:ie.currentTime,className:x,onMouseMove:fe,onMouseLeave:Pe,onChange:e=>ke(+e.currentTarget.value),style:{"--player-buffer-position":`${Ae}%`,"--player-time-position":`${Ve}%`}}),t("div",{className:I,style:{"--player-thumb-position":`${Ve}%`}})]}),t("div",{className:P,children:W(ie.durationTime)}),e("div",{className:M,children:[t("button",{type:"button",className:y,onClick:e=>{e.stopPropagation(),he()},onFocus:e=>e.currentTarget.blur(),children:t(m,{name:le.isMuted||0===ie.volume?"unmute":"mute"})}),e("div",{className:N,children:[t("input",{style:{"--player-buffer-position":100*Ue+"%","--player-time-position":100*Ue+"%"},onFocus:e=>e.currentTarget.blur(),onChange:Ne,className:w,value:Ue,type:"range",step:"any",max:1}),t("div",{className:I,style:{"--player-thumb-position":100*Ue+"%"}})]})]}),t("button",{type:"button",className:y,onClick:e=>{e.stopPropagation(),Te()},onFocus:e=>e.currentTarget.blur(),children:t(m,{name:"picture-in-picture"})}),t("button",{type:"button",className:y,onClick:e=>{e.stopPropagation(),_e()},onFocus:e=>e.currentTarget.blur(),children:t(m,{name:le.isFullscreen?"exit-fullscreen":"fullscreen"})})]}),le.isLoading?t("div",{className:A,children:t(m,{name:"loading",style:{width:"100%"}})}):t("div",{className:V,"data-no-toggle":!0,onClick:pe,children:t(m,{name:ie.isPaused?"play":"pause",bigger:!0})})]}),e("div",{className:R,style:{display:le.isSettingsVisible?void 0:"none"},onClick:()=>{oe({type:"SET_SETTING",active:!1}),oe({type:"SET_SETTING_PANEL",name:null})},onMouseMove:e=>e.stopPropagation(),children:[e("div",{className:D,onClick:e=>e.stopPropagation(),style:{display:null===le.settingPanel?void 0:"none"},children:[e("div",{className:O,children:[t(m,{name:"quality",style:{stroke:"#000"}}),e("div",{className:H,onClick:()=>oe({type:"SET_SETTING_PANEL",name:"quality"}),children:[t("span",{children:"Video quality"}),t("span",{children:Q(ne.current[se].quality)})]})]}),e("div",{className:O,children:[t(m,{name:"playback",style:{stroke:"#000"}}),e("div",{className:H,onClick:()=>oe({type:"SET_SETTING_PANEL",name:"speed"}),children:[t("span",{children:"Playback speed"}),e("span",{children:[ie.playbackSpeed,"x"]})]})]})]}),e("div",{className:F,onClick:e=>e.stopPropagation(),style:{display:"speed"===le.settingPanel?void 0:"none"},children:[e("div",{className:U,children:["Speed ",ie.playbackSpeed,"x"]}),e("div",{className:j,children:[t("button",{type:"button",className:B,onClick:()=>xe(.25===ie.playbackSpeed?.25:ie.playbackSpeed-.25),onFocus:e=>e.currentTarget.blur(),children:t(m,{name:"minus"})}),t("input",{max:4,min:.25,step:.25,type:"range",onFocus:e=>e.currentTarget.blur(),style:{"--spped-thumb-position":(ie.playbackSpeed-.25)/3.75*100+"%"},className:Z,onChange:e=>xe(+e.currentTarget.value),value:ie.playbackSpeed}),t("button",{type:"button",className:B,onClick:()=>xe(4===ie.playbackSpeed?4:ie.playbackSpeed+.25),onFocus:e=>e.currentTarget.blur(),children:t(m,{name:"plus"})})]})]}),e("div",{className:q,onClick:e=>e.stopPropagation(),style:{display:"quality"===le.settingPanel?void 0:"none"},children:[e("div",{className:U,children:["Quality ",Q(ne.current[se].quality)]}),t("div",{className:G,children:ne.current.map(n=>e("div",{className:O,onClick:()=>{Le(n.quality),oe({type:"SET_SETTING",active:!1}),oe({type:"SET_SETTING_PANEL",name:null})},children:[t("input",{type:"checkbox",readOnly:!0,onFocus:e=>e.currentTarget.blur(),className:K,checked:ne.current[se].quality===n.quality}),Q(n.quality)]},n.quality))})]})]})]})}export{z as VideoPlayer};
|
|
1
|
+
import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import{useRef as n,useMemo as i,useReducer as a,useState as l,useEffect as o,useCallback as s}from"react";function u(e,t){switch(t.type){case"SET_VOLUME":return{...e,volume:t.volume};case"SET_PAUSED":return{...e,isPaused:t.isPaused};case"SET_DURATION":return{...e,durationTime:t.duration};case"SET_CURRENT_TIME":return{...e,currentTime:t.time};case"SET_PLAYBACK_SPEED":return{...e,playbackSpeed:t.speed};default:return e}}function c(e,t){switch(t.type){case"SET_CONTROLS_VISIBLE":return{...e,isControlsVisible:t.visible};case"SET_SETTING_PANEL":return{...e,settingPanel:t.name};case"SET_HOVER_TIME":return{...e,hoverTime:{x:t.x,time:t.time}};case"SET_FULLSCREEN":return{...e,isFullscreen:t.active};case"SET_LOADING":return{...e,isLoading:t.loading};case"SET_SETTING":return{...e,isSettingsVisible:t.active};case"SET_MUTED":return{...e,isMuted:t.muted};case"SET_ERROR":return{...e,isError:t.error,isLoading:!1};case"ADD_SEEK":return{...e,seekStack:t.amount>0?e.seekStack<0?t.amount:e.seekStack+t.amount:e.seekStack>0?t.amount:e.seekStack+t.amount};case"RESET_SEEK":return{...e,seekStack:0};case"SET_SEEK_MODE":return{...e,isSeekMode:t.isActive};default:return e}}const d=["play","pause"];function m({name:n,style:i,bigger:a}){return e("svg","loading"===n?{version:"1.1",id:"L1",xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",x:"0px",y:"0px",viewBox:"0 0 100 100",enableBackground:"new 0 0 100 100",xmlSpace:"preserve",children:[t("title",{children:"loading"}),t("circle",{fill:"none",stroke:"currentColor",strokeWidth:"6",strokeMiterlimit:"15",strokeDasharray:"14.2472,14.2472",cx:"50",cy:"50",r:"47",children:t("animateTransform",{attributeName:"transform",attributeType:"XML",type:"rotate",dur:"5s",from:"0 50 50",to:"360 50 50",repeatCount:"indefinite"})}),t("circle",{fill:"none",stroke:"currentColor",strokeWidth:"1",strokeMiterlimit:"10",strokeDasharray:"10,10",cx:"50",cy:"50",r:"39",children:t("animateTransform",{attributeName:"transform",attributeType:"XML",type:"rotate",dur:"5s",from:"0 50 50",to:"-360 50 50",repeatCount:"indefinite"})}),e("g",{fill:"currentColor",children:[t("rect",{x:"30",y:"35",width:"5",height:"30",children:t("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.1"})}),t("rect",{x:"40",y:"35",width:"5",height:"30",children:t("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.2"})}),t("rect",{x:"50",y:"35",width:"5",height:"30",children:t("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.3"})}),t("rect",{x:"60",y:"35",width:"5",height:"30",children:t("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.4"})}),t("rect",{x:"70",y:"35",width:"5",height:"30",children:t("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.5"})})]})]}:{fill:d.includes(n)?"currentColor":"none",strokeWidth:1.5,width:a?56:24,viewBox:"0 0 24 24",stroke:"currentColor",style:i,xmlns:"http://www.w3.org/2000/svg",children:[t("title",{children:n}),"play"===n&&t("path",{fillRule:"evenodd",d:"M4.5 5.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L7.28 19.99c-1.25.687-2.779-.217-2.779-1.643V5.653Z",clipRule:"evenodd"}),"pause"===n&&t("path",{fillRule:"evenodd",d:"M6.75 5.25a.75.75 0 0 1 .75-.75H9a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H7.5a.75.75 0 0 1-.75-.75V5.25Zm7.5 0A.75.75 0 0 1 15 4.5h1.5a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H15a.75.75 0 0 1-.75-.75V5.25Z",clipRule:"evenodd"}),"setting"===n&&e(r,{children:[t("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"}),t("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"})]}),"fullscreen"===n&&t("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"}),"exit-fullscreen"===n&&t("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9 9V4.5M9 9H4.5M9 9 3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25"}),"mute"===n&&t("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M19.114 5.636a9 9 0 0 1 0 12.728M16.463 8.288a5.25 5.25 0 0 1 0 7.424M6.75 8.25l4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z"}),"unmute"===n&&t("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M17.25 9.75 19.5 12m0 0 2.25 2.25M19.5 12l2.25-2.25M19.5 12l-2.25 2.25m-10.5-6 4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z"}),"picture-in-picture"===n&&t("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"}),"quality"===n&&t("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75"}),"playback"===n&&e(r,{children:[t("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"}),t("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M15.91 11.672a.375.375 0 0 1 0 .656l-5.603 3.113a.375.375 0 0 1-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112Z"})]}),"error"===n&&t("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"}),"plus"===n&&t("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M12 4.5v15m7.5-7.5h-15"}),"minus"===n&&t("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M5 12h14"})]})}var p="style-module_PlayerButton__3pLMQ",y="style-module_PlayerDesktop__ccJTe",h="style-module_PlayerWrapper__37Xpc",_="style-module_PlayerVideo__NkoX3",T="style-module_PlayerControls__IyMmM",E="style-module_PlayerShown__uVIfu",v="style-module_PlayerPanelTop__x02Dp",S="style-module_PlayerTitle__yTvNu",k="style-module_PlayerPanelCenter__y8jR0",g="style-module_PlayerSeekArea__z-qY-",f="style-module_PlayerPanelBottom__bdhhD",b="style-module_PlayerCurrentTime__IaolO",P="style-module_PlayerDurationTime__uCgjW",M="style-module_PlayerVolume__r7ll8",N="style-module_PlayerVolumeZone__7LHeR",w="style-module_PlayerRangeVolume__8XBa1",L="style-module_PlayerSeekTime__SEypx",C="style-module_PlayerHoverTime__iBu1D",R="style-module_PlayerRangeTime__QVr8d",x="style-module_PlayerRangeThumb__J5IcV",A="style-module_PlayerLoading__PBiIH",I="style-module_PlayerCenter__qLy3K",V="style-module_PlayerSetting__BhP11",D="style-module_PlayerSettingPanel__tZE0z",F="style-module_PlayerSettingPanelSpeed__ABgXy",O="style-module_PlayerSettingPanelQuality__4UQId",q="style-module_PlayerSettingList__KEYZR",H="style-module_PlayerSettingDisplay__-yFqd",j="style-module_PlayerButtonCursor__4PyXl",B="style-module_PlayerSpeedShow__u1NIt",U="style-module_PlayerPlayback__EZYH2",Z="style-module_PlayerRangeSpeed__ElauL",K="style-module_PlayerCheckbox__At22K",G="style-module_PlayerQualityList__rvIel",X="style-module_seekLeft__9AAFX",$="style-module_seekRight__RMywZ",W="style-module_PlayerError__t9v1M";function Q(e){if(void 0===e||Number.isNaN(e)||e<0)return"00:00";const t=Math.floor(e),r=t%60;return`${Math.floor(t/60).toString().padStart(2,"0")}:${r.toString().padStart(2,"0")}`}function z(e){return 0===e?"Auto":e<1e3?`${e}p`:e/1e3+"k"}function Y(){return"pictureInPictureEnabled"in document&&"requestPictureInPicture"in HTMLVideoElement.prototype}function J({title:r,poster:d,source:J,hls:ee}){const te=n(0),re=n(null),ne=n(null),ie=n(null),ae=n("string"==typeof J?[{src:J,quality:0}]:[...J].sort((e,t)=>t.quality-e.quality)),le=n(null),oe=i(()=>/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobi/i.test(navigator.userAgent),[]),[se,ue]=a(u,{volume:1,isPaused:!0,currentTime:0,durationTime:0,playbackSpeed:1}),[ce,de]=a(c,{seekStack:0,isMuted:!1,isError:!1,isLoading:!0,isSeekMode:!1,settingPanel:null,isFullscreen:!1,isControlsVisible:!0,isSettingsVisible:!1,hoverTime:{x:null,time:0}}),[me,pe]=l(0);o(()=>{const e=ne.current;if(!e||!ee)return;const t=ae.current[me].src;return import("hls.js").then(({default:r})=>{if(!r.isSupported())return void(e.canPlayType("application/vnd.apple.mpegurl")&&(e.src=t));le.current?.destroy();const n=new r("object"==typeof ee?ee:{});le.current=n,n.loadSource(t),n.attachMedia(e),n.on(r.Events.ERROR,(e,t)=>{if(t.fatal)switch(t.type){case r.ErrorTypes.NETWORK_ERROR:case r.ErrorTypes.MEDIA_ERROR:de({type:"SET_ERROR",error:!0})}}),n.on(r.Events.MANIFEST_PARSED,()=>{te.current>0&&(e.currentTime=te.current,e.play())})}).catch(()=>{console.warn("hls.js not installed: npm install hls.js"),e.src=t}),()=>{le.current?.destroy(),le.current=null}},[me,ee]);const ye=s(async e=>{if(ne.current)try{return await e(ne.current)}catch(e){return console.error("Video operation failed:",e),null}return null},[]),he=n(se.currentTime),_e=n(ce.isControlsVisible);o(()=>{he.current=se.currentTime,_e.current=ce.isControlsVisible},[se.currentTime,ce.isControlsVisible]);const Te=s(e=>{if(!_e.current)return;const t=e.currentTarget.currentTime;(Math.abs(t-he.current)>1||Math.floor(t)!==Math.floor(he.current))&&ue({type:"SET_CURRENT_TIME",time:t})},[]),Ee=s(()=>{ye(async e=>{e.paused?await e.play():e.pause()})},[ye]),ve=s(async()=>{(function(){const e=document;return!!(e.fullscreenEnabled||e.webkitFullscreenEnabled||e.mozFullScreenEnabled||e.msFullscreenEnabled)})()&&re.current&&(document.fullscreenElement?await async function(){const e=document,t=e.exitFullscreen||e.webkitExitFullscreen||e.mozCancelFullScreen||e.msExitFullscreen;if(t)try{return await t.call(e),!0}catch(e){return console.error("Failed to exit fullscreen:",e),!1}return!1}():await async function(e){const t=e,r=t.requestFullscreen||t.webkitRequestFullscreen||t.webkitEnterFullscreen||t.mozRequestFullScreen||t.msRequestFullscreen;if(r)try{return await r.call(t),!0}catch(e){return console.error("Failed to enter fullscreen:",e),!1}return!1}(re.current))},[]),Se=s(()=>{ye(e=>{e.muted||0!==e.volume?(e.muted=!e.muted,de({type:"SET_MUTED",muted:e.muted})):(e.volume=1,e.muted=!1,de({type:"SET_MUTED",muted:!1}))})},[]),ke=s(async()=>{ye(async e=>{Y()&&(document.pictureInPictureElement===e?await async function(){if("pictureInPictureElement"in document&&document.pictureInPictureElement)try{return await document.exitPictureInPicture(),!0}catch(e){return console.error("Failed to exit Picture-in-Picture:",e),!1}return!1}():await async function(e){if(!Y())return console.error("Picture-in-Picture is not supported"),null;try{return e.paused&&await e.play().catch(()=>{console.warn("Auto-play was prevented")}),await e.requestPictureInPicture()}catch(e){return console.error("Failed to enter Picture-in-Picture:",e),null}}(e))})},[]),ge=s(()=>{de({type:"SET_CONTROLS_VISIBLE",visible:!1}),ie.current&&(clearTimeout(ie.current),ie.current=null)},[]),fe=s((e=2500)=>{ie.current&&clearTimeout(ie.current),de({type:"SET_CONTROLS_VISIBLE",visible:!0}),ie.current=setTimeout(ge,e)},[ge]),be=s(e=>{ce.isControlsVisible&&ye(t=>{t.currentTime=e,ue({type:"SET_CURRENT_TIME",time:e}),fe()})},[ye,ce.isControlsVisible,fe]),Pe=i(()=>function(e,t){let r=null,n=0;return function(...i){const a=Date.now();n?(r&&clearTimeout(r),r=setTimeout(()=>{a-n>=t&&(e.apply(this,i),n=a)},t-(a-n))):(e.apply(this,i),n=a)}}(()=>{fe()},200),[fe]),Me=s(()=>{Pe()},[Pe]),Ne=s(()=>{ge()},[ge]),we=s(e=>{const t=e.currentTarget.getBoundingClientRect(),r=e.clientX-t.left,n=Math.min(Math.max(r/t.width,0),1)*se.durationTime;de({type:"SET_HOVER_TIME",x:r,time:n})},[se.durationTime]),Le=s(e=>{const t=e.currentTarget.getBoundingClientRect(),r=e.touches[0].clientX-t.left,n=Math.min(Math.max(r/t.width,0),1)*se.durationTime;de({type:"SET_HOVER_TIME",x:r,time:n}),be(n)},[se.durationTime,be]),Ce=s(()=>{de({type:"SET_HOVER_TIME",x:null,time:0})},[]),Re=s(e=>{ue({type:"SET_VOLUME",volume:e.currentTarget.volume})},[]),xe=s(e=>{ye(t=>{t.volume=+e.currentTarget.value})},[]),Ae=s(e=>{de({type:"SET_LOADING",loading:e})},[]),Ie=s(e=>{ye(t=>{te.current=t.currentTime;const r=ae.current.findIndex(t=>t.quality===e);r<0||(Ae(!0),pe(r))})},[ye,Ae]);o(()=>{const e=ne.current;if(!e||0===te.current)return;const t=()=>{e.currentTime=te.current,e.play()};return e.addEventListener("loadedmetadata",t,{once:!0}),()=>e.removeEventListener("loadedmetadata",t)},[me]);const Ve=s(e=>{ue({type:"SET_PLAYBACK_SPEED",speed:e.currentTarget.playbackRate})},[]),De=s(e=>{ye(t=>{t.playbackRate=e})},[]),Fe=s(()=>{de({type:"SET_SETTING",active:!ce.isSettingsVisible})},[ce.isSettingsVisible]),Oe=i(()=>{if(!ne.current||!se.durationTime)return 0;const e=ne.current.buffered;if(0===e.length)return 0;let t=0;for(let r=0;r<e.length;r++)if(e.start(r)<=se.currentTime&&e.end(r)>se.currentTime){t=e.end(r);break}return t/se.durationTime*100},[se.currentTime,se.durationTime]),qe=i(()=>se.durationTime?se.currentTime/se.durationTime*100:0,[se.currentTime,se.durationTime]),He=n(null),je=s(()=>{He.current&&clearTimeout(He.current),de({type:"SET_SEEK_MODE",isActive:!0}),He.current=setTimeout(()=>{de({type:"SET_SEEK_MODE",isActive:!1}),de({type:"RESET_SEEK"}),He.current=null},1200)},[]),Be=s(e=>{ye(t=>{const r="+"===e?10:-10;t.currentTime+=r,de({type:"ADD_SEEK",amount:r}),je()})},[ye,je]),Ue=n(0),Ze=n(null),Ke=s(e=>{if(!oe)return;const t=Date.now(),r=t-Ue.current;r>0&&r<300||ce.isSeekMode?(Ze.current&&(clearTimeout(Ze.current),Ze.current=null),ce.isSeekMode||de({type:"SET_SEEK_MODE",isActive:!0}),Be(e)):Ze.current=setTimeout(()=>{ce.isControlsVisible?ge():fe(),Ze.current=null},300),Ue.current=t},[oe,ce.isSeekMode,ce.isControlsVisible,Be,fe,ge]),Ge=s(e=>{if(!oe)return;if(e.target.closest("button, input, [data-no-toggle=true]"))return fe();ce.isControlsVisible?ge():fe()},[oe,ce.isControlsVisible,fe,ge]),Xe=ce.isControlsVisible,$e=ce.isMuted?0:se.volume;return o(()=>{if(oe)return;const e=e=>{switch([" ","f","p","ArrowLeft","ArrowRight"].includes(e.key)&&(e.preventDefault(),fe()),e.key){case" ":Ee();break;case"f":ve();break;case"p":ke();break;case"ArrowLeft":Be("-");break;case"ArrowRight":Be("+")}};return window.addEventListener("keydown",e),()=>{window.removeEventListener("keydown",e)}},[Ee,ve,ke,fe,Be]),o(()=>{const e=async()=>{const e=document.fullscreenElement===re.current;de({type:"SET_FULLSCREEN",active:e}),ne.current&&async function(e,t){const r=e.videoWidth>e.videoHeight;if("undefined"!=typeof window&&window.screen&&"orientation"in window.screen&&window.screen.orientation&&"lock"in window.screen.orientation&&"function"==typeof window.screen.orientation.lock)try{t&&r?await window.screen.orientation.lock("landscape"):window.screen.orientation.unlock()}catch(e){console.warn("Failed to lock orientation:",e)}}(ne.current,e)};return document.addEventListener("fullscreenchange",e),()=>{document.removeEventListener("fullscreenchange",e),ie.current&&clearTimeout(ie.current)}},[]),e("div",{ref:re,onMouseMove:oe||ce.isError?void 0:Me,onMouseLeave:oe||ce.isError?void 0:Ne,onTouchEnd:oe&&!ce.isError?Ge:void 0,className:h+(oe?"":` ${y}`),children:[t("video",{ref:ne,poster:d,controls:!1,onContextMenu:()=>!1,className:_,src:ee?void 0:ae.current[me].src,onWaiting:()=>Ae(!0),onPlaying:()=>Ae(!1),onCanPlay:()=>Ae(!1),onLoadedData:()=>Ae(!1),onError:()=>de({type:"SET_ERROR",error:!0}),onTimeUpdate:Te,onVolumeChange:Re,onRateChange:Ve,onPlay:()=>ue({type:"SET_PAUSED",isPaused:!1}),onPause:()=>ue({type:"SET_PAUSED",isPaused:!0}),onDurationChange:e=>ue({type:"SET_DURATION",duration:e.currentTarget.duration}),onLoadedMetadata:e=>ue({type:"SET_DURATION",duration:e.currentTarget.duration})}),e("div",{className:T+(Xe&&!ce.isError?` ${E}`:""),children:[e("div",{className:v,children:[t("article",{className:S,children:r}),t("button",{type:"button",className:p,onClick:e=>{e.stopPropagation(),Fe()},onFocus:e=>e.currentTarget.blur(),children:t(m,{name:"setting"})})]}),e("div",{className:k,onClick:oe?void 0:Ee,children:[t("div",{className:g,"data-no-toggle":!0,onTouchEnd:()=>Ke("-"),children:ce.seekStack<0&&t("div",{inert:!0,className:X,children:ce.seekStack.toString()},ce.seekStack)}),t("div",{className:g,"data-no-toggle":!0,onTouchEnd:()=>Ke("+"),children:ce.seekStack>0&&t("div",{inert:!0,className:$,children:`+${ce.seekStack.toString()}`},ce.seekStack)})]}),e("div",{className:f,children:[t("div",{className:b,children:Q(se.currentTime)}),e("div",{className:L,children:[t("div",{className:C,style:{display:null===ce.hoverTime.x?"none":void 0,"--player-hover-position":`${ce.hoverTime.x}px`},children:Q(ce.hoverTime.time)}),t("input",{step:"any",type:"range",onFocus:e=>e.currentTarget.blur(),max:se.durationTime,value:se.currentTime,className:R,onMouseMove:oe?void 0:we,onMouseLeave:oe?void 0:Ce,onTouchMove:oe?Le:void 0,onTouchEnd:oe?Ce:void 0,onTouchCancel:oe?Ce:void 0,onChange:e=>be(+e.currentTarget.value),style:{"--player-buffer-position":`${Oe}%`,"--player-time-position":`${qe}%`}}),t("div",{className:x,style:{"--player-thumb-position":`${qe}%`}})]}),t("div",{className:P,children:Q(se.durationTime)}),e("div",{className:M,children:[t("button",{type:"button",className:p,onClick:e=>{e.stopPropagation(),Se()},onFocus:e=>e.currentTarget.blur(),children:t(m,{name:ce.isMuted||0===se.volume?"unmute":"mute"})}),e("div",{className:N,children:[t("input",{style:{"--player-buffer-position":100*$e+"%","--player-time-position":100*$e+"%"},onFocus:e=>e.currentTarget.blur(),onChange:xe,className:w,value:$e,type:"range",step:"any",max:1}),t("div",{className:x,style:{"--player-thumb-position":100*$e+"%"}})]})]}),t("button",{type:"button",className:p,onClick:e=>{e.stopPropagation(),ke()},onFocus:e=>e.currentTarget.blur(),children:t(m,{name:"picture-in-picture"})}),t("button",{type:"button",className:p,onClick:e=>{e.stopPropagation(),ve()},onFocus:e=>e.currentTarget.blur(),children:t(m,{name:ce.isFullscreen?"exit-fullscreen":"fullscreen"})})]}),ce.isLoading?t("div",{className:A,children:t(m,{name:"loading",style:{width:"100%"}})}):t("div",{className:I,"data-no-toggle":!0,onClick:Ee,children:t(m,{name:se.isPaused?"play":"pause",bigger:!0})})]}),e("div",{className:V,style:{display:ce.isSettingsVisible?void 0:"none"},onClick:()=>{de({type:"SET_SETTING",active:!1}),de({type:"SET_SETTING_PANEL",name:null})},onMouseMove:e=>e.stopPropagation(),children:[e("div",{className:D,onClick:e=>e.stopPropagation(),style:{display:null===ce.settingPanel?void 0:"none"},children:[e("div",{className:q,children:[t(m,{name:"quality",style:{stroke:"#000"}}),e("div",{className:H,onClick:()=>de({type:"SET_SETTING_PANEL",name:"quality"}),children:[t("span",{children:"Video quality"}),t("span",{children:z(ae.current[me].quality)})]})]}),e("div",{className:q,children:[t(m,{name:"playback",style:{stroke:"#000"}}),e("div",{className:H,onClick:()=>de({type:"SET_SETTING_PANEL",name:"speed"}),children:[t("span",{children:"Playback speed"}),e("span",{children:[se.playbackSpeed,"x"]})]})]})]}),e("div",{className:F,onClick:e=>e.stopPropagation(),style:{display:"speed"===ce.settingPanel?void 0:"none"},children:[e("div",{className:B,children:["Speed ",se.playbackSpeed,"x"]}),e("div",{className:U,children:[t("button",{type:"button",className:j,onClick:()=>De(.25===se.playbackSpeed?.25:se.playbackSpeed-.25),onFocus:e=>e.currentTarget.blur(),children:t(m,{name:"minus"})}),t("input",{max:4,min:.25,step:.25,type:"range",onFocus:e=>e.currentTarget.blur(),style:{"--spped-thumb-position":(se.playbackSpeed-.25)/3.75*100+"%"},className:Z,onChange:e=>De(+e.currentTarget.value),value:se.playbackSpeed}),t("button",{type:"button",className:j,onClick:()=>De(4===se.playbackSpeed?4:se.playbackSpeed+.25),onFocus:e=>e.currentTarget.blur(),children:t(m,{name:"plus"})})]})]}),e("div",{className:O,onClick:e=>e.stopPropagation(),style:{display:"quality"===ce.settingPanel?void 0:"none"},children:[e("div",{className:B,children:["Quality ",z(ae.current[me].quality)]}),t("div",{className:G,children:ae.current.map(r=>e("div",{className:q,onClick:()=>{Ie(r.quality),de({type:"SET_SETTING",active:!1}),de({type:"SET_SETTING_PANEL",name:null})},children:[t("input",{type:"checkbox",readOnly:!0,onFocus:e=>e.currentTarget.blur(),className:K,checked:ae.current[me].quality===r.quality}),z(r.quality)]},r.quality))})]})]}),ce.isError&&e("div",{className:W,children:[t(m,{name:"error",style:{width:"80px"}}),t("span",{children:"Unable to play video"})]})]})}export{J as VideoPlayer};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tiwz/react-video-player",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.2",
|
|
4
4
|
"author": "tiwz",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -14,13 +14,14 @@
|
|
|
14
14
|
"@rollup/plugin-node-resolve": "^16.0.3",
|
|
15
15
|
"@rollup/plugin-terser": "^0.4.4",
|
|
16
16
|
"@rollup/plugin-typescript": "^12.3.0",
|
|
17
|
+
"@types/hls.js": "^1.0.0",
|
|
17
18
|
"@types/node": "^25.0.10",
|
|
18
19
|
"@types/react": "^19.2.9",
|
|
19
20
|
"autoprefixer": "^10.4.23",
|
|
20
|
-
"hls.js": "^1.6.15",
|
|
21
21
|
"postcss": "^8.5.6",
|
|
22
22
|
"postcss-url": "^10.1.3",
|
|
23
23
|
"rollup": "^4.57.0",
|
|
24
|
+
"hls.js": "^1.6.15",
|
|
24
25
|
"rollup-plugin-dts": "^6.3.0",
|
|
25
26
|
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
26
27
|
"rollup-plugin-postcss": "^4.0.2",
|
|
@@ -28,7 +29,13 @@
|
|
|
28
29
|
"typescript": "^5.9.3"
|
|
29
30
|
},
|
|
30
31
|
"peerDependencies": {
|
|
31
|
-
"react": ">=19"
|
|
32
|
+
"react": ">=19",
|
|
33
|
+
"hls.js": ">=1.0.0"
|
|
34
|
+
},
|
|
35
|
+
"peerDependenciesMeta": {
|
|
36
|
+
"hls.js": {
|
|
37
|
+
"optional": true
|
|
38
|
+
}
|
|
32
39
|
},
|
|
33
40
|
"exports": {
|
|
34
41
|
".": {
|
package/dist/fonts/Kodchasan.ttf
DELETED
|
Binary file
|