remotion 4.0.394 → 4.0.396

package/dist/cjs/Img.js

@@ -9,6 +9,7 @@ const get_cross_origin_value_js_1 = require("./get-cross-origin-value.js");
 const prefetch_js_1 = require("./prefetch.js");
 const use_buffer_state_js_1 = require("./use-buffer-state.js");
 const use_delay_render_js_1 = require("./use-delay-render.js");
+const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 function exponentialBackoff(errorCount) {
     return 1000 * 2 ** (errorCount - 1);
 }
@@ -151,9 +152,11 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, dela
             delayRender,
         ]);
     }
+    const { isClientSideRendering } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     const crossOriginValue = (0, get_cross_origin_value_js_1.getCrossOriginValue)({
         crossOrigin,
         requestsVideoFrame: false,
+        isClientSideRendering,
     });
     // src gets set once we've loaded and decoded the image.
     return ((0, jsx_runtime_1.jsx)("img", { ...props, ref: imageRef, crossOrigin: crossOriginValue, onError: didGetError, decoding: "sync" }));

package/dist/cjs/audio/AudioForPreview.js

@@ -52,6 +52,7 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
     const crossOriginValue = (0, get_cross_origin_value_js_1.getCrossOriginValue)({
         crossOrigin,
         requestsVideoFrame: false,
+        isClientSideRendering: false,
     });
     const propsToPass = (0, react_1.useMemo)(() => {
         return {

package/dist/cjs/buffering.js

@@ -38,12 +38,20 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const log_level_context_1 = require("./log-level-context");
 const playback_logging_1 = require("./playback-logging");
+const use_remotion_environment_1 = require("./use-remotion-environment");
 const useBufferManager = (logLevel, mountTime) => {
     const [blocks, setBlocks] = (0, react_1.useState)([]);
     const [onBufferingCallbacks, setOnBufferingCallbacks] = (0, react_1.useState)([]);
     const [onResumeCallbacks, setOnResumeCallbacks] = (0, react_1.useState)([]);
+    const env = (0, use_remotion_environment_1.useRemotionEnvironment)();
+    const rendering = env.isRendering;
     const buffering = (0, react_1.useRef)(false);
     const addBlock = (0, react_1.useCallback)((block) => {
+        if (rendering) {
+            return {
+                unblock: () => undefined,
+            };
+        }
         setBlocks((b) => [...b, block]);
         return {
             unblock: () => {
@@ -56,7 +64,7 @@ const useBufferManager = (logLevel, mountTime) => {
                 });
             },
         };
-    }, []);
+    }, [rendering]);
     const listenForBuffering = (0, react_1.useCallback)((callback) => {
         setOnBufferingCallbacks((c) => [...c, callback]);
         return {
@@ -74,6 +82,9 @@ const useBufferManager = (logLevel, mountTime) => {
         };
     }, []);
     (0, react_1.useEffect)(() => {
+        if (rendering) {
+            return;
+        }
         if (blocks.length > 0) {
             onBufferingCallbacks.forEach((c) => c());
             (0, playback_logging_1.playbackLogging)({
@@ -91,6 +102,9 @@ const useBufferManager = (logLevel, mountTime) => {
     if (typeof window !== 'undefined') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
+            if (rendering) {
+                return;
+            }
             if (blocks.length === 0) {
                 onResumeCallbacks.forEach((c) => c());
                 (0, playback_logging_1.playbackLogging)({

package/dist/cjs/calculate-loop.d.ts

@@ -0,0 +1,6 @@
+export declare const calculateLoopDuration: ({ endAt, mediaDuration, playbackRate, startFrom, }: {
+    mediaDuration: number;
+    playbackRate: number;
+    startFrom: number | undefined;
+    endAt: number | undefined;
+}) => number;

package/dist/cjs/calculate-loop.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateLoopDuration = void 0;
+const calculateLoopDuration = ({ endAt, mediaDuration, playbackRate, startFrom, }) => {
+    let duration = mediaDuration;
+    // Account for endAt
+    if (typeof endAt !== 'undefined') {
+        duration = endAt;
+    }
+    // Account for startFrom
+    if (typeof startFrom !== 'undefined') {
+        duration -= startFrom;
+    }
+    const actualDuration = duration / playbackRate;
+    return Math.floor(actualDuration);
+};
+exports.calculateLoopDuration = calculateLoopDuration;

package/dist/cjs/get-cross-origin-value.d.ts

@@ -1,4 +1,5 @@
-export declare const getCrossOriginValue: ({ crossOrigin, requestsVideoFrame, }: {
+export declare const getCrossOriginValue: ({ crossOrigin, requestsVideoFrame, isClientSideRendering, }: {
     crossOrigin: "" | "anonymous" | "use-credentials" | undefined;
     requestsVideoFrame: boolean;
+    isClientSideRendering: boolean;
 }) => "" | "anonymous" | "use-credentials" | undefined;

package/dist/cjs/get-cross-origin-value.js

@@ -1,11 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCrossOriginValue = void 0;
-const getCrossOriginValue = ({ crossOrigin, requestsVideoFrame, }) => {
+const getCrossOriginValue = ({ crossOrigin, requestsVideoFrame, isClientSideRendering, }) => {
     // If user specifies a value explicitly, use that
     if (crossOrigin !== undefined && crossOrigin !== null) {
         return crossOrigin;
     }
+    if (isClientSideRendering) {
+        return 'anonymous';
+    }
     // We need to set anonymous because otherwise we are not allowed
     // to get frames
     if (requestsVideoFrame) {

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-export declare const VERSION = "4.0.394";
+export declare const VERSION = "4.0.396";

package/dist/cjs/version.js

@@ -7,4 +7,4 @@ exports.VERSION = void 0;
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-exports.VERSION = '4.0.394';
+exports.VERSION = '4.0.396';

package/dist/cjs/video/VideoForPreview.js

@@ -210,6 +210,7 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
     const crossOriginValue = (0, get_cross_origin_value_js_1.getCrossOriginValue)({
         crossOrigin,
         requestsVideoFrame: Boolean(onVideoFrame),
+        isClientSideRendering: false,
     });
     return ((0, jsx_runtime_1.jsx)("video", { ref: videoRef, muted: muted || mediaMuted || isSequenceHidden || userPreferredVolume <= 0, playsInline: true, src: actualSrc, loop: _remotionInternalNativeLoopPassed, style: actualStyle, disableRemotePlayback: true, crossOrigin: crossOriginValue, ...nativeProps }));
 };

package/dist/cjs/video/use-audio-channel-index.d.ts

@@ -0,0 +1,4 @@
+export declare const useAudioChannelIndex: ({ ref, audioChannelIndex, }: {
+    ref: React.RefObject<HTMLVideoElement | HTMLAudioElement | null>;
+    audioChannelIndex: number;
+}) => void;

package/dist/cjs/video/use-audio-channel-index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAudioChannelIndex = void 0;
+const react_1 = require("react");
+const useAudioChannelIndex = ({ ref, audioChannelIndex, }) => {
+    (0, react_1.useEffect)(() => {
+        var _a;
+        // @ts-expect-error
+        const audioChannels = (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.audioTracks;
+        console.log({ audioChannels, audioChannelIndex });
+    }, [ref, audioChannelIndex]);
+};
+exports.useAudioChannelIndex = useAudioChannelIndex;

package/dist/esm/index.mjs

@@ -110,7 +110,7 @@ function truthy(value) {
 }
 
 // src/version.ts
-var VERSION = "4.0.394";
+var VERSION = "4.0.396";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -2992,11 +2992,15 @@ import {
 // src/get-cross-origin-value.ts
 var getCrossOriginValue = ({
   crossOrigin,
-  requestsVideoFrame
+  requestsVideoFrame,
+  isClientSideRendering
 }) => {
   if (crossOrigin !== undefined && crossOrigin !== null) {
     return crossOrigin;
   }
+  if (isClientSideRendering) {
+    return "anonymous";
+  }
   if (requestsVideoFrame) {
     return "anonymous";
   }
@@ -3805,8 +3809,17 @@ var useBufferManager = (logLevel, mountTime) => {
   const [blocks, setBlocks] = useState13([]);
   const [onBufferingCallbacks, setOnBufferingCallbacks] = useState13([]);
   const [onResumeCallbacks, setOnResumeCallbacks] = useState13([]);
+  const env = useRemotionEnvironment();
+  const rendering = env.isRendering;
   const buffering = useRef9(false);
   const addBlock = useCallback8((block) => {
+    if (rendering) {
+      return {
+        unblock: () => {
+          return;
+        }
+      };
+    }
     setBlocks((b) => [...b, block]);
     return {
       unblock: () => {
@@ -3819,7 +3832,7 @@ var useBufferManager = (logLevel, mountTime) => {
         });
       }
     };
-  }, []);
+  }, [rendering]);
   const listenForBuffering = useCallback8((callback) => {
     setOnBufferingCallbacks((c) => [...c, callback]);
     return {
@@ -3837,6 +3850,9 @@ var useBufferManager = (logLevel, mountTime) => {
     };
   }, []);
   useEffect7(() => {
+    if (rendering) {
+      return;
+    }
     if (blocks.length > 0) {
       onBufferingCallbacks.forEach((c) => c());
       playbackLogging({
@@ -3849,6 +3865,9 @@ var useBufferManager = (logLevel, mountTime) => {
   }, [blocks]);
   if (typeof window !== "undefined") {
     useLayoutEffect6(() => {
+      if (rendering) {
+        return;
+      }
       if (blocks.length === 0) {
         onResumeCallbacks.forEach((c) => c());
         playbackLogging({
@@ -4797,7 +4816,8 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   warnAboutTooHighVolume(userPreferredVolume);
   const crossOriginValue = getCrossOriginValue({
     crossOrigin,
-    requestsVideoFrame: false
+    requestsVideoFrame: false,
+    isClientSideRendering: false
   });
   const propsToPass = useMemo21(() => {
     return {
@@ -5880,9 +5900,11 @@ var ImgRefForwarding = ({
       delayRender2
     ]);
   }
+  const { isClientSideRendering } = useRemotionEnvironment();
   const crossOriginValue = getCrossOriginValue({
     crossOrigin,
-    requestsVideoFrame: false
+    requestsVideoFrame: false,
+    isClientSideRendering
   });
   return /* @__PURE__ */ jsx25("img", {
     ...props2,
@@ -6762,7 +6784,8 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   }, [isSequenceHidden, style]);
   const crossOriginValue = getCrossOriginValue({
     crossOrigin,
-    requestsVideoFrame: Boolean(onVideoFrame)
+    requestsVideoFrame: Boolean(onVideoFrame),
+    isClientSideRendering: false
   });
   return /* @__PURE__ */ jsx30("video", {
     ref: videoRef,