From e457caa0c14ae5e7f33414d20ebc2c16618d2584 Mon Sep 17 00:00:00 2001 From: schlagmichdoch Date: Sat, 1 Oct 2022 12:36:30 +0200 Subject: [PATCH 1/5] fix wrong RTCPeer.config syntax --- client/scripts/network.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/scripts/network.js b/client/scripts/network.js index e9a03273..f43561c0 100644 --- a/client/scripts/network.js +++ b/client/scripts/network.js @@ -570,7 +570,7 @@ class Events { RTCPeer.config = { 'sdpSemantics': 'unified-plan', - 'iceServers': [ - urls: 'stun:stun.l.google.com:19302' - ] + 'iceServers': [{ + urls: 'stun:stun.l.google.com:19302' + }] } From d575375d14a080cffeb9966219c7d7aab07543f5 Mon Sep 17 00:00:00 2001 From: schlagmichdoch Date: Mon, 3 Oct 2022 12:03:03 +0200 Subject: [PATCH 2/5] implement indexedDB in new class PersistentStorage to make rooms persistent for PWAs --- client/scripts/ui.js | 90 +++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 85 insertions(+), 5 deletions(-) diff --git a/client/scripts/ui.js b/client/scripts/ui.js index ffa94fcc..a62ff01a 100644 --- a/client/scripts/ui.js +++ b/client/scripts/ui.js @@ -332,13 +332,23 @@ class JoinRoomDialog extends Dialog { this.$text = this.$el.querySelector('#roomInput'); const button = this.$el.querySelector('form'); button.addEventListener('submit', e => this._join(e)); + + //retrieve roomId from db and write to sessionStorage if not null/undefined + PersistentStorage.get('roomId').then((roomId) => { + if (roomId && roomId !== sessionStorage.getItem('roomId')) { + sessionStorage.setItem('roomId', roomId); + location.reload() + } + }) } _joinExit(e) { e.preventDefault(); - if (sessionStorage.getItem("roomId")) { - sessionStorage.removeItem("roomId"); - location.reload(); + if (sessionStorage.getItem('roomId')) { + sessionStorage.removeItem('roomId'); + PersistentStorage.delete('roomId').then(() => { + location.reload(); + }); }else { this.show(); } @@ -350,12 +360,16 @@ class JoinRoomDialog extends Dialog { if (inputNum.length >= 6) { inputNum = inputNum.substring(0,6); sessionStorage.setItem("roomId", inputNum); - location.reload(); + PersistentStorage.set("roomId", inputNum).then(() => { + location.reload(); + }); } else { inputNum = new ServerConnection()._randomNum(6); sessionStorage.setItem("roomId", inputNum); - location.reload(); + PersistentStorage.set("roomId", inputNum).then(() => { + location.reload(); + }); } } } @@ -635,6 +649,71 @@ class WebShareTargetUI { } } +class PersistentStorage { + constructor() { + const DBOpenRequest = window.indexedDB.open('snapdrop_store'); + DBOpenRequest.onerror = (e) => { + console.log('Error initializing database: '); + console.log(e) + }; + DBOpenRequest.onsuccess = () => { + console.log('Database initialised.'); + }; + DBOpenRequest.onupgradeneeded = (e) => { + const db = e.target.result; + db.onerror = (e) => console.log('Error loading database: ' + e); + const objectStore = db.createObjectStore('keyval'); + } + } + + static set(key, value) { + return new Promise(resolve => { + const DBOpenRequest = window.indexedDB.open('snapdrop_store'); + DBOpenRequest.onsuccess = (e) => { + const db = e.target.result; + const transaction = db.transaction('keyval', 'readwrite'); + const objectStore = transaction.objectStore('keyval'); + const objectStoreRequest = objectStore.add(value, key); + objectStoreRequest.onsuccess = (event) => { + console.log(`Request successful. Added key-pair: ${key} - ${value}`); + resolve(); + }; + } + }) + } + + static get(key) { + return new Promise(resolve => { + const DBOpenRequest = window.indexedDB.open('snapdrop_store'); + DBOpenRequest.onsuccess = (e) => { + const db = e.target.result; + const transaction = db.transaction('keyval', 'readwrite'); + const objectStore = transaction.objectStore('keyval'); + const objectStoreRequest = objectStore.get(key); + objectStoreRequest.onsuccess = (event) => { + console.log(`Request successful. Retrieved key-pair: ${key} - ${objectStoreRequest.result}`); + resolve(objectStoreRequest.result); + }; + } + }); + } + + static delete(key) { + return new Promise(resolve => { + const DBOpenRequest = window.indexedDB.open('snapdrop_store'); + DBOpenRequest.onsuccess = (e) => { + const db = e.target.result; + const transaction = db.transaction('keyval', 'readwrite'); + const objectStore = transaction.objectStore('keyval'); + const objectStoreRequest = objectStore.delete(key); + objectStoreRequest.onsuccess = (event) => { + console.log(`Request successful. Deleted key: ${key}`); + resolve(); + }; + } + }) + } +} class Snapdrop { constructor() { @@ -655,6 +734,7 @@ class Snapdrop { } } +const persistentStorage = new PersistentStorage(); const snapdrop = new Snapdrop(); if ('serviceWorker' in navigator) { From 7721f9d98377cbb38b0a0af950a8ac007ce6f80a Mon Sep 17 00:00:00 2001 From: schlagmichdoch Date: Mon, 3 Oct 2022 12:39:06 +0200 Subject: [PATCH 3/5] only write roomId from indexedDB to sessionStorage if roomId in sessionStorage is empty or undefined --- client/scripts/ui.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/scripts/ui.js b/client/scripts/ui.js index a62ff01a..8b315536 100644 --- a/client/scripts/ui.js +++ b/client/scripts/ui.js @@ -335,7 +335,7 @@ class JoinRoomDialog extends Dialog { //retrieve roomId from db and write to sessionStorage if not null/undefined PersistentStorage.get('roomId').then((roomId) => { - if (roomId && roomId !== sessionStorage.getItem('roomId')) { + if (roomId && !sessionStorage.getItem('roomId')) { sessionStorage.setItem('roomId', roomId); location.reload() } From 737f7b164aca2981b6008c9a9942fe7fa5e769a0 Mon Sep 17 00:00:00 2001 From: schlagmichdoch Date: Mon, 3 Oct 2022 14:55:15 +0200 Subject: [PATCH 4/5] fix indexedDB error: use insert or update method instead of insert only method on PersistentStorage.set(key, value) --- client/scripts/ui.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/scripts/ui.js b/client/scripts/ui.js index 8b315536..b62e7bdb 100644 --- a/client/scripts/ui.js +++ b/client/scripts/ui.js @@ -673,7 +673,7 @@ class PersistentStorage { const db = e.target.result; const transaction = db.transaction('keyval', 'readwrite'); const objectStore = transaction.objectStore('keyval'); - const objectStoreRequest = objectStore.add(value, key); + const objectStoreRequest = objectStore.put(value, key); objectStoreRequest.onsuccess = (event) => { console.log(`Request successful. Added key-pair: ${key} - ${value}`); resolve(); From ee183afc92ed5d03caab7e4d00e049c0d6240c6f Mon Sep 17 00:00:00 2001 From: schlagmichdoch Date: Mon, 3 Oct 2022 16:33:43 +0200 Subject: [PATCH 5/5] add error handling to IndexedDB API -> works again on Firefox Private Browsing Mode --- client/scripts/ui.js | 49 +++++++++++++++++++++++++++++--------------- 1 file changed, 32 insertions(+), 17 deletions(-) diff --git a/client/scripts/ui.js b/client/scripts/ui.js index b62e7bdb..f145f003 100644 --- a/client/scripts/ui.js +++ b/client/scripts/ui.js @@ -334,21 +334,25 @@ class JoinRoomDialog extends Dialog { button.addEventListener('submit', e => this._join(e)); //retrieve roomId from db and write to sessionStorage if not null/undefined - PersistentStorage.get('roomId').then((roomId) => { - if (roomId && !sessionStorage.getItem('roomId')) { - sessionStorage.setItem('roomId', roomId); - location.reload() - } - }) + PersistentStorage.get('roomId') + .then((roomId) => { + if (roomId && !sessionStorage.getItem('roomId')) { + sessionStorage.setItem('roomId', roomId); + location.reload() + } + }) + .catch(e => console.log(e)); } _joinExit(e) { e.preventDefault(); if (sessionStorage.getItem('roomId')) { sessionStorage.removeItem('roomId'); - PersistentStorage.delete('roomId').then(() => { - location.reload(); - }); + PersistentStorage.delete('roomId') + .finally(() => { + location.reload(); + }) + .catch(e => console.log(e)); }else { this.show(); } @@ -360,16 +364,18 @@ class JoinRoomDialog extends Dialog { if (inputNum.length >= 6) { inputNum = inputNum.substring(0,6); sessionStorage.setItem("roomId", inputNum); - PersistentStorage.set("roomId", inputNum).then(() => { - location.reload(); - }); + PersistentStorage.set("roomId", inputNum) + .finally(() => { + location.reload(); + }) + .catch(e => console.log(e)); } else { inputNum = new ServerConnection()._randomNum(6); sessionStorage.setItem("roomId", inputNum); - PersistentStorage.set("roomId", inputNum).then(() => { + PersistentStorage.set("roomId", inputNum).finally(() => { location.reload(); - }); + }).catch(e => console.log(e)); } } } @@ -667,7 +673,7 @@ class PersistentStorage { } static set(key, value) { - return new Promise(resolve => { + return new Promise((resolve, reject) => { const DBOpenRequest = window.indexedDB.open('snapdrop_store'); DBOpenRequest.onsuccess = (e) => { const db = e.target.result; @@ -679,11 +685,14 @@ class PersistentStorage { resolve(); }; } + DBOpenRequest.onerror = (e) => { + reject(e); + } }) } static get(key) { - return new Promise(resolve => { + return new Promise((resolve, reject) => { const DBOpenRequest = window.indexedDB.open('snapdrop_store'); DBOpenRequest.onsuccess = (e) => { const db = e.target.result; @@ -695,11 +704,14 @@ class PersistentStorage { resolve(objectStoreRequest.result); }; } + DBOpenRequest.onerror = (e) => { + reject(e); + } }); } static delete(key) { - return new Promise(resolve => { + return new Promise((resolve, reject) => { const DBOpenRequest = window.indexedDB.open('snapdrop_store'); DBOpenRequest.onsuccess = (e) => { const db = e.target.result; @@ -711,6 +723,9 @@ class PersistentStorage { resolve(); }; } + DBOpenRequest.onerror = (e) => { + reject(e); + } }) } }