volume styling looking good

UmungoBungo · Oct 7, 2024 · 23600f0 · 23600f0
1 parent a194a30
commit 23600f0
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 17 deletions.
diff --git a/packages/docs/src/components/Demo/PlayerFullscreen.tsx b/packages/docs/src/components/Demo/PlayerFullscreen.tsx
@@ -59,6 +59,7 @@ export const PlayerFullscreen: React.FC<{
 			type="button"
 			onClick={onClick}
 			style={{
+				display: 'flex',
 				background: 'transparent',
 				border: 0,
 				cursor: 'pointer',

diff --git a/packages/docs/src/components/Demo/PlayerSeekBar.tsx b/packages/docs/src/components/Demo/PlayerSeekBar.tsx
@@ -282,7 +282,7 @@ export const PlayerSeekBar: React.FC<{
 			),
 			boxShadow: '0 0 2px black',
 			opacity: Number(barHovered),
-			transition: 'opacity 0.1s ease',
+			transition: 'opacity 0.s ease',
 		};
 	}, [barHovered, durationInFrames, frame, width]);
 

diff --git a/packages/docs/src/components/Demo/PlayerVolume.tsx b/packages/docs/src/components/Demo/PlayerVolume.tsx
@@ -1,6 +1,7 @@
 import type {PlayerRef} from '@remotion/player';
 import React, {useCallback, useEffect} from 'react';
 import {IsMutedIcon, NotMutedIcon} from '../../icons/arrows';
+import styles from './player.module.css';
 
 export const PlayerVolume: React.FC<{
 	playerRef: React.RefObject<PlayerRef>;
@@ -36,22 +37,45 @@ export const PlayerVolume: React.FC<{
 			playerRef.current.mute();
 		}
 	}, [audioState, playerRef]);
+
 	return (
-		<button
-			type="button"
-			onClick={onClick}
-			style={{
-				background: 'transparent',
-				border: 0,
-				cursor: 'pointer',
-				padding: 0,
-			}}
-		>
-			{audioState.isMuted ? (
-				<IsMutedIcon style={{width: 20, opacity: 0.3}} />
-			) : (
-				<NotMutedIcon style={{width: 20}} />
-			)}{' '}
-		</button>
+		<div className={styles['volume-button']}>
+			<button
+				type="button"
+				onClick={onClick}
+				style={{
+					background: 'transparent',
+					border: 0,
+					cursor: 'pointer',
+					padding: 0,
+				}}
+			>
+				{audioState.isMuted ? (
+					<IsMutedIcon style={{width: 20, opacity: 0.3}} />
+				) : (
+					<NotMutedIcon style={{width: 20}} />
+				)}{' '}
+			</button>
+			<div className={styles['volume-bar']}>
+				<div
+					style={{
+						height: '100%',
+						width: '5px',
+						position: 'relative',
+						borderTopLeftRadius: '10px',
+						borderTopRightRadius: '10px',
+						overflow: 'hidden',
+					}}
+				>
+					<div
+						className={styles['volume-active']}
+						style={{
+							height: `${audioState.isMuted ? 0 : audioState.volume * 100}%`,
+						}}
+					/>
+					<div className={styles['volume-background']} />
+				</div>
+			</div>
+		</div>
 	);
 };
diff --git a/packages/docs/src/components/Demo/player.module.css b/packages/docs/src/components/Demo/player.module.css
@@ -39,6 +39,53 @@
 	}
 
 	.end-controls {
+		height: 100%;
 		gap: 20px;
 	}
 }
+
+.volume-button {
+	position: relative;
+	cursor: pointer;
+	display: flex;
+	height: 100%;
+
+	.volume-bar {
+		position: absolute;
+		display: flex;
+		justify-content: center;
+		bottom: 30px;
+		height: 0px;
+		width: 100%;
+		opacity: 0;
+		transition:
+			height 0.2s,
+			opacity 0.3s;
+
+		.volume-active {
+			position: absolute;
+			bottom: 0;
+			background: var(--ifm-font-color-base);
+			width: 100%;
+			border-top-left-radius: 10px;
+			border-top-right-radius: 10px;
+			transition: height 0.1s;
+		}
+
+		.volume-background {
+			position: absolute;
+			bottom: 0;
+			background: var(--ifm-font-color-base);
+			opacity: 0.6;
+			height: 100%;
+			width: 100%;
+		}
+	}
+}
+
+.volume-button:hover {
+	.volume-bar {
+		height: 80px;
+		opacity: 1;
+	}
+}