new currently playing music card

2023-12-19 17:34:35 -05:00
parent 7468125ad3
commit 30173a5bbd
8 changed files with 175 additions and 3 deletions
@@ -22,6 +22,11 @@ const config = {
        protocol: "https",
        port: '',
        hostname: "storage.thatalex.dev" 
+      },
+      {
+        protocol: "https",
+        port: '',
+        hostname: "lastfm.freetls.fastly.net"
      }
    ]
  }
@@ -17,6 +17,7 @@
        "@trpc/next": "^10.37.1",
        "@trpc/react-query": "^10.37.1",
        "@trpc/server": "^10.37.1",
+        "axios": "^1.6.2",
        "grommet-icons": "^4.11.0",
        "next": "^13.5.4",
        "next-auth": "^4.23.0",
@@ -1119,6 +1120,11 @@
        "has-symbols": "^1.0.3"
      }
    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
    "node_modules/autoprefixer": {
      "version": "10.4.16",
      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.16.tgz",
@@ -1177,6 +1183,16 @@
        "node": ">=4"
      }
    },
+    "node_modules/axios": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.2.tgz",
+      "integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
    "node_modules/axobject-query": {
      "version": "3.2.1",
      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
@@ -1404,6 +1420,17 @@
      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
      "dev": true
    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
    "node_modules/commander": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -1552,6 +1579,14 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
    "node_modules/dequal": {
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -2292,6 +2327,25 @@
      "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==",
      "dev": true
    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
+      "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/for-each": {
      "version": "0.3.3",
      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -2301,6 +2355,19 @@
        "is-callable": "^1.1.3"
      }
    },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/fraction.js": {
      "version": "4.3.7",
      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -3245,6 +3312,25 @@
        "node": ">=8.6"
      }
    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
    "node_modules/minimatch": {
      "version": "3.1.2",
      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -3977,6 +4063,11 @@
        "react-is": "^16.13.1"
      }
    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
    "node_modules/punycode": {
      "version": "2.3.0",
      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
@@ -20,6 +20,7 @@
    "@trpc/next": "^10.37.1",
    "@trpc/react-query": "^10.37.1",
    "@trpc/server": "^10.37.1",
+    "axios": "^1.6.2",
    "grommet-icons": "^4.11.0",
    "next": "^13.5.4",
    "next-auth": "^4.23.0",
@@ -0,0 +1,30 @@
+import Image from "next/image";
+import Link from "next/link";
+import { api } from "@/utils/api";
+
+export default function MusicCard() {
+    const musicFetch = api.misc.song.useQuery()
+
+    if (musicFetch.data) {
+        return (
+            <Link href="https://last.fm/user/lulawex" target="_blank">
+                <div className="bg-white max-w-xs text-black rounded-sm leading-tight">
+                    <div className="flex items-start p-2">
+                        <div className="flex-none">
+                            <Image 
+                                src={musicFetch.data.track.image[3]?.["#text"] ?? ""}
+                                alt="Cover Art" 
+                                width="50"
+                                height="50"
+                            />
+                        </div>
+                        <div className="flex flex-col ml-2 pt-1.5">
+                            <h1>{musicFetch.data.track.name}</h1>
+                            <p>{musicFetch.data.track.artist["#text"]}</p>
+                        </div>
+                    </div>
+                </div>
+            </Link>
+        )
+    }
+}
@@ -11,7 +11,7 @@ export default function Footer() {
                    </Link>
                </p>
                <p className="text-center">
-                    All music, game, TV and movie covers are owned by their respective authors.
+                    All music, game, TV and movie covers are owned by their respective authors.<br/>Currently playing info provided by Last.fm
                </p>
                <p className="text-center">
                    &copy; Alex Frantz, 2023
@@ -2,6 +2,7 @@ import RootLayout from "@/components/RootLayout";
 import Dropdown from "@/components/Dropdown";
 import ProjectCard from "@/components/ProjectsCard";
 import Image from 'next/image';
+import MusicCard from '@/components/MusicCard'

 export default function Home() {
    return (
@@ -45,6 +46,9 @@ function Music() {
        <Image key="1" src="https://storage.thatalex.dev/content/5sos.png" alt="5 Seconds of Summer Cover" width="100" height="100" className="inline mr-2" />,
        <Image key="2" src="https://storage.thatalex.dev/content/tlou-covers-and-rarities.jpg" alt="TLOU Covers and Rarities Cover" width="100" height="100" className="inline mr-2" />,
        <Image key="3" src="https://storage.thatalex.dev/content/zach-bryan.png" alt="Zach Bryan Cover" width="100" height="100" className="inline mr-2" />,
-        <Image key="4" src="https://storage.thatalex.dev/content/reputation.jpg" alt="Reputation Cover" width="100" height="100" className="inline mr-2" />
+        <Image key="4" src="https://storage.thatalex.dev/content/reputation.jpg" alt="Reputation Cover" width="100" height="100" className="inline mr-2" />,
+        <div key="5" className="float-right pt-8">
+            <MusicCard key="5" />
+        </div>
    ]
 }
@@ -1,5 +1,6 @@
 import { postRouter } from "@/server/api/routers/post";
 import { linksRouter } from "./routers/links";
+import { miscRouter } from "./routers/misc";
 import { createTRPCRouter } from "@/server/api/trpc";

 /**
@@ -9,7 +10,8 @@ import { createTRPCRouter } from "@/server/api/trpc";
 */
 export const appRouter = createTRPCRouter({
  post: postRouter,
-  links: linksRouter
+  links: linksRouter,
+  misc: miscRouter
 });

 // export type definition of API
@@ -0,0 +1,39 @@
+import axios from 'axios';
+
+import {
+    createTRPCRouter,
+    publicProcedure
+} from '@/server/api/trpc';
+
+type ImageListType = {
+    "size": string,
+    "#text": string
+}
+
+type LastTrackType = {
+    status: number,
+    track: {
+        "@attr": object,
+        "album": {
+            "mbid": string,
+            "#text": string
+        },
+        "artist": {
+            "mbid": string,
+            "#text": string,
+        },
+        "image": ImageListType[],
+        "mbid": string,
+        "name": string,
+        "streamable": number,
+        "url": string
+    }
+}
+
+export const miscRouter = createTRPCRouter({
+    song: publicProcedure
+    .query(async () => {
+        const response = await axios.get<LastTrackType>("https://api.thatalex.dev/v3/music/last-track")
+        return response.data
+    }),
+})