{#
/**
 * @file
 * Template for displaying converted video with multiple sources.
 *
 * Available variables:
 * - media: The media entity.
 * - sources: Array of video sources with 'src' and 'type' keys.
 * - poster: Thumbnail URL for poster image.
 * - attributes: Video element attributes.
 * - progress: Progress data if conversion is in progress.
 */
#}
<div class="ffmpeg-media-video" {% if media %}data-media-id="{{ media.id }}"{% endif %}>
  {% if sources %}
    <video
      {% if poster %}poster="{{ poster }}"{% endif %}
      {% if attributes.controls %}controls{% endif %}
      {% if attributes.autoplay %}autoplay{% endif %}
      {% if attributes.loop %}loop{% endif %}
      {% if attributes.muted %}muted{% endif %}
      {% if attributes.preload %}preload="{{ attributes.preload }}"{% endif %}
      playsinline
    >
      {% for source in sources %}
        <source src="{{ source.src }}" type="{{ source.type }}">
      {% endfor %}
      {{ 'Your browser does not support the video tag.'|t }}
    </video>
  {% elseif progress and progress.status == 'converting' %}
    <div class="ffmpeg-media-video__converting">
      {% include 'ffmpeg-media-progress.html.twig' with {
        'media_id': media.id,
        'progress': progress
      } %}
    </div>
  {% elseif progress and progress.status == 'pending' %}
    <div class="ffmpeg-media-video__pending">
      {{ 'Video is queued for conversion...'|t }}
    </div>
  {% else %}
    <div class="ffmpeg-media-video__unavailable">
      {{ 'Video is not available.'|t }}
    </div>
  {% endif %}
</div>
