@remotion/player 4.0.485 → 4.0.487

package/LICENSE.md

@@ -0,0 +1,49 @@
+# Remotion License
+
+In Remotion 5.0, the license will slightly change. [View the changes here](https://github.com/remotion-dev/remotion/pull/3750).
+
+---
+
+Depending on the type of your legal entity, you are granted permission to use Remotion for your project. Individuals and small companies are allowed to use Remotion to create videos for free (even commercial), while a company license is required for for-profit organizations of a certain size. This two-tier system was designed to ensure funding for this project while still allowing the source code to be available and the program to be free for most. Read below for the exact terms of use.
+
+- [Free License](#free-license)
+- [Company License](#company-license)
+
+## Free License
+
+Copyright © 2026 [Remotion](https://www.remotion.dev)
+
+### Eligibility
+
+You are eligible to use Remotion for free if you are:
+
+- an individual
+- a for-profit organization with up to 3 employees
+- a non-profit or not-for-profit organization
+- evaluating whether Remotion is a good fit, and are not yet using it in a commercial way
+
+### Allowed use cases
+
+Permission is hereby granted, free of charge, to any person eligible for the "Free License", to use the software non-commercially or commercially for the purpose of creating videos and images and to modify the software to their own liking, for the purpose of fulfilling their custom use case or to contribute bug fixes or improvements back to Remotion.
+
+### Disallowed use cases
+
+It is not allowed to copy or modify Remotion code for the purpose of selling, renting, licensing, relicensing, or sublicensing your own derivate of Remotion.
+
+### Warranty notice
+
+The software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose, and non-infringement. In no event shall the author or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.
+
+### Support
+
+Support is provided on a best-we-can-do basis via GitHub Issues and Discord.
+
+## Company License
+
+You are required to obtain a Company License to use Remotion if you are not within the group of entities eligible for a Free License. This license will enable you to use Remotion for the allowed use cases specified in the Free License, and give you access to prioritized support (read the [Support Policy](https://www.remotion.dev/docs/support)).
+
+Visit [remotion.pro](https://www.remotion.pro/license) for pricing and to buy a license.
+
+### FAQs
+
+Are you not sure whether you need a Company License because of an edge case? Here are some [frequently asked questions](https://www.remotion.pro/faq).

package/dist/cjs/DefaultPlayPauseButton.d.ts

@@ -1,5 +1,4 @@
 export declare const DefaultPlayPauseButton: React.FC<{
     playing: boolean;
     buffering: boolean;
-    focused: boolean;
 }>;

package/dist/cjs/DefaultPlayPauseButton.js

@@ -4,13 +4,13 @@ exports.DefaultPlayPauseButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const BufferingIndicator_js_1 = require("./BufferingIndicator.js");
 const icons_js_1 = require("./icons.js");
-const DefaultPlayPauseButton = ({ playing, buffering, focused }) => {
+const DefaultPlayPauseButton = ({ playing, buffering }) => {
     if (playing && buffering) {
         return jsx_runtime_1.jsx(BufferingIndicator_js_1.BufferingIndicator, { type: "player" });
     }
     if (playing) {
-        return jsx_runtime_1.jsx(icons_js_1.PauseIcon, { focused: focused });
+        return jsx_runtime_1.jsx(icons_js_1.PauseIcon, {});
     }
-    return jsx_runtime_1.jsx(icons_js_1.PlayIcon, { focused: focused });
+    return jsx_runtime_1.jsx(icons_js_1.PlayIcon, {});
 };
 exports.DefaultPlayPauseButton = DefaultPlayPauseButton;

package/dist/cjs/PlayerControls.js

@@ -68,7 +68,6 @@ const fullscreen = {};
 const Controls = ({ durationInFrames, isFullscreen, fps, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, onSeekEnd, onSeekStart, inFrame, outFrame, initiallyShowControls, canvasSize, renderPlayPauseButton, renderFullscreenButton, alwaysShowControls, showPlaybackRateControl, containerRef, buffering, hideControlsWhenPointerDoesntMove, onPointerDown, onDoubleClick, renderMuteButton, renderVolumeSlider, playing, toggle, renderCustomControls, }) => {
     var _a, _b;
     const playButtonRef = (0, react_1.useRef)(null);
-    const [playButtonFocused, setPlayButtonFocused] = (0, react_1.useState)(false);
     const [supportsFullscreen, setSupportsFullscreen] = (0, react_1.useState)(false);
     const hovered = (0, use_hover_state_js_1.useHoverState)(containerRef, hideControlsWhenPointerDoesntMove);
     const { maxTimeLabelWidth, displayVerticalVolumeSlider } = (0, use_video_controls_resize_js_1.useVideoControlsResize)({
@@ -104,15 +103,6 @@ const Controls = ({ durationInFrames, isFullscreen, fps, showVolumeControls, onF
             opacity: Number(shouldShow),
         };
     }, [hovered, shouldShowInitially, playing, alwaysShowControls]);
-    const playPauseButtonStyle = (0, react_1.useMemo)(() => {
-        if (renderPlayPauseButton !== null || (playing && buffering)) {
-            return PlaybackrateControl_js_1.playerButtonStyle;
-        }
-        return {
-            ...PlaybackrateControl_js_1.playerButtonStyle,
-            outline: 'none',
-        };
-    }, [buffering, playing, renderPlayPauseButton]);
     (0, react_1.useEffect)(() => {
         if (playButtonRef.current && spaceKeyToPlayOrPause) {
             // This switches focus to play button when player.playing flag changes
@@ -175,19 +165,13 @@ const Controls = ({ durationInFrames, isFullscreen, fps, showVolumeControls, onF
             onDoubleClick === null || onDoubleClick === void 0 ? void 0 : onDoubleClick(e);
         }
     }, [onDoubleClick]);
-    const onPlayButtonFocus = (0, react_1.useCallback)(() => {
-        setPlayButtonFocused(true);
-    }, []);
-    const onPlayButtonBlur = (0, react_1.useCallback)(() => {
-        setPlayButtonFocused(false);
-    }, []);
     return (jsx_runtime_1.jsxs("div", { ref: ref, style: containerCss, onPointerDown: onPointerDownIfContainer, onDoubleClick: onDoubleClickIfContainer, children: [
             jsx_runtime_1.jsxs("div", { ref: flexRef, style: controlsRow, children: [
                     jsx_runtime_1.jsxs("div", { style: leftPartStyle, children: [
-                            jsx_runtime_1.jsx("button", { ref: playButtonRef, type: "button", style: playPauseButtonStyle, onClick: toggle, onFocus: onPlayButtonFocus, onBlur: onPlayButtonBlur, "aria-label": playing ? 'Pause video' : 'Play video', title: playing ? 'Pause video' : 'Play video', children: renderPlayPauseButton === null ? (jsx_runtime_1.jsx(DefaultPlayPauseButton_js_1.DefaultPlayPauseButton, { buffering: buffering, focused: playButtonFocused, playing: playing })) : (((_b = renderPlayPauseButton({
+                            jsx_runtime_1.jsx("button", { ref: playButtonRef, type: "button", style: PlaybackrateControl_js_1.playerButtonStyle, onClick: toggle, "aria-label": playing ? 'Pause video' : 'Play video', title: playing ? 'Pause video' : 'Play video', children: renderPlayPauseButton === null ? (jsx_runtime_1.jsx(DefaultPlayPauseButton_js_1.DefaultPlayPauseButton, { buffering: buffering, playing: playing })) : (((_b = renderPlayPauseButton({
                                     playing,
                                     isBuffering: buffering,
-                                })) !== null && _b !== void 0 ? _b : (jsx_runtime_1.jsx(DefaultPlayPauseButton_js_1.DefaultPlayPauseButton, { buffering: buffering, focused: false, playing: playing })))) }), showVolumeControls ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                })) !== null && _b !== void 0 ? _b : (jsx_runtime_1.jsx(DefaultPlayPauseButton_js_1.DefaultPlayPauseButton, { buffering: buffering, playing: playing })))) }), showVolumeControls ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                     jsx_runtime_1.jsx("div", { style: xSpacer }), jsx_runtime_1.jsx(MediaVolumeSlider_js_1.MediaVolumeSlider, { renderMuteButton: renderMuteButton, renderVolumeSlider: renderVolumeSlider, displayVerticalVolumeSlider: displayVerticalVolumeSlider })
                                 ] })) : null, jsx_runtime_1.jsx("div", { style: xSpacer }), jsx_runtime_1.jsx(PlayerTimeLabel_js_1.PlayerTimeLabel, { durationInFrames: durationInFrames, fps: fps, maxTimeLabelWidth: maxTimeLabelWidth }), jsx_runtime_1.jsx("div", { style: xSpacer })
                         ] }), jsx_runtime_1.jsx("div", { style: flex1 }), customControlsElement, customControlsElement && playbackRates && canvasSize ? (jsx_runtime_1.jsx("div", { style: xSpacer })) : null, playbackRates && canvasSize && (jsx_runtime_1.jsx(PlaybackrateControl_js_1.PlaybackrateControl, { canvasSize: canvasSize, playbackRates: playbackRates })), playbackRates && supportsFullscreen && allowFullscreen ? (jsx_runtime_1.jsx("div", { style: xSpacer })) : null, jsx_runtime_1.jsx("div", { style: fullscreen, children: supportsFullscreen && allowFullscreen ? (jsx_runtime_1.jsx("button", { type: "button", "aria-label": isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', title: isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', style: PlaybackrateControl_js_1.playerButtonStyle, onClick: isFullscreen

package/dist/cjs/icons.d.ts

@@ -1,12 +1,8 @@
 import React from 'react';
 export declare const ICON_SIZE = 25;
 export declare const fullscreenIconSize = 16;
-export declare const PlayIcon: React.FC<{
-    readonly focused?: boolean;
-}>;
-export declare const PauseIcon: React.FC<{
-    readonly focused?: boolean;
-}>;
+export declare const PlayIcon: React.FC;
+export declare const PauseIcon: React.FC;
 export declare const FullscreenIcon: React.FC<{
     readonly isFullscreen: boolean;
 }>;

package/dist/cjs/icons.js

@@ -4,62 +4,13 @@ exports.VolumeOnIcon = exports.VolumeOffIcon = exports.FullscreenIcon = exports.
 const jsx_runtime_1 = require("react/jsx-runtime");
 exports.ICON_SIZE = 25;
 exports.fullscreenIconSize = 16;
-const focusRingFallbackColor = 'Highlight';
-const focusRingColor = '-webkit-focus-ring-color';
-const focusRingStyle = {
-    stroke: focusRingColor,
-};
-const playPath = 'M8 6.375C7.40904 8.17576 7.06921 10.2486 7.01438 12.3871C6.95955 14.5255 7.19163 16.6547 7.6875 18.5625C9.95364 18.2995 12.116 17.6164 14.009 16.5655C15.902 15.5147 17.4755 14.124 18.6088 12.5C17.5158 10.8949 15.9949 9.51103 14.1585 8.45082C12.3222 7.3906 10.2174 6.68116 8 6.375Z';
-const playFocusPath = 'M93.4691 0.0367432C84.4873 0.520935 77.2494 1.93634 69.9553 4.69266C66.3176 6.05219 60.3548 9.0134 57.0734 11.062C43.3476 19.6103 32.8846 32.4606 27.428 47.4154C26.3405 50.3766 23.3966 59.8188 21.5027 66.3185C8.88329 109.768 1.7204 157.277 0.182822 207.561C-0.0609408 215.569 -0.0609408 234.639 0.182822 242.517C1.21413 275.854 4.42055 305.949 10.2334 336.641C12.596 349.063 16.3837 365.75 18.5776 373.33C23.059 388.732 32.2095 401.843 45.2227 411.453C53.9419 417.896 63.8425 422.217 74.8118 424.34C80.0996 425.365 87.075 425.83 92.2127 425.495C99.3194 425.029 113.42 423.148 124.877 421.118C176.517 411.974 224.22 395.604 267.478 372.175C294.874 357.332 318.294 341.26 340.888 321.761C363.408 302.355 382.609 281.478 399.504 258.049C403.423 252.63 405.392 249.464 407.361 245.478C412.424 235.198 414.805 224.974 414.786 213.539C414.786 202.886 412.761 193.425 408.392 183.741C406.292 179.066 404.286 175.714 399.785 169.345C383.21 145.898 364.815 125.467 342.389 105.614C307.624 74.8481 266.335 49.613 220.226 30.9334C210.232 26.8921 200.387 23.335 188.537 19.4799C163.448 11.3413 132.396 4.28293 106.126 0.763062C102.001 0.204346 96.3942 -0.112244 93.4691 0.0367432Z';
-const playIconStrokeWidth = 6.25;
-const playFocusStrokeWidth = 1.5;
-const playFocusPadding = 2;
-// Derived with @remotion/paths getBoundingBox() from the paths above.
-const playPathBounds = {
-    x1: 7.006500987565134,
-    y1: 6.375,
-    x2: 18.6088,
-    y2: 18.5625,
-};
-const playFocusPathBounds = {
-    x1: -9.999999999649709e-8,
-    y1: 0.000013203698169792638,
-    x2: 414.7861127950162,
-    y2: 425.60252460486765,
-};
-const expandBounds = (bounds, padding) => {
-    return {
-        x1: bounds.x1 - padding,
-        y1: bounds.y1 - padding,
-        x2: bounds.x2 + padding,
-        y2: bounds.y2 + padding,
-    };
-};
-const getBoundsWidth = (bounds) => bounds.x2 - bounds.x1;
-const getBoundsHeight = (bounds) => bounds.y2 - bounds.y1;
-const fitBoundsTransform = ({ source, target, }) => {
-    const scale = Math.min(getBoundsWidth(target) / getBoundsWidth(source), getBoundsHeight(target) / getBoundsHeight(source));
-    const x = target.x1 +
-        (getBoundsWidth(target) - getBoundsWidth(source) * scale) / 2 -
-        source.x1 * scale;
-    const y = target.y1 +
-        (getBoundsHeight(target) - getBoundsHeight(source) * scale) / 2 -
-        source.y1 * scale;
-    return `translate(${x.toFixed(4)} ${y.toFixed(4)}) scale(${scale.toFixed(5)})`;
-};
-const playFocusTransform = fitBoundsTransform({
-    source: playFocusPathBounds,
-    target: expandBounds(expandBounds(playPathBounds, playIconStrokeWidth / 2), playFocusPadding),
-});
-const PlayIcon = ({ focused }) => {
-    return (jsx_runtime_1.jsxs("svg", { width: exports.ICON_SIZE, height: exports.ICON_SIZE, viewBox: "0 0 25 25", fill: "none", children: [focused ? (jsx_runtime_1.jsx("path", { d: playFocusPath, fill: "none", stroke: focusRingFallbackColor, strokeWidth: playFocusStrokeWidth, style: focusRingStyle, transform: playFocusTransform, vectorEffect: "non-scaling-stroke" })) : null, jsx_runtime_1.jsx("path", { d: playPath, fill: "white", stroke: "white", strokeWidth: playIconStrokeWidth, strokeLinejoin: "round" })
-        ] }));
+const PlayIcon = () => {
+    return (jsx_runtime_1.jsx("svg", { width: exports.ICON_SIZE, height: exports.ICON_SIZE, viewBox: "0 0 25 25", fill: "none", children: jsx_runtime_1.jsx("path", { d: "M8 6.375C7.40904 8.17576 7.06921 10.2486 7.01438 12.3871C6.95955 14.5255 7.19163 16.6547 7.6875 18.5625C9.95364 18.2995 12.116 17.6164 14.009 16.5655C15.902 15.5147 17.4755 14.124 18.6088 12.5C17.5158 10.8949 15.9949 9.51103 14.1585 8.45082C12.3222 7.3906 10.2174 6.68116 8 6.375Z", fill: "white", stroke: "white", strokeWidth: "6.25", strokeLinejoin: "round" }) }));
 };
 exports.PlayIcon = PlayIcon;
-const PauseIcon = ({ focused, }) => {
-    return (jsx_runtime_1.jsxs("svg", { viewBox: "0 0 100 100", width: exports.ICON_SIZE, height: exports.ICON_SIZE, children: [focused ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx("rect", { x: "21", y: "16", width: "28", height: "68", fill: "none", stroke: focusRingFallbackColor, strokeWidth: "4", ry: "9", rx: "9", style: focusRingStyle }), jsx_runtime_1.jsx("rect", { x: "51", y: "16", width: "28", height: "68", fill: "none", stroke: focusRingFallbackColor, strokeWidth: "4", ry: "9", rx: "9", style: focusRingStyle })
-                ] })) : null, jsx_runtime_1.jsx("rect", { x: "25", y: "20", width: "20", height: "60", fill: "#fff", ry: "5", rx: "5" }), jsx_runtime_1.jsx("rect", { x: "55", y: "20", width: "20", height: "60", fill: "#fff", ry: "5", rx: "5" })
+const PauseIcon = () => {
+    return (jsx_runtime_1.jsxs("svg", { viewBox: "0 0 100 100", width: exports.ICON_SIZE, height: exports.ICON_SIZE, children: [
+            jsx_runtime_1.jsx("rect", { x: "25", y: "20", width: "20", height: "60", fill: "#fff", ry: "5", rx: "5" }), jsx_runtime_1.jsx("rect", { x: "55", y: "20", width: "20", height: "60", fill: "#fff", ry: "5", rx: "5" })
         ] }));
 };
 exports.PauseIcon = PauseIcon;

package/dist/esm/index.mjs

@@ -18,116 +18,30 @@ if (typeof createContext !== "function") {
 }
 
 // src/icons.tsx
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var ICON_SIZE = 25;
 var fullscreenIconSize = 16;
-var focusRingFallbackColor = "Highlight";
-var focusRingColor = "-webkit-focus-ring-color";
-var focusRingStyle = {
-  stroke: focusRingColor
-};
-var playPath = "M8 6.375C7.40904 8.17576 7.06921 10.2486 7.01438 12.3871C6.95955 14.5255 7.19163 16.6547 7.6875 18.5625C9.95364 18.2995 12.116 17.6164 14.009 16.5655C15.902 15.5147 17.4755 14.124 18.6088 12.5C17.5158 10.8949 15.9949 9.51103 14.1585 8.45082C12.3222 7.3906 10.2174 6.68116 8 6.375Z";
-var playFocusPath = "M93.4691 0.0367432C84.4873 0.520935 77.2494 1.93634 69.9553 4.69266C66.3176 6.05219 60.3548 9.0134 57.0734 11.062C43.3476 19.6103 32.8846 32.4606 27.428 47.4154C26.3405 50.3766 23.3966 59.8188 21.5027 66.3185C8.88329 109.768 1.7204 157.277 0.182822 207.561C-0.0609408 215.569 -0.0609408 234.639 0.182822 242.517C1.21413 275.854 4.42055 305.949 10.2334 336.641C12.596 349.063 16.3837 365.75 18.5776 373.33C23.059 388.732 32.2095 401.843 45.2227 411.453C53.9419 417.896 63.8425 422.217 74.8118 424.34C80.0996 425.365 87.075 425.83 92.2127 425.495C99.3194 425.029 113.42 423.148 124.877 421.118C176.517 411.974 224.22 395.604 267.478 372.175C294.874 357.332 318.294 341.26 340.888 321.761C363.408 302.355 382.609 281.478 399.504 258.049C403.423 252.63 405.392 249.464 407.361 245.478C412.424 235.198 414.805 224.974 414.786 213.539C414.786 202.886 412.761 193.425 408.392 183.741C406.292 179.066 404.286 175.714 399.785 169.345C383.21 145.898 364.815 125.467 342.389 105.614C307.624 74.8481 266.335 49.613 220.226 30.9334C210.232 26.8921 200.387 23.335 188.537 19.4799C163.448 11.3413 132.396 4.28293 106.126 0.763062C102.001 0.204346 96.3942 -0.112244 93.4691 0.0367432Z";
-var playIconStrokeWidth = 6.25;
-var playFocusStrokeWidth = 1.5;
-var playFocusPadding = 2;
-var playPathBounds = {
-  x1: 7.006500987565134,
-  y1: 6.375,
-  x2: 18.6088,
-  y2: 18.5625
-};
-var playFocusPathBounds = {
-  x1: -0.00000009999999999649709,
-  y1: 0.000013203698169792638,
-  x2: 414.7861127950162,
-  y2: 425.60252460486765
-};
-var expandBounds = (bounds, padding) => {
-  return {
-    x1: bounds.x1 - padding,
-    y1: bounds.y1 - padding,
-    x2: bounds.x2 + padding,
-    y2: bounds.y2 + padding
-  };
-};
-var getBoundsWidth = (bounds) => bounds.x2 - bounds.x1;
-var getBoundsHeight = (bounds) => bounds.y2 - bounds.y1;
-var fitBoundsTransform = ({
-  source,
-  target
-}) => {
-  const scale = Math.min(getBoundsWidth(target) / getBoundsWidth(source), getBoundsHeight(target) / getBoundsHeight(source));
-  const x = target.x1 + (getBoundsWidth(target) - getBoundsWidth(source) * scale) / 2 - source.x1 * scale;
-  const y = target.y1 + (getBoundsHeight(target) - getBoundsHeight(source) * scale) / 2 - source.y1 * scale;
-  return `translate(${x.toFixed(4)} ${y.toFixed(4)}) scale(${scale.toFixed(5)})`;
-};
-var playFocusTransform = fitBoundsTransform({
-  source: playFocusPathBounds,
-  target: expandBounds(expandBounds(playPathBounds, playIconStrokeWidth / 2), playFocusPadding)
-});
-var PlayIcon = ({ focused }) => {
-  return /* @__PURE__ */ jsxs("svg", {
+var PlayIcon = () => {
+  return /* @__PURE__ */ jsx("svg", {
     width: ICON_SIZE,
     height: ICON_SIZE,
     viewBox: "0 0 25 25",
     fill: "none",
-    children: [
-      focused ? /* @__PURE__ */ jsx("path", {
-        d: playFocusPath,
-        fill: "none",
-        stroke: focusRingFallbackColor,
-        strokeWidth: playFocusStrokeWidth,
-        style: focusRingStyle,
-        transform: playFocusTransform,
-        vectorEffect: "non-scaling-stroke"
-      }) : null,
-      /* @__PURE__ */ jsx("path", {
-        d: playPath,
-        fill: "white",
-        stroke: "white",
-        strokeWidth: playIconStrokeWidth,
-        strokeLinejoin: "round"
-      })
-    ]
+    children: /* @__PURE__ */ jsx("path", {
+      d: "M8 6.375C7.40904 8.17576 7.06921 10.2486 7.01438 12.3871C6.95955 14.5255 7.19163 16.6547 7.6875 18.5625C9.95364 18.2995 12.116 17.6164 14.009 16.5655C15.902 15.5147 17.4755 14.124 18.6088 12.5C17.5158 10.8949 15.9949 9.51103 14.1585 8.45082C12.3222 7.3906 10.2174 6.68116 8 6.375Z",
+      fill: "white",
+      stroke: "white",
+      strokeWidth: "6.25",
+      strokeLinejoin: "round"
+    })
   });
 };
-var PauseIcon = ({
-  focused
-}) => {
+var PauseIcon = () => {
   return /* @__PURE__ */ jsxs("svg", {
     viewBox: "0 0 100 100",
     width: ICON_SIZE,
     height: ICON_SIZE,
     children: [
-      focused ? /* @__PURE__ */ jsxs(Fragment, {
-        children: [
-          /* @__PURE__ */ jsx("rect", {
-            x: "21",
-            y: "16",
-            width: "28",
-            height: "68",
-            fill: "none",
-            stroke: focusRingFallbackColor,
-            strokeWidth: "4",
-            ry: "9",
-            rx: "9",
-            style: focusRingStyle
-          }),
-          /* @__PURE__ */ jsx("rect", {
-            x: "51",
-            y: "16",
-            width: "28",
-            height: "68",
-            fill: "none",
-            stroke: focusRingFallbackColor,
-            strokeWidth: "4",
-            ry: "9",
-            rx: "9",
-            style: focusRingStyle
-          })
-        ]
-      }) : null,
       /* @__PURE__ */ jsx("rect", {
         x: "25",
         y: "20",
@@ -229,7 +143,7 @@ var VolumeOnIcon = () => {
 };
 
 // src/BufferingIndicator.tsx
-import { jsx as jsx2, jsxs as jsxs2, Fragment as Fragment2 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2, Fragment } from "react/jsx-runtime";
 var className = "__remotion_buffering_indicator";
 var remotionBufferingAnimation = "__remotion_buffering_animation";
 var playerStyle = {
@@ -248,7 +162,7 @@ var studioStyle = {
 };
 var BufferingIndicator = ({ type }) => {
   const style = type === "player" ? playerStyle : studioStyle;
-  return /* @__PURE__ */ jsxs2(Fragment2, {
+  return /* @__PURE__ */ jsxs2(Fragment, {
     children: [
       /* @__PURE__ */ jsx2("style", {
         type: "text/css",
@@ -1561,20 +1475,16 @@ import { useCallback as useCallback7, useEffect as useEffect11, useMemo as useMe
 
 // src/DefaultPlayPauseButton.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
-var DefaultPlayPauseButton = ({ playing, buffering, focused }) => {
+var DefaultPlayPauseButton = ({ playing, buffering }) => {
   if (playing && buffering) {
     return /* @__PURE__ */ jsx6(BufferingIndicator, {
       type: "player"
     });
   }
   if (playing) {
-    return /* @__PURE__ */ jsx6(PauseIcon, {
-      focused
-    });
+    return /* @__PURE__ */ jsx6(PauseIcon, {});
   }
-  return /* @__PURE__ */ jsx6(PlayIcon, {
-    focused
-  });
+  return /* @__PURE__ */ jsx6(PlayIcon, {});
 };
 
 // src/MediaVolumeSlider.tsx
@@ -2230,7 +2140,7 @@ var useVideoControlsResize = ({
 };
 
 // src/PlayerControls.tsx
-import { jsx as jsx11, jsxs as jsxs8, Fragment as Fragment3 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs8, Fragment as Fragment2 } from "react/jsx-runtime";
 var gradientSteps = [
   0,
   0.013,
@@ -2340,7 +2250,6 @@ var Controls = ({
   renderCustomControls
 }) => {
   const playButtonRef = useRef8(null);
-  const [playButtonFocused, setPlayButtonFocused] = useState10(false);
   const [supportsFullscreen, setSupportsFullscreen] = useState10(false);
   const hovered = useHoverState(containerRef, hideControlsWhenPointerDoesntMove);
   const { maxTimeLabelWidth, displayVerticalVolumeSlider } = useVideoControlsResize({
@@ -2375,15 +2284,6 @@ var Controls = ({
       opacity: Number(shouldShow)
     };
   }, [hovered, shouldShowInitially, playing, alwaysShowControls]);
-  const playPauseButtonStyle = useMemo9(() => {
-    if (renderPlayPauseButton !== null || playing && buffering) {
-      return playerButtonStyle;
-    }
-    return {
-      ...playerButtonStyle,
-      outline: "none"
-    };
-  }, [buffering, playing, renderPlayPauseButton]);
   useEffect11(() => {
     if (playButtonRef.current && spaceKeyToPlayOrPause) {
       playButtonRef.current.focus({
@@ -2436,12 +2336,6 @@ var Controls = ({
       onDoubleClick?.(e);
     }
   }, [onDoubleClick]);
-  const onPlayButtonFocus = useCallback7(() => {
-    setPlayButtonFocused(true);
-  }, []);
-  const onPlayButtonBlur = useCallback7(() => {
-    setPlayButtonFocused(false);
-  }, []);
   return /* @__PURE__ */ jsxs8("div", {
     ref,
     style: containerCss,
@@ -2458,26 +2352,22 @@ var Controls = ({
               /* @__PURE__ */ jsx11("button", {
                 ref: playButtonRef,
                 type: "button",
-                style: playPauseButtonStyle,
+                style: playerButtonStyle,
                 onClick: toggle,
-                onFocus: onPlayButtonFocus,
-                onBlur: onPlayButtonBlur,
                 "aria-label": playing ? "Pause video" : "Play video",
                 title: playing ? "Pause video" : "Play video",
                 children: renderPlayPauseButton === null ? /* @__PURE__ */ jsx11(DefaultPlayPauseButton, {
                   buffering,
-                  focused: playButtonFocused,
                   playing
                 }) : renderPlayPauseButton({
                   playing,
                   isBuffering: buffering
                 }) ?? /* @__PURE__ */ jsx11(DefaultPlayPauseButton, {
                   buffering,
-                  focused: false,
                   playing
                 })
               }),
-              showVolumeControls ? /* @__PURE__ */ jsxs8(Fragment3, {
+              showVolumeControls ? /* @__PURE__ */ jsxs8(Fragment2, {
                 children: [
                   /* @__PURE__ */ jsx11("div", {
                     style: xSpacer
@@ -2641,7 +2531,7 @@ var useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFull
 };
 
 // src/PlayerUI.tsx
-import { jsx as jsx12, jsxs as jsxs9, Fragment as Fragment4 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs9, Fragment as Fragment3 } from "react/jsx-runtime";
 var reactVersion = React10.version.split(".")[0];
 if (reactVersion === "0") {
   throw new Error(`Version ${reactVersion} of "react" is not supported by Remotion`);
@@ -3031,7 +2921,7 @@ var PlayerUI = ({
     showPosterWhenBufferingAndPaused && showBufferIndicator && !player.isPlaying()
   ].some(Boolean);
   const { left, top, width, height, ...outerWithoutScale } = outer;
-  const content = /* @__PURE__ */ jsxs9(Fragment4, {
+  const content = /* @__PURE__ */ jsxs9(Fragment3, {
     children: [
       /* @__PURE__ */ jsxs9("div", {
         style: outer,

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/player"
 	},
 	"name": "@remotion/player",
-	"version": "4.0.485",
+	"version": "4.0.487",
 	"description": "React component for embedding a Remotion preview into your app",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -14,7 +14,7 @@
 		"lint": "eslint src",
 		"make": "tsgo -d && bun ensure-correct-version.ts && bun --env-file=../.env.bundle bundle.ts",
 		"test": "bun test src",
-		"prerelease": "cp ../../README.md ."
+		"prerelease": "cp ../../README.md . && cp ../../LICENSE.md ."
 	},
 	"exports": {
 		"./package.json": "./package.json",
@@ -35,7 +35,7 @@
 	],
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"remotion": "4.0.485"
+		"remotion": "4.0.487"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
@@ -49,7 +49,7 @@
 		"react-dom": "19.2.3",
 		"webpack": "5.105.0",
 		"zod": "4.3.6",
-		"@remotion/eslint-config-internal": "4.0.485",
+		"@remotion/eslint-config-internal": "4.0.487",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},