{{--
    Adaptive video player — ABR HLS with a progressive MP4 fallback.

    Renders a plain <video> element that works with JavaScript disabled (it plays
    the MP4 <source>), and is upgraded to adaptive-bitrate HLS by
    resources/js/utils/hls-video.js — natively on Safari/iOS, via a lazily
    imported hls.js everywhere else.

    Nothing but the poster image is downloaded until playback starts:
    `preload="none"` on the element, `autoStartLoad: false` in hls.js.

    Usage:
        <x-molecules.video-player
            hls="videos/presentation/fr/hls/master.m3u8"
            :sources="['videos/presentation/fr/presentation-wasoria-720p-fr.mp4']"
            poster="images/home/presentation-poster-fr.webp"
            :label="__('home.approach_section.video.alt')"
            :autoplayInView="true" />

    Props:
        hls            — master playlist path, relative to public/ (required for ABR)
        sources        — ordered list of progressive MP4 paths used as fallback
        poster         — poster image path, relative to public/
        label          — accessible name for the player (aria-label)
        caption        — visible caption / credit line under the player
        aspect         — Tailwind aspect-ratio utility for the frame
        autoplayInView — start playing muted once the player is half on screen,
                         pause it again when it scrolls away. Note the native
                         `autoplay` attribute is deliberately NOT used: it would
                         fire on load, off screen, and against the MP4 fallback
                         before hls.js has attached. Playback is driven from
                         resources/js/utils/hls-video.js instead, which also
                         honours prefers-reduced-motion and Save-Data.
--}}

@props([
'hls' => null,
'sources' => [],
'poster' => null,
'label' => '',
'caption' => null,
'aspect' => 'aspect-video',
'autoplayInView' => false,
])

@php
$sources = is_array($sources) ? $sources : array_filter([$sources]);
@endphp

<figure {{ $attributes->merge(['class' => 'w-full']) }}>
    <div class="relative w-full {{ $aspect }} overflow-hidden rounded-lg bg-black shadow-lg">
        <video
            class="absolute inset-0 h-full w-full object-cover"
            controls
            preload="none"
            playsinline
            @if($autoplayInView) muted data-autoplay-in-view @endif
            @if($label) aria-label="{{ strip_tags($label) }}" @endif
            @if($poster) poster="{{ asset($poster) }}" @endif
            @if($hls) data-hls="{{ asset($hls) }}" @endif>
            @foreach($sources as $source)
            <source src="{{ asset($source) }}" type="video/mp4">
            @endforeach
            {{ __('common.video_not_supported') }}
        </video>
    </div>

    @if($caption)
    <figcaption class="mt-2 text-center text-sm text-muted-foreground">
        {{ $caption }}
    </figcaption>
    @endif
</figure>