From 1f13849b7acdf94d3d46a9d25a06908573eeb780 Mon Sep 17 00:00:00 2001
From: Izan Gil <66965250+SrIzan10@users.noreply.github.com>
Date: Fri, 18 Apr 2025 20:53:13 +0200
Subject: [PATCH] chore: random stuffs

---
 README.md                                     | 47 ++++-----------
 .../components/app/background-analyzer.svelte | 56 ------------------
 src/lib/components/app/bg-analyzer.svelte     | 59 +++++++++++++++++++
 src/routes/+page.svelte                       |  2 +-
 4 files changed, 72 insertions(+), 92 deletions(-)
 delete mode 100644 src/lib/components/app/background-analyzer.svelte
 create mode 100644 src/lib/components/app/bg-analyzer.svelte

diff --git a/README.md b/README.md
index b5b2950..7ed805a 100644
--- a/README.md
+++ b/README.md
@@ -1,38 +1,15 @@
-# sv
+# chillhop
 
-Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+The ultimate lofi player. Uses music from [Chillhop](https://chillhop.com/).
 
-## Creating a project
+## Features
 
-If you're seeing this, you've probably already done this step. Congrats!
-
-```bash
-# create a new project in the current directory
-npx sv create
-
-# create a new project in my-app
-npx sv create my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-## Building
-
-To create a production version of your app:
-
-```bash
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+- [x] Play music
+- [x] Change stations
+- [ ] Change backgrounds
+- [ ] Pomodoro timers
+- [ ] Volume control
+- [ ] Background sounds
+- [ ] Links to Spotify
+- [ ] Alarm(?)
+- [ ] Sleep timer
\ No newline at end of file
diff --git a/src/lib/components/app/background-analyzer.svelte b/src/lib/components/app/background-analyzer.svelte
deleted file mode 100644
index 4f8b658..0000000
--- a/src/lib/components/app/background-analyzer.svelte
+++ /dev/null
@@ -1,56 +0,0 @@
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import { setMode } from 'mode-watcher';
-  
-  export let videoSelector: string = "#bg-video";
-  export let updateInterval: number = 2000;
-  console.log('update')
-  
-  onMount(() => {
-    const video = document.querySelector(videoSelector) as HTMLVideoElement;
-    if (!video) return;
-    
-    const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d');
-    if (!ctx) return;
-    
-    function updateGlobalTextColor() {
-      if (video.paused || video.ended) return;
-      
-      canvas.width = 32;
-      canvas.height = 32;
-      ctx!.drawImage(video, 0, 0, canvas.width, canvas.height);
-      
-      const imageData = ctx!.getImageData(0, 0, canvas.width, canvas.height);
-      const pixels = imageData.data;
-      
-      let totalBrightness = 0;
-      let pixelCount = 0;
-      
-      for (let i = 0; i < pixels.length; i += 4) {
-        const r = pixels[i];
-        const g = pixels[i + 1];
-        const b = pixels[i + 2];
-        
-        const brightness = (r * 0.299 + g * 0.587 + b * 0.114) / 255;
-        totalBrightness += brightness;
-        pixelCount++;
-      }
-      
-      const avgBrightness = totalBrightness / pixelCount;
-      const isDark = avgBrightness < 0.5;
-      
-      //document.documentElement.setAttribute('data-bg-theme', isDark ? 'dark' : 'light');
-      setMode(isDark ? 'dark' : 'light');
-    }
-    
-    video.addEventListener('loadeddata', updateGlobalTextColor);
-    
-    const interval = setInterval(updateGlobalTextColor, updateInterval);
-    
-    return () => {
-      clearInterval(interval);
-      video.removeEventListener('loadeddata', updateGlobalTextColor);
-    };
-  });
-</script>
\ No newline at end of file
diff --git a/src/lib/components/app/bg-analyzer.svelte b/src/lib/components/app/bg-analyzer.svelte
new file mode 100644
index 0000000..0d2aa3e
--- /dev/null
+++ b/src/lib/components/app/bg-analyzer.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { setMode } from 'mode-watcher';
+  
+  export let videoSelector: string = "#bg-video";
+  export let updateInterval: number = 2000;
+  console.log('update')
+
+  function analyzeVideoBrightness(video: HTMLVideoElement, canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D) {
+    if (video.paused || video.ended) return;
+
+    canvas.width = 32;
+    canvas.height = 32;
+    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+
+    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    const pixels = imageData.data;
+
+    let totalBrightness = 0;
+    let pixelCount = 0;
+
+    for (let i = 0; i < pixels.length; i += 4) {
+      const r = pixels[i];
+      const g = pixels[i + 1];
+      const b = pixels[i + 2];
+
+      const brightness = (r * 0.299 + g * 0.587 + b * 0.114) / 255;
+      totalBrightness += brightness;
+      pixelCount++;
+    }
+
+    const avgBrightness = totalBrightness / pixelCount;
+    const isDark = avgBrightness < 0.5;
+
+    setMode(isDark ? 'dark' : 'light');
+  }
+
+  onMount(() => {
+    const video = document.querySelector(videoSelector) as HTMLVideoElement;
+    if (!video) return;
+
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    function updateGlobalTextColor() {
+      analyzeVideoBrightness(video, canvas, ctx!);
+    }
+
+    video.addEventListener('loadeddata', updateGlobalTextColor);
+
+    const interval = setInterval(updateGlobalTextColor, updateInterval);
+
+    return () => {
+      clearInterval(interval);
+      video.removeEventListener('loadeddata', updateGlobalTextColor);
+    };
+  });
+</script>
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 3564008..cdb2c3e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -4,7 +4,7 @@
   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';
+  import BackgroundAnalyzer from '@/components/app/bg-analyzer.svelte';
 </script>
 
 <BgImage />