From 7d4e67b8793762e9a581b3685ea7556fb5abe99d Mon Sep 17 00:00:00 2001 From: Giorgio Bellisario <72039923+Bellisario@users.noreply.github.com> Date: Thu, 13 Oct 2022 17:55:49 +0200 Subject: [PATCH] JS, HTML and CSS fmt + NPM lockfile version bump Formatted all JS, CSS and HTML code. Also updated server lockfile version (package-lock.json) from 1 to 2. --- client/index.html | 501 +++++++++++++++++++++++--------------- client/scripts/network.js | 8 +- client/scripts/theme.js | 12 +- client/scripts/ui.js | 20 +- client/service-worker.js | 18 +- client/styles.css | 8 +- server/index.js | 30 +-- server/package-lock.json | 53 +++- 8 files changed, 409 insertions(+), 241 deletions(-) diff --git a/client/index.html b/client/index.html index e4752dbe..5eb40ec5 100644 --- a/client/index.html +++ b/client/index.html @@ -1,215 +1,333 @@ - - - - + + + Snapdrop - - - - - + + + + + - - - - - - - - - - - + + + + + + + + + + + - - - - - - - + + + + + + + - - - + + + - +
- - - - - - - - - - - - + + + + + + + + + + + +
-

Open Snapdrop on other devices to send files

+

Open Snapdrop on other devices to send files

 - + - - -

File Received

-
Filename
-
- -
- - -
-
- Save - -
- - + + +

File Received

+
Filename
+
+ +
+ + +
+
+ Save + +
+ + -
- - -

Send a Message

-
-
- - Cancel -
- - -
+
+ + +

Send a Message

+
+
+ + Cancel +
+ + +
- - -

Message Received

-
-
- - -
- - + + +

Message Received

+
+
+ + +
+ +
- File Transfer Completed + File Transfer Completed
-
-
- - - - - -
-

Snapdrop

-
The easiest way to transfer files across devices
-
- - - - - - - - - - - - - - - - - - - - -
-
- + + + +

Snapdrop

+
+ The easiest way to transfer files across devices +
+
+ + + + + + + + + + + + + + + + + + + + +
+ + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -218,25 +336,26 @@

Snapdrop

