@halibegic/react-video-player 0.0.30 → 0.0.31

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.
Files changed (11) hide show
  1. package/README.md +21 -0
  2. package/dist/components/player/ui/player-controls.styles.d.ts +16 -36
  3. package/dist/components/player/ui/player-notice.styles.d.ts +6 -13
  4. package/dist/components/player/ui/player-progress.styles.d.ts +8 -15
  5. package/dist/components/player/ui/player-remaining-time.styles.d.ts +6 -13
  6. package/dist/react-video-player.es.js +1532 -2016
  7. package/dist/react-video-player.es.js.map +1 -1
  8. package/dist/react-video-player.umd.js +10 -21
  9. package/dist/react-video-player.umd.js.map +1 -1
  10. package/dist/style.css +1 -0
  11. package/package.json +3 -5
package/README.md CHANGED
@@ -10,9 +10,26 @@ npm install @halibegic/react-video-player
10
10
 
11
11
  ## Usage
12
12
 
13
+ **Important:** You need to import the CSS file for the player styles to work correctly.
14
+
15
+ ### Next.js
16
+
17
+ In your `_app.js` or `_app.tsx`:
18
+
19
+ ```tsx
20
+ import "@halibegic/react-video-player/style.css";
21
+ ```
22
+
23
+ ### Other React Applications
24
+
25
+ ```tsx
26
+ import "@halibegic/react-video-player/style.css";
27
+ ```
28
+
13
29
  ### VOD Player
14
30
 
15
31
  ```tsx
32
+ import "@halibegic/react-video-player/style.css";
16
33
  import { VodPlayer } from "@halibegic/react-video-player";
17
34
 
18
35
  function App() {
@@ -29,6 +46,7 @@ function App() {
29
46
  **Example with `startTime`:**
30
47
 
31
48
  ```tsx
49
+ import "@halibegic/react-video-player/style.css";
32
50
  import { VodPlayer } from "@halibegic/react-video-player";
33
51
 
34
52
  function App() {
@@ -39,6 +57,7 @@ function App() {
39
57
  ### Live Player
40
58
 
41
59
  ```tsx
60
+ import "@halibegic/react-video-player/style.css";
42
61
  import { LivePlayer } from "@halibegic/react-video-player";
43
62
 
44
63
  function App() {
@@ -104,6 +123,7 @@ Both `VodPlayer` and `LivePlayer` support event handling through the `onEvent` p
104
123
  #### VOD Player with Events
105
124
 
106
125
  ```tsx
126
+ import "@halibegic/react-video-player/style.css";
107
127
  import { VodPlayer } from "@halibegic/react-video-player";
108
128
 
109
129
  function App() {
@@ -147,6 +167,7 @@ function App() {
147
167
  #### Live Player with Events
148
168
 
149
169
  ```tsx
170
+ import "@halibegic/react-video-player/style.css";
150
171
  import { LivePlayer } from "@halibegic/react-video-player";
151
172
 
152
173
  function App() {
package/dist/components/player/ui/player-controls.styles.d.ts CHANGED
@@ -1,36 +1,16 @@
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
+ export declare const PlayerContainer = "div";
2
+ export declare const PlayerContainerClassName: string;
3
+ export declare const TopControls = "div";
4
+ export declare const TopControlsClassName: string;
5
+ export declare const ControlsBottom = "div";
6
+ export declare const ControlsBottomClassName: string;
7
+ export declare const ControlsContainer = "div";
8
+ export declare const ControlsContainerClassName: string;
9
+ export declare const ControlsRow = "div";
10
+ export declare const ControlsRowClassName: string;
11
+ export declare const ControlsSection = "div";
12
+ export declare const ControlsSectionClassName: string;
13
+ export declare const ControlsSectionStart = "div";
14
+ export declare const ControlsSectionStartClassName: string;
15
+ export declare const ControlsSectionEnd = "div";
16
+ export declare const ControlsSectionEndClassName: string;
package/dist/components/player/ui/player-notice.styles.d.ts CHANGED
@@ -1,13 +1,6 @@
1
- declare const PlayerNotice: 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 PlayerNoticeTitle: import('@emotion/styled').StyledComponent<{
6
- theme?: import('@emotion/react').Theme;
7
- as?: React.ElementType;
8
- }, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
9
- declare const PlayerNoticeText: import('@emotion/styled').StyledComponent<{
10
- theme?: import('@emotion/react').Theme;
11
- as?: React.ElementType;
12
- }, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
13
- export { PlayerNotice, PlayerNoticeText, PlayerNoticeTitle };
1
+ export declare const PlayerNotice = "div";
2
+ export declare const PlayerNoticeClassName: string;
3
+ export declare const PlayerNoticeTitle = "h3";
4
+ export declare const PlayerNoticeTitleClassName: string;
5
+ export declare const PlayerNoticeText = "p";
6
+ export declare const PlayerNoticeTextClassName: string;
package/dist/components/player/ui/player-progress.styles.d.ts CHANGED
@@ -1,15 +1,8 @@
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
- } & {
9
- $isVisible: boolean;
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>, {}>;
15
- export { ProgressSlider, TipContainer, TipContent };
1
+ export declare const ProgressSlider = "div";
2
+ export declare const ProgressSliderClassName: string;
3
+ export declare const TipContainer = "div";
4
+ export declare const TipContainerClassName: string;
5
+ export declare const TipContainerVisibleClassName: string;
6
+ export declare const TipContainerHiddenClassName: string;
7
+ export declare const TipContent = "p";
8
+ export declare const TipContentClassName: string;
package/dist/components/player/ui/player-remaining-time.styles.d.ts CHANGED
@@ -1,13 +1,6 @@
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 Separator: import('@emotion/styled').StyledComponent<{
10
- theme?: import('@emotion/react').Theme;
11
- as?: React.ElementType;
12
- }, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
13
- export { RemainingTime, Separator, Time };
1
+ export declare const RemainingTime = "div";
2
+ export declare const RemainingTimeClassName: string;
3
+ export declare const Time = "p";
4
+ export declare const TimeClassName: string;
5
+ export declare const Separator = "p";
6
+ export declare const SeparatorClassName: string;