@remotion/promo-pages 4.0.439 → 4.0.441

package/dist/tailwind.css

@@ -1835,11 +1835,13 @@
 html {
   font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',	'Segoe UI Symbol', 'Noto Color Emoji';
 }
-* {
-  box-sizing: border-box;
-}
-body {
-  margin: 0;
+@layer base {
+  * {
+    box-sizing: border-box;
+  }
+  body {
+    margin: 0;
+  }
 }
 @keyframes click {
   0% {

package/dist/team.js

@@ -1556,7 +1556,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React4, { useEffect as useEffect18, useMemo as useMemo36, useState as useState19 } from "react";
+import React4, { useEffect as useEffect18, useMemo as useMemo36, useState as useState20 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -6043,7 +6043,8 @@ import {
   useContext as useContext29,
   useImperativeHandle as useImperativeHandle6,
   useLayoutEffect as useLayoutEffect9,
-  useRef as useRef17
+  useRef as useRef17,
+  useState as useState15
 } from "react";
 import { jsx as jsx24 } from "react/jsx-runtime";
 import { createRef as createRef3 } from "react";
@@ -6053,7 +6054,7 @@ import {
   useImperativeHandle as useImperativeHandle7,
   useMemo as useMemo26,
   useRef as useRef18,
-  useState as useState15
+  useState as useState16
 } from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
 import React25 from "react";
@@ -6063,7 +6064,7 @@ import { jsx as jsx26 } from "react/jsx-runtime";
 import { jsx as jsx27 } from "react/jsx-runtime";
 import React27 from "react";
 import React28, { createContext as createContext21 } from "react";
-import { useContext as useContext31, useMemo as useMemo29, useState as useState16 } from "react";
+import { useContext as useContext31, useMemo as useMemo29, useState as useState17 } from "react";
 import { useContext as useContext32 } from "react";
 import { useCallback as useCallback16 } from "react";
 import {
@@ -6072,7 +6073,7 @@ import {
   useEffect as useEffect14,
   useLayoutEffect as useLayoutEffect10,
   useMemo as useMemo30,
-  useState as useState17
+  useState as useState18
 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 import React30, {
@@ -6082,7 +6083,7 @@ import React30, {
   useImperativeHandle as useImperativeHandle8,
   useMemo as useMemo31,
   useRef as useRef19,
-  useState as useState18
+  useState as useState19
 } from "react";
 import { useEffect as useEffect15 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
@@ -6153,7 +6154,7 @@ var useIsPlayer = () => {
 function truthy2(value) {
   return Boolean(value);
 }
-var VERSION = "4.0.439";
+var VERSION = "4.0.441";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -9244,6 +9245,76 @@ var useBasicMediaInTimeline = ({
     finalDisplayName: displayName ?? getAssetDisplayName(src)
   };
 };
+var useImageInTimeline = ({
+  src,
+  displayName,
+  id,
+  stack,
+  showInTimeline,
+  premountDisplay,
+  postmountDisplay,
+  loopDisplay
+}) => {
+  const parentSequence = useContext19(SequenceContext);
+  const { registerSequence, unregisterSequence } = useContext19(SequenceManager);
+  const { duration, nonce, rootId, isStudio, finalDisplayName } = useBasicMediaInTimeline({
+    volume: undefined,
+    mediaVolume: 0,
+    mediaType: "image",
+    src,
+    displayName,
+    trimAfter: undefined,
+    trimBefore: undefined,
+    playbackRate: 1
+  });
+  useEffect4(() => {
+    if (!src) {
+      throw new Error("No src passed");
+    }
+    if (!isStudio && window.process?.env?.NODE_ENV !== "test") {
+      return;
+    }
+    if (!showInTimeline) {
+      return;
+    }
+    registerSequence({
+      type: "image",
+      src,
+      id,
+      duration,
+      from: 0,
+      parent: parentSequence?.id ?? null,
+      displayName: finalDisplayName,
+      rootId,
+      showInTimeline: true,
+      nonce: nonce.get(),
+      loopDisplay,
+      stack,
+      premountDisplay,
+      postmountDisplay,
+      controls: null
+    });
+    return () => {
+      unregisterSequence(id);
+    };
+  }, [
+    duration,
+    id,
+    parentSequence,
+    src,
+    registerSequence,
+    unregisterSequence,
+    nonce,
+    stack,
+    showInTimeline,
+    premountDisplay,
+    postmountDisplay,
+    isStudio,
+    loopDisplay,
+    rootId,
+    finalDisplayName
+  ]);
+};
 var useMediaInTimeline = ({
   volume,
   mediaVolume,
@@ -10988,12 +11059,16 @@ var ImgRefForwarding = ({
   delayRenderTimeoutInMilliseconds,
   onImageFrame,
   crossOrigin,
+  showInTimeline,
+  name,
+  stack,
   ...props2
 }, ref) => {
   const imageRef = useRef17(null);
   const errors = useRef17({});
   const { delayPlayback } = useBufferState();
   const sequenceContext = useContext29(SequenceContext);
+  const [timelineId] = useState15(() => String(Math.random()));
   if (!src) {
     throw new Error('No "src" prop was passed to <Img>.');
   }
@@ -11004,6 +11079,16 @@ var ImgRefForwarding = ({
   useImperativeHandle6(ref, () => {
     return imageRef.current;
   }, []);
+  useImageInTimeline({
+    src,
+    displayName: name ?? null,
+    id: timelineId,
+    stack: stack ?? null,
+    showInTimeline: showInTimeline ?? true,
+    premountDisplay: sequenceContext?.premountDisplay ?? null,
+    postmountDisplay: sequenceContext?.postmountDisplay ?? null,
+    loopDisplay: undefined
+  });
   const actualSrc = usePreload(src);
   const retryIn = useCallback13((timeout) => {
     if (!imageRef.current) {
@@ -11126,6 +11211,7 @@ var ImgRefForwarding = ({
   });
 };
 var Img = forwardRef8(ImgRefForwarding);
+addSequenceStackTraces(Img);
 var compositionsRef = React24.createRef();
 var CompositionManagerProvider = ({
   children,
@@ -11134,9 +11220,9 @@ var CompositionManagerProvider = ({
   initialCompositions,
   initialCanvasContent
 }) => {
-  const [folders, setFolders] = useState15([]);
-  const [canvasContent, setCanvasContent] = useState15(initialCanvasContent);
-  const [compositions, setCompositions] = useState15(initialCompositions);
+  const [folders, setFolders] = useState16([]);
+  const [canvasContent, setCanvasContent] = useState16(initialCanvasContent);
+  const [compositions, setCompositions] = useState16(initialCompositions);
   const currentcompositionsRef = useRef18(compositions);
   const updateCompositions = useCallback14((updateComps) => {
     setCompositions((comps) => {
@@ -11400,6 +11486,7 @@ var validCodecs = [
   "h265",
   "vp8",
   "vp9",
+  "av1",
   "mp3",
   "aac",
   "wav",
@@ -11623,7 +11710,7 @@ var useSchema = (schema, currentValue) => {
   if (earlyReturn) {
     return earlyReturn;
   }
-  const [overrideId] = useState16(() => String(Math.random()));
+  const [overrideId] = useState17(() => String(Math.random()));
   const {
     visualModeEnabled,
     dragOverrides: overrides,
@@ -11793,7 +11880,7 @@ var OffthreadVideoForRendering = ({
       toneMapped
     });
   }, [toneMapped, currentTime, src, transparent]);
-  const [imageSrc, setImageSrc] = useState17(null);
+  const [imageSrc, setImageSrc] = useState18(null);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   useLayoutEffect10(() => {
     if (!window.remotion_videoEnabled) {
@@ -11982,7 +12069,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const { hidden } = useContext34(SequenceVisibilityToggleContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
-  const [timelineId] = useState18(() => String(Math.random()));
+  const [timelineId] = useState19(() => String(Math.random()));
   const isSequenceHidden = hidden[timelineId] ?? false;
   if (typeof acceptableTimeShift !== "undefined") {
     throw new Error("acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.");
@@ -12048,7 +12135,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   useImperativeHandle8(ref, () => {
     return videoRef.current;
   }, []);
-  useState18(() => playbackLogging({
+  useState19(() => playbackLogging({
     logLevel,
     message: `Mounting video with source = ${actualSrc}, v=${VERSION}, user agent=${typeof navigator === "undefined" ? "server" : navigator.userAgent}`,
     tag: "video",
@@ -13725,7 +13812,7 @@ var getAngle = (ref, coordinates) => {
 };
 var lastCoordinates = null;
 var useMousePosition = (ref) => {
-  const [angle, setAngle] = useState19(getAngle(ref.current, lastCoordinates));
+  const [angle, setAngle] = useState20(getAngle(ref.current, lastCoordinates));
   useEffect18(() => {
     const element = ref.current;
     if (!element) {

package/dist/template-modal-content.js

@@ -1375,7 +1375,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React4, { useEffect as useEffect18, useMemo as useMemo36, useState as useState19 } from "react";
+import React4, { useEffect as useEffect18, useMemo as useMemo36, useState as useState20 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -5862,7 +5862,8 @@ import {
   useContext as useContext29,
   useImperativeHandle as useImperativeHandle6,
   useLayoutEffect as useLayoutEffect9,
-  useRef as useRef17
+  useRef as useRef17,
+  useState as useState15
 } from "react";
 import { jsx as jsx24 } from "react/jsx-runtime";
 import { createRef as createRef3 } from "react";
@@ -5872,7 +5873,7 @@ import {
   useImperativeHandle as useImperativeHandle7,
   useMemo as useMemo26,
   useRef as useRef18,
-  useState as useState15
+  useState as useState16
 } from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
 import React25 from "react";
@@ -5882,7 +5883,7 @@ import { jsx as jsx26 } from "react/jsx-runtime";
 import { jsx as jsx27 } from "react/jsx-runtime";
 import React27 from "react";
 import React28, { createContext as createContext21 } from "react";
-import { useContext as useContext31, useMemo as useMemo29, useState as useState16 } from "react";
+import { useContext as useContext31, useMemo as useMemo29, useState as useState17 } from "react";
 import { useContext as useContext32 } from "react";
 import { useCallback as useCallback16 } from "react";
 import {
@@ -5891,7 +5892,7 @@ import {
   useEffect as useEffect14,
   useLayoutEffect as useLayoutEffect10,
   useMemo as useMemo30,
-  useState as useState17
+  useState as useState18
 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 import React30, {
@@ -5901,7 +5902,7 @@ import React30, {
   useImperativeHandle as useImperativeHandle8,
   useMemo as useMemo31,
   useRef as useRef19,
-  useState as useState18
+  useState as useState19
 } from "react";
 import { useEffect as useEffect15 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
@@ -5972,7 +5973,7 @@ var useIsPlayer = () => {
 function truthy2(value) {
   return Boolean(value);
 }
-var VERSION = "4.0.439";
+var VERSION = "4.0.441";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -9063,6 +9064,76 @@ var useBasicMediaInTimeline = ({
     finalDisplayName: displayName ?? getAssetDisplayName(src)
   };
 };
+var useImageInTimeline = ({
+  src,
+  displayName,
+  id,
+  stack,
+  showInTimeline,
+  premountDisplay,
+  postmountDisplay,
+  loopDisplay
+}) => {
+  const parentSequence = useContext19(SequenceContext);
+  const { registerSequence, unregisterSequence } = useContext19(SequenceManager);
+  const { duration, nonce, rootId, isStudio, finalDisplayName } = useBasicMediaInTimeline({
+    volume: undefined,
+    mediaVolume: 0,
+    mediaType: "image",
+    src,
+    displayName,
+    trimAfter: undefined,
+    trimBefore: undefined,
+    playbackRate: 1
+  });
+  useEffect4(() => {
+    if (!src) {
+      throw new Error("No src passed");
+    }
+    if (!isStudio && window.process?.env?.NODE_ENV !== "test") {
+      return;
+    }
+    if (!showInTimeline) {
+      return;
+    }
+    registerSequence({
+      type: "image",
+      src,
+      id,
+      duration,
+      from: 0,
+      parent: parentSequence?.id ?? null,
+      displayName: finalDisplayName,
+      rootId,
+      showInTimeline: true,
+      nonce: nonce.get(),
+      loopDisplay,
+      stack,
+      premountDisplay,
+      postmountDisplay,
+      controls: null
+    });
+    return () => {
+      unregisterSequence(id);
+    };
+  }, [
+    duration,
+    id,
+    parentSequence,
+    src,
+    registerSequence,
+    unregisterSequence,
+    nonce,
+    stack,
+    showInTimeline,
+    premountDisplay,
+    postmountDisplay,
+    isStudio,
+    loopDisplay,
+    rootId,
+    finalDisplayName
+  ]);
+};
 var useMediaInTimeline = ({
   volume,
   mediaVolume,
@@ -10807,12 +10878,16 @@ var ImgRefForwarding = ({
   delayRenderTimeoutInMilliseconds,
   onImageFrame,
   crossOrigin,
+  showInTimeline,
+  name,
+  stack,
   ...props2
 }, ref) => {
   const imageRef = useRef17(null);
   const errors = useRef17({});
   const { delayPlayback } = useBufferState();
   const sequenceContext = useContext29(SequenceContext);
+  const [timelineId] = useState15(() => String(Math.random()));
   if (!src) {
     throw new Error('No "src" prop was passed to <Img>.');
   }
@@ -10823,6 +10898,16 @@ var ImgRefForwarding = ({
   useImperativeHandle6(ref, () => {
     return imageRef.current;
   }, []);
+  useImageInTimeline({
+    src,
+    displayName: name ?? null,
+    id: timelineId,
+    stack: stack ?? null,
+    showInTimeline: showInTimeline ?? true,
+    premountDisplay: sequenceContext?.premountDisplay ?? null,
+    postmountDisplay: sequenceContext?.postmountDisplay ?? null,
+    loopDisplay: undefined
+  });
   const actualSrc = usePreload(src);
   const retryIn = useCallback13((timeout) => {
     if (!imageRef.current) {
@@ -10945,6 +11030,7 @@ var ImgRefForwarding = ({
   });
 };
 var Img = forwardRef8(ImgRefForwarding);
+addSequenceStackTraces(Img);
 var compositionsRef = React24.createRef();
 var CompositionManagerProvider = ({
   children,
@@ -10953,9 +11039,9 @@ var CompositionManagerProvider = ({
   initialCompositions,
   initialCanvasContent
 }) => {
-  const [folders, setFolders] = useState15([]);
-  const [canvasContent, setCanvasContent] = useState15(initialCanvasContent);
-  const [compositions, setCompositions] = useState15(initialCompositions);
+  const [folders, setFolders] = useState16([]);
+  const [canvasContent, setCanvasContent] = useState16(initialCanvasContent);
+  const [compositions, setCompositions] = useState16(initialCompositions);
   const currentcompositionsRef = useRef18(compositions);
   const updateCompositions = useCallback14((updateComps) => {
     setCompositions((comps) => {
@@ -11219,6 +11305,7 @@ var validCodecs = [
   "h265",
   "vp8",
   "vp9",
+  "av1",
   "mp3",
   "aac",
   "wav",
@@ -11442,7 +11529,7 @@ var useSchema = (schema, currentValue) => {
   if (earlyReturn) {
     return earlyReturn;
   }
-  const [overrideId] = useState16(() => String(Math.random()));
+  const [overrideId] = useState17(() => String(Math.random()));
   const {
     visualModeEnabled,
     dragOverrides: overrides,
@@ -11612,7 +11699,7 @@ var OffthreadVideoForRendering = ({
       toneMapped
     });
   }, [toneMapped, currentTime, src, transparent]);
-  const [imageSrc, setImageSrc] = useState17(null);
+  const [imageSrc, setImageSrc] = useState18(null);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   useLayoutEffect10(() => {
     if (!window.remotion_videoEnabled) {
@@ -11801,7 +11888,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const { hidden } = useContext34(SequenceVisibilityToggleContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
-  const [timelineId] = useState18(() => String(Math.random()));
+  const [timelineId] = useState19(() => String(Math.random()));
   const isSequenceHidden = hidden[timelineId] ?? false;
   if (typeof acceptableTimeShift !== "undefined") {
     throw new Error("acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.");
@@ -11867,7 +11954,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   useImperativeHandle8(ref, () => {
     return videoRef.current;
   }, []);
-  useState18(() => playbackLogging({
+  useState19(() => playbackLogging({
     logLevel,
     message: `Mounting video with source = ${actualSrc}, v=${VERSION}, user agent=${typeof navigator === "undefined" ? "server" : navigator.userAgent}`,
     tag: "video",
@@ -13544,7 +13631,7 @@ var getAngle = (ref, coordinates) => {
 };
 var lastCoordinates = null;
 var useMousePosition = (ref) => {
-  const [angle, setAngle] = useState19(getAngle(ref.current, lastCoordinates));
+  const [angle, setAngle] = useState20(getAngle(ref.current, lastCoordinates));
   useEffect18(() => {
     const element = ref.current;
     if (!element) {
@@ -19850,7 +19937,7 @@ var Triangle2 = (props) => {
 };
 
 // src/components/template-modal-content.tsx
-import { useCallback as useCallback32, useState as useState40 } from "react";
+import { useCallback as useCallback32, useState as useState41 } from "react";
 
 // ../../node_modules/.bun/tailwind-merge@2.5.2/node_modules/tailwind-merge/dist/bundle-mjs.mjs
 var CLASS_PART_SEPARATOR2 = "-";
@@ -21169,9 +21256,9 @@ function cn2(...inputs) {
 }
 
 // src/helpers/use-el-size.ts
-import { useCallback as useCallback30, useEffect as useEffect39, useMemo as useMemo46, useState as useState38 } from "react";
+import { useCallback as useCallback30, useEffect as useEffect39, useMemo as useMemo46, useState as useState39 } from "react";
 var useElementSize = (ref) => {
-  const [size4, setSize] = useState38(null);
+  const [size4, setSize] = useState39(null);
   const observer = useMemo46(() => {
     if (typeof ResizeObserver === "undefined") {
       return;
@@ -21278,7 +21365,7 @@ import { forwardRef as forwardRef33, useEffect as useEffect41, useImperativeHand
 // src/components/homepage/VideoPlayerWithControls.tsx
 import Hls from "hls.js";
 import"plyr/dist/plyr.css";
-import { forwardRef as forwardRef32, useCallback as useCallback31, useEffect as useEffect40, useRef as useRef38, useState as useState39 } from "react";
+import { forwardRef as forwardRef32, useCallback as useCallback31, useEffect as useEffect40, useRef as useRef38, useState as useState40 } from "react";
 import { jsx as jsx40 } from "react/jsx-runtime";
 var useCombinedRefs = function(...refs) {
   const targetRef = useRef38(null);
@@ -21299,7 +21386,7 @@ var VideoPlayerWithControls = forwardRef32(({ playbackId, poster, currentTime, o
   const videoRef = useRef38(null);
   const metaRef = useCombinedRefs(ref, videoRef);
   const playerRef = useRef38(null);
-  const [playerInitTime] = useState39(Date.now());
+  const [playerInitTime] = useState40(Date.now());
   const videoError = useCallback31((event) => onError(event), [onError]);
   const onImageLoad = useCallback31((event) => {
     const [w, h] = [event.target.width, event.target.height];
@@ -21474,7 +21561,7 @@ var PreviewIcon = () => {
 };
 var copyTimeout = null;
 var TemplateModalContent = ({ template }) => {
-  const [copied, setCopied] = useState40(false);
+  const [copied, setCopied] = useState41(false);
   const mobileLayout = useMobileLayout();
   const copyCommand = useCallback32(async (command) => {
     clearTimeout(copyTimeout);