From 4dc2e16f079269327e7318d732e5876e300677ea Mon Sep 17 00:00:00 2001
From: yanosea <myanoshi0626@gmail.com>
Date: Mon, 1 Apr 2024 00:39:22 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8refactor:=20refactor=20spotify=20st?=
 =?UTF-8?q?atus=20implement?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env                                     |   2 -
 front/src/components/Footer.astro        | 118 +---------------
 front/src/components/SpotifyStatus.astro |  40 +++---
 front/src/libs/spotify.ts                | 173 ++++++++++++++++++-----
 4 files changed, 159 insertions(+), 174 deletions(-)

diff --git a/.env b/.env
index d218424..da25da8 100644
--- a/.env
+++ b/.env
@@ -6,8 +6,6 @@ FRONT_SSL_CRT_FILE_NAME=
 FRONT_SSL_PRIVATE_KEY_FILE_NAME=
 BACK_PORT=
 BACK_CONTAINER_NAME=
-NOWPLAYING_URL=
-LASTPLAYED_URL=
 SPOTIFY_ID=
 SPOTIFY_SECRET=
 SPOTIFY_REDIRECT_URI=
diff --git a/front/src/components/Footer.astro b/front/src/components/Footer.astro
index 2e05558..1d71ef0 100644
--- a/front/src/components/Footer.astro
+++ b/front/src/components/Footer.astro
@@ -24,118 +24,8 @@ const year = new Date().getFullYear();
   </span>
 </div>
 
