@remotion/player 4.0.150 → 4.0.151

package/dist/cjs/MediaVolumeSlider.js

@@ -1,172 +1,134 @@
-'use strict';
-const __createBinding =
-	(this && this.__createBinding) ||
-	(Object.create
-		? function (o, m, k, k2) {
-				if (k2 === undefined) k2 = k;
-				let desc = Object.getOwnPropertyDescriptor(m, k);
-				if (
-					!desc ||
-					('get' in desc ? !m.__esModule : desc.writable || desc.configurable)
-				) {
-					desc = {
-						enumerable: true,
-						get() {
-							return m[k];
-						},
-					};
-				}
-
-				Object.defineProperty(o, k2, desc);
-			}
-		: function (o, m, k, k2) {
-				if (k2 === undefined) k2 = k;
-				o[k2] = m[k];
-			});
-const __setModuleDefault =
-	(this && this.__setModuleDefault) ||
-	(Object.create
-		? function (o, v) {
-				Object.defineProperty(o, 'default', {enumerable: true, value: v});
-			}
-		: function (o, v) {
-				o.default = v;
-			});
-const __importStar =
-	(this && this.__importStar) ||
-	function (mod) {
-		if (mod && mod.__esModule) return mod;
-		const result = {};
-		if (mod != null)
-			for (const k in mod)
-				if (k !== 'default' && Object.prototype.hasOwnProperty.call(mod, k))
-					__createBinding(result, mod, k);
-		__setModuleDefault(result, mod);
-		return result;
-	};
-
-Object.defineProperty(exports, '__esModule', {value: true});
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.MediaVolumeSlider = exports.VOLUME_SLIDER_WIDTH = void 0;
-const jsx_runtime_1 = require('react/jsx-runtime');
-const react_1 = __importStar(require('react'));
-const remotion_1 = require('remotion');
-const icons_js_1 = require('./icons.js');
-const use_hover_state_js_1 = require('./use-hover-state.js');
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const remotion_1 = require("remotion");
+const icons_js_1 = require("./icons.js");
+const use_hover_state_js_1 = require("./use-hover-state.js");
 const BAR_HEIGHT = 5;
 const KNOB_SIZE = 12;
 exports.VOLUME_SLIDER_WIDTH = 100;
