tsivinsky/music-dl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add web app & add concurrency

Browse Source
This commit is contained in:
Dan Tsivinsky
2026-02-20 20:22:06 +03:00
parent b42a556ec5
commit 1f65301a05
19 changed files with 2732 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
web/.gitignore vendored Normal file
View File

@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

23
web/eslint.config.js Normal file
View File

@@ -0,0 +1,23 @@
import js from "@eslint/js";
import globals from "globals";
import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";
import tseslint from "typescript-eslint";
import { defineConfig, globalIgnores } from "eslint/config";
export default defineConfig([
globalIgnores(["dist"]),
{
files: ["**/*.{ts,tsx}"],
extends: [
js.configs.recommended,
tseslint.configs.recommended,
reactHooks.configs.flat.recommended,
reactRefresh.configs.vite,
],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
},
},
]);

13
web/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>web</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

39
web/package.json Normal file
View File

@@ -0,0 +1,39 @@
{
"name": "web",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"@tanstack/react-query": "^5.90.21",
"react": "^19.2.0",
"react-dom": "^19.2.0"
},
"devDependencies": {
"@eslint/js": "^9.39.1",
"@tailwindcss/vite": "^4.2.0",
"@types/node": "^24.10.1",
"@types/react": "^19.2.7",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^5.1.1",
"babel-plugin-react-compiler": "^1.0.0",
"eslint": "^9.39.1",
"eslint-plugin-react-hooks": "^7.0.1",
"eslint-plugin-react-refresh": "^0.4.24",
"globals": "^16.5.0",
"tailwindcss": "^4.2.0",
"typescript": "~5.9.3",
"typescript-eslint": "^8.48.0",
"vite": "^8.0.0-beta.13"
},
"pnpm": {
"overrides": {
"vite": "^8.0.0-beta.13"
}
}
}

2135
web/pnpm-lock.yaml generated Normal file
View File

File diff suppressed because it is too large Load Diff

104
web/src/App.tsx Normal file
View File

@@ -0,0 +1,104 @@
import { useState } from "react";
import { useSearchQuery, type Album } from "./api/useSearchQuery";
import { useDebouncedValue } from "./hooks/useDebouncedValue";
import { getContrastYIQ } from "./getContrastYIQ";
import { useDownloadAlbumMutation } from "./api/useDownloadAlbumMutation";
import { useDownloadsQuery } from "./api/useDownloadsQuery";
export default function App() {
const [search, setSearch] = useState("");
const debouncedSearch = useDebouncedValue(search);
const { data } = useSearchQuery({
query: debouncedSearch,
});
const { data: downloads } = useDownloadsQuery();
const downloadAlbumMutation = useDownloadAlbumMutation();
const handleDownloadAlbum = (album: Album) => {
downloadAlbumMutation.mutate(
{ albumId: album.id },
{
onError(error) {
console.log({ error });
},
},
);
};
return (
<div className="max-w-300 w-full mx-auto p-2">
<h1 className="text-3xl font-semibold">music-downloader</h1>
<div className="mt-4 flex flex-col gap-2">
{downloads?.map((item) => (
<div key={item.id} className="flex gap-2 p-2">
<img
src={`/cover/${item.album.cover}`}
alt=""
width={64}
height={64}
/>
<div>
<p>{item.album.title}</p>
<p>
Downloaded {item.installedFiles}/{item.totalFiles}
</p>
</div>
</div>
))}
</div>
<div className="mt-4">
<input
type="text"
placeholder="Search album..."
className="w-full p-1 border border-neutral-900"
value={search}
onChange={(e) => setSearch(e.target.value)}
/>
</div>
<div className="mt-2 flex flex-col gap-2">
{data?.map((album) => {
const contrastColor = getContrastYIQ(album.vibrantColor);
const oppositeColor = contrastColor === "black" ? "white" : "black";
return (
<div
key={album.id}
className="flex gap-2 p-2"
style={{
backgroundColor: album.vibrantColor,
color: contrastColor,
}}
>
<img
src={`/cover/${album.cover}`}
alt=""
width={128}
height={128}
/>
<div className="flex flex-col">
<p>{album.title}</p>
<p>{album.releaseDate}</p>
<p>{album.numberOfTracks} tracks</p>
<p>{album.audioQuality} quality</p>
{album.explicit && <p>Explicit</p>}
</div>
<button
type="button"
className="cursor-pointer ml-auto mt-auto py-1 px-2"
style={{ backgroundColor: oppositeColor, color: contrastColor }}
onClick={() => handleDownloadAlbum(album)}
>
Download
</button>
</div>
);
})}
</div>
</div>
);
}