-<script is:inline>
-  updateTrackInfo();
-  setInterval(updateTrackInfo, 60000);
-
-  async function updateTrackInfo() {
-    const spotifyStatusElement = document.getElementById("SpotifyStatus");
-    try {
-      const [isNowPlaying, track] = await getTrackInfo();
-      spotifyStatusElement.style.display = "flex";
-      if (isNowPlaying) {
-        spotifyStatusElement.querySelector("#NowPlaying").style.display =
-          "flex";
-        spotifyStatusElement.querySelector("#LastPlayed").style.display =
-          "none";
-
-        nowPlayingElement = spotifyStatusElement.querySelector("#NowPlaying");
-
-        nowPlayingElement.querySelector("#ImgLink").href = track.trackUrl;
-        nowPlayingElement.querySelector("#ImgSrc").src = track.imageUrl;
-        nowPlayingElement.querySelector("#TrackLink").href = track.trackUrl;
-        nowPlayingElement.querySelector("#TrackName").textContent =
-          `track : ${track.trackName}`;
-        nowPlayingElement.querySelector("#AlbumLink").href = track.albumUrl;
-        nowPlayingElement.querySelector("#AlbumName").textContent =
-          `album : ${track.albumName}`;
-        nowPlayingElement.querySelector("#ArtistLink").href = track.artistUrl;
-        nowPlayingElement.querySelector("#ArtistName").textContent =
-          `artist : ${track.artistName}`;
-      } else {
-        spotifyStatusElement.querySelector("#NowPlaying").style.display =
-          "none";
-        spotifyStatusElement.querySelector("#LastPlayed").style.display =
-          "flex";
-        lastPlayedElement = spotifyStatusElement.querySelector("#LastPlayed");
-
-        lastPlayedElement.querySelector("#ImgLink").href = track.trackUrl;
-        lastPlayedElement.querySelector("#ImgSrc").src = track.imageUrl;
-        lastPlayedElement.querySelector("#PlayedAt").textContent =
-          `played at : ${track.playedAt}`;
-        lastPlayedElement.querySelector("#TrackLink").href = track.trackUrl;
-        lastPlayedElement.querySelector("#TrackName").textContent =
-          `track : ${track.trackName}`;
-        lastPlayedElement.querySelector("#AlbumLink").href = track.albumUrl;
-        lastPlayedElement.querySelector("#AlbumName").textContent =
-          `album : ${track.albumName}`;
-        lastPlayedElement.querySelector("#ArtistLink").href = track.artistUrl;
-        lastPlayedElement.querySelector("#ArtistName").textContent =
-          `artist : ${track.artistName}`;
-      }
-    } catch {
-      spotifyStatusElement.style.display = "none";
-      console.error("failed to update track info...");
-    }
-  }
-
-  async function getTrackInfo() {
-    let isNowPlaying = null;
-    let track = null;
-
-    const isDevelopment =
-      window.location.hostname === "localhost" ||
-      window.location.hostname === "127.0.0.1";
-    const NOWPLAYING_URL = isDevelopment
-      ? "http://localhost:1323/api/nowplaying"
-      : "https://yanosea.org/api/nowplaying";
-    const LASTPLAYED_URL = isDevelopment
-      ? "http://localhost:1323/api/lastplayed"
-      : "https://yanosea.org/api/lastplayed";
-
-    try {
-      const nowPlayingResponse = await fetch(NOWPLAYING_URL);
-      console.log("fetched nowplaying!");
-      if (nowPlayingResponse.ok && nowPlayingResponse.status !== 204) {
-        const nowPlayingData = await nowPlayingResponse.json();
-        isNowPlaying = true;
-        track = {
-          imageUrl: nowPlayingData.imageUrl,
-          trackName: nowPlayingData.trackName,
-          trackUrl: nowPlayingData.trackUrl,
-          albumName: nowPlayingData.albumName,
-          albumUrl: nowPlayingData.albumUrl,
-          artistName: nowPlayingData.artistName,
-          artistUrl: nowPlayingData.artistUrl,
-        };
-      }
-    } catch {
-      console.error("failed fetching nowplaying...");
-    }
-
-    if (isNowPlaying == null) {
-      try {
-        const lastPlayedResponse = await fetch(LASTPLAYED_URL);
-        console.log("fetched lastplayed!");
-        if (lastPlayedResponse.ok && lastPlayedResponse.status !== 204) {
-          const lastPlayedData = await lastPlayedResponse.json();
-          isNowPlaying = false;
-          track = {
-            imageUrl: lastPlayedData.imageUrl,
-            playedAt: lastPlayedData.playedAt,
-            trackName: lastPlayedData.trackName,
-            trackUrl: lastPlayedData.trackUrl,
-            albumName: lastPlayedData.albumName,
-            albumUrl: lastPlayedData.albumUrl,
-            artistName: lastPlayedData.artistName,
-            artistUrl: lastPlayedData.artistUrl,
-          };
-        }
-      } catch {
-        console.error("failed fetching lastplayed...");
-      }
-    }
-
-    return [isNowPlaying, track];
-  }
+<script>
+  import { updateSpotifyStatus } from "../libs/spotify.ts";
+  setInterval(updateSpotifyStatus, 60000);
+  updateSpotifyStatus();
 </script>
diff --git a/front/src/components/SpotifyStatus.astro b/front/src/components/SpotifyStatus.astro
index e3520ec..d629e0e 100644
--- a/front/src/components/SpotifyStatus.astro
+++ b/front/src/components/SpotifyStatus.astro
@@ -2,14 +2,14 @@
 import { Icon } from "astro-icon/components";
 ---
 
-<span id="SpotifyStatus" style="display: none" transition:persist>
+<span id="spotifyStatus" style="display: none" transition:persist>
   <span
-    id="NowPlaying"
+    id="nowPlaying"
     class="flex flex-col sm:flex-row w-full justify-center items-center space-x-0 sm:space-x-4 space-y-2 sm:space-y-0"
     style="display: none"
   >
     <span class="flex flex-col justify-center items-center">
-      <a id="ImgLink" href="" target="_blank">
+      <a id="nowPlayingImgLink" href="" target="_blank">
         <span
           class="flex flex-col justify-center items-center space-y-1 hover:text-blue-600 transition-colors"
         >
@@ -18,7 +18,7 @@ import { Icon } from "astro-icon/components";
             <span class="ml-2">now playing</span>
           </p>
           <img
-            id="ImgSrc"
+            id="nowPlayingImgSrc"
             src=""
             alt="album cover"
             class="object-scale-down h-24 w-24"
