Replace placeholder with png

src/api/api.ts

@@ -85,7 +85,7 @@ axiosRetry(api, {
 
 const getCoverArtUrl = (item: any, useLegacyAuth: boolean, size?: number) => {
   if (!item.coverArt && !item.artistImageUrl) {
-    return 'img/placeholder.jpg';
+    return 'img/placeholder.png';
   }
 
   if (!item.coverArt && !item.artistImageUrl?.match('2a96cbd8b46e442fc41c2b86b821562f')) {
@@ -93,7 +93,7 @@ const getCoverArtUrl = (item: any, useLegacyAuth: boolean, size?: number) => {
   }
 
   if (item.artistImageUrl?.match('2a96cbd8b46e442fc41c2b86b821562f')) {
-    return 'img/placeholder.jpg';
+    return 'img/placeholder.png';
   }
 
   if (useLegacyAuth) {
@@ -256,7 +256,7 @@ const normalizePlaylist = (item: any) => {
     duration: item.duration,
     created: item.created,
     changed: item.changed,
-    image: item.songCount > 0 ? getCoverArtUrl(item, legacyAuth, 350) : 'img/placeholder.jpg',
+    image: item.songCount > 0 ? getCoverArtUrl(item, legacyAuth, 350) : 'img/placeholder.png',
     type: Item.Playlist,
     uniqueId: nanoid(),
     song: (item.entry || []).map((entry: any) => normalizeSong(entry)),

src/api/jellyfinApi.ts

@@ -71,7 +71,7 @@ const getStreamUrl = (id: string) => {
 
 const getCoverArtUrl = (item: any, size?: number) => {
   if (!item.ImageTags?.Primary) {
-    return 'img/placeholder.jpg';
+    return 'img/placeholder.png';
   }
 
   return (

src/components/player/PlayerBar.tsx

@@ -28,7 +28,7 @@ import { setStatus, resetPlayer } from '../../redux/playerSlice';
 import { useAppDispatch, useAppSelector } from '../../redux/hooks';
 import Player from './Player';
 import CustomTooltip from '../shared/CustomTooltip';
-import placeholderImg from '../../img/placeholder.jpg';
+import placeholderImg from '../../img/placeholder.png';
 import DebugWindow from '../debug/DebugWindow';
 import { CoverArtWrapper } from '../layout/styled';
 import { getCurrentEntryList, isCached } from '../../shared/utils';

src/components/playlist/PlaylistView.tsx

@@ -99,7 +99,7 @@ const PlaylistView = ({ ...rest }) => {
   );
 
   const [customPlaylistImage, setCustomPlaylistImage] = useState<string | string[]>(
-    'img/placeholder.jpg'
+    'img/placeholder.png'
   );
   const [editName, setEditName] = useState('');
   const [editDescription, setEditDescription] = useState('');
@@ -477,7 +477,7 @@ const PlaylistView = ({ ...rest }) => {
       const uniqueAlbums: any = _.uniqBy(data?.song, 'albumId');
 
       if (uniqueAlbums.length === 0) {
-        setCustomPlaylistImage('img/placeholder.jpg');
+        setCustomPlaylistImage('img/placeholder.png');
       } // If less than 4 images, we'll just set a single random image
       else if (uniqueAlbums.length > 0 && uniqueAlbums.length < 4) {
         setCustomPlaylistImage(uniqueAlbums[_.random(0, uniqueAlbums.length - 1)]?.image);