From b1cd7ba30515a539e2a568aa9d5df12da5a9cb83 Mon Sep 17 00:00:00 2001
From: Janne Koschinski <janne@kuschku.de>
Date: Fri, 27 Nov 2020 04:00:06 +0100
Subject: [PATCH] Player cleanup

---
 src/routes/player/Player.tsx     | 42 ++++++++++++++++++--------------
 src/routes/player/PreviewBar.tsx |  3 +--
 2 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/src/routes/player/Player.tsx b/src/routes/player/Player.tsx
index dc54617..25d15d1 100644
--- a/src/routes/player/Player.tsx
+++ b/src/routes/player/Player.tsx
@@ -91,24 +91,30 @@ export function Player(
             <p style={{fontVariant: "tabular-nums"}}>{formatDuration(position)} / {formatDuration(duration)}</p>
             <button onClick={videoElement?.play}>Play</button>
             <button onClick={videoElement?.pause}>Pause</button>
-            <ul>
-                {audioTracks.map(track => (
-                    <li key={track.index}>
-                        <strong>{track.lang}</strong>
-                        {track.labels}
-                        <button onClick={() => videoElement?.setAudioTrack(track)}>Choose</button>
-                    </li>
-                ))}
-            </ul>
-            <ul>
-                {content.subtitles.map(track => (
-                    <li key={track.src}>
-                        <strong>{track.language}</strong>
-                        {track.specifier}
-                        <button onClick={() => setSubtitle(track)}>Choose</button>
-                    </li>
-                ))}
-            </ul>
+            <p>
+                Audio
+                <ul>
+                    {audioTracks.map(track => (
+                        <li key={track.index}>
+                            <strong>{track.lang}</strong>
+                            &nbsp;{track.labels}
+                            &nbsp;<button onClick={() => videoElement?.setAudioTrack(track)}>Choose</button>
+                        </li>
+                    ))}
+                </ul>
+            </p>
+            <p>
+                Subtitles
+                <ul>
+                    {content.subtitles.map(track => (
+                        <li key={track.src}>
+                            <strong>{track.language}</strong>
+                            &nbsp;{track.specifier}
+                            &nbsp;<button onClick={() => setSubtitle(track)}>Choose</button>
+                        </li>
+                    ))}
+                </ul>
+            </p>
             <SeekBar
                 video={videoElement}
                 previewTrack={previewTrack}
diff --git a/src/routes/player/PreviewBar.tsx b/src/routes/player/PreviewBar.tsx
index 1f53cab..27a6b62 100644
--- a/src/routes/player/PreviewBar.tsx
+++ b/src/routes/player/PreviewBar.tsx
@@ -41,12 +41,11 @@ export function PreviewBar({previewTrack, duration, position, hidden}: Props) {
 const useStyles = createUseStyles({
     previewBar: {
         position: "relative",
-        width: "45rem",
+        width: "40rem",
         display: "flex",
         flexDirection: "row",
         alignContent: "stretch",
         background: "#7c7",
-        marginLeft: 60,
     },
     previewHead: {
         maxWidth: "136rem",
-- 
GitLab