@remotion/studio 4.0.439 → 4.0.441

package/dist/components/RenderModal/CrfSetting.d.ts

@@ -1,5 +1,5 @@
 import type { AvailableOptions } from '@remotion/renderer/client';
-export declare const useCrfState: (codec: "aac" | "gif" | "h264" | "h264-mkv" | "h264-ts" | "h265" | "mp3" | "prores" | "vp8" | "vp9" | "wav") => {
+export declare const useCrfState: (codec: "aac" | "av1" | "gif" | "h264" | "h264-mkv" | "h264-ts" | "h265" | "mp3" | "prores" | "vp8" | "vp9" | "wav") => {
     crf: number | null;
     setCrf: import("react").Dispatch<import("react").SetStateAction<number>>;
     minCrf: number;

package/dist/components/RenderModal/get-default-codecs.d.ts

@@ -1,13 +1,13 @@
 import type { RenderType } from './RenderModalAdvanced';
 export declare const getDefaultCodecs: ({ defaultConfigurationVideoCodec, compositionDefaultVideoCodec, renderType, defaultConfigurationAudioCodec, }: {
-    defaultConfigurationVideoCodec: "aac" | "gif" | "h264" | "h264-mkv" | "h264-ts" | "h265" | "mp3" | "prores" | "vp8" | "vp9" | "wav" | null;
+    defaultConfigurationVideoCodec: "aac" | "av1" | "gif" | "h264" | "h264-mkv" | "h264-ts" | "h265" | "mp3" | "prores" | "vp8" | "vp9" | "wav" | null;
     defaultConfigurationAudioCodec: "aac" | "mp3" | "opus" | "pcm-16" | null;
-    compositionDefaultVideoCodec: "aac" | "gif" | "h264" | "h264-mkv" | "h264-ts" | "h265" | "mp3" | "prores" | "vp8" | "vp9" | "wav" | null;
+    compositionDefaultVideoCodec: "aac" | "av1" | "gif" | "h264" | "h264-mkv" | "h264-ts" | "h265" | "mp3" | "prores" | "vp8" | "vp9" | "wav" | null;
     renderType: RenderType;
 }) => {
     initialAudioCodec: "aac" | "mp3" | "opus" | "pcm-16" | null;
-    initialVideoCodec: "aac" | "gif" | "h264" | "h264-mkv" | "h264-ts" | "h265" | "mp3" | "prores" | "vp8" | "vp9" | "wav";
+    initialVideoCodec: "aac" | "av1" | "gif" | "h264" | "h264-mkv" | "h264-ts" | "h265" | "mp3" | "prores" | "vp8" | "vp9" | "wav";
     initialRenderType: RenderType;
-    initialVideoCodecForAudioTab: "aac" | "gif" | "h264" | "h264-mkv" | "h264-ts" | "h265" | "mp3" | "prores" | "vp8" | "vp9" | "wav";
-    initialVideoCodecForVideoTab: "aac" | "gif" | "h264" | "h264-mkv" | "h264-ts" | "h265" | "mp3" | "prores" | "vp8" | "vp9" | "wav";
+    initialVideoCodecForAudioTab: "aac" | "av1" | "gif" | "h264" | "h264-mkv" | "h264-ts" | "h265" | "mp3" | "prores" | "vp8" | "vp9" | "wav";
+    initialVideoCodecForVideoTab: "aac" | "av1" | "gif" | "h264" | "h264-mkv" | "h264-ts" | "h265" | "mp3" | "prores" | "vp8" | "vp9" | "wav";
 };

package/dist/components/RenderModal/human-readable-codec.d.ts

@@ -1 +1 @@
-export declare const humanReadableCodec: (codec: "aac" | "gif" | "h264" | "h264-mkv" | "h264-ts" | "h265" | "mp3" | "prores" | "vp8" | "vp9" | "wav") => "AAC" | "GIF" | "H.264" | "H.264 (Matroska)" | "H.264 (Transport Stream)" | "H.265" | "MP3" | "ProRes" | "VP8" | "VP9" | "Waveform";
+export declare const humanReadableCodec: (codec: "aac" | "av1" | "gif" | "h264" | "h264-mkv" | "h264-ts" | "h265" | "mp3" | "prores" | "vp8" | "vp9" | "wav") => "AAC" | "AV1" | "GIF" | "H.264" | "H.264 (Matroska)" | "H.264 (Transport Stream)" | "H.265" | "MP3" | "ProRes" | "VP8" | "VP9" | "Waveform";

package/dist/components/RenderModal/human-readable-codec.js

@@ -23,6 +23,9 @@ const humanReadableCodec = (codec) => {
     if (codec === 'h265') {
         return 'H.265';
     }
+    if (codec === 'av1') {
+        return 'AV1';
+    }
     if (codec === 'prores') {
         return 'ProRes';
     }

package/dist/components/RenderModal/out-name-checker.d.ts

@@ -1,7 +1,7 @@
 import type { RenderType } from './RenderModalAdvanced';
 export declare const validateOutnameGui: ({ outName, codec, audioCodec, renderMode, stillImageFormat, separateAudioTo, }: {
     outName: string;
-    codec: "aac" | "gif" | "h264" | "h264-mkv" | "h264-ts" | "h265" | "mp3" | "prores" | "vp8" | "vp9" | "wav";
+    codec: "aac" | "av1" | "gif" | "h264" | "h264-mkv" | "h264-ts" | "h265" | "mp3" | "prores" | "vp8" | "vp9" | "wav";
     audioCodec: "aac" | "mp3" | "opus" | "pcm-16";
     renderMode: RenderType;
     stillImageFormat: "jpeg" | "pdf" | "png" | "webp" | null;

package/dist/components/RenderQueue/actions.d.ts

@@ -50,7 +50,7 @@ export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat,
     jpegQuality: number | null;
     scale: number;
     logLevel: "error" | "info" | "trace" | "verbose" | "warn";
-    codec: "aac" | "gif" | "h264" | "h264-mkv" | "h264-ts" | "h265" | "mp3" | "prores" | "vp8" | "vp9" | "wav";
+    codec: "aac" | "av1" | "gif" | "h264" | "h264-mkv" | "h264-ts" | "h265" | "mp3" | "prores" | "vp8" | "vp9" | "wav";
     concurrency: number;
     crf: number | null;
     startFrame: number;

package/dist/components/Timeline/Timeline.js

@@ -100,7 +100,7 @@ const TimelineInner = () => {
                 var _a;
                 const isExpanded = visualModeEnabled && ((_a = expandedTracks[track.sequence.id]) !== null && _a !== void 0 ? _a : false);
                 return (acc +
-                    (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type === 'video' ? 'video' : 'other') +
+                    (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type) +
                     Number(timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM) +
                     (isExpanded
                         ? (0, timeline_layout_1.getExpandedTrackHeight)(track.sequence.controls) +

package/dist/components/Timeline/TimelineImageInfo.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const TimelineImageInfo: React.FC<{
+    readonly src: string;
+    readonly visualizationWidth: number;
+}>;

package/dist/components/Timeline/TimelineImageInfo.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineImageInfo = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const HEIGHT = (0, timeline_layout_1.getTimelineLayerHeight)('image') - 2;
+const containerStyle = {
+    height: HEIGHT,
+    width: '100%',
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    display: 'flex',
+    borderTopLeftRadius: 2,
+    borderBottomLeftRadius: 2,
+};
+const TimelineImageInfo = ({ src, visualizationWidth }) => {
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const { current } = ref;
+        if (!current) {
+            return;
+        }
+        const canvas = document.createElement('canvas');
+        canvas.width = visualizationWidth * window.devicePixelRatio;
+        canvas.height = HEIGHT * window.devicePixelRatio;
+        canvas.style.width = visualizationWidth + 'px';
+        canvas.style.height = HEIGHT + 'px';
+        const ctx = canvas.getContext('2d');
+        if (!ctx) {
+            return;
+        }
+        current.appendChild(canvas);
+        const img = new Image();
+        img.crossOrigin = 'anonymous';
+        img.onload = () => {
+            const scale = (HEIGHT * window.devicePixelRatio) / img.naturalHeight;
+            const scaledWidth = img.naturalWidth * scale;
+            const scaledHeight = HEIGHT * window.devicePixelRatio;
+            const offscreen = document.createElement('canvas');
+            offscreen.width = scaledWidth;
+            offscreen.height = scaledHeight;
+            const offCtx = offscreen.getContext('2d');
+            if (!offCtx) {
+                return;
+            }
+            offCtx.drawImage(img, 0, 0, scaledWidth, scaledHeight);
+            const pattern = ctx.createPattern(offscreen, 'repeat-x');
+            if (!pattern) {
+                return;
+            }
+            ctx.fillStyle = pattern;
+            ctx.fillRect(0, 0, visualizationWidth * window.devicePixelRatio, HEIGHT * window.devicePixelRatio);
+        };
+        img.src = src;
+        return () => {
+            current.removeChild(canvas);
+        };
+    }, [src, visualizationWidth]);
+    return jsx_runtime_1.jsx("div", { ref: ref, style: containerStyle });
+};
+exports.TimelineImageInfo = TimelineImageInfo;

package/dist/components/Timeline/TimelineListItem.js

@@ -69,8 +69,7 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
     }, [sequence.id, setHidden]);
     const outer = (0, react_1.useMemo)(() => {
         return {
-            height: (0, timeline_layout_1.getTimelineLayerHeight)(sequence.type === 'video' ? 'video' : 'other') +
-                timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
+            height: (0, timeline_layout_1.getTimelineLayerHeight)(sequence.type) + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
             color: 'white',
             fontFamily: 'Arial, Helvetica, sans-serif',
             display: 'flex',

package/dist/components/Timeline/TimelineSequence.js

@@ -10,11 +10,13 @@ const timeline_layout_1 = require("../../helpers/timeline-layout");
 const use_max_media_duration_1 = require("../../helpers/use-max-media-duration");
 const AudioWaveform_1 = require("../AudioWaveform");
 const LoopedTimelineIndicators_1 = require("./LoopedTimelineIndicators");
+const TimelineImageInfo_1 = require("./TimelineImageInfo");
 const TimelineSequenceFrame_1 = require("./TimelineSequenceFrame");
 const TimelineVideoInfo_1 = require("./TimelineVideoInfo");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const AUDIO_GRADIENT = 'linear-gradient(rgb(16 171 58), rgb(43 165 63) 60%)';
 const VIDEO_GRADIENT = 'linear-gradient(to top, #8e44ad, #9b59b6)';
+const IMAGE_GRADIENT = 'linear-gradient(to top, #2980b9, #3498db)';
 const TimelineSequence = ({ s }) => {
     const windowWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
     if (windowWidth === null) {
@@ -51,7 +53,7 @@ const Inner = ({ s, windowWidth }) => {
                 ? s.loopDisplay.durationInFrames * s.loopDisplay.numberOfTimes
                 : s.duration,
             startFrom: s.loopDisplay ? s.from + s.loopDisplay.startOffset : s.from,
-            startFromMedia: s.type === 'sequence' ? 0 : s.startMediaFrom,
+            startFromMedia: s.type === 'sequence' || s.type === 'image' ? 0 : s.startMediaFrom,
             maxMediaDuration,
             video,
             windowWidth,
@@ -65,11 +67,13 @@ const Inner = ({ s, windowWidth }) => {
                 ? AUDIO_GRADIENT
                 : s.type === 'video'
                     ? VIDEO_GRADIENT
-                    : colors_1.BLUE,
+                    : s.type === 'image'
+                        ? IMAGE_GRADIENT
+                        : colors_1.BLUE,
             border: get_timeline_sequence_layout_1.SEQUENCE_BORDER_WIDTH + 'px solid rgba(255, 255, 255, 0.2)',
             borderRadius: 2,
             position: 'absolute',
-            height: (0, timeline_layout_1.getTimelineLayerHeight)(s.type === 'video' ? 'video' : 'other'),
+            height: (0, timeline_layout_1.getTimelineLayerHeight)(s.type),
             marginLeft,
             width,
             color: 'white',
@@ -103,8 +107,9 @@ const Inner = ({ s, windowWidth }) => {
 						)`,
                     position: 'absolute',
                     right: 0,
-                } })) : null, s.type === 'audio' ? (jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, playbackRate: s.playbackRate })) : null, s.type === 'video' ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: width, naturalWidth: naturalWidth, trimBefore: s.startMediaFrom, durationInFrames: s.duration, playbackRate: s.playbackRate })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes })), s.type !== 'audio' &&
+                } })) : null, s.type === 'audio' ? (jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, playbackRate: s.playbackRate })) : null, s.type === 'video' ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: width, naturalWidth: naturalWidth, trimBefore: s.startMediaFrom, durationInFrames: s.duration, playbackRate: s.playbackRate })) : null, s.type === 'image' ? (jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, visualizationWidth: width })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes })), s.type !== 'audio' &&
                 s.type !== 'video' &&
+                s.type !== 'image' &&
                 s.loopDisplay === undefined &&
                 (isInRange || isPremounting || isPostmounting) ? (jsx_runtime_1.jsx("div", { style: {
                     paddingLeft: 5 + (premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0),

package/dist/components/Timeline/TimelineStack/index.js

@@ -31,7 +31,9 @@ const TimelineStack = ({ isCompact, sequence, originalLocation }) => {
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
         .previewServerState.type;
     const assetPath = (0, react_1.useMemo)(() => {
-        if (sequence.type !== 'video' && sequence.type !== 'audio') {
+        if (sequence.type !== 'video' &&
+            sequence.type !== 'audio' &&
+            sequence.type !== 'image') {
             return null;
         }
         const isStatic = sequence.src.startsWith(window.remotion_staticBase);

package/dist/components/Timeline/TimelineTracks.js

@@ -42,7 +42,7 @@ const TimelineTracks = ({ timeline, hasBeenCut }) => {
                         const isExpanded = (_a = expandedTracks[track.sequence.id]) !== null && _a !== void 0 ? _a : false;
                         return (jsx_runtime_1.jsxs("div", { children: [
                                 jsx_runtime_1.jsx("div", { style: {
-                                        height: (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type === 'video' ? 'video' : 'other'),
+                                        height: (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type),
                                         marginBottom: timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
                                     }, children: jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence }) }), visualModeEnabled && isExpanded ? (jsx_runtime_1.jsx("div", { style: getExpandedPlaceholderStyle(track.sequence.controls) })) : null] }, track.sequence.id));
                     })] }), hasBeenCut ? jsx_runtime_1.jsx(MaxTimelineTracks_1.MaxTimelineTracksReached, {}) : null] }));