@@ -38,34 +38,34 @@ import { Icon } from "astro-icon/components";
           <span class="ml-2 text-emerald-500">yanosea online!</span>
         </p>
       </a>
-      <a id="TrackLink" href="" target="_blank">
+      <a id="nowPlayingTrackLink" href="" target="_blank">
         <p class="flex items-center transition-colors hover:text-blue-600">
           <Icon class="w-4 h-4" name="ph:music-note-fill" />
-          <span id="TrackName" class="ml-2"></span>
+          <span id="nowPlayingTrackName" class="ml-2"></span>
         </p>
       </a>
-      <a id="AlbumLink" href="" target="_blank">
+      <a id="nowPlayingAlbumLink" href="" target="_blank">
         <p class="flex items-center transition-colors hover:text-blue-600">
           <Icon class="w-4 h-4" name="ph:disc-fill" />
-          <span id="AlbumName" class="ml-2"></span>
+          <span id="nowPlayingAlbumName" class="ml-2"></span>
         </p>
       </a>
-      <a id="ArtistLink" href="" target="_blank">
+      <a id="nowPlayingArtistLink" href="" target="_blank">
         <p class="flex items-center transition-colors hover:text-blue-600">
           <Icon class="w-4 h-4" name="ph:microphone-stage-fill" />
-          <span id="ArtistName" class="ml-2"></span>
+          <span id="nowPlayingArtistName" class="ml-2"></span>
         </p>
       </a>
     </span>
   </span>
 
   <span
-    id="LastPlayed"
+    id="lastPlayed"
     class="flex flex-col sm:flex-row w-full justify-center items-center space-x-0 sm:space-x-4 space-y-2 sm:space-y-0"
     style="display: none"
   >
     <span class="flex flex-col justify-center items-center">
-      <a id="ImgLink" href="" target="_blank">
+      <a id="lastPlayedImgLink" href="" target="_blank">
         <span
           class="flex flex-col justify-center items-center space-y-1 hover:text-blue-600 transition-colors"
         >
@@ -74,7 +74,7 @@ import { Icon } from "astro-icon/components";
             <span class="ml-2">last played</span>
           </p>
           <img
-            id="ImgSrc"
+            id="lastPlayedImgSrc"
             src=""
             alt="album cover"
             class="object-scale-down h-24 w-24"
@@ -96,24 +96,24 @@ import { Icon } from "astro-icon/components";
       </a>
       <p class="flex items-center transition-colors">
         <Icon class="w-4 h-4" name="ph:clock-fill" />
-        <span id="PlayedAt" class="ml-2"></span>
+        <span id="lastPlayedPlayedAt" class="ml-2"></span>
       </p>
-      <a id="TrackLink" href="" target="_blank">
+      <a id="lastPlayedTrackLink" href="" target="_blank">
         <p class="flex items-center transition-colors hover:text-blue-600">
           <Icon class="w-4 h-4" name="ph:music-note-fill" />
-          <span id="TrackName" class="ml-2"></span>
+          <span id="lastPlayedTrackName" class="ml-2"></span>
         </p>
       </a>
-      <a id="AlbumLink" href="" target="_blank">
+      <a id="lastPlayedAlbumLink" href="" target="_blank">
         <p class="flex items-center transition-colors hover:text-blue-600">
           <Icon class="w-4 h-4" name="ph:disc-fill" />
-          <span id="AlbumName" class="ml-2"></span>
+          <span id="lastPlayedAlbumName" class="ml-2"></span>
         </p>
       </a>
-      <a id="ArtistLink" href="" target="_blank">
+      <a id="lastPlayedArtistLink" href="" target="_blank">
         <p class="flex items-center transition-colors hover:text-blue-600">
           <Icon class="w-4 h-4" name="ph:microphone-stage-fill" />
-          <span id="ArtistName" class="ml-2"></span>
+          <span id="lastPlayedArtistName" class="ml-2"></span>
         </p>
       </a>
     </span>
