@remotion/studio 4.0.365 → 4.0.367

package/dist/components/Modals.js

@@ -22,7 +22,7 @@ const Modals = ({ readOnlyStudio }) => {
     const { selectedModal: modalContextType } = (0, react_1.useContext)(modals_1.ModalsContext);
     const canRender = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState.type ===
         'connected';
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'duplicate-comp' && ((0, jsx_runtime_1.jsx)(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && ((0, jsx_runtime_1.jsx)(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && ((0, jsx_runtime_1.jsx)(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'input-props-override' && ((0, jsx_runtime_1.jsx)(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && canRender && modalContextType.type === 'render' && ((0, jsx_runtime_1.jsx)(RenderModal_1.RenderModalWithLoader, { initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialChromeMode: modalContextType.initialChromeMode })), modalContextType &&
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'duplicate-comp' && ((0, jsx_runtime_1.jsx)(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && ((0, jsx_runtime_1.jsx)(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && ((0, jsx_runtime_1.jsx)(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'input-props-override' && ((0, jsx_runtime_1.jsx)(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && canRender && modalContextType.type === 'render' && ((0, jsx_runtime_1.jsx)(RenderModal_1.RenderModalWithLoader, { initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })), modalContextType &&
                 canRender &&
                 modalContextType.type === 'render-progress' && ((0, jsx_runtime_1.jsx)(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && ((0, jsx_runtime_1.jsx)(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'install-packages' && ((0, jsx_runtime_1.jsx)(InstallPackage_1.InstallPackageModal, { packageManager: modalContextType.packageManager })), modalContextType && modalContextType.type === 'quick-switcher' && ((0, jsx_runtime_1.jsx)(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode })), (0, jsx_runtime_1.jsx)(AskAiModal_1.AskAiModal, {})] }));
 };

package/dist/components/RenderButton.js

@@ -55,7 +55,7 @@ const RenderButton = () => {
             compositionId: video.id,
             initialFrame: getCurrentFrame(),
             initialStillImageFormat: defaults.stillImageFormat,
-            initialVideoImageFormat: defaults.videoImageFormat,
+            initialVideoImageFormat: null,
             initialJpegQuality: defaults.jpegQuality,
             initialScale: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.scale) !== null && _b !== void 0 ? _b : 1,
             initialLogLevel: defaults.logLevel,
@@ -66,7 +66,7 @@ const RenderButton = () => {
             initialEnforceAudioTrack: defaults.enforceAudioTrack,
             initialProResProfile: defaults.proResProfile,
             initialx264Preset: defaults.x264Preset,
-            initialPixelFormat: defaults.pixelFormat,
+            initialPixelFormat: null,
             initialAudioBitrate: defaults.audioBitrate,
             initialVideoBitrate: defaults.videoBitrate,
             initialEveryNthFrame: defaults.everyNthFrame,
@@ -97,6 +97,7 @@ const RenderButton = () => {
             initialHardwareAcceleration: defaults.hardwareAcceleration,
             initialChromeMode: defaults.chromeMode,
             initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes,
+            renderDefaults: defaults,
         });
     }, [video, setSelectedModal, getCurrentFrame, props, inFrame, outFrame]);
     if (!video) {

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

@@ -1,11 +1,13 @@
-import type { AudioCodec, ChromeMode, Codec, ColorSpace, LogLevel, OpenGlRenderer, PixelFormat, ProResProfile, StillImageFormat, VideoImageFormat, X264Preset } from '@remotion/renderer';
+import type { AudioCodec, ChromeMode, Codec, ColorSpace, LogLevel, OpenGlRenderer, PixelFormat, StillImageFormat, VideoImageFormat, X264Preset } from '@remotion/renderer';
 import type { HardwareAccelerationOption } from '@remotion/renderer/client';
+import type { RenderDefaults } from '@remotion/studio-shared';
 import React from 'react';
+import type { _InternalTypes } from 'remotion';
 import type { RenderType } from './RenderModalAdvanced';
 type RenderModalProps = {
     readonly compositionId: string;
     readonly initialFrame: number;
-    readonly initialVideoImageFormat: VideoImageFormat;
+    readonly initialVideoImageFormat: VideoImageFormat | null;
     readonly initialStillImageFormat: StillImageFormat;
     readonly initialJpegQuality: number;
     readonly initialScale: number;
@@ -15,9 +17,9 @@ type RenderModalProps = {
     readonly maxConcurrency: number;
     readonly initialMuted: boolean;
     readonly initialEnforceAudioTrack: boolean;
-    readonly initialProResProfile: ProResProfile;
+    readonly initialProResProfile: _InternalTypes['ProResProfile'] | null;
     readonly initialx264Preset: X264Preset;
-    readonly initialPixelFormat: PixelFormat;
+    readonly initialPixelFormat: PixelFormat | null;
     readonly initialVideoBitrate: string | null;
     readonly initialAudioBitrate: string | null;
     readonly initialEveryNthFrame: number;
@@ -48,6 +50,7 @@ type RenderModalProps = {
     readonly initialChromeMode: ChromeMode;
     readonly initialOffthreadVideoThreads: number | null;
     readonly defaultMetadata: Record<string, string> | null;
+    readonly renderDefaults: RenderDefaults;
 };
 export declare const RenderModalWithLoader: React.FC<RenderModalProps>;
 export {};

package/dist/components/RenderModal/RenderModal.js

@@ -116,7 +116,7 @@ const outer = {
     display: 'flex',
     flexDirection: 'column',
 };
-const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageFormat, initialJpegQuality, initialScale, initialLogLevel, initialConcurrency, maxConcurrency, minConcurrency, initialMuted, initialEnforceAudioTrack, initialProResProfile, initialx264Preset, initialPixelFormat, initialVideoBitrate, initialAudioBitrate, initialEveryNthFrame, initialNumberOfGifLoops, initialDelayRenderTimeout, initialOffthreadVideoCacheSizeInBytes, initialEnvVariables, initialDisableWebSecurity, initialGl, initialHeadless, initialIgnoreCertificateErrors, initialEncodingBufferSize, initialEncodingMaxRate, initialOffthreadVideoThreads, initialMediaCacheSizeInBytes, initialUserAgent, defaultProps, inFrameMark, outFrameMark, initialColorSpace, initialMultiProcessOnLinux, defaultConfigurationAudioCodec, defaultConfigurationVideoCodec, initialBeep, initialRepro, initialForSeamlessAacConcatenation, renderTypeOfLastRender, initialHardwareAcceleration, defaultMetadata, initialChromeMode, }) => {
+const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageFormat, initialJpegQuality, initialScale, initialLogLevel, initialConcurrency, maxConcurrency, minConcurrency, initialMuted, initialEnforceAudioTrack, initialProResProfile, initialx264Preset, initialPixelFormat, initialVideoBitrate, initialAudioBitrate, initialEveryNthFrame, initialNumberOfGifLoops, initialDelayRenderTimeout, initialOffthreadVideoCacheSizeInBytes, initialEnvVariables, initialDisableWebSecurity, initialGl, initialHeadless, initialIgnoreCertificateErrors, initialEncodingBufferSize, initialEncodingMaxRate, initialOffthreadVideoThreads, initialMediaCacheSizeInBytes, initialUserAgent, defaultProps, inFrameMark, outFrameMark, initialColorSpace, initialMultiProcessOnLinux, defaultConfigurationAudioCodec, defaultConfigurationVideoCodec, initialBeep, initialRepro, initialForSeamlessAacConcatenation, renderTypeOfLastRender, initialHardwareAcceleration, defaultMetadata, initialChromeMode, renderDefaults, }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const context = (0, react_1.useContext)(ResolveCompositionBeforeModal_1.ResolvedCompositionContext);
     if (!context) {
@@ -141,7 +141,10 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
     const [unclampedFrame, setFrame] = (0, react_1.useState)(() => initialFrame);
     const [saving, setSaving] = (0, react_1.useState)(false);
     const [stillImageFormat, setStillImageFormat] = (0, react_1.useState)(() => initialStillImageFormat);
-    const [videoImageFormat, setVideoImageFormat] = (0, react_1.useState)(() => initialVideoImageFormat);
+    const [videoImageFormat, setVideoImageFormat] = (0, react_1.useState)(() => {
+        var _a;
+        return (_a = initialVideoImageFormat !== null && initialVideoImageFormat !== void 0 ? initialVideoImageFormat : resolvedComposition.defaultVideoImageFormat) !== null && _a !== void 0 ? _a : renderDefaults.videoImageFormat;
+    });
     const [sequenceImageFormat, setSequenceImageFormat] = (0, react_1.useState)(() => initialStillImageFormat === 'jpeg' ? 'jpeg' : 'png');
     const [concurrency, setConcurrency] = (0, react_1.useState)(() => initialConcurrency);
     const [videoCodecForVideoTab, setVideoCodecForVideoTab] = (0, react_1.useState)(() => initialVideoCodecForVideoTab);
@@ -202,10 +205,13 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
     const [outName, setOutName] = (0, react_1.useState)(() => initialOutName);
     const [endFrameOrNull, setEndFrame] = (0, react_1.useState)(() => outFrameMark !== null && outFrameMark !== void 0 ? outFrameMark : null);
     const [startFrameOrNull, setStartFrame] = (0, react_1.useState)(() => inFrameMark !== null && inFrameMark !== void 0 ? inFrameMark : null);
-    const [proResProfileSetting, setProResProfile] = (0, react_1.useState)(() => initialProResProfile);
+    const [proResProfileSetting, setProResProfile] = (0, react_1.useState)(() => { var _a; return (_a = initialProResProfile !== null && initialProResProfile !== void 0 ? initialProResProfile : resolvedComposition.defaultProResProfile) !== null && _a !== void 0 ? _a : 'hq'; });
     const [x264PresetSetting, setx264Preset] = (0, react_1.useState)(() => initialx264Preset);
     const [hardwareAcceleration, setHardwareAcceleration] = (0, react_1.useState)(() => initialHardwareAcceleration);
-    const [userPreferredPixelFormat, setPixelFormat] = (0, react_1.useState)(() => initialPixelFormat);
+    const [userPreferredPixelFormat, setPixelFormat] = (0, react_1.useState)(() => {
+        var _a;
+        return (_a = initialPixelFormat !== null && initialPixelFormat !== void 0 ? initialPixelFormat : resolvedComposition.defaultPixelFormat) !== null && _a !== void 0 ? _a : renderDefaults.pixelFormat;
+    });
     const [preferredQualityControlType, setQualityControl] = (0, react_1.useState)(() => initialVideoBitrate === null ? 'crf' : 'bitrate');
     const [shouldHaveCustomTargetAudioBitrate, setShouldHaveCustomTargetAudioBitrate,] = (0, react_1.useState)(() => initialAudioBitrate !== null);
     const [customTargetAudioBitrate, setCustomTargetAudioBitrateValue] = (0, react_1.useState)(() => initialAudioBitrate !== null && initialAudioBitrate !== void 0 ? initialAudioBitrate : '320K');

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

@@ -1,6 +1,6 @@
-import type { Codec, LogLevel, ProResProfile } from '@remotion/renderer';
+import type { Codec, LogLevel } from '@remotion/renderer';
 import React from 'react';
-import type { VideoConfig } from 'remotion';
+import type { _InternalTypes, VideoConfig } from 'remotion';
 import type { SegmentedControlItem } from '../SegmentedControl';
 import type { RenderType } from './RenderModalAdvanced';
 export declare const RenderModalBasic: React.FC<{
@@ -9,8 +9,8 @@ export declare const RenderModalBasic: React.FC<{
     readonly codec: Codec;
     readonly setVideoCodec: (newCodec: Codec) => void;
     readonly outName: string;
-    readonly proResProfile: ProResProfile | null;
-    readonly setProResProfile: React.Dispatch<React.SetStateAction<ProResProfile>>;
+    readonly proResProfile: _InternalTypes['ProResProfile'] | null;
+    readonly setProResProfile: React.Dispatch<React.SetStateAction<_InternalTypes['ProResProfile']>>;
     readonly frame: number;
     readonly setFrame: React.Dispatch<React.SetStateAction<number>>;
     readonly resolvedComposition: VideoConfig;

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

@@ -1,6 +1,7 @@
-import type { AudioCodec, ChromeMode, Codec, ColorSpace, LogLevel, PixelFormat, ProResProfile, StillImageFormat, VideoImageFormat, X264Preset } from '@remotion/renderer';
+import type { AudioCodec, ChromeMode, Codec, ColorSpace, LogLevel, PixelFormat, StillImageFormat, VideoImageFormat, X264Preset } from '@remotion/renderer';
 import type { HardwareAccelerationOption } from '@remotion/renderer/client';
 import type { CanUpdateDefaultPropsResponse, EnumPath, RecastCodemod, RenderJob, RequiredChromiumOptions, VisualControlChange } from '@remotion/studio-shared';
+import type { _InternalTypes } from 'remotion';
 export declare const addStillRenderJob: ({ compositionId, outName, imageFormat, jpegQuality, frame, scale, logLevel, chromiumOptions, delayRenderTimeout, envVariables, inputProps, offthreadVideoCacheSizeInBytes, offthreadVideoThreads, multiProcessOnLinux, beepOnFinish, metadata, chromeMode, mediaCacheSizeInBytes, }: {
     compositionId: string;
     outName: string;
@@ -59,7 +60,7 @@ export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat,
     endFrame: number;
     muted: boolean;
     enforceAudioTrack: boolean;
-    proResProfile: ProResProfile | null;
+    proResProfile: _InternalTypes["ProResProfile"] | null;
     x264Preset: X264Preset | null;
     pixelFormat: PixelFormat;
     audioBitrate: string | null;

package/dist/components/SidebarRenderButton.js

@@ -47,7 +47,7 @@ const SidebarRenderButton = ({ composition, visible }) => {
             initialEnforceAudioTrack: defaults.enforceAudioTrack,
             initialProResProfile: defaults.proResProfile,
             initialx264Preset: defaults.x264Preset,
-            initialPixelFormat: defaults.pixelFormat,
+            initialPixelFormat: null,
             initialAudioBitrate: defaults.audioBitrate,
             initialVideoBitrate: defaults.videoBitrate,
             initialEveryNthFrame: defaults.everyNthFrame,
@@ -78,6 +78,7 @@ const SidebarRenderButton = ({ composition, visible }) => {
             initialHardwareAcceleration: defaults.hardwareAcceleration,
             initialChromeMode: defaults.chromeMode,
             initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes,
+            renderDefaults: defaults,
         });
         if (isMobileLayout) {
             setSidebarCollapsedState({ left: 'collapsed', right: 'collapsed' });

package/dist/components/Timeline/TimelineVideoInfo.js

@@ -2,12 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineVideoInfo = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const media_parser_1 = require("@remotion/media-parser");
-const webcodecs_1 = require("@remotion/webcodecs");
-const worker_1 = require("@remotion/webcodecs/worker");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const extract_frames_1 = require("../../helpers/extract-frames");
 const frame_database_1 = require("../../helpers/frame-database");
+const resize_video_frame_1 = require("../../helpers/resize-video-frame");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const HEIGHT = (0, timeline_layout_1.getTimelineLayerHeight)('video') - 2;
 const containerStyle = {
@@ -20,10 +19,11 @@ const containerStyle = {
     fontSize: 10,
     fontFamily: 'Arial, Helvetica',
 };
-const MAX_TIME_DEVIATION = media_parser_1.WEBCODECS_TIMESCALE * 0.05;
+const WEBCODECS_TIMESCALE = 1000000;
+const MAX_TIME_DEVIATION = WEBCODECS_TIMESCALE * 0.05;
 const getDurationOfOneFrame = ({ visualizationWidth, aspectRatio, segmentDuration, }) => {
     const framesFitInWidthUnrounded = visualizationWidth / (HEIGHT * aspectRatio);
-    return (segmentDuration / framesFitInWidthUnrounded) * media_parser_1.WEBCODECS_TIMESCALE;
+    return (segmentDuration / framesFitInWidthUnrounded) * WEBCODECS_TIMESCALE;
 };
 const fixRounding = (value) => {
     if (value % 1 >= 0.49999999) {
@@ -41,7 +41,7 @@ const calculateTimestampSlots = ({ visualizationWidth, fromSeconds, segmentDurat
     });
     const timestampTargets = [];
     for (let i = 0; i < framesFitInWidth + 1; i++) {
-        const target = fromSeconds * media_parser_1.WEBCODECS_TIMESCALE + durationOfOneFrame * (i + 0.5);
+        const target = fromSeconds * WEBCODECS_TIMESCALE + durationOfOneFrame * (i + 0.5);
         const snappedToDuration = (Math.round(fixRounding(target / durationOfOneFrame)) - 1) *
             durationOfOneFrame;
         timestampTargets.push(snappedToDuration);
@@ -68,7 +68,7 @@ const drawSlot = ({ frame, ctx, filledSlots, visualizationWidth, timestamp, segm
         aspectRatio: frame.displayWidth / frame.displayHeight,
         segmentDuration,
     });
-    const relativeTimestamp = timestamp - fromSeconds * media_parser_1.WEBCODECS_TIMESCALE;
+    const relativeTimestamp = timestamp - fromSeconds * WEBCODECS_TIMESCALE;
     const frameIndex = relativeTimestamp / durationOfOneFrame;
     const left = Math.floor((frameIndex * frame.displayWidth) / window.devicePixelRatio); // round to avoid antialiasing
     ctx.drawImage(frame, left, 0, frame.displayWidth / window.devicePixelRatio, frame.displayHeight / window.devicePixelRatio);
@@ -189,9 +189,8 @@ const TimelineVideoInfo = ({ src, visualizationWidth, startFrom, durationInFrame
             }
         }
         (0, frame_database_1.clearOldFrames)();
-        (0, worker_1.extractFramesOnWebWorker)({
-            acknowledgeRemotionLicense: true,
-            timestampsInSeconds: ({ track }) => {
+        (0, extract_frames_1.extractFrames)({
+            timestampsInSeconds: ({ track, }) => {
                 aspectRatio.current = track.width / track.height;
                 frame_database_1.aspectRatioCache.set(src, aspectRatio.current);
                 ensureSlots({
@@ -201,19 +200,14 @@ const TimelineVideoInfo = ({ src, visualizationWidth, startFrom, durationInFrame
                     visualizationWidth,
                     aspectRatio: aspectRatio.current,
                 });
-                return Array.from(filledSlots.keys()).map((timestamp) => timestamp / media_parser_1.WEBCODECS_TIMESCALE);
+                return Array.from(filledSlots.keys()).map((timestamp) => timestamp / WEBCODECS_TIMESCALE);
             },
             src,
             onFrame: (frame) => {
                 const scale = (HEIGHT / frame.displayHeight) * window.devicePixelRatio;
-                const transformed = (0, webcodecs_1.rotateAndResizeVideoFrame)({
+                const transformed = (0, resize_video_frame_1.resizeVideoFrame)({
                     frame,
-                    resizeOperation: {
-                        mode: 'scale',
-                        scale,
-                    },
-                    rotation: 0,
-                    needsToBeMultipleOfTwo: false,
+                    scale,
                 });
                 if (transformed !== frame) {
                     frame.close();
@@ -259,9 +253,6 @@ const TimelineVideoInfo = ({ src, visualizationWidth, startFrom, durationInFrame
             });
         })
             .catch((e) => {
-            if ((0, media_parser_1.hasBeenAborted)(e)) {
-                return;
-            }
             setError(e);
         })
             .finally(() => {