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 {onMount} from "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 paused: boolean = $derived(audioSource.paused);
|
||||
|
@ -12,47 +14,10 @@
|
|||
|
||||
|
||||
let source: HTMLAudioElement = $state();
|
||||
|
||||
let audio = $state({
|
||||
get paused() {
|
||||
if (source) {
|
||||
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 isPaused = $state(true);
|
||||
let volume = $state(0.2);
|
||||
let progress = $state(0);
|
||||
let duration = $state(0);
|
||||
|
||||
let queue: Array<unknown> = $state([]);
|
||||
|
||||
|
@ -89,7 +54,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
async function playSong(songIndex: number) {
|
||||
function playSong(songIndex: number) {
|
||||
console.log(queue[songIndex].title);
|
||||
const chosenSong = queue[songIndex];
|
||||
let parameters = [
|
||||
|
@ -103,28 +68,62 @@
|
|||
];
|
||||
let url = OpenSubsonic.getApiUrl("stream", parameters);
|
||||
|
||||
await pause();
|
||||
source = new Audio(url);
|
||||
await play();
|
||||
pause();
|
||||
newSong(url);
|
||||
play();
|
||||
}
|
||||
|
||||
async function play() {
|
||||
await source.play().catch(() => {});
|
||||
await new Promise(resolve => {setTimeout(resolve, 50)});
|
||||
audio.volume = 0.2;
|
||||
forceUpdate();
|
||||
function newSong(url: string) {
|
||||
source = new Audio(url); // Assign new URL
|
||||
|
||||
// Reassign Event Handlers
|
||||
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();
|
||||
await new Promise(resolve => {setTimeout(resolve, 50)});
|
||||
forceUpdate();
|
||||
//audio.paused = audio.source.paused;
|
||||
}
|
||||
|
||||
function forceUpdate() {
|
||||
let tmp = audio;
|
||||
audio = {};
|
||||
audio = tmp;
|
||||
$effect(() => {
|
||||
if (source) {
|
||||
source.volume = volume;
|
||||
}
|
||||
});
|
||||
|
||||
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(() => {
|
||||
|
@ -139,21 +138,21 @@
|
|||
</div>
|
||||
<div class="border border-2 col-span-3">
|
||||
<h1>Center</h1>
|
||||
<button onclick={() => audio.volume += 0.1}>Louder</button>
|
||||
<button onclick={() => audio.volume -= 0.1}>Quieter</button>
|
||||
{#if typeof audio !== "undefined"}
|
||||
<p>{audio.currentTime}</p>
|
||||
{/if}
|
||||
<button onclick={() => volume += 0.1}>Louder</button>
|
||||
<button onclick={() => volume -= 0.1}>Quieter</button>
|
||||
</div>
|
||||
<QueueFrame {queue} {fetchQueue} {saveQueue} {removeSongFromQueue} {playSong} />
|
||||
</div>
|
||||
<div class="border border-2 min-h-24 h-24">
|
||||
{#if typeof audio !== "undefined"}
|
||||
<PlayerFrame
|
||||
audio={audio}
|
||||
pause={pause}
|
||||
play={play}
|
||||
/>
|
||||
<div class="flex flex-row gap-2">
|
||||
<p class="border p-2">Volume: {volume}</p>
|
||||
<p class="border p-2">{displayTime(progress)}/{displayTime(duration)}</p>
|
||||
<p class="border p-2">{progressPercent().toFixed(2)}%</p>
|
||||
{#if isPaused}
|
||||
<Button onclick={play}>Play</Button>
|
||||
{:else}
|
||||
<Button onclick={pause}>Pause</Button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
Loading…
Reference in a new issue