@remotion/player 4.0.149 → 4.0.151

package/bundle.ts

@@ -1,4 +1,17 @@
-import {build} from 'bun';
+import {build, revision} from 'bun';
+
+if (process.env.NODE_ENV !== 'production') {
+	throw new Error('This script must be run using NODE_ENV=production');
+}
+
+if (!revision.startsWith('07ce')) {
+	// eslint-disable-next-line no-console
+	console.warn('warn: Remotion currently uses a fork of Bun to bundle.');
+	// eslint-disable-next-line no-console
+	console.log(
+		'You dont currently run the fork, this could lead to duplicate key warnings in React.',
+	);
+}
 
 const output = await build({
 	entrypoints: ['src/index.ts'],
@@ -8,9 +21,7 @@ const output = await build({
 });
 
 const [file] = output.outputs;
-const text = (await file.text())
-	.replace(/jsxDEV/g, 'jsx')
-	.replace(/react\/jsx-dev-runtime/g, 'react/jsx-runtime');
+const text = await file.text();
 
 await Bun.write('dist/esm/index.mjs', `"use client";\n${text}`);
 

package/dist/esm/index.mjs

@@ -1,7 +1,8 @@
 "use client";
 // src/icons.tsx
 import {
-jsx
+jsx,
+jsxs
 } from "react/jsx-runtime";
 var ICON_SIZE = 25;
 var fullscreenIconSize = 16;
@@ -17,11 +18,11 @@ var PlayIcon = () => {
       stroke: "white",
       strokeWidth: "6.25",
       strokeLinejoin: "round"
-    }, undefined, false, undefined, this)
-  }, undefined, false, undefined, this);
+    })
+  });
 };
 var PauseIcon = () => {
-  return jsx("svg", {
+  return jsxs("svg", {
     viewBox: "0 0 100 100",
     width: ICON_SIZE,
     height: ICON_SIZE,
@@ -34,7 +35,7 @@ var PauseIcon = () => {
         fill: "#fff",
         ry: "5",
         rx: "5"
-      }, undefined, false, undefined, this),
+      }),
       jsx("rect", {
         x: "55",
         y: "20",
@@ -43,9 +44,9 @@ var PauseIcon = () => {
         fill: "#fff",
         ry: "5",
         rx: "5"
-      }, undefined, false, undefined, this)
+      })
     ]
