How would a WebTorrent VueJS component could be build?

Hy there. Given webtorrent.io I would like to build a VueJS component that shows loading magnet files, and status and also when downloads finishes triggers players.

Is the Vuex Store a good place to keep a list of active download queues and a stream o data?

All that is possible with webtorrent.

var WebTorrent = require('webtorrent')

var client = new WebTorrent()

var magnetURI = 'magnet: ...'

client.add(magnetURI, { path: '/path/to/folder' }, function (torrent) {
  torrent.on('done', function () {
    console.log('torrent download finished')
  })
})

How could I structure that architecture/pattern with VueJS? Any insights, apreciated

Thanks!

1 answer

  • answered 2018-04-17 04:26 Luchux

    I will answer cause I found a solution. Then if the community wants this to be deleted, its all right.

    Basically what I did is wait for a Component to be mounted.

    Inside AComponent.Vue

    <template>
      <keep-alive>
         <!-- HTML binding webtorrent client data -->
      </keep-alive>
    </template>
    
    <script>
      export default {
        mounted() {
          var client = WebTorrent()
        }
      }
    </script>
    

    Why this achieve what I was looking for ? :

    • keep alive keep that parts of the DOM alive, when i render another template and come back to this one (as if the download queue is in a widget, modal, or another view that needs to keep alive).
    • mounted, its part of the component lifecycle hooks (https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram), and happens once the DOM has been maniuplated, window exists (needed by WebTorrent), and the component has been rendered.