refactor: Improve mobile UI and responsiveness for BrainzPlayer

metabrainz · Feb 6, 2025 · b26c5f3 · b26c5f3
1 parent 5371844
commit b26c5f3
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 46 deletions.
diff --git a/frontend/css/brainzplayer.less b/frontend/css/brainzplayer.less
@@ -46,13 +46,13 @@
       flex: 0;
       margin-right: 1em;
       // Show big preview of the cover art when hovering over it
-      &:hover
-        > *:not(.hidden):not(.no-album-art):not(.youtube-wrapper):not(.soundcloud) {
-        // 80% of screen width max, capped at the width in pixel of big-cover-art-size
-        height: min(80vw, @big-cover-art-size);
-        width: min(80vw, @big-cover-art-size);
-        bottom: @brainzplayer-height + @progress-bar-height;
-        max-height: calc(100vh - @brainzplayer-height - @progress-bar-height);
+      @media (min-width: @grid-float-breakpoint) {
+        &:hover > *:not(.hidden):not(.no-album-art):not(.youtube-wrapper):not(.soundcloud) {
+          height: min(80vw, @big-cover-art-size);
+          width: min(80vw, @big-cover-art-size);
+          bottom: @brainzplayer-height + @progress-bar-height;
+          max-height: calc(100vh - @brainzplayer-height - @progress-bar-height);
+        }
       }
 
       > * {
@@ -392,15 +392,17 @@
 
   .hide-queue {
     position: absolute;
-    width: 2.5em;
+    right: 0;
     top: 0;
-    right: 0.5em;
-    padding: 0.3em 0.5em;
-    border-radius: 5px;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-    background: #dadada;
-    margin-top: 0;
+    padding: 1em;
+    font-size: 1.5em;
+    cursor: pointer;
+    z-index: 1;
+
+    @media (max-width: @grid-float-breakpoint) {
+      padding: 1em;
+      font-size: 2em; // Bigger touch target on mobile
+    }
   }
   .queue-item {
     display: flex;
@@ -481,7 +483,26 @@
     }
   }
 
-  .header,
+  .header {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    padding: 1em 0;
+    color: white;
+    position: relative;
+
+    .hide-queue {
+      position: absolute;
+      left: 0;
+      z-index: 1;
+    }
+
+    .header-text {
+      flex: 1;
+      text-align: center;
+    }
+  }
+
   .info {
     width: 100%;
     display: flex;

diff --git a/frontend/js/src/common/brainzplayer/BrainzPlayerUI.tsx b/frontend/js/src/common/brainzplayer/BrainzPlayerUI.tsx
@@ -10,6 +10,8 @@ import {
   faPlayCircle,
   faSlash,
   faVolumeUp,
+  faCompactDisc,
+  faXmark,
 } from "@fortawesome/free-solid-svg-icons";
 import * as React from "react";
 
@@ -291,6 +293,12 @@ function BrainzPlayerUI(props: React.PropsWithChildren<BrainzPlayerUIProps>) {
       </div>
 
       <div className={`queue ${showQueue ? "show" : ""}`}>
+        <FontAwesomeIcon
+          className="btn hide-queue"
+          icon={faXmark}
+          title="Close queue"
+          onClick={() => setShowQueue(false)}
+        />
         <Queue clearQueue={clearQueue} onHide={() => setShowQueue(false)} />
       </div>
       <div
@@ -405,7 +413,7 @@ function BrainzPlayerUI(props: React.PropsWithChildren<BrainzPlayerUIProps>) {
           )}
 
           <FontAwesomeIcon
-            icon={faBarsStaggered}
+            icon={isMobile ? faCompactDisc : faBarsStaggered}
             style={{ color: showMusicPlayer ? "green" : "" }}
             onClick={
               isMobile && isPlayingATrack ? toggleMusicPlayer : toggleQueue

diff --git a/frontend/js/src/common/brainzplayer/MusicPlayer.tsx b/frontend/js/src/common/brainzplayer/MusicPlayer.tsx
@@ -102,6 +102,41 @@ type MusicPlayerProps = {
   mostReadableTextColor: string;
 };
 
+type FeedbackButtonsProps = {
+  currentListenFeedback: number;
+  isPlayingATrack: boolean;
+  submitLikeFeedback: () => void;
+  submitDislikeFeedback: () => void;
+};
+
+const FeedbackButtons = React.memo(
+  ({
+    currentListenFeedback,
+    isPlayingATrack,
+    submitLikeFeedback,
+    submitDislikeFeedback,
+  }: FeedbackButtonsProps) => (
+    <div className="feedback-buttons-wrapper">
+      <FontAwesomeIcon
+        icon={faHeart}
+        title="Love"
+        className={`love ${
+          currentListenFeedback === FeedbackValue.LIKE ? " loved" : ""
+        }${!isPlayingATrack ? " disabled" : ""}`}
+        onClick={submitLikeFeedback}
+      />
+      <FontAwesomeIcon
+        icon={faHeartCrack}
+        title="Hate"
+        className={`hate ${
+          currentListenFeedback === FeedbackValue.DISLIKE ? " hated" : ""
+        }${!isPlayingATrack ? " disabled" : ""}`}
+        onClick={submitDislikeFeedback}
+      />
+    </div>
+  )
+);
+
 function MusicPlayer(props: MusicPlayerProps) {
   const {
     onHide,
@@ -210,17 +245,9 @@ function MusicPlayer(props: MusicPlayerProps) {
           }}
           onClick={onHide}
         />
-        <AnimateTextOnOverflow text={currentTrackAlbum} />
-
-        <FontAwesomeIcon
-          className="btn toggle-info"
-          icon={faEllipsis}
-          title="Hide queue"
-          style={{
-            fontSize: "x-large",
-            padding: "5px 10px",
-          }}
-        />
+        <div className="header-text">
+          <AnimateTextOnOverflow text={currentTrackAlbum} />
+        </div>
       </div>
       <div className="cover-art-scroll-wrapper">
         <div className="cover-art cover-art-wrapper">
@@ -248,24 +275,12 @@ function MusicPlayer(props: MusicPlayerProps) {
             {currentTrackArtist}
           </span>
         </div>
-        <div className="feedback-buttons-wrapper">
-          <FontAwesomeIcon
-            icon={faHeart}
-            title="Love"
-            className={`love ${
-              currentListenFeedback === FeedbackValue.LIKE ? " loved" : ""
-            }${!isPlayingATrack ? " disabled" : ""}`}
-            onClick={submitLikeFeedback}
-          />
-          <FontAwesomeIcon
-            icon={faHeartCrack}
-            title="Hate"
-            className={`hate ${
-              currentListenFeedback === FeedbackValue.DISLIKE ? " hated" : ""
-            }${!isPlayingATrack ? " disabled" : ""}`}
-            onClick={submitDislikeFeedback}
-          />
-        </div>
+        <FeedbackButtons
+          currentListenFeedback={currentListenFeedback}
+          isPlayingATrack={isPlayingATrack}
+          submitLikeFeedback={submitLikeFeedback}
+          submitDislikeFeedback={submitDislikeFeedback}
+        />
       </div>
       <div className="progress-bar-wrapper">
         <ProgressBar