Add Various Title Displays

This commit is contained in:
Neshura 2024-04-22 20:05:27 +02:00
parent d1903045a4
commit 1175f88401
Signed by: Neshura
GPG key ID: B6983AAA6B9A7A6C

View file

@ -17,6 +17,9 @@
let title = $state(""); let title = $state("");
let queueIndex = $state(0); let queueIndex = $state(0);
let currentSong = $state({ let currentSong = $state({
data: {
title,
},
queueIndex queueIndex
}); });
let isPaused = $state(true); let isPaused = $state(true);
@ -167,6 +170,11 @@
}) })
</script> </script>
<svelte:head>
<title>Lytter - {currentSong.data.title}({currentSong.data.artist})</title>
<meta name="robots" content="noindex nofollow" />
</svelte:head>
<div class="border border-2 flex-1 grid grid-cols-5"> <div class="border border-2 flex-1 grid grid-cols-5">
<div class="border border-2 col-span-1"> <div class="border border-2 col-span-1">
<h1>Left Sidebar</h1> <h1>Left Sidebar</h1>
@ -180,7 +188,7 @@
</div> </div>
<div class="border border-2 min-h-24 h-24"> <div class="border border-2 min-h-24 h-24">
<div class="flex flex-row gap-2"> <div class="flex flex-row gap-2">
<p class="border p-2">Song: {title}</p> <p class="border p-2">Song: {currentSong.data.title}</p>
<p class="border p-2">Volume: {volume}</p> <p class="border p-2">Volume: {volume}</p>
<p class="border p-2">{displayTime(progress)}/{displayTime(duration)}</p> <p class="border p-2">{displayTime(progress)}/{displayTime(duration)}</p>
<p class="border p-2">{progressPercent().toFixed(2)}%</p> <p class="border p-2">{progressPercent().toFixed(2)}%</p>