@remotion/player - npm Package Compare versions

Comparing version 2.2.0 to 2.3.0-alpha.424c97fb

dist/index.d.ts

@@ -23,3 +23,5 @@ import { PlayerEmitter } from './event-emitter';
     }) => void;
-    useElementSize: (ref: import("react").RefObject<HTMLDivElement>) => import("./utils/use-element-size").Size | null;
+    useElementSize: (ref: import("react").RefObject<HTMLDivElement>, options: {
+        triggerOnWindowResize: boolean;
+    }) => import("./utils/use-element-size").Size | null;
     calculateScale: ({ previewSize, compositionWidth, compositionHeight, canvasSize, }: {
@@ -26,0 +28,0 @@ previewSize: import("./utils/preview-size").PreviewSize;

dist/MediaVolumeSlider.js

@@ -8,8 +8,38 @@ "use strict";
 const icons_1 = require("./icons");
+const player_css_classname_1 = require("./player-css-classname");
 const use_hover_state_1 = require("./use-hover-state");
-const use_element_size_1 = require("./utils/use-element-size");
 const BAR_HEIGHT = 5;
 const KNOB_SIZE = 12;
-const VERTICAL_PADDING = 4;
 const VOLUME_SLIDER_WIDTH = 100;
+const scope = `.${player_css_classname_1.VOLUME_SLIDER_INPUT_CSS_CLASSNAME}`;
+const sliderStyle = `
+	${scope} {
+		-webkit-appearance: none;
+		background-color: rgba(255, 255, 255, 0.5);	
+		border-radius: ${BAR_HEIGHT / 2}px;
+		cursor: pointer;
+		height: ${BAR_HEIGHT}px;
+		margin-left: 5px;
+		width: ${VOLUME_SLIDER_WIDTH}px;
+	}
+
+	${scope}::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		background-color: white;
+		border-radius: ${KNOB_SIZE / 2}px;
+		box-shadow: 0 0 2px black;
+		height: ${KNOB_SIZE}px;
+		width: ${KNOB_SIZE}px;
+	}
+
+	${scope}::-moz-range-thumb {
+		-webkit-appearance: none;
+		background-color: white;
+		border-radius: ${KNOB_SIZE / 2}px;
+		box-shadow: 0 0 2px black;
+		height: ${KNOB_SIZE}px;
+		width: ${KNOB_SIZE}px;
+	}
+`;
+remotion_1.Internals.CSSUtils.injectCSS(sliderStyle);
 const parentDivStyle = {
@@ -22,30 +52,4 @@ display: 'inline-flex',
     alignItems: 'center',
+    touchAction: 'none',
 };
-const containerStyle = {
-    userSelect: 'none',
-    paddingTop: VERTICAL_PADDING,
-    paddingBottom: VERTICAL_PADDING,
-    boxSizing: 'border-box',
-    cursor: 'pointer',
-    position: 'relative',
-};
-const barBackground = {
-    height: BAR_HEIGHT,
-    backgroundColor: 'rgba(255, 255, 255, 0.5)',
-    width: VOLUME_SLIDER_WIDTH,
-    borderRadius: BAR_HEIGHT / 2,
-};
-const getVolumeFromX = (clientX, width) => {
-    const pos = clientX;
-    const volume = width === 0
-        ? 0
-        : remotion_1.interpolate(pos, [0, width], [0, 1], {
-            extrapolateLeft: 'clamp',
-            extrapolateRight: 'clamp',
-        });
-    return volume;
-};
-const xSpacer = {
-    width: 5,
-};
 const volumeContainer = {
@@ -56,2 +60,6 @@ display: 'inline',
     cursor: 'pointer',
+    appearance: 'none',
+    background: 'none',
+    border: 'none',
+    padding: 0,
 };
@@ -61,9 +69,19 @@ const MediaVolumeSlider = () => {
     const [mediaVolume, setMediaVolume] = remotion_1.Internals.useMediaVolumeState();
-    const [dragging, setDragging] = react_1.useState(false);
-    const currentRef = react_1.useRef(null);
-    const iconDivRef = react_1.useRef(null);
+    const [focused, setFocused] = react_1.useState(false);
     const parentDivRef = react_1.useRef(null);
-    const size = use_element_size_1.useElementSize(currentRef);
+    const inputRef = react_1.useRef(null);
     const hover = use_hover_state_1.useHoverState(parentDivRef);
-    const hoverOrDragging = hover || dragging;
+    const isMutedOrZero = mediaMuted || mediaVolume === 0;
+    const onVolumeChange = (e) => {
+        setMediaVolume(parseFloat(e.target.value));
+    };
+    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 onClick = react_1.useCallback(() => {
@@ -77,70 +95,6 @@ if (mediaVolume === 0) {
     }, [mediaVolume, setMediaMuted, setMediaVolume]);
-    const onPointerDown = react_1.useCallback((e) => {
-        if (!size) {
-            throw new Error('Player has no size');
-        }
-        const _volume = getVolumeFromX(e.clientX - size.left - KNOB_SIZE / 2, size.width - KNOB_SIZE);
-        setMediaVolume(_volume);
-        if (_volume > 0) {
-            setMediaMuted(false);
-        }
-        setDragging(true);
-    }, [setMediaMuted, setMediaVolume, size]);
-    const onPointerMove = react_1.useCallback((e) => {
-        if (!size) {
-            throw new Error('Player has no size');
-        }
-        if (!dragging)
-            return;
-        const _volume = getVolumeFromX(e.clientX - size.left - KNOB_SIZE / 2, size.width - KNOB_SIZE);
-        setMediaVolume(_volume);
-        if (_volume > 0) {
-            setMediaMuted(false);
-        }
-    }, [dragging, setMediaMuted, setMediaVolume, size]);
-    const onPointerUp = react_1.useCallback(() => {
-        setDragging(false);
-    }, []);
-    react_1.useEffect(() => {
-        if (!dragging) {
-            return;
-        }
-        window.addEventListener('pointermove', onPointerMove);
-        window.addEventListener('pointerup', onPointerUp);
-        return () => {
-            window.removeEventListener('pointermove', onPointerMove);
-            window.removeEventListener('pointerup', onPointerUp);
-        };
-    }, [currentRef, dragging, onPointerMove, onPointerUp, onPointerDown]);
-    const knobStyle = react_1.useMemo(() => {
-        var _a;
-        return {
-            height: KNOB_SIZE,
-            width: KNOB_SIZE,
-            borderRadius: KNOB_SIZE / 2,
-            position: 'absolute',
-            top: VERTICAL_PADDING - KNOB_SIZE / 2 + 5 / 2,
-            backgroundColor: 'white',
-            left: mediaMuted
-                ? 0
-                : Math.max(0, mediaVolume * (((_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : 0) - KNOB_SIZE)),
-            boxShadow: '0 0 2px black',
-            opacity: Number(hoverOrDragging),
-        };
-    }, [hoverOrDragging, mediaMuted, mediaVolume, size === null || size === void 0 ? void 0 : size.width]);
-    const fillStyle = react_1.useMemo(() => {
-        return {
-            height: BAR_HEIGHT,
-            backgroundColor: 'rgba(255, 255, 255, 1)',
-            width: mediaMuted ? 0 : (mediaVolume / 1) * 100 + '%',
-            borderRadius: BAR_HEIGHT / 2,
-        };
-    }, [mediaMuted, mediaVolume]);
-    const isMutedOrZero = mediaMuted || mediaVolume === 0;
-    return (jsx_runtime_1.jsxs("div", Object.assign({ ref: parentDivRef, style: parentDivStyle }, { children: [jsx_runtime_1.jsx("div", Object.assign({ ref: iconDivRef, role: "button", "aria-label": isMutedOrZero ? 'Unmute sound' : 'Mute sound', title: isMutedOrZero ? 'Unmute sound' : 'Mute sound', onClick: onClick, style: volumeContainer }, { children: isMutedOrZero ? jsx_runtime_1.jsx(icons_1.VolumeOffIcon, {}, void 0) : jsx_runtime_1.jsx(icons_1.VolumeOnIcon, {}, void 0) }), void 0),
-            jsx_runtime_1.jsx("div", { style: xSpacer }, void 0),
-            jsx_runtime_1.jsx("div", Object.assign({ ref: currentRef, onPointerDown: onPointerDown, style: containerStyle }, { children: hoverOrDragging ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx("div", Object.assign({ style: barBackground }, { children: jsx_runtime_1.jsx("div", { style: fillStyle }, void 0) }), void 0),
-                        jsx_runtime_1.jsx("div", { style: knobStyle }, void 0)] }, void 0)) : null }), void 0)] }), void 0));
+    return (jsx_runtime_1.jsxs("div", Object.assign({ ref: parentDivRef, style: parentDivStyle }, { children: [jsx_runtime_1.jsx("button", Object.assign({ "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 ? jsx_runtime_1.jsx(icons_1.VolumeOffIcon, {}, void 0) : jsx_runtime_1.jsx(icons_1.VolumeOnIcon, {}, void 0) }), void 0),
+            (focused || hover) && !mediaMuted ? (jsx_runtime_1.jsx("input", { ref: inputRef, "aria-label": "Change volume", className: player_css_classname_1.VOLUME_SLIDER_INPUT_CSS_CLASSNAME, max: 1, min: 0, onBlur: () => setFocused(false), onChange: onVolumeChange, step: 0.01, type: "range", value: mediaVolume }, void 0)) : null] }), void 0));
 };
 exports.MediaVolumeSlider = MediaVolumeSlider;
 //# sourceMappingURL=MediaVolumeSlider.js.map

dist/player-css-classname.d.ts

 export declare const PLAYER_CSS_CLASSNAME = "__remotion-player";
+export declare const VOLUME_SLIDER_INPUT_CSS_CLASSNAME: string;
 //# sourceMappingURL=player-css-classname.d.ts.map

dist/player-css-classname.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PLAYER_CSS_CLASSNAME = void 0;
+exports.VOLUME_SLIDER_INPUT_CSS_CLASSNAME = exports.PLAYER_CSS_CLASSNAME = void 0;
 exports.PLAYER_CSS_CLASSNAME = '__remotion-player';
+exports.VOLUME_SLIDER_INPUT_CSS_CLASSNAME = exports.PLAYER_CSS_CLASSNAME.concat('_volume-slider-input');
 //# sourceMappingURL=player-css-classname.js.map

dist/Player.d.ts

@@ -22,4 +22,5 @@ import React, { MutableRefObject } from 'react';
     doubleClickToFullscreen?: boolean;
+    spaceKeyToPlayOrPause?: boolean;
 } & PropsIfHasProps<T> & CompProps<T>;
-export declare const PlayerFn: <T>({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls, loop, autoPlay, showVolumeControls, allowFullscreen, clickToPlay, doubleClickToFullscreen, ...componentProps }: PlayerProps<T>, ref: MutableRefObject<PlayerRef>) => JSX.Element;
+export declare const PlayerFn: <T>({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls, loop, autoPlay, showVolumeControls, allowFullscreen, clickToPlay, doubleClickToFullscreen, spaceKeyToPlayOrPause, ...componentProps }: PlayerProps<T>, ref: MutableRefObject<PlayerRef>) => JSX.Element;
 declare module 'react' {
@@ -26,0 +27,0 @@ function forwardRef<T, P = {}>(render: (props: P, ref: React.MutableRefObject<T>) => React.ReactElement | null): (props: P & React.RefAttributes<T>) => React.ReactElement | null;

dist/Player.js

@@ -16,3 +16,3 @@ "use strict";
 remotion_1.Internals.CSSUtils.injectCSS(remotion_1.Internals.CSSUtils.makeDefaultCSS(`.${player_css_classname_1.PLAYER_CSS_CLASSNAME}`));
-const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls = false, loop = false, autoPlay = false, showVolumeControls = true, allowFullscreen = true, clickToPlay, doubleClickToFullscreen = false, ...componentProps }, ref) => {
+const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls = false, loop = false, autoPlay = false, showVolumeControls = true, allowFullscreen = true, clickToPlay, doubleClickToFullscreen = false, spaceKeyToPlayOrPause = true, ...componentProps }, ref) => {
     react_1.useLayoutEffect(() => {
@@ -65,2 +65,6 @@ if (typeof window !== 'undefined') {
     }
+    if (typeof spaceKeyToPlayOrPause !== 'boolean' &&
+        typeof spaceKeyToPlayOrPause !== 'undefined') {
+        throw new TypeError(`'spaceKeyToPlayOrPause' must be a boolean or undefined but got '${typeof spaceKeyToPlayOrPause}' instead`);
+    }
     const setMediaVolumeAndPersist = react_1.useCallback((vol) => {
@@ -135,3 +139,3 @@ setMediaVolume(vol);
                                     ? clickToPlay
-                                    : Boolean(controls), showVolumeControls: Boolean(showVolumeControls), setMediaVolume: setMediaVolumeAndPersist, mediaVolume: mediaVolume, mediaMuted: mediaMuted, doubleClickToFullscreen: Boolean(doubleClickToFullscreen), setMediaMuted: setMediaMuted }, void 0) }), void 0) }), void 0) }), void 0) }), void 0) }), void 0) }), void 0));
+                                    : Boolean(controls), showVolumeControls: Boolean(showVolumeControls), setMediaVolume: setMediaVolumeAndPersist, mediaVolume: mediaVolume, mediaMuted: mediaMuted, doubleClickToFullscreen: Boolean(doubleClickToFullscreen), setMediaMuted: setMediaMuted, spaceKeyToPlayOrPause: Boolean(spaceKeyToPlayOrPause) }, void 0) }), void 0) }), void 0) }), void 0) }), void 0) }), void 0) }), void 0));
 };
