Source code

src/showcase/pages/components/video.html

This file is included in this documentation build. It is displayed as code and is not executed.

Download source

<!--
Present the narrated Atrium product tour with independent language selection and native playback controls.

@author Laurent Declercq l.declercq@agon-innovation.ch
@version 20260921
-->
<section x-data="componentVideo($store.ui.locale)" class="component-library">
  <include src="partials/components/page-header.html" locals='{"title":"componentVideo"}'></include>
  <div class="catalog-grid">
    <article class="card full">
      <header class="card-header"><h2 x-text="$t('galleryVideoPresentation')"></h2></header>
      <div class="card-body">
        <p class="text-muted" x-text="$t('galleryVideoIntro')"></p>
        <div
          class="row g-3 align-items-end mb-3"
          x-id="['presentation-language', 'presentation-help']"
        >
          <div class="col-12 col-md-4">
            <label
              class="form-label"
              :for="$id('presentation-language')"
              x-text="$t('galleryVideoLanguage')"
            ></label>
            <select
              class="form-select"
              :id="$id('presentation-language')"
              :aria-describedby="$id('presentation-help')"
              x-model="language"
            >
              <option value="en" lang="en">English</option>
              <option value="de" lang="de">Deutsch</option>
              <option value="fr" lang="fr">Français</option>
            </select>
          </div>
          <div class="col-12 col-md-8">
            <p
              class="form-text mb-0"
              :id="$id('presentation-help')"
              x-text="$t('galleryVideoLanguageHelp')"
            ></p>
          </div>
        </div>
        <template x-for="presentation in activePresentations" :key="presentation.language">
          <div>
            <div x-data="uiVideo(presentation)" :lang="presentation.language">
              <include src="{{ uiRoot }}/video.html"></include>
            </div>
          </div>
        </template>
      </div>
    </article>
  </div>
</section>