hstream/resources/views/stream/partials/info.blade.php

<div class="overflow-hidden p-5 bg-transparent bg-white rounded-lg dark:bg-neutral-800">
    <!-- Cover -->
    <div class="w-[100px] md:w-[150px] mr-4 float-left hidden md:block">
        <img alt="{{ $episode->title }}" loading="lazy" width="150"
            class="block relative rounded-lg object-cover object-center aspect-[11/16] z-20"
            src="{{ $episode->cover_url }}"></img>
    </div>

    <!-- Info -->
    <div class="relative">
        <input id="e_id" type="hidden" value="{{ $episode->id }}" />
        <div class="flex flex-col justify-between xl:flex-row">
            <div>
                <!-- Title -->
                <h1 class="text-3xl font-bold text-rose-600">
                    <a class="text-rose-600 break-words hover:underline hover:underline-offset-4"
                        href="{{ route('hentai.index', ['title' => $episode->hentai->slug]) }}">{{ $episode->title }}</a>
                    - {{ $episode->episode }}
                </h1>
                <div>
                    <h2 class="inline leading-tight text-gray-800 dark:text-white">{{ $episode->title_jpn }}</h2>

                    <a data-te-toggle="tooltip"
                        title="Uploaded {{ $episode->created_at->diffForHumans(['parts' => 2]) }}"
                        class="pl-1 leading-tight text-gray-800 text-l dark:text-white">
                        <p class="inline">
                            | <i class="fa-solid fa-upload"></i> {{ $episode->created_at->format('Y-m-d') }} |
                        </p>
                    </a>
                    <a data-te-toggle="tooltip"
                        title="Released {{ \Carbon\Carbon::parse($episode->release_date)->diffForHumans(['parts' => 2]) }}"
                        class="pl-1 leading-tight text-gray-800 text-l dark:text-white">
                        <p class="inline">
                            <i class="fa-regular fa-calendar"></i> {{ $episode->release_date }}
                            |
                        </p>
                    </a>
                    <a href="{{ route('hentai.search', ['order' => 'recently-uploaded', 'studios[0]' => $episode->studio->slug]) }}"
                        class="leading-tight text-gray-800 text-l dark:text-white hover:underline hover:underline-offset-4">
                        {{ $episode->studio->name }}
                    </a>
                    <a id="av1-unsupported" data-te-toggle="tooltip"
                        title="For 1080p and 4k streams we are using the new AV1 codec. Edge users on Windows have to install the AV1 extension pack from the Microsoft Store."
                        class="hidden leading-tight text-red-800 cursor-pointer text-l dark:text-red-500">
                        AV1 Unsupported
                    </a>
                </div>
            </div>

            <div>
                <!-- View Count and Misc Buttons -->
                <div class="float-right">
                    <div class="grid">
                        <div class="flex gap-x-4">

                            @auth
                                @livewire('view-count', ['episode' => $episode])
                                @livewire('like-button', ['episode' => $episode])
                            @endauth

                            @guest
                                <div>
                                    <a class="text-xl leading-tight text-gray-800 whitespace-nowrap dark:text-gray-200">
                                        <i class="pr-0.5 fa-regular fa-eye"></i> {{ $episode->viewCountFormatted() }}
                                    </a>
                                </div>
                                <div data-te-toggle="tooltip" title="Please login to like the episode"
                                    class="text-xl leading-tight text-gray-800 whitespace-nowrap cursor-pointer dark:text-gray-200">
                                    <i class="fa-regular fa-heart pr-[4px]"></i> {{ $episode->likeCount() }}
                                </div>
                            @endguest

                            @php $commentcount = $episode->commentCount(); @endphp
                            @if ($commentcount > 0)
                                <a href="#comments"
                                    class="text-xl leading-tight text-gray-800 whitespace-nowrap dark:text-gray-200">
                                    <i class="pr-0.5 fa-regular fa-comment"></i> {{ $commentcount }}
                                </a>
                            @else
                                <a href="#comments" data-te-toggle="tooltip" title="Be the first one to comment!"
                                    class="text-xl leading-tight text-gray-800 whitespace-nowrap dark:text-gray-200">
                                    <i class="pr-0.5 fa-regular fa-comment"></i> {{ $commentcount }}
                                </a>
                            @endif
                        </div>

                        <div>
                            <a data-te-toggle="modal" data-te-target="#modalDownload" id="reloadCaptchaModal"
                                class="text-xl leading-tight text-gray-800 whitespace-nowrap cursor-pointer dark:text-gray-200">
                                <i class="fa-solid fa-download pr-[4px]"></i> {{ __('stream.download') }}
                            </a>

                            <a data-te-toggle="modal" data-te-target="#modalShare"
                                class="text-xl leading-tight text-gray-800 whitespace-nowrap cursor-pointer dark:text-gray-200">
                                <i class="fa-solid fa-share pr-[4px]"></i> {{ __('stream.share') }}
                            </a>
                        </div>

                        @auth
                            <div>
                                <a data-te-toggle="modal" data-te-target="#modalAddToPlaylist"
                                    class="text-xl leading-tight text-gray-800 whitespace-nowrap cursor-pointer dark:text-gray-200">
                                    <i class="fa-solid fa-square-plus pr-[6px]"></i> {{ __('playlist.playlist') }}
                                </a>
                            </div>
                        @endauth
                    </div>
                </div>
            </div>
        </div>
        <hr class="mt-2 mb-2 border-gray-400/40">
        <p class="text-lg font-bold leading-normal text-rose-600">
            {{ __('stream.description') }}
        </p>
        <p class="text-gray-800 dark:text-gray-200 leading-tight min-h-[50%]">
            {{ $episode->description }}
        </p>
        <hr class="mt-2 mb-1 border-gray-400/40">
        <p class="text-lg font-bold leading-normal text-rose-600">
            {{ __('stream.genres') }}
        </p>
        <ul class="list-none text-center" style="overflow: hidden;">
            <a class="text-gray-400">
                |
            </a>
            @foreach ($episode->tags->sortBy('slug') as $tag)
                <li class="inline-block p-1">
                    @if ($tag->slug == 'uncensored' || $tag->slug == 'vanilla' || $tag->slug == '4k')
                        <a href="{{ route('hentai.search', ['order' => 'recently-uploaded', 'tags[0]' => $tag->slug]) }}"
                            class="block relative items-center px-2 py-2 mt-1 text-xs font-semibold tracking-widest text-green-500 uppercase rounded-md border border-transparent transition duration-150 ease-in-out dark:focus:ring-offset-gray-800 dark:hover:text-white hover:text-white hover:bg-green-700 focus:bg-green-700 active:bg-green-900 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2">
                            {{ $tag->name }}
                        </a>
                    @elseif($tag->slug == 'censored')
                        <a href="{{ route('hentai.search', ['order' => 'recently-uploaded', 'tags[0]' => $tag->slug]) }}"
                            class="block relative items-center px-2 py-2 mt-1 text-xs font-semibold tracking-widest text-yellow-600 uppercase rounded-md border border-transparent transition duration-150 ease-in-out dark:focus:ring-offset-gray-800 dark:hover:text-white hover:text-white hover:bg-yellow-700 focus:bg-yellow-700 active:bg-yellow-900 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2">
                            {{ $tag->name }}
                        </a>
                    @elseif(
                        $tag->slug == 'gore' ||
                            $tag->slug == 'horror' ||
                            $tag->slug == 'scat' ||
                            $tag->slug == 'ntr' ||
                            $tag->slug == 'rape')
                        <a href="{{ route('hentai.search', ['order' => 'recently-uploaded', 'tags[0]' => $tag->slug]) }}"
                            class="block relative items-center px-2 py-2 mt-1 text-xs font-semibold tracking-widest text-red-600 uppercase rounded-md border border-transparent transition duration-150 ease-in-out dark:focus:ring-offset-gray-800 dark:hover:text-white hover:text-white hover:bg-red-700 focus:bg-red-700 active:bg-red-900 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">
                            <i class="fa-solid fa-triangle-exclamation"></i> {{ $tag->name }}
                        </a>
                    @else
                        <a href="{{ route('hentai.search', ['order' => 'recently-uploaded', 'tags[0]' => $tag->slug]) }}"
                            class="block relative items-center px-2 py-2 mt-1 text-xs font-semibold tracking-widest uppercase rounded-md border border-transparent transition duration-150 ease-in-out dark:focus:ring-offset-gray-800 dark:text-white hover:text-white hover:bg-rose-700 focus:bg-rose-700 active:bg-rose-900 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2">
                            {{ $tag->name }}
                        </a>
                    @endif
                </li>
                <a class="text-gray-400">
                    |
                </a>
            @endforeach
        </ul>
        <hr class="mt-2 mb-1 border-gray-400/40">
        <div class="inline-block pt-5">
            @include('stream.partials.gallery')
        </div>
    </div>
</div>