feat: audio controls

Author: blaiyz

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;
 ```

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": "^4.0.7"
   },
   "type": "module",
   "dependencies": {

pnpm-lock.yaml

@@ -53,17 +53,17 @@
   {#if isOnPrimaryMonitor() && media && shownSession}
     <div
       transition:fly={{ y: 20, duration: config.transitionDuration }}
-      class="flex items-center gap-3 mr-2"
+      class="flex items-stretch"
     >
       <button
-        class="transition hover:text-zb-accent hover:scale-125"
+        class="transition px-2 hover:text-zb-accent hover:scale-125"
         aria-label="Previous"
         onclick={() => media.previous()}
       >
         <SkipBack />
       </button>
       <button
-        class="relative gap-x-2 overflow-hidden inline-flex items-center justify-center group transition hover:text-zb-accent"
+        class="relative px-1 gap-x-2 overflow-hidden inline-flex items-center justify-center group transition hover:text-zb-accent"
         aria-label="Toggle"
         onclick={() => media.togglePlayPause()}
       >
@@ -102,7 +102,7 @@
         </SmoothDiv>
       </button>
       <button
-        class="transition hover:text-zb-accent hover:scale-125"
+        class="transition px-2 hover:text-zb-accent hover:scale-125"
         aria-label="Next"
         onclick={() => media.next()}
       >

src/components/NowPlaying.svelte

@@ -5,6 +5,7 @@
   import PointFilled from "@tabler/icons-svelte/icons/point-filled";
   import NowPlaying from "./NowPlaying.svelte";
   import SmoothDiv from "./SmoothDiv.svelte";
+  import VolumeControl from "./VolumeControl/VolumeControl.svelte";
 
   let date = $derived(providers.date);
   let weather = $derived(providers.weather);
@@ -15,12 +16,18 @@
     const shortDay = days[date.getDay()];
     return shortDay + " " + date.toLocaleDateString();
   };
+
+  const timeOptions: Intl.DateTimeFormatOptions = {
+    hour: "numeric",
+    minute: "2-digit"
+  };
 </script>
 
 <div class="flex flex-row items-center h-full">
   <NowPlaying />
+  <VolumeControl />
   {#if weather}
-    <div class="truncate flex items-center mr-2">
+    <div class="truncate flex items-center pr-2">
       <span class="text-2xl">
         {#if weather.status === "clear_day"}
           <i class="nf nf-weather-day_sunny"></i>
@@ -53,10 +60,13 @@
   {/if}
   {#if !isOnPrimaryMonitor() || !config.taskbarIntegration.enabled}
     <PointFilled class="mr-2" />
-    <SmoothDiv outerClass="flex h-full overflow-hidden">
-      <button onclick={() => (fullDate = !fullDate)}>
+    <SmoothDiv outerClass="flex items-stretch h-full overflow-hidden">
+      <button
+        class="hover:text-zb-accent"
+        onclick={() => (fullDate = !fullDate)}
+      >
         <p class="whitespace-nowrap">
-          {date?.formatted}
+          {date?.new.toLocaleTimeString(undefined, timeOptions)}
           {#if fullDate}
             -
             {date && getDate(date?.new)}

src/components/RightGroup.svelte

@@ -0,0 +1,84 @@
+#VolumeSlider {
+  @apply transition-colors;
+  --pip-height: 0.4rem;
+  --track-width: 0.4rem;
+  --handle-rotate: 0deg;
+
+  --range-slider: hsl(var(--border));
+  --range-inactive: hsl(var(--volume-end));
+  --range-range: hsl(var(--volume-end));
+  --range-low: hsl(var(--volume-start));
+
+  --range-handle-inactive: hsl(var(--volume-inner));
+  --range-handle: hsl(var(--volume-inner));
+  --range-handle-focus: hsl(var(--volume-inner));
+  --range-handle-border: transparent;
+
+  --range-pip: hsl(var(--text));
+  --range-pip-in-range: hsl(var(--volume-end));
+  --range-pip-active: hsl(var(--volume-end));
+  --range-pip-hover: hsl(var(--volume-end));
+}
+
+#VolumeSlider.rangeSlider.rsPips {
+  margin-bottom: 0;
+}
+
+#VolumeSlider.rangeSlider {
+  margin: 0;
+  margin-inline: 0.5rem;
+  @apply transition-[margin];
+}
+
+#VolumeSlider.rangeSlider:hover,
+#VolumeSlider.rangeSlider:active {
+  margin-inline: 1.2rem;
+}
+
+#VolumeSlider .rangeBar {
+  @apply bg-gradient-to-r from-[var(--range-low)] to-[var(--range)];
+}
+
+#VolumeSlider .rangePips .rsPip {
+  height: var(--pip-height);
+  width: 0.1rem;
+}
+
+#VolumeSlider.rangeSlider .rangeHandle {
+  width: 0;
+  height: 0;
+  background: none;
+  display: grid;
+  grid-template: 1fr / 1fr;
+  align-items: center;
+  overflow: hidden;
+  @apply transition-[width,height];
+}
+
+#VolumeSlider.rangeSlider:hover .rangeHandle,
+#VolumeSlider.rangeSlider:active .rangeHandle {
+  width: 2.2rem;
+  height: 1.2rem;
+}
+
+#VolumeSlider.rangeSlider .rangeFloat {
+  opacity: 0;
+  background: transparent;
+  translate: none;
+  grid-area: 1 / 1;
+  position: static;
+  padding: 0;
+}
+
+#VolumeSlider.rangeSlider:hover .rangeFloat,
+#VolumeSlider.rangeSlider:active .rangeFloat {
+  opacity: 1;
+}
+
+#VolumeSlider.rangeSlider .rangeNub {
+  transform: none;
+  border-width: 0.2rem;
+  color: var(--range-handle);
+  border-color: var(--range-handle);
+  background-color: color-mix(in srgb, currentColor 50%, hsl(var(--bg)));
+}

src/components/VolumeControl/VolumeControl.css

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import { providers } from "$lib/providers.svelte";
+  import { config } from "$lib/config.svelte";
+  import VolumeX from "@lucide/svelte/icons/volume-x";
+  import Volume from "@lucide/svelte/icons/volume";
+  import Volume1 from "@lucide/svelte/icons/volume-1";
+  import Volume2 from "@lucide/svelte/icons/volume-2";
+  import VolumeOff from "@lucide/svelte/icons/volume-off";
+  import ChevronLeft from "@lucide/svelte/icons/chevron-left";
+  import RangeSlider from "svelte-range-slider-pips";
+  import SmoothDiv from "../SmoothDiv.svelte";
+  import "./VolumeControl.css";
+  import { fly } from "svelte/transition";
+
+  let audio = $derived(providers.audio);
+  let device = $derived(audio?.defaultPlaybackDevice);
+  let volume = $derived(device?.volume ?? 0);
+  let muted = $derived(device?.isMuted ?? false);
+  let sliderOpen = $state(false);
+  let values = $derived([volume]);
+
+  const onMouseWheel = (e: WheelEvent) => {
+    if (!device) return;
+    e.preventDefault();
+    const increment = 5;
+    let newVolume = volume + (e.deltaY < 0 ? increment : -increment);
+    newVolume = Math.max(0, Math.min(100, newVolume));
+    audio?.setVolume(newVolume);
+  };
+</script>
+
+{#if device}
+  <div class="flex items-stretch h-full mr-1" onwheel={onMouseWheel}>
+    <div class="h-full overflow-hidden flex items-center">
+      <SmoothDiv outerClass="flex justify-end">
+        {#if sliderOpen}
+          <RangeSlider
+            id="VolumeSlider"
+            class="w-24 mr-2"
+            float
+            min={0}
+            max={100}
+            range="min"
+            step={1}
+            pips
+            pipstep={10}
+            bind:values
+            on:change={(e) => audio?.setVolume(e.detail.value)}
+          />
+        {/if}
+      </SmoothDiv>
+    </div>
+    <button
+      class="transition px-1 text-lg hover:text-zb-accent hover:scale-125 {sliderOpen
+        ? 'rotate-180'
+        : ''}"
+      aria-label="Open volume slider"
+      onclick={() => (sliderOpen = !sliderOpen)}><ChevronLeft /></button
+    >
+    <button
+      class="transition px-1 mr-1 text-lg stroke-2 hover:text-zb-accent hover:scale-125"
+      aria-label="Mute"
+      onclick={() => audio?.setMute(!muted)}
+    >
+      {#if device}
+        {#if muted || volume === 0}
+          <VolumeX />
+        {:else if volume <= 33}
+          <Volume />
+        {:else if volume > 33 && volume <= 66}
+          <Volume1 />
+        {:else}
+          <Volume2 />
+        {/if}
+      {:else}
+        <VolumeOff />
+      {/if}
+    </button>
+  </div>
+{/if}

src/components/VolumeControl/VolumeControl.svelte

@@ -8,12 +8,13 @@ import { configLoaded, type Config } from "./config.svelte";
 const providerConfig = {
   battery: { type: "battery", refreshInterval: 1000 * 60 * 1 }, // 1 minute
   cpu: { type: "cpu", refreshInterval: 2000 },
-  date: { type: "date", formatting: "HH:mm" },
+  date: { type: "date" },
   glazewm: { type: "glazewm" },
   memory: { type: "memory", refreshInterval: 5000 },
   network: { type: "network", refreshInterval: 2000 },
   weather: { type: "weather", refreshInterval: 1000 * 60 * 15 }, // 15 minutes
-  media: { type: "media" }
+  media: { type: "media" },
+  audio: { type: "audio" }
 } satisfies ProviderGroupConfig;
 
 const providers: ProviderGroup<typeof providerConfig>["outputMap"] = $state({
@@ -24,7 +25,8 @@ const providers: ProviderGroup<typeof providerConfig>["outputMap"] = $state({
   memory: null,
   network: null,
   weather: null,
-  media: null
+  media: null,
+  audio: null
 });
 
 async function initProviders() {

src/lib/providers.svelte.ts

@@ -122,7 +122,7 @@
       <Group
         rightCurve={!config.attachSides}
         outerClass="h-full justify-self-end"
-        innerClass="h-full px-4 flex items-center {isOnPrimaryMonitor()
+        innerClass="h-full pl-2 pr-4 flex items-center {isOnPrimaryMonitor()
           ? 'pr-zrby'
           : ''}"
       >

src/routes/+page.svelte

@@ -53,6 +53,9 @@
   --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;
 }