@remotion/player 4.0.331 → 4.0.333

package/dist/cjs/PlaybackrateControl.js

@@ -32,6 +32,11 @@ const checkmarkStyle = {
 };
 const Checkmark = () => ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 512 512", style: checkmarkStyle, children: (0, jsx_runtime_1.jsx)("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" }) }));
 exports.Checkmark = Checkmark;
+const formatPlaybackRate = (rate) => {
+    const str = rate.toString();
+    // If the string doesn't contain a decimal point, add ".0"
+    return str.includes('.') ? str : str + '.0';
+};
 const PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }) => {
     const onClick = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
@@ -52,7 +57,7 @@ const PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate
             backgroundColor: hovered || isFocused ? '#eee' : 'transparent',
         };
     }, [hovered, isFocused]);
-    return ((0, jsx_runtime_1.jsxs)("div", { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, tabIndex: 0, style: actualStyle, onClick: onClick, children: [(0, jsx_runtime_1.jsx)("div", { style: checkmarkContainer, children: rate === selectedRate ? (0, jsx_runtime_1.jsx)(exports.Checkmark, {}) : null }), rate.toFixed(1), "x"] }, rate));
+    return ((0, jsx_runtime_1.jsxs)("div", { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, tabIndex: 0, style: actualStyle, onClick: onClick, children: [(0, jsx_runtime_1.jsx)("div", { style: checkmarkContainer, children: rate === selectedRate ? (0, jsx_runtime_1.jsx)(exports.Checkmark, {}) : null }), formatPlaybackRate(rate), "x"] }, rate));
 };
 const PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
     const { setPlaybackRate, playbackRate } = (0, react_1.useContext)(remotion_1.Internals.Timeline.TimelineContext);

package/dist/esm/index.mjs

@@ -1455,6 +1455,10 @@ var Checkmark = () => /* @__PURE__ */ jsx7("svg", {
     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"
   })
 });
+var formatPlaybackRate = (rate) => {
+  const str = rate.toString();
+  return str.includes(".") ? str : str + ".0";
+};
 var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }) => {
   const onClick = useCallback6((e) => {
     e.stopPropagation();
@@ -1486,7 +1490,7 @@ var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }
         style: checkmarkContainer,
         children: rate === selectedRate ? /* @__PURE__ */ jsx7(Checkmark, {}) : null
       }),
-      rate.toFixed(1),
+      formatPlaybackRate(rate),
       "x"
     ]
   }, rate);

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/player"
   },
   "name": "@remotion/player",
-  "version": "4.0.331",
+  "version": "4.0.333",
   "description": "React component for embedding a Remotion preview into your app",
   "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.331"
+    "remotion": "4.0.333"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -43,7 +43,7 @@
     "webpack": "5.96.1",
     "zod": "3.22.3",
     "eslint": "9.19.0",
-    "@remotion/eslint-config-internal": "4.0.331"
+    "@remotion/eslint-config-internal": "4.0.333"
   },
   "keywords": [
     "remotion",