feat: make padding as variable

remotion-dev · Oct 3, 2022 · 7578b69 · 7578b69
1 parent bac45b9
commit 7578b69
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/packages/player/src/PlayerControls.tsx b/packages/player/src/PlayerControls.tsx
@@ -9,6 +9,7 @@ import type {usePlayer} from './use-player';
 import {useVideoControlsResize} from './use-video-controls-resize';
 
 export const X_SPACER = 10;
+export const X_PADDING = 12;
 
 const containerStyle: React.CSSProperties = {
 	boxSizing: 'border-box',
@@ -19,8 +20,8 @@ const containerStyle: React.CSSProperties = {
 	paddingBottom: 10,
 	background: 'linear-gradient(transparent, rgba(0, 0, 0, 0.4))',
 	display: 'flex',
-	paddingRight: 12,
-	paddingLeft: 12,
+	paddingRight: X_PADDING,
+	paddingLeft: X_PADDING,
 	flexDirection: 'column',
 	transition: 'opacity 0.3s',
 };

diff --git a/packages/player/src/use-video-controls-resize.ts b/packages/player/src/use-video-controls-resize.ts
@@ -2,7 +2,7 @@ import {useMemo} from 'react';
 import {useVideoConfig} from 'remotion';
 import {fullscreenIconSize, ICON_SIZE} from './icons';
 import {VOLUME_SLIDER_WIDTH} from './MediaVolumeSlider';
-import {X_SPACER} from './PlayerControls';
+import {X_PADDING, X_SPACER} from './PlayerControls';
 
 export const useVideoControlsResize = (
 	isFullscreen: Boolean,
@@ -21,13 +21,12 @@ export const useVideoControlsResize = (
 		const playPauseIconSize = ICON_SIZE;
 		const volumeIconSize = ICON_SIZE;
 		const _fullscreenIconSize = allowFullScreen ? fullscreenIconSize : 0;
-		const xPadding = 12 * 2;
 		const maxTimeLabelWidth =
 			playerWidth -
 			volumeIconSize -
 			playPauseIconSize -
-			xPadding -
 			_fullscreenIconSize -
+			X_PADDING * 2 -
 			X_SPACER * 2;
 
 		const maxTimeLabelWidthWithoutNegativeValue =
@@ -49,8 +48,8 @@ export const useVideoControlsResize = (
 			VOLUME_SLIDER_WIDTH +
 			playPauseIconSize +
 			_fullscreenIconSize +
-			xPadding +
-			X_SPACER * 2;
+			X_PADDING * 2;
+		+X_SPACER * 2;
 
 		const displayVerticalVolumeSlider =
 			playerWidth < minWidthForHorizontalDisplay;