@remotion/player 4.0.0-alpha.4 → 4.0.0-alpha11

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 (216) hide show
  1. package/LICENSE.md +8 -8
  2. package/README.md +1 -1
  3. package/dist/cjs/MediaVolumeSlider.d.ts +5 -0
  4. package/dist/cjs/MediaVolumeSlider.js +142 -0
  5. package/dist/cjs/PlaybackrateControl.d.ts +5 -0
  6. package/dist/cjs/PlaybackrateControl.js +136 -0
  7. package/dist/cjs/Player.d.ts +52 -0
  8. package/dist/{Player.js → cjs/Player.js} +53 -83
  9. package/dist/{PlayerControls.d.ts → cjs/PlayerControls.d.ts} +18 -2
  10. package/dist/cjs/PlayerControls.js +171 -0
  11. package/dist/{PlayerSeekBar.d.ts → cjs/PlayerSeekBar.d.ts} +4 -0
  12. package/dist/{PlayerSeekBar.js → cjs/PlayerSeekBar.js} +41 -17
  13. package/dist/cjs/PlayerUI.d.ts +40 -0
  14. package/dist/{PlayerUI.js → cjs/PlayerUI.js} +115 -88
  15. package/dist/cjs/SharedPlayerContext.d.ts +15 -0
  16. package/dist/cjs/SharedPlayerContext.js +75 -0
  17. package/dist/cjs/Thumbnail.d.ts +24 -0
  18. package/dist/cjs/Thumbnail.js +46 -0
  19. package/dist/cjs/ThumbnailUI.d.ts +11 -0
  20. package/dist/cjs/ThumbnailUI.js +107 -0
  21. package/dist/{calculate-next-frame.d.ts → cjs/calculate-next-frame.d.ts} +0 -0
  22. package/dist/{calculate-next-frame.js → cjs/calculate-next-frame.js} +0 -0
  23. package/dist/cjs/calculate-scale.d.ts +39 -0
  24. package/dist/cjs/calculate-scale.js +85 -0
  25. package/dist/cjs/emitter-context.d.ts +4 -0
  26. package/dist/{emitter-context.js → cjs/emitter-context.js} +2 -1
  27. package/dist/{error-boundary.d.ts → cjs/error-boundary.d.ts} +0 -0
  28. package/dist/{error-boundary.js → cjs/error-boundary.js} +0 -0
  29. package/dist/cjs/event-emitter.d.ts +81 -0
  30. package/dist/cjs/event-emitter.js +103 -0
  31. package/dist/{format-time.d.ts → cjs/format-time.d.ts} +0 -0
  32. package/dist/{format-time.js → cjs/format-time.js} +0 -0
  33. package/dist/{icons.d.ts → cjs/icons.d.ts} +5 -1
  34. package/dist/{icons.js → cjs/icons.js} +11 -7
  35. package/dist/{index.d.ts → cjs/index.d.ts} +22 -12
  36. package/dist/cjs/index.js +25 -0
  37. package/dist/cjs/is-backgrounded.d.ts +2 -0
  38. package/dist/cjs/is-backgrounded.js +24 -0
  39. package/dist/{player-css-classname.d.ts → cjs/player-css-classname.d.ts} +0 -1
  40. package/dist/cjs/player-css-classname.js +4 -0
  41. package/dist/{player-methods.d.ts → cjs/player-methods.d.ts} +8 -4
  42. package/dist/{player-methods.js → cjs/player-methods.js} +0 -0
  43. package/dist/{test → cjs/test}/index.test.d.ts +0 -0
  44. package/dist/cjs/test/index.test.js +9 -0
  45. package/dist/{test → cjs/test}/test-utils.d.ts +0 -0
  46. package/dist/{test → cjs/test}/test-utils.js +0 -0
  47. package/dist/{test/validate-prop.test.d.ts → cjs/test/validate-in-out-frames.test.d.ts} +0 -0
  48. package/dist/cjs/test/validate-in-out-frames.test.js +56 -0
  49. package/dist/cjs/test/validate-prop.test.d.ts +1 -0
  50. package/dist/cjs/test/validate-prop.test.js +131 -0
  51. package/dist/{use-hover-state.d.ts → cjs/use-hover-state.d.ts} +0 -0
  52. package/dist/{use-hover-state.js → cjs/use-hover-state.js} +0 -0
  53. package/dist/{use-playback.d.ts → cjs/use-playback.d.ts} +0 -0
  54. package/dist/{use-playback.js → cjs/use-playback.js} +49 -9
  55. package/dist/{use-player.d.ts → cjs/use-player.d.ts} +3 -1
  56. package/dist/{use-player.js → cjs/use-player.js} +15 -8
  57. package/dist/cjs/use-thumbnail.d.ts +6 -0
  58. package/dist/cjs/use-thumbnail.js +18 -0
  59. package/dist/cjs/use-video-controls-resize.d.ts +11 -0
  60. package/dist/cjs/use-video-controls-resize.js +39 -0
  61. package/dist/{utils → cjs/utils}/calculate-player-size.d.ts +1 -1
  62. package/dist/{utils → cjs/utils}/calculate-player-size.js +9 -10
  63. package/dist/{utils → cjs/utils}/cancellable-promise.d.ts +0 -0
  64. package/dist/{utils → cjs/utils}/cancellable-promise.js +0 -0
  65. package/dist/{utils → cjs/utils}/delay.d.ts +0 -0
  66. package/dist/{utils → cjs/utils}/delay.js +0 -0
  67. package/dist/{utils → cjs/utils}/is-node.d.ts +0 -0
  68. package/dist/{utils → cjs/utils}/is-node.js +0 -0
  69. package/dist/cjs/utils/preview-size.d.ts +8 -0
  70. package/dist/{utils → cjs/utils}/preview-size.js +0 -0
  71. package/dist/cjs/utils/props-if-has-props.d.ts +10 -0
  72. package/dist/cjs/utils/props-if-has-props.js +2 -0
  73. package/dist/{utils → cjs/utils}/use-cancellable-promises.d.ts +1 -1
  74. package/dist/{utils → cjs/utils}/use-cancellable-promises.js +0 -0
  75. package/dist/{utils → cjs/utils}/use-click-prevention-on-double-click.d.ts +0 -0
  76. package/dist/{utils → cjs/utils}/use-click-prevention-on-double-click.js +5 -5
  77. package/dist/cjs/utils/use-component-visible.d.ts +6 -0
  78. package/dist/cjs/utils/use-component-visible.js +21 -0
  79. package/dist/{utils → cjs/utils}/use-element-size.d.ts +1 -0
  80. package/dist/{utils → cjs/utils}/use-element-size.js +24 -12
  81. package/dist/cjs/utils/validate-in-out-frame.d.ts +6 -0
  82. package/dist/cjs/utils/validate-in-out-frame.js +54 -0
  83. package/dist/cjs/utils/validate-initial-frame.d.ts +4 -0
  84. package/dist/cjs/utils/validate-initial-frame.js +27 -0
  85. package/dist/{utils → cjs/utils}/validate-playbackrate.d.ts +0 -0
  86. package/dist/{utils → cjs/utils}/validate-playbackrate.js +0 -0
  87. package/dist/{volume-persistance.d.ts → cjs/volume-persistance.d.ts} +0 -0
  88. package/dist/{volume-persistance.js → cjs/volume-persistance.js} +0 -0
  89. package/dist/esm/MediaVolumeSlider.d.ts +5 -0
  90. package/dist/esm/PlaybackrateControl.d.ts +5 -0
  91. package/dist/esm/Player.d.ts +52 -0
  92. package/dist/esm/PlayerControls.d.ts +41 -0
  93. package/dist/esm/PlayerSeekBar.d.ts +8 -0
  94. package/dist/esm/PlayerUI.d.ts +40 -0
  95. package/dist/esm/SharedPlayerContext.d.ts +15 -0
  96. package/dist/esm/Thumbnail.d.ts +24 -0
  97. package/dist/esm/ThumbnailUI.d.ts +11 -0
  98. package/dist/esm/calculate-next-frame.d.ts +14 -0
  99. package/dist/esm/calculate-scale.d.ts +39 -0
  100. package/dist/esm/emitter-context.d.ts +4 -0
  101. package/dist/esm/error-boundary.d.ts +19 -0
  102. package/dist/esm/event-emitter.d.ts +81 -0
  103. package/dist/esm/format-time.d.ts +1 -0
  104. package/dist/esm/icons.d.ts +13 -0
  105. package/dist/esm/index.d.ts +61 -0
  106. package/dist/esm/index.mjs +2112 -0
  107. package/dist/esm/is-backgrounded.d.ts +2 -0
  108. package/dist/esm/player-css-classname.d.ts +1 -0
  109. package/dist/esm/player-methods.d.ts +24 -0
  110. package/dist/esm/test/index.test.d.ts +1 -0
  111. package/dist/esm/test/test-utils.d.ts +6 -0
  112. package/dist/esm/test/validate-in-out-frames.test.d.ts +1 -0
  113. package/dist/esm/test/validate-prop.test.d.ts +1 -0
  114. package/dist/esm/use-hover-state.d.ts +1 -0
  115. package/dist/esm/use-playback.d.ts +7 -0
  116. package/dist/esm/use-player.d.ts +19 -0
  117. package/dist/esm/use-thumbnail.d.ts +6 -0
  118. package/dist/esm/use-video-controls-resize.d.ts +11 -0
  119. package/dist/esm/utils/calculate-player-size.d.ts +9 -0
  120. package/dist/esm/utils/cancellable-promise.d.ts +5 -0
  121. package/dist/esm/utils/delay.d.ts +1 -0
  122. package/dist/esm/utils/is-node.d.ts +1 -0
  123. package/dist/esm/utils/preview-size.d.ts +8 -0
  124. package/dist/esm/utils/props-if-has-props.d.ts +10 -0
  125. package/dist/esm/utils/use-cancellable-promises.d.ts +7 -0
  126. package/dist/esm/utils/use-click-prevention-on-double-click.d.ts +3 -0
  127. package/dist/esm/utils/use-component-visible.d.ts +5 -0
  128. package/dist/esm/utils/use-element-size.d.ts +16 -0
  129. package/dist/esm/utils/validate-in-out-frame.d.ts +6 -0
  130. package/dist/esm/utils/validate-initial-frame.d.ts +4 -0
  131. package/dist/esm/utils/validate-playbackrate.d.ts +1 -0
  132. package/dist/esm/volume-persistance.d.ts +2 -0
  133. package/dist/tsconfig-esm.tsbuildinfo +1 -0
  134. package/dist/tsconfig.tsbuildinfo +1 -0
  135. package/package.json +80 -66
  136. package/dist/MediaVolumeSlider.d.ts +0 -2
  137. package/dist/MediaVolumeSlider.d.ts.map +0 -1
  138. package/dist/MediaVolumeSlider.js +0 -93
  139. package/dist/MediaVolumeSlider.js.map +0 -1
  140. package/dist/Player.d.ts +0 -41
  141. package/dist/Player.d.ts.map +0 -1
  142. package/dist/Player.js.map +0 -1
  143. package/dist/PlayerControls.d.ts.map +0 -1
  144. package/dist/PlayerControls.js +0 -95
  145. package/dist/PlayerControls.js.map +0 -1
  146. package/dist/PlayerSeekBar.d.ts.map +0 -1
  147. package/dist/PlayerSeekBar.js.map +0 -1
  148. package/dist/PlayerUI.d.ts +0 -31
  149. package/dist/PlayerUI.d.ts.map +0 -1
  150. package/dist/PlayerUI.js.map +0 -1
  151. package/dist/calculate-next-frame.d.ts.map +0 -1
  152. package/dist/calculate-next-frame.js.map +0 -1
  153. package/dist/calculate-scale.d.ts +0 -14
  154. package/dist/calculate-scale.d.ts.map +0 -1
  155. package/dist/calculate-scale.js +0 -24
  156. package/dist/calculate-scale.js.map +0 -1
  157. package/dist/emitter-context.d.ts +0 -3
  158. package/dist/emitter-context.d.ts.map +0 -1
  159. package/dist/emitter-context.js.map +0 -1
  160. package/dist/error-boundary.d.ts.map +0 -1
  161. package/dist/error-boundary.js.map +0 -1
  162. package/dist/event-emitter.d.ts +0 -42
  163. package/dist/event-emitter.d.ts.map +0 -1
  164. package/dist/event-emitter.js +0 -55
  165. package/dist/event-emitter.js.map +0 -1
  166. package/dist/format-time.d.ts.map +0 -1
  167. package/dist/format-time.js.map +0 -1
  168. package/dist/icons.d.ts.map +0 -1
  169. package/dist/icons.js.map +0 -1
  170. package/dist/index.d.ts.map +0 -1
  171. package/dist/index.js +0 -22
  172. package/dist/index.js.map +0 -1
  173. package/dist/player-css-classname.d.ts.map +0 -1
  174. package/dist/player-css-classname.js +0 -5
  175. package/dist/player-css-classname.js.map +0 -1
  176. package/dist/player-methods.d.ts.map +0 -1
  177. package/dist/player-methods.js.map +0 -1
  178. package/dist/test/index.test.d.ts.map +0 -1
  179. package/dist/test/index.test.js +0 -8
  180. package/dist/test/index.test.js.map +0 -1
  181. package/dist/test/test-utils.d.ts.map +0 -1
  182. package/dist/test/test-utils.js.map +0 -1
  183. package/dist/test/validate-prop.test.d.ts.map +0 -1
  184. package/dist/test/validate-prop.test.js +0 -130
  185. package/dist/test/validate-prop.test.js.map +0 -1
  186. package/dist/use-hover-state.d.ts.map +0 -1
  187. package/dist/use-hover-state.js.map +0 -1
  188. package/dist/use-playback.d.ts.map +0 -1
  189. package/dist/use-playback.js.map +0 -1
  190. package/dist/use-player.d.ts.map +0 -1
  191. package/dist/use-player.js.map +0 -1
  192. package/dist/utils/browser-supports-fullscreen.d.ts +0 -12
  193. package/dist/utils/browser-supports-fullscreen.d.ts.map +0 -1
  194. package/dist/utils/browser-supports-fullscreen.js +0 -6
  195. package/dist/utils/browser-supports-fullscreen.js.map +0 -1
  196. package/dist/utils/calculate-player-size.d.ts.map +0 -1
  197. package/dist/utils/calculate-player-size.js.map +0 -1
  198. package/dist/utils/cancellable-promise.d.ts.map +0 -1
  199. package/dist/utils/cancellable-promise.js.map +0 -1
  200. package/dist/utils/delay.d.ts.map +0 -1
  201. package/dist/utils/delay.js.map +0 -1
  202. package/dist/utils/is-node.d.ts.map +0 -1
  203. package/dist/utils/is-node.js.map +0 -1
  204. package/dist/utils/preview-size.d.ts +0 -1
  205. package/dist/utils/preview-size.d.ts.map +0 -1
  206. package/dist/utils/preview-size.js.map +0 -1
  207. package/dist/utils/use-cancellable-promises.d.ts.map +0 -1
  208. package/dist/utils/use-cancellable-promises.js.map +0 -1
  209. package/dist/utils/use-click-prevention-on-double-click.d.ts.map +0 -1
  210. package/dist/utils/use-click-prevention-on-double-click.js.map +0 -1
  211. package/dist/utils/use-element-size.d.ts.map +0 -1
  212. package/dist/utils/use-element-size.js.map +0 -1
  213. package/dist/utils/validate-playbackrate.d.ts.map +0 -1
  214. package/dist/utils/validate-playbackrate.js.map +0 -1
  215. package/dist/volume-persistance.d.ts.map +0 -1
  216. package/dist/volume-persistance.js.map +0 -1
