feat: add service worker server as an alternative to renderMedia (#2098)

* feat: add service worker server as an alternative to renderMedia

* code QL

* thanks gh auto merge

Co-authored-by: Diego Rodríguez Baquero <github@diegorbaquero.com>

3 files changed, 167 insertions, 0 deletions

diff --git a/lib/file.js b/lib/file.js
index fd9ac7c..f3de744 100644
--- a/lib/file.js
+++ b/lib/file.js
@@ -7,6 +7,9 @@ const streamToBlobURL = require('stream-to-blob-url')
 const streamToBuffer = require('stream-with-known-length-to-buffer')
 const FileStream = require('./file-stream')
 const queueMicrotask = require('queue-microtask')
+const rangeParser = require('range-parser')
+const mime = require('mime')
+const eos = require('end-of-stream')
 
 class File extends EventEmitter {
   constructor (torrent, file) {
@@ -33,6 +36,8 @@ class File extends EventEmitter {
       this.done = true
       this.emit('done')
     }
+
+    this._serviceWorker = torrent.client.serviceWorker
   }
 
   get downloaded () {
@@ -144,6 +149,77 @@ class File extends EventEmitter {
     render.render(this, elem, opts, cb)
   }
 
+  _serve (req) {
+    const res = {
+      status: 200,
+      headers: {
+        // Support range-requests
+        'Accept-Ranges': 'bytes',
+        'Content-Type': mime.getType(this.name),
+        'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0',
+        Expires: '0'
+      },
+      body: req.method === 'HEAD' ? '' : 'STREAM'
+    }
+    // force the browser to download the file if if it's opened in a new tab
+    if (req.destination === 'document') {
+      res.headers['Content-Type'] = 'application/octet-stream'
+      res.headers['Content-Disposition'] = 'attachment'
+      res.body = 'DOWNLOAD'
+    }
+
+    // `rangeParser` returns an array of ranges, or an error code (number) if
+    // there was an error parsing the range.
+    let range = rangeParser(this.length, req.headers.range || '')
+
+    if (range.constructor === Array) {
+      res.status = 206 // indicates that range-request was understood
+
+      // no support for multi-range request, just use the first range
+      range = range[0]
+
+      res.headers['Content-Range'] = `bytes ${range.start}-${range.end}/${this.length}`
+      res.headers['Content-Length'] = `${range.end - range.start + 1}`
+    } else {
+      res.headers['Content-Length'] = this.length
+    }
+
+    const stream = req.method === 'GET' && this.createReadStream(range)
+
+    let pipe = null
+    if (stream) {
+      this.emit('stream', { stream, req, file: this }, piped => {
+        pipe = piped
+
+        // piped stream might not close the original filestream on close/error, this is agressive but necessary
+        eos(piped, () => {
+          if (piped) piped.destroy()
+          stream.destroy()
+        })
+      })
+    }
+
+    return [res, pipe || stream, pipe && stream]
+  }
+
+  getStreamURL (cb = () => {}) {
+    if (typeof window === 'undefined') throw new Error('browser-only method')
+    if (!this._serviceWorker) throw new Error('No worker registered')
+    if (this._serviceWorker.state !== 'activated') throw new Error('Worker isn\'t activated')
+    const workerPath = this._serviceWorker.scriptURL.substr(0, this._serviceWorker.scriptURL.lastIndexOf('/') + 1).slice(window.location.origin.length)
+    const url = `${workerPath}webtorrent/${this._torrent.infoHash}/${encodeURI(this.path)}`
+    cb(null, url)
+  }
+
+  streamTo (elem, cb = () => {}) {
+    if (typeof window === 'undefined') throw new Error('browser-only method')
+    if (!this._serviceWorker) throw new Error('No worker registered')
+    if (this._serviceWorker.state !== 'activated') throw new Error('Worker isn\'t activated')
+    const workerPath = this._serviceWorker.scriptURL.substr(0, this._serviceWorker.scriptURL.lastIndexOf('/') + 1).slice(window.location.origin.length)
+    elem.src = `${workerPath}webtorrent/${this._torrent.infoHash}/${encodeURI(this.path)}`
+    cb(null, elem)
+  }
+
   _getMimeType () {
     return render.mime[path.extname(this.name).toLowerCase()]
   }
diff --git a/lib/worker-server.js b/lib/worker-server.js
new file mode 100644
index 0000000..5e6e56a
--- /dev/null
+++ b/lib/worker-server.js
@@ -0,0 +1,75 @@
+/* global clients, MessageChannel, ReadableStream, Response */
+/* eslint-env serviceworker */
+
+const portTimeoutDuration = 5000
+
+module.exports = event => {
+  const { request } = event
+  const { url, method, headers, destination } = request
+  if (!url.includes(self.registration.scope + 'webtorrent/')) return null
+  if (url.includes(self.registration.scope + 'webtorrent/keepalive/')) return new Response()
+
+  return clients.matchAll({ type: 'window', includeUncontrolled: true })
+    .then(clients => {
+      return new Promise(resolve => {
+        // Use race condition for whoever controls the response stream
+        for (const client of clients) {
+          const messageChannel = new MessageChannel()
+          const { port1, port2 } = messageChannel
+          port1.onmessage = event => {
+            resolve([event.data, messageChannel])
+          }
+          client.postMessage({
+            url,
+            method,
+            headers: Object.fromEntries(headers.entries()),
+            scope: self.registration.scope,
+            destination,
+            type: 'webtorrent'
+          }, [port2])
+        }
+      })
+    })
+    .then(([data, messageChannel]) => {
+      if (data.body === 'STREAM' || data.body === 'DOWNLOAD') {
+        let timeOut = null
+        return new Response(new ReadableStream({
+          pull (controller) {
+            return new Promise(resolve => {
+              messageChannel.port1.onmessage = event => {
+                if (event.data) {
+                  controller.enqueue(event.data) // event.data is Uint8Array
+                } else {
+                  clearTimeout(timeOut)
+                  controller.close() // event.data is null, means the stream ended
+                  messageChannel.port1.onmessage = null
+                }
+                resolve()
+              }
+
+              // 'media player' does NOT signal a close on the stream and we cannot close it because it's locked to the reader,
+              // so we just empty it after 5s of inactivity, the browser will request another port anyways
+              clearTimeout(timeOut)
+              if (data.body === 'STREAM') {
+                timeOut = setTimeout(() => {
+                  controller.close()
+                  messageChannel.port1.postMessage(false) // send timeout
+                  messageChannel.port1.onmessage = null
+                  resolve()
+                }, portTimeoutDuration)
+              }
+
+              messageChannel.port1.postMessage(true) // send a pull request
+            })
+          },
+          cancel () {
+            // This event is never executed
+            messageChannel.port1.postMessage(false) // send a cancel request
+          }
+        }), data)
+      }
+
+      return new Response(data.body, data)
+    })
+    .catch(console.error)
+}
diff --git a/lib/worker.js b/lib/worker.js
new file mode 100644
index 0000000..47c1127
--- /dev/null
+++ b/lib/worker.js
@@ -0,0 +1,16 @@
+/* eslint-env serviceworker */
+
+const fileResponse = require('./worker-server')
+
+self.addEventListener('install', () => {
+  self.skipWaiting()
+})
+
+self.addEventListener('fetch', event => {
+  const res = fileResponse(event)
+  if (res) event.respondWith(res)
+})
+
+self.addEventListener('activate', evt => {
+  evt.waitUntil(self.clients.claim())
+})