suada-components 1.0.2504230710 → 1.1.1

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 (200) hide show
  1. package/dist/components/BreadCrumb/Breadcrumb.js.map +1 -1
  2. package/dist/components/Button/Button.interface.d.ts +1 -0
  3. package/dist/components/DailyMotion-B2EpqlJO.esm.js +178 -0
  4. package/dist/components/DailyMotion-BYA5rhY5.js +180 -0
  5. package/dist/components/Facebook-DBxSErS8.esm.js +179 -0
  6. package/dist/components/Facebook-DJMdBwGM.js +181 -0
  7. package/dist/components/FilePlayer-DLiC_Doh.esm.js +408 -0
  8. package/dist/components/FilePlayer-DRqq2T-L.js +410 -0
  9. package/dist/components/Kaltura-BAvKhQp8.esm.js +176 -0
  10. package/dist/components/Kaltura-DFK3UxTc.js +178 -0
  11. package/dist/components/Mixcloud-C0S4Txcb.esm.js +164 -0
  12. package/dist/components/Mixcloud-CnG6kbdi.js +166 -0
  13. package/dist/components/Mux-BCS9rYAf.esm.js +264 -0
  14. package/dist/components/Mux-ChXwYRDL.js +266 -0
  15. package/dist/components/Preview-CPdzmWpt.js +175 -0
  16. package/dist/components/Preview-MgDcO7wW.esm.js +173 -0
  17. package/dist/components/SoundCloud-BxxMgfs2.esm.js +181 -0
  18. package/dist/components/SoundCloud-CcFGRoSv.js +183 -0
  19. package/dist/components/Streamable-BIBOfZ0w.js +176 -0
  20. package/dist/components/Streamable-Drn6K8AN.esm.js +174 -0
  21. package/dist/components/Twitch-CGC2HQMj.esm.js +168 -0
  22. package/dist/components/Twitch-DoUQRPQR.js +170 -0
  23. package/dist/components/VideoPlayer/Controls/Controls.d.ts +4 -0
  24. package/dist/components/VideoPlayer/Controls/Controls.interface.d.ts +32 -0
  25. package/dist/components/VideoPlayer/Controls/Controls.interface.js +2 -0
  26. package/dist/components/VideoPlayer/Controls/Controls.interface.js.map +1 -0
  27. package/dist/components/VideoPlayer/Controls/Controls.js +36 -0
  28. package/dist/components/VideoPlayer/Controls/Controls.js.map +1 -0
  29. package/dist/components/VideoPlayer/Controls/Controls.styles.d.ts +16 -0
  30. package/dist/components/VideoPlayer/Controls/Controls.styles.js +25 -0
  31. package/dist/components/VideoPlayer/Controls/Controls.styles.js.map +1 -0
  32. package/dist/components/VideoPlayer/Controls/index.d.ts +1 -0
  33. package/dist/components/VideoPlayer/Controls/index.js +2 -0
  34. package/dist/components/VideoPlayer/Controls/index.js.map +1 -0
  35. package/dist/components/VideoPlayer/PlaybackSpeedMenu.d.ts +4 -0
  36. package/dist/components/VideoPlayer/PlaybackSpeedMenu.interface.d.ts +18 -0
  37. package/dist/components/VideoPlayer/PlaybackSpeedMenu.interface.js +2 -0
  38. package/dist/components/VideoPlayer/PlaybackSpeedMenu.interface.js.map +1 -0
  39. package/dist/components/VideoPlayer/PlaybackSpeedMenu.js +20 -0
  40. package/dist/components/VideoPlayer/PlaybackSpeedMenu.js.map +1 -0
  41. package/dist/components/VideoPlayer/PlaybackSpeedMenu.styles.d.ts +4 -0
  42. package/dist/components/VideoPlayer/PlaybackSpeedMenu.styles.js +18 -0
  43. package/dist/components/VideoPlayer/PlaybackSpeedMenu.styles.js.map +1 -0
  44. package/dist/components/VideoPlayer/Player.d.ts +3 -11
  45. package/dist/components/VideoPlayer/Player.interface.d.ts +63 -0
  46. package/dist/components/VideoPlayer/Player.interface.js +2 -0
  47. package/dist/components/VideoPlayer/Player.interface.js.map +1 -0
  48. package/dist/components/VideoPlayer/Player.js +82 -97
  49. package/dist/components/VideoPlayer/Player.js.map +1 -1
  50. package/dist/components/VideoPlayer/Player.styles.d.ts +8 -0
  51. package/dist/components/VideoPlayer/Player.styles.js +17 -0
  52. package/dist/components/VideoPlayer/Player.styles.js.map +1 -0
  53. package/dist/components/VideoPlayer/VideoPlayer.stories.d.ts +10 -26
  54. package/dist/components/VideoPlayer/VideoPlayer.stories.js +174 -19
  55. package/dist/components/VideoPlayer/VideoPlayer.stories.js.map +1 -1
  56. package/dist/components/VideoPlayer/constants/index.d.ts +2 -0
  57. package/dist/components/VideoPlayer/constants/index.js +31 -0
  58. package/dist/components/VideoPlayer/constants/index.js.map +1 -0
  59. package/dist/components/VideoPlayer/parseVtt.d.ts +6 -0
  60. package/dist/components/VideoPlayer/parseVtt.js +35 -0
  61. package/dist/components/VideoPlayer/parseVtt.js.map +1 -0
  62. package/dist/components/VideoPlayer/timeConversion.d.ts +5 -0
  63. package/dist/components/VideoPlayer/timeConversion.js +70 -0
  64. package/dist/components/VideoPlayer/timeConversion.js.map +1 -0
  65. package/dist/components/VideoPlayer/useDynamicPosition.d.ts +16 -0
  66. package/dist/components/VideoPlayer/useDynamicPosition.js +50 -0
  67. package/dist/components/VideoPlayer/useDynamicPosition.js.map +1 -0
  68. package/dist/components/VideoPlayer/useEventListener.d.ts +3 -0
  69. package/dist/components/VideoPlayer/useEventListener.js +27 -0
  70. package/dist/components/VideoPlayer/useEventListener.js.map +1 -0
  71. package/dist/components/VideoPlayer/useMenuToggle.d.ts +22 -0
  72. package/dist/components/VideoPlayer/useMenuToggle.js +25 -0
  73. package/dist/components/VideoPlayer/useMenuToggle.js.map +1 -0
  74. package/dist/components/VideoPlayer/useOnOutsideClick.d.ts +3 -0
  75. package/dist/components/VideoPlayer/useOnOutsideClick.js +16 -0
  76. package/dist/components/VideoPlayer/useOnOutsideClick.js.map +1 -0
  77. package/dist/components/VideoPlayer/usePlayerControls.d.ts +3 -0
  78. package/dist/components/VideoPlayer/usePlayerControls.js +330 -0
  79. package/dist/components/VideoPlayer/usePlayerControls.js.map +1 -0
  80. package/dist/components/Vidyard-B-jW75yA.esm.js +172 -0
  81. package/dist/components/Vidyard-If2H-ayj.js +174 -0
  82. package/dist/components/Vimeo-Cvg3rB5o.esm.js +213 -0
  83. package/dist/components/Vimeo-hI3cddOi.js +215 -0
  84. package/dist/components/Wistia-BtYIM6Uo.esm.js +188 -0
  85. package/dist/components/Wistia-CZwfIsgx.js +190 -0
  86. package/dist/components/YouTube-D1u9T9FZ.js +260 -0
  87. package/dist/components/YouTube-vwMwhQ13.esm.js +258 -0
  88. package/dist/components/components/Button/Button.interface.d.ts +1 -0
  89. package/dist/components/components/VideoPlayer/Controls/Controls.d.ts +4 -0
  90. package/dist/components/components/VideoPlayer/Controls/Controls.interface.d.ts +32 -0
  91. package/dist/components/components/VideoPlayer/Controls/Controls.styles.d.ts +16 -0
  92. package/dist/components/components/VideoPlayer/Controls/index.d.ts +1 -0
  93. package/dist/components/components/VideoPlayer/PlaybackSpeedMenu.d.ts +4 -0
  94. package/dist/components/components/VideoPlayer/PlaybackSpeedMenu.interface.d.ts +18 -0
  95. package/dist/components/components/VideoPlayer/PlaybackSpeedMenu.styles.d.ts +4 -0
  96. package/dist/components/components/VideoPlayer/Player.d.ts +3 -11
  97. package/dist/components/components/VideoPlayer/Player.interface.d.ts +63 -0
  98. package/dist/components/components/VideoPlayer/Player.styles.d.ts +8 -0
  99. package/dist/components/components/VideoPlayer/constants/index.d.ts +2 -0
  100. package/dist/components/components/VideoPlayer/parseVtt.d.ts +6 -0
  101. package/dist/components/components/VideoPlayer/timeConversion.d.ts +5 -0
  102. package/dist/components/components/VideoPlayer/useDynamicPosition.d.ts +16 -0
  103. package/dist/components/components/VideoPlayer/useEventListener.d.ts +3 -0
  104. package/dist/components/components/VideoPlayer/useMenuToggle.d.ts +22 -0
  105. package/dist/components/components/VideoPlayer/useOnOutsideClick.d.ts +3 -0
  106. package/dist/components/components/VideoPlayer/usePlayerControls.d.ts +3 -0
  107. package/dist/components/icons/Heart.d.ts +7 -0
  108. package/dist/components/icons/Maximize.d.ts +3 -0
  109. package/dist/components/icons/Meter.d.ts +3 -0
  110. package/dist/components/icons/Minimize.d.ts +3 -0
  111. package/dist/components/icons/Pause.d.ts +3 -0
  112. package/dist/components/icons/Play.d.ts +3 -0
  113. package/dist/components/icons/Rewind.d.ts +7 -0
  114. package/dist/components/icons/Skip.d.ts +8 -0
  115. package/dist/components/icons/Subtitles.d.ts +7 -0
  116. package/dist/components/icons/VideoCheckmark.d.ts +3 -0
  117. package/dist/components/icons/VolumeMute.d.ts +8 -0
  118. package/dist/components/icons/VolumeUp.d.ts +8 -0
  119. package/dist/components/icons/index.d.ts +11 -0
  120. package/dist/components/index-DLzCbCHu.esm.js +94482 -0
  121. package/dist/components/index-wLnkslO9.js +94536 -0
  122. package/dist/components/index.esm.js +3 -122501
  123. package/dist/icons/Heart.d.ts +7 -0
  124. package/dist/icons/Heart.js +28 -0
  125. package/dist/icons/Heart.js.map +1 -0
  126. package/dist/icons/Maximize.d.ts +3 -0
  127. package/dist/icons/Maximize.js +28 -0
  128. package/dist/icons/Maximize.js.map +1 -0
  129. package/dist/icons/Meter.d.ts +3 -0
  130. package/dist/icons/Meter.js +28 -0
  131. package/dist/icons/Meter.js.map +1 -0
  132. package/dist/icons/Minimize.d.ts +3 -0
  133. package/dist/icons/Minimize.js +28 -0
  134. package/dist/icons/Minimize.js.map +1 -0
  135. package/dist/icons/Pause.d.ts +3 -0
  136. package/dist/icons/Pause.js +28 -0
  137. package/dist/icons/Pause.js.map +1 -0
  138. package/dist/icons/Play.d.ts +3 -0
  139. package/dist/icons/Play.js +28 -0
  140. package/dist/icons/Play.js.map +1 -0
  141. package/dist/icons/Rewind.d.ts +7 -0
  142. package/dist/icons/Rewind.js +28 -0
  143. package/dist/icons/Rewind.js.map +1 -0
  144. package/dist/icons/Skip.d.ts +8 -0
  145. package/dist/icons/Skip.js +28 -0
  146. package/dist/icons/Skip.js.map +1 -0
  147. package/dist/icons/Subtitles.d.ts +7 -0
  148. package/dist/icons/Subtitles.js +28 -0
  149. package/dist/icons/Subtitles.js.map +1 -0
  150. package/dist/icons/VideoCheckmark.d.ts +3 -0
  151. package/dist/icons/VideoCheckmark.js +28 -0
  152. package/dist/icons/VideoCheckmark.js.map +1 -0
  153. package/dist/icons/VolumeMute.d.ts +8 -0
  154. package/dist/icons/VolumeMute.js +28 -0
  155. package/dist/icons/VolumeMute.js.map +1 -0
  156. package/dist/icons/VolumeUp.d.ts +8 -0
  157. package/dist/icons/VolumeUp.js +28 -0
  158. package/dist/icons/VolumeUp.js.map +1 -0
  159. package/dist/icons/components/Button/Button.interface.d.ts +1 -0
  160. package/dist/icons/components/VideoPlayer/Controls/Controls.d.ts +4 -0
  161. package/dist/icons/components/VideoPlayer/Controls/Controls.interface.d.ts +32 -0
  162. package/dist/icons/components/VideoPlayer/Controls/Controls.styles.d.ts +16 -0
  163. package/dist/icons/components/VideoPlayer/Controls/index.d.ts +1 -0
  164. package/dist/icons/components/VideoPlayer/PlaybackSpeedMenu.d.ts +4 -0
  165. package/dist/icons/components/VideoPlayer/PlaybackSpeedMenu.interface.d.ts +18 -0
  166. package/dist/icons/components/VideoPlayer/PlaybackSpeedMenu.styles.d.ts +4 -0
  167. package/dist/icons/components/VideoPlayer/Player.d.ts +3 -11
  168. package/dist/icons/components/VideoPlayer/Player.interface.d.ts +63 -0
  169. package/dist/icons/components/VideoPlayer/Player.styles.d.ts +8 -0
  170. package/dist/icons/components/VideoPlayer/constants/index.d.ts +2 -0
  171. package/dist/icons/components/VideoPlayer/parseVtt.d.ts +6 -0
  172. package/dist/icons/components/VideoPlayer/timeConversion.d.ts +5 -0
  173. package/dist/icons/components/VideoPlayer/useDynamicPosition.d.ts +16 -0
  174. package/dist/icons/components/VideoPlayer/useEventListener.d.ts +3 -0
  175. package/dist/icons/components/VideoPlayer/useMenuToggle.d.ts +22 -0
  176. package/dist/icons/components/VideoPlayer/useOnOutsideClick.d.ts +3 -0
  177. package/dist/icons/components/VideoPlayer/usePlayerControls.d.ts +3 -0
  178. package/dist/icons/icons/Heart.d.ts +7 -0
  179. package/dist/icons/icons/Maximize.d.ts +3 -0
  180. package/dist/icons/icons/Meter.d.ts +3 -0
  181. package/dist/icons/icons/Minimize.d.ts +3 -0
  182. package/dist/icons/icons/Pause.d.ts +3 -0
  183. package/dist/icons/icons/Play.d.ts +3 -0
  184. package/dist/icons/icons/Rewind.d.ts +7 -0
  185. package/dist/icons/icons/Skip.d.ts +8 -0
  186. package/dist/icons/icons/Subtitles.d.ts +7 -0
  187. package/dist/icons/icons/VideoCheckmark.d.ts +3 -0
  188. package/dist/icons/icons/VolumeMute.d.ts +8 -0
  189. package/dist/icons/icons/VolumeUp.d.ts +8 -0
  190. package/dist/icons/icons/index.d.ts +11 -0
  191. package/dist/icons/index.d.ts +11 -0
  192. package/dist/icons/index.esm.js +308 -1
  193. package/dist/icons/index.js +11 -0
  194. package/dist/icons/index.js.map +1 -1
  195. package/package.json +3 -1
  196. package/dist/components/VideoPlayer/styled-components.d.ts +0 -9
  197. package/dist/components/VideoPlayer/styled-components.js +0 -19
  198. package/dist/components/VideoPlayer/styled-components.js.map +0 -1
  199. package/dist/components/components/VideoPlayer/styled-components.d.ts +0 -9
  200. package/dist/icons/components/VideoPlayer/styled-components.d.ts +0 -9
