Merge pull request #210 from jiftechnify/migrate-songdata-api

Migrate song data API

.env.development

@@ -0,0 +1 @@
+VITE_SONGDATA_API_URL=http://localhost:8787/

.env.production

@@ -0,0 +1 @@
+VITE_SONGDATA_API_URL=https://nostatus-songdata-api.c-stellar.net/

.gitignore

@@ -13,6 +13,7 @@ dev-dist
 *.local
 
 .env
+.env*.local
 
 # Editor directories and files
 .vscode/*

biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.6.3/schema.json",
+  "$schema": "https://biomejs.dev/schemas/1.9.3/schema.json",
   "organizeImports": {
     "enabled": true
   },

package.json

@@ -51,7 +51,7 @@
     "virtua": "^0.35.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "^1.6.3",
+    "@biomejs/biome": "^1.9.3",
     "@pandacss/dev": "^0.37.2",
     "@shadow-panda/preset": "^0.7.1",
     "@types/node": "^20.12.5",
@@ -61,12 +61,8 @@
     "date-fns": "^3.2.0",
     "i18next-parser": "^8.12.0",
     "npm-run-all2": "^6.1.2",
-    "prettier": "^3.2.5",
     "tsx": "^4.7.1",
     "typescript": "^5.6.3",
     "vite": "^5.2.14"
-  },
-  "prettier": {
-    "printWidth": 120
   }
 }

scripts/genBuildId.ts

@@ -1,6 +1,6 @@
-import cp from "child_process";
 import { format } from "date-fns";
-import { writeFileSync } from "fs";
+import cp from "node:child_process";
+import { writeFileSync } from "node:fs";
 
 process.env.TZ = "Asia/Tokyo";
 const timestamp = format(new Date(), "yyyyMMddHHmm");
@@ -9,4 +9,4 @@ const commitHash = cp.execSync("git rev-parse --short=7 HEAD", { encoding: "utf8
 const buildId = `${timestamp}-${commitHash}`;
 console.log("Build ID:", buildId);
 
-writeFileSync(".env", `VITE_BUILD_ID=${buildId}`);
+writeFileSync(".env.local", `VITE_BUILD_ID=${buildId}`);

src/App.tsx

@@ -45,15 +45,14 @@ export const App = () => {
         })}
       >
         <div className={css({ mr: "auto" })} />
-        {/* biome-ignore lint/a11y/useKeyWithClickEvents: TODO */}
-        <div
+        <button
           className={css({ lineHeight: "tight", textAlign: "center", cursor: "pointer" })}
-          role="button"
+          type="button"
           onClick={handleClickHeader}
         >
           <h1 className={css({ textStyle: "title" })}>nostatus</h1>
           <p className={css({ textStyle: "tagline", color: "text.sub" })}>Have an eye on your friends' status.</p>
-        </div>
+        </button>
         <div className={css({ ml: "auto" })}>
           <Suspense>
             <HeaderMenu />

src/components/ShareMusicDialog.tsx

@@ -4,6 +4,8 @@ import { t } from "i18next";
 import { atom, useAtomValue, useSetAtom } from "jotai";
 import { loadable } from "jotai/utils";
 import { useMemo, useState } from "react";
+import { getI18n } from "react-i18next";
+import type { LangCode } from "../locales/i18n";
 import { myMusicStatusAtom, updateMyStatus } from "../states/nostr";
 import { button } from "../styles/recipes";
 import { useCloseHeaderMenu } from "./HeaderMenu";
@@ -12,20 +14,36 @@ import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogT
 import { Input } from "./ui/input";
 import { Label } from "./ui/label";
 
-type MusicData = {
+type SongData = {
   url: string;
   title?: string;
-  artists?: string[];
+  artist?: string;
 };
 
-const songwhipProxyUrl = "https://songwhip-proxy.c-stellar.net/";
+const langCodeToCountry = (lang: LangCode) => {
+  switch (lang) {
+    case "ja":
+      return "JP";
+    case "en":
+      return "US";
+    default:
+      return "US";
+  }
+};
+
+const fetchSongData = async (musicLink: string, lang: LangCode): Promise<SongData> => {
+  const apiUrl = new URL(import.meta.env.VITE_SONGDATA_API_URL);
 
-const fetchMusicData = async (musicLink: string): Promise<MusicData> => {
-  const resp = await fetch(`${songwhipProxyUrl}?url=${encodeURIComponent(musicLink)}`);
+  const params = new URLSearchParams();
+  params.set("url", musicLink);
+  params.set("country", langCodeToCountry(lang));
+  apiUrl.search = params.toString();
+
+  const resp = await fetch(apiUrl);
   if (!resp.ok) {
-    throw Error("failed to fetch music data");
+    throw Error("failed to fetch song data");
   }
-  return resp.json() as Promise<MusicData>;
+  return resp.json() as Promise<SongData>;
 };
 
 const musicLinkAtom = atom<string | undefined>(undefined);
@@ -36,7 +54,7 @@ const musicDataLoadableAtom = loadable(
     if (musicLink === undefined) {
       return Promise.resolve(undefined);
     }
-    return fetchMusicData(musicLink);
+    return fetchSongData(musicLink, getI18n().language as LangCode);
   }),
 );
 
@@ -52,16 +70,17 @@ export const ShareMusicDialog: React.FC<ShareMusicDialogProps> = ({ trigger }) =
 
   const [musicLinkInput, setMusicLinkInput] = useState("");
   const setMusicLink = useSetAtom(musicLinkAtom);
-  const musicData = useAtomValue(musicDataLoadableAtom);
+  const songData = useAtomValue(musicDataLoadableAtom);
+
   const newMusicStatus = useMemo(() => {
-    if (musicData.state !== "hasData" || musicData.data === undefined) {
+    if (songData.state !== "hasData" || songData.data === undefined) {
       return undefined;
     }
     return {
-      content: `${musicData.data.title || "???"} - ${(musicData.data.artists ?? []).join(", ")}`,
-      linkUrl: musicData.data.url,
+      content: `${songData.data.title || "???"} - ${songData.data.artist || "???"}`,
+      linkUrl: songData.data.url,
     };
-  }, [musicData]);
+  }, [songData]);
 
   const currMusicStatus = useAtomValue(myMusicStatusAtom);
 
@@ -124,20 +143,20 @@ export const ShareMusicDialog: React.FC<ShareMusicDialogProps> = ({ trigger }) =
           <button
             className={css(button.raw({ color: "primary" }), { flexShrink: "0" })}
             type="button"
-            disabled={musicData.state === "loading"}
+            disabled={songData.state === "loading"}
             onClick={() => setMusicLink(musicLinkInput)}
           >
             {t("getMusicDataButton")}
           </button>
         </div>
 
-        {(musicData.state !== "hasData" || newMusicStatus !== undefined) && (
+        {(songData.state !== "hasData" || newMusicStatus !== undefined) && (
           <p className={css({ textStyle: "dialog-label-like" })}>{t("musicStatusPreview")}</p>
         )}
-        {musicData.state === "loading" && <p>{t("musicDataLoading")}</p>}
+        {songData.state === "loading" && <p>{t("musicDataLoading")}</p>}
         {newMusicStatus !== undefined && <MusicStatusView {...newMusicStatus} />}
 
-        {musicData.state === "hasError" && (
+        {songData.state === "hasError" && (
           <p className={css({ fontSize: "sm", color: "destructive.text" })}>{t("fetchingMusicDataFailed")}</p>
         )}
 

src/vite-env.d.ts

@@ -1 +1,10 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_BUILD_ID: string;
+  readonly VITE_SONGDATA_API_URL: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}