Working spotify palette share feature

package.json

@@ -13,15 +13,20 @@
   "dependencies": {
     "axios": "^1.6.7",
     "bootstrap": "^5.3.2",
+    "canvg": "^4.0.1",
     "cors": "^2.8.5",
     "dotenv": "^16.4.4",
     "express": "^4.18.2",
     "firebase": "^10.8.0",
+    "html-to-image": "^1.11.11",
     "next": "^14.1.0",
     "react": "^18",
     "react-bootstrap": "^2.10.1",
     "react-dom": "^18",
-    "react-router-dom": "^6.22.0"
+    "react-native-share": "^10.0.2",
+    "react-router-dom": "^6.22.0",
+    "react-share": "^5.1.0",
+    "react-svg-to-image": "^3.0.0"
   },
   "devDependencies": {
     "autoprefixer": "^10.0.1",

src/components/SongPlayer.jsx

@@ -1,9 +1,28 @@
 import React, { useRef, useState, useEffect } from "react";
 
+import toImg from "react-svg-to-image";
+import * as htmlToImage from "html-to-image";
+import { Canvg } from "canvg";
+import GetSpotifyCode from "./SpotifyCodeGenerator";
+
 function SongPlayer({ song, token }) {
   const audioRef = useRef(null);
   const [isPlaying, setIsPlaying] = useState(false);
 
+  const addSongToQueue = () => {
+    // Use fetch for making HTTP requests
+    fetch(`http://localhost:5000/addSongToQueue?token=${token}&uri=${song.id}`)
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error("Failed to add song to queue");
+        }
+        // Handle success if needed
+      })
+      .catch((error) => {
+        console.error("Error adding song to queue:", error);
+      });
+  };
+
   const togglePlay = () => {
     const audioElement = audioRef.current;
 
@@ -16,6 +35,55 @@ function SongPlayer({ song, token }) {
     setIsPlaying(!isPlaying);
   };
 
+  // Function to handle sharing
+  const shareSong = async () => {
+    console.log("sharing song");
+
+    // Use Web Share API to share the default image
+    const svgString = await GetSpotifyCode(song.external_urls.spotify);
+    console.log(svgString);
+
+    const img = new Image();
+
+    // Set the source of the image
+    img.src = `data:image/svg+xml;utf8,${encodeURIComponent(svgString)}`;
+
+    // Wait for the image to load
+    img.onload = () => {
+      // Create a canvas element
+      const canvas = document.createElement("canvas");
+      canvas.width = img.width;
+      canvas.height = img.height;
+
+      // Draw the image on the canvas
+      canvas.getContext("2d")?.drawImage(img, 0, 0);
+
+      // Convert canvas to blob
+      canvas.toBlob((blob) => {
+        console.log(blob);
+
+        if (navigator.share) {
+          console.log("Web share API supported");
+          navigator
+            .share({
+              title: "Check out this song!",
+              text: `Listen to ${song.name}`,
+              url: song.external_urls.spotify,
+              files: [
+                new File([blob], "file.png", {
+                  type: blob.type,
+                }),
+              ],
+            })
+            .then(() => console.log("Shared successfully"))
+            .catch((error) => console.error("Error sharing:", error));
+        } else {
+          console.log("Web Share API not supported");
+        }
+      }, "image/png");
+    };
+  };
+
   return (
     <div
       key={song.id}
@@ -32,6 +100,9 @@ function SongPlayer({ song, token }) {
       <audio ref={audioRef} src={song.preview_url}>
         <track kind="captions" />
       </audio>
+      <button type="button" onClick={shareSong}>
+        Share
+      </button>
     </div>
   );
 }