@microfox/remotion 1.2.3 → 1.2.5

package/dist/index.mjs

@@ -84,6 +84,13 @@ var useComposition = () => {
 
 // src/core/context/timing.ts
 import { ALL_FORMATS, Input, UrlSource } from "mediabunny";
+var durationCache = /* @__PURE__ */ new Map();
+var getDurationCacheKey = (src, startFrom, endAt, playbackRate) => {
+  const startFromStr = startFrom === void 0 ? "undefined" : String(startFrom);
+  const endAtStr = endAt === void 0 ? "undefined" : String(endAt);
+  const playbackRateStr = playbackRate === void 0 ? "1" : String(playbackRate);
+  return `${src}|${startFromStr}|${endAtStr}|${playbackRateStr}`;
+};
 var findMatchingComponents = (childrenData, targetIds) => {
   const matches = [];
   const searchRecursively = (components) => {
@@ -126,19 +133,29 @@ var findMatchingComponentsByQuery = (childrenData, query) => {
 };
 var calculateComponentDuration = async (component) => {
   const src = component.data.src;
-  if (src.startsWith("http")) {
-    const audioInput = new Input({
-      formats: ALL_FORMATS,
-      source: new UrlSource(src)
-    });
-    const audioDuration = await audioInput.computeDuration();
-    let trimmedDuration = audioDuration;
-    if (component.data.startFrom || component.data.endAt) {
-      trimmedDuration = audioDuration - (component.data.startFrom || 0) - (component.data.endAt ? audioDuration - (component.data.endAt || 0) : 0);
-    }
+  if (src?.startsWith("http")) {
+    const startFrom = component.data.startFrom;
+    const endAt = component.data.endAt;
     const playbackRate = component.data.playbackRate || 1;
-    const effectiveDuration = trimmedDuration / playbackRate;
-    return effectiveDuration;
+    const cacheKey = getDurationCacheKey(src, startFrom, endAt, playbackRate);
+    if (durationCache.has(cacheKey)) {
+      return durationCache.get(cacheKey);
+    }
+    const calculationPromise = (async () => {
+      const audioInput = new Input({
+        formats: ALL_FORMATS,
+        source: new UrlSource(src)
+      });
+      const audioDuration = await audioInput.computeDuration();
+      let trimmedDuration = audioDuration;
+      if (startFrom || endAt) {
+        trimmedDuration = audioDuration - (startFrom || 0) - (endAt ? audioDuration - (endAt || 0) : 0);
+      }
+      const effectiveDuration = trimmedDuration / playbackRate;
+      return effectiveDuration;
+    })();
+    durationCache.set(cacheKey, calculationPromise);
+    return calculationPromise;
   } else {
   }
 };
@@ -151,9 +168,13 @@ var calculateDuration = async (childrenData, config18) => {
   );
   if (matchingComponents.length === 1) {
     if (matchingComponents[0].type === "atom" && (matchingComponents[0].componentId === "AudioAtom" || matchingComponents[0].componentId === "VideoAtom")) {
-      calculatedDuration = await calculateComponentDuration(
-        matchingComponents[0]
-      );
+      if (matchingComponents[0].context?.timing?.duration) {
+        calculatedDuration = matchingComponents[0].context.timing.duration;
+      } else {
+        calculatedDuration = await calculateComponentDuration(
+          matchingComponents[0]
+        );
+      }
     }
     if ((matchingComponents[0].type === "scene" || matchingComponents[0].type === "layout") && matchingComponents[0].context?.timing?.duration) {
       calculatedDuration = matchingComponents[0].context.timing.duration;
@@ -162,6 +183,7 @@ var calculateDuration = async (childrenData, config18) => {
   return calculatedDuration;
 };
 var setDurationsInContext = async (root) => {
+  durationCache.clear();
   const iterateRecursively = async (components, onlyScene = false) => {
     const updatedComponents = [];
     for (const component of components) {
@@ -173,12 +195,15 @@ var setDurationsInContext = async (root) => {
         );
       }
       if (updatedComponent.context?.timing?.fitDurationTo?.length > 0 && !onlyScene && updatedComponent.context?.timing?.fitDurationTo != updatedComponent.id && updatedComponent.context?.timing?.fitDurationTo != "this" && updatedComponent.context?.timing?.fitDurationTo != "fill") {
-        const duration = await calculateDuration(
-          updatedComponent.childrenData,
-          {
-            fitDurationTo: updatedComponent.context?.timing?.fitDurationTo
-          }
-        );
+        let duration = updatedComponent.context?.timing?.duration;
+        if (!duration) {
+          duration = await calculateDuration(
+            updatedComponent.childrenData,
+            {
+              fitDurationTo: updatedComponent.context?.timing?.fitDurationTo
+            }
+          );
+        }
         updatedComponent = {
           ...updatedComponent,
           context: {
@@ -201,6 +226,8 @@ var setDurationsInContext = async (root) => {
             (acc, child) => acc + (child.context?.timing?.duration ?? 0),
             0
           ) ?? 10;
+        } else {
+          duration = updatedComponent.context.timing.duration;
         }
         if (duration !== void 0) {
           updatedComponent.context = {
@@ -214,7 +241,13 @@ var setDurationsInContext = async (root) => {
       }
       if (updatedComponent.type === "atom" && !onlyScene) {
         if (updatedComponent.componentId === "VideoAtom" || updatedComponent.componentId === "AudioAtom") {
-          const mediaDuration = await calculateComponentDuration(updatedComponent);
+          const needsDurationCalculation = !updatedComponent.context?.timing?.duration || updatedComponent.data?.loop && !updatedComponent.data?.srcDuration;
+          let mediaDuration;
+          if (needsDurationCalculation) {
+            mediaDuration = await calculateComponentDuration(updatedComponent);
+          } else {
+            mediaDuration = updatedComponent.context?.timing?.duration;
+          }
           if (!updatedComponent.context?.timing?.fitDurationTo) {
             updatedComponent.context = {
               ...updatedComponent.context || {},
@@ -225,9 +258,9 @@ var setDurationsInContext = async (root) => {
             };
             updatedComponent.data = {
               ...updatedComponent.data,
-              ...updatedComponent.data.loop ? { srcDuration: mediaDuration } : {}
+              ...updatedComponent.data.loop && mediaDuration ? { srcDuration: mediaDuration } : {}
             };
-          } else if (updatedComponent.context?.timing?.fitDurationTo) {
+          } else if (updatedComponent.context?.timing?.fitDurationTo && mediaDuration) {
             updatedComponent.data = {
               ...updatedComponent.data,
               srcDuration: mediaDuration
@@ -5241,6 +5274,7 @@ var WaveformHistogram = ({ data }) => {
     histogramStyle = "centered",
     amplitude = 1,
     multiplier = 1,
+    barSlant = 0,
     gradientStartColor,
     gradientEndColor,
     gradientDirection = "vertical",
@@ -5264,7 +5298,8 @@ var WaveformHistogram = ({ data }) => {
       gradientDirection,
       multiplier,
       gradientStyle,
-      waveDirection
+      waveDirection,
+      barSlant
     }
   ));
 };
@@ -5283,7 +5318,8 @@ var WaveformHistogramContent = ({
   gradientDirection,
   multiplier,
   gradientStyle,
-  waveDirection
+  waveDirection,
+  barSlant
 }) => {
   const { waveformData, frequencyData, amplitudes, width, height } = useWaveformContext();
   const dataToUse = amplitudes || waveformData;
@@ -5324,7 +5360,9 @@ var WaveformHistogramContent = ({
             Math.abs(value) * (height / 2) * (amplitude || 1)
           )}px`,
           borderRadius: growUpwards ? `${barBorderRadius}px ${barBorderRadius}px 0 0` : `0 0 ${barBorderRadius}px ${barBorderRadius}px`,
-          opacity
+          opacity,
+          transform: barSlant ? `rotate(${barSlant}deg)` : void 0,
+          transformOrigin: "center bottom"
         }
       }
     )));
@@ -5382,7 +5420,8 @@ var WaveformHistogramRanged = ({ data }) => {
     gradientDirection = "vertical",
     gradientStyle = "normal",
     horizontalSymmetry = false,
-    waveDirection = "right-to-left"
+    waveDirection = "right-to-left",
+    barSlant = 0
   } = data;
   return /* @__PURE__ */ React35.createElement(Waveform, { config: config18, className, style }, /* @__PURE__ */ React35.createElement(
     WaveformHistogramRangedContent,
@@ -5406,7 +5445,8 @@ var WaveformHistogramRanged = ({ data }) => {
       gradientDirection,
       gradientStyle,
       horizontalSymmetry,
-      waveDirection
+      waveDirection,
+      barSlant
     }
   ));
 };
@@ -5430,7 +5470,8 @@ var WaveformHistogramRangedContent = ({
   gradientDirection,
   gradientStyle,
   horizontalSymmetry,
-  waveDirection
+  waveDirection,
+  barSlant
 }) => {
   const { amplitudes, bassValues, midValues, trebleValues, height } = useWaveformContext();
   if (!amplitudes || !bassValues || !midValues || !trebleValues) {
@@ -5477,7 +5518,9 @@ var WaveformHistogramRangedContent = ({
             )}px`,
             borderRadius: growUpwards ? `${barBorderRadius}px ${barBorderRadius}px 0 0` : `0 0 ${barBorderRadius}px ${barBorderRadius}px`,
             opacity,
-            position: "relative"
+            position: "relative",
+            transform: barSlant ? `rotate(${barSlant}deg)` : void 0,
+            transformOrigin: "center bottom"
           },
           title: `${rangeName}: ${(value * 100).toFixed(1)}%`
         },