webtorrent updates

layouts/partials/header.html

@@ -1,5 +1,7 @@
 <header>
+    <a href="{{.Site.BaseURL}}">
         <img src="{{.Site.Params.default_img}}">
+    </a>
     <div>
     <h1>{{.Site.Title }}</h1>
     <i>{{.Site.Params.subtitle}}</i>

layouts/shortcodes/webtorrent-video.html

@@ -1,16 +1,40 @@
+<style>
+    #wtmedia{
+        width:100%;
+    }
+    #wtmedia video{
+        width:100%;
+    }
+</style>
 <script src="/webtorrent.js"></script>
-<div id="wtmedia">
+<div class="webtorrent">
+    <noscript>
+        <video controls>
+            <source src={{.Get "source"}}>
+        </video>
+    </noscript>
+    <div id="wtmedia">
+    </div>
+    <div>
+        Peers:<span id="Peers"></span>
+    </div>
 </div>
 <script>
-    const client = new WebTorrent(tracker=false,dht=true,webSeeds=true);
-    const magnetURI = '{{.Get 0}}';
+    function updateData(torrent) {
+        document.getElementById('Peers').text=torrent.numPeers;
+    }    
+    const client = new WebTorrent();
+    const magnetURI = {{.Get "magnet"}};
     client.add(magnetURI, function (torrent) {
         // Got torrent metadata!
-        console.log('Client is downloading:', torrent.infoHash)
+        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')
-        })
+            file.appendTo('#wtmedia');
         })
+        window.setInterval
+    });
 </script>

static/css/theme.css

@@ -37,6 +37,9 @@ body {
 header{
     margin-top:1rem;
 }
+header img {
+    max-height: 10rem;
+}
 
 header,footer{
     text-align: center;
@@ -190,6 +193,12 @@ section {
     flex-direction: column;
     align-items: center;
 }
+section div{
+    display:flex;
+    flex-direction: column;
+    align-items: center;
+
+}
 h1{
     font-size:200%;
 }