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

up ui

Browse Source
This commit is contained in:
cangui 2025-06-21 20:01:24 +02:00
parent 6aebad2db7
commit fd93b10bcf
2 changed files with 29 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
templates/head.pages.tmpl
View File

@ -21,6 +21,7 @@
<script src="/templates/assets/js/json-enc.js"></script> <script src="/templates/assets/js/json-enc.js"></script>
<script src="/templates/assets/js/ws.js"></script> <script src="/templates/assets/js/ws.js"></script>
<script src="/templates/assets/js/function/functions.js"></script> <script src="/templates/assets/js/function/functions.js"></script>
<script src="https://unpkg.com/hls.js@1.4.0"></script>
<title>Login</title> <title>Login</title>
</head> </head>

65
templates/media_detail.pages.tmpl
View File

@ -1,39 +1,28 @@
<div class="detail p-4"> <section class="section">
<h1 class="text-2xl font-bold mb-4">{{.item.Title}}</h1> <div class="container">
{{with .item.Summary}}<p class="mb-4">{{.}}</p>{{end}} <div class="box">
{{with .item.DurationFmt}}<small class="text-gray-500">{{.}}</small>{{end}} <div class="columns is-vcentered">
<img src="{{.item.ThumbURL}}" alt="{{.item.Title}}" class="cover mb-4 rounded shadow" /> <!-- Thumbnail column -->
<div class="column is-one-third">
<!-- 1) Le bouton Play --> <figure class="image is-3by4">
<button <img src="{{.item.ThumbURL}}" alt="{{.item.Title}}" />
id="play-btn" </figure>
class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
>▶ Play</button>
<!-- 2) Container vide pour le player -->
<div id="player-container" class="mt-4"></div>
<script src="https://unpkg.com/hls.js@1.4.0"></script>
<script>
document.getElementById('play-btn').addEventListener('click', function(){
const url = "{{.item.HLSURL}}";
const container = document.getElementById('player-container');
// injecte la balise video
container.innerHTML = '<video id="video-player" controls autoplay width="100%" class="rounded shadow"></video>';
const video = document.getElementById('video-player');
// si hls.js est supporté, on l’utilise
if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource(url);
hls.attachMedia(video);
} else {
// sinon on pose directement la source (Chrome & Safari gèrent nativement HLS)
video.src = url;
}
// cache le bouton
this.style.display = 'none';
});
</script>
</div> </div>
<!-- Details & Play button -->
<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" onclick="window.open('{{.item.HLSURL}}', '_blank', 'noopener')">
<span class="icon"><i class="fas fa-play"></i></span>
<span>Play</span>
</button>
</div>
</div>
</div>
</div>
</section>