{{-- Um player de video que aceita videos mp4 ou links do youtube --}}
@props(['poster', 'video', 'autoSize' => true])
@php
    $youtube_id = str_contains($video, 'youtu') ? \App\Helpers\YoutubeHelper::parse($video) : null;
    $poster = isset($poster) ? asset('storage/' . $poster) : ($youtube_id ? 'https://img.youtube.com/vi/' . $youtube_id  .'/hqdefault.jpg' : null)
@endphp
<div x-data="{
    isPlaying: false,
    player: null,
    play() {
        this.isPlaying = true;
        if (@js($youtube_id)) this.$nextTick(() => this.loadYouTubeAPI());
        else this.$refs.video?.play();
    },
    loadYouTubeAPI() {
        if (window.YT) return;
        const tag = document.createElement('script');
        tag.src = 'https://www.youtube.com/iframe_api';
        tag.async = true;
        const firstScript = document.getElementsByTagName('script')[0];
        firstScript.parentNode.insertBefore(tag, firstScript);
    }
}" {{ $attributes->class([
        "box-border flex flex-shrink-0 items-center justify-center overflow-hidden max-w-full mx-auto relative rounded-3xl",
        "mt-8 w-full sm:w-[900px] h-[250px] sm:h-[506px]" => $autoSize
    ]) }}>
    @if(empty($youtube_id))
        <video controls x-ref="video" width="100%" height="100%" x-show="isPlaying"
               class="bg-black w-[inherit] h-[inherit]" preload="none">
            <source src="{{ asset('storage/' . $video) }}" type="video/mp4">
            Seu navegador não suporta a reprodução desse vídeo.
        </video>
    @else
        <template x-if="isPlaying">
            <iframe id="youtube-player-{{ $youtube_id }}" width="100%" height="100%" class="bg-black w-[inherit] h-[inherit]"
                    src="https://www.youtube.com/embed/{{ $youtube_id }}?autoplay=1&enablejsapi=1&origin={{ urlencode(url('/')) }}" frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
        </template>
    @endif

    <button @click="play" x-show="!isPlaying"
            class="w-full h-full inset absolute grid place-items-center cursor-pointer">
        @if(isset($poster))
            <img alt="{{ __('Iniciar vídeo') }}" class="w-full h-full inset-0 absolute object-cover" src="{{ $poster }}"/>
        @else
            <div class="w-full h-full inset-0 absolute bg-darkslateblue-300"></div>
        @endif
        <div class="bg-midnightblue-100 flex flex-shrink-0 h-20 items-center justify-center w-20 rounded-full z-10">
            <svg width="34" height="32" viewBox="0 0 22 32" xmlns="http://www.w3.org/2000/svg">
                <polygon points="0,0 28,16 0,32" fill="white"/>
            </svg>
        </div>
    </button>
</div>