Spaces:

r3hab
/

numerical-analysis

Running

App Files Files Community

r3hab commited on Jan 25

Commit

e76a197

verified ·

1 Parent(s): f5ba7f3

Create 2.html

Browse files

Files changed (1) hide show

2.html +162 -0

2.html ADDED Viewed

	@@ -0,0 +1,162 @@

+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>WebTorrent video player</title>
+    <style>
+      #output video {
+        width: 100%;
+      }
+      #progressBar {
+        height: 5px;
+        width: 0%;
+        background-color: #35b44f;
+        transition: width .4s ease-in-out;
+      }
+      body.is-seed .show-seed {
+        display: inline;
+      }
+      body.is-seed .show-leech {
+        display: none;
+      }
+      .show-seed {
+        display: none;
+      }
+      #status code {
+        font-size: 90%;
+        font-weight: 700;
+        margin-left: 3px;
+        margin-right: 3px;
+        border-bottom: 1px dashed rgba(255,255,255,0.3);
+      }
+      .is-seed {
+        background-color: #154820;
+        transition: .5s .5s background-color ease-in-out;
+      }
+      body {
+        background-color: #2a3749;
+        margin: 0;
+        height: 100%;
+      }
+      #status {
+        color: #fff;
+        font-size: 17px;
+        padding: 5px;
+      }
+      a:link, a:visited {
+        color: #30a247;
+        text-decoration: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div>
+      <div id="progressBar"></div>
+      <video id="output" controls></video>
+    </div>
+    <!-- Statistics -->
+    <div id="status">
+      <div>
+        <span class="show-leech">Downloading </span>
+        <span class="show-seed">Seeding </span>
+        <code>
+          <a id="torrentLink" href="https://webtorrent.io/torrents/sintel.torrent">sintel.torrent</a>
+        </code>
+        <span class="show-leech"> from </span>
+        <span class="show-seed"> to </span>
+        <code id="numPeers">0 peers</code>.
+      </div>
+      <div>
+        <code id="downloaded"></code>
+        of <code id="total"></code>
+        — <span id="remaining"></span><br/>
+        &#x2198;<code id="downloadSpeed">0 b/s</code>
+        / &#x2197;<code id="uploadSpeed">0 b/s</code>
+      </div>
+    </div>
+    <!-- Moment.js for time formatting -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
+    <script type="module">
+      // Updated WebTorrent import using proper ESM syntax
+      import WebTorrent from 'https://cdn.skypack.dev/webtorrent'
+      const torrentId = 'https://webtorrent.io/torrents/sintel.torrent'
+      const client = new WebTorrent()
+      // HTML elements
+      const $body = document.body
+      const $progressBar = document.querySelector('#progressBar')
+      const $numPeers = document.querySelector('#numPeers')
+      const $downloaded = document.querySelector('#downloaded')
+      const $total = document.querySelector('#total')
+      const $remaining = document.querySelector('#remaining')
+      const $uploadSpeed = document.querySelector('#uploadSpeed')
+      const $downloadSpeed = document.querySelector('#downloadSpeed')
+      // Service Worker registration
+      navigator.serviceWorker.register('https://cdn.jsdelivr.net/npm/webtorrent@latest/sw.min.js', { scope: './' })
+        .then(reg => {
+          const worker = reg.active || reg.waiting || reg.installing
+          function checkState(worker) {
+            if (worker.state === 'activated') {
+              client.createServer({ controller: reg })
+              download()
+            }
+          }
+          if (!checkState(worker)) {
+            worker.addEventListener('statechange', ({ target }) => checkState(target))
+          }
+        })
+      function download() {
+        client.add(torrentId, torrent => {
+          const file = torrent.files.find(file => file.name.endsWith('.mp4'))
+          file.streamTo(document.querySelector('#output'))
+          torrent.on('done', onDone)
+          setInterval(onProgress, 500)
+          onProgress()
+          function onProgress() {
+            $numPeers.innerHTML = torrent.numPeers + (torrent.numPeers === 1 ? ' peer' : ' peers')
+            const percent = Math.round(torrent.progress * 100 * 100) / 100
+            $progressBar.style.width = percent + '%'
+            $downloaded.innerHTML = prettyBytes(torrent.downloaded)
+            $total.innerHTML = prettyBytes(torrent.length)
+            let remaining
+            if (torrent.done) {
+              remaining = 'Done.'
+            } else {
+              remaining = moment.duration(torrent.timeRemaining / 1000, 'seconds').humanize()
+              remaining = remaining[0].toUpperCase() + remaining.substring(1) + ' remaining.'
+            }
+            $remaining.innerHTML = remaining
+            $downloadSpeed.innerHTML = prettyBytes(torrent.downloadSpeed) + '/s'
+            $uploadSpeed.innerHTML = prettyBytes(torrent.uploadSpeed) + '/s'
+          }
+          function onDone() {
+            $body.className += ' is-seed'
+            onProgress()
+          }
+        })
+      }
+      function prettyBytes(num) {
+        const units = ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+        const neg = num < 0
+        if (neg) num = -num
+        if (num < 1) return (neg ? '-' : '') + num + ' B'
+        const exponent = Math.min(Math.floor(Math.log(num) / Math.log(1000)), units.length - 1)
+        const unit = units[exponent]
+        num = Number((num / Math.pow(1000, exponent)).toFixed(2))
+        return (neg ? '-' : '') + num + ' ' + unit
+      }
+    </script>
+  </body>
+</html>