- + + diff --git a/client/scripts/network.js b/client/scripts/network.js index 7f50e679..3ff736af 100644 --- a/client/scripts/network.js +++ b/client/scripts/network.js @@ -186,8 +186,8 @@ class Peer { } _onChunkReceived(chunk) { - if(!chunk.byteLength) return; - + if (!chunk.byteLength) return; + this._digester.unchunk(chunk); const progress = this._digester.progress; this._onDownloadProgress(progress); @@ -254,7 +254,7 @@ class RTCPeer extends Peer { } _openChannel() { - const channel = this._conn.createDataChannel('data-channel', { + const channel = this._conn.createDataChannel('data-channel', { ordered: true, reliable: true // Obsolete. See https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel/reliable }); @@ -280,7 +280,7 @@ class RTCPeer extends Peer { if (message.sdp) { this._conn.setRemoteDescription(new RTCSessionDescription(message.sdp)) - .then( _ => { + .then(_ => { if (message.sdp.type === 'offer') { return this._conn.createAnswer() .then(d => this._onDescription(d)); diff --git a/client/scripts/theme.js b/client/scripts/theme.js index e452ffb7..0e3ad5a3 100644 --- a/client/scripts/theme.js +++ b/client/scripts/theme.js @@ -1,24 +1,24 @@ -(function(){ - +(function () { + // Select the button const btnTheme = document.getElementById('theme'); // Check for dark mode preference at the OS level const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)'); - 
 + // Get the user's theme preference from local storage, if it's available const currentTheme = localStorage.getItem('theme'); // If the user's preference in localStorage is dark... if (currentTheme == 'dark') { // ...let's toggle the .dark-theme class on the body document.body.classList.toggle('dark-theme'); - // Otherwise, if the user's preference in localStorage is light... + // Otherwise, if the user's preference in localStorage is light... } else if (currentTheme == 'light') { // ...let's toggle the .light-theme class on the body document.body.classList.toggle('light-theme'); } - 
 + // Listen for a click on the button - btnTheme.addEventListener('click', function() { + btnTheme.addEventListener('click', function () { // If the user's OS setting is dark and matches our .dark-theme class... if (prefersDarkScheme.matches) { // ...then toggle the light mode class diff --git a/client/scripts/ui.js b/client/scripts/ui.js index 426bbc9c..c9b7d2bb 100644 --- a/client/scripts/ui.js +++ b/client/scripts/ui.js @@ -262,11 +262,11 @@ class ReceiveDialog extends Dialog { $a.href = url; $a.download = file.name; - if(this._autoDownload()){ + if (this._autoDownload()) { $a.click() return } - if(file.mime.split('/')[0] === 'image'){ + if (file.mime.split('/')[0] === 'image') { console.log('the file is image'); this.$el.querySelector('.preview').style.visibility = 'inherit'; this.$el.querySelector("#img-preview").src = url; @@ -304,7 +304,7 @@ class ReceiveDialog extends Dialog { } - _autoDownload(){ + _autoDownload() { return !this.$el.querySelector('#autoDownload').checked } } @@ -435,12 +435,12 @@ class Notifications { } // Notification is persistent on Android. We have to close it manually - const visibilitychangeHandler = () => { - if (document.visibilityState === 'visible') { + const visibilitychangeHandler = () => { + if (document.visibilityState === 'visible') { notification.close(); Events.off('visibilitychange', visibilitychangeHandler); - } - }; + } + }; Events.on('visibilitychange', visibilitychangeHandler); return notification; @@ -516,7 +516,7 @@ class WebShareTargetUI { let shareTargetText = title ? title : ''; shareTargetText += text ? shareTargetText ? ' ' + text : text : ''; - if(url) shareTargetText = url; // We share only the Link - no text. Because link-only text becomes clickable. + if (url) shareTargetText = url; // We share only the Link - no text. Because link-only text becomes clickable. if (!shareTargetText) return; window.shareTargetText = shareTargetText; @@ -617,13 +617,13 @@ Events.on('load', () => { function animate() { if (loading || step % dw < dw - 5) { - requestAnimationFrame(function() { + requestAnimationFrame(function () { drawCircles(); animate(); }); } } - window.animateBackground = function(l) { + window.animateBackground = function (l) { loading = l; animate(); }; diff --git a/client/service-worker.js b/client/service-worker.js index 9dae0801..53e3466a 100644 --- a/client/service-worker.js +++ b/client/service-worker.js @@ -11,11 +11,11 @@ var urlsToCache = [ 'images/favicon-96x96.png' ]; -self.addEventListener('install', function(event) { +self.addEventListener('install', function (event) { // Perform install steps event.waitUntil( caches.open(CACHE_NAME) - .then(function(cache) { + .then(function (cache) { console.log('Opened cache'); return cache.addAll(urlsToCache); }) @@ -23,32 +23,32 @@ self.addEventListener('install', function(event) { }); -self.addEventListener('fetch', function(event) { +self.addEventListener('fetch', function (event) { event.respondWith( caches.match(event.request) - .then(function(response) { + .then(function (response) { // Cache hit - return response if (response) { return response; } return fetch(event.request); } - ) + ) ); }); -self.addEventListener('activate', function(event) { +self.addEventListener('activate', function (event) { console.log('Updating Service Worker...') event.waitUntil( - caches.keys().then(function(cacheNames) { + caches.keys().then(function (cacheNames) { return Promise.all( - cacheNames.filter(function(cacheName) { + cacheNames.filter(function (cacheName) { // Return true if you want to remove this cache, // but remember that caches are shared across // the whole origin return true - }).map(function(cacheName) { + }).map(function (cacheName) { return caches.delete(cacheName); }) ); diff --git a/client/styles.css b/client/styles.css index 0a9aca98..ea3c8b7f 100644 --- a/client/styles.css +++ b/client/styles.css @@ -674,7 +674,7 @@ screen and (min-width: 1100px) { */ @supports (-webkit-overflow-scrolling: touch) { - + html { position: fixed; } @@ -717,8 +717,9 @@ x-dialog x-paper { color: var(--text-color); background-color: var(--bg-color-secondary); } + /* Image Preview */ -#img-preview{ +#img-preview { max-height: 50vh; margin: auto; display: block; @@ -753,5 +754,4 @@ x-dialog x-paper { body { overflow: hidden; } -} - +} \ No newline at end of file diff --git a/server/index.js b/server/index.js index c47feb1e..7e3182de 100644 --- a/server/index.js +++ b/server/index.js @@ -1,14 +1,14 @@ var process = require('process') // Handle SIGINT process.on('SIGINT', () => { - console.info("SIGINT Received, exiting...") - process.exit(0) + console.info("SIGINT Received, exiting...") + process.exit(0) }) // Handle SIGTERM process.on('SIGTERM', () => { - console.info("SIGTERM Received, exiting...") - process.exit(0) + console.info("SIGTERM Received, exiting...") + process.exit(0) }) const parser = require('ua-parser-js'); @@ -210,18 +210,18 @@ class Peer { let deviceName = ''; - + if (ua.os && ua.os.name) { deviceName = ua.os.name.replace('Mac OS', 'Mac') + ' '; } - + if (ua.device.model) { deviceName += ua.device.model; } else { deviceName += ua.browser.name; } - if(!deviceName) + if (!deviceName) deviceName = 'Unknown Device'; const displayName = uniqueNamesGenerator({ @@ -278,15 +278,15 @@ class Peer { } Object.defineProperty(String.prototype, 'hashCode', { - value: function() { - var hash = 0, i, chr; - for (i = 0; i < this.length; i++) { - chr = this.charCodeAt(i); - hash = ((hash << 5) - hash) + chr; - hash |= 0; // Convert to 32bit integer + value: function () { + var hash = 0, i, chr; + for (i = 0; i < this.length; i++) { + chr = this.charCodeAt(i); + hash = ((hash << 5) - hash) + chr; + hash |= 0; // Convert to 32bit integer + } + return hash; } - return hash; - } }); const server = new SnapdropServer(process.env.PORT || 3000); diff --git a/server/package-lock.json b/server/package-lock.json index 1f461265..ebf046f4 100644 --- a/server/package-lock.json +++ b/server/package-lock.json @@ -1,8 +1,56 @@ { "name": "snapdrop", "version": "1.0.0", - "lockfileVersion": 1, + "lockfileVersion": 2, "requires": true, + "packages": { + "": { + "name": "snapdrop", + "version": "1.0.0", + "license": "ISC", + "dependencies": { + "ua-parser-js": "^0.7.24", + "unique-names-generator": "^4.3.0", + "ws": "^7.4.6" + } + }, + "node_modules/ua-parser-js": { + "version": "0.7.24", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.24.tgz", + "integrity": "sha512-yo+miGzQx5gakzVK3QFfN0/L9uVhosXBBO7qmnk7c2iw1IhL212wfA3zbnI54B0obGwC/5NWub/iT9sReMx+Fw==", + "engines": { + "node": "*" + } + }, + "node_modules/unique-names-generator": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/unique-names-generator/-/unique-names-generator-4.3.0.tgz", + "integrity": "sha512-uNX6jVFjBXfZtsc7B8jVPJ3QdfCF/Sjde4gxsy3rNQmHuWGFarnU7IFGdxZKJ4h4uRjANQc6rG7GiGolRW9fgA==", + "engines": { + "node": ">=6" + } + }, + "node_modules/ws": { + "version": "7.4.6", + "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz", + "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==", + "engines": { + "node": ">=8.3.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": "^5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + } + }, "dependencies": { "ua-parser-js": { "version": "0.7.24", @@ -17,7 +65,8 @@ "ws": { "version": "7.4.6", "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz", - "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==" + "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==", + "requires": {} } } }