up

templates/media_detail.pages.tmpl

@@ -1,6 +1,7 @@
 <section class="section">
   <div class="container">
     <div class="box">
+      <div id="detail-block">
         <div class="columns is-vcentered">
           <!-- Thumbnail column -->
           <div class="column is-one-third">
@@ -17,12 +18,55 @@
             {{with .item.DurationFmt}}
             <p class="subtitle is-6">Durée : {{.}}</p>
             {{end}}
-          <button class="button is-primary" onclick="window.open('{{.item.HLSURL}}', '_blank', 'noopener')">
+            <button id="play-btn" class="button is-primary">
               <span class="icon"><i class="fas fa-play"></i></span>
               <span>Play</span>
             </button>
           </div>
         </div>
       </div>
+      <div id="player-block" style="display:none;">
+        <div class="box">
+          <video id="video-player" controls autoplay style="width:100%; height:auto;">
+            <source src="{{.item.HLSURL}}" type="application/vnd.apple.mpegURL">
+            Votre navigateur ne supporte pas la lecture HLS.
+          </video>
+          <button id="close-btn" class="button is-light mt-4">
+            <span class="icon"><i class="fas fa-times"></i></span>
+            <span>Fermer</span>
+          </button>
+        </div>
+      </div>
+    </div>
   </div>
 </section>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    var playBtn = document.getElementById('play-btn');
+    var closeBtn = document.getElementById('close-btn');
+    var detailBlock = document.getElementById('detail-block');
+    var playerBlock = document.getElementById('player-block');
+    var video = document.getElementById('video-player');
+
+    playBtn.addEventListener('click', function() {
+      detailBlock.style.display = 'none';
+      playerBlock.style.display = 'block';
+      if (Hls.isSupported()) {
+        var hls = new Hls();
+        hls.loadSource("{{.item.HLSURL}}");
+        hls.attachMedia(video);
+      } else {
+        video.src = "{{.item.HLSURL}}";
+      }
+    });
+
+    closeBtn.addEventListener('click', function() {
+      if (video.pause) video.pause();
+      playerBlock.style.display = 'none';
+      detailBlock.style.display = 'block';
+      // reset source to stop download
+      video.src = '';
+    });
+  });
+</script>