From e86e8812c8dd69d9f946b55ddd635f8934b5b3e1 Mon Sep 17 00:00:00 2001
From: Arnei <arnewilken@yahoo.de>
Date: Thu, 14 Sep 2023 10:08:57 +0200
Subject: [PATCH] Align track view button placement with thumbnail view

Makes the button in the track selection view behave more
similar to how the thumbnail generation buttons behave.

Since there's only one button ("Delete Track"),
I'm a little worried if it still parses as a button without a border.
---
 src/main/TrackSelection.tsx | 69 ++++++++++++++++++++++++++-----------
 1 file changed, 48 insertions(+), 21 deletions(-)

diff --git a/src/main/TrackSelection.tsx b/src/main/TrackSelection.tsx
index 61d90b144..db9b5515d 100644
--- a/src/main/TrackSelection.tsx
+++ b/src/main/TrackSelection.tsx
@@ -85,13 +85,21 @@ const TrackItem: React.FC<{track: Track, enabledCount: number}> = ({track, enabl
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'left',
-
-    width: '100%',
-    maxWidth: '500px',
   });
 
+  const trackitemSubStyle = css({
+    display: 'flex',
+    flexDirection: 'row',
+    ...(flexGapReplacementStyle(20, true)),
+
+    justifyContent: 'space-around',
+    flexWrap: 'wrap',
+  })
+
   const playerStyle = css({
     aspectRatio: '16 / 9',
+    width: '100%',
+    maxWidth: '457px',
   });
 
   const headerStyle = css({
@@ -103,6 +111,15 @@ const TrackItem: React.FC<{track: Track, enabledCount: number}> = ({track, enabl
     },
   });
 
+  const buttonsStyle = css({
+    // TODO: Avoid hard-coding max-width
+    "@media (max-width: 1550px)": {
+      width: '100%',
+    },
+    display: 'flex',
+    flexDirection: 'column',
+  })
+
   // What state is the track in and can it be deactivated?
   // We do not permit deactivating the last remaining track
   // 2 -> Track is enabled and can be deactivated
@@ -131,19 +148,24 @@ const TrackItem: React.FC<{track: Track, enabledCount: number}> = ({track, enabl
   return (
     <div css={[backgroundBoxStyle(theme), trackItemStyle]}>
       <div css={headerStyle}>{ header }</div>
-      <ReactPlayer
-        width="unset"
-        height="unset"
-        css={playerStyle}
-        style={{opacity: track.video_stream.enabled ? '1' : '0.5'}}
-        url={track.uri}
-      />
-      <SelectButton
-        text={deleteText}
-        tooltip={deleteTooltip}
-        handler={trackEnabledChange}
-        Icon={deleteIcon}
-        active={deleteEnabled} />
+      <div css={trackitemSubStyle}>
+        <ReactPlayer
+          width="unset"
+          height="unset"
+          css={playerStyle}
+          style={{opacity: track.video_stream.enabled ? '1' : '0.5'}}
+          url={track.uri}
+        />
+        <div css={buttonsStyle}>
+          <SelectButton
+            text={deleteText}
+            tooltip={deleteTooltip}
+            handler={trackEnabledChange}
+            Icon={deleteIcon}
+            active={deleteEnabled}
+          />
+        </div>
+      </div>
     </div>
   );
 }
@@ -163,25 +185,30 @@ const SelectButton : React.FC<selectButtonInterface> = ({handler, text, Icon, to
   const buttonStyle = [
     active ? basicButtonStyle(theme) : deactivatedButtonStyle,
     {
-      padding: '10px 5px',
-      width: '30%',
+      padding: '16px',
+      maxHeight: '21px',
       boxShadow: '',
-      border: `1px solid ${theme.text}`,
       background: `${theme.element_bg}`,
+      textWrap: 'nowrap',
     }];
+
   const clickHandler = () => {
     if (active) { handler() }
     ref.current?.blur();
   };
+
   const keyHandler = (event: React.KeyboardEvent) => {
     if (active && (event.key === " " || event.key === "Enter")) {
       handler();
     }
   };
+
   const ref = React.useRef<HTMLDivElement>(null)
+
   return (
     <ThemedTooltip title={tooltip}>
-      <div css={buttonStyle}
+      <div
+        css={buttonStyle}
         tabIndex={0}
         ref={ref}
         role="button"
@@ -189,7 +216,7 @@ const SelectButton : React.FC<selectButtonInterface> = ({handler, text, Icon, to
         onClick={clickHandler}
         onKeyDown={keyHandler} >
         <Icon css={customIconStyle(theme)}/>
-        <div>{ text }</div>
+        { text }
       </div>
     </ThemedTooltip>
   );