download images also of downloading song

dark mode bugs fixed

src/components/RenderDatabase.js

@@ -54,7 +54,7 @@ export const useSongMethods = songId => {
   }, []);
 
   const handleDownload = async songId => {
-    console.log("here is the id", songId);
+    // console.log("here is the id", songId);
     const res = await getAudioLink.get("/song", {
       params: { id: songId }
     });
@@ -72,9 +72,7 @@ export const useSongMethods = songId => {
     setDontAskPopup(true);
   };
 
-  useEffect(() => {
-    console.log("dont ask state", dontAskPopup);
-  }, [dontAskPopup]);
+
 
   const deleteTheSong = async checkBox => {
     const deleted = await deleteSongAudio(currentId);
@@ -126,6 +124,7 @@ const RenderDatabase = props => {
     setCurrentVideoSnippet({
       id: song.videoId,
       audio: song.audio,
+      thumbnail: song.thumbnail,
       title: song.title,
       channelTitle: song.channelTitle,
       maxThumbnail: `https://img.youtube.com/vi/${
@@ -223,7 +222,6 @@ const RenderDatabase = props => {
       </>
     );
   });
-  console.log(renderResult);
 
   const renderItem = React.forwardRef((row, ref) => (
     <div ref={ref} style={{ ...row.style,  maxWidth: "1000px", left: "50%", transform: "translateX(-50%)"}}>

src/components/player/MainPlayer.js

@@ -38,9 +38,11 @@ let relatedVideosVar;
 const MainPlayer = ({ location, history }) => {
   let params = new URLSearchParams(location.search);
 
-  const { currentVideoSnippet, setCurrentVideoSnippet } = useContext(
-    GlobalContext
-  );
+  const {
+    currentVideoSnippet,
+    setCurrentVideoSnippet,
+    themeSelectValue
+  } = useContext(GlobalContext);
 
   const [relatedVideos, setRelatedVideos] = useState([]);
   const [isItFromPlaylist, setIsItFromPlaylist] = useState(false);
@@ -294,7 +296,12 @@ const MainPlayer = ({ location, history }) => {
   if (playerState === "minimized") {
     playerStyle.transform = "translateY(calc(100% - 106px))";
     playerStyle.zIndex = 0;
-    playerStyle.background = "#e91e63";
+    // if theme is not dark then only apply the pink style
+    if (themeSelectValue === "Dark") {
+      playerStyle.background = "#333";
+    } else {
+      playerStyle.background = "#e91e63";
+    }
     // playerStyle.bottom = "48px";
     // calculate the top height and we are subtracting 148px becz
     // 48 is the value of menu bar and 100px is minimized height
@@ -305,6 +312,9 @@ const MainPlayer = ({ location, history }) => {
   if (playerState === "maximized") {
     // make body overflow hidden 🙈
     body.style.overflow = "hidden";
+    if (themeSelectValue === "Dark") {
+      playerStyle.background = "#333";
+    }
   }
 
   if (playerState === "playlist") {

src/components/player/MusicArt.js

@@ -57,7 +57,7 @@ const MusicArt = ({ data, rating, audioEl }) => {
       e.target.src = data.sdThumbnail;
     }
   };
-
+  
   // double tap to like the song
   const likeSong = useCallback(() => {
     // run the like function to like provided with song id and rating
@@ -93,6 +93,15 @@ const MusicArt = ({ data, rating, audioEl }) => {
     return data.title.replace(re, "").slice(0, 25) + "...";
   };
 
+  const getThumbnail = () => {
+    // if the thumbnail is downloaded then get it from database or else use the url to fetch
+    if (data.thumbnail) {
+      return window.URL.createObjectURL(data.thumbnail);
+    } else {
+      return data.maxThumbnail;
+    }
+  };
+
   return (
     <Grid
       container
@@ -127,7 +136,7 @@ const MusicArt = ({ data, rating, audioEl }) => {
             boxShadow: "#0000008c 1px 3px 8px"
           }}
           alt="video thumbnail"
-          src={data.maxThumbnail}
+          src={getThumbnail()}
           imgProps={{ onLoad: e => checkImg(e) }}
         />
       </motion.div>

src/external/saveSong.js

@@ -1,5 +1,7 @@
 import Dexie from "dexie";
-import 'dexie-observable';
+import "dexie-observable";
+import { promised } from "q";
+import { promises } from "fs";
 
 // Define your database
 export const db = new Dexie("Song_Database");
@@ -81,10 +83,15 @@ export const downloadSong = async (id, url) => {
     db.songs.update(id, {
       downloadState: "downloading"
     });
-    const song = await getSongBlob(url);
+    const thumbURL = `https://i.ytimg.com/vi/${id}/hqdefault.jpg`;
+    const [thumbnailBlob, songBlob] = await Promise.all([
+      fetchProxiedBlob(thumbURL),
+      fetchProxiedBlob(url)
+    ]);
     db.songs.update(id, {
       downloadState: "downloaded",
-      audio: song
+      thumbnail: thumbnailBlob,
+      audio: songBlob
     });
     return "downloaded";
   } catch (error) {
@@ -100,7 +107,7 @@ export const deleteSongAudio = async id => {
   return "song deleted";
 };
 
-function getSongBlob(url) {
+function fetchProxiedBlob(url) {
   return new Promise(function(resolve, reject) {
     var xhr = new XMLHttpRequest();
     xhr.open("GET", "https://server.ylight.xyz/proxy/" + url);