UNPKG

4.21 kBJavaScriptView Raw
1"use strict";
2Object.defineProperty(exports, "__esModule", { value: true });
3exports.OffthreadVideoForRendering = void 0;
4const jsx_runtime_1 = require("react/jsx-runtime");
5const react_1 = require("react");
6const absolute_src_1 = require("../absolute-src");
7const use_audio_frame_1 = require("../audio/use-audio-frame");
8const CompositionManager_1 = require("../CompositionManager");
9const Img_1 = require("../Img");
10const random_1 = require("../random");
11const sequencing_1 = require("../sequencing");
12const use_frame_1 = require("../use-frame");
13const use_unsafe_video_config_1 = require("../use-unsafe-video-config");
14const volume_prop_1 = require("../volume-prop");
15const get_current_time_1 = require("./get-current-time");
16const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate, src, muted, ...props }) => {
17 const absoluteFrame = (0, use_frame_1.useAbsoluteCurrentFrame)();
18 const frame = (0, use_frame_1.useCurrentFrame)();
19 const volumePropsFrame = (0, use_audio_frame_1.useFrameForVolumeProp)();
20 const videoConfig = (0, use_unsafe_video_config_1.useUnsafeVideoConfig)();
21 const sequenceContext = (0, react_1.useContext)(sequencing_1.SequenceContext);
22 const mediaStartsAt = (0, use_audio_frame_1.useMediaStartsAt)();
23 const { registerAsset, unregisterAsset } = (0, react_1.useContext)(CompositionManager_1.CompositionManager);
24 if (!src) {
25 throw new TypeError('No `src` was passed to <OffthreadVideo>.');
26 }
27 // Generate a string that's as unique as possible for this asset
28 // but at the same time the same on all threads
29 const id = (0, react_1.useMemo)(() => `video-${(0, random_1.random)(src !== null && src !== void 0 ? src : '')}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames}-muted:${muted}`, [
30 src,
31 muted,
32 sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom,
33 sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom,
34 sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames,
35 ]);
36 if (!videoConfig) {
37 throw new Error('No video config found');
38 }
39 const volume = (0, volume_prop_1.evaluateVolume)({
40 volume: volumeProp,
41 frame: volumePropsFrame,
42 mediaVolume: 1,
43 });
44 (0, react_1.useEffect)(() => {
45 if (!src) {
46 throw new Error('No src passed');
47 }
48 if (muted) {
49 return;
50 }
51 registerAsset({
52 type: 'video',
53 src: (0, absolute_src_1.getAbsoluteSrc)(src),
54 id,
55 frame: absoluteFrame,
56 volume,
57 mediaFrame: frame,
58 playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
59 });
60 return () => unregisterAsset(id);
61 }, [
62 muted,
63 src,
64 registerAsset,
65 id,
66 unregisterAsset,
67 volume,
68 frame,
69 absoluteFrame,
70 playbackRate,
71 ]);
72 const currentTime = (0, react_1.useMemo)(() => {
73 return ((0, get_current_time_1.getExpectedMediaFrameUncorrected)({
74 frame,
75 playbackRate: playbackRate || 1,
76 startFrom: -mediaStartsAt,
77 }) / videoConfig.fps);
78 }, [frame, mediaStartsAt, playbackRate, videoConfig.fps]);
79 const actualSrc = (0, react_1.useMemo)(() => {
80 return `http://localhost:${window.remotion_proxyPort}/proxy?src=${encodeURIComponent((0, absolute_src_1.getAbsoluteSrc)(src))}&time=${encodeURIComponent(currentTime)}`;
81 }, [currentTime, src]);
82 const onErr = (0, react_1.useCallback)((e) => {
83 onError === null || onError === void 0 ? void 0 : onError(e);
84 }, [onError]);
85 return (0, jsx_runtime_1.jsx)(Img_1.Img, { src: actualSrc, ...props, onError: onErr }, void 0);
86};
87exports.OffthreadVideoForRendering = OffthreadVideoForRendering;