From 3b98f11b701df215b8b2be65b2e593b141288d94 Mon Sep 17 00:00:00 2001 From: Izan Gil <66965250+SrIzan10@users.noreply.github.com> Date: Fri, 18 Apr 2025 20:28:05 +0200 Subject: [PATCH] feat: background analysis and disclaimer --- components.json | 30 +++++----- package.json | 7 ++- src/app.css | 19 ++++++- .../components/app/background-analyzer.svelte | 56 +++++++++++++++++++ src/lib/components/app/bg-image.svelte | 4 +- src/lib/components/app/bottom-bar.svelte | 13 +++-- src/lib/components/app/disclaimer.svelte | 27 +++++++++ src/lib/components/app/now-playing.svelte | 29 +++++----- .../ui/dialog/dialog-content.svelte | 39 +++++++++++++ .../ui/dialog/dialog-description.svelte | 16 ++++++ .../components/ui/dialog/dialog-footer.svelte | 20 +++++++ .../components/ui/dialog/dialog-header.svelte | 20 +++++++ .../ui/dialog/dialog-overlay.svelte | 19 +++++++ .../components/ui/dialog/dialog-title.svelte | 16 ++++++ src/lib/components/ui/dialog/index.ts | 37 ++++++++++++ src/routes/+layout.svelte | 2 + src/routes/+page.svelte | 2 + yarn.lock | 13 +++-- 18 files changed, 327 insertions(+), 42 deletions(-) create mode 100644 src/lib/components/app/background-analyzer.svelte create mode 100644 src/lib/components/app/disclaimer.svelte create mode 100644 src/lib/components/ui/dialog/dialog-content.svelte create mode 100644 src/lib/components/ui/dialog/dialog-description.svelte create mode 100644 src/lib/components/ui/dialog/dialog-footer.svelte create mode 100644 src/lib/components/ui/dialog/dialog-header.svelte create mode 100644 src/lib/components/ui/dialog/dialog-overlay.svelte create mode 100644 src/lib/components/ui/dialog/dialog-title.svelte create mode 100644 src/lib/components/ui/dialog/index.ts diff --git a/components.json b/components.json index 22be117..260ea62 100644 --- a/components.json +++ b/components.json @@ -1,17 +1,17 @@ { - "$schema": "https://next.shadcn-svelte.com/schema.json", - "style": "new-york", - "tailwind": { - "config": "tailwind.config.ts", - "css": "src/app.css", - "baseColor": "neutral" - }, - "aliases": { - "components": "$lib/components", - "utils": "$lib/utils", - "ui": "$lib/components/ui", - "hooks": "$lib/hooks" - }, - "typescript": true, - "registry": "https://next.shadcn-svelte.com/registry" + "$schema": "https://next.shadcn-svelte.com/schema.json", + "style": "new-york", + "tailwind": { + "config": "tailwind.config.ts", + "css": "src/app.css", + "baseColor": "neutral" + }, + "aliases": { + "components": "$lib/components", + "utils": "$lib/utils", + "ui": "$lib/components/ui", + "hooks": "$lib/hooks" + }, + "typescript": true, + "registry": "https://next.shadcn-svelte.com/registry" } diff --git a/package.json b/package.json index 3a49974..06720dd 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "format": "prettier --write ." }, "devDependencies": { - "@lucide/svelte": "^0.488.0", + "@lucide/svelte": "^0.492.0", "@sveltejs/adapter-auto": "^6.0.0", "@sveltejs/adapter-cloudflare": "^5.0.1", "@sveltejs/kit": "^2.16.0", @@ -34,5 +34,8 @@ "vite": "^6.0.0", "wrangler": "^4.12.0" }, - "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e" + "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e", + "dependencies": { + "mode-watcher": "0.5.1" + } } diff --git a/src/app.css b/src/app.css index 72b0ea6..249248f 100644 --- a/src/app.css +++ b/src/app.css @@ -32,6 +32,12 @@ --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; + + --text-color: rgba(0, 0, 0, 0.85); + --text-shadow: 0 1px 2px rgba(255, 255, 255, 0.2); + --glass-bg: rgba(0, 0, 0, 0.1); + --glass-hover: rgba(0, 0, 0, 0.2); + --glass-border: rgba(0, 0, 0, 0.2); } .dark { @@ -62,14 +68,23 @@ --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; + --text-color: rgba(255, 255, 255, 0.95); + --text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); + --glass-bg: rgba(255, 255, 255, 0.1); + --glass-hover: rgba(255, 255, 255, 0.2); + --glass-border: rgba(255, 255, 255, 0.2); } } @layer base { * { - @apply border-border; + @apply border-border text-dynamic; } body { - @apply bg-background text-foreground m-0 p-0 overflow-hidden; + @apply bg-background text-dynamic m-0 p-0 overflow-hidden; } } +.text-dynamic { + color: var(--text-color); + text-shadow: var(--text-shadow); +} diff --git a/src/lib/components/app/background-analyzer.svelte b/src/lib/components/app/background-analyzer.svelte new file mode 100644 index 0000000..4f8b658 --- /dev/null +++ b/src/lib/components/app/background-analyzer.svelte @@ -0,0 +1,56 @@ + \ No newline at end of file diff --git a/src/lib/components/app/bg-image.svelte b/src/lib/components/app/bg-image.svelte index 21e2041..0a96c0d 100644 --- a/src/lib/components/app/bg-image.svelte +++ b/src/lib/components/app/bg-image.svelte @@ -1,8 +1,10 @@ diff --git a/src/lib/components/app/bottom-bar.svelte b/src/lib/components/app/bottom-bar.svelte index c5cf217..67c2e39 100644 --- a/src/lib/components/app/bottom-bar.svelte +++ b/src/lib/components/app/bottom-bar.svelte @@ -1,12 +1,17 @@
-
- -
+ + +
+ + +
+ \ No newline at end of file diff --git a/src/lib/components/app/disclaimer.svelte b/src/lib/components/app/disclaimer.svelte new file mode 100644 index 0000000..83fa186 --- /dev/null +++ b/src/lib/components/app/disclaimer.svelte @@ -0,0 +1,27 @@ + + + + + + + Info & disclaimer + +

