@remotion/player 4.0.0-lambda.3 → 4.0.0-newpathfunctions.13

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 (311) hide show
  1. package/LICENSE.md +8 -8
  2. package/README.md +1 -1
  3. package/dist/MediaVolumeSlider.d.ts +4 -1
  4. package/dist/MediaVolumeSlider.js +80 -55
  5. package/dist/Player.d.ts +20 -15
  6. package/dist/Player.js +24 -70
  7. package/dist/PlayerControls.d.ts +29 -2
  8. package/dist/PlayerControls.js +66 -15
  9. package/dist/PlayerSeekBar.d.ts +4 -0
  10. package/dist/PlayerSeekBar.js +35 -11
  11. package/dist/PlayerUI.d.ts +18 -9
  12. package/dist/PlayerUI.js +118 -76
  13. package/dist/SharedPlayerContext.d.ts +14 -0
  14. package/dist/SharedPlayerContext.js +72 -0
  15. package/dist/Thumbnail.d.ts +20 -0
  16. package/dist/Thumbnail.js +42 -0
  17. package/dist/ThumbnailUI.d.ts +11 -0
  18. package/dist/ThumbnailUI.js +107 -0
  19. package/dist/calculate-next-frame.d.ts +0 -0
  20. package/dist/calculate-next-frame.js +0 -0
  21. package/dist/calculate-scale.d.ts +30 -5
  22. package/dist/calculate-scale.js +65 -4
  23. package/dist/cjs/MediaVolumeSlider.d.ts +5 -0
  24. package/dist/cjs/MediaVolumeSlider.js +118 -0
  25. package/dist/cjs/Player.d.ts +43 -0
  26. package/dist/cjs/Player.js +143 -0
  27. package/dist/cjs/PlayerControls.d.ts +41 -0
  28. package/dist/cjs/PlayerControls.js +152 -0
  29. package/dist/cjs/PlayerSeekBar.d.ts +8 -0
  30. package/dist/cjs/PlayerSeekBar.js +146 -0
  31. package/dist/cjs/PlayerUI.d.ts +38 -0
  32. package/dist/cjs/PlayerUI.js +308 -0
  33. package/dist/cjs/SharedPlayerContext.d.ts +14 -0
  34. package/dist/cjs/SharedPlayerContext.js +72 -0
  35. package/dist/cjs/Thumbnail.d.ts +20 -0
  36. package/dist/cjs/Thumbnail.js +42 -0
  37. package/dist/cjs/ThumbnailUI.d.ts +11 -0
  38. package/dist/cjs/ThumbnailUI.js +107 -0
  39. package/dist/cjs/calculate-next-frame.d.ts +14 -0
  40. package/dist/cjs/calculate-next-frame.js +28 -0
  41. package/dist/cjs/calculate-scale.d.ts +39 -0
  42. package/dist/cjs/calculate-scale.js +85 -0
  43. package/dist/cjs/emitter-context.d.ts +4 -0
  44. package/dist/cjs/emitter-context.js +9 -0
  45. package/dist/cjs/error-boundary.d.ts +19 -0
  46. package/dist/cjs/error-boundary.js +39 -0
  47. package/dist/cjs/event-emitter.d.ts +66 -0
  48. package/dist/cjs/event-emitter.js +87 -0
  49. package/dist/cjs/format-time.d.ts +1 -0
  50. package/dist/cjs/format-time.js +9 -0
  51. package/dist/cjs/icons.d.ts +10 -0
  52. package/dist/cjs/icons.js +50 -0
  53. package/dist/cjs/index.d.ts +60 -0
  54. package/dist/cjs/index.js +25 -0
  55. package/dist/cjs/player-css-classname.d.ts +1 -0
  56. package/dist/cjs/player-css-classname.js +4 -0
  57. package/dist/cjs/player-methods.d.ts +24 -0
  58. package/dist/cjs/player-methods.js +2 -0
  59. package/dist/cjs/test/index.test.d.ts +1 -0
  60. package/dist/cjs/test/index.test.js +9 -0
  61. package/dist/cjs/test/test-utils.d.ts +6 -0
  62. package/dist/cjs/test/test-utils.js +32 -0
  63. package/dist/cjs/test/validate-in-out-frames.test.d.ts +1 -0
  64. package/dist/cjs/test/validate-in-out-frames.test.js +56 -0
  65. package/dist/cjs/test/validate-prop.test.d.ts +1 -0
  66. package/dist/cjs/test/validate-prop.test.js +131 -0
  67. package/dist/cjs/use-hover-state.d.ts +1 -0
  68. package/dist/cjs/use-hover-state.js +27 -0
  69. package/dist/cjs/use-playback.d.ts +7 -0
  70. package/dist/cjs/use-playback.js +92 -0
  71. package/dist/cjs/use-player.d.ts +19 -0
  72. package/dist/cjs/use-player.js +132 -0
  73. package/dist/cjs/use-thumbnail.d.ts +6 -0
  74. package/dist/cjs/use-thumbnail.js +18 -0
  75. package/dist/cjs/use-video-controls-resize.d.ts +7 -0
  76. package/dist/cjs/use-video-controls-resize.js +36 -0
  77. package/dist/cjs/utils/calculate-player-size.d.ts +9 -0
  78. package/dist/cjs/utils/calculate-player-size.js +29 -0
  79. package/dist/cjs/utils/cancellable-promise.d.ts +5 -0
  80. package/dist/cjs/utils/cancellable-promise.js +26 -0
  81. package/dist/cjs/utils/delay.d.ts +1 -0
  82. package/dist/cjs/utils/delay.js +6 -0
  83. package/dist/cjs/utils/is-node.d.ts +1 -0
  84. package/dist/cjs/utils/is-node.js +4 -0
  85. package/dist/cjs/utils/preview-size.d.ts +8 -0
  86. package/dist/cjs/utils/preview-size.js +2 -0
  87. package/dist/cjs/utils/props-if-has-props.d.ts +5 -0
  88. package/dist/cjs/utils/props-if-has-props.js +2 -0
  89. package/dist/cjs/utils/use-cancellable-promises.d.ts +7 -0
  90. package/dist/cjs/utils/use-cancellable-promises.js +21 -0
  91. package/dist/cjs/utils/use-click-prevention-on-double-click.d.ts +3 -0
  92. package/dist/cjs/utils/use-click-prevention-on-double-click.js +45 -0
  93. package/dist/cjs/utils/use-element-size.d.ts +16 -0
  94. package/dist/cjs/utils/use-element-size.js +98 -0
  95. package/dist/cjs/utils/validate-in-out-frame.d.ts +6 -0
  96. package/dist/cjs/utils/validate-in-out-frame.js +54 -0
  97. package/dist/cjs/utils/validate-initial-frame.d.ts +4 -0
  98. package/dist/cjs/utils/validate-initial-frame.js +27 -0
  99. package/dist/cjs/utils/validate-playbackrate.d.ts +1 -0
  100. package/dist/cjs/utils/validate-playbackrate.js +18 -0
  101. package/dist/cjs/volume-persistance.d.ts +2 -0
  102. package/dist/cjs/volume-persistance.js +19 -0
  103. package/dist/emitter-context.d.ts +2 -1
  104. package/dist/emitter-context.js +2 -1
  105. package/dist/error-boundary.d.ts +0 -0
  106. package/dist/error-boundary.js +0 -0
  107. package/dist/esm/MediaVolumeSlider.d.ts +5 -0
  108. package/dist/esm/MediaVolumeSlider.js +114 -0
  109. package/dist/esm/Player.d.ts +43 -0
  110. package/dist/esm/Player.js +136 -0
  111. package/dist/esm/PlayerControls.d.ts +41 -0
  112. package/dist/esm/PlayerControls.js +148 -0
  113. package/dist/esm/PlayerSeekBar.d.ts +8 -0
  114. package/dist/esm/PlayerSeekBar.js +142 -0
  115. package/dist/esm/PlayerUI.d.ts +38 -0
  116. package/dist/esm/PlayerUI.js +283 -0
  117. package/dist/esm/SharedPlayerContext.d.ts +14 -0
  118. package/dist/esm/SharedPlayerContext.js +68 -0
  119. package/dist/esm/Thumbnail.d.ts +20 -0
  120. package/dist/esm/Thumbnail.js +35 -0
  121. package/dist/esm/ThumbnailUI.d.ts +11 -0
  122. package/dist/esm/ThumbnailUI.js +82 -0
  123. package/dist/esm/calculate-next-frame.d.ts +14 -0
  124. package/dist/esm/calculate-next-frame.js +24 -0
  125. package/dist/esm/calculate-scale.d.ts +39 -0
  126. package/dist/esm/calculate-scale.js +77 -0
  127. package/dist/esm/emitter-context.d.ts +4 -0
  128. package/dist/esm/emitter-context.js +3 -0
  129. package/dist/esm/error-boundary.d.ts +19 -0
  130. package/dist/esm/error-boundary.js +32 -0
  131. package/dist/esm/event-emitter.d.ts +66 -0
  132. package/dist/esm/event-emitter.js +82 -0
  133. package/dist/esm/format-time.d.ts +1 -0
  134. package/dist/esm/format-time.js +5 -0
  135. package/dist/esm/icons.d.ts +10 -0
  136. package/dist/esm/icons.js +42 -0
  137. package/dist/esm/index.d.ts +60 -0
  138. package/dist/esm/index.js +20 -0
  139. package/dist/esm/player-css-classname.d.ts +1 -0
  140. package/dist/esm/player-css-classname.js +1 -0
  141. package/dist/esm/player-methods.d.ts +24 -0
  142. package/dist/esm/player-methods.js +1 -0
  143. package/dist/esm/test/index.test.d.ts +1 -0
  144. package/dist/esm/test/index.test.js +7 -0
  145. package/dist/esm/test/test-utils.d.ts +6 -0
  146. package/dist/esm/test/test-utils.js +14 -0
  147. package/dist/esm/test/validate-in-out-frames.test.d.ts +1 -0
  148. package/dist/esm/test/validate-in-out-frames.test.js +54 -0
  149. package/dist/esm/test/validate-prop.test.d.ts +1 -0
  150. package/dist/esm/test/validate-prop.test.js +129 -0
  151. package/dist/esm/use-hover-state.d.ts +1 -0
  152. package/dist/esm/use-hover-state.js +23 -0
  153. package/dist/esm/use-playback.d.ts +7 -0
  154. package/dist/esm/use-playback.js +88 -0
  155. package/dist/esm/use-player.d.ts +19 -0
  156. package/dist/esm/use-player.js +128 -0
  157. package/dist/esm/use-thumbnail.d.ts +6 -0
  158. package/dist/esm/use-thumbnail.js +14 -0
  159. package/dist/esm/use-video-controls-resize.d.ts +7 -0
  160. package/dist/esm/use-video-controls-resize.js +32 -0
  161. package/dist/esm/utils/calculate-player-size.d.ts +9 -0
  162. package/dist/esm/utils/calculate-player-size.js +25 -0
  163. package/dist/esm/utils/cancellable-promise.d.ts +5 -0
  164. package/dist/esm/utils/cancellable-promise.js +22 -0
  165. package/dist/esm/utils/delay.d.ts +1 -0
  166. package/dist/esm/utils/delay.js +2 -0
  167. package/dist/esm/utils/is-node.d.ts +1 -0
  168. package/dist/esm/utils/is-node.js +1 -0
  169. package/dist/esm/utils/preview-size.d.ts +8 -0
  170. package/dist/esm/utils/preview-size.js +1 -0
  171. package/dist/esm/utils/props-if-has-props.d.ts +5 -0
  172. package/dist/esm/utils/props-if-has-props.js +1 -0
  173. package/dist/esm/utils/use-cancellable-promises.d.ts +7 -0
  174. package/dist/esm/utils/use-cancellable-promises.js +18 -0
  175. package/dist/esm/utils/use-click-prevention-on-double-click.d.ts +3 -0
  176. package/dist/esm/utils/use-click-prevention-on-double-click.js +42 -0
  177. package/dist/esm/utils/use-element-size.d.ts +16 -0
  178. package/dist/esm/utils/use-element-size.js +93 -0
  179. package/dist/esm/utils/validate-in-out-frame.d.ts +6 -0
  180. package/dist/esm/utils/validate-in-out-frame.js +49 -0
  181. package/dist/esm/utils/validate-initial-frame.d.ts +4 -0
  182. package/dist/esm/utils/validate-initial-frame.js +23 -0
  183. package/dist/esm/utils/validate-playbackrate.d.ts +1 -0
  184. package/dist/esm/utils/validate-playbackrate.js +14 -0
  185. package/dist/esm/volume-persistance.d.ts +2 -0
  186. package/dist/esm/volume-persistance.js +14 -0
  187. package/dist/event-emitter.d.ts +33 -9
  188. package/dist/event-emitter.js +33 -1
  189. package/dist/format-time.d.ts +0 -0
  190. package/dist/format-time.js +0 -0
  191. package/dist/icons.d.ts +2 -1
  192. package/dist/icons.js +7 -7
  193. package/dist/index.d.ts +25 -9
  194. package/dist/index.js +5 -2
  195. package/dist/player-css-classname.d.ts +0 -1
  196. package/dist/player-css-classname.js +1 -2
  197. package/dist/player-methods.d.ts +8 -4
  198. package/dist/player-methods.js +0 -0
  199. package/dist/test/index.test.d.ts +0 -0
  200. package/dist/test/index.test.js +3 -2
  201. package/dist/test/test-utils.d.ts +2 -2
  202. package/dist/test/test-utils.js +0 -0
  203. package/dist/test/validate-in-out-frames.test.d.ts +1 -0
  204. package/dist/test/validate-in-out-frames.test.js +56 -0
  205. package/dist/test/validate-prop.test.d.ts +0 -0
  206. package/dist/test/validate-prop.test.js +24 -23
  207. package/dist/tsconfig-cjs.tsbuildinfo +1 -0
  208. package/dist/tsconfig.tsbuildinfo +1 -0
  209. package/dist/use-hover-state.d.ts +0 -0
  210. package/dist/use-hover-state.js +0 -0
  211. package/dist/use-playback.d.ts +4 -1
  212. package/dist/use-playback.js +7 -3
  213. package/dist/use-player.d.ts +8 -3
  214. package/dist/use-player.js +23 -4
  215. package/dist/use-thumbnail.d.ts +6 -0
  216. package/dist/use-thumbnail.js +18 -0
  217. package/dist/use-video-controls-resize.d.ts +7 -0
  218. package/dist/use-video-controls-resize.js +36 -0
  219. package/dist/utils/calculate-player-size.d.ts +2 -2
  220. package/dist/utils/calculate-player-size.js +0 -0
  221. package/dist/utils/cancellable-promise.d.ts +0 -0
  222. package/dist/utils/cancellable-promise.js +0 -0
  223. package/dist/utils/delay.d.ts +0 -0
  224. package/dist/utils/delay.js +0 -0
  225. package/dist/utils/is-node.d.ts +0 -0
  226. package/dist/utils/is-node.js +0 -0
  227. package/dist/utils/preview-size.d.ts +8 -1
  228. package/dist/utils/preview-size.js +0 -0
  229. package/dist/utils/props-if-has-props.d.ts +5 -0
  230. package/dist/utils/props-if-has-props.js +2 -0
  231. package/dist/utils/use-cancellable-promises.d.ts +1 -1
  232. package/dist/utils/use-cancellable-promises.js +0 -0
  233. package/dist/utils/use-click-prevention-on-double-click.d.ts +1 -1
  234. package/dist/utils/use-click-prevention-on-double-click.js +0 -0
  235. package/dist/utils/use-element-size.d.ts +4 -0
  236. package/dist/utils/use-element-size.js +8 -0
  237. package/dist/utils/validate-in-out-frame.d.ts +6 -0
  238. package/dist/utils/validate-in-out-frame.js +54 -0
  239. package/dist/utils/validate-initial-frame.d.ts +4 -0
  240. package/dist/utils/validate-initial-frame.js +27 -0
  241. package/dist/utils/validate-playbackrate.d.ts +0 -0
  242. package/dist/utils/validate-playbackrate.js +0 -0
  243. package/dist/volume-persistance.d.ts +0 -0
  244. package/dist/volume-persistance.js +0 -0
  245. package/package.json +26 -17
  246. package/dist/MediaVolumeSlider.d.ts.map +0 -1
  247. package/dist/MediaVolumeSlider.js.map +0 -1
  248. package/dist/Player.d.ts.map +0 -1
  249. package/dist/Player.js.map +0 -1
  250. package/dist/PlayerControls.d.ts.map +0 -1
  251. package/dist/PlayerControls.js.map +0 -1
  252. package/dist/PlayerSeekBar.d.ts.map +0 -1
  253. package/dist/PlayerSeekBar.js.map +0 -1
  254. package/dist/PlayerUI.d.ts.map +0 -1
  255. package/dist/PlayerUI.js.map +0 -1
  256. package/dist/calculate-next-frame.d.ts.map +0 -1
  257. package/dist/calculate-next-frame.js.map +0 -1
  258. package/dist/calculate-scale.d.ts.map +0 -1
  259. package/dist/calculate-scale.js.map +0 -1
  260. package/dist/emitter-context.d.ts.map +0 -1
  261. package/dist/emitter-context.js.map +0 -1
  262. package/dist/error-boundary.d.ts.map +0 -1
  263. package/dist/error-boundary.js.map +0 -1
  264. package/dist/event-emitter.d.ts.map +0 -1
  265. package/dist/event-emitter.js.map +0 -1
  266. package/dist/format-time.d.ts.map +0 -1
  267. package/dist/format-time.js.map +0 -1
  268. package/dist/icons.d.ts.map +0 -1
  269. package/dist/icons.js.map +0 -1
  270. package/dist/index.d.ts.map +0 -1
  271. package/dist/index.js.map +0 -1
  272. package/dist/player-css-classname.d.ts.map +0 -1
  273. package/dist/player-css-classname.js.map +0 -1
  274. package/dist/player-methods.d.ts.map +0 -1
  275. package/dist/player-methods.js.map +0 -1
  276. package/dist/test/index.test.d.ts.map +0 -1
  277. package/dist/test/index.test.js.map +0 -1
  278. package/dist/test/test-utils.d.ts.map +0 -1
  279. package/dist/test/test-utils.js.map +0 -1
  280. package/dist/test/validate-prop.test.d.ts.map +0 -1
  281. package/dist/test/validate-prop.test.js.map +0 -1
  282. package/dist/use-hover-state.d.ts.map +0 -1
  283. package/dist/use-hover-state.js.map +0 -1
  284. package/dist/use-playback.d.ts.map +0 -1
  285. package/dist/use-playback.js.map +0 -1
  286. package/dist/use-player.d.ts.map +0 -1
  287. package/dist/use-player.js.map +0 -1
  288. package/dist/utils/browser-supports-fullscreen.d.ts +0 -11
  289. package/dist/utils/browser-supports-fullscreen.d.ts.map +0 -1
  290. package/dist/utils/browser-supports-fullscreen.js +0 -5
  291. package/dist/utils/browser-supports-fullscreen.js.map +0 -1
  292. package/dist/utils/calculate-player-size.d.ts.map +0 -1
  293. package/dist/utils/calculate-player-size.js.map +0 -1
  294. package/dist/utils/cancellable-promise.d.ts.map +0 -1
  295. package/dist/utils/cancellable-promise.js.map +0 -1
  296. package/dist/utils/delay.d.ts.map +0 -1
  297. package/dist/utils/delay.js.map +0 -1
  298. package/dist/utils/is-node.d.ts.map +0 -1
  299. package/dist/utils/is-node.js.map +0 -1
  300. package/dist/utils/preview-size.d.ts.map +0 -1
  301. package/dist/utils/preview-size.js.map +0 -1
  302. package/dist/utils/use-cancellable-promises.d.ts.map +0 -1
  303. package/dist/utils/use-cancellable-promises.js.map +0 -1
  304. package/dist/utils/use-click-prevention-on-double-click.d.ts.map +0 -1
  305. package/dist/utils/use-click-prevention-on-double-click.js.map +0 -1
  306. package/dist/utils/use-element-size.d.ts.map +0 -1
  307. package/dist/utils/use-element-size.js.map +0 -1
  308. package/dist/utils/validate-playbackrate.d.ts.map +0 -1
  309. package/dist/utils/validate-playbackrate.js.map +0 -1
  310. package/dist/volume-persistance.d.ts.map +0 -1
  311. package/dist/volume-persistance.js.map +0 -1
