remotion 4.0.15 → 4.0.16

package/dist/cjs/use-media-playback.js

@@ -32,8 +32,18 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         if (!src) {
             throw new Error(`No 'src' attribute was passed to the ${tagName} element.`);
         }
-        mediaRef.current.playbackRate = Math.max(0, playbackRate);
-        const shouldBeTime = (0, get_current_time_js_1.getMediaTime)({
+        const playbackRateToSet = Math.max(0, playbackRate);
+        if (mediaRef.current.playbackRate !== playbackRateToSet) {
+            mediaRef.current.playbackRate = playbackRateToSet;
+        }
+        // Let's throttle the seeking to only every 10 frames when a video is playing to avoid bottlenecking
+        // the video tag.
+        if (playing) {
+            if (absoluteFrame % 10 !== 0) {
+                return;
+            }
+        }
+        const desiredUnclampedTime = (0, get_current_time_js_1.getMediaTime)({
             fps,
             frame,
             src,
@@ -41,15 +51,20 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
             startFrom: -mediaStartsAt,
             mediaType,
         });
+        const { duration } = mediaRef.current;
+        const shouldBeTime = !Number.isNaN(duration) && Number.isFinite(duration)
+            ? Math.min(duration, desiredUnclampedTime)
+            : desiredUnclampedTime;
         const isTime = mediaRef.current.currentTime;
         const timeShift = Math.abs(shouldBeTime - isTime);
-        if (timeShift > acceptableTimeshift && !mediaRef.current.ended) {
+        if (timeShift > acceptableTimeshift) {
             // If scrubbing around, adjust timing
-            // or if time shift is bigger than 0.2sec
+            // or if time shift is bigger than 0.45sec
             mediaRef.current.currentTime = shouldBeTime;
             if (!onlyWarnForMediaSeekingError) {
                 (0, warn_about_non_seekable_media_js_1.warnAboutNonSeekableMedia)(mediaRef.current, onlyWarnForMediaSeekingError ? 'console-warning' : 'console-error');
             }
+            return;
         }
         // Only perform a seek if the time is not already the same.
         // Chrome rounds to 6 digits, so 0.033333333 -> 0.033333,
@@ -57,15 +72,15 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         // Refer to the https://github.com/remotion-dev/video-buffering-example
         // which is fixed by only seeking conditionally.
         const makesSenseToSeek = Math.abs(mediaRef.current.currentTime - shouldBeTime) > 0.00001;
+        if (!makesSenseToSeek) {
+            return;
+        }
         if (!playing || absoluteFrame === 0) {
-            if (makesSenseToSeek) {
-                mediaRef.current.currentTime = shouldBeTime;
-            }
+            mediaRef.current.currentTime = shouldBeTime;
+            return;
         }
         if (mediaRef.current.paused && !mediaRef.current.ended && playing) {
-            if (makesSenseToSeek) {
-                mediaRef.current.currentTime = shouldBeTime;
-            }
+            mediaRef.current.currentTime = shouldBeTime;
             (0, play_and_handle_not_allowed_error_js_1.playAndHandleNotAllowedError)(mediaRef, mediaType);
         }
     }, [

package/dist/cjs/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "4.0.15";
+export declare const VERSION = "4.0.16";

package/dist/cjs/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
 // Automatically generated on publish
-exports.VERSION = '4.0.15';
+exports.VERSION = '4.0.16';

package/dist/esm/index.mjs

@@ -59,7 +59,7 @@ function truthy(value) {
 }
 
 // Automatically generated on publish
-const VERSION = '4.0.15';
+const VERSION = '4.0.16';
 
 const checkMultipleRemotionVersions = () => {
     if (typeof globalThis === 'undefined') {
@@ -1776,7 +1776,14 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         if (mediaRef.current.playbackRate !== playbackRateToSet) {
             mediaRef.current.playbackRate = playbackRateToSet;
         }
-        const _shouldBeTime = getMediaTime({
+        // Let's throttle the seeking to only every 10 frames when a video is playing to avoid bottlenecking
+        // the video tag.
+        if (playing) {
+            if (absoluteFrame % 10 !== 0) {
+                return;
+            }
+        }
+        const desiredUnclampedTime = getMediaTime({
             fps,
             frame,
             src,
@@ -1786,18 +1793,18 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         });
         const { duration } = mediaRef.current;
         const shouldBeTime = !Number.isNaN(duration) && Number.isFinite(duration)
-            ? Math.min(duration, _shouldBeTime)
-            : _shouldBeTime;
+            ? Math.min(duration, desiredUnclampedTime)
+            : desiredUnclampedTime;
         const isTime = mediaRef.current.currentTime;
         const timeShift = Math.abs(shouldBeTime - isTime);
         if (timeShift > acceptableTimeshift) {
             // If scrubbing around, adjust timing
             // or if time shift is bigger than 0.45sec
-            console.log('seekingA', timeShift, mediaRef.current.currentTime, shouldBeTime);
             mediaRef.current.currentTime = shouldBeTime;
             if (!onlyWarnForMediaSeekingError) {
                 warnAboutNonSeekableMedia(mediaRef.current, onlyWarnForMediaSeekingError ? 'console-warning' : 'console-error');
             }
+            return;
         }
         // Only perform a seek if the time is not already the same.
         // Chrome rounds to 6 digits, so 0.033333333 -> 0.033333,
@@ -1805,17 +1812,15 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         // Refer to the https://github.com/remotion-dev/video-buffering-example
         // which is fixed by only seeking conditionally.
         const makesSenseToSeek = Math.abs(mediaRef.current.currentTime - shouldBeTime) > 0.00001;
+        if (!makesSenseToSeek) {
+            return;
+        }
         if (!playing || absoluteFrame === 0) {
-            if (makesSenseToSeek) {
-                console.log('seekingB');
-                mediaRef.current.currentTime = shouldBeTime;
-            }
+            mediaRef.current.currentTime = shouldBeTime;
+            return;
         }
         if (mediaRef.current.paused && !mediaRef.current.ended && playing) {
-            if (makesSenseToSeek) {
-                console.log('seekingC');
-                mediaRef.current.currentTime = shouldBeTime;
-            }
+            mediaRef.current.currentTime = shouldBeTime;
             playAndHandleNotAllowedError(mediaRef, mediaType);
         }
     }, [

package/dist/esm/version.mjs

@@ -1,4 +1,4 @@
 // Automatically generated on publish
-const VERSION = '4.0.15';
+const VERSION = '4.0.16';
 
 export { VERSION };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remotion",
-  "version": "4.0.15",
+  "version": "4.0.16",
   "description": "Render videos in React",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",