@remotion/player 4.0.460 → 4.0.461
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.d.ts +1 -2
- package/dist/cjs/index.js +0 -2
- package/dist/cjs/use-playback.d.ts +1 -2
- package/dist/esm/index.mjs +153 -167
- package/package.json +4 -4
package/dist/cjs/index.d.ts
CHANGED
|
@@ -39,7 +39,7 @@ export declare const PlayerInternals: {
|
|
|
39
39
|
inFrame: number | null;
|
|
40
40
|
outFrame: number | null;
|
|
41
41
|
browserMediaControlsBehavior: import("./browser-mediasession.js").BrowserMediaControlsBehavior;
|
|
42
|
-
getCurrentFrame:
|
|
42
|
+
getCurrentFrame: () => number;
|
|
43
43
|
muted: boolean;
|
|
44
44
|
}) => void;
|
|
45
45
|
useElementSize: (ref: import("react").RefObject<HTMLElement | null>, options: {
|
|
@@ -67,5 +67,4 @@ export declare const PlayerInternals: {
|
|
|
67
67
|
BufferingIndicator: import("react").FC<{
|
|
68
68
|
readonly type: "player" | "studio";
|
|
69
69
|
}>;
|
|
70
|
-
useFrameImperative: () => import("./use-frame-imperative.js").GetCurrentFrame;
|
|
71
70
|
};
|
package/dist/cjs/index.js
CHANGED
|
@@ -7,7 +7,6 @@ const calculate_scale_js_1 = require("./calculate-scale.js");
|
|
|
7
7
|
const emitter_context_js_1 = require("./emitter-context.js");
|
|
8
8
|
const EmitterProvider_js_1 = require("./EmitterProvider.js");
|
|
9
9
|
const event_emitter_js_1 = require("./event-emitter.js");
|
|
10
|
-
const use_frame_imperative_js_1 = require("./use-frame-imperative.js");
|
|
11
10
|
const use_hover_state_js_1 = require("./use-hover-state.js");
|
|
12
11
|
const use_playback_js_1 = require("./use-playback.js");
|
|
13
12
|
const use_player_js_1 = require("./use-player.js");
|
|
@@ -27,5 +26,4 @@ exports.PlayerInternals = {
|
|
|
27
26
|
updateAllElementsSizes: use_element_size_js_1.updateAllElementsSizes,
|
|
28
27
|
PlayerEmitterProvider: EmitterProvider_js_1.PlayerEmitterProvider,
|
|
29
28
|
BufferingIndicator: BufferingIndicator_js_1.BufferingIndicator,
|
|
30
|
-
useFrameImperative: use_frame_imperative_js_1.useFrameImperative,
|
|
31
29
|
};
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import type { BrowserMediaControlsBehavior } from './browser-mediasession.js';
|
|
2
|
-
import type { GetCurrentFrame } from './use-frame-imperative.js';
|
|
3
2
|
export declare const usePlayback: ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, browserMediaControlsBehavior, getCurrentFrame, muted, }: {
|
|
4
3
|
loop: boolean;
|
|
5
4
|
playbackRate: number;
|
|
@@ -7,6 +6,6 @@ export declare const usePlayback: ({ loop, playbackRate, moveToBeginningWhenEnde
|
|
|
7
6
|
inFrame: number | null;
|
|
8
7
|
outFrame: number | null;
|
|
9
8
|
browserMediaControlsBehavior: BrowserMediaControlsBehavior;
|
|
10
|
-
getCurrentFrame:
|
|
9
|
+
getCurrentFrame: () => number;
|
|
11
10
|
muted: boolean;
|
|
12
11
|
}) => void;
|
package/dist/esm/index.mjs
CHANGED
|
@@ -495,19 +495,6 @@ var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
|
|
|
495
495
|
});
|
|
496
496
|
};
|
|
497
497
|
|
|
498
|
-
// src/use-frame-imperative.ts
|
|
499
|
-
import { useCallback, useRef } from "react";
|
|
500
|
-
import { Internals as Internals4 } from "remotion";
|
|
501
|
-
var useFrameImperative = () => {
|
|
502
|
-
const frame = Internals4.Timeline.useTimelinePosition();
|
|
503
|
-
const frameRef = useRef(frame);
|
|
504
|
-
frameRef.current = frame;
|
|
505
|
-
const getCurrentFrame = useCallback(() => {
|
|
506
|
-
return frameRef.current;
|
|
507
|
-
}, []);
|
|
508
|
-
return getCurrentFrame;
|
|
509
|
-
};
|
|
510
|
-
|
|
511
498
|
// src/use-hover-state.ts
|
|
512
499
|
import { useEffect as useEffect2, useState as useState2 } from "react";
|
|
513
500
|
var useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
|
|
@@ -553,29 +540,29 @@ var useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
|
|
|
553
540
|
|
|
554
541
|
// src/use-playback.ts
|
|
555
542
|
import { useLayoutEffect as useLayoutEffect2 } from "react";
|
|
556
|
-
import { useContext as useContext4, useEffect as useEffect5, useRef as
|
|
557
|
-
import { Internals as
|
|
543
|
+
import { useContext as useContext4, useEffect as useEffect5, useRef as useRef4 } from "react";
|
|
544
|
+
import { Internals as Internals6 } from "remotion";
|
|
558
545
|
|
|
559
546
|
// src/browser-mediasession.ts
|
|
560
|
-
import { useEffect as useEffect3, useRef as
|
|
547
|
+
import { useEffect as useEffect3, useRef as useRef2 } from "react";
|
|
561
548
|
|
|
562
549
|
// src/use-player.ts
|
|
563
|
-
import { useCallback
|
|
564
|
-
import { Internals as
|
|
550
|
+
import { useCallback, useContext as useContext3, useMemo, useRef, useState as useState3 } from "react";
|
|
551
|
+
import { Internals as Internals4 } from "remotion";
|
|
565
552
|
var usePlayer = () => {
|
|
566
|
-
const [playing, setPlaying, imperativePlaying] =
|
|
553
|
+
const [playing, setPlaying, imperativePlaying] = Internals4.Timeline.usePlayingState();
|
|
567
554
|
const [hasPlayed, setHasPlayed] = useState3(false);
|
|
568
|
-
const frame =
|
|
569
|
-
const playStart =
|
|
570
|
-
const setFrame =
|
|
571
|
-
const setTimelinePosition =
|
|
572
|
-
const audioContext = useContext3(
|
|
573
|
-
const audioTagsContext = useContext3(
|
|
574
|
-
const { audioAndVideoTags } =
|
|
575
|
-
const frameRef =
|
|
555
|
+
const frame = Internals4.Timeline.useTimelinePosition();
|
|
556
|
+
const playStart = useRef(frame);
|
|
557
|
+
const setFrame = Internals4.Timeline.useTimelineSetFrame();
|
|
558
|
+
const setTimelinePosition = Internals4.Timeline.useTimelineSetFrame();
|
|
559
|
+
const audioContext = useContext3(Internals4.SharedAudioContext);
|
|
560
|
+
const audioTagsContext = useContext3(Internals4.SharedAudioTagsContext);
|
|
561
|
+
const { audioAndVideoTags } = Internals4.useTimelineContext();
|
|
562
|
+
const frameRef = useRef(frame);
|
|
576
563
|
frameRef.current = frame;
|
|
577
|
-
const video =
|
|
578
|
-
const config =
|
|
564
|
+
const video = Internals4.useVideo();
|
|
565
|
+
const config = Internals4.useUnsafeVideoConfig();
|
|
579
566
|
const emitter = useContext3(PlayerEventEmitterContext);
|
|
580
567
|
const lastFrame = (config?.durationInFrames ?? 1) - 1;
|
|
581
568
|
const isLastFrame = frame === lastFrame;
|
|
@@ -583,19 +570,19 @@ var usePlayer = () => {
|
|
|
583
570
|
if (!emitter) {
|
|
584
571
|
throw new TypeError("Expected Player event emitter context");
|
|
585
572
|
}
|
|
586
|
-
const bufferingContext = useContext3(
|
|
573
|
+
const bufferingContext = useContext3(Internals4.BufferingContextReact);
|
|
587
574
|
if (!bufferingContext) {
|
|
588
575
|
throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
|
|
589
576
|
}
|
|
590
577
|
const { buffering } = bufferingContext;
|
|
591
|
-
const seek =
|
|
578
|
+
const seek = useCallback((newFrame) => {
|
|
592
579
|
if (video?.id) {
|
|
593
580
|
setTimelinePosition((c) => ({ ...c, [video.id]: newFrame }));
|
|
594
581
|
}
|
|
595
582
|
frameRef.current = newFrame;
|
|
596
583
|
emitter.dispatchSeek(newFrame);
|
|
597
584
|
}, [emitter, setTimelinePosition, video?.id]);
|
|
598
|
-
const play =
|
|
585
|
+
const play = useCallback((e) => {
|
|
599
586
|
if (imperativePlaying.current) {
|
|
600
587
|
return;
|
|
601
588
|
}
|
|
@@ -622,7 +609,7 @@ var usePlayer = () => {
|
|
|
622
609
|
seek,
|
|
623
610
|
audioAndVideoTags
|
|
624
611
|
]);
|
|
625
|
-
const pause =
|
|
612
|
+
const pause = useCallback(() => {
|
|
626
613
|
if (imperativePlaying.current) {
|
|
627
614
|
imperativePlaying.current = false;
|
|
628
615
|
setPlaying(false);
|
|
@@ -630,7 +617,7 @@ var usePlayer = () => {
|
|
|
630
617
|
audioContext?.suspend();
|
|
631
618
|
}
|
|
632
619
|
}, [emitter, imperativePlaying, setPlaying, audioContext]);
|
|
633
|
-
const pauseAndReturnToPlayStart =
|
|
620
|
+
const pauseAndReturnToPlayStart = useCallback(() => {
|
|
634
621
|
if (imperativePlaying.current) {
|
|
635
622
|
imperativePlaying.current = false;
|
|
636
623
|
frameRef.current = playStart.current;
|
|
@@ -645,7 +632,7 @@ var usePlayer = () => {
|
|
|
645
632
|
}
|
|
646
633
|
}, [config, emitter, imperativePlaying, setPlaying, setTimelinePosition]);
|
|
647
634
|
const videoId = video?.id;
|
|
648
|
-
const frameBack =
|
|
635
|
+
const frameBack = useCallback((frames) => {
|
|
649
636
|
if (!videoId) {
|
|
650
637
|
return null;
|
|
651
638
|
}
|
|
@@ -664,7 +651,7 @@ var usePlayer = () => {
|
|
|
664
651
|
};
|
|
665
652
|
});
|
|
666
653
|
}, [imperativePlaying, setFrame, videoId]);
|
|
667
|
-
const frameForward =
|
|
654
|
+
const frameForward = useCallback((frames) => {
|
|
668
655
|
if (!videoId) {
|
|
669
656
|
return null;
|
|
670
657
|
}
|
|
@@ -683,20 +670,20 @@ var usePlayer = () => {
|
|
|
683
670
|
};
|
|
684
671
|
});
|
|
685
672
|
}, [videoId, imperativePlaying, lastFrame, setFrame]);
|
|
686
|
-
const toggle =
|
|
673
|
+
const toggle = useCallback((e) => {
|
|
687
674
|
if (imperativePlaying.current) {
|
|
688
675
|
pause();
|
|
689
676
|
} else {
|
|
690
677
|
play(e);
|
|
691
678
|
}
|
|
692
679
|
}, [imperativePlaying, pause, play]);
|
|
693
|
-
const isPlaying =
|
|
680
|
+
const isPlaying = useCallback(() => {
|
|
694
681
|
return imperativePlaying.current;
|
|
695
682
|
}, [imperativePlaying]);
|
|
696
|
-
const getCurrentFrame =
|
|
683
|
+
const getCurrentFrame = useCallback(() => {
|
|
697
684
|
return frameRef.current;
|
|
698
685
|
}, [frameRef]);
|
|
699
|
-
const isBuffering =
|
|
686
|
+
const isBuffering = useCallback(() => {
|
|
700
687
|
return buffering.current;
|
|
701
688
|
}, [buffering]);
|
|
702
689
|
const returnValue = useMemo(() => {
|
|
@@ -744,7 +731,7 @@ var useBrowserMediaSession = ({
|
|
|
744
731
|
playbackRate
|
|
745
732
|
}) => {
|
|
746
733
|
const { playing, pause, play, emitter, getCurrentFrame, seek } = usePlayer();
|
|
747
|
-
const hasEverPlayed =
|
|
734
|
+
const hasEverPlayed = useRef2(false);
|
|
748
735
|
useEffect3(() => {
|
|
749
736
|
if (playing) {
|
|
750
737
|
hasEverPlayed.current = true;
|
|
@@ -883,7 +870,7 @@ var calculateNextFrame = ({
|
|
|
883
870
|
};
|
|
884
871
|
|
|
885
872
|
// src/is-backgrounded.ts
|
|
886
|
-
import { useEffect as useEffect4, useRef as
|
|
873
|
+
import { useEffect as useEffect4, useRef as useRef3 } from "react";
|
|
887
874
|
var getIsBackgrounded = () => {
|
|
888
875
|
if (typeof document === "undefined") {
|
|
889
876
|
return false;
|
|
@@ -891,7 +878,7 @@ var getIsBackgrounded = () => {
|
|
|
891
878
|
return document.visibilityState === "hidden";
|
|
892
879
|
};
|
|
893
880
|
var useIsBackgrounded = () => {
|
|
894
|
-
const isBackgrounded =
|
|
881
|
+
const isBackgrounded = useRef3(getIsBackgrounded());
|
|
895
882
|
useEffect4(() => {
|
|
896
883
|
const onVisibilityChange = () => {
|
|
897
884
|
isBackgrounded.current = getIsBackgrounded();
|
|
@@ -905,7 +892,7 @@ var useIsBackgrounded = () => {
|
|
|
905
892
|
};
|
|
906
893
|
|
|
907
894
|
// src/set-global-time-anchor.ts
|
|
908
|
-
import { Internals as
|
|
895
|
+
import { Internals as Internals5 } from "remotion";
|
|
909
896
|
var ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT = 0.1;
|
|
910
897
|
var setGlobalTimeAnchor = ({
|
|
911
898
|
audioContext,
|
|
@@ -923,7 +910,7 @@ var setGlobalTimeAnchor = ({
|
|
|
923
910
|
if (Math.abs(shift) < ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT + latency && !force) {
|
|
924
911
|
return false;
|
|
925
912
|
}
|
|
926
|
-
|
|
913
|
+
Internals5.Log.verbose({ logLevel, tag: "audio-scheduling" }, "Anchor " + (force ? "forcibly " : "") + "changed from %s to %s with shift %s", audioSyncAnchor.value, newAnchor, shift);
|
|
927
914
|
audioSyncAnchor.value = newAnchor;
|
|
928
915
|
return true;
|
|
929
916
|
};
|
|
@@ -939,15 +926,15 @@ var usePlayback = ({
|
|
|
939
926
|
getCurrentFrame,
|
|
940
927
|
muted
|
|
941
928
|
}) => {
|
|
942
|
-
const config =
|
|
943
|
-
const frame =
|
|
929
|
+
const config = Internals6.useUnsafeVideoConfig();
|
|
930
|
+
const frame = Internals6.Timeline.useTimelinePosition();
|
|
944
931
|
const { playing, pause, emitter, isPlaying } = usePlayer();
|
|
945
|
-
const setFrame =
|
|
946
|
-
const sharedAudioContext = useContext4(
|
|
947
|
-
const logLevel =
|
|
932
|
+
const setFrame = Internals6.Timeline.useTimelineSetFrame();
|
|
933
|
+
const sharedAudioContext = useContext4(Internals6.SharedAudioContext);
|
|
934
|
+
const logLevel = Internals6.useLogLevel();
|
|
948
935
|
const isBackgroundedRef = useIsBackgrounded();
|
|
949
|
-
const lastTimeUpdateTimestamp =
|
|
950
|
-
const context = useContext4(
|
|
936
|
+
const lastTimeUpdateTimestamp = useRef4(0);
|
|
937
|
+
const context = useContext4(Internals6.BufferingContextReact);
|
|
951
938
|
if (!context) {
|
|
952
939
|
throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
|
|
953
940
|
}
|
|
@@ -1161,7 +1148,7 @@ var usePlayback = ({
|
|
|
1161
1148
|
};
|
|
1162
1149
|
|
|
1163
1150
|
// src/utils/use-element-size.ts
|
|
1164
|
-
import { useCallback as
|
|
1151
|
+
import { useCallback as useCallback2, useEffect as useEffect6, useMemo as useMemo2, useState as useState4 } from "react";
|
|
1165
1152
|
var elementSizeHooks = [];
|
|
1166
1153
|
var updateAllElementsSizes = () => {
|
|
1167
1154
|
for (const listener of elementSizeHooks) {
|
|
@@ -1221,7 +1208,7 @@ var useElementSize = (ref, options) => {
|
|
|
1221
1208
|
});
|
|
1222
1209
|
});
|
|
1223
1210
|
}, [options.shouldApplyCssTransforms]);
|
|
1224
|
-
const updateSize =
|
|
1211
|
+
const updateSize = useCallback2(() => {
|
|
1225
1212
|
if (!ref.current) {
|
|
1226
1213
|
return;
|
|
1227
1214
|
}
|
|
@@ -1291,10 +1278,10 @@ import {
|
|
|
1291
1278
|
useImperativeHandle as useImperativeHandle2,
|
|
1292
1279
|
useLayoutEffect as useLayoutEffect3,
|
|
1293
1280
|
useMemo as useMemo14,
|
|
1294
|
-
useRef as
|
|
1281
|
+
useRef as useRef11,
|
|
1295
1282
|
useState as useState13
|
|
1296
1283
|
} from "react";
|
|
1297
|
-
import { Composition, Internals as
|
|
1284
|
+
import { Composition, Internals as Internals15 } from "remotion";
|
|
1298
1285
|
|
|
1299
1286
|
// src/player-css-classname.ts
|
|
1300
1287
|
var playerCssClassname = (override) => {
|
|
@@ -1305,15 +1292,15 @@ var playerCssClassname = (override) => {
|
|
|
1305
1292
|
import React10, {
|
|
1306
1293
|
Suspense,
|
|
1307
1294
|
forwardRef,
|
|
1308
|
-
useCallback as
|
|
1295
|
+
useCallback as useCallback10,
|
|
1309
1296
|
useContext as useContext5,
|
|
1310
1297
|
useEffect as useEffect12,
|
|
1311
1298
|
useImperativeHandle,
|
|
1312
1299
|
useMemo as useMemo12,
|
|
1313
|
-
useRef as
|
|
1300
|
+
useRef as useRef10,
|
|
1314
1301
|
useState as useState11
|
|
1315
1302
|
} from "react";
|
|
1316
|
-
import { Internals as
|
|
1303
|
+
import { Internals as Internals11 } from "remotion";
|
|
1317
1304
|
|
|
1318
1305
|
// src/error-boundary.tsx
|
|
1319
1306
|
import React3 from "react";
|
|
@@ -1438,7 +1425,7 @@ var RenderWarningIfBlacklist = () => {
|
|
|
1438
1425
|
};
|
|
1439
1426
|
|
|
1440
1427
|
// src/PlayerControls.tsx
|
|
1441
|
-
import { useCallback as
|
|
1428
|
+
import { useCallback as useCallback7, useEffect as useEffect11, useMemo as useMemo9, useRef as useRef8, useState as useState10 } from "react";
|
|
1442
1429
|
|
|
1443
1430
|
// src/DefaultPlayPauseButton.tsx
|
|
1444
1431
|
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
@@ -1455,11 +1442,11 @@ var DefaultPlayPauseButton = ({ playing, buffering }) => {
|
|
|
1455
1442
|
};
|
|
1456
1443
|
|
|
1457
1444
|
// src/MediaVolumeSlider.tsx
|
|
1458
|
-
import { useCallback as
|
|
1459
|
-
import { Internals as
|
|
1445
|
+
import { useCallback as useCallback4, useMemo as useMemo4, useRef as useRef5, useState as useState6 } from "react";
|
|
1446
|
+
import { Internals as Internals7 } from "remotion";
|
|
1460
1447
|
|
|
1461
1448
|
// src/render-volume-slider.tsx
|
|
1462
|
-
import React5, { useCallback as
|
|
1449
|
+
import React5, { useCallback as useCallback3, useMemo as useMemo3, useState as useState5 } from "react";
|
|
1463
1450
|
import { random } from "remotion";
|
|
1464
1451
|
import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
1465
1452
|
var KNOB_SIZE = 12;
|
|
@@ -1493,7 +1480,7 @@ var DefaultVolumeSlider = ({
|
|
|
1493
1480
|
}, [isVertical]);
|
|
1494
1481
|
const randomId = typeof React5.useId === "undefined" ? "volume-slider" : React5.useId();
|
|
1495
1482
|
const [randomClass] = useState5(() => `__remotion-volume-slider-${random(randomId)}`.replace(".", ""));
|
|
1496
|
-
const onVolumeChange =
|
|
1483
|
+
const onVolumeChange = useCallback3((e) => {
|
|
1497
1484
|
setVolume(parseFloat(e.target.value));
|
|
1498
1485
|
}, [setVolume]);
|
|
1499
1486
|
const inputStyle = useMemo3(() => {
|
|
@@ -1570,13 +1557,13 @@ var renderDefaultVolumeSlider = (props) => {
|
|
|
1570
1557
|
import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
1571
1558
|
var VOLUME_SLIDER_WIDTH = 100;
|
|
1572
1559
|
var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, renderVolumeSlider }) => {
|
|
1573
|
-
const [mediaMuted, setMediaMuted] =
|
|
1574
|
-
const [mediaVolume, setMediaVolume] =
|
|
1560
|
+
const [mediaMuted, setMediaMuted] = Internals7.useMediaMutedState();
|
|
1561
|
+
const [mediaVolume, setMediaVolume] = Internals7.useMediaVolumeState();
|
|
1575
1562
|
const [focused, setFocused] = useState6(false);
|
|
1576
|
-
const parentDivRef =
|
|
1577
|
-
const inputRef =
|
|
1563
|
+
const parentDivRef = useRef5(null);
|
|
1564
|
+
const inputRef = useRef5(null);
|
|
1578
1565
|
const hover = useHoverState(parentDivRef, false);
|
|
1579
|
-
const onBlur =
|
|
1566
|
+
const onBlur = useCallback4(() => {
|
|
1580
1567
|
setTimeout(() => {
|
|
1581
1568
|
if (inputRef.current && document.activeElement !== inputRef.current) {
|
|
1582
1569
|
setFocused(false);
|
|
@@ -1584,7 +1571,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
|
|
|
1584
1571
|
}, 10);
|
|
1585
1572
|
}, []);
|
|
1586
1573
|
const isVolume0 = mediaVolume === 0;
|
|
1587
|
-
const onClick =
|
|
1574
|
+
const onClick = useCallback4(() => {
|
|
1588
1575
|
if (isVolume0) {
|
|
1589
1576
|
setMediaVolume(1);
|
|
1590
1577
|
setMediaMuted(false);
|
|
@@ -1615,7 +1602,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
|
|
|
1615
1602
|
padding: 0
|
|
1616
1603
|
};
|
|
1617
1604
|
}, []);
|
|
1618
|
-
const renderDefaultMuteButton =
|
|
1605
|
+
const renderDefaultMuteButton = useCallback4(({ muted, volume }) => {
|
|
1619
1606
|
const isMutedOrZero = muted || volume === 0;
|
|
1620
1607
|
return /* @__PURE__ */ jsx8("button", {
|
|
1621
1608
|
"aria-label": isMutedOrZero ? "Unmute sound" : "Mute sound",
|
|
@@ -1632,7 +1619,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
|
|
|
1632
1619
|
return renderMuteButton ? renderMuteButton({ muted: mediaMuted, volume: mediaVolume }) : renderDefaultMuteButton({ muted: mediaMuted, volume: mediaVolume });
|
|
1633
1620
|
}, [mediaMuted, mediaVolume, renderDefaultMuteButton, renderMuteButton]);
|
|
1634
1621
|
const volumeSlider = useMemo4(() => {
|
|
1635
|
-
return (focused || hover) && !mediaMuted && !
|
|
1622
|
+
return (focused || hover) && !mediaMuted && !Internals7.isIosSafari() ? (renderVolumeSlider ?? renderDefaultVolumeSlider)({
|
|
1636
1623
|
isVertical: displayVerticalVolumeSlider,
|
|
1637
1624
|
volume: mediaVolume,
|
|
1638
1625
|
onBlur: () => setFocused(false),
|
|
@@ -1659,14 +1646,14 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
|
|
|
1659
1646
|
};
|
|
1660
1647
|
|
|
1661
1648
|
// src/PlaybackrateControl.tsx
|
|
1662
|
-
import { useCallback as
|
|
1663
|
-
import { Internals as
|
|
1649
|
+
import { useCallback as useCallback5, useEffect as useEffect9, useMemo as useMemo5, useState as useState8 } from "react";
|
|
1650
|
+
import { Internals as Internals8 } from "remotion";
|
|
1664
1651
|
|
|
1665
1652
|
// src/utils/use-component-visible.ts
|
|
1666
|
-
import { useEffect as useEffect8, useRef as
|
|
1653
|
+
import { useEffect as useEffect8, useRef as useRef6, useState as useState7 } from "react";
|
|
1667
1654
|
function useComponentVisible(initialIsVisible) {
|
|
1668
1655
|
const [isComponentVisible, setIsComponentVisible] = useState7(initialIsVisible);
|
|
1669
|
-
const ref =
|
|
1656
|
+
const ref = useRef6(null);
|
|
1670
1657
|
useEffect8(() => {
|
|
1671
1658
|
const handleClickOutside = (event) => {
|
|
1672
1659
|
if (ref.current && !ref.current.contains(event.target)) {
|
|
@@ -1716,16 +1703,16 @@ var formatPlaybackRate = (rate) => {
|
|
|
1716
1703
|
return str.includes(".") ? str : str + ".0";
|
|
1717
1704
|
};
|
|
1718
1705
|
var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }) => {
|
|
1719
|
-
const onClick =
|
|
1706
|
+
const onClick = useCallback5((e) => {
|
|
1720
1707
|
e.stopPropagation();
|
|
1721
1708
|
e.preventDefault();
|
|
1722
1709
|
onSelect(rate);
|
|
1723
1710
|
}, [onSelect, rate]);
|
|
1724
1711
|
const [hovered, setHovered] = useState8(false);
|
|
1725
|
-
const onMouseEnter =
|
|
1712
|
+
const onMouseEnter = useCallback5(() => {
|
|
1726
1713
|
setHovered(true);
|
|
1727
1714
|
}, []);
|
|
1728
|
-
const onMouseLeave =
|
|
1715
|
+
const onMouseLeave = useCallback5(() => {
|
|
1729
1716
|
setHovered(false);
|
|
1730
1717
|
}, []);
|
|
1731
1718
|
const isFocused = keyboardSelectedRate === rate;
|
|
@@ -1752,7 +1739,7 @@ var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }
|
|
|
1752
1739
|
}, rate);
|
|
1753
1740
|
};
|
|
1754
1741
|
var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
|
|
1755
|
-
const { setPlaybackRate, playbackRate } =
|
|
1742
|
+
const { setPlaybackRate, playbackRate } = Internals8.usePlaybackRate();
|
|
1756
1743
|
const [keyboardSelectedRate, setKeyboardSelectedRate] = useState8(playbackRate);
|
|
1757
1744
|
useEffect9(() => {
|
|
1758
1745
|
const listener = (e) => {
|
|
@@ -1792,7 +1779,7 @@ var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
|
|
|
1792
1779
|
setPlaybackRate,
|
|
1793
1780
|
setIsComponentVisible
|
|
1794
1781
|
]);
|
|
1795
|
-
const onSelect =
|
|
1782
|
+
const onSelect = useCallback5((rate) => {
|
|
1796
1783
|
setPlaybackRate(rate);
|
|
1797
1784
|
setIsComponentVisible(false);
|
|
1798
1785
|
}, [setIsComponentVisible, setPlaybackRate]);
|
|
@@ -1854,8 +1841,8 @@ var button = {
|
|
|
1854
1841
|
};
|
|
1855
1842
|
var PlaybackrateControl = ({ playbackRates, canvasSize }) => {
|
|
1856
1843
|
const { ref, isComponentVisible, setIsComponentVisible } = useComponentVisible(false);
|
|
1857
|
-
const { playbackRate } =
|
|
1858
|
-
const onClick =
|
|
1844
|
+
const { playbackRate } = Internals8.usePlaybackRate();
|
|
1845
|
+
const onClick = useCallback5((e) => {
|
|
1859
1846
|
e.stopPropagation();
|
|
1860
1847
|
e.preventDefault();
|
|
1861
1848
|
setIsComponentVisible((prevIsComponentVisible) => !prevIsComponentVisible);
|
|
@@ -1886,8 +1873,8 @@ var PlaybackrateControl = ({ playbackRates, canvasSize }) => {
|
|
|
1886
1873
|
};
|
|
1887
1874
|
|
|
1888
1875
|
// src/PlayerSeekBar.tsx
|
|
1889
|
-
import { useCallback as
|
|
1890
|
-
import { Internals as
|
|
1876
|
+
import { useCallback as useCallback6, useEffect as useEffect10, useMemo as useMemo6, useRef as useRef7, useState as useState9 } from "react";
|
|
1877
|
+
import { Internals as Internals9, interpolate } from "remotion";
|
|
1891
1878
|
import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
1892
1879
|
var getFrameFromX = (clientX, durationInFrames, width) => {
|
|
1893
1880
|
const pos = clientX;
|
|
@@ -1924,19 +1911,19 @@ var findBodyInWhichDivIsLocated = (div) => {
|
|
|
1924
1911
|
return current;
|
|
1925
1912
|
};
|
|
1926
1913
|
var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFrame }) => {
|
|
1927
|
-
const containerRef =
|
|
1914
|
+
const containerRef = useRef7(null);
|
|
1928
1915
|
const barHovered = useHoverState(containerRef, false);
|
|
1929
1916
|
const size = useElementSize(containerRef, {
|
|
1930
1917
|
triggerOnWindowResize: true,
|
|
1931
1918
|
shouldApplyCssTransforms: true
|
|
1932
1919
|
});
|
|
1933
1920
|
const { seek, play, pause, playing } = usePlayer();
|
|
1934
|
-
const frame =
|
|
1921
|
+
const frame = Internals9.Timeline.useTimelinePosition();
|
|
1935
1922
|
const [dragging, setDragging] = useState9({
|
|
1936
1923
|
dragging: false
|
|
1937
1924
|
});
|
|
1938
1925
|
const width = size?.width ?? 0;
|
|
1939
|
-
const onPointerDown =
|
|
1926
|
+
const onPointerDown = useCallback6((e) => {
|
|
1940
1927
|
if (e.button !== 0) {
|
|
1941
1928
|
return;
|
|
1942
1929
|
}
|
|
@@ -1950,7 +1937,7 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
|
|
|
1950
1937
|
});
|
|
1951
1938
|
onSeekStart();
|
|
1952
1939
|
}, [durationInFrames, width, pause, seek, playing, onSeekStart]);
|
|
1953
|
-
const onPointerMove =
|
|
1940
|
+
const onPointerMove = useCallback6((e) => {
|
|
1954
1941
|
if (!size) {
|
|
1955
1942
|
throw new Error("Player has no size");
|
|
1956
1943
|
}
|
|
@@ -1961,7 +1948,7 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
|
|
|
1961
1948
|
const _frame = getFrameFromX(e.clientX - posLeft, durationInFrames, size.width);
|
|
1962
1949
|
seek(_frame);
|
|
1963
1950
|
}, [dragging.dragging, durationInFrames, seek, size]);
|
|
1964
|
-
const onPointerUp =
|
|
1951
|
+
const onPointerUp = useCallback6(() => {
|
|
1965
1952
|
setDragging({
|
|
1966
1953
|
dragging: false
|
|
1967
1954
|
});
|
|
@@ -2044,7 +2031,7 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
|
|
|
2044
2031
|
|
|
2045
2032
|
// src/PlayerTimeLabel.tsx
|
|
2046
2033
|
import { useMemo as useMemo7 } from "react";
|
|
2047
|
-
import { Internals as
|
|
2034
|
+
import { Internals as Internals10 } from "remotion";
|
|
2048
2035
|
|
|
2049
2036
|
// src/format-time.ts
|
|
2050
2037
|
var formatTime = (timeInSeconds) => {
|
|
@@ -2056,7 +2043,7 @@ var formatTime = (timeInSeconds) => {
|
|
|
2056
2043
|
// src/PlayerTimeLabel.tsx
|
|
2057
2044
|
import { jsxs as jsxs7 } from "react/jsx-runtime";
|
|
2058
2045
|
var PlayerTimeLabel = ({ durationInFrames, maxTimeLabelWidth, fps }) => {
|
|
2059
|
-
const frame =
|
|
2046
|
+
const frame = Internals10.Timeline.useTimelinePosition();
|
|
2060
2047
|
const timeLabel = useMemo7(() => {
|
|
2061
2048
|
return {
|
|
2062
2049
|
color: "white",
|
|
@@ -2216,7 +2203,7 @@ var Controls = ({
|
|
|
2216
2203
|
toggle,
|
|
2217
2204
|
renderCustomControls
|
|
2218
2205
|
}) => {
|
|
2219
|
-
const playButtonRef =
|
|
2206
|
+
const playButtonRef = useRef8(null);
|
|
2220
2207
|
const [supportsFullscreen, setSupportsFullscreen] = useState10(false);
|
|
2221
2208
|
const hovered = useHoverState(containerRef, hideControlsWhenPointerDoesntMove);
|
|
2222
2209
|
const { maxTimeLabelWidth, displayVerticalVolumeSlider } = useVideoControlsResize({
|
|
@@ -2291,14 +2278,14 @@ var Controls = ({
|
|
|
2291
2278
|
return null;
|
|
2292
2279
|
}, [showPlaybackRateControl]);
|
|
2293
2280
|
const customControlsElement = renderCustomControls ? renderCustomControls() : null;
|
|
2294
|
-
const ref =
|
|
2295
|
-
const flexRef =
|
|
2296
|
-
const onPointerDownIfContainer =
|
|
2281
|
+
const ref = useRef8(null);
|
|
2282
|
+
const flexRef = useRef8(null);
|
|
2283
|
+
const onPointerDownIfContainer = useCallback7((e) => {
|
|
2297
2284
|
if (e.target === ref.current || e.target === flexRef.current) {
|
|
2298
2285
|
onPointerDown?.(e);
|
|
2299
2286
|
}
|
|
2300
2287
|
}, [onPointerDown]);
|
|
2301
|
-
const onDoubleClickIfContainer =
|
|
2288
|
+
const onDoubleClickIfContainer = useCallback7((e) => {
|
|
2302
2289
|
if (e.target === ref.current || e.target === flexRef.current) {
|
|
2303
2290
|
onDoubleClick?.(e);
|
|
2304
2291
|
}
|
|
@@ -2406,7 +2393,7 @@ var Controls = ({
|
|
|
2406
2393
|
var IS_NODE = typeof document === "undefined";
|
|
2407
2394
|
|
|
2408
2395
|
// src/utils/use-click-prevention-on-double-click.ts
|
|
2409
|
-
import { useCallback as
|
|
2396
|
+
import { useCallback as useCallback9, useMemo as useMemo11 } from "react";
|
|
2410
2397
|
|
|
2411
2398
|
// src/utils/cancellable-promise.ts
|
|
2412
2399
|
var cancellablePromise = (promise) => {
|
|
@@ -2434,16 +2421,16 @@ var cancellablePromise = (promise) => {
|
|
|
2434
2421
|
var delay = (n) => new Promise((resolve) => setTimeout(resolve, n));
|
|
2435
2422
|
|
|
2436
2423
|
// src/utils/use-cancellable-promises.ts
|
|
2437
|
-
import { useCallback as
|
|
2424
|
+
import { useCallback as useCallback8, useMemo as useMemo10, useRef as useRef9 } from "react";
|
|
2438
2425
|
var useCancellablePromises = () => {
|
|
2439
|
-
const pendingPromises =
|
|
2440
|
-
const appendPendingPromise =
|
|
2426
|
+
const pendingPromises = useRef9([]);
|
|
2427
|
+
const appendPendingPromise = useCallback8((promise) => {
|
|
2441
2428
|
pendingPromises.current = [...pendingPromises.current, promise];
|
|
2442
2429
|
}, []);
|
|
2443
|
-
const removePendingPromise =
|
|
2430
|
+
const removePendingPromise = useCallback8((promise) => {
|
|
2444
2431
|
pendingPromises.current = pendingPromises.current.filter((p) => p !== promise);
|
|
2445
2432
|
}, []);
|
|
2446
|
-
const clearPendingPromises =
|
|
2433
|
+
const clearPendingPromises = useCallback8(() => pendingPromises.current.map((p) => p.cancel()), []);
|
|
2447
2434
|
const api = useMemo10(() => ({
|
|
2448
2435
|
appendPendingPromise,
|
|
2449
2436
|
removePendingPromise,
|
|
@@ -2455,7 +2442,7 @@ var useCancellablePromises = () => {
|
|
|
2455
2442
|
// src/utils/use-click-prevention-on-double-click.ts
|
|
2456
2443
|
var useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFullscreen) => {
|
|
2457
2444
|
const api = useCancellablePromises();
|
|
2458
|
-
const handleClick =
|
|
2445
|
+
const handleClick = useCallback9(async (e) => {
|
|
2459
2446
|
if (e instanceof PointerEvent ? e.pointerType === "touch" : e.nativeEvent.pointerType === "touch") {
|
|
2460
2447
|
onClick(e);
|
|
2461
2448
|
return;
|
|
@@ -2475,14 +2462,14 @@ var useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFull
|
|
|
2475
2462
|
}
|
|
2476
2463
|
}
|
|
2477
2464
|
}, [api, onClick]);
|
|
2478
|
-
const handlePointerDown =
|
|
2465
|
+
const handlePointerDown = useCallback9(() => {
|
|
2479
2466
|
document.addEventListener("pointerup", (newEvt) => {
|
|
2480
2467
|
handleClick(newEvt);
|
|
2481
2468
|
}, {
|
|
2482
2469
|
once: true
|
|
2483
2470
|
});
|
|
2484
2471
|
}, [handleClick]);
|
|
2485
|
-
const handleDoubleClick =
|
|
2472
|
+
const handleDoubleClick = useCallback9(() => {
|
|
2486
2473
|
api.clearPendingPromises();
|
|
2487
2474
|
onDoubleClick();
|
|
2488
2475
|
}, [api, onDoubleClick]);
|
|
@@ -2544,9 +2531,9 @@ var PlayerUI = ({
|
|
|
2544
2531
|
overrideInternalClassName,
|
|
2545
2532
|
noSuspense
|
|
2546
2533
|
}, ref) => {
|
|
2547
|
-
const config =
|
|
2548
|
-
const video =
|
|
2549
|
-
const container =
|
|
2534
|
+
const config = Internals11.useUnsafeVideoConfig();
|
|
2535
|
+
const video = Internals11.useVideo();
|
|
2536
|
+
const container = useRef10(null);
|
|
2550
2537
|
const canvasSize = useElementSize(container, {
|
|
2551
2538
|
triggerOnWindowResize: false,
|
|
2552
2539
|
shouldApplyCssTransforms: false
|
|
@@ -2563,7 +2550,7 @@ var PlayerUI = ({
|
|
|
2563
2550
|
}, []);
|
|
2564
2551
|
const player = usePlayer();
|
|
2565
2552
|
const playerToggle = player.toggle;
|
|
2566
|
-
const { mediaMuted, mediaVolume } = useContext5(
|
|
2553
|
+
const { mediaMuted, mediaVolume } = useContext5(Internals11.MediaVolumeContext);
|
|
2567
2554
|
useEffect12(() => {
|
|
2568
2555
|
player.emitter.dispatchVolumeChange(mediaVolume);
|
|
2569
2556
|
}, [player.emitter, mediaVolume]);
|
|
@@ -2605,10 +2592,10 @@ var PlayerUI = ({
|
|
|
2605
2592
|
document.removeEventListener("webkitfullscreenchange", onFullscreenChange);
|
|
2606
2593
|
};
|
|
2607
2594
|
}, []);
|
|
2608
|
-
const toggle =
|
|
2595
|
+
const toggle = useCallback10((e) => {
|
|
2609
2596
|
playerToggle(e);
|
|
2610
2597
|
}, [playerToggle]);
|
|
2611
|
-
const requestFullscreen =
|
|
2598
|
+
const requestFullscreen = useCallback10(() => {
|
|
2612
2599
|
if (!allowFullscreen) {
|
|
2613
2600
|
throw new Error("allowFullscreen is false");
|
|
2614
2601
|
}
|
|
@@ -2624,7 +2611,7 @@ var PlayerUI = ({
|
|
|
2624
2611
|
container.current.requestFullscreen();
|
|
2625
2612
|
}
|
|
2626
2613
|
}, [allowFullscreen, supportsFullScreen]);
|
|
2627
|
-
const exitFullscreen =
|
|
2614
|
+
const exitFullscreen = useCallback10(() => {
|
|
2628
2615
|
if (document.webkitExitFullscreen) {
|
|
2629
2616
|
document.webkitExitFullscreen();
|
|
2630
2617
|
} else {
|
|
@@ -2668,7 +2655,7 @@ var PlayerUI = ({
|
|
|
2668
2655
|
});
|
|
2669
2656
|
}, [canvasSize, config]);
|
|
2670
2657
|
const scale = layout?.scale ?? 1;
|
|
2671
|
-
const initialScaleIgnored =
|
|
2658
|
+
const initialScaleIgnored = useRef10(false);
|
|
2672
2659
|
useEffect12(() => {
|
|
2673
2660
|
if (!initialScaleIgnored.current) {
|
|
2674
2661
|
initialScaleIgnored.current = true;
|
|
@@ -2676,7 +2663,7 @@ var PlayerUI = ({
|
|
|
2676
2663
|
}
|
|
2677
2664
|
player.emitter.dispatchScaleChange(scale);
|
|
2678
2665
|
}, [player.emitter, scale]);
|
|
2679
|
-
const { setMediaVolume, setMediaMuted } = useContext5(
|
|
2666
|
+
const { setMediaVolume, setMediaMuted } = useContext5(Internals11.SetMediaVolumeContext);
|
|
2680
2667
|
const [showBufferIndicator, setShowBufferState] = useState11(false);
|
|
2681
2668
|
useEffect12(() => {
|
|
2682
2669
|
let timeout = null;
|
|
@@ -2817,32 +2804,32 @@ var PlayerUI = ({
|
|
|
2817
2804
|
}, [config, layout, overflowVisible, scale]);
|
|
2818
2805
|
const playerPause = player.pause;
|
|
2819
2806
|
const playerDispatchError = player.emitter.dispatchError;
|
|
2820
|
-
const onError =
|
|
2807
|
+
const onError = useCallback10((error) => {
|
|
2821
2808
|
playerPause();
|
|
2822
2809
|
playerDispatchError(error);
|
|
2823
2810
|
}, [playerDispatchError, playerPause]);
|
|
2824
|
-
const onFullscreenButtonClick =
|
|
2811
|
+
const onFullscreenButtonClick = useCallback10((e) => {
|
|
2825
2812
|
e.stopPropagation();
|
|
2826
2813
|
requestFullscreen();
|
|
2827
2814
|
}, [requestFullscreen]);
|
|
2828
|
-
const onExitFullscreenButtonClick =
|
|
2815
|
+
const onExitFullscreenButtonClick = useCallback10((e) => {
|
|
2829
2816
|
e.stopPropagation();
|
|
2830
2817
|
exitFullscreen();
|
|
2831
2818
|
}, [exitFullscreen]);
|
|
2832
|
-
const onSingleClick =
|
|
2819
|
+
const onSingleClick = useCallback10((e) => {
|
|
2833
2820
|
const rightClick = e instanceof MouseEvent ? e.button === 2 : e.nativeEvent.button;
|
|
2834
2821
|
if (rightClick) {
|
|
2835
2822
|
return;
|
|
2836
2823
|
}
|
|
2837
2824
|
toggle(e);
|
|
2838
2825
|
}, [toggle]);
|
|
2839
|
-
const onSeekStart =
|
|
2826
|
+
const onSeekStart = useCallback10(() => {
|
|
2840
2827
|
setSeeking(true);
|
|
2841
2828
|
}, []);
|
|
2842
|
-
const onSeekEnd =
|
|
2829
|
+
const onSeekEnd = useCallback10(() => {
|
|
2843
2830
|
setSeeking(false);
|
|
2844
2831
|
}, []);
|
|
2845
|
-
const onDoubleClick =
|
|
2832
|
+
const onDoubleClick = useCallback10(() => {
|
|
2846
2833
|
if (isFullscreen) {
|
|
2847
2834
|
exitFullscreen();
|
|
2848
2835
|
} else {
|
|
@@ -2902,7 +2889,7 @@ var PlayerUI = ({
|
|
|
2902
2889
|
VideoComponent ? /* @__PURE__ */ jsx12(ErrorBoundary, {
|
|
2903
2890
|
onError,
|
|
2904
2891
|
errorFallback,
|
|
2905
|
-
children: /* @__PURE__ */ jsx12(
|
|
2892
|
+
children: /* @__PURE__ */ jsx12(Internals11.CurrentScaleContext.Provider, {
|
|
2906
2893
|
value: currentScale,
|
|
2907
2894
|
children: /* @__PURE__ */ jsx12(VideoComponent, {
|
|
2908
2895
|
...video?.props ?? {},
|
|
@@ -2984,11 +2971,11 @@ var PlayerUI = ({
|
|
|
2984
2971
|
var PlayerUI_default = forwardRef(PlayerUI);
|
|
2985
2972
|
|
|
2986
2973
|
// src/SharedPlayerContext.tsx
|
|
2987
|
-
import { useCallback as
|
|
2988
|
-
import { Internals as
|
|
2974
|
+
import { useCallback as useCallback11, useMemo as useMemo13, useState as useState12 } from "react";
|
|
2975
|
+
import { Internals as Internals13 } from "remotion";
|
|
2989
2976
|
|
|
2990
2977
|
// src/volume-persistence.ts
|
|
2991
|
-
import { Internals as
|
|
2978
|
+
import { Internals as Internals12 } from "remotion";
|
|
2992
2979
|
var DEFAULT_VOLUME_PERSISTENCE_KEY = "remotion.volumePreference";
|
|
2993
2980
|
var persistVolume = (volume, logLevel, volumePersistenceKey) => {
|
|
2994
2981
|
if (typeof window === "undefined") {
|
|
@@ -2997,7 +2984,7 @@ var persistVolume = (volume, logLevel, volumePersistenceKey) => {
|
|
|
2997
2984
|
try {
|
|
2998
2985
|
window.localStorage.setItem(volumePersistenceKey ?? DEFAULT_VOLUME_PERSISTENCE_KEY, String(volume));
|
|
2999
2986
|
} catch (e) {
|
|
3000
|
-
|
|
2987
|
+
Internals12.Log.error({ logLevel, tag: null }, "Could not persist volume", e);
|
|
3001
2988
|
}
|
|
3002
2989
|
};
|
|
3003
2990
|
var getPreferredVolume = (volumePersistenceKey) => {
|
|
@@ -3085,7 +3072,7 @@ var SharedPlayerContexts = ({
|
|
|
3085
3072
|
mediaVolume
|
|
3086
3073
|
};
|
|
3087
3074
|
}, [mediaMuted, mediaVolume]);
|
|
3088
|
-
const setMediaVolumeAndPersist =
|
|
3075
|
+
const setMediaVolumeAndPersist = useCallback11((vol) => {
|
|
3089
3076
|
setMediaVolume(vol);
|
|
3090
3077
|
if (persistVolumeToStorage) {
|
|
3091
3078
|
persistVolume(vol, logLevel, volumePersistenceKey ?? null);
|
|
@@ -3112,30 +3099,30 @@ var SharedPlayerContexts = ({
|
|
|
3112
3099
|
isReadOnlyStudio: false
|
|
3113
3100
|
};
|
|
3114
3101
|
}, []);
|
|
3115
|
-
return /* @__PURE__ */ jsx13(
|
|
3102
|
+
return /* @__PURE__ */ jsx13(Internals13.RemotionEnvironmentContext.Provider, {
|
|
3116
3103
|
value: env,
|
|
3117
|
-
children: /* @__PURE__ */ jsx13(
|
|
3104
|
+
children: /* @__PURE__ */ jsx13(Internals13.LogLevelContext.Provider, {
|
|
3118
3105
|
value: logLevelContext,
|
|
3119
|
-
children: /* @__PURE__ */ jsx13(
|
|
3120
|
-
children: /* @__PURE__ */ jsx13(
|
|
3106
|
+
children: /* @__PURE__ */ jsx13(Internals13.CanUseRemotionHooksProvider, {
|
|
3107
|
+
children: /* @__PURE__ */ jsx13(Internals13.AbsoluteTimeContext.Provider, {
|
|
3121
3108
|
value: timelineContext,
|
|
3122
|
-
children: /* @__PURE__ */ jsx13(
|
|
3109
|
+
children: /* @__PURE__ */ jsx13(Internals13.PlaybackRateContext.Provider, {
|
|
3123
3110
|
value: playbackRateContext,
|
|
3124
|
-
children: /* @__PURE__ */ jsx13(
|
|
3111
|
+
children: /* @__PURE__ */ jsx13(Internals13.TimelineContext.Provider, {
|
|
3125
3112
|
value: timelineContext,
|
|
3126
|
-
children: /* @__PURE__ */ jsx13(
|
|
3113
|
+
children: /* @__PURE__ */ jsx13(Internals13.CompositionManager.Provider, {
|
|
3127
3114
|
value: compositionManagerContext,
|
|
3128
|
-
children: /* @__PURE__ */ jsx13(
|
|
3129
|
-
children: /* @__PURE__ */ jsx13(
|
|
3130
|
-
children: /* @__PURE__ */ jsx13(
|
|
3115
|
+
children: /* @__PURE__ */ jsx13(Internals13.PrefetchProvider, {
|
|
3116
|
+
children: /* @__PURE__ */ jsx13(Internals13.DurationsContextProvider, {
|
|
3117
|
+
children: /* @__PURE__ */ jsx13(Internals13.MediaVolumeContext.Provider, {
|
|
3131
3118
|
value: mediaVolumeContextValue,
|
|
3132
|
-
children: /* @__PURE__ */ jsx13(
|
|
3119
|
+
children: /* @__PURE__ */ jsx13(Internals13.SetMediaVolumeContext.Provider, {
|
|
3133
3120
|
value: setMediaVolumeContextValue,
|
|
3134
|
-
children: /* @__PURE__ */ jsx13(
|
|
3135
|
-
children: /* @__PURE__ */ jsx13(
|
|
3121
|
+
children: /* @__PURE__ */ jsx13(Internals13.BufferingProvider, {
|
|
3122
|
+
children: /* @__PURE__ */ jsx13(Internals13.SharedAudioContextProvider, {
|
|
3136
3123
|
audioLatencyHint,
|
|
3137
3124
|
audioEnabled,
|
|
3138
|
-
children: /* @__PURE__ */ jsx13(
|
|
3125
|
+
children: /* @__PURE__ */ jsx13(Internals13.SharedAudioTagsContextProvider, {
|
|
3139
3126
|
numberOfAudioTags: numberOfSharedAudioTags,
|
|
3140
3127
|
children
|
|
3141
3128
|
})
|
|
@@ -3155,7 +3142,7 @@ var SharedPlayerContexts = ({
|
|
|
3155
3142
|
};
|
|
3156
3143
|
|
|
3157
3144
|
// src/use-remotion-license-acknowledge.ts
|
|
3158
|
-
import { Internals as
|
|
3145
|
+
import { Internals as Internals14 } from "remotion";
|
|
3159
3146
|
var warningShown = false;
|
|
3160
3147
|
var acknowledgeRemotionLicenseMessage = (acknowledge, logLevel) => {
|
|
3161
3148
|
if (acknowledge) {
|
|
@@ -3165,7 +3152,7 @@ var acknowledgeRemotionLicenseMessage = (acknowledge, logLevel) => {
|
|
|
3165
3152
|
return;
|
|
3166
3153
|
}
|
|
3167
3154
|
warningShown = true;
|
|
3168
|
-
|
|
3155
|
+
Internals14.Log.warn({ logLevel, tag: null }, "Note: Some companies are required to obtain a license to use Remotion. See: https://remotion.dev/license\nPass the `acknowledgeRemotionLicense` prop to `<Player />` function to make this message disappear.");
|
|
3169
3156
|
};
|
|
3170
3157
|
|
|
3171
3158
|
// src/utils/validate-in-out-frame.ts
|
|
@@ -3340,7 +3327,7 @@ var PlayerFn = ({
|
|
|
3340
3327
|
throw new TypeError(`'component' must not be the 'Composition' component. Pass your own React component directly, and set the duration, fps and dimensions as separate props. See https://www.remotion.dev/docs/player/examples for an example.`);
|
|
3341
3328
|
}
|
|
3342
3329
|
useState13(() => acknowledgeRemotionLicenseMessage(Boolean(acknowledgeRemotionLicense), logLevel));
|
|
3343
|
-
const component =
|
|
3330
|
+
const component = Internals15.useLazyComponent({
|
|
3344
3331
|
compProps: componentProps,
|
|
3345
3332
|
componentName: "Player",
|
|
3346
3333
|
noSuspense: Boolean(noSuspense)
|
|
@@ -3351,9 +3338,9 @@ var PlayerFn = ({
|
|
|
3351
3338
|
}));
|
|
3352
3339
|
const [playing, setPlaying] = useState13(false);
|
|
3353
3340
|
const [rootId] = useState13("player-comp");
|
|
3354
|
-
const rootRef =
|
|
3355
|
-
const audioAndVideoTags =
|
|
3356
|
-
const imperativePlaying =
|
|
3341
|
+
const rootRef = useRef11(null);
|
|
3342
|
+
const audioAndVideoTags = useRef11([]);
|
|
3343
|
+
const imperativePlaying = useRef11(false);
|
|
3357
3344
|
const [currentPlaybackRate, setCurrentPlaybackRate] = useState13(playbackRate);
|
|
3358
3345
|
if (typeof compositionHeight !== "number") {
|
|
3359
3346
|
throw new TypeError(`'compositionHeight' must be a number but got '${typeof compositionHeight}' instead`);
|
|
@@ -3413,7 +3400,7 @@ var PlayerFn = ({
|
|
|
3413
3400
|
}, [playbackRate]);
|
|
3414
3401
|
useImperativeHandle2(ref, () => rootRef.current, []);
|
|
3415
3402
|
useState13(() => {
|
|
3416
|
-
|
|
3403
|
+
Internals15.playbackLogging({
|
|
3417
3404
|
logLevel,
|
|
3418
3405
|
message: `[player] Mounting <Player>. User agent = ${typeof navigator === "undefined" ? "server" : navigator.userAgent}`,
|
|
3419
3406
|
tag: "player",
|
|
@@ -3443,7 +3430,7 @@ var PlayerFn = ({
|
|
|
3443
3430
|
}, [setFrame]);
|
|
3444
3431
|
if (typeof window !== "undefined") {
|
|
3445
3432
|
useLayoutEffect3(() => {
|
|
3446
|
-
|
|
3433
|
+
Internals15.CSSUtils.injectCSS(Internals15.CSSUtils.makeDefaultPreviewCSS(`.${playerCssClassname(overrideInternalClassName)}`, "#fff"));
|
|
3447
3434
|
}, [overrideInternalClassName]);
|
|
3448
3435
|
}
|
|
3449
3436
|
const actualInputProps = useMemo14(() => inputProps ?? {}, [inputProps]);
|
|
@@ -3452,7 +3439,7 @@ var PlayerFn = ({
|
|
|
3452
3439
|
mode: "prevent-media-session"
|
|
3453
3440
|
};
|
|
3454
3441
|
}, [passedBrowserMediaControlsBehavior]);
|
|
3455
|
-
return /* @__PURE__ */ jsx14(
|
|
3442
|
+
return /* @__PURE__ */ jsx14(Internals15.IsPlayerContextProvider, {
|
|
3456
3443
|
children: /* @__PURE__ */ jsx14(SharedPlayerContexts, {
|
|
3457
3444
|
timelineContext: timelineContextValue,
|
|
3458
3445
|
playbackRateContext: playbackRateContextValue,
|
|
@@ -3469,7 +3456,7 @@ var PlayerFn = ({
|
|
|
3469
3456
|
initialVolume,
|
|
3470
3457
|
inputProps: actualInputProps,
|
|
3471
3458
|
audioEnabled: true,
|
|
3472
|
-
children: /* @__PURE__ */ jsx14(
|
|
3459
|
+
children: /* @__PURE__ */ jsx14(Internals15.SetTimelineContext.Provider, {
|
|
3473
3460
|
value: setTimelineContextValue,
|
|
3474
3461
|
children: /* @__PURE__ */ jsx14(PlayerEmitterProvider, {
|
|
3475
3462
|
currentPlaybackRate,
|
|
@@ -3527,21 +3514,21 @@ import {
|
|
|
3527
3514
|
useImperativeHandle as useImperativeHandle4,
|
|
3528
3515
|
useLayoutEffect as useLayoutEffect4,
|
|
3529
3516
|
useMemo as useMemo17,
|
|
3530
|
-
useRef as
|
|
3517
|
+
useRef as useRef13,
|
|
3531
3518
|
useState as useState14
|
|
3532
3519
|
} from "react";
|
|
3533
|
-
import { Internals as
|
|
3520
|
+
import { Internals as Internals17, random as random2 } from "remotion";
|
|
3534
3521
|
|
|
3535
3522
|
// src/ThumbnailUI.tsx
|
|
3536
3523
|
import React13, {
|
|
3537
3524
|
forwardRef as forwardRef3,
|
|
3538
3525
|
Suspense as Suspense2,
|
|
3539
|
-
useCallback as
|
|
3526
|
+
useCallback as useCallback12,
|
|
3540
3527
|
useImperativeHandle as useImperativeHandle3,
|
|
3541
3528
|
useMemo as useMemo16,
|
|
3542
|
-
useRef as
|
|
3529
|
+
useRef as useRef12
|
|
3543
3530
|
} from "react";
|
|
3544
|
-
import { Internals as
|
|
3531
|
+
import { Internals as Internals16 } from "remotion";
|
|
3545
3532
|
|
|
3546
3533
|
// src/use-thumbnail.ts
|
|
3547
3534
|
import { useContext as useContext6, useMemo as useMemo15 } from "react";
|
|
@@ -3575,9 +3562,9 @@ var ThumbnailUI = ({
|
|
|
3575
3562
|
noSuspense,
|
|
3576
3563
|
overrideInternalClassName
|
|
3577
3564
|
}, ref) => {
|
|
3578
|
-
const config =
|
|
3579
|
-
const video =
|
|
3580
|
-
const container =
|
|
3565
|
+
const config = Internals16.useUnsafeVideoConfig();
|
|
3566
|
+
const video = Internals16.useVideo();
|
|
3567
|
+
const container = useRef12(null);
|
|
3581
3568
|
const canvasSize = useElementSize(container, {
|
|
3582
3569
|
triggerOnWindowResize: false,
|
|
3583
3570
|
shouldApplyCssTransforms: false
|
|
@@ -3624,7 +3611,7 @@ var ThumbnailUI = ({
|
|
|
3624
3611
|
overflowVisible
|
|
3625
3612
|
});
|
|
3626
3613
|
}, [config, layout, overflowVisible, scale]);
|
|
3627
|
-
const onError =
|
|
3614
|
+
const onError = useCallback12((error) => {
|
|
3628
3615
|
thumbnail.emitter.dispatchError(error);
|
|
3629
3616
|
}, [thumbnail.emitter]);
|
|
3630
3617
|
const loadingMarkup = useMemo16(() => {
|
|
@@ -3651,7 +3638,7 @@ var ThumbnailUI = ({
|
|
|
3651
3638
|
children: VideoComponent ? /* @__PURE__ */ jsx15(ErrorBoundary, {
|
|
3652
3639
|
onError,
|
|
3653
3640
|
errorFallback,
|
|
3654
|
-
children: /* @__PURE__ */ jsx15(
|
|
3641
|
+
children: /* @__PURE__ */ jsx15(Internals16.CurrentScaleContext.Provider, {
|
|
3655
3642
|
value: currentScaleContext,
|
|
3656
3643
|
children: /* @__PURE__ */ jsx15(VideoComponent, {
|
|
3657
3644
|
...video?.props ?? {},
|
|
@@ -3706,7 +3693,7 @@ var ThumbnailFn = ({
|
|
|
3706
3693
|
}, []);
|
|
3707
3694
|
}
|
|
3708
3695
|
const [thumbnailId] = useState14(() => String(random2(null)));
|
|
3709
|
-
const rootRef =
|
|
3696
|
+
const rootRef = useRef13(null);
|
|
3710
3697
|
const timelineState = useMemo17(() => {
|
|
3711
3698
|
const value = {
|
|
3712
3699
|
playing: false,
|
|
@@ -3730,7 +3717,7 @@ var ThumbnailFn = ({
|
|
|
3730
3717
|
};
|
|
3731
3718
|
}, []);
|
|
3732
3719
|
useImperativeHandle4(ref, () => rootRef.current, []);
|
|
3733
|
-
const Component =
|
|
3720
|
+
const Component = Internals17.useLazyComponent({
|
|
3734
3721
|
compProps: componentProps,
|
|
3735
3722
|
componentName: "Thumbnail",
|
|
3736
3723
|
noSuspense: Boolean(noSuspense)
|
|
@@ -3739,7 +3726,7 @@ var ThumbnailFn = ({
|
|
|
3739
3726
|
const passedInputProps = useMemo17(() => {
|
|
3740
3727
|
return inputProps ?? {};
|
|
3741
3728
|
}, [inputProps]);
|
|
3742
|
-
return /* @__PURE__ */ jsx16(
|
|
3729
|
+
return /* @__PURE__ */ jsx16(Internals17.IsPlayerContextProvider, {
|
|
3743
3730
|
children: /* @__PURE__ */ jsx16(SharedPlayerContexts, {
|
|
3744
3731
|
timelineContext: timelineState,
|
|
3745
3732
|
playbackRateContext,
|
|
@@ -3785,8 +3772,7 @@ var PlayerInternals = {
|
|
|
3785
3772
|
useHoverState,
|
|
3786
3773
|
updateAllElementsSizes,
|
|
3787
3774
|
PlayerEmitterProvider,
|
|
3788
|
-
BufferingIndicator
|
|
3789
|
-
useFrameImperative
|
|
3775
|
+
BufferingIndicator
|
|
3790
3776
|
};
|
|
3791
3777
|
export {
|
|
3792
3778
|
Thumbnail,
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"url": "https://github.com/remotion-dev/remotion/tree/main/packages/player"
|
|
4
4
|
},
|
|
5
5
|
"name": "@remotion/player",
|
|
6
|
-
"version": "4.0.
|
|
6
|
+
"version": "4.0.461",
|
|
7
7
|
"description": "React component for embedding a Remotion preview into your app",
|
|
8
8
|
"main": "dist/cjs/index.js",
|
|
9
9
|
"types": "dist/cjs/index.d.ts",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
],
|
|
37
37
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"remotion": "4.0.
|
|
39
|
+
"remotion": "4.0.461"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|
|
42
42
|
"react": ">=16.8.0",
|
|
@@ -45,12 +45,12 @@
|
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@testing-library/react": "16.1.0",
|
|
47
47
|
"@happy-dom/global-registrator": "14.5.1",
|
|
48
|
-
"csstype": "
|
|
48
|
+
"csstype": "3.2.3",
|
|
49
49
|
"react": "19.2.3",
|
|
50
50
|
"react-dom": "19.2.3",
|
|
51
51
|
"webpack": "5.105.0",
|
|
52
52
|
"zod": "4.3.6",
|
|
53
|
-
"@remotion/eslint-config-internal": "4.0.
|
|
53
|
+
"@remotion/eslint-config-internal": "4.0.461",
|
|
54
54
|
"eslint": "9.19.0",
|
|
55
55
|
"@typescript/native-preview": "7.0.0-dev.20260217.1"
|
|
56
56
|
},
|