Listening now: allow users to vote on and add tags

frontend/css/main.less

@@ -27,6 +27,7 @@
 @import "search-track.less";
 @import "stats.less";
 @import "new-navbar.less";
+@import "tags.less";
 
 @icon-font-path: "/static/fonts/";
 

frontend/css/metadata-viewer.less

@@ -148,6 +148,8 @@
       border-radius: @border-radius;
       box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1) inset;
       background-color: @boxes-background-color;
+      min-height: 2.8em; // adapt to add-tag component height
+      align-items: center;
 
       &.white {
         background-color: white;
@@ -216,47 +218,6 @@
         }
       }
 
-      .tags-wrapper {
-        display: flex;
-        position: relative;
-        .tags {
-          flex: 1;
-          align-items: center;
-          // horizontal scroll overflow with hidden scrollbar and faded overlay
-          display: flex;
-          overflow-x: scroll;
-          &::-webkit-scrollbar {
-            // hidden scrollbar
-            display: none;
-          }
-          .badge {
-            flex: none;
-            color: currentcolor;
-            background-color: lightgrey;
-          }
-          .badge + .badge {
-            margin-left: 0.3em;
-          }
-        }
-        .add-tag {
-          flex: none;
-          // Faded overlay to hide extra tags in .tags
-          &:before {
-            content: "";
-            position: absolute;
-            width: 60px;
-            height: 80%;
-            right: 75px;
-            top: 10%;
-            background: linear-gradient(
-              to right,
-              transparent,
-              @boxes-background-color
-            );
-            pointer-events: none;
-          }
-        }
-      }
     }
   }
 }

frontend/css/tags.less

@@ -0,0 +1,59 @@
+@tagBorderRadius: 6px;
+.tag {
+  flex: none;
+  color: currentcolor;
+  > * {
+    background-color: rgb(236, 235, 228);
+    display: inline-block;
+    padding: 3px 7px;
+    vertical-align: middle;
+    &:first-child {
+      border-top-left-radius: @tagBorderRadius;
+      border-bottom-left-radius: @tagBorderRadius;
+    }
+    &:last-child {
+      border-top-right-radius: @tagBorderRadius;
+      border-bottom-right-radius: @tagBorderRadius;
+    }
+  }
+  .tag-vote-button {
+    margin: 0;
+    border-left: 1px dashed #f7f7f7;
+    opacity: 0;
+    line-height: 1.5em;
+    vertical-align: baseline;
+    padding: 3px 0;
+    width: 0px;
+    transition-duration: 0.3s;
+    transition-property: padding, width, opacity;
+    transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
+    // Cancelling some .btn styling; we want the .btn class applied
+    // for interactivity reasons, but not all the CSS styling
+    margin: 0;
+    font-size: inherit;
+    line-height: inherit;
+    vertical-align: initial;
+
+    &.upvote:hover,
+    &.upvote.selected {
+      color: @btn-success-color;
+      background-color: lighten(@btn-success-bg, 20%);
+    }
+    &.downvote:hover,
+    &.downvote.selected,
+    &.delete:hover {
+      color: @btn-danger-color;
+      background-color: lighten(@btn-danger-bg, 20%);
+    }
+  }
+  &:hover > .tag-vote-button {
+    width: 2em;
+    opacity: 1;
+  }
+  &:not(:hover) > :first-child {
+    border-radius: @tagBorderRadius;
+  }
+  & + .tag {
+    margin-left: 0.3em;
+  }
+}

frontend/js/src/metadata-viewer/MetadataViewer.tsx

@@ -3,11 +3,12 @@ import { faHeart, faHeartBroken } from "@fortawesome/free-solid-svg-icons";
 import { faPauseCircle } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as tinycolor from "tinycolor2";
-import { first, get, isEmpty, isNumber, isPlainObject, pick } from "lodash";
-import TagsComponent from "./TagsComponent";
+import { first, isEmpty, isNumber, isPlainObject, pick } from "lodash";
+import TagsComponent from "../tags/TagsComponent";
 import {
   getArtistName,
   getAverageRGBOfImage,
+  getRecordingMBID,
   getTrackName,
 } from "../utils/utils";
 import GlobalAppContext from "../utils/GlobalAppContext";
