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:11:03 +02:00
parent a9386cb8c6
commit 53ca9a6d1c
2 changed files with 47 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
templates/assets/js/index.js
View File

@ -85,3 +85,41 @@ function hide(target){
document.addEventListener("htmx:afterOnLoad", function (event) {
// console.log("Réponse du serveur :", event.detail.xhr.responseText);
});
document.body.addEventListener('click', function(e) {
// Play
const playBtn = e.target.closest('.js-play-btn');
if (playBtn) {
const detailBlock = document.getElementById('detail-block');
const playerBlock = document.querySelector('.js-player-block');
const video = document.getElementById('hls-video');
const url = playBtn.dataset.hlsurl;
detailBlock.style.display = 'none';
playerBlock.style.display = 'block';
if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource(url);
hls.attachMedia(video);
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = url;
} else {
console.error('HLS non supporté');
}
return;
}
// Fermer
const closeBtn = e.target.closest('.js-close-btn');
if (closeBtn) {
const detailBlock = document.getElementById('detail-block');
const playerBlock = document.querySelector('.js-player-block');
const video = document.getElementById('hls-video');
video.pause();
video.src = '';
playerBlock.style.display = 'none';
detailBlock.style.display = 'block';
}
});

50
templates/media_detail.pages.tmpl
View File

@ -2,7 +2,7 @@
<div class="container">
<div class="box">
<!-- Détail avant lecture -->
<!-- Bloc détail -->
<div id="detail-block">
<div class="columns is-vcentered">
<div class="column is-one-third">
@ -14,7 +14,7 @@
<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 id="play-btn" class="button is-primary">
<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>
@ -22,53 +22,15 @@
</div>
</div>
<!-- Player après clic -->
<div id="player-block" style="display:none;">
<div class="box">
<video id="video-player" controls autoplay style="width:100%; height:auto;"></video>
<button id="close-btn" class="button is-light mt-4">
<!-- 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>
</div>
</section>
<script src="https://unpkg.com/hls.js@1.4.0"></script>
<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';
var url = "{{.item.HLSURL}}";
if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(url);
hls.attachMedia(video);
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = url;
} else {
console.error('HLS non supporté');
}
playBtn.style.display = 'none';
});
closeBtn.addEventListener('click', function() {
if (!video.paused) video.pause();
video.src = '';
playerBlock.style.display = 'none';
detailBlock.style.display = 'block';
playBtn.style.display = 'inline-flex';
});
});
</script>