Music Player

@props([
    'src' => null,
    'cover' => null,
    'title' => 'Midnight Drive',
    'artist' => 'The Synthwaves',
    'autoplay' => false,
])

<div
    x-data="uiVinylPlayer({ src: {{ $src ? \Illuminate\Support\Js::from($src) : 'null' }}, autoplay: {{ $autoplay ? 'true' : 'false' }} })"
    data-slot="music-player-01"
    {{ $attributes->merge(['class' => 'mx-auto flex w-full max-w-md flex-col items-center gap-6 text-foreground sm:flex-row sm:items-center']) }}
>
    {{-- Turntable: the record is the interactive element. --}}
    <div class="relative mx-auto aspect-square w-56 shrink-0 sm:w-64">
        {{-- The vinyl record (a real button so it is keyboard + screen-reader friendly). --}}
        <button
            type="button"
            @click="toggle()"
            :aria-pressed="playing"
            :aria-label="playing ? '{{ __('Pause') }}' : '{{ __('Play') }}'"
            aria-label="{{ __('Play') }}"
            class="ui-vinyl-disc group relative block aspect-square w-full overflow-hidden rounded-full border border-border shadow-lg outline-none ring-offset-2 ring-offset-background focus-visible:ring-2 focus-visible:ring-ring motion-safe:animate-[ui-vinyl-spin_4s_linear_infinite] [animation-play-state:paused]"
            :class="{ '[animation-play-state:running]': playing, '[animation-play-state:paused]': !playing }"
        >
            {{-- Blurred cover fill behind the grooves. --}}
            @if ($cover)
                <img src="{{ $cover }}" alt="" aria-hidden="true" class="absolute inset-0 size-full scale-110 object-cover opacity-40 blur-xl" />
            @else
                <span aria-hidden="true" class="absolute inset-0 bg-gradient-to-br from-primary/50 via-accent/40 to-secondary/50 blur-xl"></span>
            @endif

            {{-- Concentric vinyl grooves. --}}
            <span aria-hidden="true" class="ui-vinyl-grooves absolute inset-0 rounded-full"></span>

            {{-- Center label: cover art (or token gradient) + center hole. --}}
            <span aria-hidden="true" class="absolute inset-0 m-auto flex aspect-square w-2/5 items-center justify-center overflow-hidden rounded-full border border-border/60 shadow-inner">
                @if ($cover)
                    <img src="{{ $cover }}" alt="" class="size-full object-cover" />
                @else
                    <span class="size-full bg-gradient-to-br from-primary via-accent to-secondary"></span>
                @endif
                {{-- Center hole. --}}
                <span class="absolute size-3 rounded-full bg-background shadow-inner"></span>
            </span>

            {{-- Play/pause glyph overlay (decorative; the button label carries the meaning). --}}
            <span aria-hidden="true" class="absolute inset-0 m-auto flex aspect-square w-2/5 items-center justify-center rounded-full bg-background/0 text-foreground opacity-0 transition-opacity group-hover:bg-background/30 group-hover:opacity-100">
                <svg class="size-6 drop-shadow" viewBox="0 0 24 24" fill="currentColor" x-show="!playing">
                    <path d="M8 5.14v13.72a1 1 0 0 0 1.54.84l10.29-6.86a1 1 0 0 0 0-1.68L9.54 4.3A1 1 0 0 0 8 5.14Z" />
                </svg>
                <svg class="size-6 drop-shadow" viewBox="0 0 24 24" fill="currentColor" x-show="playing" x-cloak>
                    <path d="M7 4a1 1 0 0 1 1 1v14a1 1 0 1 1-2 0V5a1 1 0 0 1 1-1Zm10 0a1 1 0 0 1 1 1v14a1 1 0 1 1-2 0V5a1 1 0 0 1 1-1Z" />
                </svg>
            </span>
        </button>

        {{-- Tonearm: swings onto the record while playing, lifts off when paused. --}}
        <div
            aria-hidden="true"
            class="absolute -end-2 -top-2 origin-top-right rtl:origin-top-left transition-transform duration-700 ease-out motion-reduce:transition-none"
            :class="playing ? 'rotate-[26deg]' : 'rotate-0'"
        >
            {{-- Pivot mount. --}}
            <span class="absolute end-0 top-0 size-6 rounded-full border border-border bg-card shadow-sm"></span>
            {{-- Arm. --}}
            <span class="absolute end-3 top-3 block h-28 w-2 -translate-y-1 rotate-[18deg] rounded-full bg-muted-foreground/70 shadow-sm"></span>
            {{-- Headshell / needle. --}}
            <span class="absolute end-[2.1rem] top-[6.5rem] block h-4 w-3 rotate-[18deg] rounded-sm bg-foreground shadow-sm"></span>
        </div>
    </div>

    {{-- Track metadata. --}}
    <div class="min-w-0 text-center sm:text-start">
        <p class="truncate text-lg font-semibold">{{ $title }}</p>
        <p class="truncate text-sm text-muted-foreground">{{ $artist }}</p>
        <x-ui.badge variant="secondary" class="mt-2" x-text="playing ? '{{ __('Now playing') }}' : '{{ __('Paused') }}'">{{ __('Paused') }}</x-ui.badge>
    </div>

    @if ($src)
        <audio x-ref="audio" preload="none" src="{{ $src }}" class="hidden"></audio>
    @endif
</div>

/**
 * Vinyl record music player behavior.
 *
 * A spinning vinyl record that toggles play/pause when clicked. State is a
 * single `playing` flag that drives every visual cue (the CSS spin animation's
 * play-state, the tonearm swing, the play/pause label) and, when a real audio
 * source is wired, the actual <audio> element.
 *
 * If `src` is given the element referenced by `x-ref="audio"` is the source of
 * truth: its native `play`/`pause`/`ended` events keep `playing` in sync, so
 * the record stops spinning and the arm lifts when playback ends. With no
 * `src` it is a silent visual demo that still spins and toggles.
 *
 * Self-registers on `alpine:init` so import order does not matter. Audio is
 * paused in `destroy()`.
 *
 * Named `uiVinylPlayer` to avoid clashing with the album-art `uiMusicPlayer`
 * card transport.
 */
document.addEventListener('alpine:init', () => {
    window.Alpine.data('uiVinylPlayer', (config = {}) => ({
        hasAudio: !!config.src,
        autoplay: config.autoplay ?? false,
        playing: false,

        init() {
            const audio = this.$refs.audio;
            if (audio) {
                // Mirror the native media state so external controls or the
                // track ending keep the visuals honest.
                audio.addEventListener('play', () => { this.playing = true; });
                audio.addEventListener('pause', () => { this.playing = false; });
                audio.addEventListener('ended', () => { this.playing = false; });
            }
            if (this.autoplay) this.play();
        },

        destroy() {
            const audio = this.$refs.audio;
            if (audio) audio.pause();
            this.playing = false;
        },

        play() {
            const audio = this.$refs.audio;
            if (audio) {
                // play() resolves the `play` event which flips `playing`; if the
                // browser blocks autoplay, fall back to the visual-only state.
                const p = audio.play();
                if (p && typeof p.catch === 'function') p.catch(() => { this.playing = true; });
            } else {
                this.playing = true;
            }
        },

        pause() {
            const audio = this.$refs.audio;
            if (audio) audio.pause();
            else this.playing = false;
        },

        toggle() {
            if (this.playing) this.pause();
            else this.play();
        },
    }));
});