Add Branding Colors to Icons

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

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

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 && (

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

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={{

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;

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 = "";

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;
 

frontend/js/src/common/listens/ListenCard.tsx

@@ -65,6 +65,7 @@ import {
   BrainzPlayerActionType,
   useBrainzPlayerDispatch,
 } from "../brainzplayer/BrainzPlayerContext";
+import { dataSourcesInfo } from "../../settings/brainzplayer/BrainzPlayerSettings";
 
 export type ListenCardProps = {
   listen: Listen;
@@ -603,6 +604,7 @@ export class ListenCard extends React.Component<
                     {spotifyURL && (
                       <ListenControl
                         icon={faSpotify}
+                        iconColor={dataSourcesInfo.spotify.color}
                         title="Open in Spotify"
                         text="Open in Spotify"
                         key="Open in Spotify"
@@ -616,6 +618,7 @@ export class ListenCard extends React.Component<
                     {youtubeURL && (
                       <ListenControl
                         icon={faYoutube}
+                        iconColor={dataSourcesInfo.youtube.color}
                         title="Open in YouTube"
                         text="Open in YouTube"
                         key="Open in YouTube"
@@ -629,6 +632,7 @@ export class ListenCard extends React.Component<
                     {soundcloudURL && (
                       <ListenControl
                         icon={faSoundcloud}
+                        iconColor={dataSourcesInfo.soundcloud.color}
                         title="Open in Soundcloud"
                         text="Open in Soundcloud"
                         key="Open in Soundcloud"

frontend/js/src/common/listens/ListenControl.tsx

@@ -12,6 +12,7 @@ export type ListenControlProps = {
   iconClassName?: string;
   action?: (event: React.MouseEvent) => void;
   icon?: IconDefinition;
+  iconColor?: string;
   iconSize?: SizeProp;
   text: string;
   dataToggle?: string;
@@ -34,6 +35,7 @@ function ListenControl(props: ListenControlProps) {
     iconClassName,
     action,
     icon,
+    iconColor,
     iconSize,
     text,
     dataToggle,
@@ -55,7 +57,7 @@ function ListenControl(props: ListenControlProps) {
         title={title ?? text}
         {...anchorTagAttributes}
       >
-        {icon && <FontAwesomeIcon icon={icon} />}
+        {icon && <FontAwesomeIcon icon={icon} color={iconColor} />}
         &nbsp;{text}
       </a>
     );

frontend/js/src/settings/brainzplayer/BrainzPlayerSettings.tsx

@@ -21,7 +21,7 @@ import { ToastMsg } from "../../notifications/Notifications";
 import AppleMusicPlayer from "../../common/brainzplayer/AppleMusicPlayer";
 import Card from "../../components/Card";
 
-const dataSourcesInfo = {
+export const dataSourcesInfo = {
   youtube: {
     name: "YouTube",
     icon: faYoutube,