chore(audio): reintroduce some styles

apps/client/src/widgets/type_widgets/file/Audio.tsx

@@ -17,10 +17,10 @@ export default function AudioPreview({ note }: { note: FNote }) {
                 onPlay={() => setPlaying(true)}
                 onPause={() => setPlaying(false)}
             />
-            <div className="video-preview-controls">
+            <div className="media-preview-controls">
                 <SeekBar mediaRef={audioRef} />
 
-                <div class="video-buttons-row">
+                <div class="media-buttons-row">
                     <div className="center">
                         <PlayPauseButton mediaRef={audioRef} playing={playing} />
                     </div>

apps/client/src/widgets/type_widgets/file/MediaPlayer.css

@@ -0,0 +1,58 @@
+.media-preview-controls {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 1.25em;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+    background: rgba(0, 0, 0, 0.5);
+    color: white;
+
+    .media-buttons-row {
+        display: flex;
+
+        > * {
+            flex: 1;
+            align-items: center;
+            gap: 0.5em;
+            display: flex;
+        }
+
+        .spacer {
+            width: var(--icon-button-size, 32px);
+            height: var(--icon-button-size, 32px);
+        }
+
+        .center {
+            justify-content: center;
+        }
+
+        .right {
+            display: flex;
+            justify-content: flex-end;
+        }
+
+        .play-button {
+            --icon-button-size: 48px;
+        }
+    }
+
+    .media-seekbar-row {
+        display: flex;
+        align-items: center;
+        gap: 0.5em;
+
+        .media-time {
+            font-size: 0.85em;
+            font-variant-numeric: tabular-nums;
+            white-space: nowrap;
+        }
+
+        .media-trackbar {
+            flex: 1;
+            cursor: pointer;
+        }
+    }
+}

apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx

@@ -1,3 +1,5 @@
+import "./MediaPlayer.css";
+
 import { RefObject } from "preact";
 import { useEffect, useState } from "preact/hooks";
 
@@ -30,18 +32,18 @@ export function SeekBar({ mediaRef }: { mediaRef: RefObject<HTMLVideoElement | H
     };
 
     return (
-        <div class="video-seekbar-row">
-            <span class="video-time">{formatTime(currentTime)}</span>
+        <div class="media-seekbar-row">
+            <span class="media-time">{formatTime(currentTime)}</span>
             <input
                 type="range"
-                class="video-trackbar"
+                class="media-trackbar"
                 min={0}
                 max={duration || 0}
                 step={0.1}
                 value={currentTime}
                 onInput={onSeek}
             />
-            <span class="video-time">-{formatTime(Math.max(0, duration - currentTime))}</span>
+            <span class="media-time">-{formatTime(Math.max(0, duration - currentTime))}</span>
         </div>
     );
 }
@@ -72,4 +74,4 @@ export function PlayPauseButton({ mediaRef, playing }: { mediaRef: RefObject<HTM
             onClick={togglePlayback}
         />
     );
-}
+}

apps/client/src/widgets/type_widgets/file/Video.css

@@ -19,69 +19,6 @@
         }
     }
 
-    .video-preview-controls {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        padding: 1.25em;
-        display: flex;
-        flex-direction: column;
-        gap: 0.5em;
-        background: rgba(0, 0, 0, 0.5);
-        color: white;
-        --icon-button-hover-color: white;
-        --icon-button-hover-background: rgba(255, 255, 255, 0.2);
-        opacity: 1;
-        transition: opacity 300ms ease;
-
-        .video-buttons-row {
-            display: flex;
-
-            > * {
-                flex: 1;
-                align-items: center;
-                gap: 0.5em;
-                display: flex;
-            }
-
-            .spacer {
-                width: var(--icon-button-size, 32px);
-                height: var(--icon-button-size, 32px);
-            }
-
-            .center {
-                justify-content: center;
-            }
-
-            .right {
-                display: flex;
-                justify-content: flex-end;
-            }
-
-            .play-button {
-                --icon-button-size: 48px;
-            }
-        }
-    }
-
-    .video-seekbar-row {
-        display: flex;
-        align-items: center;
-        gap: 0.5em;
-    }
-
-    .video-trackbar {
-        flex: 1;
-        cursor: pointer;
-    }
-
-    .video-time {
-        font-size: 0.85em;
-        font-variant-numeric: tabular-nums;
-        white-space: nowrap;
-    }
-
     .video-volume-row {
         display: flex;
         align-items: center;
@@ -93,6 +30,13 @@
         cursor: pointer;
     }
 
+    .media-preview-controls {
+        --icon-button-hover-color: white;
+        --icon-button-hover-background: rgba(255, 255, 255, 0.2);
+        opacity: 1;
+        transition: opacity 300ms ease;
+    }
+
     .speed-dropdown {
         position: relative;
 

apps/client/src/widgets/type_widgets/file/Video.tsx

@@ -113,9 +113,9 @@ export default function VideoPreview({ note }: { note: FNote }) {
                 onError={onError}
             />
 
-            <div className="video-preview-controls">
+            <div className="media-preview-controls">
                 <SeekBar mediaRef={videoRef} />
-                <div class="video-buttons-row">
+                <div class="media-buttons-row">
                     <div className="left">
                         <PlaybackSpeed videoRef={videoRef} />
                         <RotateButton videoRef={videoRef} />