@@ -23,6 +24,10 @@ const supportLinkTypes = [
   "official homepage",
   "purchase for download",
   "purchase for mail-order",
+  "social network",
+  "patronage",
+  "crowdfunding",
+  "blog",
 ];
 
 function OpenInMusicBrainzButton(props: {
@@ -54,9 +59,23 @@ function OpenInMusicBrainzButton(props: {
   );
 }
 
+function getNowPlayingRecordingMBID(
+  recordingData?: MetadataLookup,
+  playingNow?: Listen
+) {
+  if (!recordingData && !playingNow) {
+    return undefined;
+  }
+  return (
+    recordingData?.recording_mbid ?? getRecordingMBID(playingNow as Listen)
+  );
+}
+
 export default function MetadataViewer(props: MetadataViewerProps) {
   const { recordingData, playingNow } = props;
   const { APIService, currentUser } = React.useContext(GlobalAppContext);
+  const { getFeedbackForUserForRecordings, submitFeedback } = APIService;
+  const { auth_token, name: username } = currentUser;
 
   const [currentListenFeedback, setCurrentListenFeedback] = React.useState(0);
   const [expandedAccordion, setExpandedAccordion] = React.useState(1);
@@ -72,29 +91,30 @@ export default function MetadataViewer(props: MetadataViewerProps) {
       const averageColor = getAverageRGBOfImage(albumArtRef?.current);
       setAlbumArtColor(averageColor);
     };
-    if (albumArtRef?.current) {
-      albumArtRef.current.addEventListener("load", setAverageColor);
+    const currentAlbumArtRef = albumArtRef.current;
+    if (currentAlbumArtRef) {
+      currentAlbumArtRef.addEventListener("load", setAverageColor);
     }
     return () => {
-      if (albumArtRef?.current) {
-        albumArtRef.current.removeEventListener("load", setAverageColor);
+      if (currentAlbumArtRef) {
+        currentAlbumArtRef.removeEventListener("load", setAverageColor);
       }
     };
-  }, [albumArtRef?.current, setAlbumArtColor]);
+  }, [setAlbumArtColor]);
 
   React.useEffect(() => {
     const getFeedbackPromise = async () => {
-      const recordingMBID =
-        recordingData?.recording_mbid ||
-        get(playingNow, "track_metadata.additional_info.recording_mbid");
+      const recordingMBID = getNowPlayingRecordingMBID(
+        recordingData,
+        playingNow
+      );
       if (!recordingMBID) {
         return;
       }
       try {
-        const feedbackObject = await APIService.getFeedbackForUserForRecordings(
-          currentUser.name,
-          [recordingMBID]
-        );
+        const feedbackObject = await getFeedbackForUserForRecordings(username, [
+          recordingMBID,
+        ]);
         if (feedbackObject?.feedback?.length) {
           const feedback: any = first(feedbackObject.feedback);
           setCurrentListenFeedback(feedback.score);
@@ -109,25 +129,21 @@ export default function MetadataViewer(props: MetadataViewerProps) {
       }
     };
     getFeedbackPromise();
-  }, [recordingData, playingNow]);
+  }, [recordingData, playingNow, getFeedbackForUserForRecordings, username]);
 
-  const submitFeedback = React.useCallback(
+  const submitFeedbackCallback = React.useCallback(
     async (score: ListenFeedBack) => {
-      if (currentUser?.auth_token) {
-        const recordingMBID =
-          recordingData?.recording_mbid ||
-          get(playingNow, "track_metadata.additional_info.recording_mbid");
+      if (auth_token) {
+        const recordingMBID = getNowPlayingRecordingMBID(
+          recordingData,
+          playingNow
+        );
         if (!recordingMBID) {
           return;
         }
         try {
           setCurrentListenFeedback(score);
-          await APIService.submitFeedback(
-            currentUser.auth_token,
-            score,
-            undefined,
-            recordingMBID
-          );
+          await submitFeedback(auth_token, score, undefined, recordingMBID);
         } catch (error) {
           // Revert the feedback UI in case of failure
           setCurrentListenFeedback(0);
@@ -136,7 +152,13 @@ export default function MetadataViewer(props: MetadataViewerProps) {
         }
       }
     },
-    [recordingData, playingNow, setCurrentListenFeedback]
+    [
+      recordingData,
+      playingNow,
+      setCurrentListenFeedback,
+      submitFeedback,
+      auth_token,
+    ]
   );
 
   const adjustedAlbumColor = tinycolor.fromRatio(albumArtColor);
@@ -153,12 +175,13 @@ export default function MetadataViewer(props: MetadataViewerProps) {
 
   // Default to empty object
   const { metadata } = recordingData ?? {};
-
+  const recordingMBID = getNowPlayingRecordingMBID(recordingData, playingNow);
   const artistMBID = first(recordingData?.artist_mbids);
   const userSubmittedReleaseMBID =
     playingNow?.track_metadata?.additional_info?.release_mbid;
   const CAAReleaseMBID = metadata?.release?.caa_release_mbid;
   const CAAID = metadata?.release?.caa_id;
+
   let coverArtSrc = "/static/img/cover-art-placeholder.jpg";
 
   // try fetching cover art using user submitted release mbid first
@@ -270,6 +293,7 @@ export default function MetadataViewer(props: MetadataViewerProps) {
             <h4 className="panel-title">
               <div className="recordingheader">
                 <div className="name strong">{trackName}</div>
+                &nbsp;<small>Track</small>
                 <div className="date">
                   {isNumber(duration) && millisecondsToStr(duration)}
                 </div>
@@ -286,7 +310,11 @@ export default function MetadataViewer(props: MetadataViewerProps) {
             aria-labelledby="headingOne"
           >
             <div className="panel-body">
-              <TagsComponent tags={metadata?.tag?.recording} />
+              <TagsComponent
+                tags={metadata?.tag?.recording}
+                entityType="recording"
+                entityMBID={recordingMBID}
+              />
               {/* <div className="ratings content-box" /> */}
               {Boolean(flattenedRecRels?.length) && (
                 <div className="white content-box">
@@ -331,7 +359,7 @@ export default function MetadataViewer(props: MetadataViewerProps) {
                 )}
                 <OpenInMusicBrainzButton
                   entityType="recording"
-                  entityMBID={recordingData?.recording_mbid}
+                  entityMBID={recordingMBID}
                 />
               </div>
             </div>
@@ -359,6 +387,7 @@ export default function MetadataViewer(props: MetadataViewerProps) {
                   <div className="name strong">
                     {recordingData?.release_name}
                   </div>
+                  &nbsp;<small>Album</small>
                   <div className="date">{metadata?.release?.year}</div>
                   <div className="caret" />
                 </div>
@@ -373,7 +402,11 @@ export default function MetadataViewer(props: MetadataViewerProps) {
               aria-labelledby="headingTwo"
             >
               <div className="panel-body">
-                <TagsComponent tags={metadata?.tag?.release_group} />
+                <TagsComponent
+                  tags={metadata?.tag?.release_group}
+                  entityType="release-group"
+                  entityMBID={metadata?.release?.release_group_mbid}
+                />
                 <OpenInMusicBrainzButton
                   entityType="release"
                   entityMBID={releaseMBID}
@@ -401,6 +434,7 @@ export default function MetadataViewer(props: MetadataViewerProps) {
             <h4 className="panel-title">
               <div className="artistheader">
                 <div className="name strong">{artistName}</div>
+                &nbsp;<small>Artist</small>
                 <div className="date">{artist?.begin_year}</div>
                 <div className="caret" />
               </div>
@@ -415,7 +449,11 @@ export default function MetadataViewer(props: MetadataViewerProps) {
             aria-labelledby="headingThree"
           >
             <div className="panel-body">
-              <TagsComponent tags={metadata?.tag?.artist} />
+              <TagsComponent
+                tags={metadata?.tag?.artist}
+                entityType="artist"
+                entityMBID={artistMBID}
+              />
               {/* <div className="ratings content-box" /> */}
               {(artist?.begin_year || artist?.area) && (
                 <div>
@@ -452,8 +490,8 @@ export default function MetadataViewer(props: MetadataViewerProps) {
             >
               <a
                 href={
-                  recordingData?.recording_mbid
-                    ? `${musicBrainzURLRoot}recording/${recordingData?.recording_mbid}`
+                  recordingMBID
+                    ? `${musicBrainzURLRoot}recording/${recordingMBID}`
                     : undefined
                 }
                 target="_blank"
@@ -480,7 +518,7 @@ export default function MetadataViewer(props: MetadataViewerProps) {
             <button
               className="btn-transparent"
               onClick={() =>
-                submitFeedback(currentListenFeedback === 1 ? 0 : 1)
+                submitFeedbackCallback(currentListenFeedback === 1 ? 0 : 1)
               }
               type="button"
             >
@@ -494,7 +532,7 @@ export default function MetadataViewer(props: MetadataViewerProps) {
             <button
               className="btn-transparent"
               onClick={() =>
-                submitFeedback(currentListenFeedback === -1 ? 0 : -1)
+                submitFeedbackCallback(currentListenFeedback === -1 ? 0 : -1)
               }
               type="button"
             >