@remotion/player 3.3.32 → 3.3.34

package/dist/MediaVolumeSlider.js

@@ -72,6 +72,10 @@ const MediaVolumeSlider = ({ displayVerticalVolumeSlider }) => {
             cursor: 'pointer',
             height: BAR_HEIGHT,
             width: exports.VOLUME_SLIDER_WIDTH,
+            backgroundImage: `linear-gradient(
+				to right,
+				white ${mediaVolume * 100}%, rgba(255, 255, 255, 0) ${mediaVolume * 100}%
+			)`,
         };
         if (displayVerticalVolumeSlider) {
             return {
@@ -85,7 +89,7 @@ const MediaVolumeSlider = ({ displayVerticalVolumeSlider }) => {
             ...commonStyle,
             marginLeft: 5,
         };
-    }, [displayVerticalVolumeSlider]);
+    }, [displayVerticalVolumeSlider, mediaVolume]);
     const sliderStyle = `
 	.${randomClass}::-webkit-slider-thumb {
 		-webkit-appearance: none;
@@ -95,12 +99,6 @@ const MediaVolumeSlider = ({ displayVerticalVolumeSlider }) => {
 		height: ${KNOB_SIZE}px;
 		width: ${KNOB_SIZE}px;
 	}
-	.${randomClass} {
-		background-image: linear-gradient(
-			to right,
-			white ${mediaVolume * 100}%, rgba(255, 255, 255, 0) ${mediaVolume * 100}%
-		);
-	}
 
 	.${randomClass}::-moz-range-thumb {
 		-webkit-appearance: none;

package/dist/utils/validate-in-out-frame.d.ts

@@ -1,4 +1,4 @@
-export declare const validateSingleFrameFrame: (frame: unknown, variableName: string) => number | null;
+export declare const validateSingleFrame: (frame: unknown, variableName: string) => number | null;
 export declare const validateInOutFrames: ({ inFrame, durationInFrames, outFrame, }: {
     inFrame: unknown;
     outFrame: unknown;

package/dist/utils/validate-in-out-frame.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.validateInOutFrames = exports.validateSingleFrameFrame = void 0;
-const validateSingleFrameFrame = (frame, variableName) => {
+exports.validateInOutFrames = exports.validateSingleFrame = void 0;
+const validateSingleFrame = (frame, variableName) => {
     if (typeof frame === 'undefined' || frame === null) {
         return frame !== null && frame !== void 0 ? frame : null;
     }
@@ -19,11 +19,11 @@ const validateSingleFrameFrame = (frame, variableName) => {
     }
     return frame;
 };
-exports.validateSingleFrameFrame = validateSingleFrameFrame;
+exports.validateSingleFrame = validateSingleFrame;
 const validateInOutFrames = ({ inFrame, durationInFrames, outFrame, }) => {
-    const validatedInFrame = (0, exports.validateSingleFrameFrame)(inFrame, 'inFrame');
-    const validateOutFrame = (0, exports.validateSingleFrameFrame)(outFrame, 'outFrame');
-    if (validatedInFrame === null && validateOutFrame === null) {
+    const validatedInFrame = (0, exports.validateSingleFrame)(inFrame, 'inFrame');
+    const validatedOutFrame = (0, exports.validateSingleFrame)(outFrame, 'outFrame');
+    if (validatedInFrame === null && validatedOutFrame === null) {
         return;
     }
     // Must not be over the duration
@@ -31,22 +31,22 @@ const validateInOutFrames = ({ inFrame, durationInFrames, outFrame, }) => {
         throw new Error('inFrame must be less than (durationInFrames - 1), but is ' +
             validatedInFrame);
     }
-    if (validateOutFrame !== null && validateOutFrame > durationInFrames - 1) {
+    if (validatedOutFrame !== null && validatedOutFrame > durationInFrames - 1) {
         throw new Error('outFrame must be less than (durationInFrames - 1), but is ' +
-            validatedInFrame);
+            validatedOutFrame);
     }
     // Must not be under 0
     if (validatedInFrame !== null && validatedInFrame < 0) {
         throw new Error('inFrame must be greater than 0, but is ' + validatedInFrame);
     }
-    if (validateOutFrame !== null && validateOutFrame < 0) {
-        throw new Error('outFrame must be greater than 0, but is ' + validateOutFrame);
+    if (validatedOutFrame !== null && validatedOutFrame <= 0) {
+        throw new Error(`outFrame must be greater than 0, but is ${validatedOutFrame}. If you want to render a single frame, use <Thumbnail /> instead.`);
     }
-    if (validateOutFrame !== null &&
+    if (validatedOutFrame !== null &&
         validatedInFrame !== null &&
-        validateOutFrame <= validatedInFrame) {
+        validatedOutFrame <= validatedInFrame) {
         throw new Error('outFrame must be greater than inFrame, but is ' +
-            validateOutFrame +
+            validatedOutFrame +
             ' <= ' +
             validatedInFrame);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/player",
-	"version": "3.3.32",
+	"version": "3.3.34",
 	"description": "Remotion Player",
 	"main": "dist/index.js",
 	"sideEffects": false,
@@ -27,7 +27,7 @@
 	],
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"remotion": "3.3.32"
+		"remotion": "3.3.34"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
@@ -61,5 +61,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "6b4f3514c801ddf2e7f957dd2e633271fbbc75f6"
+	"gitHead": "b078979b3e2f5cc4d240f112b827e7ef951aa318"
 }