@@ -138,0 +142,0 @@ exports.PlayerFn = PlayerFn;

dist/PlayerControls.d.ts

@@ -13,3 +13,4 @@ import React, { MouseEventHandler } from 'react';
     onExitFullscreenButtonClick: MouseEventHandler<HTMLButtonElement>;
+    spaceKeyToPlayOrPause: boolean;
 }>;
 //# sourceMappingURL=PlayerControls.d.ts.map

dist/PlayerControls.js

@@ -66,3 +66,4 @@ "use strict";
 };
-const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, }) => {
+const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, }) => {
+    const playButtonRef = react_1.useRef(null);
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
@@ -77,3 +78,9 @@ const containerCss = react_1.useMemo(() => {
     }, [hovered, player.playing]);
-    return (jsx_runtime_1.jsxs("div", Object.assign({ style: containerCss }, { children: [jsx_runtime_1.jsxs("div", Object.assign({ style: controlsRow }, { children: [jsx_runtime_1.jsxs("div", Object.assign({ style: leftPartStyle }, { children: [jsx_runtime_1.jsx("button", Object.assign({ type: "button", style: buttonStyle, onClick: player.playing ? player.pause : player.play, "aria-label": player.playing ? 'Pause video' : 'Play video', title: player.playing ? 'Pause video' : 'Play video' }, { children: player.playing ? jsx_runtime_1.jsx(icons_1.PauseIcon, {}, void 0) : jsx_runtime_1.jsx(icons_1.PlayIcon, {}, void 0) }), void 0),
+    react_1.useEffect(() => {
+        if (playButtonRef.current && spaceKeyToPlayOrPause) {
+            // This switches focus to play button when player.playing flag changes
+            playButtonRef.current.focus();
+        }
+    }, [player.playing, spaceKeyToPlayOrPause]);
+    return (jsx_runtime_1.jsxs("div", Object.assign({ style: containerCss }, { children: [jsx_runtime_1.jsxs("div", Object.assign({ style: controlsRow }, { children: [jsx_runtime_1.jsxs("div", Object.assign({ style: leftPartStyle }, { children: [jsx_runtime_1.jsx("button", Object.assign({ ref: playButtonRef, type: "button", style: buttonStyle, onClick: player.playing ? player.pause : player.play, "aria-label": player.playing ? 'Pause video' : 'Play video', title: player.playing ? 'Pause video' : 'Play video' }, { children: player.playing ? jsx_runtime_1.jsx(icons_1.PauseIcon, {}, void 0) : jsx_runtime_1.jsx(icons_1.PlayIcon, {}, void 0) }), void 0),
                             showVolumeControls ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx("div", { style: xSpacer }, void 0),
@@ -80,0 +87,0 @@ jsx_runtime_1.jsx(MediaVolumeSlider_1.MediaVolumeSlider, {}, void 0)] }, void 0)) : null,

dist/PlayerSeekBar.js

@@ -29,2 +29,3 @@ "use strict";
     position: 'relative',
+    touchAction: 'none',
 };
@@ -40,3 +41,3 @@ const barBackground = {
     const barHovered = use_hover_state_1.useHoverState(containerRef);
-    const size = use_element_size_1.useElementSize(containerRef);
+    const size = use_element_size_1.useElementSize(containerRef, { triggerOnWindowResize: true });
     const { seek, play, pause, playing } = use_player_1.usePlayer();
@@ -43,0 +44,0 @@ const frame = remotion_1.Internals.Timeline.useTimelinePosition();

dist/PlayerUI.d.ts

@@ -14,2 +14,3 @@ import React from 'react';
     doubleClickToFullscreen: boolean;
+    spaceKeyToPlayOrPause: boolean;
     setMediaVolume: (v: number) => void;
@@ -16,0 +17,0 @@ setMediaMuted: (v: boolean) => void;

dist/PlayerUI.js

@@ -18,3 +18,3 @@ "use strict";
 const use_element_size_1 = require("./utils/use-element-size");
-const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps, clickToPlay, showVolumeControls, mediaVolume, mediaMuted, doubleClickToFullscreen, setMediaMuted, setMediaVolume, }, ref) => {
+const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps, clickToPlay, showVolumeControls, mediaVolume, mediaMuted, doubleClickToFullscreen, setMediaMuted, setMediaVolume, spaceKeyToPlayOrPause, }, ref) => {
     var _a, _b;
@@ -25,3 +25,3 @@ const config = remotion_1.Internals.useUnsafeVideoConfig();
     const hovered = use_hover_state_1.useHoverState(container);
-    const canvasSize = use_element_size_1.useElementSize(container);
+    const canvasSize = use_element_size_1.useElementSize(container, { triggerOnWindowResize: false });
     const [hasPausedToResume, setHasPausedToResume] = react_1.useState(false);
@@ -232,3 +232,3 @@ const [shouldAutoplay, setShouldAutoPlay] = react_1.useState(autoPlay);
     const content = (jsx_runtime_1.jsxs("div", Object.assign({ ref: container, style: outerStyle }, { children: [jsx_runtime_1.jsx("div", Object.assign({ style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined }, { children: jsx_runtime_1.jsx("div", Object.assign({ style: containerStyle, className: player_css_classname_1.PLAYER_CSS_CLASSNAME }, { children: VideoComponent ? (jsx_runtime_1.jsx(error_boundary_1.ErrorBoundary, Object.assign({ onError: onError }, { children: jsx_runtime_1.jsx(VideoComponent, Object.assign({}, ((_a = video === null || video === void 0 ? void 0 : video.props) !== null && _a !== void 0 ? _a : {}), ((_b = inputProps) !== null && _b !== void 0 ? _b : {})), void 0) }), void 0)) : null }), void 0) }), void 0),
-            controls ? (jsx_runtime_1.jsx(PlayerControls_1.Controls, { fps: config.fps, durationInFrames: config.durationInFrames, hovered: hovered, player: player, onFullscreenButtonClick: onFullscreenButtonClick, isFullscreen: isFullscreen, allowFullscreen: allowFullscreen, showVolumeControls: showVolumeControls, onExitFullscreenButtonClick: onExitFullscreenButtonClick }, void 0)) : null] }), void 0));
+            controls ? (jsx_runtime_1.jsx(PlayerControls_1.Controls, { fps: config.fps, durationInFrames: config.durationInFrames, hovered: hovered, player: player, onFullscreenButtonClick: onFullscreenButtonClick, isFullscreen: isFullscreen, allowFullscreen: allowFullscreen, showVolumeControls: showVolumeControls, onExitFullscreenButtonClick: onExitFullscreenButtonClick, spaceKeyToPlayOrPause: spaceKeyToPlayOrPause }, void 0)) : null] }), void 0));
     // Don't render suspense on Node.js
@@ -235,0 +235,0 @@ if (is_node_1.IS_NODE) {

dist/utils/use-element-size.d.ts

@@ -7,3 +7,5 @@ export declare type Size = {
 };
-export declare const useElementSize: (ref: React.RefObject<HTMLDivElement>) => Size | null;
+export declare const useElementSize: (ref: React.RefObject<HTMLDivElement>, options: {
+    triggerOnWindowResize: boolean;
+}) => Size | null;
 //# sourceMappingURL=use-element-size.d.ts.map

dist/utils/use-element-size.js

@@ -5,3 +5,3 @@ "use strict";
 const react_1 = require("react");
-const useElementSize = (ref) => {
+const useElementSize = (ref, options) => {
     const [size, setSize] = react_1.useState(null);
@@ -57,2 +57,11 @@ const observer = react_1.useMemo(() => {
     }, [observer, ref, updateSize]);
+    react_1.useEffect(() => {
+        if (!options.triggerOnWindowResize) {
+            return;
+        }
+        window.addEventListener('resize', updateSize);
+        return () => {
+            window.removeEventListener('resize', updateSize);
+        };
+    }, [options.triggerOnWindowResize, updateSize]);
     return size;
@@ -59,0 +68,0 @@ };

package.json

 {
 	"name": "@remotion/player",
-	"version": "2.2.0",
+	"version": "2.3.0-alpha.424c97fb",
 	"description": "Remotion Player",
@@ -27,3 +27,3 @@ "main": "dist/index.js",
 	"dependencies": {
-		"remotion": "^2.2.0"
+		"remotion": "2.3.0-alpha.424c97fb"
 	},
@@ -30,0 +30,0 @@ "peerDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

142791

decreased by-1.14%

Lines of code

1843

decreased by-0.91%

Number of low quality alerts

2

increased by100%

Dependency changes

• + Addedobject-assign@4.1.1(transitive)

• + Addedreact@17.0.2(transitive)

• + Addedreact-dom@17.0.2(transitive)

• + Addedremotion@2.3.0-alpha.424c97fb(transitive)

• + Addedscheduler@0.20.2(transitive)

• - Removedremotion@2.6.16(transitive)

• Updatedremotion@2.3.0-alpha.424c97fb