cangui/shelfy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
cangui 2025-06-21 20:07:31 +02:00
parent f08be667c1
commit a9386cb8c6
1 changed files with 19 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
templates/media_detail.pages.tmpl
View File

@ -1,23 +1,19 @@
<section class="section"> <section class="section">
<div class="container"> <div class="container">
<div class="box"> <div class="box">
<!-- Détail avant lecture -->
<div id="detail-block"> <div id="detail-block">
<div class="columns is-vcentered"> <div class="columns is-vcentered">
<!-- Thumbnail column -->
<div class="column is-one-third"> <div class="column is-one-third">
<figure class="image is-3by4"> <figure class="image is-3by4">
<img src="{{.item.ThumbURL}}" alt="{{.item.Title}}" /> <img src="{{.item.ThumbURL}}" alt="{{.item.Title}}" />
</figure> </figure>
</div> </div>
<!-- Details & Play button -->
<div class="column"> <div class="column">
<h1 class="title">{{.item.Title}}</h1> <h1 class="title">{{.item.Title}}</h1>
{{with .item.Summary}} {{with .item.Summary}}<p class="content">{{.}}</p>{{end}}
<p class="content">{{.}}</p> {{with .item.DurationFmt}}<p class="subtitle is-6">Durée : {{.}}</p>{{end}}
{{end}}
{{with .item.DurationFmt}}
<p class="subtitle is-6">Durée : {{.}}</p>
{{end}}
<button id="play-btn" class="button is-primary"> <button id="play-btn" class="button is-primary">
<span class="icon"><i class="fas fa-play"></i></span> <span class="icon"><i class="fas fa-play"></i></span>
<span>Play</span> <span>Play</span>
@ -25,22 +21,23 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Player après clic -->
<div id="player-block" style="display:none;"> <div id="player-block" style="display:none;">
<div class="box"> <div class="box">
<video id="video-player" controls autoplay style="width:100%; height:auto;"> <video id="video-player" controls autoplay style="width:100%; height:auto;"></video>
<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"> <button id="close-btn" class="button is-light mt-4">
<span class="icon"><i class="fas fa-times"></i></span> <span class="icon"><i class="fas fa-times"></i></span>
<span>Fermer</span> <span>Fermer</span>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<script src="https://unpkg.com/hls.js@1.4.0"></script>
<script> <script>
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
var playBtn = document.getElementById('play-btn'); var playBtn = document.getElementById('play-btn');
@ -52,21 +49,26 @@
playBtn.addEventListener('click', function() { playBtn.addEventListener('click', function() {
detailBlock.style.display = 'none'; detailBlock.style.display = 'none';
playerBlock.style.display = 'block'; playerBlock.style.display = 'block';
var url = "{{.item.HLSURL}}";
if (Hls.isSupported()) { if (Hls.isSupported()) {
var hls = new Hls(); var hls = new Hls();
hls.loadSource("{{.item.HLSURL}}"); hls.loadSource(url);
hls.attachMedia(video); hls.attachMedia(video);
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = url;
} else { } else {
video.src = "{{.item.HLSURL}}"; console.error('HLS non supporté');
} }
playBtn.style.display = 'none';
}); });
closeBtn.addEventListener('click', function() { closeBtn.addEventListener('click', function() {
if (video.pause) video.pause(); if (!video.paused) video.pause();
video.src = '';
playerBlock.style.display = 'none'; playerBlock.style.display = 'none';
detailBlock.style.display = 'block'; detailBlock.style.display = 'block';
// reset source to stop download playBtn.style.display = 'inline-flex';
video.src = '';
}); });
}); });
</script> </script>