@remotion/player 3.2.31 → 3.2.32
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Player.d.ts +4 -1
- package/dist/Player.js +2 -2
- package/dist/PlayerControls.d.ts +9 -1
- package/dist/PlayerControls.js +4 -3
- package/dist/PlayerUI.d.ts +3 -0
- package/dist/PlayerUI.js +2 -2
- package/dist/icons.d.ts +1 -1
- package/dist/icons.js +4 -4
- package/dist/index.d.ts +3 -2
- package/package.json +3 -3
package/dist/Player.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ import type { ComponentType, MutableRefObject } from 'react';
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import type { CompProps } from 'remotion';
|
|
4
4
|
import type { PlayerRef } from './player-methods';
|
|
5
|
+
import type { RenderFullscreenButton, RenderPlayPauseButton } from './PlayerControls';
|
|
5
6
|
import type { RenderLoading, RenderPoster } from './PlayerUI';
|
|
6
7
|
declare type PropsIfHasProps<Props> = {} extends Props ? {
|
|
7
8
|
inputProps?: Props;
|
|
@@ -39,9 +40,11 @@ export declare type PlayerProps<T> = {
|
|
|
39
40
|
inFrame?: number | null;
|
|
40
41
|
outFrame?: number | null;
|
|
41
42
|
initiallyShowControls?: number | boolean;
|
|
43
|
+
renderPlayPauseButton?: RenderPlayPauseButton;
|
|
44
|
+
renderFullscreenButton?: RenderFullscreenButton;
|
|
42
45
|
} & PropsIfHasProps<T> & CompProps<T>;
|
|
43
46
|
export declare const componentOrNullIfLazy: <T>(props: CompProps<T>) => ComponentType<T> | null;
|
|
44
|
-
export declare const PlayerFn: <T>({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls, loop, autoPlay, showVolumeControls, allowFullscreen, clickToPlay, doubleClickToFullscreen, spaceKeyToPlayOrPause, moveToBeginningWhenEnded, numberOfSharedAudioTags, errorFallback, playbackRate, renderLoading, className, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, ...componentProps }: PlayerProps<T>, ref: MutableRefObject<PlayerRef>) => JSX.Element;
|
|
47
|
+
export declare const PlayerFn: <T>({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls, loop, autoPlay, showVolumeControls, allowFullscreen, clickToPlay, doubleClickToFullscreen, spaceKeyToPlayOrPause, moveToBeginningWhenEnded, numberOfSharedAudioTags, errorFallback, playbackRate, renderLoading, className, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, renderFullscreenButton, renderPlayPauseButton, ...componentProps }: PlayerProps<T>, ref: MutableRefObject<PlayerRef>) => JSX.Element;
|
|
45
48
|
declare module 'react' {
|
|
46
49
|
function forwardRef<T, P = {}>(render: (props: P, ref: React.MutableRefObject<T>) => React.ReactElement | null): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
|
|
47
50
|
}
|
package/dist/Player.js
CHANGED
|
@@ -22,7 +22,7 @@ const componentOrNullIfLazy = (props) => {
|
|
|
22
22
|
return null;
|
|
23
23
|
};
|
|
24
24
|
exports.componentOrNullIfLazy = componentOrNullIfLazy;
|
|
25
|
-
const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls = false, loop = false, autoPlay = false, showVolumeControls = true, allowFullscreen = true, clickToPlay, doubleClickToFullscreen = false, spaceKeyToPlayOrPause = true, moveToBeginningWhenEnded = true, numberOfSharedAudioTags = 5, errorFallback = () => '⚠️', playbackRate = 1, renderLoading, className, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, ...componentProps }, ref) => {
|
|
25
|
+
const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls = false, loop = false, autoPlay = false, showVolumeControls = true, allowFullscreen = true, clickToPlay, doubleClickToFullscreen = false, spaceKeyToPlayOrPause = true, moveToBeginningWhenEnded = true, numberOfSharedAudioTags = 5, errorFallback = () => '⚠️', playbackRate = 1, renderLoading, className, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, renderFullscreenButton, renderPlayPauseButton, ...componentProps }, ref) => {
|
|
26
26
|
if (typeof window !== 'undefined') {
|
|
27
27
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
28
28
|
(0, react_1.useLayoutEffect)(() => {
|
|
@@ -197,7 +197,7 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
|
|
|
197
197
|
}
|
|
198
198
|
return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.TimelineContext.Provider, { value: timelineContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.SetTimelineContext.Provider, { value: setTimelineContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.CompositionManager.Provider, { value: compositionManagerContext, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.MediaVolumeContext.Provider, { value: mediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.SetMediaVolumeContext.Provider, { value: setMediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.SharedAudioContextProvider, { numberOfAudioTags: numberOfSharedAudioTags, children: (0, jsx_runtime_1.jsx)(emitter_context_1.PlayerEventEmitterContext.Provider, { value: emitter, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.DurationsContextProvider, { children: (0, jsx_runtime_1.jsx)(PlayerUI_1.default, { ref: rootRef, renderLoading: renderLoading, autoPlay: Boolean(autoPlay), loop: Boolean(loop), controls: Boolean(controls), errorFallback: errorFallback, style: style, inputProps: passedInputProps, allowFullscreen: Boolean(allowFullscreen), moveToBeginningWhenEnded: Boolean(moveToBeginningWhenEnded), clickToPlay: typeof clickToPlay === 'boolean'
|
|
199
199
|
? clickToPlay
|
|
200
|
-
: Boolean(controls), showVolumeControls: Boolean(showVolumeControls), setMediaVolume: setMediaVolumeAndPersist, mediaVolume: mediaVolume, mediaMuted: mediaMuted, doubleClickToFullscreen: Boolean(doubleClickToFullscreen), setMediaMuted: setMediaMuted, spaceKeyToPlayOrPause: Boolean(spaceKeyToPlayOrPause), playbackRate: playbackRate, className: className !== null && className !== void 0 ? className : undefined, showPosterWhenUnplayed: Boolean(showPosterWhenUnplayed), showPosterWhenEnded: Boolean(showPosterWhenEnded), showPosterWhenPaused: Boolean(showPosterWhenPaused), renderPoster: renderPoster, inFrame: inFrame !== null && inFrame !== void 0 ? inFrame : null, outFrame: outFrame !== null && outFrame !== void 0 ? outFrame : null, initiallyShowControls: initiallyShowControls !== null && initiallyShowControls !== void 0 ? initiallyShowControls : true }) }) }) }) }) }) }) }) }) }) }));
|
|
200
|
+
: Boolean(controls), showVolumeControls: Boolean(showVolumeControls), setMediaVolume: setMediaVolumeAndPersist, mediaVolume: mediaVolume, mediaMuted: mediaMuted, doubleClickToFullscreen: Boolean(doubleClickToFullscreen), setMediaMuted: setMediaMuted, spaceKeyToPlayOrPause: Boolean(spaceKeyToPlayOrPause), playbackRate: playbackRate, className: className !== null && className !== void 0 ? className : undefined, showPosterWhenUnplayed: Boolean(showPosterWhenUnplayed), showPosterWhenEnded: Boolean(showPosterWhenEnded), showPosterWhenPaused: Boolean(showPosterWhenPaused), renderPoster: renderPoster, inFrame: inFrame !== null && inFrame !== void 0 ? inFrame : null, outFrame: outFrame !== null && outFrame !== void 0 ? outFrame : null, initiallyShowControls: initiallyShowControls !== null && initiallyShowControls !== void 0 ? initiallyShowControls : true, renderFullscreen: renderFullscreenButton !== null && renderFullscreenButton !== void 0 ? renderFullscreenButton : null, renderPlayPauseButton: renderPlayPauseButton !== null && renderPlayPauseButton !== void 0 ? renderPlayPauseButton : null }) }) }) }) }) }) }) }) }) }) }));
|
|
201
201
|
};
|
|
202
202
|
exports.PlayerFn = PlayerFn;
|
|
203
203
|
exports.Player = (0, react_1.forwardRef)(exports.PlayerFn);
|
package/dist/PlayerControls.d.ts
CHANGED
|
@@ -1,6 +1,12 @@
|
|
|
1
|
-
import type { MouseEventHandler } from 'react';
|
|
1
|
+
import type { MouseEventHandler, ReactNode } from 'react';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import type { usePlayer } from './use-player';
|
|
4
|
+
export declare type RenderPlayPauseButton = (props: {
|
|
5
|
+
playing: boolean;
|
|
6
|
+
}) => ReactNode;
|
|
7
|
+
export declare type RenderFullscreenButton = (props: {
|
|
8
|
+
isFullscreen: boolean;
|
|
9
|
+
}) => ReactNode;
|
|
4
10
|
export declare const X_SPACER = 10;
|
|
5
11
|
export declare const X_PADDING = 12;
|
|
6
12
|
declare global {
|
|
@@ -30,4 +36,6 @@ export declare const Controls: React.FC<{
|
|
|
30
36
|
outFrame: number | null;
|
|
31
37
|
initiallyShowControls: number | boolean;
|
|
32
38
|
playerWidth: number;
|
|
39
|
+
renderPlayPauseButton: RenderPlayPauseButton | null;
|
|
40
|
+
renderFullscreenButton: RenderFullscreenButton | null;
|
|
33
41
|
}>;
|
package/dist/PlayerControls.js
CHANGED
|
@@ -60,7 +60,8 @@ const flex1 = {
|
|
|
60
60
|
flex: 1,
|
|
61
61
|
};
|
|
62
62
|
const fullscreen = {};
|
|
63
|
-
const
|
|
63
|
+
const PlayPauseButton = ({ playing }) => playing ? (0, jsx_runtime_1.jsx)(icons_1.PauseIcon, {}) : (0, jsx_runtime_1.jsx)(icons_1.PlayIcon, {});
|
|
64
|
+
const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, onSeekEnd, onSeekStart, inFrame, outFrame, initiallyShowControls, playerWidth, renderPlayPauseButton, renderFullscreenButton, }) => {
|
|
64
65
|
const playButtonRef = (0, react_1.useRef)(null);
|
|
65
66
|
const frame = remotion_1.Internals.Timeline.useTimelinePosition();
|
|
66
67
|
const [supportsFullscreen, setSupportsFullscreen] = (0, react_1.useState)(false);
|
|
@@ -130,8 +131,8 @@ const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVo
|
|
|
130
131
|
textOverflow: 'ellipsis',
|
|
131
132
|
};
|
|
132
133
|
}, [maxTimeLabelWidth]);
|
|
133
|
-
return ((0, jsx_runtime_1.jsxs)("div", { style: containerCss, children: [(0, jsx_runtime_1.jsxs)("div", { style: controlsRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: leftPartStyle, children: [(0, jsx_runtime_1.jsx)("button", { 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:
|
|
134
|
+
return ((0, jsx_runtime_1.jsxs)("div", { style: containerCss, children: [(0, jsx_runtime_1.jsxs)("div", { style: controlsRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: leftPartStyle, children: [(0, jsx_runtime_1.jsx)("button", { 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: renderPlayPauseButton === null ? ((0, jsx_runtime_1.jsx)(PlayPauseButton, { playing: player.playing })) : (renderPlayPauseButton({ playing: player.playing })) }), showVolumeControls ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: xSpacer }), (0, jsx_runtime_1.jsx)(MediaVolumeSlider_1.MediaVolumeSlider, { displayVerticalVolumeSlider: displayVerticalVolumeSlider })] })) : null, (0, jsx_runtime_1.jsx)("div", { style: xSpacer }), (0, jsx_runtime_1.jsxs)("div", { style: timeLabel, children: [(0, format_time_1.formatTime)(frame / fps), " / ", (0, format_time_1.formatTime)(durationInFrames / fps)] }), (0, jsx_runtime_1.jsx)("div", { style: xSpacer })] }), (0, jsx_runtime_1.jsx)("div", { style: flex1 }), (0, jsx_runtime_1.jsx)("div", { style: fullscreen, children: supportsFullscreen && allowFullscreen ? ((0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', title: isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', style: buttonStyle, onClick: isFullscreen
|
|
134
135
|
? onExitFullscreenButtonClick
|
|
135
|
-
: onFullscreenButtonClick, children: (0, jsx_runtime_1.jsx)(icons_1.FullscreenIcon, {
|
|
136
|
+
: onFullscreenButtonClick, children: renderFullscreenButton === null ? ((0, jsx_runtime_1.jsx)(icons_1.FullscreenIcon, { isFullscreen: isFullscreen })) : (renderFullscreenButton({ isFullscreen })) })) : null })] }), (0, jsx_runtime_1.jsx)("div", { style: ySpacer }), (0, jsx_runtime_1.jsx)(PlayerSeekBar_1.PlayerSeekBar, { onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, durationInFrames: durationInFrames, inFrame: inFrame, outFrame: outFrame })] }));
|
|
136
137
|
};
|
|
137
138
|
exports.Controls = Controls;
|
package/dist/PlayerUI.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { PlayerRef } from './player-methods';
|
|
3
|
+
import type { RenderFullscreenButton, RenderPlayPauseButton } from './PlayerControls';
|
|
3
4
|
export declare type ErrorFallback = (info: {
|
|
4
5
|
error: Error;
|
|
5
6
|
}) => React.ReactNode;
|
|
@@ -35,5 +36,7 @@ declare const _default: (props: {
|
|
|
35
36
|
inFrame: number | null;
|
|
36
37
|
outFrame: number | null;
|
|
37
38
|
initiallyShowControls: number | boolean;
|
|
39
|
+
renderPlayPauseButton: RenderPlayPauseButton | null;
|
|
40
|
+
renderFullscreen: RenderFullscreenButton | null;
|
|
38
41
|
} & React.RefAttributes<PlayerRef | null>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
|
|
39
42
|
export default _default;
|
package/dist/PlayerUI.js
CHANGED
|
@@ -42,7 +42,7 @@ if (reactVersion === '0') {
|
|
|
42
42
|
throw new Error(`Version ${reactVersion} of "react" is not supported by Remotion`);
|
|
43
43
|
}
|
|
44
44
|
const doesReactVersionSupportSuspense = parseInt(reactVersion, 10) >= 18;
|
|
45
|
-
const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps, clickToPlay, showVolumeControls, mediaVolume, mediaMuted, doubleClickToFullscreen, setMediaMuted, setMediaVolume, spaceKeyToPlayOrPause, errorFallback, playbackRate, renderLoading, renderPoster, className, moveToBeginningWhenEnded, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, inFrame, outFrame, initiallyShowControls, }, ref) => {
|
|
45
|
+
const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps, clickToPlay, showVolumeControls, mediaVolume, mediaMuted, doubleClickToFullscreen, setMediaMuted, setMediaVolume, spaceKeyToPlayOrPause, errorFallback, playbackRate, renderLoading, renderPoster, className, moveToBeginningWhenEnded, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, inFrame, outFrame, initiallyShowControls, renderFullscreen: renderFullscreenButton, renderPlayPauseButton, }, ref) => {
|
|
46
46
|
var _a, _b, _c, _d, _e;
|
|
47
47
|
const config = remotion_1.Internals.useUnsafeVideoConfig();
|
|
48
48
|
const video = remotion_1.Internals.useVideo();
|
|
@@ -329,7 +329,7 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
|
|
|
329
329
|
showPosterWhenEnded && player.isLastFrame && !player.isPlaying(),
|
|
330
330
|
showPosterWhenUnplayed && !player.hasPlayed && !player.isPlaying(),
|
|
331
331
|
].some(Boolean);
|
|
332
|
-
const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: (0, jsx_runtime_1.jsx)("div", { style: containerStyle, className: player_css_classname_1.PLAYER_CSS_CLASSNAME, children: VideoComponent ? ((0, jsx_runtime_1.jsx)(error_boundary_1.ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: (0, jsx_runtime_1.jsx)(VideoComponent, { ...((_c = video === null || video === void 0 ? void 0 : video.defaultProps) !== null && _c !== void 0 ? _c : {}), ...((_d = inputProps) !== null && _d !== void 0 ? _d : {}) }) })) : null }) }), shouldShowPoster ? ((0, jsx_runtime_1.jsx)("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null, 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, onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, inFrame: inFrame, outFrame: outFrame, initiallyShowControls: initiallyShowControls, playerWidth: (_e = canvasSize === null || canvasSize === void 0 ? void 0 : canvasSize.width) !== null && _e !== void 0 ? _e : 0 })) : null] }));
|
|
332
|
+
const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: (0, jsx_runtime_1.jsx)("div", { style: containerStyle, className: player_css_classname_1.PLAYER_CSS_CLASSNAME, children: VideoComponent ? ((0, jsx_runtime_1.jsx)(error_boundary_1.ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: (0, jsx_runtime_1.jsx)(VideoComponent, { ...((_c = video === null || video === void 0 ? void 0 : video.defaultProps) !== null && _c !== void 0 ? _c : {}), ...((_d = inputProps) !== null && _d !== void 0 ? _d : {}) }) })) : null }) }), shouldShowPoster ? ((0, jsx_runtime_1.jsx)("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null, 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, onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, inFrame: inFrame, outFrame: outFrame, initiallyShowControls: initiallyShowControls, playerWidth: (_e = canvasSize === null || canvasSize === void 0 ? void 0 : canvasSize.width) !== null && _e !== void 0 ? _e : 0, renderFullscreenButton: renderFullscreenButton, renderPlayPauseButton: renderPlayPauseButton })) : null] }));
|
|
333
333
|
if (is_node_1.IS_NODE && !doesReactVersionSupportSuspense) {
|
|
334
334
|
return ((0, jsx_runtime_1.jsx)("div", { ref: container, style: outerStyle, className: className, children: content }));
|
|
335
335
|
}
|
package/dist/icons.d.ts
CHANGED
|
@@ -4,7 +4,7 @@ export declare const fullscreenIconSize = 16;
|
|
|
4
4
|
export declare const PlayIcon: React.FC;
|
|
5
5
|
export declare const PauseIcon: React.FC;
|
|
6
6
|
export declare const FullscreenIcon: React.FC<{
|
|
7
|
-
|
|
7
|
+
isFullscreen: boolean;
|
|
8
8
|
}>;
|
|
9
9
|
export declare const VolumeOffIcon: React.FC;
|
|
10
10
|
export declare const VolumeOnIcon: React.FC;
|
package/dist/icons.js
CHANGED
|
@@ -15,12 +15,12 @@ const PauseIcon = () => {
|
|
|
15
15
|
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" })] }));
|
|
16
16
|
};
|
|
17
17
|
exports.PauseIcon = PauseIcon;
|
|
18
|
-
const FullscreenIcon = ({
|
|
18
|
+
const FullscreenIcon = ({ isFullscreen, }) => {
|
|
19
19
|
const strokeWidth = 6;
|
|
20
20
|
const viewSize = 32;
|
|
21
|
-
const out =
|
|
22
|
-
const middleInset =
|
|
23
|
-
const inset =
|
|
21
|
+
const out = isFullscreen ? 0 : strokeWidth / 2;
|
|
22
|
+
const middleInset = isFullscreen ? strokeWidth * 1.6 : strokeWidth / 2;
|
|
23
|
+
const inset = isFullscreen ? strokeWidth * 1.6 : strokeWidth * 2;
|
|
24
24
|
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: `
|
|
25
25
|
M ${out} ${inset}
|
|
26
26
|
L ${middleInset} ${middleInset}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { CallbackListener, EventTypes } from './event-emitter';
|
|
3
3
|
import { PlayerEmitter } from './event-emitter';
|
|
4
|
-
export {
|
|
4
|
+
export { Player, PlayerProps } from './Player';
|
|
5
5
|
export { PlayerMethods, PlayerRef } from './player-methods';
|
|
6
|
-
export type {
|
|
6
|
+
export type { RenderFullscreenButton, RenderPlayPauseButton, } from './PlayerControls';
|
|
7
|
+
export type { ErrorFallback, RenderLoading, RenderPoster } from './PlayerUI';
|
|
7
8
|
export { PreviewSize, Translation } from './utils/preview-size';
|
|
8
9
|
export { Size } from './utils/use-element-size';
|
|
9
10
|
export type { CallbackListener, EventTypes };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@remotion/player",
|
|
3
|
-
"version": "3.2.
|
|
3
|
+
"version": "3.2.32",
|
|
4
4
|
"description": "Remotion Player",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
],
|
|
29
29
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"remotion": "3.2.
|
|
31
|
+
"remotion": "3.2.32"
|
|
32
32
|
},
|
|
33
33
|
"peerDependencies": {
|
|
34
34
|
"react": ">=16.8.0",
|
|
@@ -63,5 +63,5 @@
|
|
|
63
63
|
"publishConfig": {
|
|
64
64
|
"access": "public"
|
|
65
65
|
},
|
|
66
|
-
"gitHead": "
|
|
66
|
+
"gitHead": "4f7ab3637405d140041f898f95f78c99943d1b40"
|
|
67
67
|
}
|