@halibegic/react-video-player 0.0.17 → 0.0.19
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 +5 -11
- package/dist/components/live-player/live-player-event-check.d.ts +1 -1
- package/dist/components/live-player/live-player-provider.d.ts +1 -2
- package/dist/components/live-player.d.ts +1 -3
- package/dist/components/player/ui/player-controls.styles.d.ts +36 -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/react-video-player.es.js +1911 -1710
- package/dist/react-video-player.es.js.map +1 -1
- package/dist/react-video-player.umd.js +25 -417
- package/dist/react-video-player.umd.js.map +1 -1
- package/dist/stores/live-player-store.d.ts +1 -5
- package/dist/types/player.d.ts +28 -1
- package/dist/utils/hls-parser.d.ts +2 -0
- package/dist/utils/player-events.d.ts +1 -27
- package/package.json +4 -3
- package/dist/components/icons/arrow-right-icon.d.ts +0 -2
- package/dist/components/live-player/live-player-remaining-time.d.ts +0 -2
package/README.md
CHANGED
|
@@ -45,8 +45,6 @@ function App() {
|
|
|
45
45
|
return (
|
|
46
46
|
<LivePlayer
|
|
47
47
|
url="https://example.com/live.m3u8"
|
|
48
|
-
startDate="2025-09-03T00:00:00Z"
|
|
49
|
-
endDate="2025-10-03T23:59:59Z"
|
|
50
48
|
messages={{
|
|
51
49
|
eventNotStarted: "Live stream još nije počeo. Molimo pričekajte.",
|
|
52
50
|
eventFinished: "Live stream je završen.",
|
|
@@ -58,13 +56,11 @@ function App() {
|
|
|
58
56
|
}
|
|
59
57
|
```
|
|
60
58
|
|
|
61
|
-
| Prop
|
|
62
|
-
|
|
|
63
|
-
| `url`
|
|
64
|
-
| `
|
|
65
|
-
| `
|
|
66
|
-
| `onEvent` | `(event: string, data: unknown) => void` | (Optional) Event handler callback for player events | - |
|
|
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" }` |
|
|
59
|
+
| Prop | Type | Description | Default |
|
|
60
|
+
| ---------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
61
|
+
| `url` | `string` | The live stream URL | - |
|
|
62
|
+
| `onEvent` | `(event: string, data: unknown) => void` | (Optional) Event handler callback for player events | - |
|
|
63
|
+
| `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" }` |
|
|
68
64
|
|
|
69
65
|
## Keyboard Shortcuts
|
|
70
66
|
|
|
@@ -168,8 +164,6 @@ function App() {
|
|
|
168
164
|
return (
|
|
169
165
|
<LivePlayer
|
|
170
166
|
url="https://example.com/live.m3u8"
|
|
171
|
-
startDate="2025-09-03T00:00:00Z"
|
|
172
|
-
endDate="2025-10-03T23:59:59Z"
|
|
173
167
|
onEvent={handlePlayerEvent}
|
|
174
168
|
/>
|
|
175
169
|
);
|
|
@@ -4,5 +4,5 @@ type LivePlayerEventCheckProps = PropsWithChildren & {
|
|
|
4
4
|
eventNotStartedMessage?: string;
|
|
5
5
|
eventStartingSoonMessage?: string;
|
|
6
6
|
};
|
|
7
|
-
declare function LivePlayerEventCheck({ children,
|
|
7
|
+
declare function LivePlayerEventCheck({ children, eventNotStartedMessage, eventStartingSoonMessage, }: LivePlayerEventCheckProps): import("react/jsx-runtime").JSX.Element;
|
|
8
8
|
export { LivePlayerEventCheck };
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { PropsWithChildren } from 'react';
|
|
2
2
|
type LivePlayerProviderProps = PropsWithChildren & {
|
|
3
3
|
startDate: Date;
|
|
4
|
-
endDate: Date;
|
|
5
4
|
};
|
|
6
|
-
declare function LivePlayerProvider({ children, startDate
|
|
5
|
+
declare function LivePlayerProvider({ children, startDate }: LivePlayerProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
7
6
|
export { LivePlayerProvider };
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
type LivePlayerProps = {
|
|
2
2
|
url: string;
|
|
3
|
-
startDate: Date | string;
|
|
4
|
-
endDate: Date | string;
|
|
5
3
|
messages?: {
|
|
6
4
|
eventFinished: string;
|
|
7
5
|
eventNotStarted: string;
|
|
@@ -10,6 +8,6 @@ type LivePlayerProps = {
|
|
|
10
8
|
};
|
|
11
9
|
onEvent?: (event: string, data: unknown) => void;
|
|
12
10
|
};
|
|
13
|
-
declare function LivePlayer({ url,
|
|
11
|
+
declare function LivePlayer({ url, messages, onEvent }: LivePlayerProps): import("react/jsx-runtime").JSX.Element | null;
|
|
14
12
|
export { LivePlayer };
|
|
15
13
|
export type { LivePlayerProps };
|
|
@@ -1,11 +1,36 @@
|
|
|
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 TopControls: 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 ControlsBottom: 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 ControlsContainer: 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 ControlsRow: 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 ControlsSection: import('@emotion/styled').StyledComponent<{
|
|
22
|
+
theme?: import('@emotion/react').Theme;
|
|
23
|
+
as?: React.ElementType;
|
|
24
|
+
}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
25
|
+
export declare const ControlsSectionStart: import('@emotion/styled').StyledComponent<{
|
|
26
|
+
theme?: import('@emotion/react').Theme;
|
|
27
|
+
as?: React.ElementType;
|
|
28
|
+
} & import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & {
|
|
29
|
+
theme?: import('@emotion/react').Theme;
|
|
30
|
+
}, {}, {}>;
|
|
31
|
+
export declare const ControlsSectionEnd: import('@emotion/styled').StyledComponent<{
|
|
32
|
+
theme?: import('@emotion/react').Theme;
|
|
33
|
+
as?: React.ElementType;
|
|
34
|
+
} & import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & {
|
|
35
|
+
theme?: import('@emotion/react').Theme;
|
|
36
|
+
}, {}, {}>;
|
|
@@ -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 };
|