@remotion/player 4.0.172 → 4.0.174

package/dist/esm/index.mjs

@@ -253,14 +253,15 @@ var calculateCanvasTransformation = ({
 var calculateOuterStyle = ({
   config,
   style,
-  canvasSize
+  canvasSize,
+  overflowVisible
 }) => {
   if (!config) {
     return {};
   }
   return {
     position: "relative",
-    overflow: "hidden",
+    overflow: overflowVisible ? "visible" : "hidden",
     ...calculatePlayerSize({
       compositionHeight: config.height,
       compositionWidth: config.width,
@@ -275,7 +276,8 @@ var calculateContainerStyle = ({
   config,
   canvasSize,
   layout,
-  scale
+  scale,
+  overflowVisible
 }) => {
   if (!config || !canvasSize || !layout) {
     return {};
@@ -288,13 +290,14 @@ var calculateContainerStyle = ({
     transform: `scale(${scale})`,
     marginLeft: layout.xCorrection,
     marginTop: layout.yCorrection,
-    overflow: "hidden"
+    overflow: overflowVisible ? "visible" : "hidden"
   };
 };
 var calculateOuter = ({
   layout,
   scale,
-  config
+  config,
+  overflowVisible
 }) => {
   if (!layout || !config) {
     return {};
@@ -308,7 +311,7 @@ var calculateOuter = ({
     position: "absolute",
     left: centerX,
     top: centerY,
-    overflow: "hidden"
+    overflow: overflowVisible ? "visible" : "hidden"
   };
 };
 
@@ -1455,6 +1458,7 @@ var KNOB_SIZE2 = 12;
 var VERTICAL_PADDING = 4;
 var containerStyle = {
   userSelect: "none",
+  WebkitUserSelect: "none",
   paddingTop: VERTICAL_PADDING,
   paddingBottom: VERTICAL_PADDING,
   boxSizing: "border-box",
@@ -1692,12 +1696,14 @@ var controlsRow = {
   width: "100%",
   alignItems: "center",
   justifyContent: "center",
-  userSelect: "none"
+  userSelect: "none",
+  WebkitUserSelect: "none"
 };
 var leftPartStyle = {
   display: "flex",
   flexDirection: "row",
   userSelect: "none",
+  WebkitUserSelect: "none",
   alignItems: "center"
 };
 var xSpacer = {
@@ -1733,7 +1739,7 @@ var Controls = ({
   containerRef,
   buffering,
   hideControlsWhenPointerDoesntMove,
-  onPointerUp,
+  onPointerDown,
   onDoubleClick
 }) => {
   const playButtonRef = useRef7(null);
@@ -1823,11 +1829,11 @@ var Controls = ({
   }, [showPlaybackRateControl]);
   const ref = useRef7(null);
   const flexRef = useRef7(null);
-  const onPointerUpIfContainer = useCallback6((e) => {
+  const onPointerDownIfContainer = useCallback6((e) => {
     if (e.target === ref.current || e.target === flexRef.current) {
-      onPointerUp?.(e);
+      onPointerDown?.(e);
     }
-  }, [onPointerUp]);
+  }, [onPointerDown]);
   const onDoubleClickIfContainer = useCallback6((e) => {
     if (e.target === ref.current || e.target === flexRef.current) {
       onDoubleClick?.(e);
@@ -1836,7 +1842,7 @@ var Controls = ({
   return jsxs6("div", {
     ref,
     style: containerCss,
-    onPointerUp: onPointerUpIfContainer,
+    onPointerDown: onPointerDownIfContainer,
     onDoubleClick: onDoubleClickIfContainer,
     children: [
       jsxs6("div", {
@@ -2024,7 +2030,7 @@ var useCancellablePromises = () => {
 var useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFullscreen) => {
   const api = useCancellablePromises();
   const handleClick = useCallback8(async (e) => {
-    if (e.nativeEvent.pointerType === "touch") {
+    if (e instanceof PointerEvent ? e.pointerType === "touch" : e.nativeEvent.pointerType === "touch") {
       onClick(e);
       return;
     }
@@ -2043,18 +2049,25 @@ var useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFull
       }
     }
   }, [api, onClick]);
+  const handlePointerDown = useCallback8(() => {
+    document.addEventListener("pointerup", (newEvt) => {
+      handleClick(newEvt);
+    }, {
+      once: true
+    });
+  }, [handleClick]);
   const handleDoubleClick = useCallback8(() => {
     api.clearPendingPromises();
     onDoubleClick();
   }, [api, onDoubleClick]);
   const returnValue = useMemo9(() => {
     if (!doubleClickToFullscreen) {
-      return [onClick, () => {
+      return { handlePointerDown: onClick, handleDoubleClick: () => {
         return;
-      }];
+      } };
     }
-    return [handleClick, handleDoubleClick];
-  }, [doubleClickToFullscreen, handleClick, handleDoubleClick, onClick]);
+    return { handlePointerDown, handleDoubleClick };
+  }, [doubleClickToFullscreen, handleDoubleClick, handlePointerDown, onClick]);
   return returnValue;
 };
 
@@ -2099,7 +2112,8 @@ var PlayerUI = ({
   showPlaybackRateControl,
   posterFillMode,
   bufferStateDelayInMilliseconds,
-  hideControlsWhenPointerDoesntMove
+  hideControlsWhenPointerDoesntMove,
+  overflowVisible
 }, ref) => {
   const config = Internals10.useUnsafeVideoConfig();
   const video = Internals10.useVideo();
@@ -2348,14 +2362,20 @@ var PlayerUI = ({
   ]);
   const VideoComponent = video ? video.component : null;
   const outerStyle = useMemo10(() => {
-    return calculateOuterStyle({ canvasSize, config, style });
-  }, [canvasSize, config, style]);
+    return calculateOuterStyle({ canvasSize, config, style, overflowVisible });
+  }, [canvasSize, config, overflowVisible, style]);
   const outer = useMemo10(() => {
-    return calculateOuter({ config, layout, scale });
-  }, [config, layout, scale]);
+    return calculateOuter({ config, layout, scale, overflowVisible });
+  }, [config, layout, overflowVisible, scale]);
   const containerStyle3 = useMemo10(() => {
-    return calculateContainerStyle({ canvasSize, config, layout, scale });
-  }, [canvasSize, config, layout, scale]);
+    return calculateContainerStyle({
+      canvasSize,
+      config,
+      layout,
+      scale,
+      overflowVisible
+    });
+  }, [canvasSize, config, layout, overflowVisible, scale]);
   const onError = useCallback9((error) => {
     player.pause();
     player.emitter.dispatchError(error);
@@ -2384,7 +2404,7 @@ var PlayerUI = ({
       requestFullscreen();
     }
   }, [exitFullscreen, isFullscreen, requestFullscreen]);
-  const [handleClick, handleDoubleClick] = useClickPreventionOnDoubleClick(onSingleClick, onDoubleClick, doubleClickToFullscreen && allowFullscreen && supportsFullScreen);
+  const { handlePointerDown, handleDoubleClick } = useClickPreventionOnDoubleClick(onSingleClick, onDoubleClick, doubleClickToFullscreen && allowFullscreen && supportsFullScreen);
   useEffect11(() => {
     if (shouldAutoplay) {
       player.play();
@@ -2426,7 +2446,7 @@ var PlayerUI = ({
     children: [
       jsx10("div", {
         style: outer,
-        onPointerUp: clickToPlay ? handleClick : undefined,
+        onPointerDown: clickToPlay ? handlePointerDown : undefined,
         onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined,
         children: jsxs7("div", {
           style: containerStyle3,
@@ -2451,7 +2471,7 @@ var PlayerUI = ({
                 width: config.width,
                 height: config.height
               },
-              onPointerUp: clickToPlay ? handleClick : undefined,
+              onPointerDown: clickToPlay ? handlePointerDown : undefined,
               onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined,
               children: poster
             }) : null
@@ -2460,7 +2480,7 @@ var PlayerUI = ({
       }),
       shouldShowPoster && posterFillMode === "player-size" ? jsx10("div", {
         style: outer,
-        onPointerUp: clickToPlay ? handleClick : undefined,
+        onPointerDown: clickToPlay ? handlePointerDown : undefined,
         onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined,
         children: poster
       }) : null,
@@ -2488,7 +2508,7 @@ var PlayerUI = ({
         buffering: showBufferIndicator,
         hideControlsWhenPointerDoesntMove,
         onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined,
-        onPointerUp: clickToPlay ? handleClick : undefined
+        onPointerDown: clickToPlay ? handlePointerDown : undefined
       }) : null
     ]
   });
@@ -2794,6 +2814,7 @@ var PlayerFn = ({
   posterFillMode = "player-size",
   bufferStateDelayInMilliseconds,
   hideControlsWhenPointerDoesntMove = true,
+  overflowVisible = false,
   ...componentProps
 }, ref) => {
   if (typeof window !== "undefined") {
@@ -2943,7 +2964,8 @@ var PlayerFn = ({
             alwaysShowControls,
             showPlaybackRateControl,
             bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds ?? 300,
-            hideControlsWhenPointerDoesntMove
+            hideControlsWhenPointerDoesntMove,
+            overflowVisible
           })
         })
       })
@@ -2999,7 +3021,7 @@ if (reactVersion2 === "0") {
   throw new Error(`Version ${reactVersion2} of "react" is not supported by Remotion`);
 }
 var doesReactVersionSupportSuspense2 = parseInt(reactVersion2, 10) >= 18;
-var ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, className: className2 }, ref) => {
+var ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, className: className2, overflowVisible }, ref) => {
   const config = Internals13.useUnsafeVideoConfig();
   const video = Internals13.useVideo();
   const container = useRef11(null);
@@ -3030,19 +3052,20 @@ var ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, className:
   }, [scale, thumbnail.emitter]);
   const VideoComponent = video ? video.component : null;
   const outerStyle = useMemo14(() => {
-    return calculateOuterStyle({ config, style, canvasSize });
-  }, [canvasSize, config, style]);
+    return calculateOuterStyle({ config, style, canvasSize, overflowVisible });
+  }, [canvasSize, config, overflowVisible, style]);
   const outer = useMemo14(() => {
-    return calculateOuter({ config, layout, scale });
-  }, [config, layout, scale]);
+    return calculateOuter({ config, layout, scale, overflowVisible });
+  }, [config, layout, overflowVisible, scale]);
   const containerStyle3 = useMemo14(() => {
     return calculateContainerStyle({
       canvasSize,
       config,
       layout,
-      scale
+      scale,
+      overflowVisible
     });
-  }, [canvasSize, config, layout, scale]);
+  }, [canvasSize, config, layout, overflowVisible, scale]);
   const onError = useCallback11((error) => {
     thumbnail.emitter.dispatchError(error);
   }, [thumbnail.emitter]);
@@ -3115,6 +3138,7 @@ var ThumbnailFn = ({
   className: className2,
   errorFallback = () => "\u26A0\uFE0F",
   renderLoading,
+  overflowVisible = false,
   ...componentProps
 }, ref) => {
   if (typeof window !== "undefined") {
@@ -3166,7 +3190,8 @@ var ThumbnailFn = ({
           errorFallback,
           inputProps: passedInputProps,
           renderLoading,
-          style
+          style,
+          overflowVisible
         })
       })
     })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/player",
-  "version": "4.0.172",
+  "version": "4.0.174",
   "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.172"
+    "remotion": "4.0.174"
   },
   "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;
-}>;

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

@@ -1,129 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useMemo, useRef, useState } from 'react';
-import { Internals, random } from 'remotion';
-import { ICON_SIZE, VolumeOffIcon, VolumeOnIcon } from './icons.js';
-import { useHoverState } from './use-hover-state.js';
-const BAR_HEIGHT = 5;
-const KNOB_SIZE = 12;
-export const VOLUME_SLIDER_WIDTH = 100;
-export const MediaVolumeSlider = ({ displayVerticalVolumeSlider }) => {
-    const [mediaMuted, setMediaMuted] = Internals.useMediaMutedState();
-    const [mediaVolume, setMediaVolume] = Internals.useMediaVolumeState();
-    const [focused, setFocused] = useState(false);
-    const parentDivRef = useRef(null);
-    const inputRef = useRef(null);
-    const hover = 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.useId === 'undefined' ? 'volume-slider' : React.useId();
-    const [randomClass] = useState(() => `__remotion-volume-slider-${random(randomId)}`.replace('.', ''));
-    const isMutedOrZero = mediaMuted || mediaVolume === 0;
-    const onVolumeChange = 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 = useCallback(() => {
-        if (isVolume0) {
-            setMediaVolume(1);
-            setMediaMuted(false);
-            return;
-        }
-        setMediaMuted((mute) => !mute);
-    }, [isVolume0, setMediaMuted, setMediaVolume]);
-    const parentDivStyle = useMemo(() => {
-        return {
-            display: 'inline-flex',
-            background: 'none',
-            border: 'none',
-            justifyContent: 'center',
-            alignItems: 'center',
-            touchAction: 'none',
-            ...(displayVerticalVolumeSlider && { position: 'relative' }),
-        };
-    }, [displayVerticalVolumeSlider]);
-    const volumeContainer = useMemo(() => {
-        return {
-            display: 'inline',
-            width: ICON_SIZE,
-            height: ICON_SIZE,
-            cursor: 'pointer',
-            appearance: 'none',
-            background: 'none',
-            border: 'none',
-            padding: 0,
-        };
-    }, []);
-    const sliderContainer = useMemo(() => {
-        const paddingLeft = 5;
-        const common = {
-            paddingLeft,
-            height: ICON_SIZE,
-            width: VOLUME_SLIDER_WIDTH,
-        };
-        if (displayVerticalVolumeSlider) {
-            return {
-                ...common,
-                position: 'absolute',
-                transform: `rotate(-90deg) translateX(${VOLUME_SLIDER_WIDTH / 2 + ICON_SIZE / 2}px)`,
-            };
-        }
-        return {
-            ...common,
-        };
-    }, [displayVerticalVolumeSlider]);
-    const inputStyle = useMemo(() => {
-        const commonStyle = {
-            WebkitAppearance: 'none',
-            backgroundColor: 'rgba(255, 255, 255, 0.5)',
-            borderRadius: BAR_HEIGHT / 2,
-            cursor: 'pointer',
-            height: BAR_HEIGHT,
-            width: VOLUME_SLIDER_WIDTH,
-            backgroundImage: `linear-gradient(
-				to right,
-				white ${mediaVolume * 100}%, rgba(255, 255, 255, 0) ${mediaVolume * 100}%
-			)`,
-        };
-        if (displayVerticalVolumeSlider) {
-            return {
-                ...commonStyle,
-                bottom: ICON_SIZE + VOLUME_SLIDER_WIDTH / 2,
-            };
-        }
-        return commonStyle;
-    }, [displayVerticalVolumeSlider, mediaVolume]);
-    const sliderStyle = `
-	.${randomClass}::-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;
-	}
-
-	.${randomClass}::-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;
-	}
-`;
-    return (_jsxs("div", { ref: parentDivRef, style: parentDivStyle, children: [_jsx("style", { 
-                // eslint-disable-next-line react/no-danger
-                dangerouslySetInnerHTML: {
-                    __html: sliderStyle,
-                } }), _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 ? _jsx(VolumeOffIcon, {}) : _jsx(VolumeOnIcon, {}) }), (focused || hover) && !mediaMuted && !Internals.isIosSafari() ? (_jsx("div", { style: sliderContainer, children: _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] }));
-};

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

@@ -1,8 +0,0 @@
-import React from 'react';
-import type { Size } from './utils/use-element-size.js';
-export declare const Checkmark: () => import("react/jsx-runtime.js").JSX.Element;
-export declare const playerButtonStyle: React.CSSProperties;
-export declare const PlaybackrateControl: React.FC<{
-    playbackRates: number[];
-    canvasSize: Size;
-}>;