@@ -0,0 +1,32 @@
1
+ import { ChangeEvent, MouseEvent } from 'react';
2
+ import { VideoState } from '../Player.interface';
3
+ export interface ControlsProps {
4
+ setVideoState: (value: (prev: VideoState) => VideoState) => void;
5
+ playbackRate: number;
6
+ rewindHandler: () => void;
7
+ playPauseHandler: () => void;
8
+ handleFastForward: () => void;
9
+ formatCurrentTime: string;
10
+ played: number;
11
+ onSeekMouseDownHandler: (e: MouseEvent<HTMLInputElement>) => void;
12
+ seekHandler: (event: ChangeEvent<HTMLInputElement>) => void;
13
+ seekMouseUpHandler: (event: MouseEvent<HTMLInputElement>) => void;
14
+ volume: number;
15
+ muted: boolean;
16
+ muteHandler: () => void;
17
+ volumeChangeHandler: (event: ChangeEvent<HTMLInputElement>) => void;
18
+ formatDuration: string;
19
+ handleFullScreen: () => void;
20
+ playing: boolean;
21
+ isSubtitlesChecked: boolean;
22
+ toggleSubtitlesCheck: () => void;
23
+ isFavorite: boolean;
24
+ toggleIsFavorite: () => Promise<void>;
25
+ isFullscreen: boolean;
26
+ subtitle?: boolean;
27
+ handleSkipBackward?: () => void;
28
+ handleSkipForward?: () => void;
29
+ isNextVideo?: boolean;
30
+ isPreviousVideo?: boolean;
31
+ showFavorite?: boolean;
32
+ }
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=Controls.interface.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Controls.interface.js","sourceRoot":"","sources":["../../../../src/components/VideoPlayer/Controls/Controls.interface.ts"],"names":[],"mappings":""}
@@ -0,0 +1,36 @@
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
12
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
13
+ import { StyledControls, StyledSlider, StyledVolumeWrapper, StyledVolumeSlider, StyledControllerLeft, StyledControllerRight, StyledTimeTrack, StyledHeartIconContainer, StyledSubtitlesIconContainer, StyledFullscreenIconContainer, StyledVolumeIconContainer, StyledPlayPauseIconContainer, } from './Controls.styles';
14
+ import { HeartIcon, MaximizeIcon, MinimizeIcon, PauseIcon, PlayIcon, RewindIcon, SkipIcon, SubtitlesIcon, VolumeMuteIcon, VolumeUpIcon, } from '../../../icons';
15
+ import PlaybackSpeedMenu from '../PlaybackSpeedMenu';
16
+ var Controls = function (_a) {
17
+ var setVideoState = _a.setVideoState, playbackRate = _a.playbackRate, rewindHandler = _a.rewindHandler, playPauseHandler = _a.playPauseHandler, handleFastForward = _a.handleFastForward, formatCurrentTime = _a.formatCurrentTime, played = _a.played, onSeekMouseDownHandler = _a.onSeekMouseDownHandler, seekHandler = _a.seekHandler, seekMouseUpHandler = _a.seekMouseUpHandler, volume = _a.volume, muted = _a.muted, muteHandler = _a.muteHandler, volumeChangeHandler = _a.volumeChangeHandler, formatDuration = _a.formatDuration, handleFullScreen = _a.handleFullScreen, playing = _a.playing, isSubtitlesChecked = _a.isSubtitlesChecked, toggleSubtitlesCheck = _a.toggleSubtitlesCheck, isFavorite = _a.isFavorite, toggleIsFavorite = _a.toggleIsFavorite, isFullscreen = _a.isFullscreen, subtitle = _a.subtitle, handleSkipBackward = _a.handleSkipBackward, handleSkipForward = _a.handleSkipForward, isNextVideo = _a.isNextVideo, isPreviousVideo = _a.isPreviousVideo, showFavorite = _a.showFavorite;
18
+ return (_jsxs(StyledControls, { children: [_jsx(StyledSlider, { type: 'range', min: 0, max: 100, value: played * 100, onMouseDown: onSeekMouseDownHandler, onChange: seekHandler, onMouseUp: seekMouseUpHandler }), _jsxs(StyledControllerLeft, { children: [_jsx(StyledPlayPauseIconContainer, { onClick: playPauseHandler, children: playing ? _jsx(PauseIcon, {}) : _jsx(PlayIcon, {}) }), _jsx(RewindIcon, { onClick: rewindHandler }), _jsx(RewindIcon, { forward: true, onClick: handleFastForward }), _jsxs(StyledVolumeWrapper, { children: [_jsx(StyledVolumeIconContainer, { onClick: muteHandler, children: muted ? _jsx(VolumeMuteIcon, {}) : _jsx(VolumeUpIcon, {}) }), _jsx(StyledVolumeSlider, { type: 'range', value: volume * 100, onChange: volumeChangeHandler })] }), _jsxs(StyledTimeTrack, { children: [formatCurrentTime, " /", formatDuration] })] }), _jsxs(StyledControllerRight, { children: [handleSkipBackward && (_jsx(SkipIcon, { onClick: function () {
19
+ if (!isPreviousVideo)
20
+ return;
21
+ handleSkipBackward();
22
+ }, className: isPreviousVideo ? '' : 'skip-icon-disabled' })), handleSkipForward && (_jsx(SkipIcon, { forward: true, onClick: function () {
23
+ if (!isNextVideo)
24
+ return;
25
+ handleSkipForward();
26
+ }, className: isNextVideo ? '' : 'skip-icon-disabled' })), showFavorite && (_jsx(StyledHeartIconContainer, { children: _jsx(HeartIcon, { active: isFavorite, onClick: toggleIsFavorite }) })), _jsx(PlaybackSpeedMenu, { playbackSpeed: playbackRate, onPlaybackSpeedChange: function (speed) {
27
+ return setVideoState(function (prev) { return (__assign(__assign({}, prev), { playbackRate: speed })); });
28
+ }, customMenuWrapperStyles: {
29
+ position: 'unset',
30
+ }, customMenuStyles: {
31
+ right: '8px',
32
+ left: 'auto',
33
+ } }), subtitle && (_jsx(StyledSubtitlesIconContainer, { children: _jsx(SubtitlesIcon, { active: isSubtitlesChecked, onClick: toggleSubtitlesCheck }) })), _jsx(StyledFullscreenIconContainer, { onClick: handleFullScreen, children: isFullscreen ? _jsx(MinimizeIcon, {}) : _jsx(MaximizeIcon, {}) })] })] }));
34
+ };
35
+ export default Controls;
36
+ //# sourceMappingURL=Controls.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Controls.js","sourceRoot":"","sources":["../../../../src/components/VideoPlayer/Controls/Controls.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,16 @@
1
+ export declare const StyledControls: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
2
+ type SliderProps = {
3
+ value: number;
4
+ };
5
+ export declare const StyledSlider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, SliderProps>> & string;
6
+ export declare const StyledVolumeWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
7
+ export declare const StyledVolumeSlider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, SliderProps>> & string;
8
+ export declare const StyledControllerLeft: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
9
+ export declare const StyledControllerRight: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
10
+ export declare const StyledTimeTrack: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
11
+ export declare const StyledHeartIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
12
+ export declare const StyledSubtitlesIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
13
+ export declare const StyledFullscreenIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
14
+ export declare const StyledVolumeIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
15
+ export declare const StyledPlayPauseIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
16
+ export {};
@@ -0,0 +1,25 @@
1
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
2
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
3
+ return cooked;
4
+ };
5
+ import styled from 'styled-components';
6
+ export var StyledControls = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n width: 100%;\n border-radius: 0px 0px 8px 8px;\n background: #565a62;\n padding: 12px 16px;\n position: relative;\n\n svg {\n cursor: pointer;\n\n @media screen and (max-width: 1500px) {\n width: 20px;\n height: 20px;\n }\n\n @media screen and (max-width: 1000px) {\n width: 16px;\n height: 16px;\n }\n }\n\n & > p {\n color: var(--neutral-colors-light);\n font-family: 'Poppins', sans-serif;\n ", "\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n width: 100%;\n border-radius: 0px 0px 8px 8px;\n background: #565a62;\n padding: 12px 16px;\n position: relative;\n\n svg {\n cursor: pointer;\n\n @media screen and (max-width: 1500px) {\n width: 20px;\n height: 20px;\n }\n\n @media screen and (max-width: 1000px) {\n width: 16px;\n height: 16px;\n }\n }\n\n & > p {\n color: var(--neutral-colors-light);\n font-family: 'Poppins', sans-serif;\n ", "\n }\n"])), { fontStyle: 'descriptor' });
7
+ export var StyledSlider = styled.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 100%;\n height: 2px;\n border-radius: 5px;\n position: absolute;\n top: 0;\n left: 0;\n background: ", ";\n outline: none;\n -webkit-transition: 0.2s;\n transition: opacity 0.2s;\n cursor: pointer;\n\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--brand-colors-accent);\n cursor: pointer;\n }\n\n &::-moz-range-thumb {\n appearance: none;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--brand-colors-accent);\n cursor: pointer;\n }\n"], ["\n width: 100%;\n height: 2px;\n border-radius: 5px;\n position: absolute;\n top: 0;\n left: 0;\n background: ", ";\n outline: none;\n -webkit-transition: 0.2s;\n transition: opacity 0.2s;\n cursor: pointer;\n\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--brand-colors-accent);\n cursor: pointer;\n }\n\n &::-moz-range-thumb {\n appearance: none;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--brand-colors-accent);\n cursor: pointer;\n }\n"])), function (_a) {
8
+ var value = _a.value;
9
+ return "linear-gradient(\n to right,\n var(--brand-colors-accent) 0%,\n var(--brand-colors-accent) ".concat(value, "%,\n var(--level-dark-200) ").concat(value, "%,\n var(--level-dark-200) 100%\n )");
10
+ });
11
+ export var StyledVolumeWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: relative;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 16px;\n\n & > svg {\n cursor: pointer;\n }\n\n & > input {\n display: none;\n }\n\n &:hover > input {\n display: block;\n }\n"], ["\n position: relative;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 16px;\n\n & > svg {\n cursor: pointer;\n }\n\n & > input {\n display: none;\n }\n\n &:hover > input {\n display: block;\n }\n"])));
12
+ export var StyledVolumeSlider = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: 100px;\n height: 4px;\n border-radius: 5px;\n background: ", ";\n outline: none;\n -webkit-transition: 0.2s;\n transition: opacity 0.2s;\n cursor: pointer;\n justify-content: center;\n align-items: center;\n\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--neutral-colors-light);\n cursor: pointer;\n }\n\n &::-moz-range-thumb {\n appearance: none;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--neutral-colors-light);\n cursor: pointer;\n }\n"], ["\n width: 100px;\n height: 4px;\n border-radius: 5px;\n background: ", ";\n outline: none;\n -webkit-transition: 0.2s;\n transition: opacity 0.2s;\n cursor: pointer;\n justify-content: center;\n align-items: center;\n\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--neutral-colors-light);\n cursor: pointer;\n }\n\n &::-moz-range-thumb {\n appearance: none;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--neutral-colors-light);\n cursor: pointer;\n }\n"])), function (_a) {
13
+ var value = _a.value;
14
+ return "linear-gradient(\n to right,\n var(--neutral-colors-light) 0%,\n var(--neutral-colors-light) ".concat(value, "%,\n var(--level-grey-500) ").concat(value, "%,\n var(--level-grey-500) 100%\n )");
15
+ });
16
+ export var StyledControllerLeft = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 16px;\n"], ["\n display: flex;\n align-items: center;\n gap: 16px;\n"])));
17
+ export var StyledControllerRight = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 16px;\n\n .skip-icon-disabled {\n cursor: default;\n\n & > path {\n fill: var(--level-dark-300);\n }\n }\n"], ["\n display: flex;\n align-items: center;\n gap: 16px;\n\n .skip-icon-disabled {\n cursor: default;\n\n & > path {\n fill: var(--level-dark-300);\n }\n }\n"])));
18
+ export var StyledTimeTrack = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n color: var(--neutral-colors-light);\n ", "\n text-align: right;\n white-space: nowrap;\n"], ["\n color: var(--neutral-colors-light);\n ", "\n text-align: right;\n white-space: nowrap;\n"])), { fontStyle: 'descriptor' });
19
+ export var StyledHeartIconContainer = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n\n & > svg > path {\n fill: var(--neutral-colors-light);\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n\n & > svg > path {\n fill: var(--neutral-colors-light);\n }\n"])));
20
+ export var StyledSubtitlesIconContainer = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
21
+ export var StyledFullscreenIconContainer = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n"])));
22
+ export var StyledVolumeIconContainer = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n"])));
23
+ export var StyledPlayPauseIconContainer = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n"])));
24
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
25
+ //# sourceMappingURL=Controls.styles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Controls.styles.js","sourceRoot":"","sources":["../../../../src/components/VideoPlayer/Controls/Controls.styles.tsx"],"names":[],"mappings":";;;;AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,MAAM,CAAC,IAAM,cAAc,GAAG,MAAM,CAAC,GAAG,6mBAAA,+hBA4BlC,EAA2B,SAEhC,KAFK,EAAE,SAAS,EAAE,YAAY,EAAE,CAEhC,CAAA;AAMD,MAAM,CAAC,IAAM,YAAY,GAAG,MAAM,CAAC,KAAK,orBAAa,uHAOrC,EAOZ,wfAwBH,KA/Be,UAAC,EAAS;QAAP,KAAK,WAAA;IACpB,OAAA,8GAG6B,KAAK,2CACV,KAAK,4CAE7B;AANA,CAMA,CAwBH,CAAA;AAED,MAAM,CAAC,IAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,wUAAA,qQAmB5C,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,kBAAkB,GAAG,MAAM,CAAC,KAAK,6rBAAa,0EAI3C,EAOZ,8iBA0BH,KAjCe,UAAC,EAAS;QAAP,KAAK,WAAA;IACpB,OAAA,gHAG8B,KAAK,2CACX,KAAK,4CAE7B;AANA,CAMA,CA0BH,CAAA;AAED,MAAM,CAAC,IAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,+HAAA,4DAI7C,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,kPAAA,+KAY9C,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,eAAe,GAAG,MAAM,CAAC,GAAG,oKAAA,6CAErC,EAA2B,kDAG9B,KAHG,EAAE,SAAS,EAAE,YAAY,EAAE,CAG9B,CAAA;AAED,MAAM,CAAC,IAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,gNAAA,6IAQjD,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,4BAA4B,GAAG,MAAM,CAAC,GAAG,6IAAA,0EAIrD,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,6BAA6B,GAAG,MAAM,CAAC,GAAG,mKAAA,8FAKtD,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,yBAAyB,GAAG,MAAM,CAAC,GAAG,mKAAA,8FAKlD,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,4BAA4B,GAAG,MAAM,CAAC,GAAG,mKAAA,8FAKrD,IAAA,CAAA"}
@@ -0,0 +1 @@
1
+ export { default } from './Controls';
@@ -0,0 +1,2 @@
1
+ export { default } from './Controls';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/VideoPlayer/Controls/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA"}
@@ -0,0 +1,4 @@
1
+ import { FC } from 'react';
2
+ import { PlaybackSpeedMenuProps } from './PlaybackSpeedMenu.interface';
3
+ declare const PlaybackSpeedMenu: FC<PlaybackSpeedMenuProps>;
4
+ export default PlaybackSpeedMenu;
@@ -0,0 +1,18 @@
1
+ import { CSSProperties } from 'react';
2
+ import { IDynamicPosition } from './useDynamicPosition';
3
+ export type OnPlaybackSpeedChangeFnType = (speed: number) => void;
4
+ export interface PlaybackSpeedMenuProps {
5
+ playbackSpeed: number;
6
+ onPlaybackSpeedChange: OnPlaybackSpeedChangeFnType;
7
+ menuWrapperClassName?: string;
8
+ labelIconClassName?: string;
9
+ customMenuWrapperStyles?: CSSProperties;
10
+ customMenuStyles?: CSSProperties;
11
+ }
12
+ export interface StyledPlaybackMenuProps {
13
+ $position: IDynamicPosition;
14
+ }
15
+ export interface PlaybackSpeedItem {
16
+ label: string;
17
+ value: number;
18
+ }
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=PlaybackSpeedMenu.interface.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PlaybackSpeedMenu.interface.js","sourceRoot":"","sources":["../../../src/components/VideoPlayer/PlaybackSpeedMenu.interface.ts"],"names":[],"mappings":""}
@@ -0,0 +1,20 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { useTranslation } from 'react-i18next';
3
+ import { PLAYBACK_SPEED_LIST } from './constants';
4
+ import { StyledPlaybackMenuWrapper, StyledPlaybackMenu, StyledPlaybackSpeedItem, } from './PlaybackSpeedMenu.styles';
5
+ import useMenuToggle from './useMenuToggle';
6
+ import { MeterIcon, VideoCheckmarkIcon } from '../../icons';
7
+ var PlaybackSpeedMenu = function (_a) {
8
+ var playbackSpeed = _a.playbackSpeed, onPlaybackSpeedChange = _a.onPlaybackSpeedChange, menuWrapperClassName = _a.menuWrapperClassName, labelIconClassName = _a.labelIconClassName, customMenuWrapperStyles = _a.customMenuWrapperStyles, customMenuStyles = _a.customMenuStyles;
9
+ var _b = useMenuToggle(), menuRef = _b.menuRef, isMenuActive = _b.isVisible, menuPosition = _b.menuPosition, toggleMenu = _b.toggleMenu;
10
+ var t = useTranslation().t;
11
+ return (_jsxs(StyledPlaybackMenuWrapper, { ref: menuRef, className: menuWrapperClassName, style: customMenuWrapperStyles, children: [_jsx(MeterIcon, { className: labelIconClassName, onClick: toggleMenu }), isMenuActive && (_jsxs(StyledPlaybackMenu, { "$position": menuPosition, style: customMenuStyles, children: [_jsx("h2", { children: t('general.playback_speed') }), PLAYBACK_SPEED_LIST.map(function (_a, index) {
12
+ var label = _a.label, value = _a.value;
13
+ return (_jsxs(StyledPlaybackSpeedItem, { onClick: function () {
14
+ onPlaybackSpeedChange(value);
15
+ toggleMenu();
16
+ }, children: [t(label), value === playbackSpeed && _jsx(VideoCheckmarkIcon, {})] }, index));
17
+ })] }))] }));
18
+ };
19
+ export default PlaybackSpeedMenu;
20
+ //# sourceMappingURL=PlaybackSpeedMenu.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PlaybackSpeedMenu.js","sourceRoot":"","sources":["../../../src/components/VideoPlayer/PlaybackSpeedMenu.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAE9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AAEjD,OAAO,EACL,yBAAyB,EACzB,kBAAkB,EAClB,uBAAuB,GACxB,MAAM,4BAA4B,CAAA;AACnC,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AAE3D,IAAM,iBAAiB,GAA+B,UAAC,EAOtD;QANC,aAAa,mBAAA,EACb,qBAAqB,2BAAA,EACrB,oBAAoB,0BAAA,EACpB,kBAAkB,wBAAA,EAClB,uBAAuB,6BAAA,EACvB,gBAAgB,sBAAA;IAEV,IAAA,KAAiE,aAAa,EAAE,EAA9E,OAAO,aAAA,EAAa,YAAY,eAAA,EAAE,YAAY,kBAAA,EAAE,UAAU,gBAAoB,CAAA;IAC9E,IAAA,CAAC,GAAK,cAAc,EAAE,EAArB,CAAqB;IAE9B,OAAO,CACL,MAAC,yBAAyB,IACxB,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,oBAAoB,EAC/B,KAAK,EAAE,uBAAuB,aAE9B,KAAC,SAAS,IAAC,SAAS,EAAE,kBAAkB,EAAE,OAAO,EAAE,UAAU,GAAI,EAEhE,YAAY,IAAI,CACf,MAAC,kBAAkB,iBAAY,YAAY,EAAE,KAAK,EAAE,gBAAgB,aAClE,uBAAK,CAAC,CAAC,wBAAwB,CAAC,GAAM,EACrC,mBAAmB,CAAC,GAAG,CAAC,UAAC,EAAgB,EAAE,KAAK;4BAArB,KAAK,WAAA,EAAE,KAAK,WAAA;wBAAc,OAAA,CACpD,MAAC,uBAAuB,IAEtB,OAAO,EAAE;gCACP,qBAAqB,CAAC,KAAK,CAAC,CAAA;gCAC5B,UAAU,EAAE,CAAA;4BACd,CAAC,aAEA,CAAC,CAAC,KAAK,CAAC,EACR,KAAK,KAAK,aAAa,IAAI,KAAC,kBAAkB,KAAG,KAP7C,KAAK,CAQc,CAC3B;oBAXqD,CAWrD,CAAC,IACiB,CACtB,IACyB,CAC7B,CAAA;AACH,CAAC,CAAA;AAED,eAAe,iBAAiB,CAAA"}
@@ -0,0 +1,4 @@
1
+ import { StyledPlaybackMenuProps } from './PlaybackSpeedMenu.interface';
2
+ export declare const StyledPlaybackMenuWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
3
+ export declare const StyledPlaybackMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledPlaybackMenuProps>> & string;
4
+ export declare const StyledPlaybackSpeedItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
@@ -0,0 +1,18 @@
1
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
2
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
3
+ return cooked;
4
+ };
5
+ import styled from 'styled-components';
6
+ import { DropdownHorizontalPositionEnum, DropdownVerticalPositionEnum } from './useMenuToggle';
7
+ export var StyledPlaybackMenuWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n position: relative;\n\n & > svg {\n cursor: pointer;\n }\n"], ["\n display: flex;\n align-items: center;\n position: relative;\n\n & > svg {\n cursor: pointer;\n }\n"])));
8
+ export var StyledPlaybackMenu = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n display: flex;\n flex-direction: column;\n gap: 16px;\n border-radius: 8px;\n background: var(--neutral-colors-light);\n box-shadow: 0px 4px 20px 0px rgba(71, 85, 105, 0.12);\n width: 220px;\n height: 312px;\n ", "\n padding: 8px 16px;\n transition:\n opacity 0.3s,\n visibility 0.3s;\n overflow: scroll;\n\n & > h2 {\n ", "\n color: #0f172a;\n }\n\n @media screen and (max-width: 1500px) {\n width: 180px;\n height: 250px;\n gap: 12px;\n\n & > h2 {\n ", "\n font-weight: 600;\n }\n }\n\n @media screen and (max-width: 1100px) {\n width: 140px;\n height: 200px;\n gap: 8px;\n }\n"], ["\n position: absolute;\n display: flex;\n flex-direction: column;\n gap: 16px;\n border-radius: 8px;\n background: var(--neutral-colors-light);\n box-shadow: 0px 4px 20px 0px rgba(71, 85, 105, 0.12);\n width: 220px;\n height: 312px;\n ", "\n padding: 8px 16px;\n transition:\n opacity 0.3s,\n visibility 0.3s;\n overflow: scroll;\n\n & > h2 {\n ", "\n color: #0f172a;\n }\n\n @media screen and (max-width: 1500px) {\n width: 180px;\n height: 250px;\n gap: 12px;\n\n & > h2 {\n ", "\n font-weight: 600;\n }\n }\n\n @media screen and (max-width: 1100px) {\n width: 140px;\n height: 200px;\n gap: 8px;\n }\n"])), function (_a) {
9
+ var $position = _a.$position;
10
+ return "\n ".concat($position.vertical === DropdownVerticalPositionEnum.Top
11
+ ? 'bottom: calc(100% + 8px);'
12
+ : 'top: calc(100% + 8px);', "\n ").concat($position.horizontal === DropdownHorizontalPositionEnum.Left
13
+ ? 'right: calc(100% + 8px);'
14
+ : 'left: calc(100% + 8px);', "\n ");
15
+ }, { fontStyle: 'labelM' }, { fontStyle: 'bodyS' });
16
+ export var StyledPlaybackSpeedItem = styled.p(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", "\n font-weight: 400;\n color: #020210;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n transition: 0.6s cubic-bezier(0.79, 0.01, 0.15, 0.99);\n\n @media screen and (max-width: 1500px) {\n ", "\n }\n"], ["\n ", "\n font-weight: 400;\n color: #020210;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n transition: 0.6s cubic-bezier(0.79, 0.01, 0.15, 0.99);\n\n @media screen and (max-width: 1500px) {\n ", "\n }\n"])), { fontStyle: 'labelM' }, { fontStyle: 'bodyS' });
17
+ var templateObject_1, templateObject_2, templateObject_3;
18
+ //# sourceMappingURL=PlaybackSpeedMenu.styles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PlaybackSpeedMenu.styles.js","sourceRoot":"","sources":["../../../src/components/VideoPlayer/PlaybackSpeedMenu.styles.tsx"],"names":[],"mappings":";;;;AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAGtC,OAAO,EAAE,8BAA8B,EAAE,4BAA4B,EAAE,MAAM,iBAAiB,CAAA;AAE9F,MAAM,CAAC,IAAM,yBAAyB,GAAG,MAAM,CAAC,GAAG,kLAAA,+GAQlD,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,kuBAAyB,uPAUjE,EAWD,yHAQG,EAAuB,wJAUrB,EAAsB,iJAU7B,KAvCG,UAAC,EAAa;QAAX,SAAS,eAAA;IAAe,OAAA,gBAEzB,SAAS,CAAC,QAAQ,KAAK,4BAA4B,CAAC,GAAG;QACrD,CAAC,CAAC,2BAA2B;QAC7B,CAAC,CAAC,wBAAwB,mBAG5B,SAAS,CAAC,UAAU,KAAK,8BAA8B,CAAC,IAAI;QAC1D,CAAC,CAAC,0BAA0B;QAC5B,CAAC,CAAC,yBAAyB,SAEhC;AAX4B,CAW5B,EAQG,EAAE,SAAS,EAAE,QAAQ,EAAE,EAUrB,EAAE,SAAS,EAAE,OAAO,EAAE,CAU7B,CAAA;AAED,MAAM,CAAC,IAAM,uBAAuB,GAAG,MAAM,CAAC,CAAC,4VAAA,MAC3C,EAAuB,sQAWrB,EAAsB,SAE3B,KAbG,EAAE,SAAS,EAAE,QAAQ,EAAE,EAWrB,EAAE,SAAS,EAAE,OAAO,EAAE,CAE3B,CAAA"}
@@ -1,11 +1,3 @@
1
- import PropTypes from 'prop-types';
2
- import 'video-react/dist/video-react.css';
3
- export declare const VideoPlayer: {
4
- (props: any): import("react/jsx-runtime").JSX.Element;
5
- propTypes: {
6
- url: PropTypes.Requireable<string>;
7
- thumbnail: PropTypes.Requireable<string>;
8
- subtitle: PropTypes.Requireable<string>;
9
- downloadLink: PropTypes.Requireable<string>;
10
- };
11
- };
1
+ import { ReactElement } from 'react';
2
+ import { PlayerProps } from './Player.interface';
3
+ export declare const VideoPlayer: ({ customStyles, startTime, loading, setLoading, handleTrackProgress, url, subtitle: subtitleUrl, handleNextVideo, handlePreviousVideo, isNextVideo, isPreviousVideo, isPlaying, setIsPlaying, shouldPlayerBeFocusedOnSpaceClick, showFavorite, isFavorite, toggleFavorite, }: PlayerProps) => ReactElement;
@@ -0,0 +1,63 @@
1
+ import React, { RefObject } from 'react';
2
+ import ReactPlayer from 'react-player';
3
+ import { ControlsProps } from './Controls/Controls.interface';
4
+ export interface VideoState {
5
+ muted: boolean;
6
+ volume: number;
7
+ prevVolume: number;
8
+ playbackRate: number;
9
+ played: number;
10
+ seeking: boolean;
11
+ buffer: boolean;
12
+ }
13
+ type HandleNextVideo = () => void;
14
+ type HandlePreviousVideo = () => void;
15
+ export interface PlayerProps {
16
+ customStyles?: React.CSSProperties;
17
+ startTime?: number;
18
+ loading: boolean;
19
+ setLoading: React.Dispatch<React.SetStateAction<boolean>>;
20
+ url: string;
21
+ subtitle: string;
22
+ handleTrackProgress: (currentTime: number) => void;
23
+ handleNextVideo?: HandleNextVideo;
24
+ handlePreviousVideo?: HandlePreviousVideo;
25
+ isNextVideo?: boolean;
26
+ isPreviousVideo?: boolean;
27
+ isPlaying: boolean;
28
+ setIsPlaying: React.Dispatch<React.SetStateAction<boolean>>;
29
+ shouldPlayerBeFocusedOnSpaceClick?: boolean;
30
+ showFavorite?: boolean;
31
+ isFavorite?: boolean;
32
+ toggleFavorite?: () => Promise<void>;
33
+ }
34
+ export interface UsePlayerControlsProps {
35
+ startTime?: number;
36
+ setLoading: React.Dispatch<React.SetStateAction<boolean>>;
37
+ url: string;
38
+ handleTrackProgress: (currentTime: number) => void;
39
+ subtitleUrl: string;
40
+ isPlaying: boolean;
41
+ setIsPlaying: React.Dispatch<React.SetStateAction<boolean>>;
42
+ shouldPlayerBeFocusedOnSpaceClick: boolean;
43
+ }
44
+ export interface ProgressState {
45
+ played: number;
46
+ playedSeconds: number;
47
+ loaded: number;
48
+ loadedSeconds: number;
49
+ }
50
+ export interface UsePlayerControlsState extends Omit<ControlsProps, 'isFavorite' | 'toggleIsFavorite'> {
51
+ mouseMoveHandler: () => void;
52
+ playerContainerRef: RefObject<HTMLDivElement>;
53
+ videoPlayerRef: RefObject<ReactPlayer>;
54
+ progressHandler: (state: ProgressState) => Promise<void>;
55
+ bufferStartHandler: () => void;
56
+ bufferEndHandler: () => void;
57
+ onPlayerStart: () => void;
58
+ controlRef: RefObject<HTMLDivElement>;
59
+ isFullscreen: boolean;
60
+ isControlsActive: boolean;
61
+ currentSubtitle: string;
62
+ }
63
+ export {};
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=Player.interface.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Player.interface.js","sourceRoot":"","sources":["../../../src/components/VideoPlayer/Player.interface.ts"],"names":[],"mappings":""}
@@ -1,102 +1,87 @@
1
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- // disabled eslint for this file as react-player is not fully compatible with typescript
3
- /* eslint-disable */
4
- //@ts-nocheck
5
- import { useEffect, useRef, useState } from 'react';
6
- import PropTypes from 'prop-types';
7
- import Hls from 'hls.js';
8
- import { Player, ControlBar, PlaybackRateMenuButton, BigPlayButton } from 'video-react';
9
- import 'video-react/dist/video-react.css';
10
- import { ButtonWrapper, Container, QualityButtonWrapper,
11
- // StyledQualityMenu,
12
- StyledQualityMenuItem,
13
- // StyledVideo,
14
- SubtitlesMenuContainer, DownloadWrapper, } from './styled-components';
15
- import { useTranslation } from 'react-i18next';
16
- import { ClosedCaptionIcon, CloudDownloadIcon } from '../../icons';
17
- import useOutsideClick from '../../helperFunctions/useOutsideClick';
18
- var SubtitlesButton = function (_a) {
19
- var subtitles = _a.subtitles, setSubtitles = _a.setSubtitles;
20
- var _b = useState(false), open = _b[0], setOpen = _b[1];
21
- var ref = useRef();
22
- var t = useTranslation().t;
23
- useOutsideClick(ref, function () { return open && setOpen(false); });
24
- return (_jsxs(QualityButtonWrapper, { ref: ref, children: [_jsx(ButtonWrapper, { onClick: function () { return setOpen(!open); }, children: _jsx(ClosedCaptionIcon, { fontSize: 'small' }) }), open && (_jsxs(SubtitlesMenuContainer, { children: [_jsx(StyledQualityMenuItem, { onClick: function () { return setSubtitles('off'); }, color: subtitles === 'off', children: t('general.off') }), _jsx(StyledQualityMenuItem, { onClick: function () { return setSubtitles('on'); }, color: subtitles === 'on', children: t('general.on') })] }))] }));
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
25
11
  };
26
- // commented out Quality menu for now as we only playing 720p hls videos
27
- // const QualityMenu = ({ setQuality, quality }) => {
28
- // const [open, setOpen] = useState(false)
29
- // const ref = useRef()
30
- // const selectOptions = (i) => {
31
- // setQuality(i)
32
- // }
33
- // useOutsideClick(ref, () => open && setOpen(false))
34
- // return (
35
- // <QualityButtonWrapper ref={ref}>
36
- // <ButtonWrapper onClick={() => setOpen(!open)}>
37
- // {quality === 2 ? (
38
- // <HighQualityIcon fontSize="small" />
39
- // ) : (
40
- // <HdIcon fontSize="small" />
41
- // )}
42
- // </ButtonWrapper>
43
- // {open && (
44
- // <StyledQualityMenu>
45
- // {['360p', '720p', '1080p'].map((item, index) => (
46
- // <StyledQualityMenuItem
47
- // key=""
48
- // onClick={() => selectOptions(index)}
49
- // color={quality === index}
50
- // >
51
- // {item}
52
- // </StyledQualityMenuItem>
53
- // ))}
54
- // </StyledQualityMenu>
55
- // )}
56
- // </QualityButtonWrapper>
57
- // )
58
- // }
59
- var HlsVideoSrc = function (props) {
60
- var hlsRef = useRef();
61
- var video = props.video, url = props.url, type = props.type, showSubtitles = props.showSubtitles;
62
- useEffect(function () {
63
- if (!Hls.isSupported())
64
- return;
65
- hlsRef.current = new Hls();
66
- hlsRef.current.loadSource(url);
67
- hlsRef.current.attachMedia(video);
68
- hlsRef.current.subtitleDisplay = false;
69
- }, [url]);
70
- useEffect(function () {
71
- if (!hlsRef)
72
- return;
73
- hlsRef.current.subtitleDisplay = showSubtitles === 'on';
74
- }, [showSubtitles]);
75
- return (_jsx(_Fragment, { children: _jsx("source", { src: url, type: type || 'application/x-mpegURL' }) }));
12
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
13
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
14
+ return new (P || (P = Promise))(function (resolve, reject) {
15
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
16
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
17
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
18
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
19
+ });
76
20
  };
77
- export var VideoPlayer = function (props) {
78
- var _a = useState('off'), subtitles = _a[0], setSubtitles = _a[1];
79
- var ref = useRef();
80
- useEffect(function () {
81
- ref.current.playbackRate = 2;
82
- ref.current.forceUpdate();
83
- }, []);
84
- return (_jsx(Container, { children: _jsxs(Player, { ref: ref, width: 700, height: 400, poster: props.thumbnail, crossOrigin: 'anonymous', children: [_jsx(BigPlayButton, { position: 'center' }), _jsx(HlsVideoSrc, { isVideoChild: true, video: ref.current, url: props.url, showSubtitles: subtitles }), _jsxs(ControlBar, { children: [_jsx(PlaybackRateMenuButton, { rates: [3, 2, 1.6, 1.2, 1, 0.5, 0.1], order: 7 }), props.subtitle && (_jsx(SubtitlesButton, { order: 7, setSubtitles: setSubtitles, subtitles: subtitles, list: props.subtitle })), props.downloadLink && (_jsx(DownloadWrapper, { order: 7, children: _jsx("a", { href: props.downloadLink, rel: 'noreferrer', target: '_blank', download: true, children: _jsx(CloudDownloadIcon, { fontSize: 'small' }) }) }))] })] }) }));
21
+ var __generator = (this && this.__generator) || function (thisArg, body) {
22
+ var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
23
+ return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
24
+ function verb(n) { return function (v) { return step([n, v]); }; }
25
+ function step(op) {
26
+ if (f) throw new TypeError("Generator is already executing.");
27
+ while (g && (g = 0, op[0] && (_ = 0)), _) try {
28
+ if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
29
+ if (y = 0, t) op = [op[0] & 2, t.value];
30
+ switch (op[0]) {
31
+ case 0: case 1: t = op; break;
32
+ case 4: _.label++; return { value: op[1], done: false };
33
+ case 5: _.label++; y = op[1]; op = [0]; continue;
34
+ case 7: op = _.ops.pop(); _.trys.pop(); continue;
35
+ default:
36
+ if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
37
+ if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
38
+ if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
39
+ if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
40
+ if (t[2]) _.ops.pop();
41
+ _.trys.pop(); continue;
42
+ }
43
+ op = body.call(thisArg, _);
44
+ } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
45
+ if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
46
+ }
85
47
  };
86
- HlsVideoSrc.propTypes = {
87
- url: PropTypes.string,
88
- type: PropTypes.string,
89
- video: PropTypes.object,
90
- showSubtitles: PropTypes.string,
91
- };
92
- VideoPlayer.propTypes = {
93
- url: PropTypes.string,
94
- thumbnail: PropTypes.string,
95
- subtitle: PropTypes.string,
96
- downloadLink: PropTypes.string,
97
- };
98
- SubtitlesButton.propTypes = {
99
- setSubtitles: PropTypes.func,
100
- subtitles: PropTypes.string,
48
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
49
+ import ReactPlayer from 'react-player';
50
+ import { StyledWrapper, StyledPlayerLoader, StyledControlsContainer, StyledVideoPlayerWrapper, StyledLoader, StyledSubtitles, } from './Player.styles';
51
+ import Controls from './Controls';
52
+ import usePlayerControls from './usePlayerControls';
53
+ export var VideoPlayer = function (_a) {
54
+ var customStyles = _a.customStyles, _b = _a.startTime, startTime = _b === void 0 ? 0 : _b, loading = _a.loading, setLoading = _a.setLoading, handleTrackProgress = _a.handleTrackProgress, url = _a.url, subtitleUrl = _a.subtitle, handleNextVideo = _a.handleNextVideo, handlePreviousVideo = _a.handlePreviousVideo, isNextVideo = _a.isNextVideo, isPreviousVideo = _a.isPreviousVideo, isPlaying = _a.isPlaying, setIsPlaying = _a.setIsPlaying, _c = _a.shouldPlayerBeFocusedOnSpaceClick, shouldPlayerBeFocusedOnSpaceClick = _c === void 0 ? false : _c, showFavorite = _a.showFavorite, _d = _a.isFavorite, isFavorite = _d === void 0 ? false : _d, _e = _a.toggleFavorite, toggleFavorite = _e === void 0 ? function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
55
+ return [2 /*return*/];
56
+ }); }); } : _e;
57
+ var _f = usePlayerControls({
58
+ startTime: startTime,
59
+ setLoading: setLoading,
60
+ handleTrackProgress: handleTrackProgress,
61
+ url: url,
62
+ subtitleUrl: subtitleUrl,
63
+ isPlaying: isPlaying,
64
+ setIsPlaying: setIsPlaying,
65
+ shouldPlayerBeFocusedOnSpaceClick: shouldPlayerBeFocusedOnSpaceClick,
66
+ }), mouseMoveHandler = _f.mouseMoveHandler, playerContainerRef = _f.playerContainerRef, playPauseHandler = _f.playPauseHandler, handleFullScreen = _f.handleFullScreen, videoPlayerRef = _f.videoPlayerRef, playing = _f.playing, volume = _f.volume, muted = _f.muted, progressHandler = _f.progressHandler, bufferStartHandler = _f.bufferStartHandler, bufferEndHandler = _f.bufferEndHandler, onPlayerStart = _f.onPlayerStart, setVideoState = _f.setVideoState, playbackRate = _f.playbackRate, controlRef = _f.controlRef, rewindHandler = _f.rewindHandler, handleFastForward = _f.handleFastForward, formatCurrentTime = _f.formatCurrentTime, played = _f.played, onSeekMouseDownHandler = _f.onSeekMouseDownHandler, seekHandler = _f.seekHandler, seekMouseUpHandler = _f.seekMouseUpHandler, muteHandler = _f.muteHandler, volumeChangeHandler = _f.volumeChangeHandler, formatDuration = _f.formatDuration, isSubtitlesChecked = _f.isSubtitlesChecked, toggleSubtitlesCheck = _f.toggleSubtitlesCheck, isFullscreen = _f.isFullscreen, isControlsActive = _f.isControlsActive, currentSubtitle = _f.currentSubtitle;
67
+ // Make sure we have a valid URL to avoid ReactPlayer errors
68
+ var validUrl = url || '';
69
+ return (_jsxs(StyledWrapper, { tabIndex: 0, onMouseMove: mouseMoveHandler, ref: playerContainerRef, style: customStyles, onClick: function (e) { return e.stopPropagation(); }, "data-testid": 'video-player-wrapper', children: [_jsx(StyledVideoPlayerWrapper, { onClick: playPauseHandler, onDoubleClick: handleFullScreen, children: _jsx(ReactPlayer, { url: validUrl, ref: videoPlayerRef, className: 'react-player', width: '100%', height: '100%', playing: isPlaying, volume: volume, muted: muted, onProgress: progressHandler, onBuffer: bufferStartHandler, onBufferEnd: bufferEndHandler, onReady: onPlayerStart, onPlay: function () { return setIsPlaying(true); }, onPause: function () { return setIsPlaying(false); }, onEnded: function () {
70
+ var _a;
71
+ var totalDuration = (_a = videoPlayerRef.current) === null || _a === void 0 ? void 0 : _a.getDuration();
72
+ if (totalDuration) {
73
+ handleTrackProgress(totalDuration);
74
+ }
75
+ setVideoState(function (prev) { return (__assign(__assign({}, prev), { playing: false })); });
76
+ if (handleNextVideo)
77
+ handleNextVideo();
78
+ }, controls: false, pip: true, playbackRate: playbackRate, preload: 'metadata', config: {
79
+ file: {
80
+ hlsOptions: {
81
+ autoStartLoad: true,
82
+ renderTextTracksNatively: false,
83
+ },
84
+ },
85
+ } }, validUrl) }), loading && (_jsx(StyledPlayerLoader, { children: _jsx(StyledLoader, {}) })), _jsx(StyledControlsContainer, { ref: controlRef, children: _jsx(Controls, { setVideoState: setVideoState, playbackRate: playbackRate, rewindHandler: rewindHandler, playPauseHandler: playPauseHandler, handleFastForward: handleFastForward, formatCurrentTime: formatCurrentTime, played: played, onSeekMouseDownHandler: onSeekMouseDownHandler, seekHandler: seekHandler, seekMouseUpHandler: seekMouseUpHandler, volume: volume, muted: muted, muteHandler: muteHandler, volumeChangeHandler: volumeChangeHandler, formatDuration: formatDuration, handleFullScreen: handleFullScreen, playing: playing, isSubtitlesChecked: isSubtitlesChecked, toggleSubtitlesCheck: toggleSubtitlesCheck, isFavorite: isFavorite, toggleIsFavorite: toggleFavorite, isFullscreen: isFullscreen, subtitle: !!subtitleUrl, handleSkipBackward: handlePreviousVideo, handleSkipForward: handleNextVideo, isNextVideo: isNextVideo, isPreviousVideo: isPreviousVideo, showFavorite: showFavorite }) }), isSubtitlesChecked && currentSubtitle && (_jsx(StyledSubtitles, { "$controls": isControlsActive, children: currentSubtitle }))] }));
101
86
  };
102
87
  //# sourceMappingURL=Player.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Player.js","sourceRoot":"","sources":["../../../src/components/VideoPlayer/Player.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Player.js","sourceRoot":"","sources":["../../../src/components/VideoPlayer/Player.tsx"],"names":[],"mappings":"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"}