optimizations 👍

hiaaryan · Dec 26, 2024 · de127ee · de127ee
1 parent 87fbc9e
commit de127ee
Show file tree

Hide file tree

Showing 11 changed files with 267 additions and 276 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/main/background.ts b/main/background.ts
@@ -3,7 +3,7 @@ import { Menu, Tray, app, dialog, ipcMain, shell } from "electron";
 import serve from "electron-serve";
 import { createWindow } from "./helpers";
 import { protocol } from "electron";
-import { AutoClient } from "discord-auto-rpc";
+import { RpcClient, ActivityType } from "dc-rpc";
 import {
   addSongToPlaylist,
   addToFavourites,
@@ -103,15 +103,15 @@ let settings: any;
 })();
 
 // @hiaaryan: Initialize Discord RPC
-const client = new AutoClient({ transport: "ipc" });
+const client = new RpcClient({ transport: 'ipc' });
 ipcMain.on("set-rpc-state", (_, { details, state, timestamp }) => {
   const setActivity = {
     details,
     state,
     largeImageKey: "logo",
     largeImageText: `v${app.getVersion()}`,
     instance: false,
-    type: 2,
+    type: ActivityType.Listening,
   };
 
   if (timestamp) {
@@ -120,7 +120,7 @@ ipcMain.on("set-rpc-state", (_, { details, state, timestamp }) => {
 
   client.setActivity(setActivity);
 });
-client.endlessLogin({ clientId: "1243707416588320800" });
+client.login({ clientId: "1243707416588320800" });
 
 // @hiaaryan: Called to Set Music Folder
 ipcMain.handle("setMusicFolder", async () => {

diff --git a/package.json b/package.json
@@ -17,61 +17,61 @@
     "postinstall": "electron-builder install-app-deps"
   },
   "dependencies": {
-    "@hookform/resolvers": "^3.9.0",
-    "@radix-ui/react-avatar": "^1.1.0",
-    "@radix-ui/react-context-menu": "^2.2.1",
-    "@radix-ui/react-dialog": "^1.1.1",
-    "@radix-ui/react-label": "^2.1.0",
-    "@radix-ui/react-progress": "^1.1.0",
-    "@radix-ui/react-scroll-area": "^1.1.0",
-    "@radix-ui/react-slider": "^1.2.0",
-    "@radix-ui/react-slot": "^1.1.0",
-    "@radix-ui/react-tabs": "^1.1.0",
-    "@radix-ui/react-tooltip": "^1.1.2",
-    "@tabler/icons-react": "^3.12.0",
-    "@types/better-sqlite3": "^7.6.11",
-    "axios": "^1.7.5",
-    "better-sqlite3": "^11.2.1",
-    "class-variance-authority": "^0.7.0",
+    "@hookform/resolvers": "^3.9.1",
+    "@radix-ui/react-avatar": "^1.1.2",
+    "@radix-ui/react-context-menu": "^2.2.4",
+    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-label": "^2.1.1",
+    "@radix-ui/react-progress": "^1.1.1",
+    "@radix-ui/react-scroll-area": "^1.2.2",
+    "@radix-ui/react-slider": "^1.2.2",
+    "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-tabs": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.1.6",
+    "@tabler/icons-react": "^3.26.0",
+    "@types/better-sqlite3": "^7.6.12",
+    "axios": "^1.7.9",
+    "better-sqlite3": "^11.7.0",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "cmdk": "^1.0.0",
-    "discord-auto-rpc": "^1.0.17",
+    "cmdk": "^1.0.4",
+    "dc-rpc": "^1.5.8",
     "drizzle-orm": "^0.33.0",
-    "electron-log": "^5.1.7",
+    "electron-log": "^5.2.4",
     "electron-serve": "^1.3.0",
     "electron-store": "^8.2.0",
-    "embla-carousel-react": "^8.2.0",
-    "eslint-config-next": "^14.2.6",
+    "embla-carousel-react": "^8.5.1",
+    "eslint-config-next": "^14.2.21",
     "howler": "^2.2.4",
     "music-metadata": "^7.14.0",
     "next-themes": "^0.3.0",
-    "react-hook-form": "^7.53.0",
-    "sonner": "^1.5.0",
+    "react-hook-form": "^7.54.2",
+    "seamless-scroll-polyfill": "^2.3.4",
+    "sonner": "^1.7.1",
     "tailwind-gradient-mask-image": "^1.2.0",
-    "tailwind-merge": "^2.5.2",
+    "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
-    "wavesurfer.js": "^7.8.4",
-    "zod": "^3.23.8"
+    "zod": "^3.24.1"
   },
   "devDependencies": {
-    "@electron/rebuild": "^3.6.0",
-    "@types/howler": "^2.2.11",
-    "@types/node": "^22.5.0",
-    "@types/react": "^18.3.4",
+    "@electron/rebuild": "^3.7.1",
+    "@types/howler": "^2.2.12",
+    "@types/node": "^22.10.2",
+    "@types/react": "^18.3.18",
     "autoprefixer": "^10.4.20",
-    "drizzle-kit": "^0.24.1",
-    "electron": "^32.0.1",
+    "drizzle-kit": "^0.24.2",
+    "electron": "^32.2.7",
     "electron-builder": "^24.13.3",
-    "next": "^14.2.6",
-    "nextron": "^9.1.0",
-    "postcss": "^8.4.41",
-    "prettier": "^3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.6",
+    "next": "^14.2.21",
+    "nextron": "^9.4.0",
+    "postcss": "^8.4.49",
+    "prettier": "^3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.9",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rebuild": "^0.1.2",
-    "tailwindcss": "^3.4.10",
-    "typescript": "^5.5.4"
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.7.2"
   },
   "packageManager": "[email protected]"
-}
+}
diff --git a/renderer/components/main/lyrics.tsx b/renderer/components/main/lyrics.tsx
@@ -1,18 +1,17 @@
+import { LyricLine } from "@/lib/helpers";
 import React, { useEffect, useRef } from "react";
-
-interface LyricLine {
-  time: number;
-  text: string;
-}
+import { Badge } from "../ui/badge";
+import { scrollIntoView } from "seamless-scroll-polyfill";
 
 interface LyricsProps {
   lyrics: LyricLine[];
   currentLyric: LyricLine | null;
   onLyricClick: (time: number) => void;
+  isSyncedLyrics: boolean;
 }
 
 const Lyrics: React.FC<LyricsProps> = React.memo(
-  ({ lyrics, currentLyric, onLyricClick }) => {
+  ({ lyrics, currentLyric, onLyricClick, isSyncedLyrics }) => {
     const lyricsRef = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
@@ -21,26 +20,47 @@ const Lyrics: React.FC<LyricsProps> = React.memo(
           `line-${currentLyric.time}`,
         );
         if (currentLine) {
-          currentLine.scrollIntoView({ behavior: "smooth", block: "center" });
+          scrollIntoView(
+            currentLine,
+            {
+              behavior: "smooth",
+              block: "center",
+            },
+            {
+              duration: 500,
+            },
+          );
         }
       }
     }, [currentLyric]);
 
     return (
-      <div ref={lyricsRef} style={{ overflowY: "auto" }}>
-        {lyrics.map((line) => (
-          <p
-            key={line.time}
-            id={`line-${line.time}`}
-            className={
-              `${currentLyric?.time === line.time ? "scale-125 font-semibold" : "opacity-40"}` +
-              " my-2 max-w-xl origin-left cursor-pointer rounded-xl p-4 transition duration-300 ease-in-out hover:bg-black/5 dark:hover:bg-white/10"
-            }
-            onClick={() => onLyricClick(line.time)}
+      <div className="wora-border relative mt-2 h-full w-full rounded-2xl bg-white/70 backdrop-blur-xl dark:bg-black/70">
+        <div className="absolute bottom-5 right-6 z-50 flex items-center gap-2">
+          <Badge>{isSyncedLyrics ? "Synced" : "Unsynced"}</Badge>
+        </div>
+
+        <div className="h-utility overflow-y-auto flex w-full items-center text-balance px-8 gradient-mask-b-70-d text-2xl font-medium">
+          <div
+            ref={lyricsRef}
+            className="w-full py-[33vh] h-full no-scrollbar"
+            style={{ overflowY: "auto" }}
           >
-            {line.text}
-          </p>
-        ))}
+            {lyrics.map((line) => (
+              <p
+                key={line.time}
+                id={`line-${line.time}`}
+                className={
+                  `${currentLyric?.time === line.time ? "scale-125 font-semibold" : "opacity-40"}` +
+                  " transform-gpu transition-transform duration-700 my-2 max-w-xl origin-left cursor-pointer rounded-xl p-4 hover:bg-black/5 dark:hover:bg-white/10"
+                }
+                onClick={() => onLyricClick(line.time)}
+              >
+                {line.text}
+              </p>
+            ))}
+          </div>
+        </div>
       </div>
     );
   },