From efc7436bd9828c0a91088806725c79bf4aa924c3 Mon Sep 17 00:00:00 2001 From: keanu-a Date: Fri, 26 Jun 2026 09:32:03 -0700 Subject: [PATCH 1/4] style: create initial css module for VideoPlayer --- .../components/video/video-player.module.css | 43 +++++++++++++++++++ .../src/components/video/video-player.tsx | 6 +-- 2 files changed, 46 insertions(+), 3 deletions(-) create mode 100644 frontend/src/components/video/video-player.module.css diff --git a/frontend/src/components/video/video-player.module.css b/frontend/src/components/video/video-player.module.css new file mode 100644 index 0000000..c71c2c3 --- /dev/null +++ b/frontend/src/components/video/video-player.module.css @@ -0,0 +1,43 @@ +.player { + --media-primary-color: #ffffff; + --media-secondary-color: transparent; + + --media-control-background: transparent; + --media-control-hover-background: rgb(255 255 255 / 0.12); + + width: 100%; + aspect-ratio: 16 / 9; + overflow: hidden; +} + +.player media-control-bar { + padding: 0 8px 4px; +} + +/* Play button */ +.player media-play-button { + background: var(--media-control-background); +} + +/* Time range */ +.player media-time-range { + background: none; +} + +.player media-time-range::part(thumb) { + height: 20px; + width: 12px; +} + +.player media-time-range::part(progress) { + background: #12a3d4; +} + +.player media-time-range::part(preview-box) { + border-radius: 6px; +} + +/* Volume range */ +.player media-volume-range { + --media-range-track-height: 4px; +} \ No newline at end of file diff --git a/frontend/src/components/video/video-player.tsx b/frontend/src/components/video/video-player.tsx index f46ecd4..e16b5fa 100644 --- a/frontend/src/components/video/video-player.tsx +++ b/frontend/src/components/video/video-player.tsx @@ -16,6 +16,8 @@ import { import { useIsHydrated } from '@/hooks/use-is-hydrated'; +import styles from './video-player.module.css'; + type VideoPlayerProps = { playbackId: string | null; title: string; @@ -41,7 +43,7 @@ export default function VideoPlayer({ playbackId, title }: VideoPlayerProps) { } return ( - + - - From bd2e42c87d936547e35e8fcc5544a61e7aabd40c Mon Sep 17 00:00:00 2001 From: Keanu Aloua Date: Fri, 26 Jun 2026 17:35:07 -0700 Subject: [PATCH 2/4] style: style video player time range bar and controls for md/lg screens --- frontend/src/app/videos/[id]/page.tsx | 4 +- .../components/video/video-player.module.css | 101 ++++++++++++++---- .../src/components/video/video-player.tsx | 21 ++-- 3 files changed, 97 insertions(+), 29 deletions(-) diff --git a/frontend/src/app/videos/[id]/page.tsx b/frontend/src/app/videos/[id]/page.tsx index e924687..aafa7fa 100644 --- a/frontend/src/app/videos/[id]/page.tsx +++ b/frontend/src/app/videos/[id]/page.tsx @@ -15,7 +15,9 @@ export default async function VideoPage({ return (
- +
+ +

Video: {video.title}

); diff --git a/frontend/src/components/video/video-player.module.css b/frontend/src/components/video/video-player.module.css index c71c2c3..0499779 100644 --- a/frontend/src/components/video/video-player.module.css +++ b/frontend/src/components/video/video-player.module.css @@ -1,43 +1,102 @@ .player { - --media-primary-color: #ffffff; + --brand: #06D6C4; + --media-primary-color: #f5f5f7; --media-secondary-color: transparent; - --media-control-background: transparent; - --media-control-hover-background: rgb(255 255 255 / 0.12); + --media-control-padding: 0; + --media-control-height: 24px; + + --media-font-size: 12px; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; } -.player media-control-bar { - padding: 0 8px 4px; -} -/* Play button */ -.player media-play-button { - background: var(--media-control-background); +/*** TIME RANGE BAR ***/ + +.player .timeRangeBar { + padding: 4px 12px; + background: transparent; } -/* Time range */ -.player media-time-range { - background: none; +.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) { - height: 20px; - width: 12px; + background: #fff; + width: 16px; + height: 12px; + border: none; + border-radius: 50px; + clip-path: polygon(0 0, 100% 0, 50% 100%); + margin-bottom: 8px; } -.player media-time-range::part(progress) { - background: #12a3d4; + +/*** 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 media-time-range::part(preview-box) { - border-radius: 6px; +.player .leftControls { + display: flex; + align-items: center; + gap: 8px; } -/* Volume range */ -.player media-volume-range { - --media-range-track-height: 4px; +.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; +} + +.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; } \ No newline at end of file diff --git a/frontend/src/components/video/video-player.tsx b/frontend/src/components/video/video-player.tsx index e16b5fa..36da26f 100644 --- a/frontend/src/components/video/video-player.tsx +++ b/frontend/src/components/video/video-player.tsx @@ -7,8 +7,6 @@ import { MediaFullscreenButton, MediaMuteButton, MediaPlayButton, - MediaSeekBackwardButton, - MediaSeekForwardButton, MediaTimeDisplay, MediaTimeRange, MediaVolumeRange, @@ -17,6 +15,7 @@ import { import { useIsHydrated } from '@/hooks/use-is-hydrated'; import styles from './video-player.module.css'; +import { cn } from '@/lib/utils'; type VideoPlayerProps = { playbackId: string | null; @@ -52,12 +51,20 @@ export default function VideoPlayer({ playbackId, title }: VideoPlayerProps) { playsInline style={{ width: '100%', height: '100%' }} /> - - + + - - - + + + +
+ + +
+ + +
+
From 83a7fc5ce3774da3cd7813150c3b82f915c85cb8 Mon Sep 17 00:00:00 2001 From: Keanu Aloua Date: Fri, 26 Jun 2026 17:36:06 -0700 Subject: [PATCH 3/4] chore: remove unused cn import --- frontend/src/components/video/video-player.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/components/video/video-player.tsx b/frontend/src/components/video/video-player.tsx index 36da26f..b745667 100644 --- a/frontend/src/components/video/video-player.tsx +++ b/frontend/src/components/video/video-player.tsx @@ -15,7 +15,6 @@ import { import { useIsHydrated } from '@/hooks/use-is-hydrated'; import styles from './video-player.module.css'; -import { cn } from '@/lib/utils'; type VideoPlayerProps = { playbackId: string | null; From 3edff2b1b7d00302efc5191894d37e76efc929f0 Mon Sep 17 00:00:00 2001 From: Keanu Aloua Date: Fri, 26 Jun 2026 17:42:30 -0700 Subject: [PATCH 4/4] chore: add comment to trigger ai reviewer --- frontend/src/components/video/video-player.module.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/frontend/src/components/video/video-player.module.css b/frontend/src/components/video/video-player.module.css index 0499779..be01dac 100644 --- a/frontend/src/components/video/video-player.module.css +++ b/frontend/src/components/video/video-player.module.css @@ -73,6 +73,8 @@ transition: all 0.1s ease-in-out; } +/* Volume Controls */ + .player .volumeControls { background: rgb(28 28 30 / 0.6); border-radius: 999px;