Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@remotion/player
Advanced tools
@remotion/player - npm Package Compare versions
Comparing version 2.4.0-alpha.90748bec to 2.4.0-alpha.91579e8b
@@ -32,3 +32,3 @@ "use strict"; | ||
| // You can render any custom fallback UI | ||
| return jsx_runtime_1.jsx("div", Object.assign({ style: errorStyle }, { children: "\u26A0\uFE0F" }), void 0); | ||
| return (0, jsx_runtime_1.jsx)("div", Object.assign({ style: errorStyle }, { children: "\u26A0\uFE0F" }), void 0); | ||
| } | ||
@@ -35,0 +35,0 @@ return this.props.children; |
@@ -11,8 +11,7 @@ "use strict"; | ||
| const PlayIcon = () => { | ||
| return (jsx_runtime_1.jsx("svg", Object.assign({ width: exports.ICON_SIZE, height: exports.ICON_SIZE, viewBox: "-100 -100 400 400", style: rotate }, { children: jsx_runtime_1.jsx("path", { fill: "#fff", stroke: "#fff", strokeWidth: "100", strokeLinejoin: "round", d: "M 2 172 a 196 100 0 0 0 195 5 A 196 240 0 0 0 100 2.259 A 196 240 0 0 0 2 172 z" }, void 0) }), void 0)); | ||
| return ((0, jsx_runtime_1.jsx)("svg", Object.assign({ width: exports.ICON_SIZE, height: exports.ICON_SIZE, viewBox: "-100 -100 400 400", style: rotate }, { children: (0, jsx_runtime_1.jsx)("path", { fill: "#fff", stroke: "#fff", strokeWidth: "100", strokeLinejoin: "round", d: "M 2 172 a 196 100 0 0 0 195 5 A 196 240 0 0 0 100 2.259 A 196 240 0 0 0 2 172 z" }, void 0) }), void 0)); | ||
| }; | ||
| exports.PlayIcon = PlayIcon; | ||
| const PauseIcon = () => { | ||
| return (jsx_runtime_1.jsxs("svg", Object.assign({ 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" }, void 0), | ||
| jsx_runtime_1.jsx("rect", { x: "55", y: "20", width: "20", height: "60", fill: "#fff", ry: "5", rx: "5" }, void 0)] }), void 0)); | ||
| return ((0, jsx_runtime_1.jsxs)("svg", Object.assign({ 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" }, void 0), (0, jsx_runtime_1.jsx)("rect", { x: "55", y: "20", width: "20", height: "60", fill: "#fff", ry: "5", rx: "5" }, void 0)] }), void 0)); | ||
| }; | ||
@@ -26,18 +25,15 @@ exports.PauseIcon = PauseIcon; | ||
| const inset = minimized ? strokeWidth * 2 : strokeWidth * 1.6; | ||
| return (jsx_runtime_1.jsxs("svg", Object.assign({ viewBox: `0 0 ${viewSize} ${viewSize}`, height: fullscreenIconSize, width: fullscreenIconSize }, { children: [jsx_runtime_1.jsx("path", { d: ` | ||
| return ((0, jsx_runtime_1.jsxs)("svg", Object.assign({ viewBox: `0 0 ${viewSize} ${viewSize}`, height: fullscreenIconSize, width: fullscreenIconSize }, { children: [(0, jsx_runtime_1.jsx)("path", { d: ` | ||
| M ${out} ${inset} | ||
| L ${middleInset} ${middleInset} | ||
| L ${inset} ${out} | ||
| `, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }, void 0), | ||
| jsx_runtime_1.jsx("path", { d: ` | ||
| `, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: ` | ||
| M ${viewSize - out} ${inset} | ||
| L ${viewSize - middleInset} ${middleInset} | ||
| L ${viewSize - inset} ${out} | ||
| `, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }, void 0), | ||
| jsx_runtime_1.jsx("path", { d: ` | ||
| `, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: ` | ||
| M ${out} ${viewSize - inset} | ||
| L ${middleInset} ${viewSize - middleInset} | ||
| L ${inset} ${viewSize - out} | ||
| `, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }, void 0), | ||
| jsx_runtime_1.jsx("path", { d: ` | ||
| `, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: ` | ||
| M ${viewSize - out} ${viewSize - inset} | ||
@@ -50,9 +46,9 @@ L ${viewSize - middleInset} ${viewSize - middleInset} | ||
| const VolumeOffIcon = () => { | ||
| return (jsx_runtime_1.jsx("svg", Object.assign({ width: exports.ICON_SIZE, height: exports.ICON_SIZE, viewBox: "0 0 24 24" }, { children: 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" }, void 0) }), void 0)); | ||
| return ((0, jsx_runtime_1.jsx)("svg", Object.assign({ 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" }, void 0) }), void 0)); | ||
| }; | ||
| exports.VolumeOffIcon = VolumeOffIcon; | ||
| const VolumeOnIcon = () => { | ||
| return (jsx_runtime_1.jsx("svg", Object.assign({ width: exports.ICON_SIZE, height: exports.ICON_SIZE, viewBox: "0 0 24 24" }, { children: 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" }, void 0) }), void 0)); | ||
| return ((0, jsx_runtime_1.jsx)("svg", Object.assign({ 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" }, void 0) }), void 0)); | ||
| }; | ||
| exports.VolumeOnIcon = VolumeOnIcon; | ||
| //# sourceMappingURL=icons.js.map |
@@ -15,3 +15,3 @@ import { PlayerEmitter } from './event-emitter'; | ||
| playing: boolean; | ||
| play: () => void; | ||
| play: (e?: import("react").SyntheticEvent<Element, Event> | undefined) => void; | ||
| pause: () => void; | ||
@@ -18,0 +18,0 @@ seek: (newFrame: number) => void; |
@@ -66,6 +66,6 @@ "use strict"; | ||
| const [mediaVolume, setMediaVolume] = remotion_1.Internals.useMediaVolumeState(); | ||
| const [focused, setFocused] = react_1.useState(false); | ||
| const parentDivRef = react_1.useRef(null); | ||
| const inputRef = react_1.useRef(null); | ||
| const hover = use_hover_state_1.useHoverState(parentDivRef); | ||
| 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_1.useHoverState)(parentDivRef); | ||
| const isMutedOrZero = mediaMuted || mediaVolume === 0; | ||
@@ -84,3 +84,3 @@ const onVolumeChange = (e) => { | ||
| }; | ||
| const onClick = react_1.useCallback(() => { | ||
| const onClick = (0, react_1.useCallback)(() => { | ||
| if (mediaVolume === 0) { | ||
@@ -93,6 +93,5 @@ setMediaVolume(1); | ||
| }, [mediaVolume, setMediaMuted, setMediaVolume]); | ||
| 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)); | ||
| return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: parentDivRef, style: parentDivStyle }, { children: [(0, 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 ? (0, jsx_runtime_1.jsx)(icons_1.VolumeOffIcon, {}, void 0) : (0, jsx_runtime_1.jsx)(icons_1.VolumeOnIcon, {}, void 0) }), void 0), (focused || hover) && !mediaMuted ? ((0, 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 |
@@ -0,4 +1,5 @@ | ||
| import { SyntheticEvent } from 'react'; | ||
| import { PlayerEmitter } from './event-emitter'; | ||
| export declare type PlayerMethods = { | ||
| play: () => void; | ||
| play: (e?: SyntheticEvent) => void; | ||
| pause: () => void; | ||
@@ -5,0 +6,0 @@ toggle: () => void; |
@@ -18,3 +18,3 @@ "use strict"; | ||
| const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls = false, loop = false, autoPlay = false, showVolumeControls = true, allowFullscreen = true, clickToPlay, doubleClickToFullscreen = false, spaceKeyToPlayOrPause = true, numberOfSharedAudioTags = 5, ...componentProps }, ref) => { | ||
| react_1.useLayoutEffect(() => { | ||
| (0, react_1.useLayoutEffect)(() => { | ||
| if (typeof window !== 'undefined') { | ||
@@ -25,9 +25,9 @@ window.remotion_isPlayer = true; | ||
| const component = remotion_1.Internals.useLazyComponent(componentProps); | ||
| const [frame, setFrame] = react_1.useState(0); | ||
| const [playing, setPlaying] = react_1.useState(false); | ||
| const [rootId] = react_1.useState('player-comp'); | ||
| const [emitter] = react_1.useState(() => new event_emitter_1.PlayerEmitter()); | ||
| const rootRef = react_1.useRef(null); | ||
| const [mediaMuted, setMediaMuted] = react_1.useState(false); | ||
| const [mediaVolume, setMediaVolume] = react_1.useState(volume_persistance_1.getPreferredVolume()); | ||
| const [frame, setFrame] = (0, react_1.useState)(0); | ||
| const [playing, setPlaying] = (0, react_1.useState)(false); | ||
| const [rootId] = (0, react_1.useState)('player-comp'); | ||
| const [emitter] = (0, react_1.useState)(() => new event_emitter_1.PlayerEmitter()); | ||
| const rootRef = (0, react_1.useRef)(null); | ||
| const [mediaMuted, setMediaMuted] = (0, react_1.useState)(false); | ||
| const [mediaVolume, setMediaVolume] = (0, react_1.useState)((0, volume_persistance_1.getPreferredVolume)()); | ||
| if (typeof compositionHeight !== 'number') { | ||
@@ -78,8 +78,8 @@ throw new TypeError(`'compositionHeight' must be a number but got '${typeof compositionHeight}' instead`); | ||
| } | ||
| const setMediaVolumeAndPersist = react_1.useCallback((vol) => { | ||
| const setMediaVolumeAndPersist = (0, react_1.useCallback)((vol) => { | ||
| setMediaVolume(vol); | ||
| volume_persistance_1.persistVolume(vol); | ||
| (0, volume_persistance_1.persistVolume)(vol); | ||
| }, []); | ||
| react_1.useImperativeHandle(ref, () => rootRef.current); | ||
| const timelineContextValue = react_1.useMemo(() => { | ||
| (0, react_1.useImperativeHandle)(ref, () => rootRef.current); | ||
| const timelineContextValue = (0, react_1.useMemo)(() => { | ||
| return { | ||
@@ -92,3 +92,3 @@ frame, | ||
| }, [frame, playing, rootId]); | ||
| const setTimelineContextValue = react_1.useMemo(() => { | ||
| const setTimelineContextValue = (0, react_1.useMemo)(() => { | ||
| return { | ||
@@ -99,3 +99,3 @@ setFrame, | ||
| }, [setFrame]); | ||
| const mediaVolumeContextValue = react_1.useMemo(() => { | ||
| const mediaVolumeContextValue = (0, react_1.useMemo)(() => { | ||
| return { | ||
@@ -106,3 +106,3 @@ mediaMuted, | ||
| }, [mediaMuted, mediaVolume]); | ||
| const setMediaVolumeContextValue = react_1.useMemo(() => { | ||
| const setMediaVolumeContextValue = (0, react_1.useMemo)(() => { | ||
| return { | ||
@@ -113,3 +113,3 @@ setMediaMuted, | ||
| }, [setMediaVolumeAndPersist]); | ||
| const compositionManagerContext = react_1.useMemo(() => { | ||
| const compositionManagerContext = (0, react_1.useMemo)(() => { | ||
| return { | ||
@@ -147,6 +147,6 @@ compositions: [ | ||
| ]); | ||
| const passedInputProps = react_1.useMemo(() => { | ||
| const passedInputProps = (0, react_1.useMemo)(() => { | ||
| return inputProps !== null && inputProps !== void 0 ? inputProps : {}; | ||
| }, [inputProps]); | ||
| return (jsx_runtime_1.jsx(remotion_1.Internals.Timeline.TimelineContext.Provider, Object.assign({ value: timelineContextValue }, { children: jsx_runtime_1.jsx(remotion_1.Internals.Timeline.SetTimelineContext.Provider, Object.assign({ value: setTimelineContextValue }, { children: jsx_runtime_1.jsx(remotion_1.Internals.CompositionManager.Provider, Object.assign({ value: compositionManagerContext }, { children: jsx_runtime_1.jsx(remotion_1.Internals.MediaVolumeContext.Provider, Object.assign({ value: mediaVolumeContextValue }, { children: jsx_runtime_1.jsx(remotion_1.Internals.SetMediaVolumeContext.Provider, Object.assign({ value: setMediaVolumeContextValue }, { children: jsx_runtime_1.jsx(remotion_1.Internals.SharedAudioContextProvider, Object.assign({ numberOfAudioTags: numberOfSharedAudioTags }, { children: jsx_runtime_1.jsx(emitter_context_1.PlayerEventEmitterContext.Provider, Object.assign({ value: emitter }, { children: jsx_runtime_1.jsx(PlayerUI_1.default, { ref: rootRef, autoPlay: Boolean(autoPlay), loop: Boolean(loop), controls: Boolean(controls), style: style, inputProps: passedInputProps, allowFullscreen: Boolean(allowFullscreen), clickToPlay: typeof clickToPlay === 'boolean' | ||
| return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.TimelineContext.Provider, Object.assign({ value: timelineContextValue }, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.SetTimelineContext.Provider, Object.assign({ value: setTimelineContextValue }, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.CompositionManager.Provider, Object.assign({ value: compositionManagerContext }, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.MediaVolumeContext.Provider, Object.assign({ value: mediaVolumeContextValue }, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.SetMediaVolumeContext.Provider, Object.assign({ value: setMediaVolumeContextValue }, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.SharedAudioContextProvider, Object.assign({ numberOfAudioTags: numberOfSharedAudioTags }, { children: (0, jsx_runtime_1.jsx)(emitter_context_1.PlayerEventEmitterContext.Provider, Object.assign({ value: emitter }, { children: (0, jsx_runtime_1.jsx)(PlayerUI_1.default, { ref: rootRef, autoPlay: Boolean(autoPlay), loop: Boolean(loop), controls: Boolean(controls), style: style, inputProps: passedInputProps, allowFullscreen: Boolean(allowFullscreen), clickToPlay: typeof clickToPlay === 'boolean' | ||
| ? clickToPlay | ||
@@ -156,3 +156,3 @@ : 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) }), void 0)); | ||
| exports.PlayerFn = PlayerFn; | ||
| exports.Player = react_1.forwardRef(exports.PlayerFn); | ||
| exports.Player = (0, react_1.forwardRef)(exports.PlayerFn); | ||
| //# sourceMappingURL=Player.js.map |
@@ -67,5 +67,5 @@ "use strict"; | ||
| const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, }) => { | ||
| const playButtonRef = react_1.useRef(null); | ||
| const playButtonRef = (0, react_1.useRef)(null); | ||
| const frame = remotion_1.Internals.Timeline.useTimelinePosition(); | ||
| const containerCss = react_1.useMemo(() => { | ||
| const containerCss = (0, react_1.useMemo)(() => { | ||
| // Hide if playing and mouse outside | ||
@@ -78,3 +78,3 @@ const shouldShow = hovered || !player.playing; | ||
| }, [hovered, player.playing]); | ||
| react_1.useEffect(() => { | ||
| (0, react_1.useEffect)(() => { | ||
| if (playButtonRef.current && spaceKeyToPlayOrPause) { | ||
@@ -85,16 +85,7 @@ // This switches focus to play button when player.playing flag changes | ||
| }, [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), | ||
| jsx_runtime_1.jsx(MediaVolumeSlider_1.MediaVolumeSlider, {}, void 0)] }, void 0)) : null, | ||
| jsx_runtime_1.jsx("div", { style: xSpacer }, void 0), | ||
| jsx_runtime_1.jsxs("div", Object.assign({ style: timeLabel }, { children: [format_time_1.formatTime(frame / fps), " / ", format_time_1.formatTime(durationInFrames / fps)] }), void 0), | ||
| jsx_runtime_1.jsx("div", { style: xSpacer }, void 0)] }), void 0), | ||
| jsx_runtime_1.jsx("div", { style: flex1 }, void 0), | ||
| browser_supports_fullscreen_1.browserSupportsFullscreen && allowFullscreen ? (jsx_runtime_1.jsx("div", Object.assign({ style: fullscreen }, { children: jsx_runtime_1.jsx("button", Object.assign({ type: "button", "aria-label": isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', title: isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', style: buttonStyle, onClick: isFullscreen | ||
| return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: containerCss }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ style: controlsRow }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ style: leftPartStyle }, { children: [(0, 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 ? (0, jsx_runtime_1.jsx)(icons_1.PauseIcon, {}, void 0) : (0, jsx_runtime_1.jsx)(icons_1.PlayIcon, {}, void 0) }), void 0), showVolumeControls ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: xSpacer }, void 0), (0, jsx_runtime_1.jsx)(MediaVolumeSlider_1.MediaVolumeSlider, {}, void 0)] }, void 0)) : null, (0, jsx_runtime_1.jsx)("div", { style: xSpacer }, void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ style: timeLabel }, { children: [(0, format_time_1.formatTime)(frame / fps), " / ", (0, format_time_1.formatTime)(durationInFrames / fps)] }), void 0), (0, jsx_runtime_1.jsx)("div", { style: xSpacer }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)("div", { style: flex1 }, void 0), browser_supports_fullscreen_1.browserSupportsFullscreen && allowFullscreen ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: fullscreen }, { children: (0, jsx_runtime_1.jsx)("button", Object.assign({ type: "button", "aria-label": isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', title: isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', style: buttonStyle, onClick: isFullscreen | ||
| ? onExitFullscreenButtonClick | ||
| : onFullscreenButtonClick }, { children: jsx_runtime_1.jsx(icons_1.FullscreenIcon, { minimized: !isFullscreen }, void 0) }), void 0) }), void 0)) : null] }), void 0), | ||
| jsx_runtime_1.jsx("div", { style: ySpacer }, void 0), | ||
| jsx_runtime_1.jsx(PlayerSeekBar_1.PlayerSeekBar, { durationInFrames: durationInFrames }, void 0)] }), void 0)); | ||
| : onFullscreenButtonClick }, { children: (0, jsx_runtime_1.jsx)(icons_1.FullscreenIcon, { minimized: !isFullscreen }, void 0) }), void 0) }), void 0)) : null] }), void 0), (0, jsx_runtime_1.jsx)("div", { style: ySpacer }, void 0), (0, jsx_runtime_1.jsx)(PlayerSeekBar_1.PlayerSeekBar, { durationInFrames: durationInFrames }, void 0)] }), void 0)); | ||
| }; | ||
| exports.Controls = Controls; | ||
| //# sourceMappingURL=PlayerControls.js.map |
@@ -13,3 +13,3 @@ "use strict"; | ||
| const pos = clientX; | ||
| const frame = Math.round(remotion_1.interpolate(pos, [0, width], [0, (_a = durationInFrames - 1) !== null && _a !== void 0 ? _a : 0], { | ||
| const frame = Math.round((0, remotion_1.interpolate)(pos, [0, width], [0, (_a = durationInFrames - 1) !== null && _a !== void 0 ? _a : 0], { | ||
| extrapolateLeft: 'clamp', | ||
@@ -39,11 +39,11 @@ extrapolateRight: 'clamp', | ||
| const PlayerSeekBar = ({ durationInFrames }) => { | ||
| const containerRef = react_1.useRef(null); | ||
| const barHovered = use_hover_state_1.useHoverState(containerRef); | ||
| const size = use_element_size_1.useElementSize(containerRef, { triggerOnWindowResize: true }); | ||
| const { seek, play, pause, playing } = use_player_1.usePlayer(); | ||
| const containerRef = (0, react_1.useRef)(null); | ||
| const barHovered = (0, use_hover_state_1.useHoverState)(containerRef); | ||
| const size = (0, use_element_size_1.useElementSize)(containerRef, { triggerOnWindowResize: true }); | ||
| const { seek, play, pause, playing } = (0, use_player_1.usePlayer)(); | ||
| const frame = remotion_1.Internals.Timeline.useTimelinePosition(); | ||
| const [dragging, setDragging] = react_1.useState({ | ||
| const [dragging, setDragging] = (0, react_1.useState)({ | ||
| dragging: false, | ||
| }); | ||
| const onPointerDown = react_1.useCallback((e) => { | ||
| const onPointerDown = (0, react_1.useCallback)((e) => { | ||
| if (!size) { | ||
@@ -60,3 +60,3 @@ throw new Error('Player has no size'); | ||
| }, [size, durationInFrames, pause, seek, playing]); | ||
| const onPointerMove = react_1.useCallback((e) => { | ||
| const onPointerMove = (0, react_1.useCallback)((e) => { | ||
| var _a; | ||
@@ -72,3 +72,3 @@ if (!size) { | ||
| }, [dragging.dragging, durationInFrames, seek, size]); | ||
| const onPointerUp = react_1.useCallback(() => { | ||
| const onPointerUp = (0, react_1.useCallback)(() => { | ||
| setDragging({ | ||
@@ -87,3 +87,3 @@ dragging: false, | ||
| }, [dragging, pause, play]); | ||
| react_1.useEffect(() => { | ||
| (0, react_1.useEffect)(() => { | ||
| if (!dragging.dragging) { | ||
@@ -99,3 +99,3 @@ return; | ||
| }, [dragging.dragging, onPointerMove, onPointerUp]); | ||
| const knobStyle = react_1.useMemo(() => { | ||
| const knobStyle = (0, react_1.useMemo)(() => { | ||
| var _a; | ||
@@ -114,3 +114,3 @@ return { | ||
| }, [barHovered, durationInFrames, frame, size]); | ||
| const fillStyle = react_1.useMemo(() => { | ||
| const fillStyle = (0, react_1.useMemo)(() => { | ||
| return { | ||
@@ -123,6 +123,5 @@ height: BAR_HEIGHT, | ||
| }, [durationInFrames, frame]); | ||
| return (jsx_runtime_1.jsxs("div", Object.assign({ ref: containerRef, onPointerDown: onPointerDown, style: containerStyle }, { 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)); | ||
| return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: containerRef, onPointerDown: onPointerDown, style: containerStyle }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ style: barBackground }, { children: (0, jsx_runtime_1.jsx)("div", { style: fillStyle }, void 0) }), void 0), (0, jsx_runtime_1.jsx)("div", { style: knobStyle }, void 0)] }), void 0)); | ||
| }; | ||
| exports.PlayerSeekBar = PlayerSeekBar; | ||
| //# sourceMappingURL=PlayerSeekBar.js.map |
@@ -22,11 +22,11 @@ "use strict"; | ||
| const video = remotion_1.Internals.useVideo(); | ||
| const container = react_1.useRef(null); | ||
| const hovered = use_hover_state_1.useHoverState(container); | ||
| const canvasSize = use_element_size_1.useElementSize(container, { triggerOnWindowResize: false }); | ||
| const [hasPausedToResume, setHasPausedToResume] = react_1.useState(false); | ||
| const [shouldAutoplay, setShouldAutoPlay] = react_1.useState(autoPlay); | ||
| const [isFullscreen, setIsFullscreen] = react_1.useState(() => false); | ||
| use_playback_1.usePlayback({ loop }); | ||
| const player = use_player_1.usePlayer(); | ||
| react_1.useEffect(() => { | ||
| const container = (0, react_1.useRef)(null); | ||
| const hovered = (0, use_hover_state_1.useHoverState)(container); | ||
| const canvasSize = (0, use_element_size_1.useElementSize)(container, { triggerOnWindowResize: false }); | ||
| const [hasPausedToResume, setHasPausedToResume] = (0, react_1.useState)(false); | ||
| const [shouldAutoplay, setShouldAutoPlay] = (0, react_1.useState)(autoPlay); | ||
| const [isFullscreen, setIsFullscreen] = (0, react_1.useState)(() => false); | ||
| (0, use_playback_1.usePlayback)({ loop }); | ||
| const player = (0, use_player_1.usePlayer)(); | ||
| (0, react_1.useEffect)(() => { | ||
| if (hasPausedToResume && !player.playing) { | ||
@@ -37,3 +37,3 @@ setHasPausedToResume(false); | ||
| }, [hasPausedToResume, player]); | ||
| react_1.useEffect(() => { | ||
| (0, react_1.useEffect)(() => { | ||
| const { current } = container; | ||
@@ -54,3 +54,3 @@ if (!current) { | ||
| }, []); | ||
| const toggle = react_1.useCallback(() => { | ||
| const toggle = (0, react_1.useCallback)((e) => { | ||
| if (player.playing) { | ||
@@ -60,6 +60,6 @@ player.pause(); | ||
| else { | ||
| player.play(); | ||
| player.play(e); | ||
| } | ||
| }, [player]); | ||
| const requestFullscreen = react_1.useCallback(() => { | ||
| const requestFullscreen = (0, react_1.useCallback)(() => { | ||
| if (!allowFullscreen) { | ||
@@ -81,3 +81,3 @@ throw new Error('allowFullscreen is false'); | ||
| }, [allowFullscreen]); | ||
| const exitFullscreen = react_1.useCallback(() => { | ||
| const exitFullscreen = (0, react_1.useCallback)(() => { | ||
| if (document.webkitExitFullscreen) { | ||
@@ -90,3 +90,3 @@ document.webkitExitFullscreen(); | ||
| }, []); | ||
| react_1.useImperativeHandle(ref, () => { | ||
| (0, react_1.useImperativeHandle)(ref, () => { | ||
| const methods = { | ||
@@ -136,3 +136,3 @@ play: player.play, | ||
| const VideoComponent = video ? video.component : null; | ||
| const outerStyle = react_1.useMemo(() => { | ||
| const outerStyle = (0, react_1.useMemo)(() => { | ||
| if (!config) { | ||
@@ -144,3 +144,3 @@ return {}; | ||
| overflow: 'hidden', | ||
| ...calculate_player_size_1.calculatePlayerSize({ | ||
| ...(0, calculate_player_size_1.calculatePlayerSize)({ | ||
| compositionHeight: config.height, | ||
@@ -155,7 +155,7 @@ compositionWidth: config.width, | ||
| }, [canvasSize, config, style]); | ||
| const layout = react_1.useMemo(() => { | ||
| const layout = (0, react_1.useMemo)(() => { | ||
| if (!config || !canvasSize) { | ||
| return null; | ||
| } | ||
| return calculate_scale_1.calculateScale({ | ||
| return (0, calculate_scale_1.calculateScale)({ | ||
| canvasSize, | ||
@@ -167,3 +167,3 @@ compositionHeight: config.height, | ||
| }, [canvasSize, config]); | ||
| const outer = react_1.useMemo(() => { | ||
| const outer = (0, react_1.useMemo)(() => { | ||
| if (!layout || !config) { | ||
@@ -184,7 +184,7 @@ return {}; | ||
| }, [config, layout]); | ||
| const containerStyle = react_1.useMemo(() => { | ||
| const containerStyle = (0, react_1.useMemo)(() => { | ||
| if (!config || !canvasSize) { | ||
| return {}; | ||
| } | ||
| const { scale, xCorrection, yCorrection } = calculate_scale_1.calculateScale({ | ||
| const { scale, xCorrection, yCorrection } = (0, calculate_scale_1.calculateScale)({ | ||
| canvasSize, | ||
@@ -206,3 +206,3 @@ compositionHeight: config.height, | ||
| }, [canvasSize, config]); | ||
| const onError = react_1.useCallback((error) => { | ||
| const onError = (0, react_1.useCallback)((error) => { | ||
| player.pause(); | ||
@@ -212,14 +212,14 @@ // Pay attention to `this context` | ||
| }, [player]); | ||
| const onFullscreenButtonClick = react_1.useCallback((e) => { | ||
| const onFullscreenButtonClick = (0, react_1.useCallback)((e) => { | ||
| e.stopPropagation(); | ||
| requestFullscreen(); | ||
| }, [requestFullscreen]); | ||
| const onExitFullscreenButtonClick = react_1.useCallback((e) => { | ||
| const onExitFullscreenButtonClick = (0, react_1.useCallback)((e) => { | ||
| e.stopPropagation(); | ||
| exitFullscreen(); | ||
| }, [exitFullscreen]); | ||
| const onSingleClick = react_1.useCallback(() => { | ||
| toggle(); | ||
| const onSingleClick = (0, react_1.useCallback)((e) => { | ||
| toggle(e); | ||
| }, [toggle]); | ||
| const onDoubleClick = react_1.useCallback(() => { | ||
| const onDoubleClick = (0, react_1.useCallback)(() => { | ||
| if (isFullscreen) { | ||
@@ -232,4 +232,4 @@ exitFullscreen(); | ||
| }, [exitFullscreen, isFullscreen, requestFullscreen]); | ||
| const [handleClick, handleDoubleClick] = use_click_prevention_on_double_click_1.useClickPreventionOnDoubleClick(onSingleClick, onDoubleClick, doubleClickToFullscreen); | ||
| react_1.useEffect(() => { | ||
| const [handleClick, handleDoubleClick] = (0, use_click_prevention_on_double_click_1.useClickPreventionOnDoubleClick)(onSingleClick, onDoubleClick, doubleClickToFullscreen); | ||
| (0, react_1.useEffect)(() => { | ||
| if (shouldAutoplay) { | ||
@@ -243,4 +243,3 @@ player.play(); | ||
| } | ||
| 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, spaceKeyToPlayOrPause: spaceKeyToPlayOrPause }, void 0)) : null] }), void 0)); | ||
| const content = ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: container, style: outerStyle }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ style: containerStyle, className: player_css_classname_1.PLAYER_CSS_CLASSNAME }, { children: VideoComponent ? ((0, jsx_runtime_1.jsx)(error_boundary_1.ErrorBoundary, Object.assign({ onError: onError }, { children: (0, 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 ? ((0, 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 | ||
@@ -250,5 +249,5 @@ if (is_node_1.IS_NODE) { | ||
| } | ||
| return jsx_runtime_1.jsx(react_1.Suspense, Object.assign({ fallback: jsx_runtime_1.jsx("h1", { children: "Loading..." }, void 0) }, { children: content }), void 0); | ||
| return (0, jsx_runtime_1.jsx)(react_1.Suspense, Object.assign({ fallback: (0, jsx_runtime_1.jsx)("h1", { children: "Loading..." }, void 0) }, { children: content }), void 0); | ||
| }; | ||
| exports.default = react_1.forwardRef(PlayerUI); | ||
| exports.default = (0, react_1.forwardRef)(PlayerUI); | ||
| //# sourceMappingURL=PlayerUI.js.map |
@@ -6,5 +6,5 @@ "use strict"; | ||
| expect(() => { | ||
| use_player_1.usePlayer(); | ||
| (0, use_player_1.usePlayer)(); | ||
| }).toThrow(); | ||
| }); | ||
| //# sourceMappingURL=index.test.js.map |
@@ -17,3 +17,3 @@ "use strict"; | ||
| const HelloWorld = () => { | ||
| return jsx_runtime_1.jsx("div", { children: "Hello World" }, void 0); | ||
| return (0, jsx_runtime_1.jsx)("div", { children: "Hello World" }, void 0); | ||
| }; | ||
@@ -25,7 +25,7 @@ exports.HelloWorld = HelloWorld; | ||
| window.console.error = () => { }; | ||
| return jsx_runtime_1.jsx("div", { children: children }, void 0); | ||
| return (0, jsx_runtime_1.jsx)("div", { children: children }, void 0); | ||
| }; | ||
| const customRender = (ui, options) => react_1.render(ui, { wrapper: AllTheProviders, ...options }); | ||
| const customRender = (ui, options) => (0, react_1.render)(ui, { wrapper: AllTheProviders, ...options }); | ||
| exports.render = customRender; | ||
| __exportStar(require("@testing-library/react"), exports); | ||
| //# sourceMappingURL=test-utils.js.map |
@@ -8,3 +8,3 @@ "use strict"; | ||
| try { | ||
| test_utils_1.render(jsx_runtime_1.jsx(index_1.Player | ||
| (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player | ||
| // @ts-expect-error | ||
@@ -21,3 +21,3 @@ , { | ||
| try { | ||
| test_utils_1.render(jsx_runtime_1.jsx(index_1.Player, { compositionWidth: 400, | ||
| (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 400, | ||
| // @ts-expect-error | ||
@@ -32,3 +32,3 @@ compositionHeight: undefined, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }, void 0)); | ||
| try { | ||
| test_utils_1.render(jsx_runtime_1.jsx(index_1.Player, { compositionWidth: 500, compositionHeight: 400, | ||
| (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, | ||
| // @ts-expect-error | ||
@@ -41,3 +41,3 @@ fps: null, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }, void 0)); | ||
| try { | ||
| test_utils_1.render(jsx_runtime_1.jsx(index_1.Player, { compositionWidth: 500, compositionHeight: 400, | ||
| (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, | ||
| // @ts-expect-error | ||
@@ -52,3 +52,3 @@ fps: undefined, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }, void 0)); | ||
| try { | ||
| test_utils_1.render(jsx_runtime_1.jsx(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, | ||
| (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, | ||
| // @ts-expect-error | ||
@@ -73,3 +73,3 @@ durationInFrames: undefined, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }, void 0)); | ||
| try { | ||
| test_utils_1.render(jsx_runtime_1.jsx(index_1.Player, Object.assign({ compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 100, component: test_utils_1.HelloWorld }, props), void 0)); | ||
| (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, Object.assign({ compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 100, component: test_utils_1.HelloWorld }, props), void 0)); | ||
| } | ||
@@ -76,0 +76,0 @@ catch (e) { |
@@ -6,4 +6,4 @@ "use strict"; | ||
| const useHoverState = (ref) => { | ||
| const [hovered, stetHovered] = react_1.useState(false); | ||
| react_1.useEffect(() => { | ||
| const [hovered, stetHovered] = (0, react_1.useState)(false); | ||
| (0, react_1.useEffect)(() => { | ||
| const { current } = ref; | ||
@@ -10,0 +10,0 @@ if (!current) { |
@@ -10,8 +10,8 @@ "use strict"; | ||
| const config = remotion_1.Internals.useUnsafeVideoConfig(); | ||
| const { playing, pause, emitter } = use_player_1.usePlayer(); | ||
| const { playing, pause, emitter } = (0, use_player_1.usePlayer)(); | ||
| const setFrame = remotion_1.Internals.Timeline.useTimelineSetFrame(); | ||
| const frameRef = react_1.useRef(frame); | ||
| const frameRef = (0, react_1.useRef)(frame); | ||
| frameRef.current = frame; | ||
| const lastTimeUpdateEvent = react_1.useRef(null); | ||
| react_1.useEffect(() => { | ||
| const lastTimeUpdateEvent = (0, react_1.useRef)(null); | ||
| (0, react_1.useEffect)(() => { | ||
| if (!config) { | ||
@@ -55,3 +55,3 @@ return; | ||
| }, [config, loop, pause, playing, setFrame, emitter]); | ||
| react_1.useEffect(() => { | ||
| (0, react_1.useEffect)(() => { | ||
| const interval = setInterval(() => { | ||
@@ -58,0 +58,0 @@ if (lastTimeUpdateEvent.current === frameRef.current) { |
@@ -0,1 +1,2 @@ | ||
| import { SyntheticEvent } from 'react'; | ||
| import { PlayerEmitter } from './event-emitter'; | ||
@@ -8,3 +9,3 @@ export declare const usePlayer: () => { | ||
| playing: boolean; | ||
| play: () => void; | ||
| play: (e?: SyntheticEvent<Element, Event> | undefined) => void; | ||
| pause: () => void; | ||
@@ -11,0 +12,0 @@ seek: (newFrame: number) => void; |
@@ -13,8 +13,8 @@ "use strict"; | ||
| const setTimelinePosition = remotion_1.Internals.Timeline.useTimelineSetFrame(); | ||
| const audioContext = react_1.useContext(remotion_1.Internals.SharedAudioContext); | ||
| const frameRef = react_1.useRef(); | ||
| const audioContext = (0, react_1.useContext)(remotion_1.Internals.SharedAudioContext); | ||
| const frameRef = (0, react_1.useRef)(); | ||
| frameRef.current = frame; | ||
| const video = remotion_1.Internals.useVideo(); | ||
| const config = remotion_1.Internals.useUnsafeVideoConfig(); | ||
| const emitter = react_1.useContext(emitter_context_1.PlayerEventEmitterContext); | ||
| const emitter = (0, react_1.useContext)(emitter_context_1.PlayerEventEmitterContext); | ||
| const lastFrame = ((_a = config === null || config === void 0 ? void 0 : config.durationInFrames) !== null && _a !== void 0 ? _a : 1) - 1; | ||
@@ -25,7 +25,7 @@ const isLastFrame = frame === lastFrame; | ||
| } | ||
| const seek = react_1.useCallback((newFrame) => { | ||
| const seek = (0, react_1.useCallback)((newFrame) => { | ||
| setTimelinePosition(newFrame); | ||
| emitter.dispatchSeek(newFrame); | ||
| }, [emitter, setTimelinePosition]); | ||
| const play = react_1.useCallback(() => { | ||
| const play = (0, react_1.useCallback)((e) => { | ||
| if (playing) { | ||
@@ -37,3 +37,3 @@ return; | ||
| } | ||
| if (audioContext && audioContext.numberOfAudioTags > 0) { | ||
| if (audioContext && audioContext.numberOfAudioTags > 0 && e) { | ||
| audioContext.playAllAudios(); | ||
@@ -44,3 +44,3 @@ } | ||
| }, [playing, isLastFrame, audioContext, setPlaying, emitter, seek]); | ||
| const pause = react_1.useCallback(() => { | ||
| const pause = (0, react_1.useCallback)(() => { | ||
| if (playing) { | ||
@@ -51,3 +51,3 @@ setPlaying(false); | ||
| }, [emitter, playing, setPlaying]); | ||
| const frameBack = react_1.useCallback((frames) => { | ||
| const frameBack = (0, react_1.useCallback)((frames) => { | ||
| if (!video) { | ||
@@ -64,3 +64,3 @@ return null; | ||
| }, [frame, playing, setFrame, video]); | ||
| const frameForward = react_1.useCallback((frames) => { | ||
| const frameForward = (0, react_1.useCallback)((frames) => { | ||
| if (!video) { | ||
@@ -77,3 +77,3 @@ return null; | ||
| }, [isLastFrame, lastFrame, playing, setFrame, video]); | ||
| const returnValue = react_1.useMemo(() => { | ||
| const returnValue = (0, react_1.useMemo)(() => { | ||
| return { | ||
@@ -80,0 +80,0 @@ frameBack, |
@@ -6,11 +6,11 @@ "use strict"; | ||
| const useCancellablePromises = () => { | ||
| const pendingPromises = react_1.useRef([]); | ||
| const appendPendingPromise = react_1.useCallback((promise) => { | ||
| const pendingPromises = (0, react_1.useRef)([]); | ||
| const appendPendingPromise = (0, react_1.useCallback)((promise) => { | ||
| pendingPromises.current = [...pendingPromises.current, promise]; | ||
| }, []); | ||
| const removePendingPromise = react_1.useCallback((promise) => { | ||
| const removePendingPromise = (0, react_1.useCallback)((promise) => { | ||
| pendingPromises.current = pendingPromises.current.filter((p) => p !== promise); | ||
| }, []); | ||
| const clearPendingPromises = react_1.useCallback(() => pendingPromises.current.map((p) => p.cancel()), []); | ||
| const api = react_1.useMemo(() => ({ | ||
| const clearPendingPromises = (0, react_1.useCallback)(() => pendingPromises.current.map((p) => p.cancel()), []); | ||
| const api = (0, react_1.useMemo)(() => ({ | ||
| appendPendingPromise, | ||
@@ -17,0 +17,0 @@ removePendingPromise, |
@@ -1,3 +0,4 @@ | ||
| declare const useClickPreventionOnDoubleClick: (onClick: () => void, onDoubleClick: () => void, doubleClickToFullscreen: boolean) => [() => void, () => void]; | ||
| import { SyntheticEvent } from 'react'; | ||
| declare const useClickPreventionOnDoubleClick: (onClick: (e: SyntheticEvent) => void, onDoubleClick: () => void, doubleClickToFullscreen: boolean) => [(e: SyntheticEvent) => void, () => void]; | ||
| export { useClickPreventionOnDoubleClick }; | ||
| //# sourceMappingURL=use-click-prevention-on-double-click.d.ts.map |
@@ -9,6 +9,6 @@ "use strict"; | ||
| const useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFullscreen) => { | ||
| const api = use_cancellable_promises_1.useCancellablePromises(); | ||
| const handleClick = react_1.useCallback(async () => { | ||
| const api = (0, use_cancellable_promises_1.useCancellablePromises)(); | ||
| const handleClick = (0, react_1.useCallback)(async (e) => { | ||
| api.clearPendingPromises(); | ||
| const waitForClick = cancellable_promise_1.cancellablePromise(delay_1.delay(200)); | ||
| const waitForClick = (0, cancellable_promise_1.cancellablePromise)((0, delay_1.delay)(200)); | ||
| api.appendPendingPromise(waitForClick); | ||
@@ -18,16 +18,17 @@ try { | ||
| api.removePendingPromise(waitForClick); | ||
| onClick(); | ||
| onClick(e); | ||
| } | ||
| catch (errorInfo) { | ||
| const info = errorInfo; | ||
| api.removePendingPromise(waitForClick); | ||
| if (!errorInfo.isCanceled) { | ||
| throw errorInfo.error; | ||
| if (!info.isCanceled) { | ||
| throw info.error; | ||
| } | ||
| } | ||
| }, [api, onClick]); | ||
| const handleDoubleClick = react_1.useCallback(() => { | ||
| const handleDoubleClick = (0, react_1.useCallback)(() => { | ||
| api.clearPendingPromises(); | ||
| onDoubleClick(); | ||
| }, [api, onDoubleClick]); | ||
| const returnValue = react_1.useMemo(() => { | ||
| const returnValue = (0, react_1.useMemo)(() => { | ||
| if (!doubleClickToFullscreen) { | ||
@@ -34,0 +35,0 @@ return [onClick, onDoubleClick]; |
@@ -6,4 +6,4 @@ "use strict"; | ||
| const useElementSize = (ref, options) => { | ||
| const [size, setSize] = react_1.useState(null); | ||
| const observer = react_1.useMemo(() => { | ||
| const [size, setSize] = (0, react_1.useState)(null); | ||
| const observer = (0, react_1.useMemo)(() => { | ||
| if (typeof ResizeObserver === 'undefined') { | ||
@@ -26,3 +26,3 @@ return null; | ||
| }, []); | ||
| const updateSize = react_1.useCallback(() => { | ||
| const updateSize = (0, react_1.useCallback)(() => { | ||
| if (!ref.current) { | ||
@@ -43,3 +43,3 @@ return; | ||
| }, [ref]); | ||
| react_1.useEffect(() => { | ||
| (0, react_1.useEffect)(() => { | ||
| if (!observer) { | ||
@@ -59,3 +59,3 @@ return; | ||
| }, [observer, ref, updateSize]); | ||
| react_1.useEffect(() => { | ||
| (0, react_1.useEffect)(() => { | ||
| if (!options.triggerOnWindowResize) { | ||
@@ -62,0 +62,0 @@ return; |
| { | ||
| "name": "@remotion/player", | ||
| "version": "2.4.0-alpha.90748bec", | ||
| "version": "2.4.0-alpha.91579e8b", | ||
| "description": "Remotion Player", | ||
@@ -27,3 +27,3 @@ "main": "dist/index.js", | ||
| "dependencies": { | ||
| "remotion": "2.4.0-alpha.90748bec" | ||
| "remotion": "2.4.0-alpha.91579e8b" | ||
| }, | ||
@@ -39,3 +39,3 @@ "peerDependencies": { | ||
| "@types/node": "^14.14.14", | ||
| "@types/react": "17.0.8", | ||
| "@types/react": "17.0.19", | ||
| "@types/react-dom": "^17.0.0", | ||
@@ -47,3 +47,3 @@ "eslint": "^7.4.0", | ||
| "ts-jest": "^26.4.4", | ||
| "typescript": "^4.1.2", | ||
| "typescript": "^4.4.2", | ||
| "webpack": "^5.21.2" | ||
@@ -50,0 +50,0 @@ }, |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.16%
149109
Worsened metrics
- Lines of code
- decreased by-0.21%
1881
Dependency changes
+ Addedremotion@2.4.0-alpha.91579e8b(transitive)
- Removedremotion@2.4.0-alpha.90748bec(transitive)