@@ -0,0 +1,81 @@
1
+ declare type SeekPayload = {
2
+ frame: number;
3
+ };
4
+ declare type ErrorPayload = {
5
+ error: Error;
6
+ };
7
+ declare type TimeUpdateEventPayload = {
8
+ frame: number;
9
+ };
10
+ declare type FrameUpdateEventPayload = {
11
+ frame: number;
12
+ };
13
+ declare type RateChangeEventPayload = {
14
+ playbackRate: number;
15
+ };
16
+ declare type ScaleChangeEventPayload = {
17
+ scale: number;
18
+ };
19
+ declare type VolumeChangeEventPayload = {
20
+ volume: number;
21
+ };
22
+ declare type FullscreenChangeEventPayload = {
23
+ isFullscreen: boolean;
24
+ };
25
+ declare type MuteChangeEventPayload = {
26
+ isMuted: boolean;
27
+ };
28
+ declare type PlayerStateEventMap = {
29
+ seeked: SeekPayload;
30
+ pause: undefined;
31
+ play: undefined;
32
+ ratechange: RateChangeEventPayload;
33
+ scalechange: ScaleChangeEventPayload;
34
+ volumechange: VolumeChangeEventPayload;
35
+ ended: undefined;
36
+ error: ErrorPayload;
37
+ timeupdate: TimeUpdateEventPayload;
38
+ frameupdate: FrameUpdateEventPayload;
39
+ fullscreenchange: FullscreenChangeEventPayload;
40
+ mutechange: MuteChangeEventPayload;
41
+ };
42
+ declare type ThumbnailStateEventMap = {
43
+ error: ErrorPayload;
44
+ };
45
+ export declare type PlayerEventTypes = keyof PlayerStateEventMap;
46
+ export declare type ThumbnailEventTypes = keyof ThumbnailStateEventMap;
47
+ export declare type CallbackListener<T extends PlayerEventTypes> = (data: {
48
+ detail: PlayerStateEventMap[T];
49
+ }) => void;
50
+ declare type PlayerListeners = {
51
+ [EventType in PlayerEventTypes]: CallbackListener<EventType>[];
52
+ };
53
+ declare type ThumbnailListeners = {
54
+ [EventType in ThumbnailEventTypes]: CallbackListener<EventType>[];
55
+ };
56
+ export declare class PlayerEmitter {
57
+ listeners: PlayerListeners;
58
+ addEventListener<Q extends PlayerEventTypes>(name: Q, callback: CallbackListener<Q>): void;
59
+ removeEventListener<Q extends PlayerEventTypes>(name: Q, callback: CallbackListener<Q>): void;
60
+ private dispatchEvent;
61
+ dispatchSeek(frame: number): void;
62
+ dispatchVolumeChange(volume: number): void;
63
+ dispatchPause(): void;
64
+ dispatchPlay(): void;
65
+ dispatchEnded(): void;
66
+ dispatchRateChange(playbackRate: number): void;
67
+ dispatchScaleChange(scale: number): void;
68
+ dispatchError(error: Error): void;
69
+ dispatchTimeUpdate(event: TimeUpdateEventPayload): void;
70
+ dispatchFrameUpdate(event: FrameUpdateEventPayload): void;
71
+ dispatchFullscreenChange(event: FullscreenChangeEventPayload): void;
72
+ dispatchMuteChange(event: MuteChangeEventPayload): void;
73
+ }
74
+ export declare class ThumbnailEmitter {
75
+ listeners: ThumbnailListeners;
76
+ addEventListener<Q extends ThumbnailEventTypes>(name: Q, callback: CallbackListener<Q>): void;
77
+ removeEventListener<Q extends ThumbnailEventTypes>(name: Q, callback: CallbackListener<Q>): void;
78
+ private dispatchEvent;
79
+ dispatchError(error: Error): void;
80
+ }
81
+ export {};
@@ -0,0 +1 @@
1
+ export declare const formatTime: (timeInSeconds: number) => string;
@@ -0,0 +1,13 @@
1
+ import React from 'react';
2
+ export declare const ICON_SIZE = 25;
3
+ export declare const fullscreenIconSize = 16;
4
+ export declare const PlayIcon: React.FC;
5
+ export declare const PauseIcon: React.FC;
6
+ export declare const FullscreenIcon: React.FC<{
7
+ isFullscreen: boolean;
8
+ }>;
9
+ export declare const VolumeOffIcon: React.FC;
10
+ export declare const VolumeOnIcon: React.FC;
11
+ export declare const SettingsIcon: React.FC<{
12
+ iconSize?: number;
13
+ }>;
@@ -0,0 +1,61 @@
1
+ /// <reference types="react" />
2
+ import type { CallbackListener, PlayerEventTypes } from './event-emitter.js';
3
+ import { PlayerEmitter } from './event-emitter.js';
4
+ export { PlayerMethods, PlayerRef, ThumbnailMethods, ThumbnailRef, } from './player-methods.js';
5
+ export { Player, PlayerProps } from './Player.js';
6
+ export type { RenderFullscreenButton, RenderPlayPauseButton, } from './PlayerControls.js';
7
+ export type { ErrorFallback, RenderLoading, RenderPoster } from './PlayerUI.js';
8
+ export { Thumbnail } from './Thumbnail.js';
9
+ export { PreviewSize, Translation } from './utils/preview-size.js';
10
+ export { Size } from './utils/use-element-size.js';
11
+ export type { CallbackListener, PlayerEventTypes as EventTypes };
12
+ export declare const PlayerInternals: {
13
+ PlayerEventEmitterContext: import("react").Context<PlayerEmitter | undefined>;
14
+ PlayerEmitter: typeof PlayerEmitter;
15
+ usePlayer: () => {
16
+ frameBack: (frames: number) => void;
17
+ frameForward: (frames: number) => void;
18
+ isLastFrame: boolean;
19
+ isFirstFrame: boolean;
20
+ emitter: PlayerEmitter;
21
+ playing: boolean;
22
+ play: (e?: import("react").SyntheticEvent<Element, Event> | undefined) => void;
23
+ pause: () => void;
24
+ pauseAndReturnToPlayStart: () => void;
25
+ seek: (newFrame: number) => void;
26
+ getCurrentFrame: () => number;
27
+ isPlaying: () => boolean;
28
+ hasPlayed: boolean;
29
+ };
30
+ usePlayback: ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, }: {
31
+ loop: boolean;
32
+ playbackRate: number;
33
+ moveToBeginningWhenEnded: boolean;
34
+ inFrame: number | null;
35
+ outFrame: number | null;
36
+ }) => void;
37
+ useElementSize: (ref: import("react").RefObject<HTMLElement>, options: {
38
+ triggerOnWindowResize: boolean;
39
+ shouldApplyCssTransforms: boolean;
40
+ }) => import("./utils/use-element-size.js").Size | null;
41
+ calculateCanvasTransformation: ({ previewSize, compositionWidth, compositionHeight, canvasSize, }: {
42
+ previewSize: number | "auto";
43
+ compositionWidth: number;
44
+ compositionHeight: number;
45
+ canvasSize: import("./utils/use-element-size.js").Size;
46
+ }) => {
47
+ centerX: number;
48
+ centerY: number;
49
+ xCorrection: number;
50
+ yCorrection: number;
51
+ scale: number;
52
+ };
53
+ useHoverState: (ref: import("react").RefObject<HTMLDivElement>) => boolean;
54
+ updateAllElementsSizes: () => void;
55
+ calculateScale: ({ canvasSize, compositionHeight, compositionWidth, previewSize, }: {
56
+ previewSize: number | "auto";
57
+ compositionWidth: number;
58
+ compositionHeight: number;
59
+ canvasSize: import("./utils/use-element-size.js").Size;
60
+ }) => number;
61
+ };