fix props, lazyload on scrolling menu

src/components/card/Card.tsx

@@ -76,8 +76,8 @@ const Card = ({
   };
 
   return (
-    <StyledPanel tabIndex={0} bordered shaded cardSize={size}>
-      <Overlay cardSize={size}>
+    <StyledPanel tabIndex={0} bordered shaded cardsize={size} {...rest}>
+      <Overlay cardsize={size}>
         {lazyLoad ? (
           <LazyCardImg
             src={
@@ -94,7 +94,7 @@ const Card = ({
             alt="img"
             effect="opacity"
             onClick={handleClick}
-            cardSize={size}
+            cardsize={size}
             afterLoad={() => {
               cacheImage(
                 `${rest.details.cacheType}_${rest.details.id}.jpg`,
@@ -108,7 +108,7 @@ const Card = ({
             src={rest.coverArt}
             alt="img"
             onClick={handleClick}
-            cardSize={size}
+            cardsize={size}
           />
         )}
 
@@ -121,13 +121,13 @@ const Card = ({
           />
         )}
       </Overlay>
-      <InfoPanel cardSize={size}>
+      <InfoPanel cardsize={size}>
         <InfoSpan>
           <CardTitleButton
             appearance="link"
             size="sm"
             onClick={handleClick}
-            cardSize={size}
+            cardsize={size}
           >
             {rest.title}
           </CardTitleButton>
@@ -138,12 +138,12 @@ const Card = ({
               appearance="link"
               size="xs"
               onClick={handleSubClick}
-              cardSize={size}
+              cardsize={size}
             >
               {rest.subtitle}
             </CardSubtitleButton>
           ) : (
-            <CardSubtitle cardSize={size}>{rest.subtitle}</CardSubtitle>
+            <CardSubtitle cardsize={size}>{rest.subtitle}</CardSubtitle>
           )}
         </InfoSpan>
       </InfoPanel>

src/components/card/styled.tsx

@@ -3,32 +3,32 @@ import styled from 'styled-components';
 import { LazyLoadImage } from 'react-lazy-load-image-component';
 
 interface Card {
-  cardSize: number;
+  cardsize: number;
 }
 
-/* const getCardSize = (props: any) => {
-  return props.cardSize === 'xs'
+/* const getcardsize = (props: any) => {
+  return props.cardsize === 'xs'
     ? props.theme.cardXs
-    : props.cardSize === 'sm'
+    : props.cardsize === 'sm'
     ? props.theme.cardSm
-    : props.cardSize === 'md'
+    : props.cardsize === 'md'
     ? props.theme.cardMd
-    : props.cardSize === 'lg'
+    : props.cardsize === 'lg'
     ? props.theme.cardLg
     : props.theme.cardSm;
 }; */
 
 export const StyledPanel = styled(Panel)<Card>`
   text-align: center;
-  width: ${(props) => props.cardSize + 2};
-  height: ${(props) => props.cardSize + 55};
+  width: ${(props) => props.cardsize + 2};
+  height: ${(props) => props.cardsize + 55};
   &:hover {
     border: 1px solid ${(props) => props.theme.main};
   }
 `;
 
 export const InfoPanel = styled(Panel)<Card>`
-  width: ${(props) => props.cardSize};
+  width: ${(props) => props.cardsize};
 `;
 
 export const InfoSpan = styled.div`
@@ -45,13 +45,13 @@ export const CardTitleButton = styled(CardButton)`
   padding-top: 5px;
   padding-bottom: 2px;
   color: ${(props) => props.theme.titleText};
-  width: ${(props) => props.cardSize};
+  width: ${(props) => props.cardsize};
 `;
 
 export const CardSubtitleButton = styled(CardButton)`
   padding-bottom: 5px;
   color: ${(props) => props.theme.subtitleText};
-  width: ${(props) => props.cardSize};
+  width: ${(props) => props.cardsize};
 `;
 
 export const CardSubtitle = styled.div<Card>`
@@ -60,24 +60,24 @@ export const CardSubtitle = styled.div<Card>`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  width: ${(props) => props.cardSize};
+  width: ${(props) => props.cardsize};
 `;
 
 export const CardImg = styled.img<Card>`
-  height: ${(props) => props.cardSize};
-  width: ${(props) => props.cardSize};
+  height: ${(props) => props.cardsize};
+  width: ${(props) => props.cardsize};
 `;
 
 export const LazyCardImg = styled(LazyLoadImage)<Card>`
-  height: ${(props) => props.cardSize};
-  width: ${(props) => props.cardSize};
+  height: ${(props) => props.cardsize};
+  width: ${(props) => props.cardsize};
 `;
 
 export const Overlay = styled.div<Card>`
   background-color: #1a1d24;
   position: relative;
-  height: ${(props) => props.cardSize};
-  width: ${(props) => props.cardSize};
+  height: ${(props) => props.cardsize};
+  width: ${(props) => props.cardsize};
   &:hover {
     background-color: #000;
     opacity: 0.5;

src/components/scrollingmenu/ScrollingMenu.tsx

@@ -64,6 +64,9 @@ const ScrollingMenu = ({
             playClick={{ type: 'album', id: item.id }}
             hasHoverButtons
             size={cardSize}
+            details={{ cacheType: 'album', ...item }}
+            lazyLoad
+            style={{ margin: '0px 5px 0px 5px' }}
           />
         ))}
       </ScrollMenu>

src/components/shared/cacheImage.ts

@@ -55,10 +55,16 @@ const cacheImage = (fileName: string, url: string, cacheType: string) => {
   // Check if an existing cached image exists
   if (!fs.existsSync(cachedImgPath) && !fs.existsSync(tempImgPath)) {
     if (!options.url.includes('placeholder')) {
+      try {
         download
           .image(options)
           .then(() => fs.renameSync(tempImgPath, cachedImgPath))
           .catch((err: any) => console.log(err));
+      } finally {
+        if (fs.existsSync(tempImgPath)) {
+          fs.rmSync(tempImgPath);
+        }
+      }
     }
   }
 };