@hanifhan1f/vidstack-react 1.12.33 → 1.12.35

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 (188) hide show
  1. package/dev/chunks/{vidstack-3rdEWplD.js → vidstack-B-DU-_xu.js} +55 -3
  2. package/dev/chunks/{vidstack-CniPzPQc.js → vidstack-C3VHrHPf.js} +155 -15
  3. package/dev/chunks/{vidstack-BOPSNTgH.js → vidstack-CjLj3q5w.js} +5 -57
  4. package/dev/chunks/{vidstack-BNwnoM-l.js → vidstack-DpWioszb.js} +1 -1
  5. package/dev/chunks/{vidstack-S_S6XDnL.js → vidstack-t48GJbb5.js} +1 -1
  6. package/dev/player/vidstack-default-components.js +4 -4
  7. package/dev/player/vidstack-default-layout.js +4 -4
  8. package/dev/player/vidstack-plyr-layout.js +3 -3
  9. package/dev/vidstack.js +5 -5
  10. package/package.json +1 -1
  11. package/player/layouts/default.d.ts +9 -1
  12. package/prod/chunks/{vidstack-BlPINAXN.js → vidstack-BI5-IK9v.js} +55 -3
  13. package/prod/chunks/{vidstack-CbejzCJs.js → vidstack-BgAMJr1Y.js} +155 -15
  14. package/prod/chunks/{vidstack-Bh7M8kL6.js → vidstack-DKWmxvB4.js} +5 -57
  15. package/prod/chunks/{vidstack-DhSvljmQ.js → vidstack-NR84X5HE.js} +1 -1
  16. package/prod/chunks/{vidstack-BS445j5D.js → vidstack-jSJ0Meez.js} +1 -1
  17. package/prod/player/vidstack-default-components.js +4 -4
  18. package/prod/player/vidstack-default-layout.js +4 -4
  19. package/prod/player/vidstack-plyr-layout.js +3 -3
  20. package/prod/vidstack.js +5 -5
  21. package/{dev/chunks/vidstack-DTow20pt.js → server/chunks/vidstack-CSX6ausI.js} +55 -3
  22. package/server/chunks/{vidstack-CoGzBr_V.js → vidstack-CePUWLrW.js} +5 -57
  23. package/{dev/chunks/vidstack-CvWDiSTs.js → server/chunks/vidstack-D7sOBYbw.js} +1 -1
  24. package/server/chunks/{vidstack-VGPw_CQP.js → vidstack-DqUb8JgU.js} +1 -1
  25. package/server/chunks/{vidstack-i9a2TQLO.js → vidstack-Dvh6BtYs.js} +155 -15
  26. package/server/player/vidstack-default-components.js +4 -4
  27. package/server/player/vidstack-default-layout.js +4 -4
  28. package/server/player/vidstack-plyr-layout.js +3 -3
  29. package/server/vidstack.js +5 -5
  30. package/dev/chunks/vidstack-B-FM4-oZ.js +0 -668
  31. package/dev/chunks/vidstack-B92UncBI.js +0 -61
  32. package/dev/chunks/vidstack-BDiAEW1N.js +0 -11691
  33. package/dev/chunks/vidstack-BPymmnxm.js +0 -551
  34. package/dev/chunks/vidstack-BSZY6sbC.js +0 -180
  35. package/dev/chunks/vidstack-BSpAxhO6.js +0 -643
  36. package/dev/chunks/vidstack-BVVxkUlq.js +0 -288
  37. package/dev/chunks/vidstack-BXgKy_7V.js +0 -11693
  38. package/dev/chunks/vidstack-BalWqr4j.js +0 -1422
  39. package/dev/chunks/vidstack-Bfi_jCvb.js +0 -476
  40. package/dev/chunks/vidstack-BoLZuw80.js +0 -34
  41. package/dev/chunks/vidstack-BrqDQG-r.js +0 -643
  42. package/dev/chunks/vidstack-C3QPOZNd.js +0 -476
  43. package/dev/chunks/vidstack-C7BwfK5c.js +0 -1537
  44. package/dev/chunks/vidstack-CEUjDh4x.js +0 -34
  45. package/dev/chunks/vidstack-CFOPpDTy.js +0 -476
  46. package/dev/chunks/vidstack-CFZ0rYJz.js +0 -34
  47. package/dev/chunks/vidstack-CKsUl4ll.js +0 -1384
  48. package/dev/chunks/vidstack-CM82l-7o.js +0 -551
  49. package/dev/chunks/vidstack-CQSHFVu7.js +0 -401
  50. package/dev/chunks/vidstack-CXrXBlpD.js +0 -11692
  51. package/dev/chunks/vidstack-CevuS08D.js +0 -1504
  52. package/dev/chunks/vidstack-CkRXb9Ia.js +0 -1537
  53. package/dev/chunks/vidstack-CqNX679o.js +0 -669
  54. package/dev/chunks/vidstack-Csfg08VS.js +0 -551
  55. package/dev/chunks/vidstack-CzU-uC5f.js +0 -189
  56. package/dev/chunks/vidstack-D2Bi2Td9.js +0 -1537
  57. package/dev/chunks/vidstack-D3ZXOE4d.js +0 -643
  58. package/dev/chunks/vidstack-D6_9yy0x.js +0 -643
  59. package/dev/chunks/vidstack-DJQOTrl6.js +0 -180
  60. package/dev/chunks/vidstack-DNbKNc4R.js +0 -288
  61. package/dev/chunks/vidstack-DOtIyh4c.js +0 -288
  62. package/dev/chunks/vidstack-DY2iivhG.js +0 -84
  63. package/dev/chunks/vidstack-DjqYvkVp.js +0 -84
  64. package/dev/chunks/vidstack-Dov8gjdq.js +0 -401
  65. package/dev/chunks/vidstack-DqaqkU4T.js +0 -9
  66. package/dev/chunks/vidstack-DwdhbP5c.js +0 -189
  67. package/dev/chunks/vidstack-DweQYzVw.js +0 -180
  68. package/dev/chunks/vidstack-FuCbl228.js +0 -226
  69. package/dev/chunks/vidstack-H9OdEKUQ.js +0 -375
  70. package/dev/chunks/vidstack-KntYDWMe.js +0 -668
  71. package/dev/chunks/vidstack-L5mw2iPb.js +0 -375
  72. package/dev/chunks/vidstack-NCBSBZE-.js +0 -61
  73. package/dev/chunks/vidstack-PREbBNMG.js +0 -125
  74. package/dev/chunks/vidstack-UWMPvwsa.js +0 -1537
  75. package/dev/chunks/vidstack-f6WXkmfP.js +0 -375
  76. package/dev/chunks/vidstack-gqKBE4xH.js +0 -376
  77. package/dev/chunks/vidstack-iRuTLfhk.js +0 -61
  78. package/dev/chunks/vidstack-lYFZKRUc.js +0 -401
  79. package/dev/chunks/vidstack-oOGofWSl.js +0 -668
  80. package/dev/chunks/vidstack-vh0BKYWJ.js +0 -84
  81. package/prod/chunks/vidstack-0Foyib2F.js +0 -34
  82. package/prod/chunks/vidstack-58ZavMvv.js +0 -159
  83. package/prod/chunks/vidstack-B0SSIHIv.js +0 -1537
  84. package/prod/chunks/vidstack-B9nEslvl.js +0 -11197
  85. package/prod/chunks/vidstack-BCBskRpc.js +0 -664
  86. package/prod/chunks/vidstack-BOObgZd8.js +0 -504
  87. package/prod/chunks/vidstack-BZVrgeRF.js +0 -9
  88. package/prod/chunks/vidstack-B_9VGrZQ.js +0 -504
  89. package/prod/chunks/vidstack-B_wD853-.js +0 -386
  90. package/prod/chunks/vidstack-BbPEqH3g.js +0 -11196
  91. package/prod/chunks/vidstack-Bm2UemPE.js +0 -470
  92. package/prod/chunks/vidstack-Bp_hAwzI.js +0 -61
  93. package/prod/chunks/vidstack-C4tNkfXj.js +0 -470
  94. package/prod/chunks/vidstack-C4tuISYG.js +0 -1504
  95. package/prod/chunks/vidstack-C5Rzkyfp.js +0 -375
  96. package/prod/chunks/vidstack-CKapDFwB.js +0 -376
  97. package/prod/chunks/vidstack-CNJwYQRW.js +0 -84
  98. package/prod/chunks/vidstack-CQll06Hv.js +0 -34
  99. package/prod/chunks/vidstack-CVzVtf1j.js +0 -61
  100. package/prod/chunks/vidstack-CYK75vJF.js +0 -1382
  101. package/prod/chunks/vidstack-CZNlvfmV.js +0 -288
  102. package/prod/chunks/vidstack-CiQEyk_l.js +0 -189
  103. package/prod/chunks/vidstack-CiTWSpv_.js +0 -34
  104. package/prod/chunks/vidstack-CikQpsuo.js +0 -1537
  105. package/prod/chunks/vidstack-CtxjO6HG.js +0 -84
  106. package/prod/chunks/vidstack-CzjHdPIT.js +0 -375
  107. package/prod/chunks/vidstack-D0XCUWbp.js +0 -159
  108. package/prod/chunks/vidstack-D3cSYtez.js +0 -663
  109. package/prod/chunks/vidstack-D91K36KQ.js +0 -206
  110. package/prod/chunks/vidstack-DJThTSEm.js +0 -125
  111. package/prod/chunks/vidstack-DTyDOhwS.js +0 -504
  112. package/prod/chunks/vidstack-DVMwXUgY.js +0 -189
  113. package/prod/chunks/vidstack-DXSNXDnS.js +0 -1384
  114. package/prod/chunks/vidstack-D_Sd7838.js +0 -663
  115. package/prod/chunks/vidstack-D_ijTIbV.js +0 -11198
  116. package/prod/chunks/vidstack-DdiGCJVp.js +0 -504
  117. package/prod/chunks/vidstack-DgGDsAKh.js +0 -375
  118. package/prod/chunks/vidstack-DgsBXr1J.js +0 -84
  119. package/prod/chunks/vidstack-DhC5F6c8.js +0 -470
  120. package/prod/chunks/vidstack-Djmla_FM.js +0 -545
  121. package/prod/chunks/vidstack-DpQw1Y33.js +0 -663
  122. package/prod/chunks/vidstack-DrEorv9m.js +0 -189
  123. package/prod/chunks/vidstack-Ma9rwtR0.js +0 -386
  124. package/prod/chunks/vidstack-VTpvHAdU.js +0 -1537
  125. package/prod/chunks/vidstack-dbLRgf2L.js +0 -159
  126. package/prod/chunks/vidstack-ehqxnvc9.js +0 -1537
  127. package/prod/chunks/vidstack-jIPoNqhj.js +0 -545
  128. package/prod/chunks/vidstack-lc8NHly9.js +0 -288
  129. package/prod/chunks/vidstack-rHvQ8f6c.js +0 -288
  130. package/prod/chunks/vidstack-rKV98aQH.js +0 -545
  131. package/prod/chunks/vidstack-uA7h-Bsq.js +0 -386
  132. package/prod/chunks/vidstack-xo_SmgiV.js +0 -84
  133. package/prod/chunks/vidstack-xvxeRtaN.js +0 -61
  134. package/server/chunks/vidstack--ufi23Q6.js +0 -1537
  135. package/server/chunks/vidstack-B3AXUfgF.js +0 -189
  136. package/server/chunks/vidstack-B4rJ1ZKK.js +0 -376
  137. package/server/chunks/vidstack-BJCx78pm.js +0 -386
  138. package/server/chunks/vidstack-BTdEfKqV.js +0 -84
  139. package/server/chunks/vidstack-BV_VpWlJ.js +0 -1537
  140. package/server/chunks/vidstack-BtitkRvR.js +0 -11198
  141. package/server/chunks/vidstack-BtqWstSj.js +0 -375
  142. package/server/chunks/vidstack-BweZhuNd.js +0 -1537
  143. package/server/chunks/vidstack-ByG5MvLs.js +0 -545
  144. package/server/chunks/vidstack-C-HdFsZi.js +0 -84
  145. package/server/chunks/vidstack-C0xOpWYR.js +0 -470
  146. package/server/chunks/vidstack-C481iXqe.js +0 -386
  147. package/server/chunks/vidstack-C4iWXMC-.js +0 -545
  148. package/server/chunks/vidstack-C5zFBMwg.js +0 -386
  149. package/server/chunks/vidstack-CEh38XpD.js +0 -288
  150. package/server/chunks/vidstack-CSiPajWY.js +0 -470
  151. package/server/chunks/vidstack-CbNRZgUA.js +0 -11197
  152. package/server/chunks/vidstack-CgXa6YO3.js +0 -61
  153. package/server/chunks/vidstack-CkMAeO-e.js +0 -34
  154. package/server/chunks/vidstack-Cm0qnRvu.js +0 -11196
  155. package/server/chunks/vidstack-Ct1NFlBa.js +0 -1537
  156. package/server/chunks/vidstack-CyFwkPiu.js +0 -470
  157. package/server/chunks/vidstack-D4t_SZbb.js +0 -1416
  158. package/server/chunks/vidstack-D7D9kiW6.js +0 -34
  159. package/server/chunks/vidstack-DH6N0AoF.js +0 -375
  160. package/server/chunks/vidstack-DJJmNib6.js +0 -504
  161. package/server/chunks/vidstack-DKr7br9D.js +0 -34
  162. package/server/chunks/vidstack-DM-5dPT-.js +0 -663
  163. package/server/chunks/vidstack-DOIUveQF.js +0 -504
  164. package/server/chunks/vidstack-DTn72IA8.js +0 -1504
  165. package/server/chunks/vidstack-DWfS9vAY.js +0 -84
  166. package/server/chunks/vidstack-DWt5LAKE.js +0 -375
  167. package/server/chunks/vidstack-DY51lx0R.js +0 -189
  168. package/server/chunks/vidstack-DbNoKLjz.js +0 -664
  169. package/server/chunks/vidstack-Dbs_rXUT.js +0 -663
  170. package/server/chunks/vidstack-DeS67_gx.js +0 -9
  171. package/server/chunks/vidstack-DiHlnSws.js +0 -1384
  172. package/server/chunks/vidstack-DnoqxmOs.js +0 -125
  173. package/server/chunks/vidstack-DsZKgA8y.js +0 -663
  174. package/server/chunks/vidstack-DtQSvsQr.js +0 -189
  175. package/server/chunks/vidstack-E7eUOyFt.js +0 -288
  176. package/server/chunks/vidstack-JkJEYEQM.js +0 -159
  177. package/server/chunks/vidstack-KhtuR229.js +0 -504
  178. package/server/chunks/vidstack-NXcLNXxO.js +0 -84
  179. package/server/chunks/vidstack-OKdxH1xx.js +0 -189
  180. package/server/chunks/vidstack-SkX-mSrw.js +0 -206
  181. package/server/chunks/vidstack-X1Hex9PH.js +0 -84
  182. package/server/chunks/vidstack-iVN8uBAv.js +0 -288
  183. package/server/chunks/vidstack-jlaBqZq5.js +0 -61
  184. package/server/chunks/vidstack-m8aA99tE.js +0 -159
  185. package/server/chunks/vidstack-rUHVQoo3.js +0 -61
  186. package/server/chunks/vidstack-rWs25cS9.js +0 -159
  187. package/server/chunks/vidstack-uyCXITen.js +0 -504
  188. package/server/chunks/vidstack-yf18YVAb.js +0 -545
