more ts switches, use setcontext instead of stores

This commit is contained in:
2026-03-15 17:20:16 +01:00
parent b47a433414
commit 8573b82515
13 changed files with 115 additions and 99 deletions

View File

@@ -19,14 +19,11 @@
const bubble = createBubbler();
import { onMount, onDestroy } from 'svelte';
import { fade } from 'svelte/transition';
import {
currentSongIndex,
currentStream,
getSongAtTime,
updateCurrentSong
} from '$lib/stores.svelte.js';
import { getStreamContext } from '$lib/stream-context.svelte.ts';
import type { Track } from '$lib/types';
const ctx = getStreamContext();
interface Props {
src: any;
audio?: any;
@@ -76,6 +73,7 @@
let seekTrack = $state('');
let seeking = $state(false);
let volumeSeeking = $state(false);
let pendingSeekTime = $state<number | null>(null);
let songBar = $state();
let volumeBar = $state();
let innerWidth = $state();
@@ -86,14 +84,12 @@
const volumeData = localStorage.getItem('volume');
volume = volumeData ? parseFloat(volumeData) : 0.67;
setVolume(volume);
});
// update browser metadata on track changes
if ('mediaSession' in navigator) {
currentSongIndex.subscribe((val) => {
if (val != null && !paused && $currentStream) {
setMediaMetadata($currentStream.tracks[val]);
}
});
// update browser metadata on track changes
$effect(() => {
if ('mediaSession' in navigator && ctx.songIndex != null && !paused && ctx.current) {
setMediaMetadata(ctx.current.tracks[ctx.songIndex]);
}
});
@@ -121,8 +117,8 @@
// browsers don't like if you update this while no media is playing
function setMediaMetadataOnPlay() {
if ('mediaSession' in navigator && $currentStream && $currentSongIndex != null) {
setMediaMetadata($currentStream.tracks[$currentSongIndex]);
if ('mediaSession' in navigator && ctx.current && ctx.songIndex != null) {
setMediaMetadata(ctx.current.tracks[ctx.songIndex]);
}
}
@@ -145,6 +141,11 @@
audio.currentTime = seek(event, songBar.getBoundingClientRect()) * duration;
}
function updateSeekVisual(event) {
if (!songBar) return;
pendingSeekTime = seek(event, songBar.getBoundingClientRect()) * duration;
}
function seekVolume(event) {
if (!volumeBar) return;
volume = seek(event, volumeBar.getBoundingClientRect());
@@ -174,20 +175,20 @@
}
let bounds = songBar.getBoundingClientRect();
let seekValue = ((event.pageX - bounds.left) * duration) / bounds.width;
if (!$currentStream) return;
let trackArray = $currentStream.tracks[getSongAtTime(seekValue)];
if (!ctx.current) return;
let trackArray = ctx.current.tracks[ctx.getSongAtTime(seekValue)];
seekTrack = trackArray[1] + ' - ' + trackArray[2];
seekText = formatSeconds(seekValue);
}
function trackMouse(event) {
if (seeking) seekAudio(event);
if (seeking) updateSeekVisual(event);
if (showTooltip && !disableTooltip) seekTooltip(event);
if (volumeSeeking) seekVolume(event);
}
run(() => {
if ($currentSongIndex != null) {
updateCurrentSong(currentTime, $currentSongIndex);
if (ctx.songIndex != null) {
ctx.updateCurrentSong(currentTime, ctx.songIndex);
}
});
run(() => {
@@ -216,7 +217,13 @@
<svelte:window
bind:innerWidth
bind:innerHeight
onmouseup={() => (seeking = volumeSeeking = false)}
onmouseup={() => {
if (seeking && pendingSeekTime != null) {
audio.currentTime = pendingSeekTime;
pendingSeekTime = null;
}
seeking = volumeSeeking = false;
}}
onmousemove={trackMouse}
/>
@@ -235,7 +242,7 @@
</button>
<progress
bind:this={songBar}
value={currentTime ? currentTime : 0}
value={seeking && pendingSeekTime != null ? pendingSeekTime : (currentTime || 0)}
max={duration}
onmousedown={() => (seeking = true)}
onmouseenter={() => (showTooltip = true)}