{#
Title: Video
Description: Self-hosted or embedded video (ACF).
Category: formatting
Icon: format-video
Keywords: video mp4 webm embed youtube vimeo
Mode: preview
Align: wide
SupportsAlign: wide full
#}

{% extends '/views/parts/logic/block-settings.twig' %}

{% block blocksettings %}
    {% set sourceType = fields.source_type ?? 'upload' %}

    {% if sourceType == 'embed' %}
        {% set embedHtml = fields.embed_url ? function('wp_oembed_get', fields.embed_url) : '' %}

        {% if embedHtml %}
            <div class="silvanus-block video-block {{ outer_classes }}">
                <div class="block-content {{ inner_classes }}">
                    <div class="video-block__embed">
                        {{ embedHtml }}
                    </div>

                    {% if fields.caption %}
                        <figcaption class="video-block__caption">{{ fields.caption }}</figcaption>
                    {% endif %}
                </div>
            </div>
        {% endif %}

    {% else %}
        {% set videoMp4 = fields.video_mp ?? null %}
        {% set videoWebm = fields.video_webm ?? null %}
        {% set posterId = fields.poster_image ?? null %}
        {% set posterUrl = posterId ? function('wp_get_attachment_image_url', posterId, 'full') : '' %}

        {% set controls = (fields.controls is defined and fields.controls is not empty) %}
        {% set autoplay = (fields.autoplay is defined and fields.autoplay is not empty) %}
        {% set loop = (fields.loop is defined and fields.loop is not empty) %}
        {% set muted = (fields.muted is defined and fields.muted is not empty) %}
        {% set playsinline = (fields.playsinline is defined and fields.playsinline is not empty) %}
        {% set preload = fields.preload ?? 'metadata' %}
        {% set minimalControls = (fields.minimal_controls_play_only is defined and fields.minimal_controls_play_only is not empty) %}

        {% if autoplay %}
            {% set muted = true %}
        {% endif %}

        {% set hasSource = (videoMp4 and videoMp4.url) or (videoWebm and videoWebm.url) %}

        {% if hasSource %}
            <div class="silvanus-block video-block {{ outer_classes }} {% if minimalControls %}video-block--minimal{% endif %}">
                <div class="block-content {{ inner_classes }}">
                    <div class="video-block__wrap" {% if minimalControls %}data-video-minimal="1"{% endif %}>
                        <video
                                class="video-block__video"
                                {% if (not minimalControls) and controls %}controls{% endif %}
                                {% if autoplay %}autoplay{% endif %}
                                {% if loop %}loop{% endif %}
                                {% if muted %}muted{% endif %}
                                {% if playsinline %}playsinline{% endif %}
                                preload="{{ preload }}"
                                {% if posterUrl %}poster="{{ posterUrl }}"{% endif %}
                        >
                            {% if videoWebm and videoWebm.url %}
                                <source src="{{ videoWebm.url }}" type="{{ videoWebm.mime_type ?: 'video/webm' }}">
                            {% endif %}
                            {% if videoMp4 and videoMp4.url %}
                                <source src="{{ videoMp4.url }}" type="{{ videoMp4.mime_type ?: 'video/mp4' }}">
                            {% endif %}
                        </video>

                        {% if minimalControls %}
                            <button type="button" class="video-block__play" aria-label="Play video">
                                <span class="video-block__play-icon" aria-hidden="true"></span>
                            </button>
                        {% endif %}
                    </div>

                    {% if fields.caption %}
                        <figcaption class="video-block__caption">{{ fields.caption }}</figcaption>
                    {% endif %}
                </div>
            </div>
        {% endif %}
    {% endif %}
{% endblock %}