From 5aeeb6dde67c43ef2424a1ca7254405ccab8b7fd Mon Sep 17 00:00:00 2001
From: Christian Pillsbury <cpillsbury@mux.com>
Date: Fri, 12 Sep 2025 11:10:01 -0700
Subject: [PATCH] style: add visual styling to time display components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds consistent styling to duration and current time display components
across both HTML and React platforms:
- Semi-transparent dark background matching other UI components
- Monospace font for better time alignment
- Proper padding, borders, and text alignment
- Consistent color scheme with existing control bar elements

Both HTML and React skins now display time values with proper visual
styling that integrates seamlessly with the control bar design.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 packages/html/html/src/skins/media-skin-default.ts | 14 ++++++++++++++
 .../react/react/src/skins/MediaSkinDefault.tsx     |  4 ++--
 packages/react/react/src/skins/styles.module.css   | 12 ++++++++++++
 3 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/packages/html/html/src/skins/media-skin-default.ts b/packages/html/html/src/skins/media-skin-default.ts
index 5802f465..829392f4 100644
--- a/packages/html/html/src/skins/media-skin-default.ts
+++ b/packages/html/html/src/skins/media-skin-default.ts
@@ -42,6 +42,20 @@ export function getTemplateHTML() {
         background: none;
       }
 
+      /* Time Display Styling */
+      media-current-time-display,
+      media-duration-display {
+        background: rgb(20 20 30 / .7);
+        padding: 4px 8px;
+        color: rgb(238 238 238);
+        font-family: monospace;
+        font-size: 14px;
+        border-radius: 2px;
+        min-width: 3em;
+        text-align: center;
+        display: inline-block;
+      }
+
       /* Generic Media Button Styling */
       .button {
         border: none;
diff --git a/packages/react/react/src/skins/MediaSkinDefault.tsx b/packages/react/react/src/skins/MediaSkinDefault.tsx
index 0973b89f..3ccf2e01 100644
--- a/packages/react/react/src/skins/MediaSkinDefault.tsx
+++ b/packages/react/react/src/skins/MediaSkinDefault.tsx
@@ -31,9 +31,9 @@ export const MediaSkinDefault: React.FC<{ children: React.ReactNode }> = ({
             <PlayIcon className={styles.PlayIcon}></PlayIcon>
             <PauseIcon className={styles.PauseIcon}></PauseIcon>
           </PlayButton>
-          <CurrentTimeDisplay />
+          <CurrentTimeDisplay className={styles.TimeDisplay} />
           <TimeRange className={styles.TimeRange} />
-          <DurationDisplay />
+          <DurationDisplay className={styles.TimeDisplay} />
           {/* @ts-ignore */}
           <MuteButton className={`${styles.Button} ${styles.MediaMuteButton}`}>
             <VolumeHighIcon
diff --git a/packages/react/react/src/skins/styles.module.css b/packages/react/react/src/skins/styles.module.css
index 00c25c45..b9ebcfbd 100644
--- a/packages/react/react/src/skins/styles.module.css
+++ b/packages/react/react/src/skins/styles.module.css
@@ -73,6 +73,18 @@
   flex-grow: 1;
 }
 
+/* Time Display Styling */
+.TimeDisplay {
+  background: rgb(20 20 30 / 0.7);
+  padding: 4px 8px;
+  color: rgb(238 238 238);
+  font-family: monospace;
+  font-size: 14px;
+  border-radius: 2px;
+  min-width: 3em;
+  text-align: center;
+}
+
 /* Base Button Styling */
 .MediaPlayButton {
   border: none;