Simple demo page with p2p/server stats

pldubouilh · Feb 22, 2018 · 81c6555 · 81c6555
1 parent acbd94a
commit 81c6555
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 11 deletions.
diff --git a/client/index.html b/client/index.html
@@ -8,19 +8,38 @@
   <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
 </head>
 
-<body>
-  <p style="font-size: 30px; font-family: Helvetica;">Simple demo for <a href="https://github.com/pldubouilh/live-torrent">live-torrent</a></p>
-  <p style="font-size: 15px; font-family: Helvetica;">Pop the console to get the logs. To simulate p2p, just open another tab in incognito and browse to this very testpage.</p>
-  <video style="width:100%; padding-top: 12px;" id="video"></video>
-</body>
+<body style="font-family: Helvetica">
+  <h1>Simple demo for <a href="https://github.com/pldubouilh/live-torrent">live-torrent</a></h1>
+  <p>Pop the console to get the logs. To simulate p2p, just open another tab in incognito and browse to this very testpage.</p>
+  <div>
+    <video style="width: 100%; max-width: 800px; padding-top: 12px" id="video"></video>
+    <div id="progressBars" style="margin-top: -4px; color: white; font-weight: bold; max-width: 800px; width: 100%; background-color: green; height:40px">
+      <p id="server" style="margin-top:12px; right: 20px; float: right; padding-right: 20px;">Server</p>
+      <div id="p2pBar" style="width: 50%; background-color: crimson; height:40px">
+        <p id="p2p" style="margin-top: 12px;left: 15px;position: absolute;">P2P</p>
+      </div>
+    </div>
+  </div>
+  </body>
+
 
 <script src="./build.js"></script>
 <script>
-  var video = document.getElementById('video')
-  video.volume = 0
-  var hls = new Hls()
-  hls.loadSource('manifest.m3u8')
-  hls.attachMedia(video)
-  hls.on(Hls.Events.MANIFEST_PARSED, () => video.play())
+  window.onload = () => {
+    const video = document.getElementById('video')
+    video.volume = 0
+    const hls = new Hls()
+    hls.loadSource('manifest.m3u8')
+    hls.attachMedia(video)
+    hls.on(Hls.Events.MANIFEST_PARSED, () => video.play())
+
+    setInterval(() => {
+      const p2p = 100*window.p2p / (window.p2p + window.server)
+      const server = 100*window.server / (window.p2p + window.server)
+      document.getElementById('server').innerText = 'Server: ' + Math.floor(server) + '%'
+      document.getElementById('p2p').innerText = 'P2P: ' + Math.floor(p2p) + '%'
+      document.getElementById('p2pBar').style.width = Math.floor(p2p) + '%'
+    }, 3000)
+  }
 </script>
 </html>
diff --git a/client/loader.js b/client/loader.js
@@ -5,6 +5,9 @@ const client = new WebTorrent()
 const torrents = [] // {name, magnetURI}
 const announceList = [['wss://tracker.openwebtorrent.com']]
 
+window.p2p = 0
+window.server = 0
+
 console.logColor = (msg, color) => console.log('%c' + msg, `color: ${color}; font-size: 11px;`)
 
 console.logNoisy = (msg, color) => !(new Date().getTime() % 12) && console.logColor(msg, color)
@@ -41,6 +44,7 @@ function onDone (t) {
     if (err) return console.log(err)
     console.logColor(`+ P2P over for ${t.files[0].name} - downloaded ${t.downloaded} bytes`, 'forestgreen')
     const ab = b.buffer.slice(b.byteOffset, b.byteOffset + b.byteLength)
+    window.p2p += ab.byteLength
     navigator.serviceWorker.controller.postMessage({ name: t.files[0].name, ab }, [ab])
   })
 }
@@ -64,6 +68,7 @@ function newTorrent (magnets) {
 
 function newSeed (name, ab) {
   console.logColor(`+ Server loaded ${name} - seeding content now`, 'cadetblue')
+  window.server += ab.byteLength
 
   if (isTorrentAdded(name)) {
     const { magnetURI } = torrents.find(t => t.name === name)