@tiwz/react-video-player 2.0.1 โ 2.0.3
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 +43 -9
- 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
|
@@ -13,11 +13,13 @@ A modern, fully-featured, and mobile-friendly React video player component with
|
|
|
13
13
|
- ๐ Volume control + mute toggle
|
|
14
14
|
- ๐ฏ Multi-quality source switching (resumes from same timestamp)
|
|
15
15
|
- โก Playback speed control (0.25x โ 4x)
|
|
16
|
+
- ๐ก HLS streaming support via `hls.js` (optional)
|
|
16
17
|
- ๐ Seek bar with buffered progress indicator
|
|
17
18
|
- ๐ Smooth UX with throttled interactions
|
|
18
19
|
- ๐ก Auto-hide controls on inactivity
|
|
19
20
|
- ๐งญ Landscape lock on fullscreen (mobile)
|
|
20
21
|
- ๐ Loading indicator on buffering
|
|
22
|
+
- โ Error state UI when video fails to load
|
|
21
23
|
- ๐งฉ Fully typed with TypeScript
|
|
22
24
|
|
|
23
25
|
---
|
|
@@ -65,6 +67,7 @@ export default function App() {
|
|
|
65
67
|
| `source` | `string \| VideoSourceQuality[]` | โ
| Single URL or array of quality sources |
|
|
66
68
|
| `title` | `string` | โ | Video title shown in top bar |
|
|
67
69
|
| `poster` | `string` | โ | Thumbnail image shown before playback |
|
|
70
|
+
| `hls` | `boolean \| Partial<HlsConfig>` | โ | Enable HLS streaming via hls.js |
|
|
68
71
|
|
|
69
72
|
### VideoSourceQuality
|
|
70
73
|
|
|
@@ -94,6 +97,35 @@ type VideoSourceQuality = {
|
|
|
94
97
|
|
|
95
98
|
---
|
|
96
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.
|
|
126
|
+
|
|
127
|
+
---
|
|
128
|
+
|
|
97
129
|
## ๐ฅ Player Controls
|
|
98
130
|
|
|
99
131
|
### Desktop
|
|
@@ -114,6 +146,7 @@ type VideoSourceQuality = {
|
|
|
114
146
|
| Double tap left | Seek backward 10s |
|
|
115
147
|
| Double tap right | Seek forward 10s |
|
|
116
148
|
| Consecutive taps | Stacked seek (ยฑ20s, ยฑ30s, ...) |
|
|
149
|
+
| Drag seek bar | Seek with live preview |
|
|
117
150
|
|
|
118
151
|
---
|
|
119
152
|
|
|
@@ -146,23 +179,24 @@ Works on:
|
|
|
146
179
|
- Optimized re-rendering via `useReducer` + `useRef`
|
|
147
180
|
- Stale closure prevention with refs for hot-path callbacks
|
|
148
181
|
- Smart seek stacking with auto-reset
|
|
182
|
+
- HLS loaded via dynamic `import()` โ zero cost if unused
|
|
149
183
|
- Minimal event listeners
|
|
150
184
|
|
|
151
185
|
---
|
|
152
186
|
|
|
153
187
|
## ๐งช Browser Support
|
|
154
188
|
|
|
155
|
-
| Browser | Fullscreen | PiP | Orientation Lock |
|
|
156
|
-
|
|
157
|
-
| Chrome | โ
| โ
| โ
|
|
|
158
|
-
| Edge | โ
| โ
| โ
|
|
|
159
|
-
| Firefox | โ
| โ
| โ ๏ธ Partial |
|
|
160
|
-
| Safari (desktop) | โ
| โ
| โ |
|
|
161
|
-
| Mobile Safari | โ
| โ
(iPadOS) | โ
|
|
|
162
|
-
| Chrome Android | โ
| โ
| โ
|
|
|
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) | โ
|
|
|
163
197
|
|
|
164
198
|
---
|
|
165
199
|
|
|
166
200
|
## ๐ License
|
|
167
201
|
|
|
168
|
-
MIT ยฉ 2026 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",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",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"}function Z(){return"pictureInPictureEnabled"in document&&"requestPictureInPicture"in HTMLVideoElement.prototype}exports.VideoPlayer=function({title:a,poster:K,source:G}){const X=t.useRef(0),$=t.useRef(null),W=t.useRef(null),Q=t.useRef(null),z=t.useRef("string"==typeof G?[{src:G,quality:0}]:[...G].sort((e,t)=>t.quality-e.quality)),Y=t.useMemo(()=>/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobi/i.test(navigator.userAgent),[]),[J,ee]=t.useReducer(n,{volume:1,isPaused:!0,currentTime:0,durationTime:0,playbackSpeed:1}),[te,ne]=t.useReducer(r,{seekStack:0,isMuted:!1,isLoading:!0,isSeekMode:!1,settingPanel:null,isFullscreen:!1,isControlsVisible:!0,isSettingsVisible:!1,hoverTime:{x:null,time:0}}),[re,ae]=t.useState(0),se=t.useCallback(async e=>{if(W.current)try{return await e(W.current)}catch(e){return console.error("Video operation failed:",e),null}return null},[]),ie=t.useRef(J.currentTime),le=t.useRef(te.isControlsVisible);t.useEffect(()=>{ie.current=J.currentTime,le.current=te.isControlsVisible},[J.currentTime,te.isControlsVisible]);const oe=t.useCallback(e=>{if(!le.current)return;const t=e.currentTarget.currentTime;(Math.abs(t-ie.current)>1||Math.floor(t)!==Math.floor(ie.current))&&ee({type:"SET_CURRENT_TIME",time:t})},[]),ue=t.useCallback(()=>{se(async e=>{e.paused?await e.play():e.pause()})},[se]),ce=t.useCallback(async()=>{(function(){const e=document;return!!(e.fullscreenEnabled||e.webkitFullscreenEnabled||e.mozFullScreenEnabled||e.msFullscreenEnabled)})()&&$.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}($.current))},[]),de=t.useCallback(()=>{se(e=>{e.muted||0!==e.volume?(e.muted=!e.muted,ne({type:"SET_MUTED",muted:e.muted})):(e.volume=1,e.muted=!1,ne({type:"SET_MUTED",muted:!1}))})},[]),me=t.useCallback(async()=>{se(async e=>{Z()&&(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(!Z())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))})},[]),ye=t.useCallback(()=>{ne({type:"SET_CONTROLS_VISIBLE",visible:!1}),Q.current&&(clearTimeout(Q.current),Q.current=null)},[]),pe=t.useCallback((e=2500)=>{Q.current&&clearTimeout(Q.current),ne({type:"SET_CONTROLS_VISIBLE",visible:!0}),Q.current=setTimeout(ye,e)},[ye]),_e=t.useCallback(e=>{te.isControlsVisible&&se(t=>{t.currentTime=e,ee({type:"SET_CURRENT_TIME",time:e}),pe()})},[se,te.isControlsVisible,pe]),he=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)}}(()=>{pe()},200),[pe]),Te=t.useCallback(()=>{he()},[he]),ke=t.useCallback(()=>{ye()},[ye]),Ee=t.useCallback(e=>{const t=e.currentTarget.getBoundingClientRect(),n=e.clientX-t.left,r=Math.min(Math.max(n/t.width,0),1)*J.durationTime;ne({type:"SET_HOVER_TIME",x:n,time:r})},[J.durationTime]),xe=t.useCallback(()=>{ne({type:"SET_HOVER_TIME",x:null,time:0})},[]),ve=t.useCallback(e=>{ee({type:"SET_VOLUME",volume:e.currentTarget.volume})},[]),Se=t.useCallback(e=>{se(t=>{t.volume=+e.currentTarget.value})},[]),be=t.useCallback(e=>{ne({type:"SET_LOADING",loading:e})},[]),ge=t.useCallback(e=>{se(t=>{X.current=t.currentTime;const n=z.current.findIndex(t=>t.quality===e);n<0||(be(!0),ae(n))})},[se,be]);t.useEffect(()=>{const e=W.current;if(!e||0===X.current)return;const t=()=>{e.currentTime=X.current,e.play()};return e.addEventListener("loadedmetadata",t,{once:!0}),()=>e.removeEventListener("loadedmetadata",t)},[re]);const fe=t.useCallback(e=>{ee({type:"SET_PLAYBACK_SPEED",speed:e.currentTarget.playbackRate})},[]),je=t.useCallback(e=>{se(t=>{t.playbackRate=e})},[]),Pe=t.useCallback(()=>{ne({type:"SET_SETTING",active:!te.isSettingsVisible})},[te.isSettingsVisible]),Ce=t.useMemo(()=>{if(!W.current||!J.durationTime)return 0;const e=W.current.buffered;if(0===e.length)return 0;let t=0;for(let n=0;n<e.length;n++)if(e.start(n)<=J.currentTime&&e.end(n)>J.currentTime){t=e.end(n);break}return t/J.durationTime*100},[J.currentTime,J.durationTime]),Me=t.useMemo(()=>J.durationTime?J.currentTime/J.durationTime*100:0,[J.currentTime,J.durationTime]),Ne=t.useRef(null),we=t.useCallback(()=>{Ne.current&&clearTimeout(Ne.current),ne({type:"SET_SEEK_MODE",isActive:!0}),Ne.current=setTimeout(()=>{ne({type:"SET_SEEK_MODE",isActive:!1}),ne({type:"RESET_SEEK"}),Ne.current=null},1200)},[]),Le=t.useCallback(e=>{se(t=>{const n="+"===e?10:-10;t.currentTime+=n,ne({type:"ADD_SEEK",amount:n}),we()})},[se,we]),Re=t.useRef(0),Ae=t.useCallback(e=>{if(!Y)return;const t=Date.now(),n=t-Re.current;(n>0&&n<300||te.isSeekMode)&&(te.isSeekMode||ne({type:"SET_SEEK_MODE",isActive:!0}),Le(e)),Re.current=t},[te.isSeekMode,Le]),Ie=t.useCallback(e=>{if(!Y)return;if(e.target.closest("button, input, [data-no-toggle]"))return pe();te.isControlsVisible?ye():pe()},[Y,te.isControlsVisible,pe,ye]),Ve=te.isControlsVisible,Fe=te.isMuted?0:J.volume;return t.useEffect(()=>{if(Y)return;const e=e=>{switch([" ","f","p","ArrowLeft","ArrowRight"].includes(e.key)&&(e.preventDefault(),pe()),e.key){case" ":ue();break;case"f":ce();break;case"p":me();break;case"ArrowLeft":Le("-");break;case"ArrowRight":Le("+")}};return window.addEventListener("keydown",e),()=>{window.removeEventListener("keydown",e)}},[ue,ce,me,pe,Le]),t.useEffect(()=>{const e=async()=>{const e=document.fullscreenElement===$.current;ne({type:"SET_FULLSCREEN",active:e}),W.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)}}(W.current,e)};return document.addEventListener("fullscreenchange",e),()=>{document.removeEventListener("fullscreenchange",e),Q.current&&clearTimeout(Q.current)}},[]),e.jsxs("div",{ref:$,onMouseMove:Y?void 0:Te,onMouseLeave:Y?void 0:ke,onTouchEnd:Y?Ie:void 0,className:o+(Y?"":` ${l}`),children:[e.jsx("video",{ref:W,poster:K,controls:!1,onContextMenu:()=>!1,className:u,src:z.current[re].src,onWaiting:()=>be(!0),onPlaying:()=>be(!1),onCanPlay:()=>be(!1),onLoadedData:()=>be(!1),onTimeUpdate:oe,onVolumeChange:ve,onRateChange:fe,onPlay:()=>ee({type:"SET_PAUSED",isPaused:!1}),onPause:()=>ee({type:"SET_PAUSED",isPaused:!0}),onDurationChange:e=>ee({type:"SET_DURATION",duration:e.currentTarget.duration}),onLoadedMetadata:e=>ee({type:"SET_DURATION",duration:e.currentTarget.duration})}),e.jsxs("div",{className:c+(Ve?` ${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(),Pe()},onFocus:e=>e.currentTarget.blur(),children:e.jsx(s,{name:"setting"})})]}),e.jsxs("div",{className:p,onClick:Y?void 0:ue,children:[e.jsx("div",{className:_,"data-no-toggle":!0,onTouchEnd:()=>Ae("-"),children:te.seekStack<0&&e.jsx("div",{inert:!0,className:O,children:te.seekStack.toString()},te.seekStack)}),e.jsx("div",{className:_,"data-no-toggle":!0,onTouchEnd:()=>Ae("+"),children:te.seekStack>0&&e.jsx("div",{inert:!0,className:H,children:`+${te.seekStack.toString()}`},te.seekStack)})]}),e.jsxs("div",{className:h,children:[e.jsx("div",{className:T,children:B(J.currentTime)}),e.jsxs("div",{className:S,children:[e.jsx("div",{className:b,style:{display:null===te.hoverTime.x?"none":void 0,"--player-hover-position":`${te.hoverTime.x}px`},children:B(te.hoverTime.time)}),e.jsx("input",{step:"any",type:"range",onFocus:e=>e.currentTarget.blur(),max:J.durationTime,value:J.currentTime,className:g,onMouseMove:Ee,onMouseLeave:xe,onChange:e=>_e(+e.currentTarget.value),style:{"--player-buffer-position":`${Ce}%`,"--player-time-position":`${Me}%`}}),e.jsx("div",{className:f,style:{"--player-thumb-position":`${Me}%`}})]}),e.jsx("div",{className:k,children:B(J.durationTime)}),e.jsxs("div",{className:E,children:[e.jsx("button",{type:"button",className:i,onClick:e=>{e.stopPropagation(),de()},onFocus:e=>e.currentTarget.blur(),children:e.jsx(s,{name:te.isMuted||0===J.volume?"unmute":"mute"})}),e.jsxs("div",{className:x,children:[e.jsx("input",{style:{"--player-buffer-position":100*Fe+"%","--player-time-position":100*Fe+"%"},onFocus:e=>e.currentTarget.blur(),onChange:Se,className:v,value:Fe,type:"range",step:"any",max:1}),e.jsx("div",{className:f,style:{"--player-thumb-position":100*Fe+"%"}})]})]}),e.jsx("button",{type:"button",className:i,onClick:e=>{e.stopPropagation(),me()},onFocus:e=>e.currentTarget.blur(),children:e.jsx(s,{name:"picture-in-picture"})}),e.jsx("button",{type:"button",className:i,onClick:e=>{e.stopPropagation(),ce()},onFocus:e=>e.currentTarget.blur(),children:e.jsx(s,{name:te.isFullscreen?"exit-fullscreen":"fullscreen"})})]}),te.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:ue,children:e.jsx(s,{name:J.isPaused?"play":"pause",bigger:!0})})]}),e.jsxs("div",{className:C,style:{display:te.isSettingsVisible?void 0:"none"},onClick:()=>{ne({type:"SET_SETTING",active:!1}),ne({type:"SET_SETTING_PANEL",name:null})},onMouseMove:e=>e.stopPropagation(),children:[e.jsxs("div",{className:M,onClick:e=>e.stopPropagation(),style:{display:null===te.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:()=>ne({type:"SET_SETTING_PANEL",name:"quality"}),children:[e.jsx("span",{children:"Video quality"}),e.jsx("span",{children:U(z.current[re].quality)})]})]}),e.jsxs("div",{className:L,children:[e.jsx(s,{name:"playback",style:{stroke:"#000"}}),e.jsxs("div",{className:R,onClick:()=>ne({type:"SET_SETTING_PANEL",name:"speed"}),children:[e.jsx("span",{children:"Playback speed"}),e.jsxs("span",{children:[J.playbackSpeed,"x"]})]})]})]}),e.jsxs("div",{className:N,onClick:e=>e.stopPropagation(),style:{display:"speed"===te.settingPanel?void 0:"none"},children:[e.jsxs("div",{className:I,children:["Speed ",J.playbackSpeed,"x"]}),e.jsxs("div",{className:V,children:[e.jsx("button",{type:"button",className:A,onClick:()=>je(.25===J.playbackSpeed?.25:J.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":(J.playbackSpeed-.25)/3.75*100+"%"},className:F,onChange:e=>je(+e.currentTarget.value),value:J.playbackSpeed}),e.jsx("button",{type:"button",className:A,onClick:()=>je(4===J.playbackSpeed?4:J.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"===te.settingPanel?void 0:"none"},children:[e.jsxs("div",{className:I,children:["Quality ",U(z.current[re].quality)]}),e.jsx("div",{className:q,children:z.current.map(t=>e.jsxs("div",{className:L,onClick:()=>{ge(t.quality),ne({type:"SET_SETTING",active:!1}),ne({type:"SET_SETTING_PANEL",name:null})},children:[e.jsx("input",{type:"checkbox",readOnly:!0,onFocus:e=>e.currentTarget.blur(),className:D,checked:z.current[re].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 a,useReducer as i,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:a,bigger:i}){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:i?56:24,viewBox:"0 0 24 24",stroke:"currentColor",style:a,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",A="style-module_PlayerRangeThumb__J5IcV",I="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(){return"pictureInPictureEnabled"in document&&"requestPictureInPicture"in HTMLVideoElement.prototype}function Y({title:n,poster:d,source:Y}){const J=r(0),ee=r(null),te=r(null),ne=r(null),re=r("string"==typeof Y?[{src:Y,quality:0}]:[...Y].sort((e,t)=>t.quality-e.quality)),ae=a(()=>/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobi/i.test(navigator.userAgent),[]),[ie,le]=i(u,{volume:1,isPaused:!0,currentTime:0,durationTime:0,playbackSpeed:1}),[oe,se]=i(c,{seekStack:0,isMuted:!1,isLoading:!0,isSeekMode:!1,settingPanel:null,isFullscreen:!1,isControlsVisible:!0,isSettingsVisible:!1,hoverTime:{x:null,time:0}}),[ue,ce]=l(0),de=o(async e=>{if(te.current)try{return await e(te.current)}catch(e){return console.error("Video operation failed:",e),null}return null},[]),me=r(ie.currentTime),ye=r(oe.isControlsVisible);s(()=>{me.current=ie.currentTime,ye.current=oe.isControlsVisible},[ie.currentTime,oe.isControlsVisible]);const pe=o(e=>{if(!ye.current)return;const t=e.currentTarget.currentTime;(Math.abs(t-me.current)>1||Math.floor(t)!==Math.floor(me.current))&&le({type:"SET_CURRENT_TIME",time:t})},[]),_e=o(()=>{de(async e=>{e.paused?await e.play():e.pause()})},[de]),he=o(async()=>{(function(){const e=document;return!!(e.fullscreenEnabled||e.webkitFullscreenEnabled||e.mozFullScreenEnabled||e.msFullscreenEnabled)})()&&ee.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}(ee.current))},[]),Te=o(()=>{de(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}))})},[]),Ee=o(async()=>{de(async e=>{z()&&(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(!z())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))})},[]),ve=o(()=>{se({type:"SET_CONTROLS_VISIBLE",visible:!1}),ne.current&&(clearTimeout(ne.current),ne.current=null)},[]),ke=o((e=2500)=>{ne.current&&clearTimeout(ne.current),se({type:"SET_CONTROLS_VISIBLE",visible:!0}),ne.current=setTimeout(ve,e)},[ve]),Se=o(e=>{oe.isControlsVisible&&de(t=>{t.currentTime=e,le({type:"SET_CURRENT_TIME",time:e}),ke()})},[de,oe.isControlsVisible,ke]),ge=a(()=>function(e,t){let n=null,r=0;return function(...a){const i=Date.now();r?(n&&clearTimeout(n),n=setTimeout(()=>{i-r>=t&&(e.apply(this,a),r=i)},t-(i-r))):(e.apply(this,a),r=i)}}(()=>{ke()},200),[ke]),be=o(()=>{ge()},[ge]),fe=o(()=>{ve()},[ve]),Pe=o(e=>{const t=e.currentTarget.getBoundingClientRect(),n=e.clientX-t.left,r=Math.min(Math.max(n/t.width,0),1)*ie.durationTime;se({type:"SET_HOVER_TIME",x:n,time:r})},[ie.durationTime]),Me=o(()=>{se({type:"SET_HOVER_TIME",x:null,time:0})},[]),Ne=o(e=>{le({type:"SET_VOLUME",volume:e.currentTarget.volume})},[]),we=o(e=>{de(t=>{t.volume=+e.currentTarget.value})},[]),Le=o(e=>{se({type:"SET_LOADING",loading:e})},[]),Ce=o(e=>{de(t=>{J.current=t.currentTime;const n=re.current.findIndex(t=>t.quality===e);n<0||(Le(!0),ce(n))})},[de,Le]);s(()=>{const e=te.current;if(!e||0===J.current)return;const t=()=>{e.currentTime=J.current,e.play()};return e.addEventListener("loadedmetadata",t,{once:!0}),()=>e.removeEventListener("loadedmetadata",t)},[ue]);const xe=o(e=>{le({type:"SET_PLAYBACK_SPEED",speed:e.currentTarget.playbackRate})},[]),Ae=o(e=>{de(t=>{t.playbackRate=e})},[]),Ie=o(()=>{se({type:"SET_SETTING",active:!oe.isSettingsVisible})},[oe.isSettingsVisible]),Ve=a(()=>{if(!te.current||!ie.durationTime)return 0;const e=te.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]),Re=a(()=>ie.durationTime?ie.currentTime/ie.durationTime*100:0,[ie.currentTime,ie.durationTime]),De=r(null),Fe=o(()=>{De.current&&clearTimeout(De.current),se({type:"SET_SEEK_MODE",isActive:!0}),De.current=setTimeout(()=>{se({type:"SET_SEEK_MODE",isActive:!1}),se({type:"RESET_SEEK"}),De.current=null},1200)},[]),qe=o(e=>{de(t=>{const n="+"===e?10:-10;t.currentTime+=n,se({type:"ADD_SEEK",amount:n}),Fe()})},[de,Fe]),Oe=r(0),He=o(e=>{if(!ae)return;const t=Date.now(),n=t-Oe.current;(n>0&&n<300||oe.isSeekMode)&&(oe.isSeekMode||se({type:"SET_SEEK_MODE",isActive:!0}),qe(e)),Oe.current=t},[oe.isSeekMode,qe]),Be=o(e=>{if(!ae)return;if(e.target.closest("button, input, [data-no-toggle]"))return ke();oe.isControlsVisible?ve():ke()},[ae,oe.isControlsVisible,ke,ve]),Ue=oe.isControlsVisible,je=oe.isMuted?0:ie.volume;return s(()=>{if(ae)return;const e=e=>{switch([" ","f","p","ArrowLeft","ArrowRight"].includes(e.key)&&(e.preventDefault(),ke()),e.key){case" ":_e();break;case"f":he();break;case"p":Ee();break;case"ArrowLeft":qe("-");break;case"ArrowRight":qe("+")}};return window.addEventListener("keydown",e),()=>{window.removeEventListener("keydown",e)}},[_e,he,Ee,ke,qe]),s(()=>{const e=async()=>{const e=document.fullscreenElement===ee.current;se({type:"SET_FULLSCREEN",active:e}),te.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)}}(te.current,e)};return document.addEventListener("fullscreenchange",e),()=>{document.removeEventListener("fullscreenchange",e),ne.current&&clearTimeout(ne.current)}},[]),e("div",{ref:ee,onMouseMove:ae?void 0:be,onMouseLeave:ae?void 0:fe,onTouchEnd:ae?Be:void 0,className:_+(ae?"":` ${p}`),children:[t("video",{ref:te,poster:d,controls:!1,onContextMenu:()=>!1,className:h,src:re.current[ue].src,onWaiting:()=>Le(!0),onPlaying:()=>Le(!1),onCanPlay:()=>Le(!1),onLoadedData:()=>Le(!1),onTimeUpdate:pe,onVolumeChange:Ne,onRateChange:xe,onPlay:()=>le({type:"SET_PAUSED",isPaused:!1}),onPause:()=>le({type:"SET_PAUSED",isPaused:!0}),onDurationChange:e=>le({type:"SET_DURATION",duration:e.currentTarget.duration}),onLoadedMetadata:e=>le({type:"SET_DURATION",duration:e.currentTarget.duration})}),e("div",{className:T+(Ue?` ${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:ae?void 0:_e,children:[t("div",{className:g,"data-no-toggle":!0,onTouchEnd:()=>He("-"),children:oe.seekStack<0&&t("div",{inert:!0,className:X,children:oe.seekStack.toString()},oe.seekStack)}),t("div",{className:g,"data-no-toggle":!0,onTouchEnd:()=>He("+"),children:oe.seekStack>0&&t("div",{inert:!0,className:$,children:`+${oe.seekStack.toString()}`},oe.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===oe.hoverTime.x?"none":void 0,"--player-hover-position":`${oe.hoverTime.x}px`},children:W(oe.hoverTime.time)}),t("input",{step:"any",type:"range",onFocus:e=>e.currentTarget.blur(),max:ie.durationTime,value:ie.currentTime,className:x,onMouseMove:Pe,onMouseLeave:Me,onChange:e=>Se(+e.currentTarget.value),style:{"--player-buffer-position":`${Ve}%`,"--player-time-position":`${Re}%`}}),t("div",{className:A,style:{"--player-thumb-position":`${Re}%`}})]}),t("div",{className:P,children:W(ie.durationTime)}),e("div",{className:M,children:[t("button",{type:"button",className:y,onClick:e=>{e.stopPropagation(),Te()},onFocus:e=>e.currentTarget.blur(),children:t(m,{name:oe.isMuted||0===ie.volume?"unmute":"mute"})}),e("div",{className:N,children:[t("input",{style:{"--player-buffer-position":100*je+"%","--player-time-position":100*je+"%"},onFocus:e=>e.currentTarget.blur(),onChange:we,className:w,value:je,type:"range",step:"any",max:1}),t("div",{className:A,style:{"--player-thumb-position":100*je+"%"}})]})]}),t("button",{type:"button",className:y,onClick:e=>{e.stopPropagation(),Ee()},onFocus:e=>e.currentTarget.blur(),children:t(m,{name:"picture-in-picture"})}),t("button",{type:"button",className:y,onClick:e=>{e.stopPropagation(),he()},onFocus:e=>e.currentTarget.blur(),children:t(m,{name:oe.isFullscreen?"exit-fullscreen":"fullscreen"})})]}),oe.isLoading?t("div",{className:I,children:t(m,{name:"loading",style:{width:"100%"}})}):t("div",{className:V,"data-no-toggle":!0,onClick:_e,children:t(m,{name:ie.isPaused?"play":"pause",bigger:!0})})]}),e("div",{className:R,style:{display:oe.isSettingsVisible?void 0:"none"},onClick:()=>{se({type:"SET_SETTING",active:!1}),se({type:"SET_SETTING_PANEL",name:null})},onMouseMove:e=>e.stopPropagation(),children:[e("div",{className:D,onClick:e=>e.stopPropagation(),style:{display:null===oe.settingPanel?void 0:"none"},children:[e("div",{className:O,children:[t(m,{name:"quality",style:{stroke:"#000"}}),e("div",{className:H,onClick:()=>se({type:"SET_SETTING_PANEL",name:"quality"}),children:[t("span",{children:"Video quality"}),t("span",{children:Q(re.current[ue].quality)})]})]}),e("div",{className:O,children:[t(m,{name:"playback",style:{stroke:"#000"}}),e("div",{className:H,onClick:()=>se({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"===oe.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:()=>Ae(.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=>Ae(+e.currentTarget.value),value:ie.playbackSpeed}),t("button",{type:"button",className:B,onClick:()=>Ae(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"===oe.settingPanel?void 0:"none"},children:[e("div",{className:U,children:["Quality ",Q(re.current[ue].quality)]}),t("div",{className:G,children:re.current.map(n=>e("div",{className:O,onClick:()=>{Ce(n.quality),se({type:"SET_SETTING",active:!1}),se({type:"SET_SETTING_PANEL",name:null})},children:[t("input",{type:"checkbox",readOnly:!0,onFocus:e=>e.currentTarget.blur(),className:K,checked:re.current[ue].quality===n.quality}),Q(n.quality)]},n.quality))})]})]})]})}export{Y 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.3",
|
|
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
|