@remotion/player - npm Package Compare versions

Comparing version 2.2.0-alpha.83b2280c to 2.2.0-alpha.fedc7825

dist/icons.d.ts

 import React from 'react';
 export declare const PlayIcon: React.FC;
 export declare const PauseIcon: React.FC;
-export declare const FullscreenIcon: React.FC;
+export declare const FullscreenIcon: React.FC<{
+    minimized: boolean;
+}>;
 //# sourceMappingURL=icons.d.ts.map

dist/icons.js

@@ -6,2 +6,3 @@ "use strict";
 const size = 25;
+const fullscreenIconSize = 16;
 const rotate = {
@@ -11,3 +12,3 @@ transform: `rotate(90deg)`,
 const PlayIcon = () => {
-    return (jsx_runtime_1.jsx("svg", Object.assign({ width: size, height: size, viewBox: "-100 -100 400 400", style: rotate }, { children: jsx_runtime_1.jsx("g", Object.assign({ stroke: "#fff", strokeWidth: "100", strokeLinejoin: "round" }, { children: jsx_runtime_1.jsx("path", { fill: "#fff", 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) }), void 0));
+    return (jsx_runtime_1.jsx("svg", Object.assign({ width: size, height: 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));
 };
@@ -20,7 +21,30 @@ exports.PlayIcon = PlayIcon;
 exports.PauseIcon = PauseIcon;
-const FullscreenIcon = () => {
-    return (jsx_runtime_1.jsxs("svg", Object.assign({ height: size, viewBox: "0 0 24 24", width: size }, { children: [jsx_runtime_1.jsx("path", { d: "M0 0h24v24H0z", fill: "none" }, void 0),
-            jsx_runtime_1.jsx("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z", fill: "#fff" }, void 0)] }), void 0));
+const FullscreenIcon = ({ minimized }) => {
+    const strokeWidth = 6;
+    const viewSize = 32;
+    const out = minimized ? strokeWidth / 2 : 0;
+    const middleInset = minimized ? strokeWidth / 2 : strokeWidth * 1.6;
+    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: `
+				M ${out} ${inset}
+				L ${middleInset} ${middleInset}
+				L ${inset} ${out}
+				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }, void 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: `
+				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: `
+				M ${viewSize - out} ${viewSize - inset}
+				L ${viewSize - middleInset} ${viewSize - middleInset}
+				L ${viewSize - inset} ${viewSize - out}
+				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }, void 0)] }), void 0));
 };
 exports.FullscreenIcon = FullscreenIcon;
 //# sourceMappingURL=icons.js.map

dist/PlayerControls.js

@@ -16,3 +16,3 @@ "use strict";
     width: '100%',
-    paddingTop: 40,
+    paddingTop: 10,
     paddingBottom: 10,
@@ -34,2 +34,3 @@ background: 'linear-gradient(transparent, rgba(0, 0, 0, 0.4))',
     marginBottom: 0,
+    marginTop: 0,
     height: 25,
@@ -42,3 +43,3 @@ };
     alignItems: 'center',
-    justifyContent: 'space-between',
+    justifyContent: 'center',
     userSelect: 'none',
@@ -58,5 +59,6 @@ };
 };
-const fullscreen = {
-    justifyItems: 'flex-end',
+const flex1 = {
+    flex: 1,
 };
+const fullscreen = {};
 const timeLabel = {
@@ -80,5 +82,6 @@ color: 'white',
                             jsx_runtime_1.jsxs("div", Object.assign({ style: timeLabel }, { children: [format_time_1.formatTime(frame / fps), " / ", format_time_1.formatTime(durationInFrames / fps)] }), 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
                                 ? onExitFullscreenButtonClick
-                                : onFullscreenButtonClick }, { children: jsx_runtime_1.jsx(icons_1.FullscreenIcon, {}, void 0) }), void 0) }), void 0)) : null] }), void 0),
+                                : 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),
@@ -85,0 +88,0 @@ jsx_runtime_1.jsx(PlayerSeekBar_1.PlayerSeekBar, { durationInFrames: durationInFrames }, void 0)] }), void 0));

dist/PlayerSeekBar.js

@@ -102,3 +102,3 @@ "use strict";
             backgroundColor: 'white',
-            left: (frame / durationInFrames) * (((_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : 0) - KNOB_SIZE),
+            left: Math.max(-KNOB_SIZE / 2, (frame / (durationInFrames - 1)) * ((_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : 0) - KNOB_SIZE / 2),
             boxShadow: '0 0 2px black',
@@ -105,0 +105,0 @@ opacity: Number(barHovered),

dist/PlayerUI.js

@@ -194,3 +194,3 @@ "use strict";
     }
-    const content = (jsx_runtime_1.jsxs("div", Object.assign({ ref: container, style: outerStyle, onClick: clickToPlay ? onSingleClick : undefined }, { children: [jsx_runtime_1.jsx("div", Object.assign({ style: outer }, { 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),
+    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 ? onSingleClick : 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, onExitFullscreenButtonClick: onExitFullscreenButtonClick }, void 0)) : null] }), void 0));
@@ -197,0 +197,0 @@ // Don't render suspense on Node.js

dist/utils/use-element-size.js

@@ -13,3 +13,3 @@ "use strict";
             const newSize = entries[0].target.getClientRects();
-            if (!newSize) {
+            if (!newSize || !newSize[0]) {
                 setSize(null);
@@ -16,0 +16,0 @@ return;

package.json

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

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

108649

increased by16.65%

Number of package files

102

increased by8.51%

Lines of code

1434

increased by15.65%

Dependency changes

• + [e-mail]7825(transitive)

• - Removedremotion@2.2.0-alpha.83b2280c(transitive)

• [e-mail]7825