remotion 3.0.21 → 3.0.24

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
-remotion:build: cache hit, replaying output f32b42292533daa6
-remotion:build: 
-remotion:build: > remotion@3.0.20 build /Users/jonathanburger/remotion/packages/core
-remotion:build: > tsc -d
-remotion:build: 
+remotion:build: cache hit, replaying output f77d98c7f590a627
+remotion:build: 
+remotion:build: > remotion@3.0.23 build /Users/jonathanburger/remotion/packages/core
+remotion:build: > tsc -d
+remotion:build: 

package/README.md

@@ -4,7 +4,7 @@
   </a>
 </p>
 
-[![Discord Shield](https://discordapp.com/api/guilds/809501355504959528/widget.png?style=shield)](https://discord.gg/6VzzNDwUwV)
+[![Discord Shield](https://discordapp.com/api/guilds/809501355504959528/widget.png?style=shield)](https://remotion.dev/discord)
 [![NPM Version](http://img.shields.io/npm/v/remotion.svg?style=flat)](https://www.npmjs.org/package/remotion)
 [![NPM Downloads](https://img.shields.io/npm/dm/remotion.svg?style=flat)](https://npmcharts.com/compare/remotion?minimal=true)
 [![Install Size](https://packagephobia.now.sh/badge?p=remotion)](https://packagephobia.now.sh/result?p=remotion)

package/dist/AbsoluteFill.d.ts

@@ -1,4 +1,5 @@
-import React, { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
+import React from 'react';
 /**
  * An absolutely positioned <div> element with 100% width, height, and a column flex style
  * @link https://www.remotion.dev/docs/absolute-fill

package/dist/Composition.d.ts

@@ -1,4 +1,5 @@
-import React, { ComponentType } from 'react';
+import type { ComponentType } from 'react';
+import React from 'react';
 declare type LooseComponentType<T> = ComponentType<T> | ((props: T) => React.ReactNode);
 export declare type CompProps<T> = {
     lazyComponent: () => Promise<{

package/dist/CompositionManager.d.ts

@@ -1,5 +1,6 @@
-import React, { ComponentType, LazyExoticComponent } from 'react';
-import { TFolder } from './Folder';
+import type { ComponentType, LazyExoticComponent } from 'react';
+import React from 'react';
+import type { TFolder } from './Folder';
 export declare type TComposition<T = unknown> = {
     width: number;
     height: number;

package/dist/Folder.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 export declare type TFolder = {
     name: string;
     parent: string | null;

package/dist/Still.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-import { StillProps } from './Composition';
+import type { StillProps } from './Composition';
 export declare const Still: <T>(props: StillProps<T>) => JSX.Element;

package/dist/audio/Audio.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { RemotionMainAudioProps } from './props';
+import type { RemotionMainAudioProps } from './props';
 export declare const Audio: React.ForwardRefExoticComponent<Pick<Omit<React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, "onEnded" | "autoPlay" | "controls" | "loop"> & {
     volume?: import("../volume-prop").VolumeProp | undefined;
     playbackRate?: number | undefined;

package/dist/audio/AudioForRendering.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { RemotionAudioProps } from './props';
+import type { RemotionAudioProps } from './props';
 export declare const AudioForRendering: React.ForwardRefExoticComponent<Pick<RemotionAudioProps, "style" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "controlsList" | "crossOrigin" | "mediaGroup" | "muted" | "playsInline" | "preload" | "src" | "volume" | "playbackRate"> & React.RefAttributes<HTMLAudioElement>>;

package/dist/audio/props.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { VolumeProp } from '../volume-prop';
+import type { VolumeProp } from '../volume-prop';
 export declare type RemotionMainAudioProps = {
     startFrom?: number;
     endAt?: number;

package/dist/audio/shared-audio-tags.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { RemotionAudioProps } from './props';
+import type { RemotionAudioProps } from './props';
 /**
  * This functionality of Remotion will keep a certain amount
  * of <audio> tags pre-mounted and by default filled with an empty audio track.

package/dist/compress-assets.d.ts

@@ -1,4 +1,4 @@
-import { TAsset } from './CompositionManager';
+import type { TAsset } from './CompositionManager';
 /**
  * Since audio or video can be base64-encoded, those can be really long strings.
  * Since we track the `src` property for every frame, Node.JS can run out of memory easily. Instead of duplicating the src for every frame, we save memory by replacing the full base 64 encoded data with a string `same-as-[asset-id]-[frame]` referencing a previous asset with the same src.

package/dist/config/chromium-flags.d.ts

@@ -1,4 +1,4 @@
-import { OpenGlRenderer } from '../validation/validate-opengl-renderer';
+import type { OpenGlRenderer } from '../validation/validate-opengl-renderer';
 export declare const DEFAULT_OPENGL_RENDERER: OpenGlRenderer | null;
 export declare const getChromiumDisableWebSecurity: () => boolean;
 export declare const setChromiumDisableWebSecurity: (should: boolean) => void;

package/dist/config/crf.d.ts

@@ -1,4 +1,4 @@
-import { Codec } from './codec';
+import type { Codec } from './codec';
 declare type Crf = number | undefined;
 export declare const setCrf: (newCrf: Crf) => void;
 export declare const getCrfOrUndefined: () => Crf;

package/dist/config/image-format.d.ts

@@ -1,4 +1,4 @@
-import { PixelFormat } from './pixel-format';
+import type { PixelFormat } from './pixel-format';
 declare const validOptions: readonly ["png", "jpeg", "none"];
 export declare type ImageFormat = typeof validOptions[number];
 export declare type StillImageFormat = 'png' | 'jpeg';

package/dist/config/image-sequence.d.ts

@@ -1,3 +1,3 @@
-import { FrameRange } from './frame-range';
+import type { FrameRange } from './frame-range';
 export declare const setImageSequence: (newImageSequence: boolean) => void;
 export declare const getShouldOutputImageSequence: (frameRange: FrameRange | null) => boolean;

package/dist/config/index.d.ts

@@ -1,13 +1,13 @@
-import { Browser } from './browser';
-import { BrowserExecutable } from './browser-executable';
-import { Codec } from './codec';
-import { Concurrency } from './concurrency';
-import { FfmpegExecutable } from './ffmpeg-executable';
-import { FrameRange } from './frame-range';
-import { ImageFormat, StillImageFormat } from './image-format';
-import { LogLevel } from './log';
-import { WebpackConfiguration, WebpackOverrideFn } from './override-webpack';
-import { PixelFormat } from './pixel-format';
+import type { Browser } from './browser';
+import type { BrowserExecutable } from './browser-executable';
+import type { Codec } from './codec';
+import type { Concurrency } from './concurrency';
+import type { FfmpegExecutable } from './ffmpeg-executable';
+import type { FrameRange } from './frame-range';
+import type { ImageFormat, StillImageFormat } from './image-format';
+import type { LogLevel } from './log';
+import type { WebpackConfiguration, WebpackOverrideFn } from './override-webpack';
+import type { PixelFormat } from './pixel-format';
 export declare const Config: {
     readonly Preview: {
         /**

package/dist/config/override-webpack.d.ts

@@ -1,4 +1,4 @@
-import { Configuration } from 'webpack';
+import type { Configuration } from 'webpack';
 export declare type WebpackConfiguration = Configuration;
 export declare type WebpackOverrideFn = (currentConfiguration: WebpackConfiguration) => WebpackConfiguration;
 export declare const defaultOverrideFunction: WebpackOverrideFn;

package/dist/config/pixel-format.d.ts

@@ -1,4 +1,4 @@
-import { Codec } from './codec';
+import type { Codec } from './codec';
 declare const validOptions: readonly ["yuv420p", "yuva420p", "yuv422p", "yuv444p", "yuv420p10le", "yuv422p10le", "yuv444p10le", "yuva444p10le"];
 export declare type PixelFormat = typeof validOptions[number];
 export declare const DEFAULT_PIXEL_FORMAT: PixelFormat;

package/dist/config/prores-profile.d.ts

@@ -1,4 +1,4 @@
-import { Codec } from './codec';
+import type { Codec } from './codec';
 declare const proResProfileOptions: readonly ["4444-xq", "4444", "hq", "standard", "light", "proxy"];
 export declare type ProResProfile = typeof proResProfileOptions[number];
 export declare const getProResProfile: () => ProResProfile | undefined;

package/dist/config/skip-n-frames.d.ts

@@ -0,0 +1,2 @@
+export declare const setSkipNFrames: (frame: number) => void;
+export declare const getSkipNFrames: () => number;

package/dist/config/skip-n-frames.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSkipNFrames = exports.setSkipNFrames = void 0;
+const validate_frame_1 = require("../validation/validate-frame");
+let skipNFrames = 0;
+const setSkipNFrames = (frame) => {
+    (0, validate_frame_1.validateFrame)(frame, Infinity);
+    skipNFrames = frame;
+};
+exports.setSkipNFrames = setSkipNFrames;
+const getSkipNFrames = () => skipNFrames;
+exports.getSkipNFrames = getSkipNFrames;

package/dist/default-css.d.ts

@@ -1,2 +1,3 @@
 export declare const injectCSS: (css: string) => void;
+export declare const OFFTHREAD_VIDEO_CLASS_NAME = "__remotion_offthreadvideo";
 export declare const makeDefaultCSS: (scope: string | null, backgroundColor: string) => string;

package/dist/default-css.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeDefaultCSS = exports.injectCSS = void 0;
+exports.makeDefaultCSS = exports.OFFTHREAD_VIDEO_CLASS_NAME = exports.injectCSS = void 0;
 const injected = {};
 const injectCSS = (css) => {
     // Skip in node
@@ -13,10 +13,11 @@ const injectCSS = (css) => {
     const head = document.head || document.getElementsByTagName('head')[0];
     const style = document.createElement('style');
     style.appendChild(document.createTextNode(css));
-    head.appendChild(style);
+    head.prepend(style);
     injected[css] = true;
 };
 exports.injectCSS = injectCSS;
+exports.OFFTHREAD_VIDEO_CLASS_NAME = '__remotion_offthreadvideo';
 const makeDefaultCSS = (scope, backgroundColor) => {
     if (!scope) {
         return `
@@ -27,6 +28,9 @@ const makeDefaultCSS = (scope, backgroundColor) => {
       margin: 0;
 	    background-color: ${backgroundColor};
     }
+    .${exports.OFFTHREAD_VIDEO_CLASS_NAME} {
+      object-fit: contain;
+    }
     `;
     }
     return `
@@ -37,6 +41,9 @@ const makeDefaultCSS = (scope, backgroundColor) => {
       width: 100%;
       height: 100%;
     }
+    ${scope} .${exports.OFFTHREAD_VIDEO_CLASS_NAME} {
+      object-fit: contain;
+    }
   `;
 };
 exports.makeDefaultCSS = makeDefaultCSS;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import './asset-types';
-import { TAsset, TCompMetadata } from './CompositionManager';
+import type { TAsset, TCompMetadata } from './CompositionManager';
 declare global {
     interface Window {
         ready: boolean;

package/dist/internals.d.ts

@@ -1,19 +1,19 @@
-import { CompProps } from './Composition';
-import { CompositionManagerContext, RenderAssetInfo, TAsset, TCompMetadata, TComposition, TSequence } from './CompositionManager';
+import type { CompProps } from './Composition';
+import type { CompositionManagerContext, RenderAssetInfo, TAsset, TCompMetadata, TComposition, TSequence } from './CompositionManager';
 import * as AssetCompression from './compress-assets';
 import * as Logging from './config/log';
-import { WebpackOverrideFn } from './config/override-webpack';
-import { ProResProfile } from './config/prores-profile';
+import type { WebpackOverrideFn } from './config/override-webpack';
+import type { ProResProfile } from './config/prores-profile';
 import * as CSSUtils from './default-css';
-import { RemotionEnvironment } from './get-environment';
+import type { RemotionEnvironment } from './get-environment';
 import * as perf from './perf';
 import * as TimelineInOutPosition from './timeline-inout-position-state';
-import { SetTimelineInOutContextValue, TimelineInOutContextValue } from './timeline-inout-position-state';
+import type { SetTimelineInOutContextValue, TimelineInOutContextValue } from './timeline-inout-position-state';
 import * as TimelinePosition from './timeline-position-state';
-import { SetTimelineContextValue, TimelineContextValue } from './timeline-position-state';
+import type { SetTimelineContextValue, TimelineContextValue } from './timeline-position-state';
 import { truthy } from './truthy';
-import { OpenGlRenderer } from './validation/validate-opengl-renderer';
-import { MediaVolumeContextValue, SetMediaVolumeContextValue } from './volume-position-state';
+import type { OpenGlRenderer } from './validation/validate-opengl-renderer';
+import type { MediaVolumeContextValue, SetMediaVolumeContextValue } from './volume-position-state';
 import { useRemotionContexts } from './wrap-remotion-context';
 declare const Timeline: {
     TimelineInOutContext: import("react").Context<TimelineInOutPosition.TimelineInOutContextValue>;
@@ -148,5 +148,6 @@ export declare const Internals: {
     useAbsoluteCurrentFrame: () => number;
     portalNode: () => HTMLElement;
     waitForRoot: (fn: (comp: import("react").FC<{}>) => void) => () => void;
+    validateOffthreadVideoImageFormat: (input: unknown) => void;
 };
 export type { TComposition, Timeline, TCompMetadata, TSequence, WebpackOverrideFn, TAsset, RenderAssetInfo, TimelineContextValue, SetTimelineContextValue, TimelineInOutContextValue, SetTimelineInOutContextValue, CompProps, CompositionManagerContext, MediaVolumeContextValue, SetMediaVolumeContextValue, RemotionEnvironment, ProResProfile, OpenGlRenderer, };

package/dist/internals.js

@@ -76,6 +76,7 @@ const validate_duration_in_frames_1 = require("./validation/validate-duration-in
 const validate_fps_1 = require("./validation/validate-fps");
 const validate_frame_1 = require("./validation/validate-frame");
 const validate_image_format_1 = require("./validation/validate-image-format");
+const validate_offthreadvideo_image_format_1 = require("./validation/validate-offthreadvideo-image-format");
 const validate_opengl_renderer_1 = require("./validation/validate-opengl-renderer");
 const validate_quality_1 = require("./validation/validate-quality");
 const volume_position_state_1 = require("./volume-position-state");
@@ -171,4 +172,5 @@ exports.Internals = {
     useAbsoluteCurrentFrame: use_current_frame_1.useAbsoluteCurrentFrame,
     portalNode: portal_node_1.portalNode,
     waitForRoot: register_root_1.waitForRoot,
+    validateOffthreadVideoImageFormat: validate_offthreadvideo_image_format_1.validateOffthreadVideoImageFormat,
 };

package/dist/is-audio-codec.d.ts

@@ -1,2 +1,2 @@
-import { Codec } from './config';
+import type { Codec } from './config';
 export declare const isAudioCodec: (codec: Codec | undefined) => boolean;

package/dist/play-and-handle-not-allowed-error.d.ts

@@ -1,2 +1,2 @@
-import { RefObject } from 'react';
+import type { RefObject } from 'react';
 export declare const playAndHandleNotAllowedError: (mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement>, mediaType: 'audio' | 'video') => void;

package/dist/register-root.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export declare const registerRoot: (comp: React.FC) => void;
 export declare const getRoot: () => React.FC<{}> | null;
 export declare const waitForRoot: (fn: (comp: React.FC) => void) => (() => void);

package/dist/series/index.d.ts

@@ -1,5 +1,5 @@
-import { FC, PropsWithChildren } from 'react';
-import { SequenceProps } from '../Sequence';
+import type { FC, PropsWithChildren } from 'react';
+import type { SequenceProps } from '../Sequence';
 declare type SeriesSequenceProps = PropsWithChildren<{
     durationInFrames: number;
     offset?: number;

package/dist/spring/index.d.ts

@@ -1,4 +1,4 @@
-import { SpringConfig } from './spring-utils';
+import type { SpringConfig } from './spring-utils';
 /**
  * Calculates a position based on physical parameters, start and end value, and time.
  * @link https://www.remotion.dev/docs/spring

package/dist/spring/measure-spring.d.ts

@@ -1,4 +1,4 @@
-import { SpringConfig } from './spring-utils';
+import type { SpringConfig } from './spring-utils';
 export declare function measureSpring({ fps, config, threshold, from, to, }: {
     fps: number;
     config?: Partial<SpringConfig>;

package/dist/timeline-inout-position-state.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export declare type TimelineInOutContextValue = {
     inFrame: number | null;
     outFrame: number | null;

package/dist/timeline-position-state.d.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject } from 'react';
+import type { MutableRefObject } from 'react';
 export declare type PlayableMediaTag = {
     play: () => void;
     id: string;

package/dist/use-lazy-component.d.ts

@@ -1,7 +1,7 @@
-import React, { ComponentPropsWithRef, ComponentType, ExoticComponent } from 'react';
-import { CompProps } from './internals';
+import type { ComponentPropsWithRef, ComponentType, ExoticComponent } from 'react';
+import type { CompProps } from './internals';
 declare type LazyExoticComponent<T extends ComponentType<any>> = ExoticComponent<ComponentPropsWithRef<T>> & {
     readonly _result: T;
 };
-export declare const useLazyComponent: <T>(compProps: CompProps<T>) => LazyExoticComponent<React.ComponentType<T>>;
+export declare const useLazyComponent: <T>(compProps: CompProps<T>) => LazyExoticComponent<ComponentType<T>>;
 export {};

package/dist/use-media-in-timeline.d.ts

@@ -1,5 +1,5 @@
-import { RefObject } from 'react';
-import { VolumeProp } from './volume-prop';
+import type { RefObject } from 'react';
+import type { VolumeProp } from './volume-prop';
 export declare const useMediaInTimeline: ({ volume, mediaVolume, mediaRef, src, mediaType, }: {
     volume: VolumeProp | undefined;
     mediaVolume: number;

package/dist/use-media-playback.d.ts

@@ -1,4 +1,4 @@
-import { RefObject } from 'react';
+import type { RefObject } from 'react';
 export declare const useMediaPlayback: ({ mediaRef, src, mediaType, playbackRate: localPlaybackRate, }: {
     mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement>;
     src: string | undefined;

package/dist/use-media-tag-volume.d.ts

@@ -1,2 +1,2 @@
-import { RefObject } from 'react';
+import type { RefObject } from 'react';
 export declare const useMediaTagVolume: (mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement>) => number;

package/dist/use-sync-volume-with-media-tag.d.ts

@@ -1,5 +1,5 @@
-import { RefObject } from 'react';
-import { VolumeProp } from './volume-prop';
+import type { RefObject } from 'react';
+import type { VolumeProp } from './volume-prop';
 export declare type UseSyncVolumeWithMediaTagOptions = {
     volumePropFrame: number;
     actualVolume: number;

package/dist/use-unsafe-video-config.d.ts

@@ -1,2 +1,2 @@
-import { VideoConfig } from './video-config';
+import type { VideoConfig } from './video-config';
 export declare const useUnsafeVideoConfig: () => VideoConfig | null;

package/dist/use-video-config.d.ts

@@ -1,4 +1,4 @@
-import { VideoConfig } from './video-config';
+import type { VideoConfig } from './video-config';
 /**
  * Get some info about the context of the video that you are making.
  * Returns an object containing `fps`, `width`, `height` and `durationInFrames`, all of type `number`.

package/dist/validate-media-props.d.ts

@@ -1,4 +1,4 @@
-import { RemotionAudioProps } from './audio';
-import { RemotionVideoProps } from './video';
-import { OffthreadVideoProps } from './video/props';
+import type { RemotionAudioProps } from './audio';
+import type { RemotionVideoProps } from './video';
+import type { OffthreadVideoProps } from './video/props';
 export declare const validateMediaProps: (props: RemotionVideoProps | RemotionAudioProps | OffthreadVideoProps, component: 'Video' | 'Audio') => void;

package/dist/validation/validate-image-format.d.ts

@@ -1,2 +1,2 @@
-import { ImageFormat } from '../config';
+import type { ImageFormat } from '../config';
 export declare const validateNonNullImageFormat: (imageFormat: ImageFormat) => void;

package/dist/validation/validate-offthreadvideo-image-format.d.ts

@@ -0,0 +1 @@
+export declare const validateOffthreadVideoImageFormat: (input: unknown) => void;

package/dist/validation/validate-offthreadvideo-image-format.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateOffthreadVideoImageFormat = void 0;
+const validateOffthreadVideoImageFormat = (input) => {
+    if (typeof input === 'undefined') {
+        return;
+    }
+    if (typeof input !== 'string') {
+        throw new TypeError(`<OffthreadVideo imageFormat=""> must be a string, but got ${JSON.stringify(input)} instead.`);
+    }
+    if (input !== 'png' && input !== 'jpeg') {
+        throw new TypeError(`<OffthreadVideo imageFormat=""> must be either "png" or "jpeg", but got ${input}`);
+    }
+};
+exports.validateOffthreadVideoImageFormat = validateOffthreadVideoImageFormat;

package/dist/video/OffthreadVideo.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { OffthreadVideoProps, RemotionMainVideoProps } from './props';
+import type { OffthreadVideoProps, RemotionMainVideoProps } from './props';
 export declare const OffthreadVideo: React.FC<OffthreadVideoProps & RemotionMainVideoProps>;

package/dist/video/OffthreadVideo.js

@@ -6,6 +6,7 @@ const get_environment_1 = require("../get-environment");
 const Sequence_1 = require("../Sequence");
 const validate_media_props_1 = require("../validate-media-props");
 const validate_start_from_props_1 = require("../validate-start-from-props");
+const validate_offthreadvideo_image_format_1 = require("../validation/validate-offthreadvideo-image-format");
 const OffthreadVideoForRendering_1 = require("./OffthreadVideoForRendering");
 const VideoForDevelopment_1 = require("./VideoForDevelopment");
 const OffthreadVideo = (props) => {
@@ -17,6 +18,7 @@ const OffthreadVideo = (props) => {
         return ((0, jsx_runtime_1.jsx)(Sequence_1.Sequence, { layout: "none", from: 0 - startFromFrameNo, showInTimeline: false, durationInFrames: endAtFrameNo, children: (0, jsx_runtime_1.jsx)(exports.OffthreadVideo, { ...otherProps }) }));
     }
     (0, validate_media_props_1.validateMediaProps)(props, 'Video');
+    (0, validate_offthreadvideo_image_format_1.validateOffthreadVideoImageFormat)(props.imageFormat);
     if ((0, get_environment_1.getRemotionEnvironment)() === 'rendering') {
         return (0, jsx_runtime_1.jsx)(OffthreadVideoForRendering_1.OffthreadVideoForRendering, { ...otherProps });
     }

package/dist/video/OffthreadVideoForRendering.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { OffthreadVideoProps } from './props';
+import type { OffthreadVideoProps } from './props';
 export declare const OffthreadVideoForRendering: React.FC<OffthreadVideoProps>;

package/dist/video/OffthreadVideoForRendering.js

@@ -6,14 +6,17 @@ const react_1 = require("react");
 const absolute_src_1 = require("../absolute-src");
 const use_audio_frame_1 = require("../audio/use-audio-frame");
 const CompositionManager_1 = require("../CompositionManager");
+const default_css_1 = require("../default-css");
 const Img_1 = require("../Img");
+const internals_1 = require("../internals");
 const random_1 = require("../random");
 const Sequence_1 = require("../Sequence");
 const use_current_frame_1 = require("../use-current-frame");
 const use_unsafe_video_config_1 = require("../use-unsafe-video-config");
 const volume_prop_1 = require("../volume-prop");
 const get_current_time_1 = require("./get-current-time");
-const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate, src, muted, style, ...props }) => {
+const DEFAULT_IMAGE_FORMAT = 'jpeg';
+const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate, src, muted, imageFormat, ...props }) => {
     const absoluteFrame = (0, use_current_frame_1.useAbsoluteCurrentFrame)();
     const frame = (0, use_current_frame_1.useCurrentFrame)();
     const volumePropsFrame = (0, use_audio_frame_1.useFrameForVolumeProp)();
@@ -77,17 +80,16 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
         }) / videoConfig.fps);
     }, [frame, mediaStartsAt, playbackRate, videoConfig.fps]);
     const actualSrc = (0, react_1.useMemo)(() => {
-        return `http://localhost:${window.remotion_proxyPort}/proxy?src=${encodeURIComponent((0, absolute_src_1.getAbsoluteSrc)(src))}&time=${encodeURIComponent(currentTime)}`;
-    }, [currentTime, src]);
+        return `http://localhost:${window.remotion_proxyPort}/proxy?src=${encodeURIComponent((0, absolute_src_1.getAbsoluteSrc)(src))}&time=${encodeURIComponent(currentTime)}&imageFormat=${imageFormat !== null && imageFormat !== void 0 ? imageFormat : DEFAULT_IMAGE_FORMAT}`;
+    }, [currentTime, imageFormat, src]);
     const onErr = (0, react_1.useCallback)((e) => {
         onError === null || onError === void 0 ? void 0 : onError(e);
     }, [onError]);
-    const actualStyle = (0, react_1.useMemo)(() => {
-        return {
-            objectFit: 'contain',
-            ...(style !== null && style !== void 0 ? style : {}),
-        };
-    }, [style]);
-    return (0, jsx_runtime_1.jsx)(Img_1.Img, { src: actualSrc, style: actualStyle, ...props, onError: onErr });
+    const className = (0, react_1.useMemo)(() => {
+        return [default_css_1.OFFTHREAD_VIDEO_CLASS_NAME, props.className]
+            .filter(internals_1.Internals.truthy)
+            .join(' ');
+    }, [props.className]);
+    return ((0, jsx_runtime_1.jsx)(Img_1.Img, { src: actualSrc, className: className, ...props, onError: onErr }));
 };
 exports.OffthreadVideoForRendering = OffthreadVideoForRendering;

package/dist/video/Video.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { RemotionMainVideoProps } from './props';
+import type { RemotionMainVideoProps } from './props';
 export declare const Video: React.ForwardRefExoticComponent<Pick<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "onEnded" | "autoPlay" | "controls" | "loop"> & {
     volume?: import("../volume-prop").VolumeProp | undefined;
     playbackRate?: number | undefined;
-} & RemotionMainVideoProps, "style" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "height" | "width" | "key" | "controlsList" | "crossOrigin" | "mediaGroup" | "muted" | "playsInline" | "preload" | "src" | "volume" | "playbackRate" | "poster" | "disablePictureInPicture" | "disableRemotePlayback" | keyof RemotionMainVideoProps> & React.RefAttributes<HTMLVideoElement>>;
+} & RemotionMainVideoProps, "style" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "height" | "width" | "key" | "controlsList" | "crossOrigin" | "mediaGroup" | "muted" | "playsInline" | "preload" | "src" | "poster" | "disablePictureInPicture" | "disableRemotePlayback" | "volume" | "playbackRate" | keyof RemotionMainVideoProps> & React.RefAttributes<HTMLVideoElement>>;