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> + {track.labels} + <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> + {track.specifier} + <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