-  }, undefined, true, undefined, this);
+  });
 };
 var FullscreenIcon = ({
   isFullscreen
@@ -55,7 +56,7 @@ var FullscreenIcon = ({
   const out = isFullscreen ? 0 : strokeWidth / 2;
   const middleInset = isFullscreen ? strokeWidth * 1.6 : strokeWidth / 2;
   const inset = isFullscreen ? strokeWidth * 1.6 : strokeWidth * 2;
-  return jsx("svg", {
+  return jsxs("svg", {
     viewBox: `0 0 ${viewSize} ${viewSize}`,
     height: fullscreenIconSize,
     width: fullscreenIconSize,
@@ -69,7 +70,7 @@ var FullscreenIcon = ({
         stroke: "#fff",
         strokeWidth,
         fill: "none"
-      }, undefined, false, undefined, this),
+      }),
       jsx("path", {
         d: `
 				M ${viewSize - out} ${inset}
@@ -79,7 +80,7 @@ var FullscreenIcon = ({
         stroke: "#fff",
         strokeWidth,
         fill: "none"
-      }, undefined, false, undefined, this),
+      }),
       jsx("path", {
         d: `
 				M ${out} ${viewSize - inset}
@@ -89,7 +90,7 @@ var FullscreenIcon = ({
         stroke: "#fff",
         strokeWidth,
         fill: "none"
-      }, undefined, false, undefined, this),
+      }),
       jsx("path", {
         d: `
 				M ${viewSize - out} ${viewSize - inset}
@@ -99,9 +100,9 @@ var FullscreenIcon = ({
         stroke: "#fff",
         strokeWidth,
         fill: "none"
-      }, undefined, false, undefined, this)
+      })
     ]
-  }, undefined, true, undefined, this);
+  });
 };
 var VolumeOffIcon = () => {
   return jsx("svg", {
@@ -111,8 +112,8 @@ var VolumeOffIcon = () => {
     children: jsx("path", {
       d: "M3.63 3.63a.996.996 0 000 1.41L7.29 8.7 7 9H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71v-4.17l4.18 4.18c-.49.37-1.02.68-1.6.91-.36.15-.58.53-.58.92 0 .72.73 1.18 1.39.91.8-.33 1.55-.77 2.22-1.31l1.34 1.34a.996.996 0 101.41-1.41L5.05 3.63c-.39-.39-1.02-.39-1.42 0zM19 12c0 .82-.15 1.61-.41 2.34l1.53 1.53c.56-1.17.88-2.48.88-3.87 0-3.83-2.4-7.11-5.78-8.4-.59-.23-1.22.23-1.22.86v.19c0 .38.25.71.61.85C17.18 6.54 19 9.06 19 12zm-8.71-6.29l-.17.17L12 7.76V6.41c0-.89-1.08-1.33-1.71-.7zM16.5 12A4.5 4.5 0 0014 7.97v1.79l2.48 2.48c.01-.08.02-.16.02-.24z",
       fill: "#fff"
-    }, undefined, false, undefined, this)
-  }, undefined, false, undefined, this);
+    })
+  });
 };
 var VolumeOnIcon = () => {
   return jsx("svg", {
@@ -122,13 +123,14 @@ var VolumeOnIcon = () => {
     children: jsx("path", {
       d: "M3 10v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71V6.41c0-.89-1.08-1.34-1.71-.71L7 9H4c-.55 0-1 .45-1 1zm13.5 2A4.5 4.5 0 0014 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 4.45v.2c0 .38.25.71.6.85C17.18 6.53 19 9.06 19 12s-1.82 5.47-4.4 6.5c-.36.14-.6.47-.6.85v.2c0 .63.63 1.07 1.21.85C18.6 19.11 21 15.84 21 12s-2.4-7.11-5.79-8.4c-.58-.23-1.21.22-1.21.85z",
       fill: "#fff"
-    }, undefined, false, undefined, this)
-  }, undefined, false, undefined, this);
+    })
+  });
 };
 
 // src/BufferingIndicator.tsx
 import {
 jsx as jsx2,
+jsxs as jsxs2,
 Fragment
 } from "react/jsx-runtime";
 var className = "__remotion_buffering_indicator";
@@ -149,7 +151,7 @@ var studioStyle = {
 };
 var BufferingIndicator = ({ type }) => {
   const style = type === "player" ? playerStyle : studioStyle;
-  return jsx2(Fragment, {
+  return jsxs2(Fragment, {
     children: [
       jsx2("style", {
         type: "text/css",
@@ -167,7 +169,7 @@ var BufferingIndicator = ({ type }) => {
             animation: ${remotionBufferingAnimation} 1s linear infinite;
         }        
 			`
-      }, undefined, false, undefined, this),
+      }),
       jsx2("div", {
         style,
         children: jsx2("svg", {
@@ -180,11 +182,11 @@ var BufferingIndicator = ({ type }) => {
             strokeLinecap: "round",
             fill: "none",
             strokeWidth: 3
-          }, undefined, false, undefined, this)
-        }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this)
+          })
+        })
+      })
     ]
-  }, undefined, true, undefined, this);
+  });
 };
 
 // src/calculate-scale.ts
@@ -475,7 +477,7 @@ var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
   return jsx3(PlayerEventEmitterContext.Provider, {
     value: emitter,
     children
-  }, undefined, false, undefined, this);
+  });
 };
 
 // src/use-hover-state.ts
@@ -1034,19 +1036,20 @@ var DefaultPlayPauseButton = ({ playing, buffering }) => {
   if (playing && buffering) {
     return jsx4(BufferingIndicator, {
       type: "player"
-    }, undefined, false, undefined, this);
+    });
   }
   if (playing) {
-    return jsx4(PauseIcon, {}, undefined, false, undefined, this);
+    return jsx4(PauseIcon, {});
   }
