├── .gitignore
├── LICENSE
├── README.md
├── bower.json
├── demo
    └── index.html
├── index.html
└── shared-filesystem.html


/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | 
 2 |             DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
 3 |                     Version 2, December 2004
 4 |  
 5 |  Copyright (C) 2016 Kevin Jahns <kevin.jahns@rwth-aachen.de>
 6 |  Everyone is permitted to copy and distribute verbatim or modified
 7 |  copies of this license document, and changing it is allowed as long
 8 |  as the name is changed.
 9 |  
10 |             DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
11 |    TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
12 |  
13 |   0. You just DO WHAT THE FUCK YOU WANT TO.
14 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # P2P *&lt;shared-filesystem&gt;* Web Component
 2 | 
 3 | A Polymer element that you can include in your projects to enable your users to share files.
 4 | The cool thing: You don't need to set up anything, because everything works **peer-to-peer**
 5 | (well, .. as far as something can be peer-to-peer in the web).
 6 | The clients communicate via WebRTC. Conflicts resolved by [Yjs](https://github.com/y-js/yjs), and files
 7 | are shared via [webtorrent](https://webtorrent.io/).
 8 | Check out [the live demo](http://y-js.org/shared-filesystem/components/shared-filesystem/demo/),
 9 | and read the [documentation](http://y-js.org/shared-filesystem/components/shared-filesystem/).
10 | 
11 | ##### Example:
12 | 
13 | ```
14 |   <shared-filesystem room="my-namespace"></shared-filesystem>
15 | ```
16 | 
17 | ![Shared Filesystem Demo](http://goo.gl/4XipWA)
18 | 
19 | ### Production use
20 | The shared filesystem element requires a signaling server for webrtc, and a tracking server for webtorrent.
21 | The tracking server is provided by the webtorrent community, so you may wanna exchange it if you want really fast access to your files.
22 | Furthermore, read in the [y-webrtc documentation](https://github.com/y-js/y-webrtc) on how to set up your own signaling server.
23 | 
24 | ### Development
25 | This project was generated with [generator-polymer](https://github.com/yeoman/generator-polymer).
26 | Read the documentation to get started
27 | 
28 | ##### License
29 | 
30 | ```
31 |             DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
32 |                     Version 2, December 2004
33 |  
34 |  Copyright (C) 2016 Kevin Jahns <kevin.jahns@rwth-aachen.de>
35 |  Everyone is permitted to copy and distribute verbatim or modified
36 |  copies of this license document, and changing it is allowed as long
37 |  as the name is changed.
38 |  
39 |             DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
40 |    TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
41 |  
42 |   0. You just DO WHAT THE FUCK YOU WANT TO.
43 |  ```
44 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "shared-filesystem",
 3 |   "version": "1.0.0",
 4 |   "authors": [
 5 |     "Kevin Jahns <kevin.jahns@rwth-aachen.de>"
 6 |   ],
 7 |   "description": "Shared Filesystem Web Component",
 8 |   "keywords": [
 9 |     "file",
10 |     "share",
11 |     "web-component",
12 |     "web-components",
13 |     "polymer"
14 |   ],
15 |   "main": "shared-filesystem.html",
16 |   "license": "MIT",
17 |   "homepage": "http://y-js.org",
18 |   "ignore": [
19 |     "/.*",
20 |     "/test/"
21 |   ],
22 |   "dependencies": {
23 |     "polymer": "Polymer/polymer#^1.2.0",
24 |     "yjs": "^11.1.0",
25 |     "y-map": "^9.0.1",
26 |     "paper-item": "^1.2.1",
27 |     "paper-icon-button": "^1.1.1",
28 |     "paper-dialog": "^1.0.4",
29 |     "paper-input": "^1.1.11",
30 |     "drag-drop": "feross/drag-drop#^2.11.0",
31 |     "webtorrent": "^0.92.0",
32 |     "paper-progress": "^1.0.9"
33 |   },
34 |   "devDependencies": {
35 |     "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
36 |     "web-component-tester": "^4.0.0",
37 |     "y-memory": "^8.0.5",
38 |     "y-websockets-client": "^8.0.9",
39 |     "y-webrtc": "^8.0.4"
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 6 |     <title>shared-filesystem Demo</title>
 7 |     <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
 8 |     <link rel="import" href="../shared-filesystem.html">
 9 |     <!-- github badge -->
10 |     <script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
11 |   </head>
12 |   <body unresolved>
13 |     <h1> Shared Filesystem <a class="github-button" href="https://github.com/y-js/shared-filesystem" aria-label="Fork y-js/shared-filesystem on GitHub">Fork</a> </h1>
14 |     <div class="container">
15 |       <p style="width: ">
16 |         A demo of the <code>&lt;shared-filesystem&gt;</code>
17 |         Web Component that you can include in your projects to enable your users to share files.
18 |         The cool thing: You don't need to set up anything, because everything works <b>peer-to-peer</b> (well, .. as far as something can be peer-to-peer in the web).</p>
19 |       <p>Share <a id="sharedLink">this link</a> with your friends and drag'n'drop files to the shared file system element! <a href="./">Click here</a> to create a new url. </p>
20 |     </div>
21 |     <script>
22 |       function createRoom (roomname) {
23 |         window.location.hash = roomname
24 |         document.querySelector('#sharedLink').setAttribute('href', window.location.href)
25 |         window.fs = document.createElement('shared-filesystem')
26 |         fs.setAttribute('room', window.location.hash)
27 |         document.querySelector('.container').appendChild(window.fs)
28 |       }
29 |       if (window.location.hash.length > 0) {
30 |         createRoom(window.location.hash.slice(1))
31 |       } else {
32 |         // create random room
33 |         createRoom(Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 20))
34 |       }
35 |     </script>
36 |   </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 | 
 5 |   <meta charset="utf-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 | 
 8 |   <script src="../webcomponentsjs/webcomponents-lite.js"></script>
 9 |   <link rel="import" href="../iron-component-page/iron-component-page.html">
10 | 
11 | </head>
12 | <body unresolved>
13 |   <!-- Note: if the main element for this repository doesn't
14 |        match the folder name, add a src="&lt;main-component&gt;.html" attribute,
15 |        where &lt;main-component&gt;.html" is a file that imports all of the
16 |        components you want documented. -->
17 |   <iron-component-page></iron-component-page>
18 | 
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/shared-filesystem.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../polymer/polymer.html">
  2 | 
  3 | <link rel="import" href="../paper-dialog/paper-dialog.html">
  4 | <link rel="import" href="../iron-icon/iron-icon.html">
  5 | <link rel="import" href="../iron-icons/iron-icons.html">
  6 | <link rel="import" href="../paper-item/paper-icon-item.html">
  7 | <link rel="import" href="../paper-item/paper-item.html">
  8 | <link rel="import" href="../paper-icon-button/paper-icon-button.html">
  9 | <link rel="import" href="../paper-item/paper-item-body.html">
 10 | <link rel="import" href="../paper-material/paper-material.html">
 11 | <link rel="import" href="../paper-toolbar/paper-toolbar.html">
 12 | <link rel="import" href="../paper-button/paper-button.html">
 13 | <link rel="import" href="../paper-input/paper-input.html">
 14 | <link rel="import" href="../paper-progress/paper-progress.html">
 15 | 
 16 | <script src="../yjs/y.js"></script>
 17 | <script src="../y-memory/y-memory.js"></script>
 18 | <script src="../y-webrtc/y-webrtc.js"></script>
 19 | <script src="../y-map/y-map.js"></script>
 20 | <script src="../drag-drop/dragdrop.min.js"></script>
 21 | <script src="../webtorrent/webtorrent.min.js"></script>
 22 | 
 23 | <!--
 24 |   # P2P *&lt;shared-filesystem&gt;* Web Component
 25 | 
 26 |   A Polymer element that you can include in your projects to enable your users to share files.
 27 |   The cool thing: You don't need to set up anything, because everything works **peer-to-peer**
 28 |   (well, .. as far as something can be peer-to-peer in the web).
 29 |   The clients communicate via WebRTC. Conflicts resolved by [Yjs](https://github.com/y-js/yjs), and files
 30 |   are shared via [webtorrent](https://webtorrent.io/).
 31 |   Check out [the live demo](http://y-js.org/shared-filesystem/components/shared-filesystem/demo/),
 32 |   and read the [documentation](http://y-js.org/shared-filesystem/components/shared-filesystem/).
 33 | 
 34 |   ![Shared Filesystem Demo](http://goo.gl/4XipWA)
 35 | 
 36 |   Example:
 37 |   ```
 38 |     <shared-filesystem room="my-namespace"></shared-filesystem>
 39 |   ```
 40 |   @demo demo/index.html
 41 | -->
 42 | 
 43 | <dom-module id="shared-filesystem">
 44 |   <template>
 45 |     <style>
 46 |       iron-icon {
 47 |         color: grey;
 48 |       }
 49 |       #main {
 50 |         position: relative;
 51 |       }
 52 |       #main > paper-material {
 53 |         min-height: 400px;
 54 |       }
 55 |       paper-progress {
 56 |         width: 100%;
 57 |       }
 58 |       div.overlay {
 59 |         display: none;
 60 |       }
 61 |       #main.drag .overlay {
 62 |         position: absolute;
 63 |         top: 0;
 64 |         right: 0;
 65 |         left: 0;
 66 |         bottom: 0;
 67 |         display: block;
 68 |         background-color: rgba(255, 255, 255, 0.85);
 69 |         outline: 2px dashed black;
 70 |         outline-offset: -10px;
 71 |         z-index: 999;
 72 |       }
 73 |     </style>
 74 |     <div id="main">
 75 |       <paper-material elevation="2">
 76 |         <paper-dialog id="createDialog">
 77 |           <paper-input id="fileInputElement" multiple label="Create File" type="file" on-change="_fileInputEvent"></paper-input>
 78 |           <paper-input id="folderInputElement" label="Folder name"></paper-input>
 79 |           <div class="buttons">
 80 |             <paper-button dialog-dismiss autofocus icon="icons:cancel">Close</paper-icon-button>
 81 |             <paper-button dialog-confirm on-tap="_createDialog">Create</paper-button>
 82 |           </div>
 83 |         </paper-dialog>
 84 |         <paper-toolbar>
 85 |           <paper-icon-button on-tap="goBack" icon="icons:arrow-upward" ></paper-icon-button>
 86 |           <div class="title"> {{ readablePath }} </div>
 87 |           <paper-icon-button onclick="createDialog.open()" icon="icons:add"></paper-icon-button>
 88 |         </paper-toolbar>
 89 |         <div class="files" id="files">
 90 |           <div class="overlay"></div>
 91 |           <template is="dom-repeat" items="{{files}}" as="file">
 92 |             <paper-icon-item on-tap="_fileClicked">
 93 |               <iron-icon icon="{{getFileIcon(file)}}" item-icon></iron-icon>
 94 |               <paper-item-body>
 95 |                 <div>{{file.name}}</div>
 96 |               </paper-item-body>
 97 |               <!--iron-icon icon="{{getStateIcon(file)}}"></iron-icon-->
 98 |               <iron-icon icon="icons:delete" on-tap="_deleteFile"></iron-icon>
 99 |             </paper-icon-item>
100 |             <paper-progress value="{{file.progress}}" min="0" max="110"></paper-progress>
101 |           </template>
102 |         </div>
103 |       </paper-material>
104 |     </div>
105 |   </template>
106 | 
107 |   <script>
108 |     var client = new WebTorrent()
109 |     Polymer({
110 |       is: 'shared-filesystem',
111 | 
112 |       properties: {
113 |         /**
114 |          * `path` is the sub-folder you want to show. Defaults to '/'
115 |          */
116 |         path: {
117 |           type: Array,
118 |           value: [],
119 |           notify: true,
120 |           observer: '_updatePath'
121 |         },
122 |         /**
123 |          * Readable version of `path` in the form '/sub/subsub/'
124 |          */
125 |         readablePath: {
126 |           type: String,
127 |           computed: '_computeReadablePath(path)',
128 |           notify: true
129 |         },
130 |         /**
131 |          * Files in the current `path`
132 |          */
133 |         files: {
134 |           type: Array,
135 |           value: [],
136 |           notify: true,
137 |           readOnly: true
138 |         },
139 |         /**
140 |          * Webrtc room name (required)
141 |          */
142 |         room: String
143 |       },
144 |       _fileInputEvent: function () {
145 |         var input = this.$.fileInputElement.inputElement
146 |         this.createFiles(input.files)
147 |         input.value = ""
148 |         this.$.createDialog.close()
149 |       },
150 |       createFiles: function (files) {
151 |         var self = this
152 |         for(var i=0; i < files.length; i++){
153 |           (function (file) {
154 |             var createFile = function () {
155 |               console.log('Client is seeding ' + torrent.magnetURI)
156 |               self.createFile(file.name, torrent.magnetURI)
157 |             }
158 |             var torrent = this.webtorrent.seed(file)
159 |             // we don't care if its an error (there are some cases when it is expected - when a file is added twice, webtorrent won't create two duplicate torrents)
160 |             torrent.on('metadata', createFile)
161 |             torrent.on('error', function (err) {
162 |               // I expect here that the error is something like 'Cannot add duplicate torrent 2d0e9fe2a9277b88ff9e7ddd0924fc691325a27d'
163 |               // Where 2d0.. is the infoHash. I think this is the only way to retrieve the non-duplicate (maybe also via torrent._debugid?)
164 |               var infoHash = err.message.slice(29)
165 |               var torrent = self.webtorrent.torrents.find(function (torrent) {
166 |                 return torrent.infoHash === infoHash
167 |               })
168 |               if (torrent == null) {
169 |                 throw new Error('This hack does not work anymore, implement something proper!')
170 |               } else {
171 |                 console.log('Client is seeding (case 2) ' + torrent.magnetURI)
172 |                 self.createFile(file.name, torrent.magnetURI)
173 |               }
174 |             })
175 |           }).call(this, files[i])
176 |         }
177 |       },
178 |       _computeReadablePath: function (path) {
179 |         return '/' + path.join('/')
180 |       },
181 |       attached: function() {
182 |         if (this.room == null) {
183 |           throw new Error('You must specify a room property!')
184 |         }
185 |         var self = this
186 |         this.$.createDialog.fitInto = this.$.main
187 |         this.y = null
188 |         this.folder = null
189 |         this._updateFiles = this._updateFiles.bind(this)
190 |         this.createFiles = this.createFiles.bind(this)
191 |         this._unobservePath = Promise.resolve(function () {}) // just mocking function behavior
192 |         Y({
193 |           db: {
194 |             name: 'memory'
195 |           },
196 |           connector: {
197 |             name: 'webrtc',
198 |             room: this.room
199 |           },
200 |           sourceDir: '/components',
201 |           share: {
202 |             root: 'Map'
203 |           }
204 |         }).then(function (y) {
205 |           self.y = y
206 |           self.folder = y.share.root
207 |           self._updatePath()
208 |         })
209 |         this.webtorrent = new WebTorrent()
210 |         DragDrop('#main', this.createFiles)
211 |         window.setInterval(this._updateFiles, 100)
212 |       },
213 |       goBack () {
214 |         if (this.path.length > 0) {
215 |           this.path = this.path.slice(0, -1)
216 |         }
217 |       },
218 |       getFileIcon (file) {
219 |         return file.type === 'file' ? 'icons:description' : 'icons:folder'
220 |       },
221 |       getTorrent: function (magnetURI, f) {
222 |         return this.webtorrent.torrents.find(function (t) {
223 |           return t.magnetURI === magnetURI
224 |         })
225 |       },
226 |       _deleteFile: function (e) {
227 |         this.folder.delete(e.model.file.name)
228 |         e.preventDefault()
229 |         e.stopPropagation()
230 |       },
231 |       _fileClicked: function (e) {
232 |         var f = e.model.file
233 |         if (f.type === 'file') {
234 |           var self = this
235 |           var torrent = this.getTorrent(f.val)
236 |           if (torrent == null) {
237 |             this.webtorrent.add(f.val, function (torrent) {
238 |               self._updateFiles()
239 |               torrent.files[0].getBlobURL(self._updateFiles)
240 |             })
241 |           } else if (torrent.files.length > 0) {
242 |             var location = torrent.files[0].getBlobURL(function (err, url) {
243 |               if (err == null) {
244 |                 // window.location = url
245 |                 console.log('got it', url)
246 |                 var a = document.createElement('a')
247 |                 a.setAttribute('href', url)
248 |                 a.setAttribute('download', torrent.files[0].name)
249 |                 document.body.appendChild(a)
250 |                 a.click()
251 |                 a.remove()
252 |               } else {
253 |                 console.err(err)
254 |               }
255 |             })
256 |           }
257 |         } else {
258 |           this.path = this.path.concat([f.name])
259 |         }
260 |       },
261 |       _updatePath: function () {
262 |         if (this.y != null) {
263 |           var self = this
264 |           this._unobservePath.then(function (del) {del()})
265 |           this._unobservePath = this.y.share.root.observePath(this.path, function (folder) {
266 |             if (folder instanceof Y.Map.typeDefinition.class) {
267 |               self.folder.unobserve(self._updateFiles)
268 |               self.folder = folder
269 |               self.folder.observe(self._updateFiles)
270 |               self._updateFiles()
271 |             }
272 |           })
273 |         }
274 |       },
275 |       _updateFiles: function () {
276 |         if (this.y != null) {
277 |           var self = this
278 |           Promise.all(this.folder.keys()
279 |             .map(function (key) {
280 |               var val = self.folder.get(key)
281 |               if (val instanceof Promise) {
282 |                 return val.then(function (val) {
283 |                   return Promise.resolve({
284 |                     name: key,
285 |                     val: val,
286 |                     type: 'folder',
287 |                     progress: 0
288 |                   })
289 |                 })
290 |               } else {
291 |                 var state
292 |                 var torrent = self.getTorrent(val)
293 |                 if (torrent == null) {
294 |                   state = 'off'
295 |                 } else if (torrent.torrentFileBlobURL != null) {
296 |                   state = 'downloaded'
297 |                 } else {
298 |                   state = 'downloading'
299 |                 }
300 |                 return Promise.resolve({
301 |                   name: key,
302 |                   val: val,
303 |                   type: 'file',
304 |                   progress: torrent != null ? torrent.progress * 100 + 10 : 0
305 |                 })
306 |               }
307 |             })
308 |           ).then(function (files) {
309 |             self._setFiles(files.sort(function (a, b) { return a.name > b.name }))
310 |           })
311 |         }
312 |       },
313 |       getStateIcon: function (f) {
314 |         if (f.type === 'file')
315 |         if (f.type === 'file' && f.progress < 10) {
316 |           return 'icons:cloud-download'
317 |         } else if (f.type === 'file' && f.progress === 110) {
318 |           return 'icons:cloud-done'
319 |         } else {
320 |           return 'icons:watch-later'
321 |         }
322 |       },
323 |       createFile: function (name, magnetURI) {
324 |         this.folder.set(name, magnetURI)
325 |       },
326 |       createFolder: function (name) {
327 |         if (name.length > 0) {
328 |           this.folder.set(name, Y.Map)
329 |         }
330 |       },
331 |       _createDialog: function () {
332 |         var input = this.$.folderInputElement
333 |         this.createFolder(input.value)
334 |         input.value = ''
335 |       },
336 |     });
337 |   </script>
338 | </dom-module>
339 | 


--------------------------------------------------------------------------------