Init
This commit is contained in:
101
resources/views/livewire/playlist-overview.blade.php
Normal file
101
resources/views/livewire/playlist-overview.blade.php
Normal file
@@ -0,0 +1,101 @@
|
||||
<div>
|
||||
<div
|
||||
class="relative pt-5 mx-auto sm:px-6 lg:px-8 space-y-6 text-gray-900 dark:text-white xl:max-w-[95%] 2xl:max-w-[90%]">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex text-sm font-light bg-neutral-950/50 backdrop-blur-lg rounded-lg p-10 gap-2">
|
||||
<a href="{{ route('user.index', ['username' => $playlist->user->username]) }}">
|
||||
@if ($playlist->user->avatar)
|
||||
<img class="relative w-24 h-24 flex-none rounded-full shadow-lg"
|
||||
src="https://external-content.duckduckgo.com/iu/?u=https://cdn.discordapp.com/avatars/{{ $playlist->user->id }}/{{ $playlist->user->avatar }}.webp">
|
||||
@else
|
||||
<img class="relative w-24 h-24 flex-none rounded-full shadow-lg" src="/images/default-avatar.webp">
|
||||
@endif
|
||||
</a>
|
||||
<div class="flex flex-col justify-center flex-1 pl-4">
|
||||
<h1 class="font-bold text-3xl">{{ $playlist->name }}</h1>
|
||||
<p class="font-light text-lg text-neutral-200">Episodes: {{ count($playlistEpisodes) }}</p>
|
||||
<p class="font-light text-lg text-neutral-200">Creator: <a
|
||||
href="{{ route('user.index', ['username' => $playlist->user->username]) }}">{{ $playlist->user->username }}</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center pl-4">
|
||||
<div class="flex justify-end">
|
||||
<a href="{{ route('hentai.index', ['title' => $playlistEpisodes->first()->episode->slug, 'playlist' => $playlist->id]) }}"
|
||||
class="cursor-pointer float-right text-white bg-rose-700 hover:bg-rose-800 focus:ring-4 focus:outline-none focus:ring-rose-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-rose-600 dark:hover:bg-rose-700 dark:focus:ring-rose-800">{{ __('playlist.play') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@forelse($playlistEpisodes as $playlistEpisode)
|
||||
@php $episode = $playlistEpisode->episode; @endphp
|
||||
<div wire:key="playlist-episode-{{ $playlistEpisode->id }}"
|
||||
class="flex justify-between items-center rounded-lg hover:bg-black border border-neutral-950 bg-neutral-950/50 backdrop-blur-lg transition !mt-1 gap-2">
|
||||
<div class="flex pl-5 pr-5 w-10">
|
||||
{{ $playlistEpisode->position }}
|
||||
</div>
|
||||
<div class="flex-[2] hidden md:block">
|
||||
<div class="relative p-1 w-full md:p-2">
|
||||
<a href="{{ route('hentai.index', ['title' => $episode->slug]) }}">
|
||||
<img alt="{{ $episode->title }} - {{ $episode->episode }}" loading="lazy" width="1000"
|
||||
class="block object-cover object-center relative z-20 rounded-lg aspect-video"
|
||||
src="{{ $episode->gallery->first()->thumbnail_url }}">
|
||||
|
||||
@guest
|
||||
<p
|
||||
class="absolute left-2 bottom-2 bg-rose-700/70 !text-white rounded-bl-lg rounded-tr-lg p-1 pr-2 pl-2 font-semibold text-sm z-30 collapse md:visible">
|
||||
<i class="fa-regular fa-eye"></i> {{ $episode->viewCountFormatted() }} <i
|
||||
class="fa-regular fa-heart"></i>
|
||||
{{ $episode->likeCount() }} <i class="fa-regular fa-comment"></i>
|
||||
{{ $episode->commentCount() }}
|
||||
</p>
|
||||
@endguest
|
||||
|
||||
@auth
|
||||
@if ($episode->userWatched(auth()->user()->id))
|
||||
<p
|
||||
class="absolute left-2 bottom-2 bg-green-600/80 !text-white rounded-bl-lg rounded-tr-lg p-1 pr-2 pl-2 font-semibold text-sm z-30">
|
||||
<i class="fa-regular fa-eye"></i> {{ $episode->viewCountFormatted() }} <i
|
||||
class="fa-regular fa-heart"></i> {{ $episode->likeCount() }} <i
|
||||
class="fa-regular fa-comment"></i>
|
||||
{{ $episode->commentCount() }}
|
||||
</p>
|
||||
@else
|
||||
<p
|
||||
class="absolute left-2 bottom-2 bg-rose-700/70 !text-white rounded-bl-lg rounded-tr-lg p-1 pr-2 pl-2 font-semibold text-sm z-30">
|
||||
<i class="fa-regular fa-eye"></i> {{ $episode->viewCountFormatted() }} <i
|
||||
class="fa-regular fa-heart"></i> {{ $episode->likeCount() }} <i
|
||||
class="fa-regular fa-comment"></i>
|
||||
{{ $episode->commentCount() }}
|
||||
</p>
|
||||
@endif
|
||||
@endauth
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-[5]">
|
||||
<a href="{{ route('hentai.index', ['title' => $episode->slug]) }}"
|
||||
class="font-bold">{{ $episode->title }} - {{ $episode->episode }}</a>
|
||||
<br>
|
||||
<a href="{{ route('hentai.index', ['title' => $episode->slug]) }}">{{ $episode->title_jpn }}</a>
|
||||
</div>
|
||||
<div class="pr-5">
|
||||
@auth
|
||||
@if (Auth::user()->id === $playlist->user->id)
|
||||
<button class="pr-2" wire:click="moveUp({{ $playlistEpisode->id }})"><i
|
||||
class="fa-solid fa-arrow-up"></i></button>
|
||||
<button class="pr-2" wire:click="moveDown({{ $playlistEpisode->id }})"><i
|
||||
class="fa-solid fa-arrow-down"></i></button>
|
||||
<button wire:click="remove({{ $playlistEpisode->id }})" class="text-red-500"><i
|
||||
class="fa-solid fa-trash"></i></button>
|
||||
@endif
|
||||
@endauth
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="pt-6 text-2xl text-center">
|
||||
No results (╥﹏╥)
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
Reference in New Issue
Block a user