File Manager

Edit File: video-show.blade.php

@section("title")
Nonton {{ $video->name }} Subtitle Indonesia - Gudang Anime Movie
@endsection

@section('headerseo')
<meta name="description" content="Streaming {{ $video->name }}. Nonton anime terbaru sub Indo di Gudang Anime Movie.">
<meta property="og:title" content="Nonton {{ $video->name }} Subtitle Indonesia - Gudang Anime Movie" />
<meta property="og:description" content="Streaming anime {{ $video->name }} full HD hanya di Gudang Anime Movie." />
<meta property="og:image" content="{{ $anime->thumbnail }}" />
<meta property="og:url" content={{ url("/anime/$anime->slug/episode/$video->order") }} />
<meta name="twitter:card" content="summary_large_image" />

@endsection

<div class="ms-4 text-red-600 font-bold uppercase text-xs xl:text-base">@error("episode_error") {{$message}} @enderror</div>
        </x-slot:content>

@foreach ($anime->videos()->orderBy("order")->get() as $item)
        <a href="{{$video->order == $item->order ? "#" : route("video.show", ['order' => $item->order, 'slug' => $anime->slug])}}" class="{{ $video->order == $item->order ? "bg-gray-200 text-black font-bold" : "text-white font-normal bg-gray-700"}} min-w-24 h-8 rounded-lg flex items-center justify-center">
            Ep {{ $item->order }}
        </a>
        @endforeach

</x-homelist>

<h1 class="border-b-2 border-red-600 lg:ps-4 ps-2 lg:text-2xl capitalize mt-8">{{$video->name}}</h1>
    <div class="w-full">
        <video id="videoPlayer" controls class="w-full aspect-video" poster="{{ $video->thumbnail }}" wire:ignore>
            <source src="{{ $video->video }}" />
        </video>
    </div>

<div class="flex gap-2">
        <a href="{{ $prev_video == "#" ? "#" : route("video.show", ['slug' => $anime->slug, 'order' => $prev_video]) }}" class="{{$prev_video == "#" ? "bg-red-900 hover:cursor-not-allowed" : "bg-red-600 hover:bg-red-700"}} items-center flex justify-center flex-1 rounded-md h-16 font-bold tracking-wider lg:text-base text-sm text-center px-2 lg:px-4 ">
            Episode Sebelumnya
        </a>
        <a href="{{ route("anime.show", $anime->slug)}}" class="bg-red-600 items-center flex justify-center flex-1 rounded-md h-16 font-bold tracking-wider text-center px-2 lg:px-4 uppercase">
            {{ $anime->name }}
        </a>
        <a href="{{ $next_video == "#" ? "#" : route("video.show", ['slug' => $anime->slug, 'order' => $next_video]) }}" class="{{$next_video == "#" ? "bg-red-900 hover:cursor-not-allowed" : "bg-red-600 hover:bg-red-700"}} items-center flex justify-center flex-1 rounded-md h-16 font-bold tracking-wider lg:text-base text-sm text-center px-2 lg:px-4">
            Episode Berikutnya
        </a>
    </div>

<x-homelist title="Komentar">
        <form wire:submit="comment" class="w-full flex flex-col gap-4">
            <textarea rows="4" placeholder="Silahkan Masukkan Komentar (Maksimal 500 Huruf)" class="rounded-lg text-black w-full" wire:model="description"></textarea>
            <x-input-error class="mt-2" :messages="$errors->get('description')" />
            <button class="flex gap-2" type="button" wire:click="togglePriority">
                <span class="w-6 h-6 rounded-full {{$priority ? "" : "bg-red-600" }} text-center">{{$priority ? "✅" : "X"}}</span>
                Prioritas Admin
            </button>

<button class="w-48 h-10 rounded-full bg-red-600">
                Kirim
            </button>
        </form>
    </x-homelist>

<div class="flex flex-col gap-8">
        @if($commentState)
        @foreach ($comments as $comment)
        <div class="flex gap-4 w-full">
            <img src="{{$comment->user->avatar}}" alt="Avatar {{$comment->user->name}}" class="w-14 h-14 p-2 rounded-full bg-gray-700" loading="lazy">
            <div class="bg-gray-700 p-4 rounded-lg relative flex flex-col gap-2 w-full">
                <div>
                    {{ $comment->user->name }} <span class="text-white/50 ms-4">{{Carbon\Carbon::parse($comment->created_at)->diffForHumans()}}</span>
                </div>
                <div class="comment-text line-clamp-3 break-all ">
                    {{ $comment->description }}
                </div>
                <button class="toggle-button text-red-600 mt-2 hidden" onclick="toggleText(this)">Read More</button>
                <div class="bg-gray-700 w-4 h-4 -left-2 top-6 absolute rotate-45">
                    &nbsp;
                </div>
            </div>
        </div>
        @endforeach
        <div class="flex justify-center">
            @if ($load_item < $max_comment)
                <button wire:click="loadMoreComments" class="bg-red-600 font-semibold text-white px-8 py-2 rounded-md border-2 border-white/75 hover:bg-red-500">Load More</button>
                @endif
        </div>
        @endif
        <div>
            <button class="bg-red-600 px-4 rounded-md h-8 min-w-48 border-2 border-white" wire:click="toggleComment">{{ $commentState ? "Tutup" : "Buka" }} Komentar</button>
        </div>

</div>

<x-home-item title="Rekomendasi {{ $anime->is_film ? "Film" : "Anime" }}" animes={{ $random_anime }} link="#" />

comments.forEach((commentText, index) => {
                // Create a temporary clone to measure the real height of the text content
                const tempClone = commentText.cloneNode(true);
                tempClone.style.display = "block";
                tempClone.style.position = "absolute";
                tempClone.style.visibility = "hidden";
                tempClone.classList.remove("line-clamp-3"); // Remove clamp to measure full height
                document.body.appendChild(tempClone);

const fullHeight = tempClone.clientHeight;
                const clampedHeight = commentText.clientHeight;

document.body.removeChild(tempClone);

// If the full height is greater than the clamped height, show the corresponding Read More button
                if (fullHeight > clampedHeight) {
                    toggleButtons[index].classList.remove("hidden");
                }
            });
        });

function toggleText(button) {
            const commentText = button.previousElementSibling; // Get the text element before the button

if (commentText.classList.contains("line-clamp-3")) {
                commentText.classList.remove("line-clamp-3");
                button.innerHTML = "Show Less";
            } else {
                commentText.classList.add("line-clamp-3");
                button.innerHTML = "Read More";
            }
        }

document.addEventListener('livewire:initialized', function() {
            const video = document.getElementById('videoPlayer');

video.addEventListener('play', function() {
                window.Livewire.dispatch('incrementViewCount');
            });

video.addEventListener('ended', function() {
                window.Livewire.dispatch('videoEnded');
            });
        });
    </script>
</div>

Back