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

---
 posts/2015-10-07-rosa-rosa-rosam.md |  2 +-
 style.css                           |  9 +++++++++
 templates/article.html              | 12 ++----------
 templates/load-webtorrent.html      |  2 +-
 templates/thumbs.html               | 12 ++----------
 templates/video-player.html         | 11 +++++++++++
 6 files changed, 26 insertions(+), 22 deletions(-)
 create mode 100644 templates/video-player.html

diff --git a/posts/2015-10-07-rosa-rosa-rosam.md b/posts/2015-10-07-rosa-rosa-rosam.md
index 07f260b..4f7af20 100644
--- a/posts/2015-10-07-rosa-rosa-rosam.md
+++ b/posts/2015-10-07-rosa-rosa-rosam.md
@@ -1,6 +1,6 @@
 ---
 title: Rosa Rosa Rosam
-torrent: magnet:?xt=urn:btih:dac04356dbd7cce8337751366b0f36cbd1b40e00&dn=keitai.mp4&tr=wss%3A%2F%2Ftracker.bunny.garden&tr=https%3A%2F%2Ftracker.bunny.garden%2Fannounce&tr=udp%3A%2F%2Ftracker.bunny.garden%3A1337
+torrent: magnet:?xt=urn:btih:5135350e62045e14a66659519ee3baee7d91f94d&dn=keitai&tr=wss%3A%2F%2Ftracker.bunny.garden&tr=https%3A%2F%2Ftracker.bunny.garden%2Fannounce&tr=udp%3A%2F%2Ftracker.bunny.garden%3A1337
 author: Ovidius
 ---
 
diff --git a/style.css b/style.css
index 12bbb8e..f384e6f 100644
--- a/style.css
+++ b/style.css
@@ -205,12 +205,21 @@ article {
   /* margin: auto; */
 }
 
+.thumb .thumbnail {
+  height: 20vh;
+}
+
+article .thumbnail {
+  height: 30vh;
+}
+
 .thumbnail {
   filter: drop-shadow(0px 0px 4px #e3b69b);
   border: 4px groove #800080;
   background-color: #06360f;
   /* aspect-ratio: 16 / 10; */
   width: auto;
+  box-sizing: border-box;
   max-width: min(100%, 100vw);
   padding: 0vw;
 }
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