WIP: global player refactor pt. 2
This commit is contained in:
@@ -21,12 +21,13 @@
|
||||
<div
|
||||
class="fixed bottom-0 left-0 right-0 z-50 border-t bg-background/95 backdrop-blur shadow-2xl safe-area-pb"
|
||||
>
|
||||
<div
|
||||
class="px-4 py-2 flex items-center justify-between gap-4 h-16"
|
||||
<div class="px-4 py-2 flex items-center justify-between gap-4 h-16">
|
||||
<!-- Mini Player Info -->
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center gap-3 overflow-hidden flex-1 text-left bg-transparent border-none p-0 cursor-pointer"
|
||||
onclick={() => (open = true)}
|
||||
>
|
||||
<!-- Mini Player Info -->
|
||||
<div class="flex items-center gap-3 overflow-hidden flex-1">
|
||||
<!-- Placeholder Art -->
|
||||
<div
|
||||
class="h-10 w-10 rounded bg-muted flex items-center justify-center shrink-0"
|
||||
@@ -34,7 +35,7 @@
|
||||
<Disc class="h-6 w-6 text-muted-foreground" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col overflow-hidden text-left">
|
||||
<div class="flex flex-col overflow-hidden">
|
||||
<div class="text-sm font-medium truncate leading-tight">
|
||||
{player.currentTrack.title || "Unknown Title"}
|
||||
</div>
|
||||
@@ -44,13 +45,10 @@
|
||||
{player.currentTrack.artist || "Unknown Artist"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<!-- Mini Controls -->
|
||||
<div
|
||||
class="flex items-center gap-1"
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div class="flex items-center gap-1">
|
||||
<Controls />
|
||||
<!-- Actually Controls has too many buttons for mini player. Just Play/Next? -->
|
||||
<!-- We'll reimplement mini controls or pass props to Controls to show fewer buttons -->
|
||||
|
||||
@@ -26,14 +26,12 @@
|
||||
|
||||
// Setup MediaSession
|
||||
if ("mediaSession" in navigator) {
|
||||
navigator.mediaSession.setActionHandler(
|
||||
"play",
|
||||
() => (audioCtx.paused = false),
|
||||
);
|
||||
navigator.mediaSession.setActionHandler(
|
||||
"pause",
|
||||
() => (audioCtx.paused = true),
|
||||
);
|
||||
navigator.mediaSession.setActionHandler("play", () => {
|
||||
audioCtx.paused = false;
|
||||
});
|
||||
navigator.mediaSession.setActionHandler("pause", () => {
|
||||
audioCtx.paused = true;
|
||||
});
|
||||
navigator.mediaSession.setActionHandler("previoustrack", () =>
|
||||
player.prev(),
|
||||
);
|
||||
@@ -124,7 +122,7 @@
|
||||
onpause={onPause}
|
||||
onended={onEnded}
|
||||
class="hidden"
|
||||
/>
|
||||
></audio>
|
||||
|
||||
<div class="contents">
|
||||
<div class="lg:hidden">
|
||||
|
||||
@@ -2,12 +2,13 @@
|
||||
import { Play, X } from "@lucide/svelte";
|
||||
import { Button } from "$lib/components/ui/button";
|
||||
import { player } from "$lib/player/store.svelte";
|
||||
import type { Track } from "$lib/player/types";
|
||||
|
||||
function onRemove(id: number) {
|
||||
player.remove(id);
|
||||
}
|
||||
|
||||
function onJump(track: any) {
|
||||
function onJump(track: Track) {
|
||||
player.playNext(track);
|
||||
// Wait, jump usually means play immediately?
|
||||
// "Jump to track" -> set as current.
|
||||
|
||||
@@ -9,8 +9,6 @@ export class AudioContext {
|
||||
|
||||
private audioEl: HTMLAudioElement | null = null;
|
||||
|
||||
constructor() {}
|
||||
|
||||
setElement(el: HTMLAudioElement) {
|
||||
this.audioEl = el;
|
||||
}
|
||||
|
||||
@@ -90,7 +90,7 @@ function zodErrorSummary(prefix: string, err: z.ZodError): string {
|
||||
return `${prefix}\n${lines.join("\n")}${more}`;
|
||||
}
|
||||
|
||||
function categoryNumberToText(
|
||||
function _categoryNumberToText(
|
||||
v: number | string | null | undefined,
|
||||
): string | null {
|
||||
if (v === null || v === undefined) return null;
|
||||
|
||||
Reference in New Issue
Block a user