-const MediaVolumeSlider = ({displayVerticalVolumeSlider}) => {
-	const [mediaMuted, setMediaMuted] = remotion_1.Internals.useMediaMutedState();
-	const [mediaVolume, setMediaVolume] =
-		remotion_1.Internals.useMediaVolumeState();
-	const [focused, setFocused] = (0, react_1.useState)(false);
-	const parentDivRef = (0, react_1.useRef)(null);
-	const inputRef = (0, react_1.useRef)(null);
-	const hover = (0, use_hover_state_js_1.useHoverState)(parentDivRef, false);
-	// Need to import it from React to fix React 17 ESM support.
-	const randomId =
-		// eslint-disable-next-line react-hooks/rules-of-hooks
-		typeof react_1.default.useId === 'undefined'
-			? 'volume-slider'
-			: react_1.default.useId();
-	const [randomClass] = (0, react_1.useState)(() =>
-		`__remotion-volume-slider-${(0, remotion_1.random)(randomId)}`.replace(
-			'.',
-			'',
-		),
-	);
-	const isMutedOrZero = mediaMuted || mediaVolume === 0;
-	const onVolumeChange = (0, react_1.useCallback)(
-		(e) => {
-			setMediaVolume(parseFloat(e.target.value));
-		},
-		[setMediaVolume],
-	);
-	const onBlur = () => {
-		setTimeout(() => {
-			// We need a small delay to check which element was focused next,
-			// and if it wasn't the volume slider, we hide it
-			if (document.activeElement !== inputRef.current) {
-				setFocused(false);
-			}
-		}, 10);
-	};
-
-	const isVolume0 = mediaVolume === 0;
-	const onClick = (0, react_1.useCallback)(() => {
-		if (isVolume0) {
-			setMediaVolume(1);
-			setMediaMuted(false);
-			return;
-		}
-
-		setMediaMuted((mute) => !mute);
-	}, [isVolume0, setMediaMuted, setMediaVolume]);
-	const parentDivStyle = (0, react_1.useMemo)(() => {
-		return {
-			display: 'inline-flex',
-			background: 'none',
-			border: 'none',
-			justifyContent: 'center',
-			alignItems: 'center',
-			touchAction: 'none',
-			...(displayVerticalVolumeSlider && {position: 'relative'}),
-		};
-	}, [displayVerticalVolumeSlider]);
-	const volumeContainer = (0, react_1.useMemo)(() => {
-		return {
-			display: 'inline',
-			width: icons_js_1.ICON_SIZE,
-			height: icons_js_1.ICON_SIZE,
-			cursor: 'pointer',
-			appearance: 'none',
-			background: 'none',
-			border: 'none',
-			padding: 0,
-		};
-	}, []);
-	const sliderContainer = (0, react_1.useMemo)(() => {
-		const paddingLeft = 5;
-		const common = {
-			paddingLeft,
-			height: icons_js_1.ICON_SIZE,
-			width: exports.VOLUME_SLIDER_WIDTH,
-		};
-		if (displayVerticalVolumeSlider) {
-			return {
-				...common,
-				position: 'absolute',
-				transform: `rotate(-90deg) translateX(${exports.VOLUME_SLIDER_WIDTH / 2 + icons_js_1.ICON_SIZE / 2}px)`,
-			};
-		}
-
-		return {
-			...common,
-		};
-	}, [displayVerticalVolumeSlider]);
-	const inputStyle = (0, react_1.useMemo)(() => {
-		const commonStyle = {
-			WebkitAppearance: 'none',
-			backgroundColor: 'rgba(255, 255, 255, 0.5)',
-			borderRadius: BAR_HEIGHT / 2,
-			cursor: 'pointer',
-			height: BAR_HEIGHT,
-			width: exports.VOLUME_SLIDER_WIDTH,
-			backgroundImage: `linear-gradient(
+const MediaVolumeSlider = ({ displayVerticalVolumeSlider }) => {
+    const [mediaMuted, setMediaMuted] = remotion_1.Internals.useMediaMutedState();
+    const [mediaVolume, setMediaVolume] = remotion_1.Internals.useMediaVolumeState();
+    const [focused, setFocused] = (0, react_1.useState)(false);
+    const parentDivRef = (0, react_1.useRef)(null);
+    const inputRef = (0, react_1.useRef)(null);
+    const hover = (0, use_hover_state_js_1.useHoverState)(parentDivRef, false);
+    // Need to import it from React to fix React 17 ESM support.
+    const randomId = 
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    typeof react_1.default.useId === 'undefined' ? 'volume-slider' : react_1.default.useId();
+    const [randomClass] = (0, react_1.useState)(() => `__remotion-volume-slider-${(0, remotion_1.random)(randomId)}`.replace('.', ''));
+    const isMutedOrZero = mediaMuted || mediaVolume === 0;
+    const onVolumeChange = (0, react_1.useCallback)((e) => {
+        setMediaVolume(parseFloat(e.target.value));
+    }, [setMediaVolume]);
+    const onBlur = () => {
+        setTimeout(() => {
+            // We need a small delay to check which element was focused next,
+            // and if it wasn't the volume slider, we hide it
+            if (document.activeElement !== inputRef.current) {
+                setFocused(false);
+            }
+        }, 10);
+    };
+    const isVolume0 = mediaVolume === 0;
+    const onClick = (0, react_1.useCallback)(() => {
+        if (isVolume0) {
+            setMediaVolume(1);
+            setMediaMuted(false);
+            return;
+        }
+        setMediaMuted((mute) => !mute);
+    }, [isVolume0, setMediaMuted, setMediaVolume]);
+    const parentDivStyle = (0, react_1.useMemo)(() => {
+        return {
+            display: 'inline-flex',
+            background: 'none',
+            border: 'none',
+            justifyContent: 'center',
+            alignItems: 'center',
+            touchAction: 'none',
+            ...(displayVerticalVolumeSlider && { position: 'relative' }),
+        };
+    }, [displayVerticalVolumeSlider]);
+    const volumeContainer = (0, react_1.useMemo)(() => {
+        return {
+            display: 'inline',
+            width: icons_js_1.ICON_SIZE,
+            height: icons_js_1.ICON_SIZE,
+            cursor: 'pointer',
+            appearance: 'none',
+            background: 'none',
+            border: 'none',
+            padding: 0,
+        };
+    }, []);
+    const sliderContainer = (0, react_1.useMemo)(() => {
+        const paddingLeft = 5;
+        const common = {
+            paddingLeft,
+            height: icons_js_1.ICON_SIZE,
+            width: exports.VOLUME_SLIDER_WIDTH,
+        };
+        if (displayVerticalVolumeSlider) {
+            return {
+                ...common,
+                position: 'absolute',
+                transform: `rotate(-90deg) translateX(${exports.VOLUME_SLIDER_WIDTH / 2 + icons_js_1.ICON_SIZE / 2}px)`,
+            };
+        }
+        return {
+            ...common,
+        };
+    }, [displayVerticalVolumeSlider]);
+    const inputStyle = (0, react_1.useMemo)(() => {
+        const commonStyle = {
+            WebkitAppearance: 'none',
+            backgroundColor: 'rgba(255, 255, 255, 0.5)',
+            borderRadius: BAR_HEIGHT / 2,
+            cursor: 'pointer',
+            height: BAR_HEIGHT,
+            width: exports.VOLUME_SLIDER_WIDTH,
+            backgroundImage: `linear-gradient(
 				to right,
 				white ${mediaVolume * 100}%, rgba(255, 255, 255, 0) ${mediaVolume * 100}%
 			)`,
-		};
-		if (displayVerticalVolumeSlider) {
-			return {
-				...commonStyle,
-				bottom: icons_js_1.ICON_SIZE + exports.VOLUME_SLIDER_WIDTH / 2,
-			};
-		}
-
-		return commonStyle;
-	}, [displayVerticalVolumeSlider, mediaVolume]);
-	const sliderStyle = `
+        };
+        if (displayVerticalVolumeSlider) {
+            return {
+                ...commonStyle,
+                bottom: icons_js_1.ICON_SIZE + exports.VOLUME_SLIDER_WIDTH / 2,
+            };
+        }
+        return commonStyle;
+    }, [displayVerticalVolumeSlider, mediaVolume]);
+    const sliderStyle = `
 	.${randomClass}::-webkit-slider-thumb {
 		-webkit-appearance: none;
 		background-color: white;
@@ -185,48 +147,10 @@ const MediaVolumeSlider = ({displayVerticalVolumeSlider}) => {
 		width: ${KNOB_SIZE}px;
 	}
 `;
-	return (0, jsx_runtime_1.jsxs)('div', {
-		ref: parentDivRef,
-		style: parentDivStyle,
-		children: [
-			(0, jsx_runtime_1.jsx)('style', {
-				// eslint-disable-next-line react/no-danger
-				dangerouslySetInnerHTML: {
-					__html: sliderStyle,
-				},
-			}),
-			(0, jsx_runtime_1.jsx)('button', {
-				'aria-label': isMutedOrZero ? 'Unmute sound' : 'Mute sound',
-				title: isMutedOrZero ? 'Unmute sound' : 'Mute sound',
-				onClick,
-				onBlur,
-				onFocus: () => setFocused(true),
-				style: volumeContainer,
-				type: 'button',
-				children: isMutedOrZero
-					? (0, jsx_runtime_1.jsx)(icons_js_1.VolumeOffIcon, {})
-					: (0, jsx_runtime_1.jsx)(icons_js_1.VolumeOnIcon, {}),
-			}),
-			(focused || hover) && !mediaMuted && !remotion_1.Internals.isIosSafari()
-				? (0, jsx_runtime_1.jsx)('div', {
-						style: sliderContainer,
-						children: (0, jsx_runtime_1.jsx)('input', {
-							ref: inputRef,
-							'aria-label': 'Change volume',
-							className: randomClass,
-							max: 1,
-							min: 0,
-							onBlur: () => setFocused(false),
-							onChange: onVolumeChange,
-							step: 0.01,
-							type: 'range',
-							value: mediaVolume,
-							style: inputStyle,
-						}),
-					})
-				: null,
-		],
-	});
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: parentDivRef, style: parentDivStyle, children: [(0, jsx_runtime_1.jsx)("style", { 
+                // eslint-disable-next-line react/no-danger
+                dangerouslySetInnerHTML: {
+                    __html: sliderStyle,
+                } }), (0, jsx_runtime_1.jsx)("button", { "aria-label": isMutedOrZero ? 'Unmute sound' : 'Mute sound', title: isMutedOrZero ? 'Unmute sound' : 'Mute sound', onClick: onClick, onBlur: onBlur, onFocus: () => setFocused(true), style: volumeContainer, type: "button", children: isMutedOrZero ? (0, jsx_runtime_1.jsx)(icons_js_1.VolumeOffIcon, {}) : (0, jsx_runtime_1.jsx)(icons_js_1.VolumeOnIcon, {}) }), (focused || hover) && !mediaMuted && !remotion_1.Internals.isIosSafari() ? ((0, jsx_runtime_1.jsx)("div", { style: sliderContainer, children: (0, jsx_runtime_1.jsx)("input", { ref: inputRef, "aria-label": "Change volume", className: randomClass, max: 1, min: 0, onBlur: () => setFocused(false), onChange: onVolumeChange, step: 0.01, type: "range", value: mediaVolume, style: inputStyle }) })) : null] }));
 };
