├── .gitignore
├── .travis.yml
├── dist.js
├── index.html
├── index.js
├── package.json
└── README.md
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | package-lock.json
3 | .DS_Store
4 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | cache:
3 | directories:
4 | - node_modules
5 | notifications:
6 | email: false
7 | node_js:
8 | - '8'
9 | before_script:
10 | - npm prune
11 | after_success:
12 | - npm run semantic-release
13 | branches:
14 | except:
15 | - /^v\d+\.\d+\.\d+$/
16 |
--------------------------------------------------------------------------------
/dist.js:
--------------------------------------------------------------------------------
1 | /* globals CustomEvent */
2 | const loadjs = require('load-js')
3 |
4 | window.addEventListener('WebComponentsReady', () => {
5 | let opts = {WebTorrentElement: require('./')}
6 | let event = new CustomEvent('WebTorrentReady', opts)
7 | window.dispatchEvent(event)
8 | })
9 | const polyfill = 'https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.12/webcomponents-loader.js'
10 | loadjs([{async: true, url: polyfill}])
11 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | WebTorrent Component Demo
7 |
16 |
17 |
18 |
19 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | const ZComponent = require('zcomponent')
2 | const WebTorrent = require('webtorrent')
3 | const magnetURL = require('magnet-uri')
4 |
5 | const client = new WebTorrent()
6 |
7 | const getTorrent = (magnet, fn) => {
8 | let decoded = magnetURL(magnet)
9 | for (let torrent of client.torrents) {
10 | if (torrent.infoHash === decoded.infoHash) {
11 | // TODO: make sure all trackers and web seeds are added
12 | return fn(torrent)
13 | }
14 | }
15 | client.add(magnet, fn)
16 | }
17 |
18 | class WebTorrentElement extends ZComponent {
19 | set file (file) {
20 | this._file = file
21 | }
22 | set src (magnet) {
23 | getTorrent(magnet, torrent => {
24 | torrent.files.forEach(file => {
25 | if (this._file) {
26 | if (file.name === this._file || file.path === this._file) {
27 | file.appendTo(this)
28 | }
29 | } else {
30 | file.appendTo(this)
31 | }
32 | })
33 | })
34 | }
35 |
36 | get shadow () {
37 | return `
38 |
44 |
45 |
46 | `
47 | }
48 | }
49 |
50 | module.exports = WebTorrentElement
51 | window.customElements.define('web-torrent', WebTorrentElement)
52 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "webtorrent-element",
3 | "version": "0.0.0-development",
4 | "description": "WebTorrent HTML element.",
5 | "main": "index.js",
6 | "scripts": {
7 | "commit": "git-cz",
8 | "test": "standard",
9 | "start": "budo dist.js:bundle.js",
10 | "precommit": "npm test",
11 | "prepush": "npm test",
12 | "prepublishOnly": "distjs",
13 | "commitmsg": "validate-commit-msg",
14 | "semantic-release": "semantic-release pre && npm publish && semantic-release post"
15 | },
16 | "standard": {
17 | "ignore": [
18 | "dist"
19 | ]
20 | },
21 | "config": {
22 | "commitizen": {
23 | "path": "./node_modules/cz-conventional-changelog"
24 | }
25 | },
26 | "keywords": [],
27 | "author": "Mikeal Rogers (http://www.mikealrogers.com)",
28 | "license": "Apache-2.0",
29 | "dependencies": {
30 | "distjs": "^1.0.0",
31 | "magnet-uri": "^5.1.7",
32 | "webtorrent": "^0.98.19",
33 | "zcomponent": "^1.0.4"
34 | },
35 | "devDependencies": {
36 | "babel-minify": "^0.2.0",
37 | "browserify": "^14.4.0",
38 | "budo": "^10.0.4",
39 | "cz-conventional-changelog": "^2.0.0",
40 | "husky": "^0.14.3",
41 | "load-js": "^2.0.0",
42 | "standard": "^10.0.3",
43 | "semantic-release": "^8.0.3"
44 | },
45 | "repository": {
46 | "type": "git",
47 | "url": "https://github.com/mikeal/webtorrent-component.git"
48 | }
49 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # WebTorrent Element
2 |
3 | An HTML element you can use to display content on WebTorrent.
4 |
5 |
6 |
7 | 
8 |
9 |
10 |
11 | Usage:
12 |
13 | ```html
14 |
15 |
16 |
17 |
18 | ```
19 |
20 | Often a torrent contains many files but you only want to display one.
21 | You can do this using the `file` attribute.
22 |
23 | ```html
24 |
25 | ```
26 |
27 | Here's some example code you can stick your application to get started. It
28 | loads and plays a Creative Commons video.
29 |
30 | ```html
31 |
32 |
35 | ```
36 |
37 | Since this is just a regular HTML element, and all the content appended as
38 | the torrent loads are regular elements, you can add style in your own app
39 | like you would any other HTML.
40 |
41 | ### Bundling
42 |
43 | If you want to build the component into the JavaScript bundle of your app
44 | you can do so easily, but you'll need to handle loading a WebComponents
45 | polyfill on your own.
46 |
47 | ```javascript
48 | const WebTorrentComponent = require('webtorrent-element')
49 |
50 | let elem = new WebTorrentComponent()
51 | elem.src = MAGNETURL
52 | elem.file = 'Sintel.mp4'
53 | document.body.appendChild(elem)
54 | ```
55 |
--------------------------------------------------------------------------------