From f76054d0265be0dbfe94063ec74ed48a8ea20b56 Mon Sep 17 00:00:00 2001
From: Lucemans <luc@lucemans.nl>
Date: Thu, 22 Aug 2024 19:55:13 +0200
Subject: [PATCH] Introduce improved sample counting

---
 web/src/components/Navbar.tsx         |  5 +--
 web/src/components/PackSidebar.tsx    | 57 ++++++++++++++++-----------
 web/src/components/SampleTray.tsx     |  7 +++-
 web/src/routes/pack/$packId/index.tsx |  8 ++--
 4 files changed, 47 insertions(+), 30 deletions(-)

diff --git a/web/src/components/Navbar.tsx b/web/src/components/Navbar.tsx
index 354895f..f07ebc7 100644
--- a/web/src/components/Navbar.tsx
+++ b/web/src/components/Navbar.tsx
@@ -2,8 +2,6 @@
 /* eslint-disable no-undef */
 import { Link } from '@tanstack/react-router';
 
-const LOGIN_URL = 'http://localhost:3000/login';
-
 export const Navbar = () => {
     return (
         <div className="w-full bg-white border-b h-8 flex items-center justify-between">
@@ -11,6 +9,7 @@ export const Navbar = () => {
                 <button
                     className="font-semibold text-base pl-4 pr-4 hover:bg-black/10 border-r h-full flex items-center"
                     onClick={() => {
+                        // @ts-ignore
                         document.querySelector('#sidebar-toggle')?.click();
                     }}
                 >
@@ -19,7 +18,7 @@ export const Navbar = () => {
                 <div className="h-full flex items-center">
                     {[
                         ['/', 'Home'],
-                        ['/sounds', 'Sounds'],
+                        // ['/sounds', 'Sounds'],
                     ].map(([path, name]) => (
                         <Link
                             key={path}
diff --git a/web/src/components/PackSidebar.tsx b/web/src/components/PackSidebar.tsx
index 9ce1980..72c54e0 100644
--- a/web/src/components/PackSidebar.tsx
+++ b/web/src/components/PackSidebar.tsx
@@ -1,6 +1,8 @@
 import { Link } from '@tanstack/react-router';
+import { MdAudiotrack } from 'react-icons/md';
 
 import { PACKS } from '../config';
+import { SAMPLES_BY_PACK } from '../config.gen';
 
 export const PackSidebar = () => {
     return (
@@ -12,31 +14,40 @@ export const PackSidebar = () => {
             />
             <div className="peer-checked:block hidden lg:block absolute lg:static w-full max-w-sm h-full border-r border-neutral-200 bg-neutral-50">
                 <ul>
-                    {Object.entries(PACKS).map(([packId, pack]) => (
-                        <li key={packId} className="">
-                            <Link
-                                to={'/pack/$packId'}
-                                params={{ packId }}
-                                className="flex items-center gap-2 border-b border-neutral-200 px-4 py-2 hover:bg-neutral-100"
-                            >
-                                {pack.cover && (
-                                    <img
-                                        src={pack.cover}
-                                        className="w-10 h-10 rounded-sm "
-                                        alt={pack.name}
-                                    />
-                                )}
-                                <div className="flex-1">
-                                    <div className="font-semibold">
-                                        {pack.name}
+                    {Object.entries(PACKS).map(([packId, pack]) => {
+                        // @ts-ignore
+                        const samples = SAMPLES_BY_PACK[packId] as string[];
+
+                        return (
+                            <li key={packId} className="">
+                                <Link
+                                    to={'/pack/$packId'}
+                                    params={{ packId }}
+                                    className="flex items-center gap-2 border-b border-neutral-200 px-4 py-2 hover:bg-neutral-100"
+                                >
+                                    {pack.cover && (
+                                        <img
+                                            src={pack.cover}
+                                            className="w-10 h-10 rounded-sm "
+                                            alt={pack.name}
+                                        />
+                                    )}
+                                    <div className="flex-1">
+                                        <div className="font-semibold">
+                                            {pack.name}
+                                        </div>
+                                        <div className="text-neutral-600">
+                                            {pack.description}
+                                        </div>
                                     </div>
-                                    <div className="text-neutral-600">
-                                        {pack.description}
+                                    <div className="flex items-center gap-1 text-neutral-600">
+                                        <span>{samples.length}</span>
+                                        <MdAudiotrack />
                                     </div>
-                                </div>
-                            </Link>
-                        </li>
-                    ))}
+                                </Link>
+                            </li>
+                        );
+                    })}
                 </ul>
             </div>
         </>
diff --git a/web/src/components/SampleTray.tsx b/web/src/components/SampleTray.tsx
index 46427c1..90944f2 100644
--- a/web/src/components/SampleTray.tsx
+++ b/web/src/components/SampleTray.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/media-has-caption */
 import { FC } from 'react';
 import { FaDownload, FaPlay } from 'react-icons/fa';
 
@@ -6,13 +7,17 @@ export const SampleTray: FC<{ packId: string; sampleId: string }> = ({
     sampleId,
 }) => {
     return (
-        <li className="flex items-center gap-2 p-2 border-b border-neutral-200 hover:bg-neutral-300/10">
+        <li className="flex flex-wrap items-center gap-2 p-2 border-b border-neutral-200 hover:bg-neutral-300/10">
             <div className="w-10 h-10 rounded-sm bg-neutral-200 flex items-center justify-center text-neutral-500">
                 <FaPlay />
             </div>
             <div className="flex-1">
                 <h3 className="text-base">{sampleId}</h3>
             </div>
+            <audio
+                src={`https://github.com/v3xlabs/sample-rip/raw/master/samples/${packId}/${sampleId}`}
+                controls
+            />
             <div>
                 <a
                     href={`https://github.com/v3xlabs/sample-rip/raw/master/samples/${packId}/${sampleId}`}
diff --git a/web/src/routes/pack/$packId/index.tsx b/web/src/routes/pack/$packId/index.tsx
index 4110bf0..a4ef76b 100644
--- a/web/src/routes/pack/$packId/index.tsx
+++ b/web/src/routes/pack/$packId/index.tsx
@@ -2,14 +2,17 @@ import { createFileRoute } from '@tanstack/react-router';
 
 import { SampleList } from '../../../components/SampleList';
 import { PACKS } from '../../../config';
+import { SAMPLES_BY_PACK } from '../../../config.gen';
 
 export const Route = createFileRoute('/pack/$packId/')({
     component: (parameters) => {
         console.log(parameters);
         const { packId } = Route.useParams();
         const pack = PACKS[packId];
+        // @ts-ignore
+        const samples = SAMPLES_BY_PACK[packId] as string[];
 
-        if (!pack) {
+        if (!pack || !samples) {
             return <div className="p-4">Pack not found!</div>;
         }
 
@@ -30,8 +33,7 @@ export const Route = createFileRoute('/pack/$packId/')({
                             <h1 className="text-2xl font-bold">{pack.name}</h1>
                             <p>{pack.description}</p>
                             <ul className="flex items-center gap-2 text-sm">
-                                <li>22 Samples</li>
-                                <li>2 Loops</li>
+                                <li>{samples.length} Samples</li>
                             </ul>
                         </div>
                         <div>