Cleaned Up Controls Code

This commit is contained in:
Neshura 2024-04-21 23:39:56 +02:00
parent d088472acb
commit 94dc6e2fcd
Signed by: Neshura
GPG key ID: B6983AAA6B9A7A6C
3 changed files with 99 additions and 71 deletions

View file

@ -0,0 +1,7 @@
import Root from "./separator.svelte";
export {
Root,
//
Root as Separator,
};

View file

@ -0,0 +1,22 @@
<script lang="ts">
import { Separator as SeparatorPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
type $$Props = SeparatorPrimitive.Props;
let className: $$Props["class"] = undefined;
export let orientation: $$Props["orientation"] = "horizontal";
export let decorative: $$Props["decorative"] = undefined;
export { className as class };
</script>
<SeparatorPrimitive.Root
class={cn(
"shrink-0 bg-border",
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
className
)}
{orientation}
{decorative}
{...$$restProps}
/>

View file

@ -4,7 +4,9 @@
import {OpenSubsonic} from "$lib/opensubsonic"; import {OpenSubsonic} from "$lib/opensubsonic";
import {onMount} from "svelte"; import {onMount} from "svelte";
import QueueFrame from "$lib/components/custom/QueueFrame.svelte"; import QueueFrame from "$lib/components/custom/QueueFrame.svelte";
import PlayerFrame from "$lib/components/custom/PlayerFrame.svelte"; //import PlayerFrame from "$lib/components/custom/PlayerFrame.svelte";
import {Button} from "$lib/components/ui/button";
import {browser} from "$app/environment";
//let audioSource: HTMLAudioElement = $state(new Audio()); //let audioSource: HTMLAudioElement = $state(new Audio());
//let paused: boolean = $derived(audioSource.paused); //let paused: boolean = $derived(audioSource.paused);
@ -12,47 +14,10 @@
let source: HTMLAudioElement = $state(); let source: HTMLAudioElement = $state();
let isPaused = $state(true);
let audio = $state({ let volume = $state(0.2);
get paused() { let progress = $state(0);
if (source) { let duration = $state(0);
return source.paused;
}
else {
return true;
}
},
get volume() {
if (source) {
return source.volume;
}
else {
return 0;
}
},
set volume(volume) {
source.volume = volume;
},
get duration() {
if (source) {
return source.duration;
}
else {
return 0;
}
},
get currentTime() {
if (source) {
return source.currentTime;
}
else {
return 0;
}
}
});
let queue: Array<unknown> = $state([]); let queue: Array<unknown> = $state([]);
@ -89,7 +54,7 @@
} }
} }
async function playSong(songIndex: number) { function playSong(songIndex: number) {
console.log(queue[songIndex].title); console.log(queue[songIndex].title);
const chosenSong = queue[songIndex]; const chosenSong = queue[songIndex];
let parameters = [ let parameters = [
@ -103,28 +68,62 @@
]; ];
let url = OpenSubsonic.getApiUrl("stream", parameters); let url = OpenSubsonic.getApiUrl("stream", parameters);
await pause(); pause();
source = new Audio(url); newSong(url);
await play(); play();
} }
async function play() { function newSong(url: string) {
await source.play().catch(() => {}); source = new Audio(url); // Assign new URL
await new Promise(resolve => {setTimeout(resolve, 50)});
audio.volume = 0.2; // Reassign Event Handlers
forceUpdate(); source.onloadedmetadata = () => {
duration = source.duration;
};
source.onplay = () => {
source.volume = volume;
isPaused = source.paused;
} }
async function pause() {
source.onpause = () => {
isPaused = source.paused;
}
source.ontimeupdate = () => {
progress = source.currentTime;
}
}
function play() {
source.play().catch(() => {});
}
function pause() {
source.pause(); source.pause();
await new Promise(resolve => {setTimeout(resolve, 50)});
forceUpdate();
//audio.paused = audio.source.paused;
} }
function forceUpdate() { $effect(() => {
let tmp = audio; if (source) {
audio = {}; source.volume = volume;
audio = tmp; }
});
function progressPercent() {
return progress / duration * 100 || 0;
}
function displayTime(rawSeconds: number) {
const intSeconds = rawSeconds.toFixed(0);
const seconds = intSeconds % 60;
const minutes = (intSeconds / 60).toFixed(0) % 60;
const hours = (intSeconds / 360).toFixed(0);
if (hours == 0) {
return `${minutes.toString()}:${seconds.toString().padStart(2, 0)}`
}
else {
return `${hours}:${minutes.toString().padStart(2, 0)}:${seconds.toString().padStart(2, 0)}`
}
} }
onMount(() => { onMount(() => {
@ -139,21 +138,21 @@
</div> </div>
<div class="border border-2 col-span-3"> <div class="border border-2 col-span-3">
<h1>Center</h1> <h1>Center</h1>
<button onclick={() => audio.volume += 0.1}>Louder</button> <button onclick={() => volume += 0.1}>Louder</button>
<button onclick={() => audio.volume -= 0.1}>Quieter</button> <button onclick={() => volume -= 0.1}>Quieter</button>
{#if typeof audio !== "undefined"}
<p>{audio.currentTime}</p>
{/if}
</div> </div>
<QueueFrame {queue} {fetchQueue} {saveQueue} {removeSongFromQueue} {playSong} /> <QueueFrame {queue} {fetchQueue} {saveQueue} {removeSongFromQueue} {playSong} />
</div> </div>
<div class="border border-2 min-h-24 h-24"> <div class="border border-2 min-h-24 h-24">
{#if typeof audio !== "undefined"} <div class="flex flex-row gap-2">
<PlayerFrame <p class="border p-2">Volume: {volume}</p>
audio={audio} <p class="border p-2">{displayTime(progress)}/{displayTime(duration)}</p>
pause={pause} <p class="border p-2">{progressPercent().toFixed(2)}%</p>
play={play} {#if isPaused}
/> <Button onclick={play}>Play</Button>
{:else}
<Button onclick={pause}>Pause</Button>
{/if} {/if}
</div>
</div> </div>