From 2476ed8bd64ea7335b6baf44ec1adbeb5169069c Mon Sep 17 00:00:00 2001
From: cel 🌸 <cel@blos.sm>
Date: Wed, 17 Jul 2024 10:04:13 +0100
Subject: genericise video player

---
 templates/article.html         | 12 ++----------
 templates/load-webtorrent.html |  2 +-
 templates/thumbs.html          | 12 ++----------
 templates/video-player.html    | 11 +++++++++++
 4 files changed, 16 insertions(+), 21 deletions(-)
 create mode 100644 templates/video-player.html

(limited to 'templates')

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>
-- 
cgit