From bda1a15750e4a3bdf4124ababf5dd06a5a8d0640 Mon Sep 17 00:00:00 2001 From: Robin Linus Date: Sat, 26 Dec 2015 13:33:16 +0100 Subject: [PATCH] first working version --- README.md | 42 ++-- app/elements/buddy-finder/buddy-finder.html | 29 +-- .../buddy-finder/personal-avatar.html | 4 +- app/elements/buddy-finder/user-avatar.html | 5 +- app/elements/elements.html | 6 +- app/elements/file-sharing/file-receiver.html | 9 +- app/elements/file-sharing/file-saver.html | 4 - .../file-sharing/file-selection-behavior.html | 7 +- .../p2p-network/connection-wrapper.html | 28 ++- .../p2p-network/file-transfer-protocol.html | 3 + app/elements/p2p-network/p2p-network.html | 35 ++-- app/elements/p2p-network/web-socket.html | 23 +- app/elements/x-cards/x-card.html | 138 ++++++++++++ app/elements/x-cards/x-cards.html | 83 ++++++++ app/index.html | 46 +++- app/manifest.json | 4 +- app/scripts/app.js | 8 +- app/styles/app-theme.html | 3 + app/styles/icons.html | 6 + domains.txt | 27 +++ gulpfile.js | 10 +- index.js | 22 ++ package.json | 10 +- server/ws-server.js | 197 ++++++++++-------- 24 files changed, 543 insertions(+), 206 deletions(-) delete mode 100644 app/elements/file-sharing/file-saver.html create mode 100644 app/elements/x-cards/x-card.html create mode 100644 app/elements/x-cards/x-cards.html create mode 100644 domains.txt create mode 100644 index.js diff --git a/README.md b/README.md index 72eb361..d3f6e4f 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ ![](https://cloud.githubusercontent.com/assets/110953/7877439/6a69d03e-0590-11e5-9fac-c614246606de.png) -## Share With Me +## Snapdrop > A starting point for building web applications with Polymer 1.0 @@ -14,11 +14,11 @@ * [Recipes](/docs/README.md/) for ES2015 support, Polymer performance, using Chrome Dev Editor, Deploying to GitHub Pages, Deploying to Firebase, and Mobile Chrome Apps ### Demo -See latest Share With Me Demo (from master) at http://polymerelements.github.io/polymer-starter-kit +See latest Snapdrop Demo (from master) at http://polymerelements.github.io/polymer-starter-kit ### Tutorials -Check out the Share With Me tutorials on [polymer-project.org](https://polymer-project.org): +Check out the Snapdrop tutorials on [polymer-project.org](https://polymer-project.org): * [Set up the PSK](https://www.polymer-project.org/1.0/docs/start/psk/set-up.html) * [Create a page](https://www.polymer-project.org/1.0/docs/start/psk/create-a-page.html) @@ -26,7 +26,7 @@ Check out the Share With Me tutorials on [polymer-project.org](https://polymer-p ## Getting Started -To take advantage of Share With Me you need to: +To take advantage of Snapdrop you need to: 1. Get a copy of the code. 2. Install the dependencies if you don't already have them. @@ -35,21 +35,21 @@ To take advantage of Share With Me you need to: ### Get the code -[Download](https://github.com/polymerelements/polymer-starter-kit/releases/latest) and extract Share With Me to where you want to work. The project comes in two flavours - Light and Full. +[Download](https://github.com/polymerelements/polymer-starter-kit/releases/latest) and extract Snapdrop to where you want to work. The project comes in two flavours - Light and Full. -**Beginners**: Try Share With Me Light. This doesn't require any extra dependencies nor knowledge of modern front-end tooling. This option is good for prototyping if you haven't build a Polymer app before. +**Beginners**: Try Snapdrop Light. This doesn't require any extra dependencies nor knowledge of modern front-end tooling. This option is good for prototyping if you haven't build a Polymer app before. -**Intermediate - Advanced**: Use the full version of Share With Me. This comes with all the build tools you'll need for testing and productionising your app so it's nice and lean. You'll need to run a few extra commands to install the tools we recommend but it's worth it to make sure your final app is super optimised. +**Intermediate - Advanced**: Use the full version of Snapdrop. This comes with all the build tools you'll need for testing and productionising your app so it's nice and lean. You'll need to run a few extra commands to install the tools we recommend but it's worth it to make sure your final app is super optimised. -:warning: **Important**: Share With Me, and Share With Me Light, both contain dotfiles (files starting with a `.`). If you're copying the contents of the Starter Kit to a new location make sure you bring along these dotfiles as well! On Mac, [enable showing hidden files](http://ianlunn.co.uk/articles/quickly-showhide-hidden-files-mac-os-x-mavericks/), then try extracting/copying Share With Me again. This time the dotfiles needed should be visible so you can copy them over without issues. +:warning: **Important**: Snapdrop, and Snapdrop Light, both contain dotfiles (files starting with a `.`). If you're copying the contents of the Starter Kit to a new location make sure you bring along these dotfiles as well! On Mac, [enable showing hidden files](http://ianlunn.co.uk/articles/quickly-showhide-hidden-files-mac-os-x-mavericks/), then try extracting/copying Snapdrop again. This time the dotfiles needed should be visible so you can copy them over without issues. -Rob Dodson has a fantastic [PolyCast video](https://www.youtube.com/watch?v=xz-yixRxZN8) available that walks through using Share With Me. An [end-to-end with Polymer](https://www.youtube.com/watch?v=1f_Tj_JnStA) and Share With Me talk is also available. +Rob Dodson has a fantastic [PolyCast video](https://www.youtube.com/watch?v=xz-yixRxZN8) available that walks through using Snapdrop. An [end-to-end with Polymer](https://www.youtube.com/watch?v=1f_Tj_JnStA) and Snapdrop talk is also available. ### Install dependencies #### Quick-start (for experienced users) -With Node.js installed, run the following one liner from the root of your Share With Me download: +With Node.js installed, run the following one liner from the root of your Snapdrop download: ```sh npm install -g gulp bower && npm install && bower install @@ -154,7 +154,7 @@ These style files are located in the [styles folder](app/styles/). ## Unit Testing -Web apps built with Share With Me come configured with support for [Web Component Tester](https://github.com/Polymer/web-component-tester) - Polymer's preferred tool for authoring and running unit tests. This makes testing your element based applications a pleasant experience. +Web apps built with Snapdrop come configured with support for [Web Component Tester](https://github.com/Polymer/web-component-tester) - Polymer's preferred tool for authoring and running unit tests. This makes testing your element based applications a pleasant experience. [Read more](https://github.com/Polymer/web-component-tester#html-suites) about using Web Component tester. @@ -181,13 +181,13 @@ Components installed by Bower live in the `app/bower_components` directory. This ## Service Worker -Share With Me offers an optional offline experience thanks to Service Worker and the [Platinum Service Worker elements](https://github.com/PolymerElements/platinum-sw). New to Service Worker? Read the following [introduction](http://www.html5rocks.com/en/tutorials/service-worker/introduction/) to understand how it works. +Snapdrop offers an optional offline experience thanks to Service Worker and the [Platinum Service Worker elements](https://github.com/PolymerElements/platinum-sw). New to Service Worker? Read the following [introduction](http://www.html5rocks.com/en/tutorials/service-worker/introduction/) to understand how it works. Our optional offline setup should work well for relatively simple applications. For more complex apps, we recommend learning how Service Worker works so that you can make the most of the Platinum Service Worker element abstractions. ### Enable Service Worker support? -To enable Service Worker support for Share With Me project use these 3 steps: +To enable Service Worker support for Snapdrop project use these 3 steps: 1. Uncomment Service Worker code in index.html ```HTML @@ -272,16 +272,16 @@ If you find anything to still be stale, you can also try navigating to `chrome:s #### Disable Service Worker support after you enabled it -If for any reason you need to disable Service Worker support after previously enabling it, you can remove it from your Share With Me project using these 4 steps: +If for any reason you need to disable Service Worker support after previously enabling it, you can remove it from your Snapdrop project using these 4 steps: 1. Remove references to the platinum-sw elements from your application [index](https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/index.html). 2. Remove the two Platinum Service Worker elements (platinum-sw/..) in [app/elements/elements.html](https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/elements/elements.html) 3. Remove 'precache' from the list in the 'default' gulp task ([gulpfile.js](https://github.com/PolymerElements/polymer-starter-kit/blob/master/gulpfile.js)) -4. Navigate to `chrome://serviceworker-internals` and unregister any Service Workers registered by Share With Me for your app just in case there's a copy of it cached. +4. Navigate to `chrome://serviceworker-internals` and unregister any Service Workers registered by Snapdrop for your app just in case there's a copy of it cached. ## Yeoman support -[generator-polymer](https://github.com/yeoman/generator-polymer/releases) now includes support for Share With Me out of the box. +[generator-polymer](https://github.com/yeoman/generator-polymer/releases) now includes support for Snapdrop out of the box. ## Frequently Asked Questions @@ -308,7 +308,7 @@ own local setup. ### Where can I find the application layouts from your Google I/O 2015 talk? App layouts live in a separate repository called [app-layout-templates](https://github.com/PolymerElements/app-layout-templates). -You can select a template and copy over the relevant parts you would like to reuse to Share With Me. +You can select a template and copy over the relevant parts you would like to reuse to Snapdrop. You will probably need to change paths to where your Iron and Paper dependencies can be found to get everything working. This can be done by adding them to the [`elements.html`](https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/elements/elements.html) import. @@ -366,14 +366,14 @@ If you are not using the build-blocks, but still wish for additional files (e.g ### I'm finding the installation/tooling here overwhelming. What should I do? -Don't worry! We've got your covered. Share With Me tries to offer everything you need to build and optimize your apps for production, which is why we include the tooling we do. We realise however that our tooling setup may not be for everyone. +Don't worry! We've got your covered. Snapdrop tries to offer everything you need to build and optimize your apps for production, which is why we include the tooling we do. We realise however that our tooling setup may not be for everyone. -If you find that you just want the simplest setup possible, we recommend using Share With Me light, which is available from the [Releases](https://github.com/PolymerElements/polymer-starter-kit/releases) page. This takes next to no time to setup. +If you find that you just want the simplest setup possible, we recommend using Snapdrop light, which is available from the [Releases](https://github.com/PolymerElements/polymer-starter-kit/releases) page. This takes next to no time to setup. ## Licensing -Like other Google projects, Share With Me includes Google license headers at the top of several of our source files. Google's open-source licensing requires that this header be kept in place (sorry!), however we acknowledge that you may need to add your own licensing to files you modify. This can be done by appending your own extensions to these headers. +Like other Google projects, Snapdrop includes Google license headers at the top of several of our source files. Google's open-source licensing requires that this header be kept in place (sorry!), however we acknowledge that you may need to add your own licensing to files you modify. This can be done by appending your own extensions to these headers. ## Contributing -Share With Me is a new project and is an ongoing effort by the Web Component community. We welcome your bug reports, PRs for improvements, docs and anything you think would improve the experience for other Polymer developers. +Snapdrop is a new project and is an ongoing effort by the Web Component community. We welcome your bug reports, PRs for improvements, docs and anything you think would improve the experience for other Polymer developers. diff --git a/app/elements/buddy-finder/buddy-finder.html b/app/elements/buddy-finder/buddy-finder.html index 4af193c..948994e 100644 --- a/app/elements/buddy-finder/buddy-finder.html +++ b/app/elements/buddy-finder/buddy-finder.html @@ -52,12 +52,10 @@ -
- Open this page on another device - to share files. +
+ Open this page on other devices
to send files.
- \ No newline at end of file diff --git a/app/elements/file-sharing/file-selection-behavior.html b/app/elements/file-sharing/file-selection-behavior.html index 99ff34b..7f3167d 100644 --- a/app/elements/file-sharing/file-selection-behavior.html +++ b/app/elements/file-sharing/file-selection-behavior.html @@ -7,8 +7,11 @@ Chat.FileSelectionBehavior = { console.log('no files selected...'); return; } - for (var i = 0; i < files.length; i++) { - var file = files[i]; + this._fileSelected(files[0]); //single select + //files.forEach(this._fileSelected.bind(this)); //multi-select + }, + _fileSelected: function(file) { + if (file) { this.fire('file-selected', { file: file, name: file.name diff --git a/app/elements/p2p-network/connection-wrapper.html b/app/elements/p2p-network/connection-wrapper.html index b54e20c..4fd7582 100644 --- a/app/elements/p2p-network/connection-wrapper.html +++ b/app/elements/p2p-network/connection-wrapper.html @@ -8,27 +8,17 @@ diff --git a/app/elements/p2p-network/file-transfer-protocol.html b/app/elements/p2p-network/file-transfer-protocol.html index e8d893f..3a25e4c 100644 --- a/app/elements/p2p-network/file-transfer-protocol.html +++ b/app/elements/p2p-network/file-transfer-protocol.html @@ -22,6 +22,9 @@ Chat.FileTransferProtocol = { console.log('FTP received sysMsg:', msg); switch (msg.type) { + case 'handshake': + this._onHandshake(msg); + break; case 'offer': this._onOffered(msg); break; diff --git a/app/elements/p2p-network/p2p-network.html b/app/elements/p2p-network/p2p-network.html index a26ae8b..f2c4df2 100644 --- a/app/elements/p2p-network/p2p-network.html +++ b/app/elements/p2p-network/p2p-network.html @@ -9,8 +9,7 @@ is: 'p2p-network', properties: { me: { - type: String, - notify: true, + type: String } }, attached: function() { @@ -22,16 +21,24 @@ this._peer.destroy(); } }.bind(this); - this._initialize(); }, - _initialize: function() { - var options = { - host: 'yawim.com', - port: 443, - path: 'peerjs', - secure: true - }; - this._peer = new Peer(this.me,options); + initialize: function() { + var options; + if (window.debug) { + options = { + host: window.location.hostname, + port: 3002, + path: 'peerjs' + }; + } else { + options = { + host: 'snapdrop.net', + port: 443, + path: 'peerjs', + secure: true + }; + } + this._peer = new Peer(this.me, options); this._peer.on('open', function(id) { console.log('My peer ID is: ' + id); this.set('me', id); @@ -53,12 +60,10 @@ if (err.message.indexOf('Lost connection to server') > -1) { this._peer.destroy(); this.set('me', this.me); - this._initialize(); + this.async(this._initialize, 3000); return; } }.bind(this)); - - }, connect: function(c) { @@ -140,7 +145,7 @@ conns.forEach(function(conn) { if (conn.label === 'file') { conn.send(file); - console.log('file send'); + console.log('file send via WebRTC'); } }.bind(this)); } diff --git a/app/elements/p2p-network/web-socket.html b/app/elements/p2p-network/web-socket.html index 23bdb7e..f90962d 100644 --- a/app/elements/p2p-network/web-socket.html +++ b/app/elements/p2p-network/web-socket.html @@ -15,13 +15,13 @@ this.init(); }, init: function() { - var websocketUrl = (window.location.protocol === 'https:' ? 'wss://' : 'ws://') + document.location.hostname + ':9001'; + var websocketUrl = (window.debug ? 'ws://' + window.location.hostname + ':3002' : 'wss://snapdrop.net') + '/binary'; this.client = new BinaryClient(websocketUrl); this.client.on('stream', function(stream, meta) { // collect stream data var parts = []; stream.on('data', function(data) { - console.log('part received', meta, data); + //console.log('part received', meta, data); if (data.isSystemEvent) { if (meta) { data.from = meta.from; @@ -45,22 +45,22 @@ }.bind(this)); }.bind(this)); this.client.on('open', function(e) { + this.cancelAsync(this.reconnectTimer); console.log(e); this.client.send({}, { - handshake: this.me + serverMsg: 'rtc-support', + rtc: window.webRTCSupported }); }.bind(this)); this.client.on('error', function(e) { - console.log(e); - }); + this._reconnect(e); + }.bind(this)); this.client.on('close', function(e) { - console.log(e); - //try to reconnect after 3s - this.async(this.init, 3000); + this._reconnect(e); }.bind(this)); }, _sendFile: function(toPeer, file) { - console.log('send file!', file); + console.log('send file via WebSocket', file); this.client.send(file.file, { name: file.file.name, type: file.file.type, @@ -76,6 +76,11 @@ this.client.send(event, { toPeer: toPeer }); + }, + _reconnect: function(e) { + console.log('disconnected', e); + //try to reconnect after 3s + this.reconnectTimer = this.async(this.init, 3000); } }); diff --git a/app/elements/x-cards/x-card.html b/app/elements/x-cards/x-card.html new file mode 100644 index 0000000..b71a816 --- /dev/null +++ b/app/elements/x-cards/x-card.html @@ -0,0 +1,138 @@ + + + + + + + + + diff --git a/app/elements/x-cards/x-cards.html b/app/elements/x-cards/x-cards.html new file mode 100644 index 0000000..1b38cdd --- /dev/null +++ b/app/elements/x-cards/x-cards.html @@ -0,0 +1,83 @@ + + + + + + + + diff --git a/app/index.html b/app/index.html index fa615be..0e45892 100644 --- a/app/index.html +++ b/app/index.html @@ -3,10 +3,11 @@ - + - - SnapDrop! + + Snapdrop + @@ -18,10 +19,12 @@ + + - + @@ -29,25 +32,34 @@ - + - +