@@ -0,0 +1,132 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.usePlayer = void 0;
4
+ const react_1 = require("react");
5
+ const remotion_1 = require("remotion");
6
+ const emitter_context_1 = require("./emitter-context");
7
+ const usePlayer = () => {
8
+ var _a;
9
+ const [playing, setPlaying, imperativePlaying] = remotion_1.Internals.Timeline.usePlayingState();
10
+ const [hasPlayed, setHasPlayed] = (0, react_1.useState)(false);
11
+ const frame = remotion_1.Internals.Timeline.useTimelinePosition();
12
+ const playStart = (0, react_1.useRef)(frame);
13
+ const setFrame = remotion_1.Internals.Timeline.useTimelineSetFrame();
14
+ const setTimelinePosition = remotion_1.Internals.Timeline.useTimelineSetFrame();
15
+ const audioContext = (0, react_1.useContext)(remotion_1.Internals.SharedAudioContext);
16
+ const { audioAndVideoTags } = (0, react_1.useContext)(remotion_1.Internals.Timeline.TimelineContext);
17
+ const frameRef = (0, react_1.useRef)();
18
+ frameRef.current = frame;
19
+ const video = remotion_1.Internals.useVideo();
20
+ const config = remotion_1.Internals.useUnsafeVideoConfig();
21
+ const emitter = (0, react_1.useContext)(emitter_context_1.PlayerEventEmitterContext);
22
+ const lastFrame = ((_a = config === null || config === void 0 ? void 0 : config.durationInFrames) !== null && _a !== void 0 ? _a : 1) - 1;
23
+ const isLastFrame = frame === lastFrame;
24
+ const isFirstFrame = frame === 0;
25
+ if (!emitter) {
26
+ throw new TypeError('Expected Player event emitter context');
27
+ }
28
+ const seek = (0, react_1.useCallback)((newFrame) => {
29
+ setTimelinePosition(newFrame);
30
+ emitter.dispatchSeek(newFrame);
31
+ }, [emitter, setTimelinePosition]);
32
+ const play = (0, react_1.useCallback)((e) => {
33
+ if (imperativePlaying.current) {
34
+ return;
35
+ }
36
+ setHasPlayed(true);
37
+ if (isLastFrame) {
38
+ seek(0);
39
+ }
40
+ /**
41
+ * Play silent audio tags to warm them up for autoplay
42
+ */
43
+ if (audioContext && audioContext.numberOfAudioTags > 0 && e) {
44
+ audioContext.playAllAudios();
45
+ }
46
+ /**
47
+ * Play audios and videos directly here so they can benefit from
48
+ * being triggered by a click
49
+ */
50
+ audioAndVideoTags.current.forEach((a) => a.play());
51
+ imperativePlaying.current = true;
52
+ setPlaying(true);
53
+ playStart.current = frameRef.current;
54
+ emitter.dispatchPlay();
55
+ }, [
56
+ imperativePlaying,
57
+ isLastFrame,
58
+ audioContext,
59
+ setPlaying,
60
+ emitter,
61
+ seek,
62
+ audioAndVideoTags,
63
+ ]);
64
+ const pause = (0, react_1.useCallback)(() => {
65
+ if (imperativePlaying.current) {
66
+ imperativePlaying.current = false;
67
+ setPlaying(false);
68
+ emitter.dispatchPause();
69
+ }
70
+ }, [emitter, imperativePlaying, setPlaying]);
71
+ const pauseAndReturnToPlayStart = (0, react_1.useCallback)(() => {
72
+ if (imperativePlaying.current) {
73
+ imperativePlaying.current = false;
74
+ setTimelinePosition(playStart.current);
75
+ setPlaying(false);
76
+ emitter.dispatchPause();
77
+ }
78
+ }, [emitter, imperativePlaying, setPlaying, setTimelinePosition]);
79
+ const hasVideo = Boolean(video);
80
+ const frameBack = (0, react_1.useCallback)((frames) => {
81
+ if (!hasVideo) {
82
+ return null;
83
+ }
84
+ if (imperativePlaying.current) {
85
+ return;
86
+ }
87
+ setFrame((f) => {
88
+ return Math.max(0, f - frames);
89
+ });
90
+ }, [hasVideo, imperativePlaying, setFrame]);
91
+ const frameForward = (0, react_1.useCallback)((frames) => {
92
+ if (!hasVideo) {
93
+ return null;
94
+ }
95
+ if (imperativePlaying.current) {
96
+ return;
97
+ }
98
+ setFrame((f) => Math.min(lastFrame, f + frames));
99
+ }, [hasVideo, imperativePlaying, lastFrame, setFrame]);
100
+ const returnValue = (0, react_1.useMemo)(() => {
101
+ return {
102
+ frameBack,
103
+ frameForward,
104
+ isLastFrame,
105
+ emitter,
106
+ playing,
107
+ play,
108
+ pause,
109
+ seek,
110
+ isFirstFrame,
111
+ getCurrentFrame: () => frameRef.current,
112
+ isPlaying: () => imperativePlaying.current,
113
+ pauseAndReturnToPlayStart,
114
+ hasPlayed,
115
+ };
116
+ }, [
117
+ frameBack,
118
+ frameForward,
119
+ isLastFrame,
120
+ emitter,
121
+ playing,
122
+ play,
123
+ pause,
124
+ seek,
125
+ isFirstFrame,
126
+ pauseAndReturnToPlayStart,
127
+ imperativePlaying,
128
+ hasPlayed,
129
+ ]);
130
+ return returnValue;
131
+ };
132
+ exports.usePlayer = usePlayer;
@@ -0,0 +1,6 @@
1
+ import type { ThumbnailEmitter } from './event-emitter';
2
+ declare type UseThumbnailMethods = {
3
+ emitter: ThumbnailEmitter;
4
+ };
5
+ export declare const useThumbnail: () => UseThumbnailMethods;
6
+ export {};
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.useThumbnail = void 0;
4
+ const react_1 = require("react");
5
+ const emitter_context_1 = require("./emitter-context");
6
+ const useThumbnail = () => {
7
+ const emitter = (0, react_1.useContext)(emitter_context_1.ThumbnailEmitterContext);
8
+ if (!emitter) {
9
+ throw new TypeError('Expected Player event emitter context');
10
+ }
11
+ const returnValue = (0, react_1.useMemo)(() => {
12
+ return {
13
+ emitter,
14
+ };
15
+ }, [emitter]);
16
+ return returnValue;
17
+ };
18
+ exports.useThumbnail = useThumbnail;
@@ -0,0 +1,7 @@
1
+ export declare const useVideoControlsResize: ({ allowFullscreen: allowFullScreen, playerWidth, }: {
2
+ allowFullscreen: boolean;
3
+ playerWidth: number;
4
+ }) => {
5
+ maxTimeLabelWidth: number;
6
+ displayVerticalVolumeSlider: boolean;
7
+ };
@@ -0,0 +1,36 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.useVideoControlsResize = void 0;
4
+ const react_1 = require("react");
5
+ const icons_1 = require("./icons");
6
+ const MediaVolumeSlider_1 = require("./MediaVolumeSlider");
7
+ const PlayerControls_1 = require("./PlayerControls");
8
+ const useVideoControlsResize = ({ allowFullscreen: allowFullScreen, playerWidth, }) => {
9
+ const resizeInfo = (0, react_1.useMemo)(() => {
10
+ const playPauseIconSize = icons_1.ICON_SIZE;
11
+ const volumeIconSize = icons_1.ICON_SIZE;
12
+ const _fullscreenIconSize = allowFullScreen ? icons_1.fullscreenIconSize : 0;
13
+ const elementsSize = volumeIconSize +
14
+ playPauseIconSize +
15
+ _fullscreenIconSize +
16
+ PlayerControls_1.X_PADDING * 2 +
17
+ PlayerControls_1.X_SPACER * 2;
18
+ const maxTimeLabelWidth = playerWidth - elementsSize;
19
+ const maxTimeLabelWidthWithoutNegativeValue = Math.max(maxTimeLabelWidth, 0);
20
+ const availableTimeLabelWidthIfVolumeOpen = maxTimeLabelWidthWithoutNegativeValue - MediaVolumeSlider_1.VOLUME_SLIDER_WIDTH;
21
+ // If max label width is lower than the volume width
22
+ // then it means we need to take it's width as the max label width
23
+ // otherwise we took the available width when volume open
24
+ const computedLabelWidth = availableTimeLabelWidthIfVolumeOpen < MediaVolumeSlider_1.VOLUME_SLIDER_WIDTH
25
+ ? maxTimeLabelWidthWithoutNegativeValue
26
+ : availableTimeLabelWidthIfVolumeOpen;
27
+ const minWidthForHorizontalDisplay = computedLabelWidth + elementsSize + MediaVolumeSlider_1.VOLUME_SLIDER_WIDTH;
28
+ const displayVerticalVolumeSlider = playerWidth < minWidthForHorizontalDisplay;
29
+ return {
30
+ maxTimeLabelWidth: maxTimeLabelWidthWithoutNegativeValue,
31
+ displayVerticalVolumeSlider,
32
+ };
33
+ }, [allowFullScreen, playerWidth]);
34
+ return resizeInfo;
35
+ };
36
+ exports.useVideoControlsResize = useVideoControlsResize;
@@ -0,0 +1,9 @@
1
+ import type { StandardLonghandProperties } from 'csstype';
2
+ import type { Size } from './use-element-size';
3
+ export declare const calculatePlayerSize: ({ currentSize, width, height, compositionWidth, compositionHeight, }: {
4
+ currentSize: Size | null;
5
+ width: StandardLonghandProperties['width'] | undefined;
6
+ height: StandardLonghandProperties['height'] | undefined;
7
+ compositionWidth: number;
8
+ compositionHeight: number;
9
+ }) => React.CSSProperties;
@@ -0,0 +1,29 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.calculatePlayerSize = void 0;
4
+ const calculatePlayerSize = ({ currentSize, width, height, compositionWidth, compositionHeight, }) => {
5
+ const aspectRatio = compositionWidth / compositionHeight;
6
+ if (!currentSize) {
7
+ return {
8
+ width: compositionWidth,
9
+ height: compositionHeight,
10
+ };
11
+ }
12
+ // If has width specified, but no height, specify a default height that satisfies the aspect ratio.
13
+ if (width !== undefined && height === undefined) {
14
+ return {
15
+ height: currentSize.width / aspectRatio,
16
+ };
17
+ }
18
+ // Opposite: If has height specified, evaluate the height and specify a default width.
19
+ if (height !== undefined && width === undefined) {
20
+ return {
21
+ width: currentSize.height * aspectRatio,
22
+ };
23
+ }
24
+ return {
25
+ width: compositionWidth,
26
+ height: compositionHeight,
27
+ };
28
+ };
29
+ exports.calculatePlayerSize = calculatePlayerSize;
@@ -0,0 +1,5 @@
1
+ export declare type CancellablePromise = {
2
+ promise: Promise<unknown>;
3
+ cancel: () => void;
4
+ };
5
+ export declare const cancellablePromise: (promise: Promise<unknown>) => CancellablePromise;
@@ -0,0 +1,26 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.cancellablePromise = void 0;
4
+ const cancellablePromise = (promise) => {
5
+ let isCanceled = false;
6
+ const wrappedPromise = new Promise((resolve, reject) => {
7
+ promise
8
+ .then((value) => {
9
+ if (isCanceled) {
10
+ reject({ isCanceled, value });
11
+ return;
12
+ }
13
+ resolve(value);
14
+ })
15
+ .catch((error) => {
16
+ reject({ isCanceled, error });
17
+ });
18
+ });
19
+ return {
20
+ promise: wrappedPromise,
21
+ cancel: () => {
22
+ isCanceled = true;
23
+ },
24
+ };
25
+ };
26
+ exports.cancellablePromise = cancellablePromise;
@@ -0,0 +1 @@
1
+ export declare const delay: (n: number) => Promise<unknown>;
@@ -0,0 +1,6 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.delay = void 0;
4
+ /* eslint-disable no-promise-executor-return */
5
+ const delay = (n) => new Promise((resolve) => setTimeout(resolve, n));
6
+ exports.delay = delay;
@@ -0,0 +1 @@
1
+ export declare const IS_NODE: boolean;
@@ -0,0 +1,4 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.IS_NODE = void 0;
4
+ exports.IS_NODE = typeof document === 'undefined';
@@ -0,0 +1,8 @@
1
+ export declare type Translation = {
2
+ x: number;
3
+ y: number;
4
+ };
5
+ export declare type PreviewSize = {
6
+ size: number | 'auto';
7
+ translation: Translation;
8
+ };
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
@@ -0,0 +1,5 @@
1
+ export declare type PropsIfHasProps<Props> = {} extends Props ? {
2
+ inputProps?: Props;
3
+ } : {
4
+ inputProps: Props;
5
+ };
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
@@ -0,0 +1,7 @@
1
+ import type { CancellablePromise } from './cancellable-promise';
2
+ declare const useCancellablePromises: () => {
3
+ appendPendingPromise: (promise: CancellablePromise) => void;
4
+ removePendingPromise: (promise: CancellablePromise) => void;
5
+ clearPendingPromises: () => void[];
6
+ };
7
+ export { useCancellablePromises };
@@ -0,0 +1,21 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.useCancellablePromises = void 0;
4
+ const react_1 = require("react");
5
+ const useCancellablePromises = () => {
6
+ const pendingPromises = (0, react_1.useRef)([]);
7
+ const appendPendingPromise = (0, react_1.useCallback)((promise) => {
8
+ pendingPromises.current = [...pendingPromises.current, promise];
9
+ }, []);
10
+ const removePendingPromise = (0, react_1.useCallback)((promise) => {
11
+ pendingPromises.current = pendingPromises.current.filter((p) => p !== promise);
12
+ }, []);
13
+ const clearPendingPromises = (0, react_1.useCallback)(() => pendingPromises.current.map((p) => p.cancel()), []);
14
+ const api = (0, react_1.useMemo)(() => ({
15
+ appendPendingPromise,
16
+ removePendingPromise,
17
+ clearPendingPromises,
18
+ }), [appendPendingPromise, clearPendingPromises, removePendingPromise]);
19
+ return api;
20
+ };
21
+ exports.useCancellablePromises = useCancellablePromises;
@@ -0,0 +1,3 @@
1
+ import type { SyntheticEvent } from 'react';
2
+ declare const useClickPreventionOnDoubleClick: (onClick: (e: SyntheticEvent) => void, onDoubleClick: () => void, doubleClickToFullscreen: boolean) => [(e: SyntheticEvent) => void, () => void];
3
+ export { useClickPreventionOnDoubleClick };
@@ -0,0 +1,45 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.useClickPreventionOnDoubleClick = void 0;
4
+ const react_1 = require("react");
5
+ const cancellable_promise_1 = require("./cancellable-promise");
6
+ const delay_1 = require("./delay");
7
+ const use_cancellable_promises_1 = require("./use-cancellable-promises");
8
+ const useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFullscreen) => {
9
+ const api = (0, use_cancellable_promises_1.useCancellablePromises)();
10
+ const handleClick = (0, react_1.useCallback)(async (e) => {
11
+ api.clearPendingPromises();
12
+ const waitForClick = (0, cancellable_promise_1.cancellablePromise)((0, delay_1.delay)(200));
13
+ api.appendPendingPromise(waitForClick);
14
+ try {
15
+ await waitForClick.promise;
16
+ api.removePendingPromise(waitForClick);
17
+ onClick(e);
18
+ }
19
+ catch (errorInfo) {
20
+ const info = errorInfo;
21
+ api.removePendingPromise(waitForClick);
22
+ if (!info.isCanceled) {
23
+ throw info.error;
24
+ }
25
+ }
26
+ }, [api, onClick]);
27
+ const handleDoubleClick = (0, react_1.useCallback)(() => {
28
+ api.clearPendingPromises();
29
+ onDoubleClick();
30
+ }, [api, onDoubleClick]);
31
+ const returnValue = (0, react_1.useMemo)(() => {
32
+ if (!doubleClickToFullscreen) {
33
+ return [onClick, onDoubleClick];
34
+ }
35
+ return [handleClick, handleDoubleClick];
36
+ }, [
37
+ doubleClickToFullscreen,
38
+ handleClick,
39
+ handleDoubleClick,
40
+ onClick,
41
+ onDoubleClick,
42
+ ]);
43
+ return returnValue;
44
+ };
45
+ exports.useClickPreventionOnDoubleClick = useClickPreventionOnDoubleClick;
@@ -0,0 +1,16 @@
1
+ export declare type Size = {
2
+ width: number;
3
+ height: number;
4
+ left: number;
5
+ top: number;
6
+ windowSize: {
7
+ width: number;
8
+ height: number;
9
+ };
10
+ refresh: () => void;
11
+ };
12
+ export declare const updateAllElementsSizes: () => void;
13
+ export declare const useElementSize: (ref: React.RefObject<HTMLElement>, options: {
14
+ triggerOnWindowResize: boolean;
15
+ shouldApplyCssTransforms: boolean;
16
+ }) => Size | null;
@@ -0,0 +1,98 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.useElementSize = exports.updateAllElementsSizes = void 0;
4
+ const react_1 = require("react");
5
+ let elementSizeHooks = [];
6
+ const updateAllElementsSizes = () => {
7
+ for (const listener of elementSizeHooks) {
8
+ listener();
9
+ }
10
+ };
11
+ exports.updateAllElementsSizes = updateAllElementsSizes;
12
+ const useElementSize = (ref, options) => {
13
+ const [size, setSize] = (0, react_1.useState)(null);
14
+ const observer = (0, react_1.useMemo)(() => {
15
+ if (typeof ResizeObserver === 'undefined') {
16
+ return null;
17
+ }
18
+ return new ResizeObserver((entries) => {
19
+ // The contentRect returns the width without any `scale()`'s being applied. The height is wrong
20
+ const { contentRect } = entries[0];
21
+ // The clientRect returns the size with `scale()` being applied.
22
+ const newSize = entries[0].target.getClientRects();
23
+ if (!newSize || !newSize[0]) {
24
+ setSize(null);
25
+ return;
26
+ }
27
+ const probableCssParentScale = newSize[0].width / contentRect.width;
28
+ const width = options.shouldApplyCssTransforms
29
+ ? newSize[0].width
30
+ : newSize[0].width * (1 / probableCssParentScale);
31
+ const height = options.shouldApplyCssTransforms
32
+ ? newSize[0].height
33
+ : newSize[0].height * (1 / probableCssParentScale);
34
+ setSize({
35
+ width,
36
+ height,
37
+ left: newSize[0].x,
38
+ top: newSize[0].y,
39
+ windowSize: {
40
+ height: window.innerHeight,
41
+ width: window.innerWidth,
42
+ },
43
+ });
44
+ });
45
+ }, [options.shouldApplyCssTransforms]);
46
+ const updateSize = (0, react_1.useCallback)(() => {
47
+ if (!ref.current) {
48
+ return;
49
+ }
50
+ const rect = ref.current.getClientRects();
51
+ if (!rect[0]) {
52
+ setSize(null);
53
+ return;
54
+ }
55
+ setSize({
56
+ width: rect[0].width,
57
+ height: rect[0].height,
58
+ left: rect[0].x,
59
+ top: rect[0].y,
60
+ windowSize: {
61
+ height: window.innerHeight,
62
+ width: window.innerWidth,
63
+ },
64
+ });
65
+ }, [ref]);
66
+ (0, react_1.useEffect)(() => {
67
+ if (!observer) {
68
+ return;
69
+ }
70
+ updateSize();
71
+ const { current } = ref;
72
+ if (ref.current) {
73
+ observer.observe(ref.current);
74
+ }
75
+ return () => {
76
+ if (current) {
77
+ observer.unobserve(current);
78
+ }
79
+ };
80
+ }, [observer, ref, updateSize]);
81
+ (0, react_1.useEffect)(() => {
82
+ if (!options.triggerOnWindowResize) {
83
+ return;
84
+ }
85
+ window.addEventListener('resize', updateSize);
86
+ return () => {
87
+ window.removeEventListener('resize', updateSize);
88
+ };
89
+ }, [options.triggerOnWindowResize, updateSize]);
90
+ (0, react_1.useEffect)(() => {
91
+ elementSizeHooks.push(updateSize);
92
+ return () => {
93
+ elementSizeHooks = elementSizeHooks.filter((e) => e !== updateSize);
94
+ };
95
+ }, [updateSize]);
96
+ return size ? { ...size, refresh: updateSize } : null;
97
+ };
98
+ exports.useElementSize = useElementSize;
@@ -0,0 +1,6 @@
1
+ export declare const validateSingleFrame: (frame: unknown, variableName: string) => number | null;
2
+ export declare const validateInOutFrames: ({ inFrame, durationInFrames, outFrame, }: {
3
+ inFrame: unknown;
4
+ outFrame: unknown;
5
+ durationInFrames: number;
6
+ }) => void;
@@ -0,0 +1,54 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.validateInOutFrames = exports.validateSingleFrame = void 0;
4
+ const validateSingleFrame = (frame, variableName) => {
5
+ if (typeof frame === 'undefined' || frame === null) {
6
+ return frame !== null && frame !== void 0 ? frame : null;
7
+ }
8
+ if (typeof frame !== 'number') {
9
+ throw new TypeError(`"${variableName}" must be a number, but is ${JSON.stringify(frame)}`);
10
+ }
11
+ if (Number.isNaN(frame)) {
12
+ throw new TypeError(`"${variableName}" must not be NaN, but is ${JSON.stringify(frame)}`);
13
+ }
14
+ if (!Number.isFinite(frame)) {
15
+ throw new TypeError(`"${variableName}" must be finite, but is ${JSON.stringify(frame)}`);
16
+ }
17
+ if (frame % 1 !== 0) {
18
+ throw new TypeError(`"${variableName}" must be an integer, but is ${JSON.stringify(frame)}`);
19
+ }
20
+ return frame;
21
+ };
22
+ exports.validateSingleFrame = validateSingleFrame;
23
+ const validateInOutFrames = ({ inFrame, durationInFrames, outFrame, }) => {
24
+ const validatedInFrame = (0, exports.validateSingleFrame)(inFrame, 'inFrame');
25
+ const validatedOutFrame = (0, exports.validateSingleFrame)(outFrame, 'outFrame');
26
+ if (validatedInFrame === null && validatedOutFrame === null) {
27
+ return;
28
+ }
29
+ // Must not be over the duration
30
+ if (validatedInFrame !== null && validatedInFrame > durationInFrames - 1) {
31
+ throw new Error('inFrame must be less than (durationInFrames - 1), but is ' +
32
+ validatedInFrame);
33
+ }
34
+ if (validatedOutFrame !== null && validatedOutFrame > durationInFrames - 1) {
35
+ throw new Error('outFrame must be less than (durationInFrames - 1), but is ' +
36
+ validatedOutFrame);
37
+ }
38
+ // Must not be under 0
39
+ if (validatedInFrame !== null && validatedInFrame < 0) {
40
+ throw new Error('inFrame must be greater than 0, but is ' + validatedInFrame);
41
+ }
42
+ if (validatedOutFrame !== null && validatedOutFrame <= 0) {
43
+ throw new Error(`outFrame must be greater than 0, but is ${validatedOutFrame}. If you want to render a single frame, use <Thumbnail /> instead.`);
44
+ }
45
+ if (validatedOutFrame !== null &&
46
+ validatedInFrame !== null &&
47
+ validatedOutFrame <= validatedInFrame) {
48
+ throw new Error('outFrame must be greater than inFrame, but is ' +
49
+ validatedOutFrame +
50
+ ' <= ' +
51
+ validatedInFrame);
52
+ }
53
+ };
54
+ exports.validateInOutFrames = validateInOutFrames;
@@ -0,0 +1,4 @@
1
+ export declare const validateInitialFrame: ({ initialFrame, durationInFrames, }: {
2
+ initialFrame: unknown;
3
+ durationInFrames: unknown;
4
+ }) => void;
@@ -0,0 +1,27 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.validateInitialFrame = void 0;
4
+ const validateInitialFrame = ({ initialFrame, durationInFrames, }) => {
5
+ if (typeof durationInFrames !== 'number') {
6
+ throw new Error(`\`durationInFrames\` must be a number, but is ${JSON.stringify(durationInFrames)}`);
7
+ }
8
+ if (typeof initialFrame === 'undefined') {
9
+ return;
10
+ }
11
+ if (typeof initialFrame !== 'number') {
12
+ throw new Error(`\`initialFrame\` must be a number, but is ${JSON.stringify(initialFrame)}`);
13
+ }
14
+ if (Number.isNaN(initialFrame)) {
15
+ throw new Error(`\`initialFrame\` must be a number, but is NaN`);
16
+ }
17
+ if (!Number.isFinite(initialFrame)) {
18
+ throw new Error(`\`initialFrame\` must be a number, but is Infinity`);
19
+ }
20
+ if (initialFrame % 1 !== 0) {
21
+ throw new Error(`\`initialFrame\` must be an integer, but is ${JSON.stringify(initialFrame)}`);
22
+ }
23
+ if (initialFrame > durationInFrames - 1) {
24
+ throw new Error(`\`initialFrame\` must be less or equal than \`durationInFrames - 1\`, but is ${JSON.stringify(initialFrame)}`);
25
+ }
26
+ };
27
+ exports.validateInitialFrame = validateInitialFrame;
@@ -0,0 +1 @@
1
+ export declare const validatePlaybackRate: (playbackRate: number | undefined) => void;
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.validatePlaybackRate = void 0;
4
+ const validatePlaybackRate = (playbackRate) => {
5
+ if (playbackRate === undefined) {
6
+ return;
7
+ }
8
+ if (playbackRate > 4) {
9
+ throw new Error(`The highest possible playback rate is 4. You passed: ${playbackRate}`);
10
+ }
11
+ if (playbackRate < -4) {
12
+ throw new Error(`The lowest possible playback rate is -4. You passed: ${playbackRate}`);
13
+ }
14
+ if (playbackRate === 0) {
15
+ throw new Error(`A playback rate of 0 is not supported.`);
16
+ }
17
+ };
18
+ exports.validatePlaybackRate = validatePlaybackRate;
@@ -0,0 +1,2 @@
1
+ export declare const persistVolume: (volume: number) => void;
2
+ export declare const getPreferredVolume: () => number;