Merge branch 'master' into master

README.md

@@ -5,13 +5,16 @@
 
 #### Snapdrop is built with the following awesome technologies:
 * Vanilla HTML5 / ES6 / CSS3  
-* Progressive Web App
+* [Progressive Web App](https://de.wikipedia.org/wiki/Progressive_Web_App)
 * [WebRTC](http://webrtc.org/)
 * [WebSockets](http://www.websocket.org/)
 * [NodeJS](https://nodejs.org/en/)
-* [Material Design](https://material.google.com/)
 
-> If you want to self-host your own instance, [you can with docker.](/docs/local-dev.md)
+
+> Have any questions? You can read our [FAQ](/docs/faq.md).
+
+> If you want to self-host your own instance, [you can with docker](/docs/local-dev.md).
+
 
 ## Support the Snapdrop Community
 Snapdrop is free. Still, we have to pay for the server. If you want to contribute, please use PayPal:
@@ -27,15 +30,4 @@ Alternatively, you can become a [Github Sponsor](https://github.com/sponsors/Rob
 Thanks a lot for supporting free and open software!
 
 
-> Have any questions? You can read our [FAQ](/docs/faq.md)
-
-
-
-## Apps
-1. [Snapdrop PWA](/docs/faq.md) <!-- Don't know how to do a direct link -->
-
- 1. [Snapdrop Desktop App](https://github.com/infin1tyy/snapdrop-desktop) built on top of Electron. (Thanks to [Infin1tyy!](https://github.com/infin1tyy/)).
-
- 1. Feel free to make one :)
-
 

client/index.html

@@ -59,16 +59,16 @@
     <!-- Peers -->
     <x-peers class="center"></x-peers>
     <x-no-peers>
-        <h2>Open Snapdrop on other devices to send files.</h2>
+        <h2>Open Snapdrop on other devices to send files</h2>
     </x-no-peers>
-    <x-instructions desktop="Click to send files or right click to send a message." mobile="Tap to send files or long tap to send a message."></x-instructions>
+    <x-instructions desktop="Click to send files or right click to send a message" mobile="Tap to send files or long tap to send a message"></x-instructions>
     <!-- Footer -->
     <footer class="column">
         <svg class="icon logo">
             <use xlink:href="#wifi-tethering" />
         </svg>
-        <div id="displayName">The easiest way to transfer data across devices.</div>
-        <div class="font-body2">Allow me to be discovered by: Everyone in this network.</div>
+        <div id="displayName" placeholder="The easiest way to transfer data across devices"></div>
+        <div class="font-body2">You can be discovered by everyone on this network</div>
     </footer>
     <!-- Receive Dialog -->
     <x-dialog id="receiveDialog">
@@ -90,7 +90,7 @@
             <x-background class="full center">
                 <x-paper shadow="2">
                     <h3>Send a Message</h3>
-                    <input id="textInput" placeholder="Send a message" autocomplete="off" autofocus>
+                    <textarea id="textInput" placeholder="Send a message" autocomplete="off" autofocus></textarea>
                     <div class="row-reverse">
                         <button class="button" type="submit" close>Send</button>
                         <a class="button" close>Cancel</a>
@@ -130,7 +130,7 @@
                 <use xlink:href="#wifi-tethering" />
             </svg>
             <h1>Snapdrop</h1>
-            <div class="font-subheading">The easiest way to transfer files across devices.</div>
+            <div class="font-subheading">The easiest way to transfer files across devices</div>
             <div class="row">
                 <a class="icon-button" target="_blank" href="https://github.com/RobinLinus/snapdrop" title="Snapdrop on Github" rel="noreferrer">
                     <svg class="icon">
@@ -147,7 +147,7 @@
                         <use xlink:href="#twitter" />
                     </svg>
                 </a>
-                <a class="icon-button" target="_blank" href="https://github.com/RobinLinus/snapdrop/docs/faq.md" title="Frequently asked questions" rel="noreferrer">
+                <a class="icon-button" target="_blank" href="https://github.com/RobinLinus/snapdrop/blob/master/docs/faq.md" title="Frequently asked questions" rel="noreferrer">
                     <svg class="icon">
                         <use xlink:href="#help-outline" />
                     </svg>
@@ -214,7 +214,7 @@
     <noscript>
         <x-noscript class="full center column">
             <h1>Enable Javascript</h1>
-            <h3>Snapdrop works only with Javascript.</h3>
+            <h3>Snapdrop works only with Javascript</h3>
         </x-noscript>
         <style>
         x-noscript {
@@ -228,4 +228,4 @@
         }
         </style>
     </noscript>
-</body>
+</body>

client/scripts/network.js

@@ -41,8 +41,8 @@ class ServerConnection {
             case 'ping':
                 this.send({ type: 'pong' });
                 break;
-            case 'displayName':
-                Events.fire('displayName', msg);
+            case 'display-name':
+                Events.fire('display-name', msg);
                 break;
             default:
                 console.error('WS: unkown message type', msg);

client/scripts/ui.js

@@ -6,8 +6,8 @@ window.isProductionEnvironment = !window.location.host.startsWith('localhost');
 window.iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
 
 // set display name
-Events.on('displayName', e => {
-    $("displayName").textContent = "You are known as " + e.detail.message;
+Events.on('display-name', e => {
+    $('displayName').textContent = 'You are known as ' + e.detail.message;
 });
 
 class PeersUI {
@@ -70,7 +70,7 @@ class PeerUI {
 
     html() {
         return `   
-            <label class="column center">
+            <label class="column center" title="Click to send files or right click to send a text">
                 <input type="file" multiple>
                 <x-icon shadow="1">
                     <svg class="icon"><use xlink:href="#"/></svg>
@@ -473,7 +473,9 @@ class WebShareTargetUI {
 
         let shareTargetText = title ? title : '';
         shareTargetText += text ? shareTargetText ? ' ' + text : text : '';
-        shareTargetText += url ? shareTargetText ? ' ' + url : url : '';
+        
+        if(url) shareTargetText = url; // We share only the Link - no text. Because link-only text becomes clickable.
+
         if (!shareTargetText) return;
         window.shareTargetText = shareTargetText;
         history.pushState({}, 'URL Rewrite', '/');

client/styles.css

@@ -261,7 +261,7 @@ x-peer[transfer] x-icon {
 }
 
 x-peer[transfer] .status:before {
-    content: 'Transfering...';
+    content: 'Transferring...';
 }
 
 x-peer x-icon {
@@ -292,6 +292,7 @@ footer {
     right: 0;
     align-items: center;
     padding: 0 0 16px 0;
+    text-align: center;
 }
 
 footer .logo {
@@ -365,9 +366,22 @@ x-dialog a{
     -webkit-user-select: all;
     -moz-user-select: all;
     user-select: all;
+    white-space: pre;
 }
 
+#receiveTextDialog #text a {
+    cursor: pointer;
+}
 
+#receiveTextDialog #text a:hover {
+    text-decoration: underline;
+}
+
+#receiveTextDialog h3{
+    /* Select the received text when double-clicking the dialog */
+    user-select: none;
+    pointer-events: none;
+}
 
 /* Button */
 
@@ -449,16 +463,19 @@ button::-moz-focus-inner {
 
 /* Text Input */
 
-input {
+input,
+textarea {
     width: 100%;
     box-sizing: border-box;
     border: none;
     outline: none;
     padding: 16px 24px;
-    border-radius: 50px;
+    border-radius: 16px;
     margin: 8px 0;
     line-height: 16px;
     font-size: 14px;
+    font-family: inherit;
+    resize: none;
 }
 
 
@@ -549,6 +566,11 @@ input {
 }
 
 
+/* Generic placeholder */
+[placeholder]:empty:before {
+    content: attr(placeholder);
+}
+
 /* Toast */
 
 .toast-container {
@@ -590,6 +612,7 @@ x-instructions {
     opacity: 0.5;
     transition: opacity 300ms;
     z-index: -1;
+    text-align: center;
 }
 
 x-instructions:before {

docs/faq.md

@@ -32,4 +32,17 @@ We are not trying to optimize for some edge-cases. We are optimizing the user fl
 * Fix bugs and make a pull request. 
 * Do security analysis and suggestions
 
-[< Back](/README.md)
+
+
+## Apps
+1. [Snapdrop PWA](/docs/faq.md) <!-- Don't know how to do a direct link -->
+
+1. [Snapdrop Desktop App](https://github.com/infin1tyy/snapdrop-desktop) built on top of Electron. (Thanks to [Infin1tyy!](https://github.com/infin1tyy/)).
+
+1. [Snapdrop Android App](https://github.com/fm-sys/snapdrop-android) allows you to also send files directly from other apps via the share action.
+
+1. Feel free to make one :)
+
+
+
+[< Back](/README.md)

docs/local-dev.md

@@ -9,12 +9,15 @@ Then, clone the repository:
     cd snapdrop
     docker-compose up -d
 ```
+Now point your browser to `http://localhost:8080`.
+
+- To restart the containers run `docker-compose restart`.
+- To stop the containers run `docker-compose stop`.
+- To display the nodejs logs for debugging run `docker logs snapdrop_node_1`.
+
 
-To restart the containers run `docker-compose restart`.
-To stop the containers run `docker-compose stop`.
 
 
-Now point your browser to `http://localhost:8080`.
 
 ## Testing PWA related features
 PWAs require that the app is served under a correctly set up and trusted TLS endpoint.
@@ -41,4 +44,4 @@ By default, the server listens on port 3000.
 
 For an nginx configuration example, see `docker/nginx/default.conf`.
 
-[< Back](/README.md)
+[< Back](/README.md)

server/index.js

@@ -1,5 +1,4 @@
 const parser = require('ua-parser-js');
-const { uniqueNamesGenerator, animals, colors } = require('unique-names-generator');
 
 class SnapdropServer {
 
@@ -20,7 +19,7 @@ class SnapdropServer {
         this._keepAlive(peer);
 
         // send displayName
-        this._send(peer, { type: 'displayName', message: peer.name.displayName });
+        this._send(peer, { type: 'display-name', message: peer.name.displayName });
     }
 
     _onHeaders(headers, response) {
@@ -36,7 +35,7 @@ class SnapdropServer {
         } catch (e) {
             return; // TODO: handle malformed JSON
         }
-        
+
         switch (message.type) {
             case 'disconnect':
                 this._leaveRoom(sender);
@@ -186,13 +185,22 @@ class Peer {
     }
 
     _setName(req) {
-        var ua = parser(req.headers['user-agent']);
+        let ua = parser(req.headers['user-agent']);
+
+
+        let displayName = ua.os.name.replace('Mac OS', 'Mac') + ' ';
+        if (ua.device.model) {
+            displayName += ua.device.model;
+        } else {
+            displayName += ua.browser.name;
+        }
+
         this.name = {
             model: ua.device.model,
             os: ua.os.name,
             browser: ua.browser.name,
             type: ua.device.type,
-            displayName: uniqueNamesGenerator({ length: 2, separator: ' ', dictionaries: [colors, animals], style: 'capital' })
+            displayName: displayName
         };
     }
 
@@ -231,4 +239,4 @@ class Peer {
     };
 }
 
-const server = new SnapdropServer(process.env.PORT || 3000);
+const server = new SnapdropServer(process.env.PORT || 3000);