style: style video player controls for md/lg screens

frontend/src/app/videos/[id]/page.tsx

@@ -15,7 +15,9 @@ export default async function VideoPage({
 
   return (
     <main>
-      <VideoPlayer playbackId={video.playbackId} title={video.title} />
+      <div className='w-full md:w-3/4'>
+        <VideoPlayer playbackId={video.playbackId} title={video.title} />
+      </div>
       <h1>Video: {video.title}</h1>
     </main>
   );

frontend/src/components/video/video-player.module.css

@@ -0,0 +1,104 @@
+.player {
+  --brand: #06D6C4;
+  --media-primary-color: #f5f5f7;
+  --media-secondary-color: transparent;
+
+  --media-control-padding: 0;
+  --media-control-height: 24px;
+
+  --media-font-size: 12px;
+
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+}
+
+
+/*** TIME RANGE BAR ***/
+
+.player .timeRangeBar {
+    padding: 4px 12px;
+    background: transparent;
+}
+
+.player .timeRangeBar media-time-range {
+  --media-range-track-height: 4px;
+  --media-range-bar-color: var(--brand);
+  --media-range-track-background: rgb(255 255 255 / 0.25);
+  width: 100%;
+}
+
+.player media-time-range::part(thumb) {
+  background: #fff;
+  width: 16px;
+  height: 12px;
+  border: none;
+  border-radius: 50px;
+  clip-path: polygon(0 0, 100% 0, 50% 100%);
+  margin-bottom: 8px;
+}
+
+
+/*** CONTROL BAR ***/
+
+.player .controlBar {
+  padding: 0 12px 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  --media-control-height: 24px;      /* uniform pill height */
+  --media-button-icon-width: 24px;   /* uniform icon size */
+  --media-button-icon-height: 24px;
+  --media-font-size: 12px;
+}
+
+.player .leftControls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.player :is(media-play-button, media-time-display, media-fullscreen-button) {
+  --media-control-background: rgb(28 28 30 / 0.6);
+  --media-control-hover-background: rgb(72 72 74 / 0.7);
+  border-radius: 999px;
+  padding: 4px 6px;
+}
+
+.player media-time-display {
+  --media-control-background: rgb(28 28 30 / 0.6);
+  --media-control-hover-background: rgb(72 72 74 / 0.7);
+  border-radius: 999px;
+  padding: 4px 6px;
+  transition: all 0.1s ease-in-out;
+}
+
+/* Volume Controls */
+
+.player .volumeControls {
+  background: rgb(28 28 30 / 0.6);
+  border-radius: 999px;
+  overflow: hidden;
+  padding: 4px 6px;
+  transition: all 0.1s ease-in-out;
+}
+.player .volumeControls:hover { 
+  background: rgb(72 72 74 / 0.7); 
+}
+
+/* Mute is transparent so the group pill shows through */
+.player .volumeControls media-mute-button {
+  --media-control-background: transparent;
+  --media-control-hover-background: transparent;
+}
+
+.player .volumeControls media-volume-range {
+  width: 0;
+  transition: width 0.2s ease;
+  --media-control-background: transparent;
+  gap: 12px;  /* gap between the volume icon and the range slider */
+}
+.player .volumeControls:hover media-volume-range,
+.player .volumeControls:focus-within media-volume-range {
+  width: 90px;
+}

frontend/src/components/video/video-player.tsx

@@ -7,15 +7,15 @@ import {
   MediaFullscreenButton,
   MediaMuteButton,
   MediaPlayButton,
-  MediaSeekBackwardButton,
-  MediaSeekForwardButton,
   MediaTimeDisplay,
   MediaTimeRange,
   MediaVolumeRange,
 } from 'media-chrome/react';
 
 import { useIsHydrated } from '@/hooks/use-is-hydrated';
 
+import styles from './video-player.module.css';
+
 type VideoPlayerProps = {
   playbackId: string | null;
   title: string;
@@ -41,7 +41,7 @@ export default function VideoPlayer({ playbackId, title }: VideoPlayerProps) {
   }
 
   return (
-    <MediaController style={{ width: '100%', aspectRatio: '16/9' }}>
+    <MediaController className={styles.player}>
       <MuxVideo
         slot="media"
         playbackId={playbackId ?? undefined}
@@ -50,14 +50,20 @@ export default function VideoPlayer({ playbackId, title }: VideoPlayerProps) {
         playsInline
         style={{ width: '100%', height: '100%' }}
       />
-      <MediaControlBar>
-        <MediaPlayButton />
-        <MediaSeekBackwardButton seekOffset={10} />
-        <MediaSeekForwardButton seekOffset={10} />
+
+      <MediaControlBar className={styles.timeRangeBar}>
         <MediaTimeRange />
-        <MediaTimeDisplay showDuration />
-        <MediaMuteButton />
-        <MediaVolumeRange />
+      </MediaControlBar>
+
+      <MediaControlBar className={styles.controlBar}>
+        <div className={styles.leftControls}>
+          <MediaPlayButton />
+          <MediaTimeDisplay showDuration />
+          <div className={styles.volumeControls}>
+            <MediaMuteButton />
+            <MediaVolumeRange />
+          </div>
+        </div>
         <MediaFullscreenButton />
       </MediaControlBar>
     </MediaController>