129 lines
5.3 KiB
PHP
129 lines
5.3 KiB
PHP
@props([
|
|
'episode',
|
|
'view',
|
|
'displayjapanese' => false
|
|
])
|
|
|
|
@php
|
|
$title = $displayjapanese
|
|
? "{$episode->title_jpn} ({$episode->title}) - {$episode->episode}"
|
|
: "{$episode->title} - {$episode->episode}";
|
|
|
|
$isLoggedIn = auth()->check();
|
|
|
|
$isWatched = $isLoggedIn
|
|
? $episode->userWatched(auth()->id())
|
|
: false;
|
|
|
|
$problematic = cache()->rememberForever(
|
|
"episodeProblematic{$episode->id}",
|
|
fn () => $episode->getProblematicTags()
|
|
);
|
|
@endphp
|
|
|
|
<div class="group w-full p-1">
|
|
<a
|
|
href="{{ route('hentai.index', ['title' => $episode->slug]) }}"
|
|
class="block overflow-hidden rounded-2xl border border-neutral-200 bg-white transition-all duration-300 hover:-translate-y-1 hover:border-neutral-400 hover:shadow-xl dark:border-neutral-800 dark:bg-neutral-900 dark:hover:border-neutral-700"
|
|
>
|
|
<div class="relative overflow-hidden">
|
|
|
|
{{-- Thumbnail / Cover --}}
|
|
@if ($view === 'poster')
|
|
<img
|
|
src="{{ $episode->cover_url }}"
|
|
alt="{{ $episode->title }} - {{ $episode->episode }}"
|
|
loading="lazy"
|
|
width="400"
|
|
class="aspect-[11/16] w-full object-cover object-center transition-transform duration-500 group-hover:scale-[1.03]"
|
|
>
|
|
@elseif ($view === 'thumbnail')
|
|
@php
|
|
$galleryImages = $episode->gallery
|
|
->pluck('thumbnail_url')
|
|
->filter()
|
|
->values();
|
|
@endphp
|
|
<img
|
|
src="{{ $galleryImages->first() }}"
|
|
alt="{{ $episode->title }} - {{ $episode->episode }}"
|
|
loading="lazy"
|
|
width="1000"
|
|
data-gallery='@json($galleryImages)'
|
|
class="preview-gallery aspect-video w-full object-cover object-center transition-transform duration-500 group-hover:scale-[1.03]"
|
|
>
|
|
@endif
|
|
|
|
{{-- Dark Overlay --}}
|
|
<div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent"></div>
|
|
|
|
{{-- Top Meta --}}
|
|
<div class="pointer-events-none absolute inset-x-0 top-0 z-20 flex items-start justify-between p-3">
|
|
|
|
{{-- Problematic Tags --}}
|
|
@if (!empty($problematic))
|
|
<div class="rounded-full bg-red-700/40 px-2 py-1 text-[11px] font-semibold uppercase tracking-wide text-white ring-1 ring-red-700/70">
|
|
<i class="fa-solid fa-triangle-exclamation mr-1"></i>
|
|
{{ $problematic }}
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Resolution --}}
|
|
<div class="ml-auto rounded-full bg-black/70 px-2 py-1 text-[11px] font-semibold tracking-wide text-white ring-1 ring-white/10">
|
|
{{ $episode->getResolution() }}
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Bottom Content --}}
|
|
<div class="pointer-events-none absolute inset-x-0 bottom-0 z-20 p-4">
|
|
|
|
{{-- Title --}}
|
|
<h3 class=" text-sm font-semibold leading-snug text-white md:text-base">
|
|
{{ $title }}
|
|
</h3>
|
|
|
|
{{-- Bottom Row --}}
|
|
<div class="mt-3 flex items-center justify-between gap-3">
|
|
|
|
{{-- Stats --}}
|
|
<div class="flex flex-wrap items-center gap-3 text-sm font-bold text-neutral-200">
|
|
|
|
<span class="flex items-center gap-1">
|
|
<i class="fa-regular fa-eye text-neutral-200 font-bold"></i>
|
|
{{ $episode->viewCountFormatted() }}
|
|
</span>
|
|
|
|
<span class="flex items-center gap-1">
|
|
<i class="fa-regular fa-heart text-neutral-200 font-bold"></i>
|
|
{{ $episode->likeCount() }}
|
|
</span>
|
|
|
|
<span class="flex items-center gap-1">
|
|
<i class="fa-regular fa-comment text-neutral-200 font-bold"></i>
|
|
{{ $episode->commentCount() }}
|
|
</span>
|
|
</div>
|
|
|
|
{{-- Watched Status (logged in users only) --}}
|
|
@auth
|
|
@if ($isWatched)
|
|
<div class="shrink-0 rounded-full bg-emerald-800/40 px-2.5 py-1 text-xs font-semibold text-emerald-300 ring-1 ring-emerald-500/30">
|
|
@if ($view === 'thumbnail')
|
|
<i class="fa-solid fa-eye mr-1"></i> Watched
|
|
@else
|
|
<i class="fa-solid fa-eye"></i>
|
|
@endif
|
|
</div>
|
|
@else
|
|
<div class="shrink-0 rounded-full bg-rose-800/40 px-2.5 py-1 text-xs font-semibold text-rose-300 ring-1 ring-rose-500/30">
|
|
<i class="fa-solid fa-eye-slash"></i>
|
|
</div>
|
|
@endif
|
|
@endauth
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</a>
|
|
</div> |