[ { "path": ".gitignore", "content": "node_modules\nscreenshots\n" }, { "path": ".travis.yml", "content": "language: node_js\nnode_js: 6\ndeploy:\n provider: npm\n email: wmhilton@gmail.com\n on:\n skip_cleanup: true\n tags: true\n branch: master\n repo: wmhilton/download-with-webtorrent-button\n api_key:\n secure: hlb8qQQlurY9WGoyU7le3HSrxwZil6GJp2N8ZPlrJQS1fawbg5uwLxI2JkdydCEAIe3/SVD2JEKQTa2toq20z/w2cWYEGectKJxMUGzM4VOK9UgSsBM0CKTa7N3nXoZbxZRjOjDcdHtPV6q5HBy3VKM3RIcJsOst8DbQHFI9cfhrOLBPm+Y9Ke+dE7mij+P1ys+tnLRLzEBEC9Ea7fn85/+4IAmhU7tZp/lyu1doPlFSNa7bkscB8DCB82DWkY9Vw4fRJYpHPC2861RsYlXoVdcUhv6EdCCKFtQIJQsxoToCOVtCV5tHRRlMK3rmv9r1I/cPjYVkdcfRmgO+P/3IlT+5GDiYGaBvq4Og3vdyMcPhf7poQhIJDysCTLo+BpODP3zUeCprE7dqMrkTHrGlL46gSGBmRYIJkhxtC0oMLug5QEwep510jHSdidutQVoX5w5dGdy70jKyNBYJrTOOuaQ52QNWPBGy1LniEBGD50Dv/Qk71lhElhMqDpsj15JPIlwy4hE0aLQfrNE1bp3+YjspUkbSARcwBuyoFr90+lMZKDJJtYH9Kms8TQmcbycmPkwacAJj6e8/3rD5njgVwDfm/8c5fGy+qilz5tYGIrDJwaURE1MRRAP+NZc6srWglOFsGns05r09F0eSNJ19qVxY+s7LRA+7TYTeltiWpss=\n" }, { "path": "LICENSE.md", "content": "This is free and unencumbered software released into the public domain.\n\nAnyone is free to copy, modify, publish, use, compile, sell, or\ndistribute this software, either in source code form or as a compiled\nbinary, for any purpose, commercial or non-commercial, and by any\nmeans.\n\nIn jurisdictions that recognize copyright laws, the author or authors\nof this software dedicate any and all copyright interest in the\nsoftware to the public domain. We make this dedication for the benefit\nof the public at large and to the detriment of our heirs and\nsuccessors. We intend this dedication to be an overt act of\nrelinquishment in perpetuity of all present and future rights to this\nsoftware under copyright law.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.\nIN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR\nOTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,\nARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\nOTHER DEALINGS IN THE SOFTWARE.\n\nFor more information, please refer to \n\n" }, { "path": "README.md", "content": "# download-with-webtorrent-button\nTransform ordinary download links into super-powered WebTorrent ones!\n\n## Example\n\nCheck out the demo page: https://wmhilton.github.io/download-with-webtorrent-button\n\n[![screenshot of WebTorrent button](https://github.com/wmhilton/download-with-webtorrent-button/blob/master/dist/animated.gif?raw=true)](https://wmhilton.github.io/download-with-webtorrent-button)\n\n\"Sponsor\"\n\n## Rationale\n\nDo you have a big, popular file that lots of people download and the Internet\nwould grind to a halt if your website went down?\nIt is EASY to spread the burden of hosting a file among all the people who are\ndownloading it. Bittorrent (despite its association with piracy) is a fabulous\nnetwork protocol that does exactly that. It use to be that you needed to install\nseparate software to use Bittorrent, but with the advent of\n[WebTorrent](https://webtorrent.io) it is now possible to use the Bittorrent\nprotocol seamlessly in the browser without visitors ever having to leave your site!\n\nDespite how FREAKING AWESOME WebTorrent is, not enough sites are taking advantage\nof it. To make taking advantage of WebTorrent as easy and\naccessible as possible, I decided to make a \"Download with WebTorrent\" button\nthat turns your ordinary download link into a super-powered WebTorrent download\nlink! All you have to do is paste a small code snippet in your HTML.\n\n\n## Installation using a CDN\n\nAdd the following stylesheet to ``:\n\n```html\n\n```\n\nAnd the following scripts to the bottom of ``:\n\n```html\n\n\n```\n\nThis adds a single function `registerWebtorrentLinks()` to the global scope.\nIt automatically initializes `a` tags. If you add additional `a` tags after the\ninitial page load (such as in the case of single page apps) you can rerun registerWebtorrentLinks().\n\nIf you want to override the CSS styles, take a look at `index.css`.\n\n## Installation using a module bundler?\n\nSomebody should fork this and make it a React component. Pull requests welcome!\n\n\n## Usage\n\n### The easiest way\n\nTo add a **Download with WebTorrent** button to your page, use a regular `` link.\nThe link's `href` attribute will be provided as a fallback on browsers that can't run WebTorrent,\nor if an error occurs. Then add a `data-webtorrent` attribute.\n\nYou can use `data-webtorrent=\"auto\"` and these\n[fabulous](https://github.com/wmhilton/webtorrentify-link)\n[free](https://github.com/wmhilton/webtorrentify-server)\n[services](https://github.com/wmhilton/cors-buster)\nwill auto-generate a WebTorrent-compatible .torrent file for your link.\n\n```html\nLink Text\n```\n\n### Bring your own torrent\n\nIf you already have a magnet URI, you can use that,\n\n```html\nLink Text\n```\n\nor the location of a .torrent file,\n\n```html\nLink Text\n```\n\nbut know that WebTorrent is not yet compatible with the DHT and requires `ws` or `http` trackers. If your .torrent only includes `udp` trackers or is tracker-less and relies on the DHT, you are better off using `data-webtorrent=\"auto\"`.\n\nIf your torrent is a folder torrent rather than a single file, add a `data-file` attribute with the name of the individual file you intend the link for.\n\n```html\nSintel\n```\n\n## License\n\nCopyright 2017 William Hilton.\nLicensed under [The Unlicense](http://unlicense.org/).\n" }, { "path": "dist/index.css", "content": "a[data-webtorrent]{display:inline-block;color:#000;text-decoration:none;font:11pt sans-serif;font-weight:700;text-align:center;padding:10px;border-radius:10px;box-shadow:2px 2px 8px rgba(0,0,0,.2);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 1334 1534' stroke-linejoin='round'%3E%3Cstyle%3E.a%7Bfill:%23ef334c;%7D%3C/style%3E%3Cpath d='M15 374l637-368c8-5 19-5 28 0l637 368c8 5 14 14 14 24l0 736c0 10-5 19-14 24l-637 368c-8 5-19 5-28 0l-637-368c-8-5-14-14-14-24l0-736c0-10 5-19 14-24Z' class='a'/%3E%3Cpath d='M98 424l556-321c7-4 17-4 24 0l556 321c7 4 12 12 12 21l0 642c0 9-5 17-12 21l-556 321c-7 4-17 4-24 0l-556-321c-7-4-12-12-12-21l0-642c0-9 4-16 12-21Z' fill='%23343b45'/%3E%3Cpath d='M666 1078l242 219c0 0 269-155 327-189 7-4 11-11 11-19 0-54 0-261 0-261l-321-298 -259 548Z' fill='%23262b33'/%3E%3Cpath d='M980 636c-8-83-78-147-163-147 -68 0-126 41-151 100 -25-59-83-100-151-100 -85 0-155 64-163 147 -1 6-1 11-1 17 0 199 244 293 315 426 71-133 315-227 315-426 0-6 0-11-1-17Z' class='a'/%3E%3C/svg%3E\"),-webkit-linear-gradient(right,#4caf50,#009e9e),-webkit-linear-gradient(bottom right,#00b7b7 0,#009e9e);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 1334 1534' stroke-linejoin='round'%3E%3Cstyle%3E.a%7Bfill:%23ef334c;%7D%3C/style%3E%3Cpath d='M15 374l637-368c8-5 19-5 28 0l637 368c8 5 14 14 14 24l0 736c0 10-5 19-14 24l-637 368c-8 5-19 5-28 0l-637-368c-8-5-14-14-14-24l0-736c0-10 5-19 14-24Z' class='a'/%3E%3Cpath d='M98 424l556-321c7-4 17-4 24 0l556 321c7 4 12 12 12 21l0 642c0 9-5 17-12 21l-556 321c-7 4-17 4-24 0l-556-321c-7-4-12-12-12-21l0-642c0-9 4-16 12-21Z' fill='%23343b45'/%3E%3Cpath d='M666 1078l242 219c0 0 269-155 327-189 7-4 11-11 11-19 0-54 0-261 0-261l-321-298 -259 548Z' fill='%23262b33'/%3E%3Cpath d='M980 636c-8-83-78-147-163-147 -68 0-126 41-151 100 -25-59-83-100-151-100 -85 0-155 64-163 147 -1 6-1 11-1 17 0 199 244 293 315 426 71-133 315-227 315-426 0-6 0-11-1-17Z' class='a'/%3E%3C/svg%3E\"),linear-gradient(270deg,#4caf50 0,#009e9e),linear-gradient(to top left,#00b7b7 0,#009e9e);background-repeat:no-repeat,no-repeat,no-repeat;background-position:5px 50%,left 100%,100%;background-size:28px 28px,0 100%,100%;padding-left:3em}a[data-webtorrent]:after{content:attr(title)}a[data-webtorrent].no-webrtc a,a[data-webtorrent]:after{display:block;clear:left;font-weight:400;text-align:center;font:8pt sans-serif}a[data-webtorrent].no-webrtc a{color:#000;text-decoration:none;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}a[data-webtorrent].no-webrtc a:hover{text-decoration:underline}" }, { "path": "dist/index.js", "content": "!function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,\"a\",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p=\"\",t(t.s=2)}([function(e,t){function n(){\"use strict\";function e(e){var o=e.currentTarget;return o.classList.contains(\"init\")?t(e):o.classList.contains(\"downloading\")?n(e):o.classList.contains(\"ready\")?r(e):!o.classList.contains(\"seeding\")||r(e)}function t(e){var t=e.currentTarget;t.classList.remove(\"init\"),t.classList.add(\"downloading\");try{var n=t.innerText,r=new WebTorrent;return r.on(\"error\",function(e){console.error(\"ERROR: \"+e.message)}),\"auto\"===t.dataset.webtorrent&&(t.dataset.webtorrent=\"https://webtorrentify.now.sh/?href=\"+t.href,t.title=\"Generating .torrent file...\"),r.add(t.dataset.webtorrent,function(e){function r(){var r=e.numPeers;r+=1===r?\" peer\":\" peers\";var i=Math.floor(100*e.progress)+\"%\";t.style=\"background-size: 28px 28px, \"+i+\" 100%, 100%;\",e.done?e.done&&t.classList.contains(\"seeding\")&&(t.innerText=o.name+\" - Ready\",t.title=\"Seeding (\"+r+\")\"):t.innerText.endsWith(\" - Ready\")||(t.innerText=n+\" - \"+i,t.title=\"Downloading (\"+r+\")\")}console.log(e);var o;o=1===e.files.length||void 0===t.dataset.file?e.files[0]:e.files.find(function(e){return e.name===t.dataset.file}),r(),setInterval(r,500),o.getBlobURL(function(e,n){if(e)return void window.alert(\"WebTorrent error: source getBlobURL\");t.classList.remove(\"downloading\"),t.classList.add(\"ready\"),t.innerText=o.name+\" - Ready\",t.title=\"Click to save file\",t.download=o.name,t.href=n})}),e.preventDefault(),!1}catch(e){return console.log(e),!0}}function n(e){return e.preventDefault(),!1}function r(e){var t=e.currentTarget;return t.classList.remove(\"ready\"),t.classList.add(\"seeding\"),!0}for(var o=document.querySelectorAll(\"a[data-webtorrent]\"),i=0;i {\n console.log('Generating animated gif')\n var fs = require('fs')\n var GIFEncoder = require('gifencoder')\n var encoder = new GIFEncoder(210, 64)\n var pngFileStream = require('png-file-stream')\n pngFileStream('screenshots/*.png')\n .pipe(encoder.createWriteStream({ repeat: -1, delay: 1000, quality: 10 }))\n .pipe(fs.createWriteStream('dist/animated.gif'))\n })\n .catch(err => console.log)\n" }, { "path": "index.css", "content": "a[data-webtorrent] {\n display: inline-block;\n color: #000;\n text-decoration: none;\n font: 11pt sans-serif;\n font-weight: bold;\n text-align: center;\n padding: 10px;\n border-radius: 10px;\n box-shadow: 2px 2px 8px rgba(0,0,0,0.2);\n background-image: url(./assets/webtorrent-v3.1.svg),\n linear-gradient(to left, #4CAF50 0%, #009e9e 100%),\n linear-gradient(to top left, #00b7b7 0%, #009e9e 100%);\n background-repeat: no-repeat, no-repeat, no-repeat;\n background-position: 5px 50%, left 100%, 100%;\n background-size: 28px 28px, 0px 100%, 100%;\n padding-left: 3em;\n}\n/* Used for displaying status messages */\na[data-webtorrent]::after {\n display: block;\n clear: left;\n content: attr(title);\n font-weight: normal;\n text-align: center;\n font: 8pt sans-serif;\n}\n/* Used for fallback Bittorrent link */\na[data-webtorrent].no-webrtc a {\n display: block;\n clear: left;\n font-weight: normal;\n text-align: center;\n font: 8pt sans-serif;\n color: black;\n text-decoration: none;\n width: fit-content;\n}\na[data-webtorrent].no-webrtc a:hover {\n text-decoration: underline;\n}\n" }, { "path": "index.html", "content": "\n\n\n \n Button Demo - Download with WebTorrent Button\n \n\n\n node-v6.10.2-linux-x64.tar.xz\n \n \n\n\n" }, { "path": "index.js", "content": "/* global WebTorrent */\nfunction registerWebtorrentLinks () {\n 'use strict'\n // Add onclick handlers to all elements\n var links = document.querySelectorAll('a[data-webtorrent]')\n for (var i = 0; i < links.length; i++) {\n // Wrap the link innerHTML so its easier to update\n var a = links[i]\n\n if (WebTorrent.WEBRTC_SUPPORT) {\n a.title = 'Download with WebTorrent'\n a.addEventListener('click', onButtonClick)\n } else {\n a.classList.add('no-webrtc')\n if (a.dataset.webtorrent !== 'auto') {\n a.title = ''\n var sublink = document.createElement('a')\n sublink.href = a.dataset.webtorrent\n sublink.innerText = 'alternate Bittorrent link'\n a.appendChild(sublink)\n } else {\n a.title = 'Download'\n }\n }\n a.classList.add('init')\n }\n\n function onButtonClick (e) {\n // The button has a simple state machine that progresses from\n // 'init' to 'downloading' to 'ready' to 'seeding' and clicks\n // are handled differently in each case.\n var a = e.currentTarget\n if (a.classList.contains('init')) return downloadWithWebTorrent(e)\n if (a.classList.contains('downloading')) return ignoreClicks(e)\n if (a.classList.contains('ready')) return saveFile(e)\n if (a.classList.contains('seeding')) return saveFile(e)\n return true\n }\n\n // This is what runs when user clicks the link\n function downloadWithWebTorrent (e) {\n var a = e.currentTarget\n a.classList.remove('init')\n a.classList.add('downloading')\n try {\n var title = a.innerText\n\n // Initialize WebTorrent\n var client = new WebTorrent()\n client.on('error', function (err) {\n console.error('ERROR: ' + err.message)\n })\n\n // The 'auto' option will dynamically generate a .torrent file\n // using a free service I built\n if (a.dataset.webtorrent === 'auto') {\n a.dataset.webtorrent = 'https://webtorrentify.now.sh/?href=' + a.href\n a.title = 'Generating .torrent file...'\n }\n\n // This starts downloading the torrent\n client.add(a.dataset.webtorrent, function (torrent) {\n console.log(torrent)\n\n // Torrents can contain multiple files, so we have to deal with that.\n var file\n if (torrent.files.length === 1 || a.dataset.file === undefined) {\n file = torrent.files[0]\n } else {\n file = torrent.files.find(function (file) { return file.name === a.dataset.file })\n }\n\n // Show progress bar\n function progress () {\n var numPeers = torrent.numPeers\n numPeers += (numPeers === 1 ? ' peer' : ' peers')\n var percent = Math.floor(torrent.progress * 100) + '%'\n // Nifty progress bar using CSS gradient backgrounds\n a.style = 'background-size: 28px 28px, ' + percent + ' 100%, 100%;'\n if (!torrent.done) {\n // Update download percentage\n if (!a.innerText.endsWith(' - Ready')) {\n a.innerText = title + ' - ' + percent\n a.title = 'Downloading (' + numPeers + ')'\n }\n } else if (torrent.done && a.classList.contains('seeding')) {\n a.innerText = file.name + ' - Ready'\n a.title = 'Seeding (' + numPeers + ')'\n }\n }\n progress()\n setInterval(progress, 500)\n\n // When the file is ready, change the button text to reflect that\n file.getBlobURL(function (err, url) {\n if (err) {\n window.alert('WebTorrent error: source getBlobURL')\n return\n }\n a.classList.remove('downloading')\n a.classList.add('ready')\n a.innerText = file.name + ' - Ready'\n a.title = 'Click to save file'\n a.download = file.name\n a.href = url\n })\n })\n // Prevent default link behavior and don't follow it.\n e.preventDefault()\n return false\n } catch (err) {\n console.log(err)\n // If something went wrong, bail and use the default link behavior\n // to download the link without WebTorrent if possible.\n return true\n }\n }\n\n // If we're already downloading don't start another download\n function ignoreClicks (e) {\n e.preventDefault()\n return false\n }\n\n // Once the file is downloaded, we change the href to point to a blob.\n // Thus we just let the link do its default behavior.\n function saveFile (e) {\n var a = e.currentTarget\n a.classList.remove('ready')\n a.classList.add('seeding')\n return true\n }\n}\n\nif (window) {\n window.registerWebtorrentLinks = registerWebtorrentLinks\n registerWebtorrentLinks()\n}\n" }, { "path": "package.json", "content": "{\n \"name\": \"download-with-webtorrent-button\",\n \"version\": \"1.0.5\",\n \"description\": \"Transform ordinary download links into super-powered WebTorrent ones!\",\n \"main\": \"./index.js\",\n \"style\": \"./index.css\",\n \"devDependencies\": {\n \"css-loader\": \"^0.28.0\",\n \"extract-text-webpack-plugin\": \"^2.1.0\",\n \"file-loader\": \"^0.11.1\",\n \"gifencoder\": \"^1.0.6\",\n \"http-server\": \"^0.9.0\",\n \"husky\": \"^0.13.3\",\n \"nightmare\": \"^2.10.0\",\n \"png-file-stream\": \"^1.0.0\",\n \"postcss-loader\": \"^1.3.3\",\n \"standard\": \"^10.0.1\",\n \"svg-url-loader\": \"^2.0.2\",\n \"webpack\": \"^2.3.3\",\n \"webtorrent\": \"^0.98.15\"\n },\n \"browserlist\": [\n \"last 2 versions\"\n ],\n \"scripts\": {\n \"start\": \"http-server --cors -o\",\n \"precommit\": \"npm test && npm run build\",\n \"build\": \"webpack -p\",\n \"gif\": \"node generate_gif.js\",\n \"test\": \"standard index.js\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/wmhilton/download-with-webtorrent-button.git\"\n },\n \"keywords\": [],\n \"author\": \"William Hilton \",\n \"license\": \"Unlicense\",\n \"bugs\": {\n \"url\": \"https://github.com/wmhilton/download-with-webtorrent-button/issues\"\n },\n \"homepage\": \"https://github.com/wmhilton/download-with-webtorrent-button#readme\"\n}\n" }, { "path": "postcss.config.js", "content": "module.exports = {\n plugins: [\n require('autoprefixer')\n ]\n}" }, { "path": "webpack.config.js", "content": "const path = require('path')\nconst pkg = require('./package.json')\nconst ExtractTextPlugin = require('extract-text-webpack-plugin')\n\nmodule.exports = {\n entry: [pkg.main, pkg.style],\n output: {\n filename: 'index.js',\n path: path.resolve(__dirname, 'dist')\n },\n module: {\n rules: [\n { test: /\\.css$/,\n use: ExtractTextPlugin.extract({\n use: [\n {\n loader: 'css-loader',\n options: {importLoaders: 1}\n },\n 'postcss-loader'\n ]\n })\n },\n { test: /\\.svg/,\n use: 'svg-url-loader'\n },\n ],\n },\n plugins: [\n new ExtractTextPlugin('index.css'),\n ]\n}" } ]