@halibegic/react-video-player 0.0.16 → 0.0.18
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 +104 -13
- package/dist/components/live-player.d.ts +2 -1
- package/dist/components/player/player-event-listener.d.ts +5 -0
- package/dist/components/player/ui/player-controls.styles.d.ts +32 -11
- package/dist/components/player/ui/player-progress.styles.d.ts +13 -4
- package/dist/components/player/ui/player-remaining-time.styles.d.ts +24 -9
- package/dist/components/vod-player.d.ts +3 -5
- package/dist/react-video-player.es.js +1823 -2811
- package/dist/react-video-player.es.js.map +1 -1
- package/dist/react-video-player.umd.js +13 -477
- package/dist/react-video-player.umd.js.map +1 -1
- package/dist/stores/player-store.d.ts +8 -1
- package/dist/types/player.d.ts +28 -1
- package/dist/utils/player-events.d.ts +5 -0
- package/package.json +5 -3
- package/dist/components/vod-player/vod-player-watch-history.d.ts +0 -5
- package/dist/config/player.d.ts +0 -3
package/README.md
CHANGED
|
@@ -20,23 +20,19 @@ function App() {
|
|
|
20
20
|
}
|
|
21
21
|
```
|
|
22
22
|
|
|
23
|
-
| Prop
|
|
24
|
-
|
|
|
25
|
-
| `url`
|
|
26
|
-
| `
|
|
23
|
+
| Prop | Type | Description | Default |
|
|
24
|
+
| ----------- | ---------------------------------------- | ------------------------------------------------------- | ------- |
|
|
25
|
+
| `url` | `string` | The vod stream URL | - |
|
|
26
|
+
| `startTime` | `number` | (Optional) Start time in seconds to begin playback from | - |
|
|
27
|
+
| `onEvent` | `(event: string, data: unknown) => void` | (Optional) Event handler callback for player events | - |
|
|
27
28
|
|
|
28
|
-
**Example with `
|
|
29
|
+
**Example with `startTime`:**
|
|
29
30
|
|
|
30
31
|
```tsx
|
|
31
32
|
import { VodPlayer } from "@halibegic/react-video-player";
|
|
32
33
|
|
|
33
34
|
function App() {
|
|
34
|
-
return
|
|
35
|
-
<VodPlayer
|
|
36
|
-
url="https://example.com/vod.m3u8"
|
|
37
|
-
watchHistory={{ enabled: true, storageKey: "video-1" }}
|
|
38
|
-
/>
|
|
39
|
-
);
|
|
35
|
+
return <VodPlayer url="https://example.com/vod.m3u8" startTime={10} />;
|
|
40
36
|
}
|
|
41
37
|
```
|
|
42
38
|
|
|
@@ -67,10 +63,9 @@ function App() {
|
|
|
67
63
|
| `url` | `string` | The live stream URL | - |
|
|
68
64
|
| `startDate` | `string` | Start date for the live event in ISO 8601 format | - |
|
|
69
65
|
| `endDate` | `string` | End date for the live event in ISO 8601 format | - |
|
|
66
|
+
| `onEvent` | `(event: string, data: unknown) => void` | (Optional) Event handler callback for player events | - |
|
|
70
67
|
| `messages` | `{ eventNotStarted: string; eventFinished: string; eventStartingSoon?: string; live?: string; }` | (Optional) Custom messages for event not started, finished, starting soon, and live states | `{ eventNotStarted: "Event has not started yet.", eventFinished: "Event has finished.", eventStartingSoon: "Starting soon...", live: "Live" }` |
|
|
71
68
|
|
|
72
|
-
**Example with `messages`:**
|
|
73
|
-
|
|
74
69
|
## Keyboard Shortcuts
|
|
75
70
|
|
|
76
71
|
The video player supports the following keyboard shortcuts:
|
|
@@ -85,6 +80,102 @@ The video player supports the following keyboard shortcuts:
|
|
|
85
80
|
| `M` | Mute/Unmute | Toggle mute (0% ↔ 100%) |
|
|
86
81
|
| `F` | Fullscreen | Toggle fullscreen mode |
|
|
87
82
|
|
|
83
|
+
## Events
|
|
84
|
+
|
|
85
|
+
Both `VodPlayer` and `LivePlayer` support event handling through the `onEvent` prop. This allows you to listen to various player events and respond accordingly.
|
|
86
|
+
|
|
87
|
+
### Event Types
|
|
88
|
+
|
|
89
|
+
| Event Name | Data Type | Description |
|
|
90
|
+
| ------------------ | ------------------------------------------- | ----------------------------------------------------- |
|
|
91
|
+
| `play` | `void` | Fired when playback starts |
|
|
92
|
+
| `pause` | `void` | Fired when playback is paused |
|
|
93
|
+
| `ended` | `void` | Fired when playback reaches the end |
|
|
94
|
+
| `seeking` | `void` | Fired when seeking starts |
|
|
95
|
+
| `seeked` | `void` | Fired when seeking is complete |
|
|
96
|
+
| `timeUpdate` | `{ currentTime: number; duration: number }` | Fired during playback with current time and duration |
|
|
97
|
+
| `volumeChange` | `{ volume: number }` | Fired when volume changes (0-1) |
|
|
98
|
+
| `fullscreenChange` | `{ isFullscreen: boolean }` | Fired when fullscreen mode changes |
|
|
99
|
+
| `qualityChange` | `{ level: number \| null }` | Fired when video quality changes |
|
|
100
|
+
| `loadedMetadata` | `{ duration: number }` | Fired when video metadata is loaded |
|
|
101
|
+
| `loadStart` | `void` | Fired when loading starts |
|
|
102
|
+
| `playing` | `void` | Fired when playback actually starts (after buffering) |
|
|
103
|
+
| `waiting` | `void` | Fired when playback is waiting for data |
|
|
104
|
+
| `error` | `unknown` | Fired when an error occurs |
|
|
105
|
+
|
|
106
|
+
### Usage Examples
|
|
107
|
+
|
|
108
|
+
#### VOD Player with Events
|
|
109
|
+
|
|
110
|
+
```tsx
|
|
111
|
+
import { VodPlayer } from "@halibegic/react-video-player";
|
|
112
|
+
|
|
113
|
+
function App() {
|
|
114
|
+
const handlePlayerEvent = (event: string, data: unknown) => {
|
|
115
|
+
switch (event) {
|
|
116
|
+
case "play":
|
|
117
|
+
console.log("Play");
|
|
118
|
+
break;
|
|
119
|
+
case "pause":
|
|
120
|
+
console.log("Pause");
|
|
121
|
+
break;
|
|
122
|
+
case "timeUpdate":
|
|
123
|
+
const { currentTime, duration } = data as {
|
|
124
|
+
currentTime: number;
|
|
125
|
+
duration: number;
|
|
126
|
+
};
|
|
127
|
+
console.log(
|
|
128
|
+
`Progress: ${((currentTime / duration) * 100).toFixed(1)}%`
|
|
129
|
+
);
|
|
130
|
+
break;
|
|
131
|
+
case "volumeChange":
|
|
132
|
+
const { volume } = data as { volume: number };
|
|
133
|
+
console.log(`Volume changed to: ${(volume * 100).toFixed(0)}%`);
|
|
134
|
+
break;
|
|
135
|
+
case "fullscreenChange":
|
|
136
|
+
const { isFullscreen } = data as { isFullscreen: boolean };
|
|
137
|
+
console.log(`Fullscreen: ${isFullscreen ? "ON" : "OFF"}`);
|
|
138
|
+
break;
|
|
139
|
+
case "error":
|
|
140
|
+
console.error("Player error:", data);
|
|
141
|
+
break;
|
|
142
|
+
}
|
|
143
|
+
};
|
|
144
|
+
|
|
145
|
+
return (
|
|
146
|
+
<VodPlayer url="https://example.com/vod.m3u8" onEvent={handlePlayerEvent} />
|
|
147
|
+
);
|
|
148
|
+
}
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
#### Live Player with Events
|
|
152
|
+
|
|
153
|
+
```tsx
|
|
154
|
+
import { LivePlayer } from "@halibegic/react-video-player";
|
|
155
|
+
|
|
156
|
+
function App() {
|
|
157
|
+
const handlePlayerEvent = (event: string, data: unknown) => {
|
|
158
|
+
switch (event) {
|
|
159
|
+
case "play":
|
|
160
|
+
console.log("Play");
|
|
161
|
+
break;
|
|
162
|
+
case "pause":
|
|
163
|
+
console.log("Pause");
|
|
164
|
+
break;
|
|
165
|
+
}
|
|
166
|
+
};
|
|
167
|
+
|
|
168
|
+
return (
|
|
169
|
+
<LivePlayer
|
|
170
|
+
url="https://example.com/live.m3u8"
|
|
171
|
+
startDate="2025-09-03T00:00:00Z"
|
|
172
|
+
endDate="2025-10-03T23:59:59Z"
|
|
173
|
+
onEvent={handlePlayerEvent}
|
|
174
|
+
/>
|
|
175
|
+
);
|
|
176
|
+
}
|
|
177
|
+
```
|
|
178
|
+
|
|
88
179
|
## Development
|
|
89
180
|
|
|
90
181
|
```bash
|
|
@@ -8,7 +8,8 @@ type LivePlayerProps = {
|
|
|
8
8
|
eventStartingSoon: string;
|
|
9
9
|
live: string;
|
|
10
10
|
};
|
|
11
|
+
onEvent?: (event: string, data: unknown) => void;
|
|
11
12
|
};
|
|
12
|
-
declare function LivePlayer({ url, startDate, endDate, messages }: LivePlayerProps): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
declare function LivePlayer({ url, startDate, endDate, messages, onEvent, }: LivePlayerProps): import("react/jsx-runtime").JSX.Element;
|
|
13
14
|
export { LivePlayer };
|
|
14
15
|
export type { LivePlayerProps };
|
|
@@ -1,11 +1,32 @@
|
|
|
1
|
-
export declare const PlayerContainer: import('
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
export declare const
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
},
|
|
9
|
-
export declare const
|
|
10
|
-
|
|
11
|
-
|
|
1
|
+
export declare const PlayerContainer: import('@emotion/styled').StyledComponent<{
|
|
2
|
+
theme?: import('@emotion/react').Theme;
|
|
3
|
+
as?: React.ElementType;
|
|
4
|
+
}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
5
|
+
export declare const ControlsBottom: import('@emotion/styled').StyledComponent<{
|
|
6
|
+
theme?: import('@emotion/react').Theme;
|
|
7
|
+
as?: React.ElementType;
|
|
8
|
+
}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
9
|
+
export declare const ControlsContainer: import('@emotion/styled').StyledComponent<{
|
|
10
|
+
theme?: import('@emotion/react').Theme;
|
|
11
|
+
as?: React.ElementType;
|
|
12
|
+
}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
13
|
+
export declare const ControlsRow: import('@emotion/styled').StyledComponent<{
|
|
14
|
+
theme?: import('@emotion/react').Theme;
|
|
15
|
+
as?: React.ElementType;
|
|
16
|
+
}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
17
|
+
export declare const ControlsSection: import('@emotion/styled').StyledComponent<{
|
|
18
|
+
theme?: import('@emotion/react').Theme;
|
|
19
|
+
as?: React.ElementType;
|
|
20
|
+
}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
21
|
+
export declare const ControlsSectionStart: import('@emotion/styled').StyledComponent<{
|
|
22
|
+
theme?: import('@emotion/react').Theme;
|
|
23
|
+
as?: React.ElementType;
|
|
24
|
+
} & import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & {
|
|
25
|
+
theme?: import('@emotion/react').Theme;
|
|
26
|
+
}, {}, {}>;
|
|
27
|
+
export declare const ControlsSectionEnd: import('@emotion/styled').StyledComponent<{
|
|
28
|
+
theme?: import('@emotion/react').Theme;
|
|
29
|
+
as?: React.ElementType;
|
|
30
|
+
} & import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & {
|
|
31
|
+
theme?: import('@emotion/react').Theme;
|
|
32
|
+
}, {}, {}>;
|
|
@@ -1,6 +1,15 @@
|
|
|
1
|
-
declare const ProgressSlider: import('
|
|
2
|
-
|
|
1
|
+
declare const ProgressSlider: import('@emotion/styled').StyledComponent<{
|
|
2
|
+
theme?: import('@emotion/react').Theme;
|
|
3
|
+
as?: React.ElementType;
|
|
4
|
+
}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
5
|
+
declare const TipContainer: import('@emotion/styled').StyledComponent<{
|
|
6
|
+
theme?: import('@emotion/react').Theme;
|
|
7
|
+
as?: React.ElementType;
|
|
8
|
+
} & {
|
|
3
9
|
$isVisible: boolean;
|
|
4
|
-
}
|
|
5
|
-
declare const TipContent: import('
|
|
10
|
+
}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
11
|
+
declare const TipContent: import('@emotion/styled').StyledComponent<{
|
|
12
|
+
theme?: import('@emotion/react').Theme;
|
|
13
|
+
as?: React.ElementType;
|
|
14
|
+
}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
|
|
6
15
|
export { ProgressSlider, TipContainer, TipContent };
|
|
@@ -1,10 +1,25 @@
|
|
|
1
|
-
declare const RemainingTime: import('
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
},
|
|
9
|
-
declare const
|
|
1
|
+
declare const RemainingTime: import('@emotion/styled').StyledComponent<{
|
|
2
|
+
theme?: import('@emotion/react').Theme;
|
|
3
|
+
as?: React.ElementType;
|
|
4
|
+
}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
5
|
+
declare const Time: import('@emotion/styled').StyledComponent<{
|
|
6
|
+
theme?: import('@emotion/react').Theme;
|
|
7
|
+
as?: React.ElementType;
|
|
8
|
+
}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
|
|
9
|
+
declare const CurrentTime: import('@emotion/styled').StyledComponent<{
|
|
10
|
+
theme?: import('@emotion/react').Theme;
|
|
11
|
+
as?: React.ElementType;
|
|
12
|
+
} & import('react').ClassAttributes<HTMLParagraphElement> & import('react').HTMLAttributes<HTMLParagraphElement> & {
|
|
13
|
+
theme?: import('@emotion/react').Theme;
|
|
14
|
+
}, {}, {}>;
|
|
15
|
+
declare const Duration: import('@emotion/styled').StyledComponent<{
|
|
16
|
+
theme?: import('@emotion/react').Theme;
|
|
17
|
+
as?: React.ElementType;
|
|
18
|
+
} & import('react').ClassAttributes<HTMLParagraphElement> & import('react').HTMLAttributes<HTMLParagraphElement> & {
|
|
19
|
+
theme?: import('@emotion/react').Theme;
|
|
20
|
+
}, {}, {}>;
|
|
21
|
+
declare const Separator: import('@emotion/styled').StyledComponent<{
|
|
22
|
+
theme?: import('@emotion/react').Theme;
|
|
23
|
+
as?: React.ElementType;
|
|
24
|
+
}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
|
|
10
25
|
export { CurrentTime, Duration, RemainingTime, Separator, Time };
|
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
type VodPlayerProps = {
|
|
2
2
|
url: string;
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
storageKey: string;
|
|
6
|
-
};
|
|
3
|
+
startTime?: number;
|
|
4
|
+
onEvent?: (event: string, data: unknown) => void;
|
|
7
5
|
};
|
|
8
|
-
declare function VodPlayer(
|
|
6
|
+
declare function VodPlayer(props: VodPlayerProps): import("react/jsx-runtime").JSX.Element;
|
|
9
7
|
export { VodPlayer };
|
|
10
8
|
export type { VodPlayerProps };
|