@remotion/promo-pages 4.0.436 → 4.0.438

package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/Homepage.js

@@ -4081,7 +4081,7 @@ var useBasicMediaInTimeline = ({
   const videoConfig = useVideoConfig();
   const [initialVolume] = useState10(() => volume);
   const mediaDuration = calculateMediaDuration({
-    mediaDurationInFrames: videoConfig.durationInFrames,
+    mediaDurationInFrames: videoConfig.durationInFrames + (trimBefore ?? 0),
     playbackRate,
     trimBefore,
     trimAfter
@@ -29534,7 +29534,8 @@ class MediaPlayer {
     durationInFrames,
     onVideoFrameCallback,
     playing,
-    sequenceOffset
+    sequenceOffset,
+    credentials
   }) {
     this.canvas = canvas ?? null;
     this.src = src;
@@ -29558,7 +29559,9 @@ class MediaPlayer {
     this.playing = playing;
     this.sequenceOffset = sequenceOffset;
     this.input = new Input2({
-      source: new UrlSource(this.src),
+      source: new UrlSource(this.src, credentials ? {
+        requestInit: { credentials }
+      } : undefined),
       formats: ALL_FORMATS
     });
     if (canvas) {
@@ -30341,6 +30344,7 @@ var AudioForPreviewAssertedShowing = ({
   fallbackHtml5AudioProps,
   debugAudioScheduling,
   onError,
+  credentials,
   controls
 }) => {
   const videoConfig = useUnsafeVideoConfig2();
@@ -30467,7 +30471,8 @@ var AudioForPreviewAssertedShowing = ({
         durationInFrames: videoConfig.durationInFrames,
         onVideoFrameCallback: null,
         playing: initialPlaying.current,
-        sequenceOffset: initialSequenceOffset.current
+        sequenceOffset: initialSequenceOffset.current,
+        credentials
       });
       mediaPlayerRef.current = player;
       player.initialize(currentTimeRef.current, initialMuted.current).then((result) => {
@@ -30559,7 +30564,8 @@ var AudioForPreviewAssertedShowing = ({
     debugAudioScheduling,
     buffer,
     onError,
-    videoConfig.durationInFrames
+    videoConfig.durationInFrames,
+    credentials
   ]);
   if (shouldFallbackToNativeAudio && !disallowFallbackToHtml5Audio) {
     return /* @__PURE__ */ jsx58(Audio, {
@@ -30602,6 +30608,7 @@ var AudioForPreview2 = ({
   fallbackHtml5AudioProps,
   debugAudioScheduling,
   onError,
+  credentials,
   controls
 }) => {
   const preloadedSrc = usePreload2(src);
@@ -30651,6 +30658,7 @@ var AudioForPreview2 = ({
     toneFrequency,
     debugAudioScheduling: debugAudioScheduling ?? false,
     onError,
+    credentials,
     fallbackHtml5AudioProps,
     controls
   });
@@ -31745,11 +31753,12 @@ var getFormatOrNullOrNetworkError = async (input) => {
     return null;
   }
 };
-var getSinks = async (src) => {
+var getSinks = async (src, credentials) => {
   const input = new Input22({
     formats: ALL_FORMATS2,
     source: new UrlSource2(src, {
-      getRetryDelay
+      getRetryDelay,
+      ...credentials ? { requestInit: { credentials } } : undefined
     })
   });
   const format = await getFormatOrNullOrNetworkError(input);
@@ -31829,15 +31838,16 @@ var getSinks = async (src) => {
   };
 };
 var sinkPromises = {};
-var getSink = (src, logLevel) => {
-  let promise = sinkPromises[src];
+var getSink = (src, logLevel, credentials) => {
+  const cacheKey = credentials ? `${src}::${credentials}` : src;
+  let promise = sinkPromises[cacheKey];
   if (!promise) {
     Internals.Log.verbose({
       logLevel,
       tag: "@remotion/media"
     }, `Sink for ${src} was not found, creating new sink`);
-    promise = getSinks(src);
-    sinkPromises[src] = promise;
+    promise = getSinks(src, credentials);
+    sinkPromises[cacheKey] = promise;
   }
   return promise;
 };
@@ -31852,9 +31862,10 @@ var extractAudioInternal = async ({
   trimBefore,
   trimAfter,
   fps,
-  maxCacheSize
+  maxCacheSize,
+  credentials
 }) => {
-  const { getAudio, actualMatroskaTimestamps, isMatroska, getDuration } = await getSink(src, logLevel);
+  const { getAudio, actualMatroskaTimestamps, isMatroska, getDuration } = await getSink(src, logLevel, credentials);
   let mediaDurationInSeconds = null;
   if (loop) {
     mediaDurationInSeconds = await getDuration();
@@ -31977,9 +31988,10 @@ var extractFrameInternal = async ({
   trimBefore,
   playbackRate,
   fps,
-  maxCacheSize
+  maxCacheSize,
+  credentials
 }) => {
-  const sink = await getSink(src, logLevel);
+  const sink = await getSink(src, logLevel, credentials);
   const [video, mediaDurationInSecondsRaw] = await Promise.all([
     sink.getVideo(),
     loop ? sink.getDuration() : Promise.resolve(null)
@@ -32101,7 +32113,8 @@ var extractFrameAndAudio = async ({
   trimAfter,
   trimBefore,
   fps,
-  maxCacheSize
+  maxCacheSize,
+  credentials
 }) => {
   try {
     const [video, audio] = await Promise.all([
@@ -32114,7 +32127,8 @@ var extractFrameAndAudio = async ({
         playbackRate,
         trimBefore,
         fps,
-        maxCacheSize
+        maxCacheSize,
+        credentials
       }) : null,
       includeAudio ? extractAudio({
         src,
@@ -32127,7 +32141,8 @@ var extractFrameAndAudio = async ({
         trimAfter,
         fps,
         trimBefore,
-        maxCacheSize
+        maxCacheSize,
+        credentials
       }) : null
     ]);
     if (video?.type === "cannot-decode") {
@@ -32208,7 +32223,8 @@ var addBroadcastChannelListener = () => {
           trimAfter: data.trimAfter,
           trimBefore: data.trimBefore,
           fps: data.fps,
-          maxCacheSize: data.maxCacheSize
+          maxCacheSize: data.maxCacheSize,
+          credentials: data.credentials
         });
         if (result.type === "cannot-decode") {
           const cannotDecodeResponse = {
@@ -32303,7 +32319,8 @@ var extractFrameViaBroadcastChannel = async ({
   trimAfter,
   trimBefore,
   fps,
-  maxCacheSize
+  maxCacheSize,
+  credentials
 }) => {
   if (isClientSideRendering || window.remotion_isMainTab) {
     return extractFrameAndAudio({
@@ -32319,7 +32336,8 @@ var extractFrameViaBroadcastChannel = async ({
       trimAfter,
       trimBefore,
       fps,
-      maxCacheSize
+      maxCacheSize,
+      credentials
     });
   }
   await waitForMainTabToBeReady(window.remotion_broadcastChannel);
@@ -32396,7 +32414,8 @@ var extractFrameViaBroadcastChannel = async ({
     trimAfter,
     trimBefore,
     fps,
-    maxCacheSize
+    maxCacheSize,
+    credentials
   };
   window.remotion_broadcastChannel.postMessage(request);
   let timeoutId;
@@ -32431,7 +32450,8 @@ var AudioForRendering2 = ({
   toneFrequency,
   trimAfter,
   trimBefore,
-  onError
+  onError,
+  credentials
 }) => {
   const defaultLogLevel = Internals.useLogLevel();
   const logLevel = overriddenLogLevel ?? defaultLogLevel;
@@ -32495,7 +32515,8 @@ var AudioForRendering2 = ({
       trimAfter,
       trimBefore,
       fps,
-      maxCacheSize
+      maxCacheSize,
+      credentials
     }).then((result) => {
       const handleError = (error2, clientSideError, fallbackMessage) => {
         const [action, errorToUse] = callOnErrorAndResolve({
@@ -32589,7 +32610,8 @@ var AudioForRendering2 = ({
     replaceWithHtml5Audio,
     maxCacheSize,
     audioEnabled,
-    onError
+    onError,
+    credentials
   ]);
   if (replaceWithHtml5Audio) {
     return /* @__PURE__ */ jsx216(Html5Audio, {
@@ -32689,6 +32711,7 @@ var VideoForPreviewAssertedShowing = ({
   debugAudioScheduling,
   headless,
   onError,
+  credentials,
   controls
 }) => {
   const src = usePreload22(unpreloadedSrc);
@@ -32792,7 +32815,8 @@ var VideoForPreviewAssertedShowing = ({
         durationInFrames: videoConfig.durationInFrames,
         onVideoFrameCallback: initialOnVideoFrameRef.current ?? null,
         playing: initialPlaying.current,
-        sequenceOffset: initialSequenceOffset.current
+        sequenceOffset: initialSequenceOffset.current,
+        credentials
       });
       mediaPlayerRef.current = player;
       player.initialize(currentTimeRef.current, initialMuted.current).then((result) => {
@@ -32882,7 +32906,8 @@ var VideoForPreviewAssertedShowing = ({
     sharedAudioContext,
     videoConfig.fps,
     onError,
-    videoConfig.durationInFrames
+    videoConfig.durationInFrames,
+    credentials
   ]);
   const classNameValue = useMemo412(() => {
     return [Internals.OBJECTFIT_CONTAIN_CLASS_NAME, className2].filter(Internals.truthy).join(" ");
@@ -33014,7 +33039,8 @@ var VideoForRendering2 = ({
   trimAfterValue,
   trimBeforeValue,
   headless,
-  onError
+  onError,
+  credentials
 }) => {
   if (!src) {
     throw new TypeError("No `src` was passed to <Video>.");
@@ -33081,7 +33107,8 @@ var VideoForRendering2 = ({
       trimAfter: trimAfterValue,
       trimBefore: trimBeforeValue,
       fps,
-      maxCacheSize
+      maxCacheSize,
+      credentials
     }).then((result) => {
       const handleError = (err, clientSideError, fallbackMessage, mediaDurationInSeconds) => {
         if (environment.isClientSideRendering) {
@@ -33213,7 +33240,8 @@ var VideoForRendering2 = ({
     maxCacheSize,
     cancelRender3,
     headless,
-    onError
+    onError,
+    credentials
   ]);
   const classNameValue = useMemo53(() => {
     return [Internals.OBJECTFIT_CONTAIN_CLASS_NAME, className2].filter(Internals.truthy).join(" ");
@@ -33352,6 +33380,7 @@ var InnerVideo = ({
   debugAudioScheduling,
   headless,
   onError,
+  credentials,
   controls
 }) => {
   const environment = useRemotionEnvironment();
@@ -33394,7 +33423,8 @@ var InnerVideo = ({
       trimAfterValue,
       trimBeforeValue,
       headless,
-      onError
+      onError,
+      credentials
     });
   }
   return /* @__PURE__ */ jsx65(VideoForPreview2, {
@@ -33420,6 +33450,7 @@ var InnerVideo = ({
     debugAudioScheduling: debugAudioScheduling ?? false,
     headless: headless ?? false,
     onError,
+    credentials,
     controls
   });
 };
@@ -33449,6 +33480,7 @@ var VideoInner = ({
   debugAudioScheduling,
   headless,
   onError,
+  credentials,
   controls
 }) => {
   const fallbackLogLevel = Internals.useLogLevel();
@@ -33478,6 +33510,7 @@ var VideoInner = ({
     debugAudioScheduling: debugAudioScheduling ?? false,
     headless: headless ?? false,
     onError,
+    credentials,
     controls
   });
 };

package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/design.js

@@ -9055,7 +9055,7 @@ var useBasicMediaInTimeline = ({
   const videoConfig = useVideoConfig();
   const [initialVolume] = useState10(() => volume);
   const mediaDuration = calculateMediaDuration({
-    mediaDurationInFrames: videoConfig.durationInFrames,
+    mediaDurationInFrames: videoConfig.durationInFrames + (trimBefore ?? 0),
     playbackRate,
     trimBefore,
     trimAfter

package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/experts.js

@@ -4081,7 +4081,7 @@ var useBasicMediaInTimeline = ({
   const videoConfig = useVideoConfig();
   const [initialVolume] = useState10(() => volume);
   const mediaDuration = calculateMediaDuration({
-    mediaDurationInFrames: videoConfig.durationInFrames,
+    mediaDurationInFrames: videoConfig.durationInFrames + (trimBefore ?? 0),
     playbackRate,
     trimBefore,
     trimAfter

package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/homepage/Pricing.js

@@ -9055,7 +9055,7 @@ var useBasicMediaInTimeline = ({
   const videoConfig = useVideoConfig();
   const [initialVolume] = useState10(() => volume);
   const mediaDuration = calculateMediaDuration({
-    mediaDurationInFrames: videoConfig.durationInFrames,
+    mediaDurationInFrames: videoConfig.durationInFrames + (trimBefore ?? 0),
     playbackRate,
     trimBefore,
     trimAfter

package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/prompts/PromptsGallery.js

@@ -9055,7 +9055,7 @@ var useBasicMediaInTimeline = ({
   const videoConfig = useVideoConfig();
   const [initialVolume] = useState10(() => volume);
   const mediaDuration = calculateMediaDuration({
-    mediaDurationInFrames: videoConfig.durationInFrames,
+    mediaDurationInFrames: videoConfig.durationInFrames + (trimBefore ?? 0),
     playbackRate,
     trimBefore,
     trimAfter

package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/prompts/PromptsShow.js

@@ -26389,7 +26389,7 @@ var useBasicMediaInTimeline = ({
   const videoConfig = useVideoConfig();
   const [initialVolume] = useState10(() => volume);
   const mediaDuration = calculateMediaDuration({
-    mediaDurationInFrames: videoConfig.durationInFrames,
+    mediaDurationInFrames: videoConfig.durationInFrames + (trimBefore ?? 0),
     playbackRate,
     trimBefore,
     trimAfter

package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/prompts/PromptsSubmit.js

@@ -26389,7 +26389,7 @@ var useBasicMediaInTimeline = ({
   const videoConfig = useVideoConfig();
   const [initialVolume] = useState10(() => volume);
   const mediaDuration = calculateMediaDuration({
-    mediaDurationInFrames: videoConfig.durationInFrames,
+    mediaDurationInFrames: videoConfig.durationInFrames + (trimBefore ?? 0),
     playbackRate,
     trimBefore,
     trimAfter

package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/template-modal-content.js

@@ -9055,7 +9055,7 @@ var useBasicMediaInTimeline = ({
   const videoConfig = useVideoConfig();
   const [initialVolume] = useState10(() => volume);
   const mediaDuration = calculateMediaDuration({
-    mediaDurationInFrames: videoConfig.durationInFrames,
+    mediaDurationInFrames: videoConfig.durationInFrames + (trimBefore ?? 0),
     playbackRate,
     trimBefore,
     trimAfter

package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/templates.js

@@ -9055,7 +9055,7 @@ var useBasicMediaInTimeline = ({
   const videoConfig = useVideoConfig();
   const [initialVolume] = useState10(() => volume);
   const mediaDuration = calculateMediaDuration({
-    mediaDurationInFrames: videoConfig.durationInFrames,
+    mediaDurationInFrames: videoConfig.durationInFrames + (trimBefore ?? 0),
     playbackRate,
     trimBefore,
     trimAfter

package/dist/cn.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/cn.js

@@ -0,0 +1,5 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/components/3DEngine/ButtonDemo.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Button3D: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement>>;

package/dist/components/3DEngine/ButtonDemo.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from 'react';
+import { cn } from '../../cn';
+import { useHoverTransforms } from './hover-transforms';
+import { Outer } from './Outer';
+export const Button3D = ({ children, className, disabled, ...buttonProps }) => {
+    const [dimensions, setDimensions] = useState(null);
+    const ref = useRef(null);
+    const { isActive, progress } = useHoverTransforms(ref, Boolean(disabled));
+    const onPointerEnter = useCallback((e) => {
+        if (e.pointerType !== 'mouse') {
+            return;
+        }
+        setDimensions((prevDim) => {
+            if (prevDim) {
+                return prevDim;
+            }
+            if (!ref.current) {
+                throw new Error('Ref is not set');
+            }
+            const { childNodes } = ref.current;
+            if (childNodes.length === 0) {
+                throw new Error('No child nodes');
+            }
+            const childNode = childNodes[0];
+            if (!childNode) {
+                throw new Error('No child node');
+            }
+            const rect = childNode.getBoundingClientRect();
+            const { borderRadius } = getComputedStyle(childNode);
+            const cornerRadius = borderRadius.includes('e+0')
+                ? Infinity
+                : parseInt(borderRadius !== null && borderRadius !== void 0 ? borderRadius : '0', 10);
+            return {
+                width: rect.width,
+                height: rect.height,
+                borderRadius: Math.min(cornerRadius, rect.width / 2, rect.height / 2),
+            };
+        });
+    }, []);
+    const content = (_jsx("button", { type: "button", disabled: disabled, className: cn('text-black', 'flex', 'justify-center', 'bg-white', 'items-center', 'font-brand', 'border-solid', 'text-[1em]', 'rounded-md', 'border-black', 'border-2', 'border-b-4', 'cursor-pointer', 'px-4', 'py-3', 'disabled:cursor-default', 'disabled:border-gray-500', 'disabled:text-gray-500', 'transition-colors', className), ...buttonProps, children: children }));
+    return (_jsx("div", { ref: ref, className: "contents", onPointerEnter: onPointerEnter, children: dimensions && (isActive || progress > 0) ? (_jsx(Outer, { parentRef: ref, width: dimensions.width, height: dimensions.height, cornerRadius: dimensions.borderRadius, hoverTransform: progress, children: content })) : (content) }));
+};

package/dist/components/3DEngine/Faces.d.ts

@@ -0,0 +1,5 @@
+import type { FaceType } from '@remotion/svg-3d-engine';
+import React from 'react';
+export declare const Faces: React.FC<{
+    readonly elements: FaceType[];
+}>;

package/dist/components/3DEngine/Faces.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { threeDIntoSvgPath } from '@remotion/svg-3d-engine';
+export const Faces = ({ elements, ...svgProps }) => {
+    return (_jsx(_Fragment, { children: elements.map(({ points, color, crispEdges }, idx) => {
+            return (_jsx("path", { d: threeDIntoSvgPath(points), fill: color, shapeRendering: crispEdges ? 'crispEdges' : undefined, ...svgProps }, idx));
+        }) }));
+};

package/dist/components/3DEngine/Outer.d.ts

@@ -0,0 +1,8 @@
+export declare const Outer: React.FC<{
+    children: React.ReactNode;
+    width: number;
+    height: number;
+    cornerRadius: number;
+    hoverTransform: number;
+    parentRef: React.RefObject<HTMLDivElement | null>;
+}>;

package/dist/components/3DEngine/Outer.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { parsePath, PathInternals, reduceInstructions } from '@remotion/paths';
+import { makeRect } from '@remotion/shapes';
+import { extrudeAndTransformElement, interpolateMatrix4d, makeMatrix3dTransform, reduceMatrices, rotateX, rotateY, scaled, translateX, translateY, translateZ, } from '@remotion/svg-3d-engine';
+import { interpolate } from 'remotion';
+import { Faces } from './Faces';
+import { useClickTransforms, useMousePosition } from './hover-transforms';
+export const Outer = ({ children, width, height, cornerRadius, hoverTransform, parentRef }) => {
+    const clickTransform = useClickTransforms(parentRef);
+    const angle = useMousePosition(parentRef);
+    const appropriateScale = Math.min(1.1, (20 + width) / width);
+    const transformationUnhovered = reduceMatrices([
+        rotateX(-Math.PI / 20),
+    ]);
+    const transformationHovered = reduceMatrices([
+        scaled(appropriateScale),
+        rotateX(-Math.PI / 16),
+        rotateX(Math.sin(angle) / 4),
+        rotateY(-Math.cos(angle) / 4),
+    ]);
+    const transformation = interpolateMatrix4d(hoverTransform, transformationUnhovered, transformationHovered);
+    const depthFromClick = clickTransform * 15;
+    const depthFromHover = interpolate(hoverTransform, [0, 1], [10, 20]);
+    const depth = depthFromHover;
+    const frontFace = reduceMatrices([
+        translateZ(-depth / 2 + depthFromClick),
+        transformation,
+    ]);
+    const centerOriented = reduceMatrices([
+        translateX(-width / 2),
+        translateY(-height / 2),
+        transformation,
+        translateX(width / 2),
+        translateY(height / 2),
+    ]);
+    const { path, instructions } = makeRect({ height, width, cornerRadius });
+    const { viewBox } = PathInternals.getBoundingBoxFromInstructions(reduceInstructions(instructions));
+    const inbetween = extrudeAndTransformElement({
+        sideColor: 'black',
+        crispEdges: false,
+        depth,
+        pressInDepth: depthFromClick,
+        points: parsePath(path),
+        description: 'rect',
+        transformations: centerOriented,
+    });
+    return (_jsxs("div", { className: "relative", style: { width, height }, children: [_jsx("svg", { viewBox: viewBox, style: {
+                    overflow: 'visible',
+                    height,
+                    width,
+                    position: 'absolute',
+                    top: 0,
+                }, pointerEvents: "none", children: _jsx(Faces, { elements: inbetween }) }), _jsx("div", { style: {
+                    transform: makeMatrix3dTransform(frontFace),
+                }, children: children })] }));
+};

package/dist/components/3DEngine/Switch.d.ts

@@ -0,0 +1,4 @@
+export declare const Switch: React.FC<{
+    readonly active: boolean;
+    readonly onToggle: () => void;
+}>;

package/dist/components/3DEngine/Switch.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Switch = ({ active, onToggle }) => {
+    return (_jsx("div", { "data-active": active, className: "h-6 transition-all rounded-full w-12 border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative", onClick: onToggle, children: _jsx("div", { "data-active": active, className: "h-4 w-4 left-[4px] top-[4px] transition-all rounded-full bg-white border-2  border-black absolute data-[active=true]:left-[calc(100%-24px)]" }) }));
+};

package/dist/components/3DEngine/get-child-node-from.d.ts

@@ -0,0 +1 @@
+export declare const getChildNodeFrom: (htmlElement: HTMLDivElement | null) => HTMLElement | null;

package/dist/components/3DEngine/get-child-node-from.js

@@ -0,0 +1,14 @@
+export const getChildNodeFrom = (htmlElement) => {
+    if (!htmlElement) {
+        return null;
+    }
+    const { childNodes } = htmlElement;
+    if (childNodes.length === 0) {
+        return null;
+    }
+    const childNode = childNodes[0];
+    if (!childNode) {
+        return null;
+    }
+    return childNode;
+};

package/dist/components/3DEngine/hover-transforms.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type State = {
+    progress: number;
+    isActive: boolean;
+};
+export declare const useHoverTransforms: (ref: React.RefObject<HTMLDivElement | null>, disabled: boolean) => State;
+export declare const useClickTransforms: (ref: React.RefObject<HTMLDivElement | null>) => number;
+export declare const useMousePosition: (ref: React.RefObject<HTMLDivElement | null>) => number;
+export {};