cgzirim · 0xdubs · Nov 1, 2024 · Nov 1, 2024 · Nov 1, 2024 · Nov 4, 2024
diff --git a/.gitignore b/.gitignore
@@ -26,3 +26,20 @@ go.work
 .vscode
 
 package-lock.json
+
+db.sqlite3
+
+.env
+
+*.js
+
+**/*.js
+
+client/.next/**
+client/.env
+
+!client/tailwind.config.js
+!client/postcss.config.js
+!client/tsconfig.json
+!client/.prettierrc.js
+
diff --git a/README.md b/README.md
@@ -52,7 +52,7 @@ npm start
 In a separate terminal window:
 ```
 cd seek-tune
-go run *.go serve [-proto <http|https> (default: http)] [-port <port number> (default: 5000)]
+go run *.go serve [-proto <http|https> (default: http)] [-port <port number> (default: 5005)]
 ```
 #### ▸ Download a Song 📥 
 Note: A link from Spotify's mobile app won't work. You can copy the link from either the desktop or web app.

diff --git a/client/.prettierignore b/client/.prettierignore
@@ -0,0 +1,4 @@
+dist
+node_modules
+.next
+build
diff --git a/client/.prettierrc.js b/client/.prettierrc.js
@@ -0,0 +1,33 @@
+/** @type {import('prettier').Config} */
+module.exports = {
+  endOfLine: "lf",
+  semi: false,
+  singleQuote: false,
+  tabWidth: 2,
+  trailingComma: "es5",
+  importOrder: [
+    "^(react/(.*)$)|^(react$)",
+    "^(next/(.*)$)|^(next$)",
+    "<THIRD_PARTY_MODULES>",
+    "",
+    "^types$",
+    "^@/types/(.*)$",
+    "^@/config/(.*)$",
+    "^@/lib/(.*)$",
+    "^@/hooks/(.*)$",
+    "^@/components/ui/(.*)$",
+    "^@/components/(.*)$",
+    "^@/registry/(.*)$",
+    "^@/styles/(.*)$",
+    "^@/app/(.*)$",
+    "",
+    "^[./]",
+  ],
+  importOrderSeparation: false,
+  importOrderSortSpecifiers: true,
+  importOrderBuiltinModulesToTop: true,
+  importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
+  importOrderMergeDuplicateImports: true,
+  importOrderCombineTypeAndValueImports: true,
+  plugins: ["@ianvs/prettier-plugin-sort-imports"],
+};
diff --git a/client/next-env.d.ts b/client/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
diff --git a/client/package.json b/client/package.json
@@ -19,13 +19,27 @@
     "react-youtube": "^10.1.0",
     "slick-carousel": "^1.8.1",
     "socket.io-client": "^2.5.0",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "typescript": "^5.5.4",
+    "styled-components": "^5.3.11",
+    "@radix-ui/react-accordion": "^1.1.2",
+    "@tabler/icons-react": "^2.47.0",
+    "@vercel/analytics": "^1.1.1",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "lucide-react": "^0.294.0",
+    "next": "latest",
+    "react-tweet": "^3.2.0",
+    "react-wrap-balancer": "^1.1.0",
+    "sonner": "^1.2.4",
+    "@apollo/client": "^3.9.0",
+    "graphql": "^16.8.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "format": "prettier --write ."
   },
   "eslintConfig": {
     "extends": [
@@ -39,6 +53,18 @@
     "not op_mini all"
   ],
   "devDependencies": {
-    "react-error-overlay": "^6.0.9"
+    "react-error-overlay": "^6.0.9",
+    "@types/node": "^20.11.18",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@ianvs/prettier-plugin-sort-imports": "^4.1.1",
+    "typescript": "5.1.3",
+    "autoprefixer": "10.4.15",
+    "postcss": "8.4.29",
+    "tailwindcss": "3.3.3",
+    "tailwind-merge": "^2.1.0",
+    "tailwindcss-animate": "^1.0.7",
+    "prettier": "^3.0.3",
+    "prettier-plugin-tailwindcss": "^0.5.6"
   }
 }
