87 lines
2.8 KiB
Cheetah
87 lines
2.8 KiB
Cheetah
{{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}}
|