From 64fbf71fb0b9359867745bafc323ce8c0742cde5 Mon Sep 17 00:00:00 2001
From: blaiyz <139375534+blaiyz@users.noreply.github.com>
Date: Wed, 17 Sep 2025 19:19:03 +0300
Subject: [PATCH 1/2] feat: audio controls
---
README.md | 12 +++
package.json | 15 ++--
pnpm-lock.yaml | 13 +++
src/app.css | 2 +-
src/components/NowPlaying.svelte | 8 +-
src/components/RightGroup.svelte | 24 +++++-
.../VolumeControl/VolumeControl.css | 84 +++++++++++++++++++
.../VolumeControl/VolumeControl.svelte | 78 +++++++++++++++++
src/lib/providers.svelte.ts | 8 +-
src/routes/+page.svelte | 2 +-
static/config.css | 3 +
tailwind.config.js | 7 +-
12 files changed, 235 insertions(+), 21 deletions(-)
create mode 100644 src/components/VolumeControl/VolumeControl.css
create mode 100644 src/components/VolumeControl/VolumeControl.svelte
diff --git a/README.md b/README.md
index 0dc9fff..b108ecc 100644
--- a/README.md
+++ b/README.md
@@ -163,6 +163,9 @@ In addition to colors, `config.css` provides variables that control other style
--not-playing: var(--tau-love);
--network: var(--tau-text);
--weather: var(--tau-text);
+--volume-start: var(--tau-strong);
+--volume-end: var(--tau-accent);
+--volume-inner: var(--tau-accent);
--bg-focused: var(--tau-highlight-high) / 0.4;
--bg-unfocused: var(--tau-overlay) / 0.5;
```
@@ -202,6 +205,9 @@ In addition to colors, `config.css` provides variables that control other style
--tiling-direction: var(--rp-rose);
--network: var(--rp-text);
--weather: var(--rp-text);
+--volume-start: var(--rp-love);
+--volume-end: var(--rp-foam);
+--volume-inner: var(--rp-foam);
--bg-focused: var(--rp-subtle) / 0.4;
--bg-unfocused: var(--rp-base) / 0.5;
```
@@ -234,6 +240,9 @@ In addition to colors, `config.css` provides variables that control other style
--tiling-direction: var(--rp-moon-rose);
--network: var(--rp-moon-text);
--weather: var(--rp-moon-text);
+--volume-start: var(--rp-moon-love);
+--volume-end: var(--rp-moon-foam);
+--volume-inner: var(--rp-moon-foam);
--bg-focused: var(--rp-moon-subtle) / 0.4;
--bg-unfocused: var(--rp-moon-base) / 0.5;
```
@@ -266,6 +275,9 @@ In addition to colors, `config.css` provides variables that control other style
--tiling-direction: var(--rp-dawn-rose);
--network: var(--rp-dawn-text);
--weather: var(--rp-dawn-text);
+--volume-start: var(--rp-dawn-love);
+--volume-end: var(--rp-dawn-foam);
+--volume-inner: var(--rp-dawn-foam);
--bg-focused: var(--rp-dawn-overlay) / 0.4;
--bg-unfocused: var(--rp-dawn-text) / 0.5;
```
diff --git a/package.json b/package.json
index a24fbff..9e81e52 100644
--- a/package.json
+++ b/package.json
@@ -12,32 +12,33 @@
"format": "prettier --write ."
},
"devDependencies": {
+ "@eslint/js": "^9.34.0",
+ "@lucide/svelte": "^0.541.0",
"@sveltejs/adapter-auto": "^6.1.0",
"@sveltejs/adapter-static": "^3.0.9",
"@sveltejs/kit": "^2.31.1",
"@sveltejs/vite-plugin-svelte": "^6.1.2",
+ "@tabler/icons-svelte": "^3.34.1",
+ "@tauri-apps/api": "^2.7.0",
"@types/eslint": "^9.6.1",
"autoprefixer": "^10.4.21",
"eslint": "^9.34.0",
- "@eslint/js": "^9.34.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-svelte": "^3.11.0",
+ "fs-extra": "^11.3.1",
"globals": "^16.3.0",
+ "json5": "^2.2.3",
+ "jsonschema": "^1.5.0",
"postcss": "^8.5.6",
"prettier": "^3.6.2",
"prettier-plugin-svelte": "^3.4.0",
"svelte": "^5.38.6",
- "@lucide/svelte": "^0.541.0",
- "@tabler/icons-svelte": "^3.34.1",
"svelte-check": "^4.3.1",
"tailwindcss": "^3.4.17",
"typescript": "^5.9.2",
"typescript-eslint": "^8.41.0",
"vite": "^7.1.3",
- "json5": "^2.2.3",
- "jsonschema": "^1.5.0",
- "@tauri-apps/api": "^2.7.0",
- "fs-extra": "^11.3.1"
+ "svelte-range-slider-pips": "https://github.com/blaiyz/svelte-range-slider-pips/tarball/main"
},
"type": "module",
"dependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4fcdaba..bc40f8e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ importers:
glazewm:
specifier: ^1.7.0
version: 1.7.0
+ svelte-range-slider-pips:
+ specifier: https://github.com/blaiyz/svelte-range-slider-pips/tarball/main
+ version: https://github.com/blaiyz/svelte-range-slider-pips/tarball/main(svelte@5.38.6)
zebar:
specifier: ^3.1.1
version: 3.1.1
@@ -1385,6 +1388,12 @@ packages:
svelte:
optional: true
+ svelte-range-slider-pips@https://github.com/blaiyz/svelte-range-slider-pips/tarball/main:
+ resolution: {tarball: https://github.com/blaiyz/svelte-range-slider-pips/tarball/main}
+ version: 4.0.7
+ peerDependencies:
+ svelte: ^4.2.7 || ^5.0.0
+
svelte@5.38.6:
resolution: {integrity: sha512-ltBPlkvqk3bgCK7/N323atUpP3O3Y+DrGV4dcULrsSn4fZaaNnOmdplNznwfdWclAgvSr5rxjtzn/zJhRm6TKg==}
engines: {node: '>=18'}
@@ -2724,6 +2733,10 @@ snapshots:
optionalDependencies:
svelte: 5.38.6
+ svelte-range-slider-pips@https://github.com/blaiyz/svelte-range-slider-pips/tarball/main(svelte@5.38.6):
+ dependencies:
+ svelte: 5.38.6
+
svelte@5.38.6:
dependencies:
'@jridgewell/remapping': 2.3.5
diff --git a/src/app.css b/src/app.css
index 30f9443..1000bd5 100644
--- a/src/app.css
+++ b/src/app.css
@@ -11,7 +11,7 @@
@tailwind components;
@tailwind utilities;
-@layer base {
+@layer custom-base {
body {
overflow: hidden;
font-size: var(--font-size);
diff --git a/src/components/NowPlaying.svelte b/src/components/NowPlaying.svelte
index 84cc32e..ab0f90f 100644
--- a/src/components/NowPlaying.svelte
+++ b/src/components/NowPlaying.svelte
@@ -53,17 +53,17 @@
{#if isOnPrimaryMonitor() && media && shownSession}