Merge branch 'master' into ansh/sort-rg-artist-page

metabrainz · Oct 10, 2024 · 923579c · 923579c
2 parents ce4dfb6 + 3ec6bbd
commit 923579c
Show file tree

Hide file tree

Showing 36 changed files with 703 additions and 303 deletions.
diff --git a/frontend/css/main.less b/frontend/css/main.less
@@ -38,6 +38,7 @@
 @import "release-card.less";
 @import "search.less";
 @import "accordion.less";
+@import "scroll-container.less";
 
 @icon-font-path: "/static/fonts/";
 

diff --git a/frontend/css/new-navbar.less b/frontend/css/new-navbar.less
@@ -336,17 +336,6 @@ body {
   }
 }
 
-.dragscroll {
-  /* We user the dragscroll library to handle dragging to scroll */
-  overflow-x: scroll;
-  /* But we want to hide the scrollbar: */
-  -ms-overflow-style: none; /* Internet Explorer and Edge */
-  scrollbar-width: none; /* Firefox */
-  &::-webkit-scrollbar {
-    /* Chrome, Safari and Opera */
-    display: none;
-  }
-}
 .tertiary-nav {
   /* This tertiary nav (pills at the top of the page) should be max full width and scrollable */
   display: flex;

diff --git a/frontend/css/recommendation-page.less b/frontend/css/recommendation-page.less
@@ -4,37 +4,6 @@
 }
 /* stylelint-enable */
 