diff --git a/client/postcss.config.js b/client/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/client/src/app/layout.tsx b/client/src/app/layout.tsx
@@ -0,0 +1,17 @@
+import '../components/styles/Root.css'
+export const metadata = {
+  title: 'SeekTune',
+  description: 'Reverse Lookup',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/client/src/App.js → client/src/app/page.tsx b/client/src/App.js → client/src/app/page.tsx
@@ -1,23 +1,26 @@
+'use client';
 import React, { useEffect, useState, useRef } from "react";
 import io from "socket.io-client";
-import Form from "./components/Form";
-import Listen from "./components/Listen";
-import CarouselSliders from "./components/CarouselSliders";
+import SearchByURLForm from "../components/SearchByURLForm";
+import Listen from "../components/Listen";
+import CarouselSliders from "../components/CarouselSliders";
 import { FaMicrophoneLines } from "react-icons/fa6";
 import { LiaLaptopSolid } from "react-icons/lia";
 import { ToastContainer, toast, Slide } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import { MediaRecorder, register } from "extendable-media-recorder";
 import { connect } from "extendable-media-recorder-wav-encoder";
 
-import AnimatedNumber from "./components/AnimatedNumber";
+import AnimatedNumber from "../components/AnimatedNumber";
+import Loader from '../components/Loader';
+import SearchByContentHashForm from '@/components/SearchByContentHashForm';
 
-const server = process.env.REACT_APP_BACKEND_URL || "http://localhost:5000";
+const server = process.env.REACT_APP_BACKEND_URL || "http://localhost:5005";
 
 var socket = io(server);
 
-function App() {
-  const [stream, setStream] = useState();
+const Page = (): JSX.Element => {
+  const [stream, setStream] = useState<MediaStream | undefined>(undefined);
   const [matches, setMatches] = useState([]);
   const [totalSongs, setTotalSongs] = useState(10);
   const [isListening, setisListening] = useState(false);
@@ -148,9 +151,11 @@ function App() {
       setisListening(true);
       sendRecordingRef.current = true;
 
-      const chunks = [];
+      const chunks: Blob[] = [];
       mediaRecorder.ondataavailable = function (e) {
-        chunks.push(e.data);
+        if (e.data) {
+          chunks.push(e.data);
+        }
       };
 
       // Stop recording after 20 seconds
@@ -167,18 +172,18 @@ function App() {
 
         reader.readAsArrayBuffer(blob);
         reader.onload = async (event) => {
-          const arrayBuffer = event.target.result;
+          const arrayBuffer = event.target?.result;
 
           // get record duration
-          const arrayBufferCopy = arrayBuffer.slice(0);
+          const arrayBufferCopy = arrayBuffer?.slice(0);
           const audioContext = new AudioContext();
           const audioBufferDecoded = await audioContext.decodeAudioData(
-            arrayBufferCopy
+            arrayBufferCopy as ArrayBuffer
           );
           const recordDuration = audioBufferDecoded.duration;
 
           var binary = "";
-          var bytes = new Uint8Array(arrayBuffer);
+          var bytes = new Uint8Array(arrayBufferCopy as ArrayBuffer);
           var len = bytes.byteLength;
           for (var i = 0; i < len; i++) {
             binary += String.fromCharCode(bytes[i]);
@@ -207,7 +212,7 @@ function App() {
     }
   }
 
-  function downloadRecording(blob) {
+  function downloadRecording(blob: Blob) {
     const blobUrl = URL.createObjectURL(blob);
 
     // Create a download link
@@ -219,12 +224,12 @@ function App() {
   }
 
   function cleanUp() {
-    const currentStream = streamRef.current;
+    const currentStream = streamRef.current as MediaStream | undefined;
     if (currentStream) {
       currentStream.getTracks().forEach((track) => track.stop());
     }
 
-    setStream(null);
+    setStream(undefined);
     setisListening(false);
   }
 
@@ -246,7 +251,14 @@ function App() {
       <div className="TopHeader">
         <h2 style={{ color: "#374151" }}>SeekTune</h2>
         <h4 style={{ display: "flex", justifyContent: "flex-end" }}>
-          <AnimatedNumber includeComma={true} animateToNumber={totalSongs} />
+          <AnimatedNumber
+            includeComma={true}
+            animateToNumber={totalSongs}
+            fontStyle={{ color: "#374151" }}
+            delay={0}
+            onStart={() => {}}
+            onFinish={() => {}}
+          />
           &nbsp;Songs
         </h4>
       </div>
@@ -285,7 +297,9 @@ function App() {
       <div className="youtube">
         <CarouselSliders matches={matches} />
       </div>
-      <Form socket={socket} toast={toast} />
+
+      <SearchByURLForm socket={socket} toast={toast} />
+      <SearchByContentHashForm socket={socket} toast={toast} />
       <ToastContainer
         position="top-center"
         autoClose={5000}
@@ -302,4 +316,4 @@ function App() {
   );
 }
 
-export default App;
+export default Page;
diff --git a/client/src/components/AnimatedNumber.js → client/src/components/AnimatedNumber.tsx b/client/src/components/AnimatedNumber.js → client/src/components/AnimatedNumber.tsx
@@ -28,8 +28,8 @@ const AnimatedNumber = ({
   const prevNumber = usePrevious(animateToNumber);
   const animateToNumberString = String(Math.abs(animateToNumber));
   const prevNumberString = String(Math.abs(prevNumber));
-  const animateToNumbersArr = Array.from(animateToNumberString, Number);
-  const prevNumbersArr = Array.from(prevNumberString, Number);
+  const animateToNumbersArr = Array.from(animateToNumberString, Number) as number[] | string[]
+  const prevNumbersArr = Array.from(prevNumberString, Number) as number[] | string[]
   const [onStarted, setOnStarted] = React.useState(false);
   const [onFinished, setOnFinished] = React.useState(false);
 
@@ -81,10 +81,10 @@ const AnimatedNumber = ({
 
   const [numberHeight, setNumberHeight] = React.useState(0);
 
-  const numberDivRef = React.useRef(null);
+  const numberDivRef = React.useRef<HTMLDivElement>(null);
 
   React.useEffect(() => {
-    setNumberHeight(numberDivRef.current.clientHeight);
+    setNumberHeight(numberDivRef.current?.clientHeight ?? 0);
   }, [animateToNumber]);
 
   return (
@@ -112,7 +112,7 @@ const AnimatedNumber = ({
                 <motion.div
                   initial={{ y: 0 }}
                   animate={{
-                    y: -1 * (numberHeight * animateToNumbersArr[index]),
+                    y: -1 * (numberHeight * animateToNumbersArr[index as string]),
                   }}
                   transition={transition}
                   onAnimationStart={() => setOnStarted(true)}

diff --git a/client/src/components/CarouselSliders.js → client/src/components/CarouselSliders.tsx b/client/src/components/CarouselSliders.js → client/src/components/CarouselSliders.tsx
@@ -1,10 +1,20 @@
+'use client';
+
+import styles from "./styles/CarouselSliders.module.css"
 import React, { useEffect, useRef, useState } from "react";
 import YouTube from "react-youtube";
-import styles from "./styles/CarouselSliders.module.css";
+
+type Player = {
+  getVideoData: () => {
+    video_id: string
+  }
+  getPlayerState: () => number
+  pauseVideo: () => void
+}
 
 const CarouselSliders = (props) => {
   const [activeVideoID, setActiveVideoID] = useState(null);
-  const players = useRef({});
+  const players = useRef<Record<string, Player>>({});
 
   useEffect(() => {
     if (props.matches.length > 0) {
@@ -13,9 +23,8 @@ const CarouselSliders = (props) => {
 
       if (validMatches.length > 0) {
         const firstVideoID = validMatches[0].YouTubeID;
-        document
-          .getElementById(`slide-${firstVideoID}`)
-          .scrollIntoView({ behavior: "smooth" });
+        document?.getElementById(`slide-${firstVideoID}`)
+          ?.scrollIntoView({ behavior: "smooth" });
         setActiveVideoID(firstVideoID);
       }
     }
@@ -31,12 +40,12 @@ const CarouselSliders = (props) => {
 
     // Pause other videos
     Object.values(players.current).forEach((player) => {
-      const otherVideoId = player.getVideoData().video_id;
+      const otherVideoId = (player as unknown as Player).getVideoData().video_id;
       if (
         otherVideoId !== videoId &&
-        player.getPlayerState() === 1 /* Playing */
+        (player as unknown as Player).getPlayerState() === 1 /* Playing */
       ) {
-        player.pauseVideo();
+        (player as unknown as Player).pauseVideo();
       }
     });
   };
@@ -88,8 +97,8 @@ const CarouselSliders = (props) => {
                 onClick={(e) => {
                   e.preventDefault();
                   document
-                    .getElementById(`slide-${match.YouTubeID}`)
-                    .scrollIntoView({ behavior: "smooth" });
+                    ?.getElementById(`slide-${match.YouTubeID}`)
+                    ?.scrollIntoView({ behavior: "smooth" });
                   setActiveVideoID(match.YouTubeID);
                 }}
               ></a>

diff --git a/client/src/components/Listen.js → client/src/components/Listen.tsx b/client/src/components/Listen.js → client/src/components/Listen.tsx