w33b/hstream
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update playlist sidebar to use livewire

Browse Source
This commit is contained in:
w33b
2026-08-04 18:33:50 +02:00
parent 7f9573fe0f
commit 9dcf13a62e
10 changed files with 472 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/livewire/partials/playlist-sidebar-row.blade.php
+58
View File
@@ -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>
resources/views/livewire/playlist-sidebar.blade.php
+219
View File
@@ -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>
resources/views/stream/index.blade.php
+6 -2
View File
@@ -16,7 +16,9 @@
@if($isMobile)
<div class="flex flex-col">
@include('stream.partials.playlist')
@isset($playlist)
<livewire:playlist-sidebar :playlist-id="$playlist->id" :current-episode-id="$episode->id" :collapsible="true" />
@endisset
</div>
@endif
@@ -27,7 +29,9 @@
</div>
<div class="flex flex-col">
@if(! $isMobile)
@include('stream.partials.playlist')
@isset($playlist)
<livewire:playlist-sidebar :playlist-id="$playlist->id" :current-episode-id="$episode->id" />
@endisset
@endif
@include('stream.partials.more-episodes')
resources/views/stream/partials/playlist.blade.php
-94
View File
@@ -1,94 +0,0 @@
@isset($playlist)
<div class="pt-2 sm:px-2 lg:px-4 2xl:w-[450px]">
<div class="bg-transparent rounded-lg overflow-hidden bg-white dark:bg-neutral-800">
<div class="p-4">
<p class="leading-normal font-bold text-lg text-rose-600 pb-2">
@if ($playlist->is_private)
<a href="{{ route('profile.playlist.show', $playlist->id) }}">{{ $playlist->name }}</a>
@else
<a href="{{ route('playlist.show', $playlist->id) }}">{{ $playlist->name }}</a>
@endif
</p>
@php
$episodeCount = $playlistEpisodes->count();
$currentIndex = 0;
$nextEpisode = "";
if ($episodeCount > 1) {
$currentIndex = $playlistEpisodes->search(fn($playlistEpisode) => $playlistEpisode->episode->id == $episode->id);
$nextEpisode = $currentIndex !== false && $currentIndex + 1 < $episodeCount
? $playlistEpisodes[$currentIndex + 1]->episode->slug
: "";
}
@endphp
<p class="text-neutral-800 dark:text-neutral-300">
{{ $playlist->user->name }} • {{ $currentIndex + 1 }}/{{ $episodeCount }} Episodes
</p>
</div>
<!-- Table -->
<div id="scrollable" class="flex-none min-w-full px-4 sm:px-6 md:px-0 overflow-auto scrollbar:!w-1.5 scrollbar:!h-1.5 scrollbar:bg-transparent scrollbar-track:!bg-slate-100 scrollbar-thumb:!rounded scrollbar-thumb:!bg-slate-300 scrollbar-track:!rounded dark:scrollbar-track:!bg-slate-500/[0.16] dark:scrollbar-thumb:!bg-slate-500/50 max-h-96 lg:supports-scrollbars:pr-2 lg:max-h-96">
<div class="overflow-y-auto">
<div class="space-y-2 p-0 pb-2 sm:p-2">
@php
$counter = 1;
$isAuthedUsersPlaylist = false;
if (auth()->check() && $playlist->user->id == auth()->user()->id) {
$isAuthedUsersPlaylist = true;
}
@endphp
@foreach($playlistEpisodes as $playlistEpisode)
@if ($playlistEpisode->episode->id == $episode->id)
<div class="flex items-center gap-4 p-2 bg-rose-800/30 rounded-lg shadow swipe-container transition-colors" id="active">
@else
<div
class="flex items-center gap-4 p-2 dark:bg-neutral-900/50 bg-white rounded-lg shadow transition-colors @if($isMobile && $isAuthedUsersPlaylist) swipe-container @endif"
id="{{ $playlist->id }}-{{ $playlistEpisode->episode->id }}">
@endif
<div class="text-black dark:text-white">
@if ($playlistEpisode->episode->id == $episode->id)
<i class="fa-solid fa-play w-[15px]"></i>
@else
<p class="w-[15px]">{{ $counter }}</p>
@endif
</div>
<a href="{{ route('hentai.index', ['title' => $playlistEpisode->episode->slug, 'playlist' => $playlist->id ]) }}" class="contents">
<img loading="lazy" src="{{ $playlistEpisode->episode->gallery->first()->thumbnail_url }}" alt="{{ $playlistEpisode->episode->title }} - {{ $playlistEpisode->episode->episode }}" class="w-20 h-14 object-cover rounded">
</a>
<div class="grow">
<a href="{{ route('hentai.index', ['title' => $playlistEpisode->episode->slug, 'playlist' => $playlist->id ]) }}">
<p class="text-black dark:text-white font-medium text-sm break-words">{{ $playlistEpisode->episode->title }} - {{ $playlistEpisode->episode->episode }}</p>
</a>
<p class="text-gray-700 dark:text-gray-300 text-xs truncate">{{ $playlistEpisode->episode->viewCount() }} Views - {{ $playlistEpisode->episode->studio->name }}</p>
</div>
@if ($playlistEpisode->episode->id != $episode->id && $isAuthedUsersPlaylist)
@if($isMobile)
<div class="justify-self-end flex items-center">
<i class="transition-all fa-solid fa-grip-lines-vertical cursor-grab text-black dark:text-white" id="del-{{ $playlist->id }}-{{ $playlistEpisode->episode->id }}"></i>
</div>
@else
<div class="justify-self-end flex items-center">
<a class="transition-all fa-solid fa-trash cursor-pointer text-red-700/80" id="delD-{{ $playlist->id }}-{{ $playlistEpisode->episode->id }}"></a>
</div>
@endif
@endif
</div>
@php $counter++; @endphp
@endforeach
</div>
</div>
</div>
</div>
</div>
<input id="playlist_id" type="hidden" value="{{ $playlist->id }}">
<input id="playlist_next_episode_slug" type="hidden" value="{{ $nextEpisode }}">
<script>
// Select the scrollable div and the target child element
const scrollableDiv = document.getElementById('scrollable');
const targetElement = document.getElementById('active');
// Scroll to the target element
scrollableDiv.scrollTop = targetElement.offsetTop - scrollableDiv.offsetTop - 50;
</script>
@endisset