-  return jsx4(PlayIcon, {}, undefined, false, undefined, this);
+  return jsx4(PlayIcon, {});
 };
 
 // src/MediaVolumeSlider.tsx
 import React3, {useCallback as useCallback3, useMemo as useMemo3, useRef as useRef4, useState as useState5} from "react";
 import {Internals as Internals6, random} from "remotion";
 import {
-jsx as jsx5
+jsx as jsx5,
+jsxs as jsxs3
 } from "react/jsx-runtime";
 var BAR_HEIGHT = 5;
 var KNOB_SIZE = 12;
@@ -1161,7 +1164,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider }) => {
 		width: ${KNOB_SIZE}px;
 	}
 `;
-  return jsx5("div", {
+  return jsxs3("div", {
     ref: parentDivRef,
     style: parentDivStyle,
     children: [
@@ -1169,7 +1172,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider }) => {
         dangerouslySetInnerHTML: {
           __html: sliderStyle
         }
-      }, undefined, false, undefined, this),
+      }),
       jsx5("button", {
         "aria-label": isMutedOrZero ? "Unmute sound" : "Mute sound",
         title: isMutedOrZero ? "Unmute sound" : "Mute sound",
@@ -1178,8 +1181,8 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider }) => {
         onFocus: () => setFocused(true),
         style: volumeContainer,
         type: "button",
-        children: isMutedOrZero ? jsx5(VolumeOffIcon, {}, undefined, false, undefined, this) : jsx5(VolumeOnIcon, {}, undefined, false, undefined, this)
-      }, undefined, false, undefined, this),
+        children: isMutedOrZero ? jsx5(VolumeOffIcon, {}) : jsx5(VolumeOnIcon, {})
+      }),
       (focused || hover) && !mediaMuted && !Internals6.isIosSafari() ? jsx5("div", {
         style: sliderContainer,
         children: jsx5("input", {
@@ -1194,10 +1197,10 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider }) => {
           type: "range",
           value: mediaVolume,
           style: inputStyle
-        }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this) : null
+        })
+      }) : null
     ]
-  }, undefined, true, undefined, this);
+  });
 };
 
 // src/PlaybackrateControl.tsx
@@ -1231,7 +1234,8 @@ function useComponentVisible(initialIsVisible) {
 
 // src/PlaybackrateControl.tsx
 import {
-jsx as jsx6
+jsx as jsx6,
+jsxs as jsxs4
 } from "react/jsx-runtime";
 var BOTTOM = 35;
 var THRESHOLD = 70;
@@ -1259,8 +1263,8 @@ var Checkmark = () => jsx6("svg", {
   children: jsx6("path", {
     fill: "currentColor",
     d: "M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z"
-  }, undefined, false, undefined, this)
-}, undefined, false, undefined, this);
+  })
+});
 var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }) => {
   const onClick = useCallback4((e) => {
     e.stopPropagation();
@@ -1281,7 +1285,7 @@ var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }
       backgroundColor: hovered || isFocused ? "#eee" : "transparent"
     };
   }, [hovered, isFocused]);
-  return jsx6("div", {
+  return jsxs4("div", {
     onMouseEnter,
     onMouseLeave,
     tabIndex: 0,
@@ -1290,12 +1294,12 @@ var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }
     children: [
       jsx6("div", {
         style: checkmarkContainer,
-        children: rate === selectedRate ? jsx6(Checkmark, {}, undefined, false, undefined, this) : null
-      }, undefined, false, undefined, this),
+        children: rate === selectedRate ? jsx6(Checkmark, {}) : null
+      }),
       rate.toFixed(1),
       "x"
     ]
-  }, rate, true, undefined, this);
+  }, rate);
 };
 var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
   const { setPlaybackRate, playbackRate } = useContext5(Internals7.Timeline.TimelineContext);
@@ -1364,9 +1368,9 @@ var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
         onSelect,
         rate,
         keyboardSelectedRate
-      }, rate, false, undefined, this);
+      }, rate);
     })
-  }, undefined, false, undefined, this);
+  });
 };
 var label = {
   fontSize: 13,
@@ -1408,34 +1412,35 @@ var PlaybackrateControl = ({ playbackRates, canvasSize }) => {
   }, [setIsComponentVisible]);
   return jsx6("div", {
     ref,
-    children: jsx6("button", {
+    children: jsxs4("button", {
       type: "button",
       "aria-label": "Change playback rate",
       style: button,
       onClick,
       children: [
-        jsx6("div", {
+        jsxs4("div", {
           style: label,
           children: [
             playbackRate,
             "x"
           ]
-        }, undefined, true, undefined, this),
+        }),
         isComponentVisible && jsx6(PlaybackPopup, {
           canvasSize,
           playbackRates,
           setIsComponentVisible
-        }, undefined, false, undefined, this)
+        })
       ]
-    }, undefined, true, undefined, this)
-  }, undefined, false, undefined, this);
+    })
+  });
 };
 
 // src/PlayerSeekBar.tsx
 import {useCallback as useCallback5, useEffect as useEffect9, useMemo as useMemo5, useRef as useRef6, useState as useState8} from "react";
 import {Internals as Internals8, interpolate} from "remotion";
 import {
-jsx as jsx7
+jsx as jsx7,
+jsxs as jsxs5
 } from "react/jsx-runtime";
 var getFrameFromX = (clientX, durationInFrames, width) => {
   const pos = clientX;
@@ -1566,27 +1571,27 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
       position: "absolute"
     };
   }, [durationInFrames, inFrame, outFrame]);
-  return jsx7("div", {
+  return jsxs5("div", {
     ref: containerRef,
     onPointerDown,
     style: containerStyle,
     children: [
-      jsx7("div", {
+      jsxs5("div", {
         style: barBackground,
         children: [
           jsx7("div", {
             style: active
-          }, undefined, false, undefined, this),
+          }),
           jsx7("div", {
             style: fillStyle
-          }, undefined, false, undefined, this)
+          })
         ]
-      }, undefined, true, undefined, this),
+      }),
       jsx7("div", {
         style: knobStyle
-      }, undefined, false, undefined, this)
+      })
     ]
-  }, undefined, true, undefined, this);
+  });
 };
 
 // src/format-time.ts
@@ -1626,6 +1631,7 @@ var useVideoControlsResize = ({
 // src/PlayerControls.tsx
 import {
 jsx as jsx8,
+jsxs as jsxs6,
 Fragment as Fragment2
 } from "react/jsx-runtime";
 var gradientSteps = [
@@ -1827,17 +1833,17 @@ var Controls = ({
       onDoubleClick?.(e);
     }
   }, [onDoubleClick]);
-  return jsx8("div", {
+  return jsxs6("div", {
     ref,
     style: containerCss,
     onPointerUp: onPointerUpIfContainer,
     onDoubleClick: onDoubleClickIfContainer,
     children: [
-      jsx8("div", {
+      jsxs6("div", {
         ref: flexRef,
         style: controlsRow,
         children: [
-          jsx8("div", {
+          jsxs6("div", {
             style: leftPartStyle,
             children: [
               jsx8("button", {
@@ -1850,50 +1856,50 @@ var Controls = ({
                 children: renderPlayPauseButton === null ? jsx8(DefaultPlayPauseButton, {
                   buffering,
                   playing: player.playing
-                }, undefined, false, undefined, this) : renderPlayPauseButton({
+                }) : renderPlayPauseButton({
                   playing: player.playing,
                   isBuffering: buffering
                 }) ?? jsx8(DefaultPlayPauseButton, {
                   buffering,
                   playing: player.playing
-                }, undefined, false, undefined, this)
-              }, undefined, false, undefined, this),
-              showVolumeControls ? jsx8(Fragment2, {
+                })
+              }),
+              showVolumeControls ? jsxs6(Fragment2, {
                 children: [
                   jsx8("div", {
                     style: xSpacer
-                  }, undefined, false, undefined, this),
+                  }),
                   jsx8(MediaVolumeSlider, {
                     displayVerticalVolumeSlider
-                  }, undefined, false, undefined, this)
+                  })
                 ]
-              }, undefined, true, undefined, this) : null,
+              }) : null,
               jsx8("div", {
                 style: xSpacer
-              }, undefined, false, undefined, this),
-              jsx8("div", {
+              }),
+              jsxs6("div", {
                 style: timeLabel,
                 children: [
                   formatTime(frame / fps),
                   " / ",
                   formatTime(durationInFrames / fps)
                 ]
-              }, undefined, true, undefined, this),
+              }),
               jsx8("div", {
                 style: xSpacer
-              }, undefined, false, undefined, this)
+              })
             ]
-          }, undefined, true, undefined, this),
+          }),
           jsx8("div", {
             style: flex1
-          }, undefined, false, undefined, this),
+          }),
           playbackRates && canvasSize && jsx8(PlaybackrateControl, {
             canvasSize,
             playbackRates
-          }, undefined, false, undefined, this),
+          }),
           playbackRates && supportsFullscreen && allowFullscreen ? jsx8("div", {
             style: xSpacer
-          }, undefined, false, undefined, this) : null,
+          }) : null,
           jsx8("div", {
             style: fullscreen,
             children: supportsFullscreen && allowFullscreen ? jsx8("button", {
@@ -1904,23 +1910,23 @@ var Controls = ({
               onClick: isFullscreen ? onExitFullscreenButtonClick : onFullscreenButtonClick,
               children: renderFullscreenButton === null ? jsx8(FullscreenIcon, {
                 isFullscreen
-              }, undefined, false, undefined, this) : renderFullscreenButton({ isFullscreen })
-            }, undefined, false, undefined, this) : null
-          }, undefined, false, undefined, this)
+              }) : renderFullscreenButton({ isFullscreen })
+            }) : null
+          })
         ]
-      }, undefined, true, undefined, this),
+      }),
       jsx8("div", {
         style: ySpacer
-      }, undefined, false, undefined, this),
+      }),
       jsx8(PlayerSeekBar, {
         onSeekEnd,
         onSeekStart,
         durationInFrames,
         inFrame,
         outFrame
-      }, undefined, false, undefined, this)
+      })
     ]
-  }, undefined, true, undefined, this);
+  });
 };
 
 // src/error-boundary.tsx
@@ -1955,7 +1961,7 @@ class ErrorBoundary extends React6.Component {
         children: this.props.errorFallback({
           error: this.state.hasError
         })
-      }, undefined, false, undefined, this);
+      });
     }
     return this.props.children;
   }
@@ -2055,6 +2061,7 @@ var useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFull
 // src/PlayerUI.tsx
 import {
 jsx as jsx10,
+jsxs as jsxs7,
 Fragment as Fragment3
 } from "react/jsx-runtime";
 var reactVersion = React7.version.split(".")[0];
@@ -2414,13 +2421,13 @@ var PlayerUI = ({
     showPosterWhenBuffering && showBufferIndicator && player.isPlaying()
   ].some(Boolean);
   const { left, top, width, height, ...outerWithoutScale } = outer;
-  const content = jsx10(Fragment3, {
+  const content = jsxs7(Fragment3, {
     children: [
       jsx10("div", {
         style: outer,
         onPointerUp: clickToPlay ? handleClick : undefined,
         onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined,
-        children: jsx10("div", {
+        children: jsxs7("div", {
           style: containerStyle3,
           className: PLAYER_CSS_CLASSNAME,
           children: [
@@ -2433,10 +2440,10 @@ var PlayerUI = ({
                   children: jsx10(VideoComponent, {
                     ...video?.props ?? {},
                     ...inputProps ?? {}
-                  }, undefined, false, undefined, this)
-                }, undefined, false, undefined, this)
-              }, undefined, false, undefined, this)
-            }, undefined, false, undefined, this) : null,
+                  })
+                })
+              })
+            }) : null,
             shouldShowPoster && posterFillMode === "composition-size" ? jsx10("div", {
               style: {
                 ...outerWithoutScale,
@@ -2446,16 +2453,16 @@ var PlayerUI = ({
               onPointerUp: clickToPlay ? handleClick : undefined,
               onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined,
               children: poster
-            }, undefined, false, undefined, this) : null
+            }) : null
           ]
-        }, undefined, true, undefined, this)
-      }, undefined, false, undefined, this),
+        })
+      }),
       shouldShowPoster && posterFillMode === "player-size" ? jsx10("div", {
         style: outer,
         onPointerUp: clickToPlay ? handleClick : undefined,
         onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined,
         children: poster
-      }, undefined, false, undefined, this) : null,
+      }) : null,
       controls ? jsx10(Controls, {
         fps: config.fps,
         durationInFrames: config.durationInFrames,
@@ -2481,16 +2488,16 @@ var PlayerUI = ({
         hideControlsWhenPointerDoesntMove,
         onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined,
         onPointerUp: clickToPlay ? handleClick : undefined
-      }, undefined, false, undefined, this) : null
+      }) : null
     ]
-  }, undefined, true, undefined, this);
+  });
   if (IS_NODE && !doesReactVersionSupportSuspense) {
     return jsx10("div", {
       ref: container,
       style: outerStyle,
       className: className2,
       children: content
-    }, undefined, false, undefined, this);
+    });
   }
   return jsx10("div", {
     ref: container,
@@ -2499,8 +2506,8 @@ var PlayerUI = ({
     children: jsx10(Suspense, {
       fallback: loadingMarkup,
       children: content
-    }, undefined, false, undefined, this)
-  }, undefined, false, undefined, this);
+    })
+  });
 };
 var PlayerUI_default = forwardRef(PlayerUI);
 
@@ -2625,17 +2632,17 @@ var SharedPlayerContexts = ({
                       component,
                       children: jsx11(Internals11.BufferingProvider, {
                         children
-                      }, undefined, false, undefined, this)
-                    }, undefined, false, undefined, this)
-                  }, undefined, false, undefined, this)
-                }, undefined, false, undefined, this)
-              }, undefined, false, undefined, this)
-            }, undefined, false, undefined, this)
-          }, undefined, false, undefined, this)
-        }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this)
-    }, undefined, false, undefined, this)
-  }, undefined, false, undefined, this);
+                      })
+                    })
+                  })
+                })
+              })
+            })
+          })
+        })
+      })
+    })
+  });
 };
 
 // src/utils/validate-in-out-frame.ts
@@ -2933,11 +2940,11 @@ var PlayerFn = ({
             showPlaybackRateControl,
             bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds ?? 300,
             hideControlsWhenPointerDoesntMove
-          }, undefined, false, undefined, this)
-        }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this)
-    }, undefined, false, undefined, this)
-  }, undefined, false, undefined, this);
+          })
+        })
+      })
+    })
+  });
 };
 var forward = forwardRef2;
 var Player = forward(PlayerFn);
@@ -3064,18 +3071,18 @@ var ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, className:
           children: jsx13(VideoComponent, {
             ...video?.props ?? {},
             ...inputProps ?? {}
-          }, undefined, false, undefined, this)
-        }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this) : null
-    }, undefined, false, undefined, this)
-  }, undefined, false, undefined, this);
+          })
+        })
+      }) : null
+    })
+  });
   if (IS_NODE && !doesReactVersionSupportSuspense2) {
     return jsx13("div", {
       ref: container,
       style: outerStyle,
       className: className2,
       children: content
-    }, undefined, false, undefined, this);
+    });
   }
   return jsx13("div", {
     ref: container,
@@ -3084,8 +3091,8 @@ var ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, className:
     children: jsx13(Suspense2, {
       fallback: loadingMarkup,
       children: content
-    }, undefined, false, undefined, this)
-  }, undefined, false, undefined, this);
+    })
+  });
 };
 var ThumbnailUI_default = forwardRef3(ThumbnailUI);
 
@@ -3156,10 +3163,10 @@ var ThumbnailFn = ({
           inputProps: passedInputProps,
           renderLoading,
           style
-        }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this)
-    }, undefined, false, undefined, this)
-  }, undefined, false, undefined, this);
+        })
+      })
+    })
+  });
 };
 var forward2 = forwardRef4;
 var Thumbnail = forward2(ThumbnailFn);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/player",
-  "version": "4.0.149",
+  "version": "4.0.151",
   "description": "Remotion Player",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
@@ -28,7 +28,7 @@
   ],
   "license": "SEE LICENSE IN LICENSE.md",
   "dependencies": {
-    "remotion": "4.0.149"
+    "remotion": "4.0.151"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -66,7 +66,7 @@
   "scripts": {
     "formatting": "prettier src --check",
     "lint": "eslint src --ext ts,tsx",
-    "build": "bun ensure-correct-version.ts && bun bundle.ts",
+    "build": "bun ensure-correct-version.ts && bun --env-file=../.env.bundle bundle.ts",
     "test": "vitest src --run",
     "prerelease": "cp ../../README.md ."
   }