{#
/**
 * @file
 * Template for video player with HLS/DASH and progressive format support.
 *
 * Available variables:
 * - media: The media entity.
 * - sources: Array of video sources with format detection.
 *   - src: URL to the video source.
 *   - type: MIME type of the source.
 * - poster: Poster image URL.
 * - subtitles: Array of subtitle tracks.
 *   - src: URL to the subtitle file.
 *   - kind: Track kind (subtitles, captions).
 *   - language: Language code.
 *   - label: Display label.
 * - player_config: Player configuration array.
 *   - mediaId: Media entity ID.
 *   - autoplay: Boolean.
 *   - muted: Boolean.
 *   - loop: Boolean.
 *   - controls: Boolean.
 *   - preload: Preload strategy.
 *   - aspectRatio: Aspect ratio string or 'auto'.
 *   - lazyLoad: Boolean.
 *   - theme: Player theme name.
 * - progress: Conversion progress data (if applicable).
 * - attributes: Container attributes.
 */
#}
{% set classes = [
  'ffmpeg-streaming-player',
  'ffmpeg-streaming-player--' ~ (player_config.theme ?? 'default'),
  player_config.lazyLoad ? 'ffmpeg-streaming-player--lazy' : '',
] %}

{% set aspect_ratio = player_config.aspectRatio|default('16:9') %}

<div{{ attributes.addClass(classes) }}
  data-ffmpeg-player
  data-media-id="{{ media.id }}"
  data-player-id="{{ player_config.playerId|default(media.id) }}"
  {% if aspect_ratio != 'auto' %}style="aspect-ratio: {{ aspect_ratio|replace({':': '/'}) }};"{% endif %}
  role="region"
  aria-label="{{ 'Video player for @title'|t({'@title': media.label}) }}"
>
  {% if sources is not empty %}
    {# Poster image for LCP optimization #}
    {% if poster %}
    <img
      src="{{ poster }}"
      alt="{{ 'Video poster for @title'|t({'@title': media.label}) }}"
      class="ffmpeg-streaming-player__poster"
      loading="{{ player_config.lazyLoad ? 'lazy' : 'eager' }}"
      fetchpriority="{{ player_config.posterLoadingPriority ?? 'auto' }}"
      decoding="async"
    >
    {% endif %}

    {# Error state (hidden by default, shown via JS) #}
    <div class="ffmpeg-streaming-player__error" hidden>
      <span class="ffmpeg-streaming-player__error-icon" aria-hidden="true"></span>
      <span class="ffmpeg-streaming-player__error-message">{{ 'An error occurred during video playback.'|t }}</span>
      <button type="button" class="ffmpeg-streaming-player__retry-button">{{ 'Retry'|t }}</button>
    </div>

    {# Keyboard shortcut help button + dialog #}
    {% if player_config.keyboardNavigation is defined and player_config.keyboardNavigation %}
    <button type="button"
      class="ffmpeg-streaming-player__help-button"
      data-help-trigger
      aria-label="{{ 'Keyboard shortcuts'|t }}"
      aria-expanded="false"
      title="{{ 'Keyboard shortcuts'|t }}"
    >?</button>
    <div class="ffmpeg-streaming-player-help ffmpeg-streaming-player-help--hidden"
      role="dialog"
      aria-labelledby="ffmpeg-help-title-{{ media.id }}"
      aria-modal="true"
      hidden
    >
      <div class="ffmpeg-streaming-player-help__backdrop" data-help-close></div>
      <div class="ffmpeg-streaming-player-help__content">
        <div class="ffmpeg-streaming-player-help__header">
          <h2 id="ffmpeg-help-title-{{ media.id }}" class="ffmpeg-streaming-player-help__title">{{ 'Keyboard shortcuts'|t }}</h2>
          <button type="button" class="ffmpeg-streaming-player-help__close" data-help-close aria-label="{{ 'Close'|t }}">&times;</button>
        </div>
        <dl class="ffmpeg-streaming-player-help__body">
          <div class="ffmpeg-streaming-player-help__item">
            <dt class="ffmpeg-streaming-player-help__key"><kbd>k</kbd></dt>
            <dd class="ffmpeg-streaming-player-help__desc">{{ 'Play / Pause'|t }}</dd>
          </div>
          <div class="ffmpeg-streaming-player-help__item">
            <dt class="ffmpeg-streaming-player-help__key"><kbd>m</kbd></dt>
            <dd class="ffmpeg-streaming-player-help__desc">{{ 'Mute / Unmute'|t }}</dd>
          </div>
          <div class="ffmpeg-streaming-player-help__item">
            <dt class="ffmpeg-streaming-player-help__key"><kbd>f</kbd></dt>
            <dd class="ffmpeg-streaming-player-help__desc">{{ 'Toggle fullscreen'|t }}</dd>
          </div>
          <div class="ffmpeg-streaming-player-help__item">
            <dt class="ffmpeg-streaming-player-help__key"><kbd>&rarr;</kbd></dt>
            <dd class="ffmpeg-streaming-player-help__desc">{{ 'Seek forward 10 s'|t }}</dd>
          </div>
          <div class="ffmpeg-streaming-player-help__item">
            <dt class="ffmpeg-streaming-player-help__key"><kbd>&larr;</kbd></dt>
            <dd class="ffmpeg-streaming-player-help__desc">{{ 'Seek backward 10 s'|t }}</dd>
          </div>
          <div class="ffmpeg-streaming-player-help__item">
            <dt class="ffmpeg-streaming-player-help__key"><kbd>&uarr;</kbd></dt>
            <dd class="ffmpeg-streaming-player-help__desc">{{ 'Volume up'|t }}</dd>
          </div>
          <div class="ffmpeg-streaming-player-help__item">
            <dt class="ffmpeg-streaming-player-help__key"><kbd>&darr;</kbd></dt>
            <dd class="ffmpeg-streaming-player-help__desc">{{ 'Volume down'|t }}</dd>
          </div>
        </dl>
      </div>
    </div>
    {% endif %}

    {# Noscript fallback for SEO and non-JS browsers #}
    <noscript>
      <video
        controls
        {% if poster %}poster="{{ poster }}"{% endif %}
        preload="metadata"
        playsinline
        style="width: 100%; height: auto;"
      >
        {% for source in sources %}
          {% if source.type starts with 'video/' %}
          <source src="{{ source.src }}" type="{{ source.type }}">
          {% endif %}
        {% endfor %}
        {% for track in subtitles %}
        <track
          src="{{ track.src }}"
          kind="{{ track.kind }}"
          srclang="{{ track.language }}"
          label="{{ track.label }}"
          {% if loop.first %}default{% endif %}
        >
        {% endfor %}
        {{ 'Your browser does not support video playback.'|t }}
      </video>
    </noscript>

  {% elseif progress is not empty and progress.status in ['converting', 'pending'] %}
    {# Conversion in progress #}
    {% if progress.status == 'converting' %}
    <div class="ffmpeg-streaming-player__converting">
      <div class="ffmpeg-progress" data-media-id="{{ media.id }}">
        <div class="ffmpeg-progress__bar">
          <div class="ffmpeg-progress__fill" style="width: {{ progress.percent ?? 0 }}%;"></div>
        </div>
        <div class="ffmpeg-progress__text">
          {{ 'Converting... @percent%'|t({'@percent': progress.percent ?? 0}) }}
        </div>
      </div>
    </div>
    {% else %}
    <div class="ffmpeg-streaming-player__pending">
      <span class="ffmpeg-streaming-player__pending-icon" aria-hidden="true"></span>
      <span>{{ 'Video is queued for processing...'|t }}</span>
    </div>
    {% endif %}

  {% else %}
    {# No video available #}
    <div class="ffmpeg-streaming-player__unavailable">
      <span>{{ 'Video is not available.'|t }}</span>
    </div>
  {% endif %}
</div>