@@ -1,159 +0,0 @@
1
- "use client"
2
-
3
- import { IS_CHROME, IS_IOS, canGoogleCastSrc, IS_SERVER, loadScript } from './vidstack-Cm0qnRvu.js';
4
- import { listenEvent, peek } from './vidstack-D_bWd66h.js';
5
-
6
- function getCastFrameworkURL() {
7
- return "https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1";
8
- }
9
- function hasLoadedCastFramework() {
10
- return !!window.cast?.framework;
11
- }
12
- function isCastAvailable() {
13
- return !!window.chrome?.cast?.isAvailable;
14
- }
15
- function isCastConnected() {
16
- return getCastContext().getCastState() === cast.framework.CastState.CONNECTED;
17
- }
18
- function getCastContext() {
19
- return window.cast.framework.CastContext.getInstance();
20
- }
21
- function getCastSession() {
22
- return getCastContext().getCurrentSession();
23
- }
24
- function getCastSessionMedia() {
25
- return getCastSession()?.getSessionObj().media[0];
26
- }
27
- function hasActiveCastSession(src) {
28
- const contentId = getCastSessionMedia()?.media.contentId;
29
- return contentId === src?.src;
30
- }
31
- function getDefaultCastOptions() {
32
- return {
33
- language: "en-US",
34
- autoJoinPolicy: chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED,
35
- receiverApplicationId: chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID,
36
- resumeSavedSession: true,
37
- androidReceiverCompatible: true
38
- };
39
- }
40
- function getCastErrorMessage(code) {
41
- const defaultMessage = `Google Cast Error Code: ${code}`;
42
- return defaultMessage;
43
- }
44
- function listenCastContextEvent(type, handler) {
45
- return listenEvent(getCastContext(), type, handler);
46
- }
47
-
48
- class GoogleCastLoader {
49
- name = "google-cast";
50
- target;
51
- #player;
52
- /**
53
- * @see {@link https://developers.google.com/cast/docs/reference/web_sender/cast.framework.CastContext}
54
- */
55
- get cast() {
56
- return getCastContext();
57
- }
58
- mediaType() {
59
- return "video";
60
- }
61
- canPlay(src) {
62
- return IS_CHROME && !IS_IOS && canGoogleCastSrc(src);
63
- }
64
- async prompt(ctx) {
65
- let loadEvent, openEvent, errorEvent;
66
- try {
67
- loadEvent = await this.#loadCastFramework(ctx);
68
- if (!this.#player) {
69
- this.#player = new cast.framework.RemotePlayer();
70
- new cast.framework.RemotePlayerController(this.#player);
71
- }
72
- openEvent = ctx.player.createEvent("google-cast-prompt-open", {
73
- trigger: loadEvent
74
- });
75
- ctx.player.dispatchEvent(openEvent);
76
- this.#notifyRemoteStateChange(ctx, "connecting", openEvent);
77
- await this.#showPrompt(peek(ctx.$props.googleCast));
78
- ctx.$state.remotePlaybackInfo.set({
79
- deviceName: getCastSession()?.getCastDevice().friendlyName
80
- });
81
- if (isCastConnected()) this.#notifyRemoteStateChange(ctx, "connected", openEvent);
82
- } catch (code) {
83
- const error = code instanceof Error ? code : this.#createError(
84
- (code + "").toUpperCase(),
85
- "Prompt failed."
86
- );
87
- errorEvent = ctx.player.createEvent("google-cast-prompt-error", {
88
- detail: error,
89
- trigger: openEvent ?? loadEvent,
90
- cancelable: true
91
- });
92
- ctx.player.dispatch(errorEvent);
93
- this.#notifyRemoteStateChange(
94
- ctx,
95
- isCastConnected() ? "connected" : "disconnected",
96
- errorEvent
97
- );
98
- throw error;
99
- } finally {
100
- ctx.player.dispatch("google-cast-prompt-close", {
101
- trigger: errorEvent ?? openEvent ?? loadEvent
102
- });
103
- }
104
- }
105
- async load(ctx) {
106
- if (IS_SERVER) {
107
- throw Error("[vidstack] can not load google cast provider server-side");
108
- }
109
- if (!this.#player) {
110
- throw Error("[vidstack] google cast player was not initialized");
111
- }
112
- return new (await import('./vidstack-CyFwkPiu.js')).GoogleCastProvider(this.#player, ctx);
113
- }
114
- async #loadCastFramework(ctx) {
115
- if (hasLoadedCastFramework()) return;
116
- const loadStartEvent = ctx.player.createEvent("google-cast-load-start");
117
- ctx.player.dispatch(loadStartEvent);
118
- await loadScript(getCastFrameworkURL());
119
- await customElements.whenDefined("google-cast-launcher");
120
- const loadedEvent = ctx.player.createEvent("google-cast-loaded", { trigger: loadStartEvent });
121
- ctx.player.dispatch(loadedEvent);
122
- if (!isCastAvailable()) {
123
- throw this.#createError("CAST_NOT_AVAILABLE", "Google Cast not available on this platform.");
124
- }
125
- return loadedEvent;
126
- }
127
- async #showPrompt(options) {
128
- this.#setOptions(options);
129
- const errorCode = await this.cast.requestSession();
130
- if (errorCode) {
131
- throw this.#createError(
132
- errorCode.toUpperCase(),
133
- getCastErrorMessage(errorCode)
134
- );
135
- }
136
- }
137
- #setOptions(options) {
138
- this.cast?.setOptions({
139
- ...getDefaultCastOptions(),
140
- ...options
141
- });
142
- }
143
- #notifyRemoteStateChange(ctx, state, trigger) {
144
- const detail = { type: "google-cast", state };
145
- ctx.notify("remote-playback-change", detail, trigger);
146
- }
147
- #createError(code, message) {
148
- const error = Error(message);
149
- error.code = code;
150
- return error;
151
- }
152
- }
153
-
154
- var loader = /*#__PURE__*/Object.freeze({
155
- __proto__: null,
156
- GoogleCastLoader: GoogleCastLoader
157
- });
158
-
159
- export { getCastContext, getCastErrorMessage, getCastSession, getCastSessionMedia, hasActiveCastSession, listenCastContextEvent, loader };
@@ -1,504 +0,0 @@
1
- "use client"
2
-
3
- import * as React from 'react';
4
- import { createDisposalBin, listenEvent, createScope, signal, peek, effect, tick, isFunction, useSignal, deferredPromise } from './vidstack-D_bWd66h.js';
5
- import { Internals } from 'remotion';
6
- import { REMOTION_PROVIDER_ID, RemotionLayoutEngine, RemotionContextProvider, ErrorBoundary } from '../player/vidstack-remotion.js';
7
- import { isRemotionSrc, TimeRange } from './vidstack-Cm0qnRvu.js';
8
- import { NoReactInternals } from 'remotion/no-react';
9
- import './vidstack-D-hQD1eE.js';
10
- import '@floating-ui/dom';
11
-
12
- class RemotionPlaybackEngine {
13
- #src;
14
- #onFrameChange;
15
- #onEnd;
16
- #disposal = createDisposalBin();
17
- #frame = 0;
18
- #framesAdvanced = 0;
19
- #playbackRate = 1;
20
- #playing = false;
21
- #rafId = -1;
22
- #timerId = -1;
23
- #startedAt = 0;
24
- #isRunningInBackground = false;
25
- get frame() {
26
- return this.#frame;
27
- }
28
- set frame(frame) {
29
- this.#frame = frame;
30
- this.#onFrameChange(frame);
31
- }
32
- constructor(src, onFrameChange, onEnd) {
33
- this.#src = src;
34
- this.#onFrameChange = onFrameChange;
35
- this.#onEnd = onEnd;
36
- this.#frame = src.initialFrame ?? 0;
37
- this.#disposal.add(
38
- listenEvent(document, "visibilitychange", this.#onVisibilityChange.bind(this))
39
- );
40
- }
41
- play() {
42
- this.#framesAdvanced = 0;
43
- this.#playing = true;
44
- this.#startedAt = performance.now();
45
- this.#tick();
46
- }
47
- stop() {
48
- this.#playing = false;
49
- if (this.#rafId >= 0) {
50
- cancelAnimationFrame(this.#rafId);
51
- this.#rafId = -1;
52
- }
53
- if (this.#timerId >= 0) {
54
- clearTimeout(this.#timerId);
55
- this.#timerId = -1;
56
- }
57
- }
58
- setPlaybackRate(rate) {
59
- this.#playbackRate = rate;
60
- }
61
- destroy() {
62
- this.#disposal.empty();
63
- this.stop();
64
- }
65
- #update() {
66
- const { nextFrame, framesToAdvance, ended } = this.#calculateNextFrame();
67
- this.#framesAdvanced += framesToAdvance;
68
- if (nextFrame !== this.#frame) {
69
- this.#onFrameChange(nextFrame);
70
- this.#frame = nextFrame;
71
- }
72
- if (ended) {
73
- this.#frame = this.#src.outFrame;
74
- this.stop();
75
- this.#onEnd();
76
- }
77
- }
78
- #tick = () => {
79
- this.#update();
80
- if (this.#playing) {
81
- this.#queueNextFrame(this.#tick);
82
- }
83
- };
84
- #queueNextFrame(callback) {
85
- if (this.#isRunningInBackground) {
86
- this.#timerId = window.setTimeout(callback, 1e3 / this.#src.fps);
87
- } else {
88
- this.#rafId = requestAnimationFrame(callback);
89
- }
90
- }
91
- #calculateNextFrame() {
92
- const round = this.#playbackRate < 0 ? Math.ceil : Math.floor, time = performance.now() - this.#startedAt, framesToAdvance = round(time * this.#playbackRate / (1e3 / this.#src.fps)) - this.#framesAdvanced, nextFrame = framesToAdvance + this.#frame, isCurrentFrameOutOfBounds = this.#frame > this.#src.outFrame || this.#frame < this.#src.inFrame, isNextFrameOutOfBounds = nextFrame > this.#src.outFrame || nextFrame < this.#src.inFrame, ended = isNextFrameOutOfBounds && !isCurrentFrameOutOfBounds;
93
- if (this.#playbackRate > 0 && !ended) {
94
- if (isNextFrameOutOfBounds) {
95
- return {
96
- nextFrame: this.#src.inFrame,
97
- framesToAdvance,
98
- ended
99
- };
100
- }
101
- return { nextFrame, framesToAdvance, ended };
102
- }
103
- if (isNextFrameOutOfBounds) {
104
- return {
105
- nextFrame: this.#src.outFrame,
106
- framesToAdvance,
107
- ended
108
- };
109
- }
110
- return { nextFrame, framesToAdvance, ended };
111
- }
112
- #onVisibilityChange() {
113
- this.#isRunningInBackground = document.visibilityState === "hidden";
114
- if (this.#playing) {
115
- this.stop();
116
- this.play();
117
- }
118
- }
119
- }
120
-
121
- function validateRemotionResource({
122
- src,
123
- compositionWidth: width,
124
- compositionHeight: height,
125
- fps,
126
- durationInFrames,
127
- initialFrame,
128
- inFrame,
129
- outFrame,
130
- numberOfSharedAudioTags
131
- }) {
132
- return;
133
- }
134
- NoReactInternals.validateFps;
135
- NoReactInternals.validateDimension;
136
- NoReactInternals.validateDurationInFrames;
137
-
138
- class RemotionProvider {
139
- $$PROVIDER_TYPE = "REMOTION";
140
- scope = createScope();
141
- #src = signal(null);
142
- #setup = false;
143
- #loadStart = false;
144
- #audio = null;
145
- #waiting = signal(false);
146
- #waitingPromise = null;
147
- #mediaTags = signal([]);
148
- #mediaElements = signal([]);
149
- #bufferingElements = /* @__PURE__ */ new Set();
150
- #timeline = null;
151
- #frame = signal({ [REMOTION_PROVIDER_ID]: 0 });
152
- #layoutEngine = new RemotionLayoutEngine();
153
- #playbackEngine = null;
154
- #container;
155
- #ctx;
156
- #setTimeline;
157
- #setMediaVolume = {
158
- setMediaMuted: this.setMuted.bind(this),
159
- setMediaVolume: this.setVolume.bind(this)
160
- };
161
- get type() {
162
- return "remotion";
163
- }
164
- get currentSrc() {
165
- return peek(this.#src);
166
- }
167
- get frame() {
168
- return this.#frame();
169
- }
170
- constructor(container, ctx) {
171
- this.#container = container;
172
- this.#ctx = ctx;
173
- this.#setTimeline = {
174
- setFrame: this.#setFrame.bind(this),
175
- setPlaying: this.#setPlaying.bind(this)
176
- };
177
- this.#layoutEngine.setContainer(container);
178
- }
179
- setup() {
180
- effect(this.#watchWaiting.bind(this));
181
- effect(this.#watchMediaTags.bind(this));
182
- effect(this.#watchMediaElements.bind(this));
183
- }
184
- #watchMediaTags() {
185
- this.#mediaTags();
186
- this.#discoverMediaElements();
187
- }
188
- #discoverMediaElements() {
189
- const elements = [...this.#container.querySelectorAll("audio,video")];
190
- this.#mediaElements.set(elements);
191
- }
192
- #watchMediaElements() {
193
- const elements = this.#mediaElements();
194
- for (const tag of elements) {
195
- const onWait = this.#onWaitFor.bind(this, tag), onStopWaiting = this.#onStopWaitingFor.bind(this, tag);
196
- if (tag.currentSrc && tag.readyState < 4) {
197
- this.#onWaitFor(tag);
198
- listenEvent(tag, "canplay", onStopWaiting);
199
- }
200
- listenEvent(tag, "waiting", onWait);
201
- listenEvent(tag, "playing", onStopWaiting);
202
- }
203
- for (const el of this.#bufferingElements) {
204
- if (!elements.includes(el)) this.#onStopWaitingFor(el);
205
- }
206
- }
207
- #onFrameChange(frame) {
208
- const { inFrame, fps } = this.#src(), { seeking } = this.#ctx.$state, time = Math.max(0, frame - inFrame) / fps;
209
- this.#frame.set((record) => ({
210
- ...record,
211
- [REMOTION_PROVIDER_ID]: frame
212
- }));
213
- this.#ctx.notify("time-change", time);
214
- if (seeking()) {
215
- tick();
216
- this.#ctx.notify("seeked", time);
217
- }
218
- }
219
- #onFrameEnd() {
220
- this.pause();
221
- this.#ctx.notify("end");
222
- }
223
- async play() {
224
- const { ended } = this.#ctx.$state;
225
- if (peek(ended)) {
226
- this.#setFrame({ [REMOTION_PROVIDER_ID]: 0 });
227
- }
228
- try {
229
- const mediaElements = peek(this.#mediaElements);
230
- if (mediaElements.length) {
231
- await Promise.all(mediaElements.map((media) => media.play()));
232
- }
233
- this.#ctx.notify("play");
234
- tick();
235
- if (this.#waitingPromise) {
236
- this.#ctx.notify("waiting");
237
- return this.#waitingPromise.promise;
238
- } else {
239
- this.#playbackEngine?.play();
240
- this.#ctx.notify("playing");
241
- }
242
- } catch (error) {
243
- throw error;
244
- }
245
- }
246
- async pause() {
247
- const { paused } = this.#ctx.$state;
248
- this.#playbackEngine?.stop();
249
- this.#ctx.notify("pause");
250
- }
251
- setMuted(value) {
252
- if (!this.#ctx) return;
253
- const { muted, volume } = this.#ctx.$state;
254
- if (isFunction(value)) {
255
- this.setMuted(value(muted()));
256
- return;
257
- }
258
- this.#ctx.notify("volume-change", {
259
- volume: peek(volume),
260
- muted: value
261
- });
262
- }
263
- setCurrentTime(time) {
264
- const { fps } = this.#src(), frame = time * fps;
265
- this.#ctx.notify("seeking", time);
266
- this.#setFrame({ [REMOTION_PROVIDER_ID]: frame });
267
- }
268
- setVolume(value) {
269
- if (!this.#ctx) return;
270
- const { volume, muted } = this.#ctx.$state;
271
- if (isFunction(value)) {
272
- this.setVolume(value(volume()));
273
- return;
274
- }
275
- this.#ctx.notify("volume-change", {
276
- volume: value,
277
- muted: peek(muted)
278
- });
279
- }
280
- setPlaybackRate(rate) {
281
- if (isFunction(rate)) {
282
- const { playbackRate } = this.#ctx.$state;
283
- this.setPlaybackRate(rate(peek(playbackRate)));
284
- return;
285
- }
286
- this.#playbackEngine?.setPlaybackRate(rate);
287
- this.#ctx.notify("rate-change", rate);
288
- }
289
- async loadSource(src) {
290
- if (!isRemotionSrc(src)) return;
291
- const onUserError = src.onError, resolvedSrc = {
292
- compositionWidth: 1920,
293
- compositionHeight: 1080,
294
- fps: 30,
295
- initialFrame: 0,
296
- inFrame: 0,
297
- outFrame: src.durationInFrames,
298
- numberOfSharedAudioTags: 5,
299
- inputProps: {},
300
- ...src,
301
- onError: (error) => {
302
- this.pause();
303
- this.#ctx.notify("error", {
304
- message: error.message,
305
- code: 1
306
- });
307
- onUserError?.(error);
308
- }
309
- };
310
- this.#src.set(resolvedSrc);
311
- for (const prop of Object.keys(resolvedSrc)) {
312
- src[prop] = resolvedSrc[prop];
313
- }
314
- this.changeSrc(resolvedSrc);
315
- }
316
- destroy() {
317
- this.changeSrc(null);
318
- }
319
- changeSrc(src) {
320
- this.#playbackEngine?.destroy();
321
- this.#waiting.set(false);
322
- this.#waitingPromise?.reject("src changed");
323
- this.#waitingPromise = null;
324
- this.#audio = null;
325
- this.#timeline = null;
326
- this.#playbackEngine = null;
327
- this.#mediaTags.set([]);
328
- this.#bufferingElements.clear();
329
- this.#frame.set({ [REMOTION_PROVIDER_ID]: 0 });
330
- this.#layoutEngine.setSrc(src);
331
- if (src) {
332
- this.#timeline = this.#createTimelineContextValue();
333
- this.#playbackEngine = new RemotionPlaybackEngine(
334
- src,
335
- this.#onFrameChange.bind(this),
336
- this.#onFrameEnd.bind(this)
337
- );
338
- }
339
- }
340
- render = () => {
341
- const $src = useSignal(this.#src);
342
- if (!$src) {
343
- throw Error(
344
- "[vidstack] no src"
345
- );
346
- }
347
- React.useEffect(() => {
348
- if (!isRemotionSrc($src)) return;
349
- validateRemotionResource($src);
350
- const rafId = requestAnimationFrame(() => {
351
- if (!this.#setup) {
352
- this.#ctx.notify("provider-setup", this);
353
- this.#setup = true;
354
- }
355
- if (!this.#loadStart) {
356
- this.#ctx.notify("load-start");
357
- this.#loadStart = true;
358
- }
359
- this.#discoverMediaElements();
360
- tick();
361
- if (!this.#waiting()) this.#ready($src);
362
- });
363
- return () => {
364
- cancelAnimationFrame(rafId);
365
- this.#loadStart = false;
366
- };
367
- }, [$src]);
368
- const Component = Internals.useLazyComponent({
369
- component: $src.src
370
- });
371
- const { $state } = this.#ctx, $volume = useSignal($state.volume), $isMuted = useSignal($state.muted);
372
- const mediaVolume = React.useMemo(() => {
373
- const { muted, volume } = this.#ctx.$state;
374
- return { mediaMuted: muted(), mediaVolume: volume() };
375
- }, [$isMuted, $volume]);
376
- return /* @__PURE__ */ React.createElement(
377
- RemotionContextProvider,
378
- {
379
- src: $src,
380
- component: Component,
381
- timeline: this.#timeline,
382
- mediaVolume,
383
- setMediaVolume: this.#setMediaVolume
384
- },
385
- /* @__PURE__ */ React.createElement(Internals.Timeline.SetTimelineContext.Provider, { value: this.#setTimeline }, React.createElement(this.renderVideo, { src: $src }))
386
- );
387
- };
388
- renderVideo = ({ src }) => {
389
- const video = Internals.useVideo(), Video = video ? video.component : null, audioContext = React.useContext(Internals.SharedAudioContext);
390
- const { $state } = this.#ctx;
391
- useSignal(this.#frame);
392
- useSignal($state.playing);
393
- useSignal($state.playbackRate);
394
- React.useEffect(() => {
395
- this.#audio = audioContext;
396
- return () => {
397
- this.#audio = null;
398
- };
399
- }, [audioContext]);
400
- const LoadingContent = React.useMemo(() => src.renderLoading?.(), [src]);
401
- const Content = Video ? /* @__PURE__ */ React.createElement(ErrorBoundary, { fallback: src.errorFallback, onError: src.onError }, /* @__PURE__ */ React.createElement(Internals.ClipComposition, null, /* @__PURE__ */ React.createElement(Video, { ...video?.props, ...src.inputProps }))) : null;
402
- return /* @__PURE__ */ React.createElement(React.Suspense, { fallback: LoadingContent }, Content);
403
- };
404
- #ready(src) {
405
- if (!src) return;
406
- const { outFrame, inFrame, fps } = src, duration = (outFrame - inFrame) / fps;
407
- this.#ctx.notify("loaded-metadata");
408
- this.#ctx.notify("loaded-data");
409
- this.#ctx.delegate.ready({
410
- duration,
411
- seekable: new TimeRange(0, duration),
412
- buffered: new TimeRange(0, duration)
413
- });
414
- if (src.initialFrame) {
415
- this.#setFrame({
416
- [REMOTION_PROVIDER_ID]: src.initialFrame
417
- });
418
- }
419
- }
420
- #onWaitFor(el) {
421
- this.#bufferingElements.add(el);
422
- this.#waiting.set(true);
423
- if (!this.#waitingPromise) {
424
- this.#waitingPromise = deferredPromise();
425
- }
426
- }
427
- #onStopWaitingFor(el) {
428
- this.#bufferingElements.delete(el);
429
- if (this.#bufferingElements.size) return;
430
- this.#waiting.set(false);
431
- this.#waitingPromise?.resolve();
432
- this.#waitingPromise = null;
433
- const { canPlay } = this.#ctx.$state;
434
- if (!peek(canPlay)) {
435
- this.#ready(peek(this.#src));
436
- }
437
- }
438
- #watchWaiting() {
439
- this.#waiting();
440
- const { paused } = this.#ctx.$state;
441
- if (peek(paused)) return;
442
- if (this.#waiting()) {
443
- this.#playbackEngine?.stop();
444
- this.#ctx.notify("waiting");
445
- } else {
446
- this.#playbackEngine?.play();
447
- this.#ctx.notify("playing");
448
- }
449
- }
450
- #setFrame(value) {
451
- if (isFunction(value)) {
452
- this.#setFrame(value(this.#frame()));
453
- return;
454
- }
455
- this.#frame.set((record) => ({ ...record, ...value }));
456
- const nextFrame = value[REMOTION_PROVIDER_ID];
457
- if (this.#playbackEngine && this.#playbackEngine.frame !== nextFrame) {
458
- this.#playbackEngine.frame = nextFrame;
459
- }
460
- }
461
- #setPlaying(value) {
462
- const { playing } = this.#ctx.$state;
463
- if (isFunction(value)) {
464
- this.#setPlaying(value(playing()));
465
- return;
466
- }
467
- if (value) {
468
- this.play();
469
- } else if (!value) {
470
- this.pause();
471
- }
472
- }
473
- #createTimelineContextValue() {
474
- const { playing, playbackRate } = this.#ctx.$state, frame = this.#frame, mediaTags = this.#mediaTags, setPlaybackRate = this.setPlaybackRate.bind(this);
475
- return {
476
- rootId: REMOTION_PROVIDER_ID,
477
- get frame() {
478
- return frame();
479
- },
480
- get playing() {
481
- return playing();
482
- },
483
- get playbackRate() {
484
- return playbackRate();
485
- },
486
- imperativePlaying: {
487
- get current() {
488
- return playing();
489
- }
490
- },
491
- setPlaybackRate,
492
- audioAndVideoTags: {
493
- get current() {
494
- return mediaTags();
495
- },
496
- set current(tags) {
497
- mediaTags.set(tags);
498
- }
499
- }
500
- };
501
- }
502
- }
503
-
504
- export { RemotionProvider };