+ This project was created as an alternative to Chillhop Radio's web player, by implementing a + better, glassmorphic user interface paired with other utilities like Pomodoro timers and such, + which will be added soon. +

+

+ I do not have the right to the songs played on this radio station, nor do I have any + affiliation with Chillhop Music. This project is open source and not intended for + commercial use. The source code is available on GitHub. +

+

+ 🄯 GNU GPL, Sr Izan. +

+
+
diff --git a/src/lib/components/app/now-playing.svelte b/src/lib/components/app/now-playing.svelte index f6274ea..86d6911 100644 --- a/src/lib/components/app/now-playing.svelte +++ b/src/lib/components/app/now-playing.svelte @@ -9,17 +9,18 @@ } -Cover Art - -
-

{state.currentSong?.title}

-

{state.currentSong?.artists}

-
- - +
+ Cover Art +
+

{state.currentSong?.title}

+

{state.currentSong?.artists}

+
+
+ +
\ No newline at end of file diff --git a/src/lib/components/ui/dialog/dialog-content.svelte b/src/lib/components/ui/dialog/dialog-content.svelte new file mode 100644 index 0000000..773c5f9 --- /dev/null +++ b/src/lib/components/ui/dialog/dialog-content.svelte @@ -0,0 +1,39 @@ + + + + + {@render children?.()} + + + Close + + + \ No newline at end of file diff --git a/src/lib/components/ui/dialog/dialog-description.svelte b/src/lib/components/ui/dialog/dialog-description.svelte new file mode 100644 index 0000000..59f3ba0 --- /dev/null +++ b/src/lib/components/ui/dialog/dialog-description.svelte @@ -0,0 +1,16 @@ + + + diff --git a/src/lib/components/ui/dialog/dialog-footer.svelte b/src/lib/components/ui/dialog/dialog-footer.svelte new file mode 100644 index 0000000..91ecaba --- /dev/null +++ b/src/lib/components/ui/dialog/dialog-footer.svelte @@ -0,0 +1,20 @@ + + +
+ {@render children?.()} +
diff --git a/src/lib/components/ui/dialog/dialog-header.svelte b/src/lib/components/ui/dialog/dialog-header.svelte new file mode 100644 index 0000000..8d1abfc --- /dev/null +++ b/src/lib/components/ui/dialog/dialog-header.svelte @@ -0,0 +1,20 @@ + + +
+ {@render children?.()} +
diff --git a/src/lib/components/ui/dialog/dialog-overlay.svelte b/src/lib/components/ui/dialog/dialog-overlay.svelte new file mode 100644 index 0000000..05c30ac --- /dev/null +++ b/src/lib/components/ui/dialog/dialog-overlay.svelte @@ -0,0 +1,19 @@ + + + diff --git a/src/lib/components/ui/dialog/dialog-title.svelte b/src/lib/components/ui/dialog/dialog-title.svelte new file mode 100644 index 0000000..9cf592c --- /dev/null +++ b/src/lib/components/ui/dialog/dialog-title.svelte @@ -0,0 +1,16 @@ + + + diff --git a/src/lib/components/ui/dialog/index.ts b/src/lib/components/ui/dialog/index.ts new file mode 100644 index 0000000..7c2cd73 --- /dev/null +++ b/src/lib/components/ui/dialog/index.ts @@ -0,0 +1,37 @@ +import { Dialog as DialogPrimitive } from "bits-ui"; + +import Title from "./dialog-title.svelte"; +import Footer from "./dialog-footer.svelte"; +import Header from "./dialog-header.svelte"; +import Overlay from "./dialog-overlay.svelte"; +import Content from "./dialog-content.svelte"; +import Description from "./dialog-description.svelte"; + +const Root: typeof DialogPrimitive.Root = DialogPrimitive.Root; +const Trigger: typeof DialogPrimitive.Trigger = DialogPrimitive.Trigger; +const Close: typeof DialogPrimitive.Close = DialogPrimitive.Close; +const Portal: typeof DialogPrimitive.Portal = DialogPrimitive.Portal; + +export { + Root, + Title, + Portal, + Footer, + Header, + Trigger, + Overlay, + Content, + Description, + Close, + // + Root as Dialog, + Title as DialogTitle, + Portal as DialogPortal, + Footer as DialogFooter, + Header as DialogHeader, + Trigger as DialogTrigger, + Overlay as DialogOverlay, + Content as DialogContent, + Description as DialogDescription, + Close as DialogClose, +}; diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 34832d6..d3b59a2 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,6 +1,8 @@ + {@render children()} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 608aaff..3564008 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -4,10 +4,12 @@ import Daemon from '@/components/app/daemon.svelte'; import Spinner from '@lucide/svelte/icons/loader'; import { state } from '@/state.svelte'; + import BackgroundAnalyzer from '@/components/app/background-analyzer.svelte'; + {#if state.isLoading && !state.hasInteracted}
diff --git a/yarn.lock b/yarn.lock index e68344b..ada6ac9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -518,10 +518,10 @@ "@jridgewell/resolve-uri" "^3.1.0" "@jridgewell/sourcemap-codec" "^1.4.14" -"@lucide/svelte@^0.488.0": - version "0.488.0" - resolved "https://registry.yarnpkg.com/@lucide/svelte/-/svelte-0.488.0.tgz#8f600b12c2e5ff3933ffb22db33df3e50987e740" - integrity sha512-i8TFY+vOVci2J/UhaeF1Yj25NOL8UJ27hf+/CexvfIyLSdgid3zHwh0iVf+DlWpAsXXJl2rQ5Cl5g/qfMbfOHw== +"@lucide/svelte@^0.492.0": + version "0.492.0" + resolved "https://registry.yarnpkg.com/@lucide/svelte/-/svelte-0.492.0.tgz#d37602405680f36bd263b3db6f9311b5887c0bf9" + integrity sha512-67ubMQPVSeoP0hWeNCJNhCB3IgOWXB0Ke7zwLObUidYH/1l0kGtIdN/cP9tJEWOg3QE33R3iqyXSAEKElMyJcQ== "@nodelib/fs.scandir@2.1.5": version "2.1.5" @@ -1364,6 +1364,11 @@ minimatch@^9.0.4: resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.1.2.tgz#93a9626ce5e5e66bd4db86849e7515e92340a707" integrity sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw== +mode-watcher@0.5.1: + version "0.5.1" + resolved "https://registry.yarnpkg.com/mode-watcher/-/mode-watcher-0.5.1.tgz#310e6ac144b3f0b3cfb486e1015d9e746e503377" + integrity sha512-adEC6T7TMX/kzQlaO/MtiQOSFekZfQu4MC+lXyoceQG+U5sKpJWZ4yKXqw846ExIuWJgedkOIPqAYYRk/xHm+w== + mri@^1.1.0: version "1.2.0" resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"