diff options
| author |  cel 🌸 <cel@blos.sm> | 2024-07-17 10:04:13 +0100 |
|---|---|---|
| committer | cel 🌸 <cel@blos.sm> | 2024-07-17 10:04:13 +0100 |
| commit | 2476ed8bd64ea7335b6baf44ec1adbeb5169069c (patch) | |
| tree | c926bca429ddb8605cc307df84237b188d24d393 /templates | |
| parent | fb76f6581f199504e66125dad3f5ca5a7d4c7db6 (diff) | |
| download | infoculture.pub-2476ed8bd64ea7335b6baf44ec1adbeb5169069c.tar.gz infoculture.pub-2476ed8bd64ea7335b6baf44ec1adbeb5169069c.tar.bz2 infoculture.pub-2476ed8bd64ea7335b6baf44ec1adbeb5169069c.zip | |
genericise video player
Diffstat (limited to '')
| -rw-r--r-- | templates/article.html | 12 | ||||
| -rw-r--r-- | templates/load-webtorrent.html | 2 | ||||
| -rw-r--r-- | templates/thumbs.html | 12 | ||||
| -rw-r--r-- | templates/video-player.html | 11 |
4 files changed, 16 insertions, 21 deletions
diff --git a/templates/article.html b/templates/article.html index 3de52e4..2aa24f2 100644 --- a/templates/article.html +++ b/templates/article.html @@ -3,15 +3,7 @@ <div class="thumbnail" style="height: 30vh;">$thumbnail$</div> $endif$ $if(torrent)$ - <video controls class="thumbnail" id="media-$id$" style="height: 30vh;"></video> - <script type='module'> - const torrentId = '$torrent$'; - const player = document.querySelector('#media-$id$'); - window.torrentClient.add(torrentId, torrent => { - const file = torrent.files.find(file => file.name.endsWith('.mp4')); - file.streamTo(player); - }); - </script> + $partial("templates/video-player.html")$ $endif$ <div class="panel"> <section class="header"> @@ -39,4 +31,4 @@ $body$ </section> </div> -</article> +</article>
\ No newline at end of file diff --git a/templates/load-webtorrent.html b/templates/load-webtorrent.html index 0d7347f..f63aa41 100644 --- a/templates/load-webtorrent.html +++ b/templates/load-webtorrent.html @@ -6,4 +6,4 @@ navigator.serviceWorker.register('/sw.min.js'); const controller = await navigator.serviceWorker.ready; window.torrentClient.createServer({controller}); -</script> +</script>
\ No newline at end of file diff --git a/templates/thumbs.html b/templates/thumbs.html index 6070c23..cadbbc7 100644 --- a/templates/thumbs.html +++ b/templates/thumbs.html @@ -6,15 +6,7 @@ <br> $endif$ $if(torrent)$ - <video controls class="thumbnail" id="media-$id$" style="height: 20vh;"></video> - <script type='module'> - const torrentId = '$torrent$'; - const player = document.querySelector('#media-$id$'); - window.torrentClient.add(torrentId, torrent => { - const file = torrent.files.find(file => file.name.endsWith('.mp4')); - file.streamTo(player); - }); - </script> + $partial("templates/video-player.html")$ $endif$ <div class="thumb-title"> <a href="$url$"> @@ -40,4 +32,4 @@ $endif$ </div> $endfor$ -</div>
\ No newline at end of file +</div> diff --git a/templates/video-player.html b/templates/video-player.html new file mode 100644 index 0000000..fd508a8 --- /dev/null +++ b/templates/video-player.html @@ -0,0 +1,11 @@ +<video id="media-$id$" class="thumbnail" controls preload="metadata"></video> +<script type='module'> + const torrentId = '$torrent$'; + const player = document.querySelector('#media-$id$'); + window.torrentClient.add(torrentId, torrent => { + const thumbnail = torrent.files.find(file => file.name.endsWith('.jpg')).streamURL; + player.setAttribute("poster", thumbnail); + const videofile = torrent.files.find(file => file.name.endsWith('.mp4')); + videofile.streamTo(player); + }); +</script> |