remotion/dist/cjs/use-media-in-timeline.js

Make videos programmatically

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useMediaInTimeline = exports.useBasicMediaInTimeline = void 0;
const react_1 = require("react");
const use_audio_frame_js_1 = require("./audio/use-audio-frame.js");
const get_asset_file_name_js_1 = require("./get-asset-file-name.js");
const get_timeline_duration_js_1 = require("./get-timeline-duration.js");
const SequenceContext_js_1 = require("./SequenceContext.js");
const SequenceManager_js_1 = require("./SequenceManager.js");
const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
const use_sequence_registration_js_1 = require("./use-sequence-registration.js");
const use_video_config_js_1 = require("./use-video-config.js");
const volume_prop_js_1 = require("./volume-prop.js");
const didWarn = {};
const warnOnce = (message) => {
    if (didWarn[message]) {
        return;
    }
    // eslint-disable-next-line no-console
    console.warn(message);
    didWarn[message] = true;
};
const useBasicMediaInTimeline = ({ volume, mediaVolume, mediaType, src, displayName, trimBefore, trimAfter, playbackRate, sequenceDurationInFrames, mediaStartsAt, loop, muted, }) => {
    var _a;
    if (!src) {
        throw new Error('No src passed');
    }
    const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
    const [initialVolume] = (0, react_1.useState)(() => volume);
    const duration = (0, get_timeline_duration_js_1.getTimelineDuration)({
        compositionDurationInFrames: sequenceDurationInFrames,
        playbackRate,
        trimBefore,
        trimAfter,
        parentSequenceDurationInFrames: (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.durationInFrames) !== null && _a !== void 0 ? _a : null,
        loop,
    });
    const volumes = (0, react_1.useMemo)(() => {
        if (typeof volume === 'number') {
            return volume;
        }
        if (typeof volume !== 'function') {
            return (0, volume_prop_js_1.evaluateVolume)({
                frame: 0,
                volume,
                mediaVolume,
            });
        }
        return new Array(Math.floor(Math.max(0, duration + mediaStartsAt)))
            .fill(true)
            .map((_, i) => {
            return (0, volume_prop_js_1.evaluateVolume)({
                frame: i + mediaStartsAt,
                volume,
                mediaVolume,
            });
        })
            .join(',');
    }, [duration, mediaStartsAt, volume, mediaVolume]);
    (0, react_1.useEffect)(() => {
        if (typeof volume === 'number' && volume !== initialVolume) {
            warnOnce(`Remotion: The ${mediaType} with src ${src} has changed it's volume. Prefer the callback syntax for setting volume to get better timeline display: https://www.remotion.dev/docs/audio/volume`);
        }
    }, [initialVolume, mediaType, src, volume]);
    const doesVolumeChange = typeof volume === 'function';
    const startMediaFrom = 0 - mediaStartsAt + (trimBefore !== null && trimBefore !== void 0 ? trimBefore : 0);
    const memoizedResult = (0, react_1.useMemo)(() => {
        return {
            volumes,
            duration,
            doesVolumeChange,
            finalDisplayName: displayName !== null && displayName !== void 0 ? displayName : (0, get_asset_file_name_js_1.getAssetDisplayName)(src),
            startMediaFrom,
            src,
            playbackRate,
            muted,
        };
    }, [
        volumes,
        duration,
        doesVolumeChange,
        displayName,
        src,
        startMediaFrom,
        playbackRate,
        muted,
    ]);
    return memoizedResult;
};
exports.useBasicMediaInTimeline = useBasicMediaInTimeline;
const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, getStack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, documentationLink, refForOutline, muted, }) => {
    var _a, _b;
    const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
    const startsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
    const sequenceRegistrationEnabled = (0, react_1.useContext)(SequenceManager_js_1.SequenceRegistrationContext);
    const { durationInFrames } = (0, use_video_config_js_1.useVideoConfig)();
    const mediaStartsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
    const { volumes, duration, doesVolumeChange, finalDisplayName } = (0, exports.useBasicMediaInTimeline)({
        volume,
        mediaVolume,
        mediaType,
        src,
        displayName,
        trimAfter: undefined,
        trimBefore: undefined,
        playbackRate,
        sequenceDurationInFrames: durationInFrames,
        mediaStartsAt,
        loop: false,
        muted,
    });
    const { isStudio } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
    const getSequenceForRegistration = (0, react_1.useCallback)(() => {
        var _a;
        if (!src) {
            throw new Error('No src passed');
        }
        return {
            effectRuntimeValues: null,
            type: mediaType,
            src,
            id,
            duration,
            from: 0,
            trimBefore: null,
            parent: (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _a !== void 0 ? _a : null,
            displayName: finalDisplayName,
            documentationLink,
            volume: volumes,
            muted,
            showInTimeline: true,
            timelineOrder: null,
            startMediaFrom: 0 - startsAt,
            mediaFrameAtSequenceZero: null,
            doesVolumeChange,
            loopDisplay,
            playbackRate,
            getStack,
            premountDisplay,
            postmountDisplay,
            controls: null,
            effects: [],
            refForOutline,
            isInsideSeries: false,
            frozenFrame: null,
            frozenMediaFrame: null,
        };
    }, [
        duration,
        id,
        parentSequence,
        src,
        volumes,
        doesVolumeChange,
        mediaType,
        startsAt,
        playbackRate,
        getStack,
        premountDisplay,
        postmountDisplay,
        loopDisplay,
        documentationLink,
        finalDisplayName,
        refForOutline,
        muted,
    ]);
    const registrationEnabled = isStudio ||
        sequenceRegistrationEnabled ||
        (typeof window !== 'undefined' && ((_b = (_a = window.process) === null || _a === void 0 ? void 0 : _a.env) === null || _b === void 0 ? void 0 : _b.NODE_ENV) === 'test');
    (0, use_sequence_registration_js_1.useSequenceRegistration)({
        getSequence: registrationEnabled && showInTimeline ? getSequenceForRegistration : null,
        id,
    });
};
exports.useMediaInTimeline = useMediaInTimeline;