diff --git a/front/src/libs/spotify.ts b/front/src/libs/spotify.ts
index 4f32225..ef5b67b 100644
--- a/front/src/libs/spotify.ts
+++ b/front/src/libs/spotify.ts
@@ -1,48 +1,145 @@
 import type { Track } from "@/libs/types/track";
 
-export async function getTrackInfo(): Promise<[Boolean, Track]> {
-  let isNowPlaying: Boolean = null;
-  let track: Track = null;
+export async function updateSpotifyStatus() {
+  const spotifyStatusElement = document.getElementById("spotifyStatus");
+  const [isNowPlaying, track] = await getTrackInfo();
+  if (!isNowPlaying && !track) {
+    spotifyStatusElement.style.display = "none";
+    console.error("failed getting track info...");
+    return;
+  }
+
+  spotifyStatusElement.style.display = "flex";
+  if (isNowPlaying) {
+    showNowPlaying(spotifyStatusElement, track);
+  } else {
+    showLastPlayed(spotifyStatusElement, track);
+  }
+}
+
+async function getTrackInfo(): Promise<[Boolean, Track | undefined]> {
+  const [nowPlayingUrl, lastPlayedUrl] = defineFetchUrl();
   try {
-    const nowPlayingResponse = await fetch(process.env.NOWPLAYING_URL);
-    if (nowPlayingResponse.ok && nowPlayingResponse.status !== 204) {
-      const nowPlayingData = await nowPlayingResponse.json();
-      isNowPlaying = true;
-      track = {
-        imageUrl: nowPlayingData.imageUrl,
-        trackName: nowPlayingData.trackName,
-        trackUrl: nowPlayingData.trackUrl,
-        albumName: nowPlayingData.albumName,
-        albumUrl: nowPlayingData.albumUrl,
-        artistName: nowPlayingData.artistName,
-        artistUrl: nowPlayingData.artistUrl,
-      };
+    const nowPlayingResponse = await fetchData(nowPlayingUrl || "");
+    console.log("fetched nowplaying!");
+    if (nowPlayingResponse) {
+      return [true, await extractTrackData(nowPlayingResponse, true)];
     }
-  } catch (error) {
-    console.error(error);
+  } catch {
+    console.error("failed fetching nowplaying...");
   }
 
-  if (isNowPlaying == null) {
-    try {
-      const lastPlayedResponse = await fetch(process.env.LASTPLAYED_URL);
-      if (lastPlayedResponse.ok && lastPlayedResponse.status !== 204) {
-        const lastPlayedData = await lastPlayedResponse.json();
-        isNowPlaying = false;
-        track = {
-          imageUrl: lastPlayedData.imageUrl,
-          playedAt: lastPlayedData.playedAt,
-          trackName: lastPlayedData.trackName,
-          trackUrl: lastPlayedData.trackUrl,
-          albumName: lastPlayedData.albumName,
-          albumUrl: lastPlayedData.albumUrl,
-          artistName: lastPlayedData.artistName,
-          artistUrl: lastPlayedData.artistUrl,
-        };
-      }
-    } catch (error) {
-      console.error(error);
+  try {
+    const lastPlayedResponse = await fetchData(lastPlayedUrl || "");
+    console.log("fetched lastplayed!");
+    if (lastPlayedResponse) {
+      return [false, await extractTrackData(lastPlayedResponse, false)];
     }
+  } catch {
+    console.error("failed fetching lastplayed...");
   }
 
-  return [isNowPlaying, track];
+  return [false, undefined];
+}
+
+function defineFetchUrl(): [string, string] {
+  const isDevelopment = window.location.hostname === "localhost" ||
+    window.location.hostname === "127.0.0.1";
+  const nowPlayingUrl = isDevelopment
+    ? "http://localhost:1323/api/nowplaying"
+    : "https://yanosea.org/api/nowplaying";
+  const lastplayedUrl = isDevelopment
+    ? "http://localhost:1323/api/lastplayed"
+    : "https://yanosea.org/api/lastplayed";
+  return [nowPlayingUrl, lastplayedUrl];
+}
+
+async function fetchData(url: string): Promise<Response | null> {
+  try {
+    const response = await fetch(url);
+    if (response.ok && response.status !== 204) {
+      return response;
+    }
+  } catch (error) {
+    console.error(`failed fetching from ${url}`);
+    return null;
+  }
+}
+
+async function extractTrackData(
+  response: Response,
+  nowPlaying: boolean,
+): Promise<Track> {
+  const data = await response.json();
+  const track: Track = {
+    imageUrl: data.imageUrl,
+    playedAt: !nowPlaying ? data.playedAt : undefined,
+    trackName: data.trackName,
+    trackUrl: data.trackUrl,
+    albumName: data.albumName,
+    albumUrl: data.albumUrl,
+    artistName: data.artistName,
+    artistUrl: data.artistUrl,
+  };
+  return track;
+}
+
+function showNowPlaying(spotifyStatusElement: HTMLElement, track: Track) {
+  (spotifyStatusElement.querySelector("#nowPlaying") as HTMLElement).style
+    .display = "flex";
+  (spotifyStatusElement.querySelector("#lastPlayed") as HTMLElement).style
+    .display = "none";
+
+  const nowPlayingElement = spotifyStatusElement.querySelector(
+    "#nowPlaying",
+  ) as HTMLElement;
+
+  (nowPlayingElement.querySelector("#nowPlayingImgLink") as HTMLAnchorElement)
+    .href = track.trackUrl;
+  (nowPlayingElement.querySelector("#nowPlayingImgSrc") as HTMLImageElement)
+    .src = track.imageUrl;
+  (nowPlayingElement.querySelector("#nowPlayingTrackLink") as HTMLAnchorElement)
+    .href = track.trackUrl;
+  nowPlayingElement.querySelector("#nowPlayingTrackName").textContent =
+    `track : ${track.trackName}`;
+  (nowPlayingElement.querySelector("#nowPlayingAlbumLink") as HTMLAnchorElement)
+    .href = track.albumUrl;
+  nowPlayingElement.querySelector("#nowPlayingAlbumName").textContent =
+    `album : ${track.albumName}`;
+  (nowPlayingElement.querySelector(
+    "#nowPlayingArtistLink",
+  ) as HTMLAnchorElement).href = track.artistUrl;
+  nowPlayingElement.querySelector("#nowPlayingArtistName").textContent =
+    `artist : ${track.artistName}`;
+}
+
+function showLastPlayed(spotifyStatusElement: HTMLElement, track: Track) {
+  (spotifyStatusElement.querySelector("#nowPlaying") as HTMLElement).style
+    .display = "none";
+  (spotifyStatusElement.querySelector("#lastPlayed") as HTMLElement).style
+    .display = "flex";
+
+  const lastPlayedElement = spotifyStatusElement.querySelector(
+    "#lastPlayed",
+  );
+
+  (lastPlayedElement.querySelector("#lastPlayedImgLink") as HTMLAnchorElement)
+    .href = track.trackUrl;
+  (lastPlayedElement.querySelector("#lastPlayedImgSrc") as HTMLImageElement)
+    .src = track.imageUrl;
+  lastPlayedElement.querySelector("#lastPlayedPlayedAt").textContent =
+    `played at : ${track.playedAt}`;
+  (lastPlayedElement.querySelector("#lastPlayedTrackLink") as HTMLAnchorElement)
+    .href = track.trackUrl;
+  lastPlayedElement.querySelector("#lastPlayedTrackName").textContent =
+    `track : ${track.trackName}`;
+  (lastPlayedElement.querySelector("#lastPlayedAlbumLink") as HTMLAnchorElement)
+    .href = track.albumUrl;
+  lastPlayedElement.querySelector("#lastPlayedAlbumName").textContent =
+    `album : ${track.albumName}`;
+  (lastPlayedElement.querySelector(
+    "#lastPlayedArtistLink",
+  ) as HTMLAnchorElement).href = track.artistUrl;
+  lastPlayedElement.querySelector("#lastPlayedArtistName").textContent =
+    `artist : ${track.artistName}`;
 }