14
web/src/api/useDownloadAlbumMutation.ts Normal file
View File

@@ -0,0 +1,14 @@
import { useMutation } from "@tanstack/react-query";
export const useDownloadAlbumMutation = () => {
return useMutation({
mutationFn: async ({ albumId }: { albumId: number }) => {
const resp = await fetch(`/download-album/${albumId}`);
if (!resp.ok) {
const data = (await resp.json()) as { error: string };
throw new Error(data.error);
}
return await resp.json();
},
});
};

19
web/src/api/useDownloadsQuery.ts Normal file
View File

@@ -0,0 +1,19 @@
import { useQuery } from "@tanstack/react-query";
import type { Album } from "./useSearchQuery";
export type DownloadItem = {
id: number;
album: Album;
installedFiles: number;
totalFiles: number;
};
export const useDownloadsQuery = () => {
return useQuery({
queryKey: ["downloads"],
queryFn: async () => {
const resp = await fetch("/downloads");
return (await resp.json()) as DownloadItem[];
},
});
};

33
web/src/api/useSearchQuery.ts Normal file
View File

@@ -0,0 +1,33 @@
import { useQuery } from "@tanstack/react-query";
export type Album = {
id: number;
title: string;
duration: number;
numberOfTracks: number;
releaseDate: string;
type: "ALBUM";
url: string;
cover: string;
vibrantColor: string;
explicit: boolean;
audioQuality: "LOSSLESS" | "LOW";
};
export type SearchQueryParams = {
query: string;
};
export const useSearchQuery = (params: SearchQueryParams) => {
return useQuery({
queryKey: ["search", params],
enabled: !!params.query,
queryFn: async () => {
const q = new URLSearchParams();
q.set("q", params.query);
const resp = await fetch(`/search?${q.toString()}`);
return (await resp.json()) as Album[];
},
});
};

25
web/src/getContrastYIQ.ts Normal file
View File

@@ -0,0 +1,25 @@
export function getContrastYIQ(hexcolor: string) {
// Remove leading # if present
if (hexcolor.startsWith("#")) {
hexcolor = hexcolor.slice(1);
}
// Handle 3-digit hex codes (e.g., #abc → #aabbcc)
if (hexcolor.length === 3) {
hexcolor = hexcolor
.split("")
.map((c) => c + c)
.join("");
}
// Parse RGB values
const r = parseInt(hexcolor.substr(0, 2), 16);
const g = parseInt(hexcolor.substr(2, 2), 16);
const b = parseInt(hexcolor.substr(4, 2), 16);
// Calculate YIQ brightness
const yiq = (r * 299 + g * 587 + b * 114) / 1000;
// Return black or white based on contrast
return yiq >= 128 ? "black" : "white";
}

14
web/src/hooks/useDebouncedValue.ts Normal file
View File

@@ -0,0 +1,14 @@
import { useState, useEffect } from "react";
export function useDebouncedValue<T>(value: T, wait: number = 300): T {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
const timer = setTimeout(() => {
setDebouncedValue(value);
}, wait);
return () => {
clearTimeout(timer);
};
}, [value, wait]);
return debouncedValue;
}

1
web/src/index.css Normal file
View File

@@ -0,0 +1 @@
@import "tailwindcss";

21
web/src/main.tsx Normal file
View File

@@ -0,0 +1,21 @@
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.tsx";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
const queryClient = new QueryClient({
defaultOptions: {
queries: {
retry: false,
},
},
});
createRoot(document.getElementById("root")!).render(
<StrictMode>
<QueryClientProvider client={queryClient}>
<App />
</QueryClientProvider>
</StrictMode>,
);

28
web/tsconfig.app.json Normal file
View File

@@ -0,0 +1,28 @@
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"target": "ES2022",
"useDefineForClassFields": true,
"lib": ["ES2022", "DOM", "DOM.Iterable"],
"module": "ESNext",
"types": ["vite/client"],
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["src"]
}

7
web/tsconfig.json Normal file
View File

@@ -0,0 +1,7 @@
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
]
}

26
web/tsconfig.node.json Normal file
View File

@@ -0,0 +1,26 @@
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"target": "ES2023",
"lib": ["ES2023"],
"module": "ESNext",
"types": ["node"],
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": true,
"moduleDetection": "force",
"noEmit": true,
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["vite.config.ts"]
}

15
web/vite.config.ts Normal file
View File

@@ -0,0 +1,15 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
// https://vite.dev/config/
export default defineConfig({
plugins: [
tailwindcss(),
react({
babel: {
plugins: [["babel-plugin-react-compiler"]],
},
}),
],
});