shelfy/templates/media_detail.pages.tmpl

{{define "media_detail.pages.tmpl"}}
<section class="section">
  <div class="container">
    <!-- Fil d’Ariane -->
    <nav class="breadcrumb mb-4" aria-label="breadcrumbs">
      <ul>
        <li>
          <a
            hx-get="/api/paths/{{.PathID}}/media"
            hx-push-url="/api/paths/{{.PathID}}/media"
            hx-target="#content"
            hx-swap="innerHTML">
            Accueil
          </a>
        </li>
        {{if .CurrentSub}}
        <li>
          <a>{{.CurrentSub}}</a>
        </li>
        {{end}}
        <li class="is-active">
          <a aria-current="page">{{.item.Title}}</a>
        </li>
      </ul>
    </nav>

    <div class="box">
      <!-- Bloc détail -->
      <div id="detail-block">
        <div class="columns is-vcentered">
          <div class="column is-one-third">
            <figure class="image is-3by4">
              <img src="{{.item.ThumbURL}}" alt="{{.item.Title}}" />
            </figure>
          </div>
          <div class="column">
            <h1 class="title">{{.item.Title}}</h1>
            {{with .item.Summary}}<p class="content">{{.}}</p>{{end}}
            {{with .item.DurationFmt}}<p class="subtitle is-6">Durée : {{.}}</p>{{end}}
            <button class="button is-primary js-play-btn" data-hlsurl="{{.item.HLSURL}}">
              <span class="icon"><i class="fas fa-play"></i></span>
              <span>Play</span>
            </button>
          </div>
        </div>
      </div>

      <!-- Bloc player -->
      <div class="box js-player-block" style="display:none;">
        <video id="hls-video" controls autoplay style="width:100%; height:auto;"></video>
        <button class="button is-light mt-4 js-close-btn">
          <span class="icon"><i class="fas fa-times"></i></span>
          <span>Fermer</span>
        </button>
      </div>

    </div>
  </div>
</section>

<script>
  // Gestion des boutons Play et Fermer
  document.body.addEventListener('click', function(e) {
    const playBtn = e.target.closest('.js-play-btn');
    if (playBtn) {
      document.getElementById('detail-block').style.display = 'none';
      document.querySelector('.js-player-block').style.display = 'block';
      const video = document.getElementById('hls-video');
      const url = playBtn.dataset.hlsurl;
      if (Hls.isSupported()) {
        const hls = new Hls(); hls.loadSource(url); hls.attachMedia(video);
      } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        video.src = url;
      }
      return;
    }
    const closeBtn = e.target.closest('.js-close-btn');
    if (closeBtn) {
      const video = document.getElementById('hls-video');
      video.pause(); video.src = '';
      document.querySelector('.js-player-block').style.display = 'none';
      document.getElementById('detail-block').style.display = 'block';
    }
  });
</script>
{{end}}