Cleaned Up Controls Code
This commit is contained in:
parent
d088472acb
commit
94dc6e2fcd
3 changed files with 99 additions and 71 deletions
7
src/lib/components/ui/separator/index.ts
Normal file
7
src/lib/components/ui/separator/index.ts
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
import Root from "./separator.svelte";
|
||||||
|
|
||||||
|
export {
|
||||||
|
Root,
|
||||||
|
//
|
||||||
|
Root as Separator,
|
||||||
|
};
|
22
src/lib/components/ui/separator/separator.svelte
Normal file
22
src/lib/components/ui/separator/separator.svelte
Normal 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}
|
||||||
|
/>
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
source.onpause = () => {
|
||||||
|
isPaused = source.paused;
|
||||||
|
}
|
||||||
|
|
||||||
|
source.ontimeupdate = () => {
|
||||||
|
progress = source.currentTime;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
async function pause() {
|
|
||||||
|
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>
|
||||||
{/if}
|
{:else}
|
||||||
|
<Button onclick={pause}>Pause</Button>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue