From d3e4c7d975168863700ee541cf66a005a65bae9f Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Tue, 8 Nov 2022 03:58:52 -0800
Subject: [PATCH] Display album artist for subsonic servers

---
 .../player/components/left-controls.tsx         | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/renderer/features/player/components/left-controls.tsx b/src/renderer/features/player/components/left-controls.tsx
index c3422d8b1..20ae7c9ea 100644
--- a/src/renderer/features/player/components/left-controls.tsx
+++ b/src/renderer/features/player/components/left-controls.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Center, Group } from '@mantine/core';
 import { motion, AnimatePresence, LayoutGroup } from 'framer-motion';
 import { RiArrowUpSLine, RiDiscLine } from 'react-icons/ri';
@@ -5,8 +6,9 @@ import { generatePath, Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { Button, Text } from '@/renderer/components';
 import { AppRoute } from '@/renderer/router/routes';
-import { useAppStore, usePlayerStore } from '@/renderer/store';
+import { useAppStore, useAuthStore, usePlayerStore } from '@/renderer/store';
 import { fadeIn } from '@/renderer/styles';
+import { ServerType } from '@/renderer/types';
 
 const LeftControlsContainer = styled.div`
   display: flex;
@@ -73,9 +75,16 @@ const LineItem = styled.div<{ $secondary?: boolean }>`
 export const LeftControls = () => {
   const hideImage = useAppStore((state) => state.sidebar.image);
   const setSidebar = useAppStore((state) => state.setSidebar);
+  const serverType = useAuthStore((state) => state.currentServer?.type);
   const song = usePlayerStore((state) => state.current.song);
+
   const title = song?.name;
-  const artists = song?.artists;
+
+  const artists =
+    serverType === ServerType.JELLYFIN
+      ? song?.artists
+      : song?.album?.albumArtists;
+
   const album = song?.album;
 
   return (
@@ -142,7 +151,7 @@ export const LeftControls = () => {
           </LineItem>
           <LineItem $secondary>
             {artists?.map((artist, index) => (
-              <>
+              <React.Fragment key={`bar-${artist.id}`}>
                 {index > 0 && (
                   <Text $secondary style={{ display: 'inline-block' }}>
                     ,
@@ -164,7 +173,7 @@ export const LeftControls = () => {
                 >
                   {artist.name || '—'}
                 </Text>
-              </>
+              </React.Fragment>
             ))}
           </LineItem>
           <LineItem $secondary>