Spaces:
Running
Running
| <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/> | |
| ↘<code id="downloadSpeed">0 b/s</code> | |
| / ↗<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> |