95 lines
5.7 KiB
PHP
95 lines
5.7 KiB
PHP
@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->global_name ?? $playlist->user->username }} • {{ $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
|