@halibegic/react-video-player 0.0.32 → 0.0.33
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/dist/components/live-player/live-player-event-check.d.ts +4 -3
- package/dist/components/live-player/live-player-event-listener.d.ts +3 -0
- package/dist/components/live-player/live-player-tech.d.ts +4 -1
- package/dist/components/live-player/ui/live-player-gestures.d.ts +2 -0
- package/dist/components/player/player-event-listener.d.ts +1 -0
- package/dist/components/player/player-hls-engine.d.ts +4 -1
- package/dist/components/player/player-tech.d.ts +4 -1
- package/dist/components/player/ui/player-gestures.d.ts +9 -0
- package/dist/components/vod-player/ui/vod-player-gestures.d.ts +2 -0
- package/dist/components/vod-player/vod-player-event-listener.d.ts +3 -0
- package/dist/react-video-player.es.js +1178 -988
- package/dist/react-video-player.es.js.map +1 -1
- package/dist/react-video-player.umd.js +10 -10
- package/dist/react-video-player.umd.js.map +1 -1
- package/dist/stores/player-store.d.ts +10 -1
- package/dist/style.css +1 -1
- package/dist/types/player.d.ts +16 -15
- package/dist/utils/device.d.ts +2 -1
- package/package.json +1 -1
- package/dist/components/live-player/ui/live-player-desktop-playback-indicator.d.ts +0 -2
- package/dist/components/player/ui/player-controls.styles.d.ts +0 -16
- package/dist/components/player/ui/player-desktop-playback-indicator.d.ts +0 -4
- package/dist/components/player/ui/player-notice.styles.d.ts +0 -6
- package/dist/components/player/ui/player-progress.styles.d.ts +0 -8
- package/dist/components/player/ui/player-remaining-time.styles.d.ts +0 -6
- package/dist/components/vod-player/ui/vod-player-desktop-playback-indicator.d.ts +0 -2
|
@@ -42,6 +42,15 @@ type PlaybackActions = {
|
|
|
42
42
|
stop: () => void;
|
|
43
43
|
};
|
|
44
44
|
type PlaybackSlice = PlaybackState & PlaybackActions;
|
|
45
|
+
type IdleState = {
|
|
46
|
+
isIdle: boolean;
|
|
47
|
+
resetIdle: () => void;
|
|
48
|
+
};
|
|
49
|
+
type IdleActions = {
|
|
50
|
+
setIsIdle: (isIdle: boolean) => void;
|
|
51
|
+
resetIdle: () => void;
|
|
52
|
+
};
|
|
53
|
+
type IdleSlice = IdleState & IdleActions;
|
|
45
54
|
type IdleLockState = {
|
|
46
55
|
idleLocks: Set<string>;
|
|
47
56
|
};
|
|
@@ -86,7 +95,7 @@ type EventEmitterState = {
|
|
|
86
95
|
eventEmitter: ReturnType<typeof createPlayerEventEmitter>;
|
|
87
96
|
};
|
|
88
97
|
type EventEmitterSlice = EventEmitterState;
|
|
89
|
-
type PlayerStore = PlaybackSlice & IdleLockSlice & QualitySlice & FullscreenSlice & ErrorSlice & RefSlice & EventEmitterSlice;
|
|
98
|
+
type PlayerStore = PlaybackSlice & IdleSlice & IdleLockSlice & QualitySlice & FullscreenSlice & ErrorSlice & RefSlice & EventEmitterSlice;
|
|
90
99
|
declare function PlayerStoreProvider({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
|
|
91
100
|
declare const usePlayerStore: <T>(selector: (state: PlayerStore) => T) => T;
|
|
92
101
|
export { PlayerStoreProvider, usePlayerStore };
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._playerNotice_1m0i8_1{position:absolute;top:0;left:0;width:100%;height:100%;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;background:#000}._playerNoticeTitle_1m0i8_17{margin:0;padding:.5rem 0;font-size:1.5rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-weight:500}._playerNoticeText_1m0i8_26{margin:0;height:1.25rem;font-size:1rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-weight:500}._playerVideo_wc0sm_1{position:relative;width:100%;height:100%}@media (min-width: 768px){._playerVideo_wc0sm_1{pointer-events:none}}._playbackButton_lgsgw_1{position:absolute;top:0;left:0;display:flex;width:100%;height:100%;cursor:default;align-items:center;justify-content:center;margin:0;padding:0;outline:none;background:none;border:none;-webkit-tap-highlight-color:transparent}._playbackButton_lgsgw_1:focus{outline:none}._seekIndicator_lgsgw_23{position:absolute;top:50%;width:50%;display:flex;align-items:center;justify-content:center;padding:.25rem .5rem;font-variant-numeric:tabular-nums;font-size:1rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-weight:500;line-height:1;user-select:none;outline:none;color:#fff;text-shadow:0 0 .5rem rgba(0,0,0,.5);border-radius:1rem;transform:translateY(-50%);pointer-events:none;opacity:0;transition:opacity .2s ease-in-out;-webkit-tap-highlight-color:transparent}._seekIndicatorLeft_lgsgw_49{left:0}._seekIndicatorRight_lgsgw_53{right:0}._seekIndicatorVisible_lgsgw_57{opacity:1}._playerButton_izwqq_1{margin:0;display:flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1;font-size:.8125rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-weight:500;cursor:pointer;color:#fff;background:none;border:none;border-radius:1rem;transition:color .2s ease-in-out;-webkit-tap-highlight-color:transparent}._playerButton_izwqq_1 svg{width:1.25rem;height:1.25rem;flex-shrink:0;pointer-events:none}._playerButton_izwqq_1:hover,._button_izwqq_29:focus{color:#fffc}._playerButton_izwqq_1:focus{outline:none}._playerButton_izwqq_1:disabled{opacity:.5;cursor:not-allowed}._playerButtonCircle_izwqq_42{padding:0;width:2rem;height:2rem}._liveIndicator_1jczn_1{margin-right:.5rem;width:.4rem;height:.4rem;border-radius:.2rem;transition:background-color .2s ease}._liveIndicatorHasDelay_1jczn_9{background:gray}._liveIndicatorNoDelay_1jczn_13{background:red}._progressSlider_hwzgf_1{position:relative;width:100%;margin-bottom:-.25rem}._tipContainer_hwzgf_7{position:absolute;bottom:1.5rem;left:0;z-index:10;pointer-events:none;user-select:none;transition:opacity .2s ease-in-out,transform .2s ease-in-out}._tipContainerVisible_hwzgf_17{opacity:1;transform:translateY(0)}._tipContainerHidden_hwzgf_22{opacity:0;transform:translateY(-.5rem)}._tipContent_hwzgf_27{margin:0;padding:.25rem .5rem;font-variant-numeric:tabular-nums;font-size:.8125rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-weight:500;text-align:center;color:#000;background:#fff;border-radius:1rem}._sliderRoot_aeak6_1{position:relative;display:flex;align-items:center;width:100%;height:1rem;touch-action:none;user-select:none;cursor:pointer;-webkit-tap-highlight-color:transparent}._sliderRoot_aeak6_1[data-disabled]{cursor:not-allowed;opacity:.5}._sliderTrack_aeak6_18{position:relative;height:.25rem;flex-grow:1;background:#fff3;border-radius:1rem;overflow:hidden;-webkit-tap-highlight-color:transparent}._sliderRange_aeak6_28{position:absolute;height:100%;background:#f7e406;transition:width .2s ease-in-out;border-radius:1rem;-webkit-tap-highlight-color:transparent}._sliderThumb_aeak6_37{display:block;width:.875rem;height:.875rem;cursor:pointer;background:#fff;transition:all .2s ease-in-out;box-shadow:0 .125rem .25rem #0003;border-radius:50%;-webkit-tap-highlight-color:transparent}._sliderThumb_aeak6_37:hover{box-shadow:0 .25rem .5rem #0006}._sliderThumb_aeak6_37:focus{outline:none;box-shadow:0 0 0 .125rem #f7e40680}._sliderThumb_aeak6_37[data-disabled]{cursor:not-allowed;opacity:.5}._playerContainer_1fn8l_1{position:absolute;top:0;left:0;width:100%;height:100%;color:#fff;background:#000;overflow:hidden}._topControls_1fn8l_12{position:absolute;left:0;width:100%;top:0;z-index:10;background:linear-gradient(to bottom,rgba(0,0,0,.6),transparent);padding-top:.5rem;padding-bottom:1rem}@media (min-width: 768px){._topControls_1fn8l_12{padding-bottom:2rem}}._controlsBottom_1fn8l_29{position:absolute;left:0;width:100%;bottom:0;z-index:10;background:linear-gradient(to top,rgba(0,0,0,.6),transparent);padding-top:1rem}@media (min-width: 768px){._controlsBottom_1fn8l_29{padding-top:2rem}}._controlsContainer_1fn8l_45{display:flex;flex-direction:column;padding-left:.5rem;padding-right:.5rem;line-height:1;font-size:0}@media (min-width: 768px){._controlsContainer_1fn8l_45{padding-left:1rem;padding-right:1rem}}._controlsRow_1fn8l_61{display:flex;padding:.5rem 0;width:100%;align-items:center}._controlsSection_1fn8l_68{display:flex;flex:1;align-items:center}._controlsSection_1fn8l_68>:not(:last-child){margin-right:.5rem}._controlsSectionStart_1fn8l_78{justify-content:flex-start}._controlsSectionEnd_1fn8l_82{justify-content:flex-end}._idleCheckContainer_iz9tu_1{position:absolute;top:0;left:0;width:100%;height:100%;transition:opacity .2s ease-in-out}._idleCheckContainerIdle_iz9tu_10{cursor:none;opacity:0}._idleCheckContainerActive_iz9tu_15{cursor:auto;opacity:1}@keyframes _spin_oo4hi_10{0%{transform:rotate(0)}to{transform:rotate(360deg)}}._spinner_oo4hi_10{width:1.5rem;height:1.5rem;border:2px solid white;border-bottom-color:transparent;border-radius:50%;animation:_spin_oo4hi_10 1s linear infinite}._loadingContainer_v9v7r_1{pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;display:flex;width:100%;height:100%;align-items:center;justify-content:center}._dropdownMenuContent_1gwy6_1{padding:.25rem;min-width:8rem;max-height:8rem;overflow-y:auto;border-radius:.75rem;background:#000c;animation-duration:.4s;animation-timing-function:cubic-bezier(.16,1,.3,1);will-change:transform,opacity;z-index:1000}@media (min-width: 768px){._dropdownMenuContent_1gwy6_1{max-height:12rem}}._dropdownMenuContent_1gwy6_1[data-state=open][data-side=top]{animation-name:_slideDownAndFade_1gwy6_1}._dropdownMenuContent_1gwy6_1[data-state=open][data-side=right]{animation-name:_slideLeftAndFade_1gwy6_1}._dropdownMenuContent_1gwy6_1[data-state=open][data-side=bottom]{animation-name:_slideUpAndFade_1gwy6_1}._dropdownMenuContent_1gwy6_1[data-state=open][data-side=left]{animation-name:_slideRightAndFade_1gwy6_1}@keyframes _slideUpAndFade_1gwy6_1{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}@keyframes _slideRightAndFade_1gwy6_1{0%{opacity:0;transform:translate(-2px)}to{opacity:1;transform:translate(0)}}@keyframes _slideDownAndFade_1gwy6_1{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}@keyframes _slideLeftAndFade_1gwy6_1{0%{opacity:0;transform:translate(2px)}to{opacity:1;transform:translate(0)}}._dropdownMenuItem_1gwy6_80{position:relative;display:flex;align-items:center;justify-content:space-between;padding:.5rem;cursor:pointer;font-size:.8125rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-weight:500;line-height:1;user-select:none;outline:none;color:#fff;border-radius:.5rem;transition:color .2s ease;-webkit-tap-highlight-color:transparent}._dropdownMenuItem_1gwy6_80 svg{width:1rem;height:1rem;flex-shrink:0;pointer-events:none}._dropdownMenuItem_1gwy6_80:hover,._dropdownMenuItem_1gwy6_80:focus{color:#fffc}._dropdownMenuItem_1gwy6_80:focus{outline:none}._dropdownMenuItem_1gwy6_80[data-disabled]{color:#ffffff80;pointer-events:none}._volumeContainer_4d6jg_1{display:flex;align-items:center;width:3rem;transition:all .2s ease-in-out}._volumeSlider_4d6jg_8{margin-left:.25rem;width:0;opacity:0;transition:all .2s ease-in-out}@media (min-width: 768px){._volumeContainer_4d6jg_1:hover{width:6rem}._volumeContainer_4d6jg_1:hover ._volumeSlider_4d6jg_8{width:100%;opacity:1}}._remainingTimeContainer_1yyhb_1{display:flex;align-items:center}._remainingTime_1yyhb_1{margin:0;padding:0;font-variant-numeric:tabular-nums;font-size:.8125rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-weight:500;user-select:none}._remainingSeparator_1yyhb_17{margin:0;padding:0 .5rem;font-size:.8125rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-weight:500}._remainingSeparator_1yyhb_17:before{content:"/"}
|
package/dist/types/player.d.ts
CHANGED
|
@@ -13,30 +13,31 @@ type PlayerLevel = {
|
|
|
13
13
|
width?: number;
|
|
14
14
|
};
|
|
15
15
|
type PlayerEvents = {
|
|
16
|
-
play: void;
|
|
17
|
-
pause: void;
|
|
18
16
|
ended: void;
|
|
19
|
-
|
|
20
|
-
seeked: void;
|
|
21
|
-
timeUpdate: {
|
|
22
|
-
currentTime: number;
|
|
23
|
-
duration: number;
|
|
24
|
-
};
|
|
25
|
-
volumeChange: {
|
|
26
|
-
volume: number;
|
|
27
|
-
};
|
|
17
|
+
error: unknown;
|
|
28
18
|
fullscreenChange: {
|
|
29
19
|
isFullscreen: boolean;
|
|
30
20
|
};
|
|
31
|
-
qualityChange: {
|
|
32
|
-
level: number | null;
|
|
33
|
-
};
|
|
34
21
|
loadedMetadata: {
|
|
35
22
|
duration: number;
|
|
36
23
|
};
|
|
37
24
|
loadStart: void;
|
|
25
|
+
pause: void;
|
|
26
|
+
play: void;
|
|
38
27
|
playing: void;
|
|
28
|
+
qualityChange: {
|
|
29
|
+
level: number | null;
|
|
30
|
+
};
|
|
31
|
+
resetIdle: void;
|
|
32
|
+
seeked: void;
|
|
33
|
+
seeking: void;
|
|
34
|
+
timeUpdate: {
|
|
35
|
+
currentTime: number;
|
|
36
|
+
duration: number;
|
|
37
|
+
};
|
|
38
|
+
volumeChange: {
|
|
39
|
+
volume: number;
|
|
40
|
+
};
|
|
39
41
|
waiting: void;
|
|
40
|
-
error: unknown;
|
|
41
42
|
};
|
|
42
43
|
export type { PlayerError, PlayerEvents, PlayerLevel };
|
package/dist/utils/device.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,16 +0,0 @@
|
|
|
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;
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import { ButtonHTMLAttributes } from 'react';
|
|
2
|
-
type PlayerDesktopPlaybackIndicatorProps = ButtonHTMLAttributes<HTMLButtonElement>;
|
|
3
|
-
declare function PlayerDesktopPlaybackIndicator({ className, onClick, ...props }: PlayerDesktopPlaybackIndicatorProps): import("react/jsx-runtime").JSX.Element;
|
|
4
|
-
export { PlayerDesktopPlaybackIndicator };
|
|
@@ -1,6 +0,0 @@
|
|
|
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;
|
|
@@ -1,8 +0,0 @@
|
|
|
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;
|
|
@@ -1,6 +0,0 @@
|
|
|
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;
|