-.playlists-masonry-container {
-  position: relative;
-  // hide overflow behind button with gradient to indicate there's more
-  .nav-button {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 55px;
-    border: none;
-    font-size: 2em;
-    color: @light-grey;
-    z-index: 1;
-    opacity: 1;
-    transition: opacity 300ms linear;
-    &.backward {
-      background: linear-gradient(to right, @white 10%, transparent);
-      text-align: left;
-      left: 0;
-    }
-    &.forward {
-      background: linear-gradient(to left, @white 10%, transparent);
-      right: 0;
-      text-align: right;
-    }
-  }
-  &.scroll-start .nav-button.backward,
-  &.scroll-end& .nav-button.forward {
-    opacity: 0;
-    pointer-events: none;
-  }
-}
 .playlists-masonry {
   width: 100%;
   display: grid;

diff --git a/frontend/css/scroll-container.less b/frontend/css/scroll-container.less
@@ -0,0 +1,80 @@
+.horizontal-scroll-container {
+  position: relative;
+
+  .horizontal-scroll {
+    .small-scrollbar();
+    &.no-scrollbar {
+      overflow-x: scroll;
+      /* Hide the scrollbar: */
+      -ms-overflow-style: none; /* Internet Explorer and Edge */
+      scrollbar-width: none; /* Firefox */
+      &::-webkit-scrollbar {
+        /* Chrome, Safari and Opera */
+        display: none;
+      }
+    }
+  }
+  // hide overflow behind button with gradient to indicate there's more
+  .nav-button {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 55px;
+    border: none;
+    font-size: 2em;
+    color: @light-grey;
+    z-index: 1;
+    opacity: 1;
+    transition: opacity 300ms linear;
+    &.backward {
+      background: linear-gradient(to right, @white 10%, transparent);
+      text-align: left;
+      left: 0;
+    }
+    &.forward {
+      background: linear-gradient(to left, @white 10%, transparent);
+      right: 0;
+      text-align: right;
+    }
+  }
+  &.scroll-start .nav-button.backward,
+  &.scroll-end& .nav-button.forward {
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
+.dragscroll {
+  /* We user the dragscroll library to handle dragging to scroll */
+  overflow-x: scroll;
+  /* But we want to hide the scrollbar: */
+  -ms-overflow-style: none; /* Internet Explorer and Edge */
+  scrollbar-width: none; /* Firefox */
+  &::-webkit-scrollbar {
+    /* Chrome, Safari and Opera */
+    display: none;
+  }
+}
+@scrollbar-background-color: #f5f5f5;
+@scrollbar-thumb-color: darken(@scrollbar-background-color, 10%);
+@scrollbar-thumb-color-dark: darken(@scrollbar-thumb-color, 15%);
+
+.small-scrollbar {
+  scrollbar-width: unset;
+  padding-bottom: 1em;
+  &::-webkit-scrollbar {
+    height: 5px;
+    display: block;
+  }
+  &::-webkit-scrollbar-track {
+    background-color: @scrollbar-background-color;
+    border-radius: 5px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: @scrollbar-thumb-color;
+    border-radius: 5px;
+  }
+  &:hover::-webkit-scrollbar-thumb {
+    background-color: @scrollbar-thumb-color-dark;
+  }
+}
diff --git a/frontend/js/src/about/add-data/AddData.tsx b/frontend/js/src/about/add-data/AddData.tsx
@@ -276,7 +276,7 @@ export default function AddData() {
           <em>
             <a href="https://www.smashbits.nl/smashtunes/">SmashTunes</a>
           </em>
-          , a Mac menu bar utility for displaying the current track. Submits
+          , a Mac menu bar utility for displaying the current track, submits
           Apple Music and Spotify listens
         </li>
       </ul>
@@ -329,6 +329,13 @@ export default function AddData() {
 
       <h4>Scripts</h4>
       <ul>
+        <li>
+          <em>
+            <a href="https://github.com/UnviableFriend/phooks">phooks</a>
+          </em>
+          , a python script that submits local Plex listens using web hooks and
+          file lookups
+        </li>
         <li>
           <em>
             <a href="https://github.com/defvs/ytm-extractor">ytm-extractor</a>

diff --git a/frontend/js/src/album/utils.tsx b/frontend/js/src/album/utils.tsx
@@ -19,7 +19,7 @@ import {
   faTwitter,
   faYoutube,
 } from "@fortawesome/free-brands-svg-icons";
-import { compact } from "lodash";
+import { dataSourcesInfo } from "../settings/brainzplayer/BrainzPlayerSettings";
 
 export type SimilarArtist = {
   artist_mbid: string;
@@ -68,6 +68,7 @@ export type ListeningStats = {
 
 export function getRelIconLink(relName: string, relValue: string) {
   let icon;
+  let color;
   switch (relName) {
     case "streaming":
     case "free streaming":
@@ -82,21 +83,26 @@ export function getRelIconLink(relName: string, relValue: string) {
     case "youtube":
     case "youtube music":
       icon = faYoutube;
+      color = dataSourcesInfo.youtube.color;
       break;
     case "soundcloud":
       icon = faSoundcloud;
+      color = dataSourcesInfo.soundcloud.color;
       break;
     case "official homepage":
       icon = faHomeAlt;
       break;
     case "bandcamp":
       icon = faBandcamp;
+      color = "#629AA9";
       break;
     case "last.fm":
       icon = faLastfm;
+      color = "#D51007";
       break;
     case "apple music":
       icon = faApple;
+      color = dataSourcesInfo.appleMusic.color;
       break;
     case "get the music":
     case "purchase for mail-order":
@@ -112,8 +118,10 @@ export function getRelIconLink(relName: string, relValue: string) {
         icon = faFacebook;
       } else if (/twitter/.test(relValue) || /x.com/.test(relValue)) {
         icon = faTwitter;
+        color = "#55ACEE";
       } else if (/soundcloud/.test(relValue)) {
         icon = faSoundcloud;
+        color = dataSourcesInfo.soundcloud.color;
       } else {
         icon = faCircleNodes;
       }
@@ -131,7 +139,7 @@ export function getRelIconLink(relName: string, relValue: string) {
       target="_blank"
       rel="noopener noreferrer"
     >
-      <FontAwesomeIcon icon={icon} fixedWidth />
+      <FontAwesomeIcon icon={icon} fixedWidth color={color} />
     </a>
   );
 }

diff --git a/frontend/js/src/common/brainzplayer/AppleMusicPlayer.tsx b/frontend/js/src/common/brainzplayer/AppleMusicPlayer.tsx
@@ -10,6 +10,7 @@ import {
 } from "../../utils/utils";
 import { DataSourceProps, DataSourceType } from "./BrainzPlayer";
 import GlobalAppContext from "../../utils/GlobalAppContext";
+import { dataSourcesInfo } from "../../settings/brainzplayer/BrainzPlayerSettings";
 
 export type AppleMusicPlayerProps = DataSourceProps;
 
@@ -112,6 +113,7 @@ export default class AppleMusicPlayer
   public name = "Apple Music";
   public domainName = "music.apple.com";
   public icon = faApple;
+  public iconColor = dataSourcesInfo.appleMusic.color;
 
   appleMusicPlayer?: AppleMusicPlayerType;
   declare context: React.ContextType<typeof GlobalAppContext>;

diff --git a/frontend/js/src/common/brainzplayer/BrainzPlayer.tsx b/frontend/js/src/common/brainzplayer/BrainzPlayer.tsx
@@ -1004,6 +1004,9 @@ export default function BrainzPlayer() {
         currentDataSourceName={
           dataSourceRefs[currentDataSourceIndex]?.current?.name
         }
+        currentDataSourceIconColor={
+          dataSourceRefs[currentDataSourceIndex]?.current?.iconColor
+        }
         clearQueue={clearQueue}
       >
         {userPreferences?.brainzplayer?.spotifyEnabled !== false && (

diff --git a/frontend/js/src/common/brainzplayer/BrainzPlayerUI.tsx b/frontend/js/src/common/brainzplayer/BrainzPlayerUI.tsx
@@ -33,6 +33,7 @@ import Queue from "./Queue";
 type BrainzPlayerUIProps = {
   currentDataSourceName?: string;
   currentDataSourceIcon?: IconProp;
+  currentDataSourceIconColor?: string;
   playPreviousTrack: () => void;
   playNextTrack: (invert?: boolean) => void;
   togglePlay: (invert?: boolean) => void;
@@ -78,6 +79,7 @@ function BrainzPlayerUI(props: React.PropsWithChildren<BrainzPlayerUIProps>) {
   const {
     currentDataSourceName,
     currentDataSourceIcon,
+    currentDataSourceIconColor,
     listenBrainzAPIBaseURI,
     currentListen,
     trackUrl,
@@ -269,7 +271,10 @@ function BrainzPlayerUI(props: React.PropsWithChildren<BrainzPlayerUIProps>) {
               target="_blank"
               rel="noopener noreferrer"
             >
-              <FontAwesomeIcon icon={currentDataSourceIcon!} />
+              <FontAwesomeIcon
+                icon={currentDataSourceIcon!}
+                color={currentDataSourceIconColor}
+              />
             </a>
           )}
           <FontAwesomeIcon

diff --git a/frontend/js/src/common/brainzplayer/MenuOptions.tsx b/frontend/js/src/common/brainzplayer/MenuOptions.tsx
@@ -14,6 +14,7 @@ import { getRecordingMBID } from "../../utils/utils";
 import SoundcloudPlayer from "./SoundcloudPlayer";
 import SpotifyPlayer from "./SpotifyPlayer";
 import YoutubePlayer from "./YoutubePlayer";
+import { dataSourcesInfo } from "../../settings/brainzplayer/BrainzPlayerSettings";
 
 type MenuOptionsProps = {
   currentListen?: Listen | JSPFTrack;
@@ -92,6 +93,7 @@ function MenuOptions(props: MenuOptionsProps) {
           {spotifyURL && (
             <ListenControl
               icon={faSpotify}
+              iconColor={dataSourcesInfo.spotify.color}
               text="Open in Spotify"
               link={spotifyURL}
               anchorTagAttributes={{
@@ -103,6 +105,7 @@ function MenuOptions(props: MenuOptionsProps) {
           {youtubeURL && (
             <ListenControl
               icon={faYoutube}
+              iconColor={dataSourcesInfo.youtube.color}
               text="Open in YouTube"
               link={youtubeURL}
               anchorTagAttributes={{
@@ -114,6 +117,7 @@ function MenuOptions(props: MenuOptionsProps) {
           {soundcloudURL && (
             <ListenControl
               icon={faSoundcloud}
+              iconColor={dataSourcesInfo.soundcloud.color}
               text="Open in Soundcloud"
               link={soundcloudURL}
               anchorTagAttributes={{

diff --git a/frontend/js/src/common/brainzplayer/SoundcloudPlayer.tsx b/frontend/js/src/common/brainzplayer/SoundcloudPlayer.tsx
@@ -9,6 +9,7 @@ import {
   searchForSoundcloudTrack,
 } from "../../utils/utils";
 import GlobalAppContext from "../../utils/GlobalAppContext";
+import { dataSourcesInfo } from "../../settings/brainzplayer/BrainzPlayerSettings";
 
 require("../../../lib/soundcloud-player-api");
 
@@ -91,6 +92,7 @@ export default class SoundcloudPlayer
   public name = "soundcloud";
   public domainName = "soundcloud.com";
   public icon = faSoundcloud;
+  public iconColor = dataSourcesInfo.soundcloud.color;
   iFrameRef?: React.RefObject<HTMLIFrameElement>;
   soundcloudPlayer?: SoundCloudHTML5Widget;
   retries = 0;

diff --git a/frontend/js/src/common/brainzplayer/SpotifyPlayer.tsx b/frontend/js/src/common/brainzplayer/SpotifyPlayer.tsx
@@ -19,6 +19,7 @@ import {
 } from "../../utils/utils";
 import { DataSourceType, DataSourceProps } from "./BrainzPlayer";
 import GlobalAppContext from "../../utils/GlobalAppContext";
+import { dataSourcesInfo } from "../../settings/brainzplayer/BrainzPlayerSettings";
 
 // Fix for LB-447 (Player does not play any sound)
 // https://github.com/spotify/web-playback-sdk/issues/75#issuecomment-487325589
@@ -104,6 +105,7 @@ export default class SpotifyPlayer
   public name = "spotify";
   public domainName = "spotify.com";
   public icon = faSpotify;
+  public iconColor = dataSourcesInfo.spotify.color;
   // Saving the access token outside of React state , we do not need it for any rendering purposes
   // and it simplifies some of the closure issues we've had with old tokens.
   private accessToken = "";

diff --git a/frontend/js/src/common/brainzplayer/YoutubePlayer.tsx b/frontend/js/src/common/brainzplayer/YoutubePlayer.tsx
@@ -24,6 +24,7 @@ import {
   searchForYoutubeTrack,
 } from "../../utils/utils";
 import { DataSourceProps, DataSourceType } from "./BrainzPlayer";
+import { dataSourcesInfo } from "../../settings/brainzplayer/BrainzPlayerSettings";
 
 export type YoutubePlayerState = {
   currentListen?: Listen;
@@ -117,6 +118,7 @@ export default class YoutubePlayer
   public name = "youtube";
   public domainName = "youtube.com";
   public icon = faYoutube;
+  public iconColor = dataSourcesInfo.youtube.color;
   youtubePlayer?: ExtendedYoutubePlayer;
   checkVideoLoadedTimerId?: NodeJS.Timeout;