Update playlist sidebar to use livewire

2026-08-04 18:33:50 +02:00
parent 7f9573fe0f
commit 9dcf13a62e
10 changed files with 472 additions and 205 deletions
@@ -0,0 +1,58 @@
+@props([
+    'playlistEpisode',
+    'isActive' => false,
+    'isOwner' => false,
+])
+
+@php
+    $episode = $playlistEpisode->episode;
+@endphp
+
+<div
+    wire:key="playlist-sidebar-row-{{ $playlistEpisode->id }}"
+    @if ($isActive) data-active-row aria-current="true" @endif
+    class="group relative flex h-20 shrink-0 items-center gap-3 px-2.5 transition {{ $isActive ? 'bg-rose-600/10 dark:bg-rose-500/10' : 'hover:bg-neutral-100 dark:hover:bg-neutral-900' }}"
+>
+    @if ($isActive)
+        <span class="absolute inset-y-0 left-0 w-1 bg-rose-600"></span>
+    @endif
+
+    <div class="flex h-7 w-7 shrink-0 items-center justify-center text-sm text-neutral-500 dark:text-neutral-400">
+        @if ($isActive)
+            <i class="fa-solid fa-play text-rose-600 dark:text-rose-400"></i>
+        @else
+            {{ $playlistEpisode->position }}
+        @endif
+    </div>
+
+    <a href="{{ route('hentai.index', ['title' => $episode->slug, 'playlist' => $playlistEpisode->playlist_id]) }}" class="shrink-0">
+        <img
+            src="{{ $episode->gallery->first()?->thumbnail_url }}"
+            alt="{{ $episode->title }} - {{ $episode->episode }}"
+            loading="{{ $isActive ? 'eager' : 'lazy' }}"
+            decoding="async"
+            width="100"
+            class="h-14 w-[100px] rounded-md object-cover {{ $isActive ? 'ring-2 ring-rose-600/60' : '' }}"
+        >
+    </a>
+
+    <div class="min-w-0 flex-1">
+        <a href="{{ route('hentai.index', ['title' => $episode->slug, 'playlist' => $playlistEpisode->playlist_id]) }}"
+            class="block truncate text-sm font-semibold text-neutral-900 transition hover:text-rose-500 dark:text-white dark:hover:text-rose-400">
+            {{ $episode->title }}
+        </a>
+        <p class="truncate text-xs text-neutral-500 dark:text-neutral-400">{{ $episode->studio->name }}</p>
+    </div>
+
+    @if ($isOwner)
+        <button
+            type="button"
+            wire:click="remove({{ $playlistEpisode->id }})"
+            wire:confirm="{{ __('playlist.remove-confirm') }}"
+            aria-label="{{ __('playlist.remove') }}"
+            class="shrink-0 rounded-md p-2 text-neutral-400 transition hover:bg-red-50 hover:text-red-600 sm:opacity-0 sm:group-hover:opacity-100 dark:text-neutral-500 dark:hover:bg-red-950/40 dark:hover:text-red-400"
+        >
+            <i class="fa-solid fa-trash-can"></i>
+        </button>
+    @endif
+</div>
@@ -0,0 +1,219 @@
+<div
+    x-data="{
+        total: {{ $total }},
+        windowStart: {{ $windowStart }},
+        windowEnd: {{ $windowEnd }},
+        rowHeight: 80,
+        collapsible: @json($collapsible),
+        open: ! @json($collapsible),
+        loadingUp: false,
+        loadingDown: false,
+        rafPending: false,
+        init() {
+            this.$watch('open', (value) => {
+                if (value) {
+                    setTimeout(() => this.scrollActiveIntoView(), 250);
+                }
+            });
+
+            if (! this.collapsible) {
+                this.$nextTick(() => this.scrollActiveIntoView());
+            }
+        },
+        get scroller() {
+            return this.$refs.scroller;
+        },
+        onScroll() {
+            if (this.rafPending) {
+                return;
+            }
+
+            this.rafPending = true;
+
+            requestAnimationFrame(() => {
+                this.rafPending = false;
+                this.evaluateScroll();
+            });
+        },
+        evaluateScroll() {
+            const scroller = this.scroller;
+
+            if (! scroller || scroller.clientHeight === 0) {
+                return;
+            }
+
+            const threshold = this.rowHeight * 2;
+
+            if (scroller.scrollTop <= threshold) {
+                this.loadUp();
+            }
+
+            if (scroller.scrollTop + scroller.clientHeight >= scroller.scrollHeight - threshold) {
+                this.loadDown();
+            }
+        },
+        async loadUp() {
+            if (this.loadingUp || this.windowStart <= 1) {
+                return;
+            }
+
+            this.loadingUp = true;
+            const before = this.windowStart;
+
+            try {
+                await $wire.prependChunk();
+                this.syncWindow();
+
+                const added = before - this.windowStart;
+
+                if (added > 0) {
+                    this.scroller.scrollTop += added * this.rowHeight;
+                }
+            } finally {
+                this.loadingUp = false;
+            }
+        },
+        async loadDown() {
+            if (this.loadingDown || this.windowEnd >= this.total) {
+                return;
+            }
+
+            this.loadingDown = true;
+            const before = this.windowStart;
+
+            try {
+                await $wire.appendChunk();
+                this.syncWindow();
+
+                const trimmedFromTop = this.windowStart - before;
+
+                if (trimmedFromTop > 0) {
+                    this.scroller.scrollTop -= trimmedFromTop * this.rowHeight;
+                }
+            } finally {
+                this.loadingDown = false;
+            }
+        },
+        syncWindow() {
+            const data = this.$el.dataset;
+
+            this.total = parseInt(data.total, 10);
+            this.windowStart = parseInt(data.windowStart, 10);
+            this.windowEnd = parseInt(data.windowEnd, 10);
+        },
+        scrollActiveIntoView() {
+            const scroller = this.scroller;
+            const active = scroller ? scroller.querySelector('[data-active-row]') : null;
+
+            if (! scroller || ! active) {
+                return;
+            }
+
+            scroller.scrollTop = active.offsetTop - scroller.clientHeight / 2 + this.rowHeight / 2;
+        },
+    }"
+    data-total="{{ $total }}"
+    data-window-start="{{ $windowStart }}"
+    data-window-end="{{ $windowEnd }}"
+    data-active-playlist-episode-id="{{ $currentPlaylistEpisodeId ?? 'null' }}"
+>
+    <input id="playlist_id" type="hidden" value="{{ $playlist->id }}">
+    <input id="playlist_next_episode_slug" type="hidden" value="{{ $nextEpisodeSlug }}">
+
+    <div class="xl:sticky xl:top-[80px] xl:w-[420px]">
+        <div class="overflow-hidden rounded-2xl border border-neutral-200/70 bg-white shadow-sm dark:border-neutral-800 dark:bg-neutral-950">
+
+            @if ($collapsible)
+                <button type="button" @click="open = ! open" :aria-expanded="open ? 'true' : 'false'"
+                    class="flex w-full items-center justify-between gap-3 px-4 py-3 text-neutral-900 transition hover:bg-neutral-50 dark:text-white dark:hover:bg-neutral-900">
+                    <span class="flex items-center gap-2 font-semibold">
+                        <i class="fa-solid fa-list text-rose-600"></i>
+                        {{ __('playlist.playlist') }} · {{ $total }} {{ __('playlist.episodes') }}
+                    </span>
+                    <i class="fa-solid fa-chevron-down text-neutral-400 transition-transform" :class="{ 'rotate-180': open }"></i>
+                </button>
+
+                <div x-show="open" x-collapse.duration.200ms>
+            @endif
+
+            <div class="p-4">
+                <a href="{{ $playlist->is_private ? route('profile.playlist.show', $playlist->id) : route('playlist.show', $playlist->id) }}"
+                    class="flex min-w-0 items-center gap-2 text-neutral-900 transition hover:text-rose-500 dark:text-white dark:hover:text-rose-400">
+                    <i class="fa-solid fa-list text-rose-600"></i>
+                    <h3 class="truncate font-bold">{{ $playlist->name }}</h3>
+                    <span class="ml-auto shrink-0 rounded-full bg-neutral-100 px-2 py-0.5 text-xs font-semibold text-neutral-600 dark:bg-neutral-800 dark:text-neutral-300">
+                        {{ $total }} {{ __('playlist.episodes') }}
+                    </span>
+                </a>
+                <div class="mt-2 flex items-center gap-2">
+                    <img src="{{ $playlist->user->getAvatar() }}" alt="" class="h-6 w-6 rounded-full">
+                    <span class="truncate text-xs text-neutral-500 dark:text-neutral-400">{{ $playlist->user->name }}</span>
+                </div>
+            </div>
+
+            <div class="border-y border-neutral-200/70 px-4 py-3 dark:border-neutral-800">
+                <p class="mb-2 text-[11px] font-semibold uppercase tracking-wider text-rose-600 dark:text-rose-400">
+                    <i class="fa-solid fa-play mr-1"></i>{{ __('playlist.now-playing') }}
+                </p>
+                <div class="flex items-center gap-3">
+                    <img src="{{ $currentEpisode->gallery->first()?->thumbnail_url }}" alt=""
+                        class="h-12 w-20 shrink-0 rounded-md object-cover" loading="eager" decoding="async">
+                    <div class="min-w-0 flex-1">
+                        <p class="truncate text-sm font-semibold text-neutral-900 dark:text-white">
+                            {{ $currentEpisode->title }}
+                        </p>
+                        <p class="text-xs text-neutral-500 dark:text-neutral-400">
+                            {{ $currentPosition }}/{{ $total }} {{ __('playlist.episodes') }}
+                        </p>
+                    </div>
+                    <div class="flex shrink-0 items-center gap-1">
+                        @if ($previousEpisodeSlug)
+                            <a href="{{ route('hentai.index', ['title' => $previousEpisodeSlug, 'playlist' => $playlist->id]) }}"
+                                class="flex h-8 w-8 items-center justify-center rounded-lg text-neutral-500 transition hover:bg-neutral-100 hover:text-rose-500 dark:text-neutral-400 dark:hover:bg-neutral-800">
+                                <i class="fa-solid fa-chevron-up"></i>
+                            </a>
+                        @endif
+                        @if ($nextEpisodeSlug)
+                            <a href="{{ route('hentai.index', ['title' => $nextEpisodeSlug, 'playlist' => $playlist->id]) }}"
+                                class="flex h-8 w-8 items-center justify-center rounded-lg text-neutral-500 transition hover:bg-neutral-100 hover:text-rose-500 dark:text-neutral-400 dark:hover:bg-neutral-800">
+                                <i class="fa-solid fa-chevron-down"></i>
+                            </a>
+                        @endif
+                    </div>
+                </div>
+            </div>
+
+            <div x-ref="scroller" x-on:scroll.passive="onScroll"
+                class="max-h-[50vh] overflow-y-auto overscroll-contain [overflow-anchor:none] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-neutral-300 [&::-webkit-scrollbar-track]:bg-transparent dark:[&::-webkit-scrollbar-thumb]:bg-neutral-700 xl:max-h-[calc(100vh-340px)]">
+                <div wire:loading.delay wire:target="prependChunk"
+                    class="flex items-center justify-center py-3 text-neutral-400">
+                    <i class="fa-solid fa-spinner animate-spin"></i>
+                </div>
+
+                @forelse ($episodes as $playlistEpisode)
+                    @include('livewire.partials.playlist-sidebar-row', [
+                        'playlistEpisode' => $playlistEpisode,
+                        'isActive' => $playlistEpisode->episode_id === $currentEpisodeId,
+                        'isOwner' => $isOwner,
+                    ])
+                @empty
+                    <div class="px-4 py-10 text-center">
+                        <div class="inline-flex h-14 w-14 items-center justify-center rounded-full bg-neutral-100 dark:bg-neutral-800">
+                            <i class="fa-solid fa-clapperboard text-xl text-neutral-400 dark:text-neutral-500"></i>
+                        </div>
+                        <p class="mt-3 text-sm text-neutral-500 dark:text-neutral-400">{{ __('playlist.empty-playlist') }}</p>
+                    </div>
+                @endforelse
+
+                <div wire:loading.delay wire:target="appendChunk"
+                    class="flex items-center justify-center py-3 text-neutral-400">
+                    <i class="fa-solid fa-spinner animate-spin"></i>
+                </div>
+            </div>
+
+            @if ($collapsible)
+                </div>
+            @endif
+        </div>
+    </div>
+</div>