-
 exports.MediaVolumeSlider = MediaVolumeSlider;

package/dist/cjs/icons.js

@@ -1,141 +1,47 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {value: true});
-exports.VolumeOnIcon =
-	exports.VolumeOffIcon =
-	exports.FullscreenIcon =
-	exports.PauseIcon =
-	exports.PlayIcon =
-	exports.fullscreenIconSize =
-	exports.ICON_SIZE =
-		void 0;
-const jsx_runtime_1 = require('react/jsx-runtime');
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VolumeOnIcon = exports.VolumeOffIcon = exports.FullscreenIcon = exports.PauseIcon = exports.PlayIcon = exports.fullscreenIconSize = exports.ICON_SIZE = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 exports.ICON_SIZE = 25;
 exports.fullscreenIconSize = 16;
 const PlayIcon = () => {
-	return (0, jsx_runtime_1.jsx)('svg', {
-		width: exports.ICON_SIZE,
-		height: exports.ICON_SIZE,
-		viewBox: '0 0 25 25',
-		fill: 'none',
-		children: (0, 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',
-		}),
-	});
+    return ((0, jsx_runtime_1.jsx)("svg", { width: exports.ICON_SIZE, height: exports.ICON_SIZE, viewBox: "0 0 25 25", fill: "none", children: (0, 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 = () => {
-	return (0, jsx_runtime_1.jsxs)('svg', {
-		viewBox: '0 0 100 100',
-		width: exports.ICON_SIZE,
-		height: exports.ICON_SIZE,
-		children: [
-			(0, jsx_runtime_1.jsx)('rect', {
-				x: '25',
-				y: '20',
-				width: '20',
-				height: '60',
-				fill: '#fff',
-				ry: '5',
-				rx: '5',
-			}),
-			(0, jsx_runtime_1.jsx)('rect', {
-				x: '55',
-				y: '20',
-				width: '20',
-				height: '60',
-				fill: '#fff',
-				ry: '5',
-				rx: '5',
-			}),
-		],
-	});
+    return ((0, jsx_runtime_1.jsxs)("svg", { viewBox: "0 0 100 100", width: exports.ICON_SIZE, height: exports.ICON_SIZE, children: [(0, jsx_runtime_1.jsx)("rect", { x: "25", y: "20", width: "20", height: "60", fill: "#fff", ry: "5", rx: "5" }), (0, jsx_runtime_1.jsx)("rect", { x: "55", y: "20", width: "20", height: "60", fill: "#fff", ry: "5", rx: "5" })] }));
 };
-
 exports.PauseIcon = PauseIcon;
-const FullscreenIcon = ({isFullscreen}) => {
-	const strokeWidth = 6;
-	const viewSize = 32;
-	const out = isFullscreen ? 0 : strokeWidth / 2;
-	const middleInset = isFullscreen ? strokeWidth * 1.6 : strokeWidth / 2;
-	const inset = isFullscreen ? strokeWidth * 1.6 : strokeWidth * 2;
-	return (0, jsx_runtime_1.jsxs)('svg', {
-		viewBox: `0 0 ${viewSize} ${viewSize}`,
-		height: exports.fullscreenIconSize,
-		width: exports.fullscreenIconSize,
-		children: [
-			(0, jsx_runtime_1.jsx)('path', {
-				d: `
+const FullscreenIcon = ({ isFullscreen, }) => {
+    const strokeWidth = 6;
+    const viewSize = 32;
+    const out = isFullscreen ? 0 : strokeWidth / 2;
+    const middleInset = isFullscreen ? strokeWidth * 1.6 : strokeWidth / 2;
+    const inset = isFullscreen ? strokeWidth * 1.6 : strokeWidth * 2;
+    return ((0, jsx_runtime_1.jsxs)("svg", { viewBox: `0 0 ${viewSize} ${viewSize}`, height: exports.fullscreenIconSize, width: exports.fullscreenIconSize, children: [(0, jsx_runtime_1.jsx)("path", { d: `
 				M ${out} ${inset}
 				L ${middleInset} ${middleInset}
 				L ${inset} ${out}
-				`,
-				stroke: '#fff',
-				strokeWidth,
-				fill: 'none',
-			}),
-			(0, jsx_runtime_1.jsx)('path', {
-				d: `
+				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }), (0, jsx_runtime_1.jsx)("path", { d: `
 				M ${viewSize - out} ${inset}
 				L ${viewSize - middleInset} ${middleInset}
 				L ${viewSize - inset} ${out}
-				`,
-				stroke: '#fff',
-				strokeWidth,
-				fill: 'none',
-			}),
-			(0, jsx_runtime_1.jsx)('path', {
-				d: `
+				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }), (0, jsx_runtime_1.jsx)("path", { d: `
 				M ${out} ${viewSize - inset}
 				L ${middleInset} ${viewSize - middleInset}
 				L ${inset} ${viewSize - out}
-				`,
-				stroke: '#fff',
-				strokeWidth,
-				fill: 'none',
-			}),
-			(0, jsx_runtime_1.jsx)('path', {
-				d: `
+				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }), (0, jsx_runtime_1.jsx)("path", { d: `
 				M ${viewSize - out} ${viewSize - inset}
 				L ${viewSize - middleInset} ${viewSize - middleInset}
 				L ${viewSize - inset} ${viewSize - out}
-				`,
-				stroke: '#fff',
-				strokeWidth,
-				fill: 'none',
-			}),
-		],
-	});
+				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" })] }));
 };
-
 exports.FullscreenIcon = FullscreenIcon;
 const VolumeOffIcon = () => {
-	return (0, jsx_runtime_1.jsx)('svg', {
-		width: exports.ICON_SIZE,
-		height: exports.ICON_SIZE,
-		viewBox: '0 0 24 24',
-		children: (0, jsx_runtime_1.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',
-		}),
-	});
+    return ((0, jsx_runtime_1.jsx)("svg", { width: exports.ICON_SIZE, height: exports.ICON_SIZE, viewBox: "0 0 24 24", children: (0, jsx_runtime_1.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" }) }));
 };
-
 exports.VolumeOffIcon = VolumeOffIcon;
 const VolumeOnIcon = () => {
-	return (0, jsx_runtime_1.jsx)('svg', {
-		width: exports.ICON_SIZE,
-		height: exports.ICON_SIZE,
-		viewBox: '0 0 24 24',
-		children: (0, jsx_runtime_1.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',
-		}),
-	});
+    return ((0, jsx_runtime_1.jsx)("svg", { width: exports.ICON_SIZE, height: exports.ICON_SIZE, viewBox: "0 0 24 24", children: (0, jsx_runtime_1.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" }) }));
 };
-
 exports.VolumeOnIcon = VolumeOnIcon;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/player",
-  "version": "4.0.150",
+  "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.150"
+    "remotion": "4.0.151"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/BufferingIndicator.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const bufferingIndicatorStrokeWidth = 3;
-export declare const BufferingIndicator: React.FC<{
-    type: 'player' | 'studio';
-}>;

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/BufferingIndicator.js

@@ -1,38 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { ICON_SIZE } from './icons.js';
-const className = '__remotion_buffering_indicator';
-const remotionBufferingAnimation = '__remotion_buffering_animation';
-export const bufferingIndicatorStrokeWidth = 3;
-const playerStyle = {
-    width: ICON_SIZE,
-    height: ICON_SIZE,
-    overflow: 'hidden',
-    lineHeight: 'normal',
-    fontSize: 'inherit',
-};
-const studioStyle = {
-    width: 14,
-    height: 14,
-    overflow: 'hidden',
-    lineHeight: 'normal',
-    fontSize: 'inherit',
-};
-export const BufferingIndicator = ({ type }) => {
-    const style = type === 'player' ? playerStyle : studioStyle;
-    return (_jsxs(_Fragment, { children: [_jsx("style", { type: "text/css", children: `
-				@keyframes ${remotionBufferingAnimation} {
-          0% {
-            rotate: 0deg;
-          }
-          100% {
-            rotate: 360deg;
-          }
-        }
-        
-        .${className} {
-            animation: ${remotionBufferingAnimation} 1s linear infinite;
-        }        
-			` }), _jsx("div", { style: style, children: _jsx("svg", { viewBox: type === 'player' ? '0 0 22 22' : '0 0 18 18', style: style, className: className, children: _jsx("path", { d: type === 'player'
-                            ? 'M 11 4 A 7 7 0 0 1 15.1145 16.66312'
-                            : 'M 9 2 A 7 7 0 0 1 13.1145 14.66312', stroke: "white", strokeLinecap: "round", fill: "none", strokeWidth: 3 }) }) })] }));
-};

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/DefaultPlayPauseButton.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export declare const DefaultPlayPauseButton: React.FC<{
-    playing: boolean;
-    buffering: boolean;
-}>;

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/DefaultPlayPauseButton.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { BufferingIndicator } from './BufferingIndicator.js';
-import { PauseIcon, PlayIcon } from './icons.js';
-export const DefaultPlayPauseButton = ({ playing, buffering }) => {
-    if (playing && buffering) {
-        return _jsx(BufferingIndicator, { type: "player" });
-    }
-    if (playing) {
-        return _jsx(PauseIcon, {});
-    }
-    return _jsx(PlayIcon, {});
-};

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/EmitterProvider.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const PlayerEmitterProvider: React.FC<{
-    children: React.ReactNode;
-    currentPlaybackRate: number | null;
-}>;

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/EmitterProvider.js

@@ -1,20 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useEffect, useState } from 'react';
-import { Internals } from 'remotion';
-import { PlayerEventEmitterContext } from './emitter-context.js';
-import { PlayerEmitter } from './event-emitter.js';
-import { useBufferStateEmitter } from './use-buffer-state-emitter.js';
-export const PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
-    const [emitter] = useState(() => new PlayerEmitter());
-    const bufferManager = useContext(Internals.BufferingContextReact);
-    if (!bufferManager) {
-        throw new Error('BufferingContextReact not found');
-    }
-    useEffect(() => {
-        if (currentPlaybackRate) {
-            emitter.dispatchRateChange(currentPlaybackRate);
-        }
-    }, [emitter, currentPlaybackRate]);
-    useBufferStateEmitter(emitter);
-    return (_jsx(PlayerEventEmitterContext.Provider, { value: emitter, children: children }));
-};

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/MediaVolumeSlider.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const VOLUME_SLIDER_WIDTH = 100;
-export declare const MediaVolumeSlider: React.FC<{
-    displayVerticalVolumeSlider: Boolean;
-}>;