integrate more changes

audio.html

@@ -22,6 +22,7 @@
     padding:0.5rem;
     border-radius: 0.5rem;
     color:var(--theme-accent);
+    flex-wrap: nowrap;
 }
 .audio-player>*{
     margin:5px;

gif.html

@@ -1,7 +1,7 @@
 {{ if .Get "href"}}
 <a href='{{.Get "href"}}'>
 {{end}}
-<video autoplay muted loop preload="true">
+<video autoplay muted loop preload="true" class="gif">
     {{if .Get 0}}<source src='{{.Site.BaseURL}}{{.Get 0 }}'>{{end}}
     {{if .Get "src"}}<source src='{{.Site.BaseURL}}{{.Get "src" }}'>{{end}}
 </video>

link-preview.html

@@ -1,10 +1,9 @@
-<div class="listing" style="background-image:url({{.Get 3}})">
-    <div class="listing-text">
-        <a href="{{ .Get 0 }}" style="text-decoration:none;">
-            <h3>{{ .Get 1 }}</h3>
-            <i>{{.Get 2 }}</i>
-        </a>
-        <a href="{{ .Get 0 }}" style="position: absolute;top:0;left:0;height:100%;width:100%;background-color: transparent;margin:0;z-index:-1;">
-        </a>
+<a href="{{ .Get 0 }}" class="link-preview">
+    {{if .Get 3}}
+    <img src='{{.Get 3}}'>
+    {{end}}
+    <div>
+        <h3>{{ .Get 1 }}</h3>
+        <p>{{.Get 2 }}</p>
     </div>
-</div>  
+</a>

video.html

@@ -10,6 +10,7 @@
         flex-direction: row;
         width: 100%;
         height: fit-content;
+        flex-wrap: nowrap;
     }
 
     .video-controls p {
@@ -64,7 +65,7 @@
     }
 </style>
 <script src="/js/icons.js"></script>
-<div class="media-container">
+<div class="video-container">
     <div class="video-player">
         <video preload="metadata" onclick="playthis(event)" onloadedmetadata="setup_video_metadata(event)"
             ontimeupdate="setup_video_metadata(event)">

webtorrent-video.html

@@ -0,0 +1,46 @@
+<style>
+    #wtmedia{
+        width:100%;
+    }
+    #wtmedia video{
+        width:100%;
+    }
+</style>
+<script src="/webtorrent.js"></script>
+<div class="webtorrent">
+    <noscript>
+        <video controls>
+            <source src={{.Get "source"}}>
+        </video>
+    </noscript>
+    <div id="wtmedia">
+    </div>
+    <div>
+        <span id="torrent-info">Waiting for peers.</span>
+        <span id="torrent-peers"></span>
+        <span id="torrent-progress"></span>
+    </div>
+</div>
+<script>
+    function updateData(torrent) {
+        if (torrent.numPeers > 0) {
+            document.getElementById('torrent-info').innerHTML="This video is being served with webtorrent";
+            document.getElementById('torrent-peers').innerHTML="Peers:"+torrent.numPeers;
+        }
+    }    
+    const client = new WebTorrent();
+    const magnetURI = "{{.Get "magnet"}}";
+    torrent = client.add(magnetURI, function (torrent) {
+        // Got torrent metadata!
+        torrent.addWebSeed("{{.Get "source"}}");
+        console.log("Torrent Peers: "+torrent.numPeers);
+        console.log('Client is downloading:', torrent.infoHash);
+        torrent.files.forEach(function (file) {
+            // Display the file by appending it to the DOM. Supports video, audio, images, and
+            // more. Specify a container element (CSS selector or reference to DOM node).
+            file.appendTo('#wtmedia');
+        })
+        
+    });
+    window.setInterval(updateData,250,torrent);
+</script>