Merge branch 'master' into donations

frontend/css/entity-pages.less

@@ -117,19 +117,21 @@
       min-height: 150px;
       min-width: 0;
       .artist-page& {
-        max-height: 520px;
+        max-height: 500px;
         overflow-y: hidden;
         border-bottom-style: inset;
         position: relative;
-        &::after {
-          content: "";
-          background-image: @white-gradient;
-          position: absolute;
-          bottom: 0;
-          height: 8em;
-          width: 100%;
+        &.expanded {
+          max-height: initial;
+          padding-bottom: 4em;
         }
       }
+
+      .read-more {
+        bottom: 0;
+        padding: 1em 0;
+      }
+
       .album-page& .listen-card .track-position {
         flex: 0 3em;
         align-self: center;
@@ -169,6 +171,9 @@
         justify-items: center;
         grid-template-columns: repeat(auto-fill, minmax(190px, max-content));
         grid-template-rows: repeat(2, 1fr);
+        &.single-row {
+          grid-template-rows: repeat(1, 1fr);
+        }
         .cover-art {
           aspect-ratio: 1;
           background: lightgrey;

frontend/css/main.less

@@ -40,6 +40,7 @@
 @import "accordion.less";
 @import "donors-page.less";
 @import "donations.less";
+@import "scroll-container.less";
 
 @icon-font-path: "/static/fonts/";
 

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;

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;

frontend/css/release-card.less

@@ -116,7 +116,7 @@
   }
 
   .release-coverart.hide-image {
-    display: none;
+    display: none !important;
     height: 0;
   }
 

frontend/css/scroll-container.less

@@ -0,0 +1,90 @@
+.horizontal-scroll-container {
+  position: relative;
+
+  .horizontal-scroll-container.dragging .horizontal-scroll * {
+    // Prevent text selection and interactions when the user is actively dragging to scroll
+    pointer-events: none;
+    user-select: none;
+  }
+
+  .horizontal-scroll {
+    overflow-x: auto;
+    .small-scrollbar();
+    &.no-scrollbar {
+      /* 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: 2;
+    opacity: 1;
+    transition: opacity 300ms linear;
+    &.backward {
+      background: linear-gradient(to right, @white 10%, transparent);
+      text-align: left;
+      left: -1px;
+    }
+    &.forward {
+      background: linear-gradient(to left, @white 10%, transparent);
+      right: -1px;
+      text-align: right;
+    }
+  }
+  &.scroll-start .nav-button.backward,
+  &.scroll-end& .nav-button.forward {
+    opacity: 0;
+    pointer-events: none;
+  }
+  // Hide arrow buttons when the container does not overflow (class added with javascript)
+  &.no-scroll .nav-button {
+    display: 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;
+  }
+}

frontend/js/src/about/add-data/AddData.tsx

@@ -255,7 +255,7 @@ export default function AddData() {
               OngakuKiroku
             </a>
           </em>
-          , a ListenBrainz scrobbler for Swinsian and Music.app on macOS devices
+          , a ListenBrainz submitter for Swinsian and Music.app on macOS devices
         </li>
         <li>
           <em>
@@ -265,11 +265,18 @@ export default function AddData() {
           </em>
           , a universal Linux scrobbler for MPRIS enabled players
         </li>
+        <li>
+          <em>
+            <a href="https://scrobblerad.io/">ScrobbleRadio</a>
+          </em>
+          , a streaming radio player and listen submitter for a curated list of
+          global radio stations
+        </li>
         <li>
           <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>
@@ -322,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>

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>
   );
 }