mirror of
https://github.com/SrIzan10/lofi.git
synced 2026-06-06 00:56:53 +00:00
chore: random stuffs
This commit is contained in:
47
README.md
47
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
|
||||
@@ -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>
|
||||
59
src/lib/components/app/bg-analyzer.svelte
Normal file
59
src/lib/components/app/bg-analyzer.svelte
Normal file
@@ -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>
|
||||
@@ -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 />
|
||||
|
||||
Reference in New Issue
Block a user