Add TURN indicator to PeerUI and add method to RTCPeer to get the connection type of the webrtc connection. If connection type is relay show TURN indicator

public/index.html

@@ -447,7 +447,7 @@
                 <div class="center file-preview"></div>
                 <div class="row-reverse center btn-row wrap">
                     <button id="share-btn" class="btn btn-rounded btn-grey" data-i18n-key="dialogs.share" data-i18n-attrs="text" hidden></button>
-                    <button id="download-btn" class="btn btn-rounded btn-grey" data-i18n-key="dialogs.download" data-i18n-attrs="text" autofocus disabled></button>
+                    <button id="download-btn" class="btn btn-rounded btn-grey" data-i18n-key="dialogs.download" data-i18n-attrs="text" autofocus disabled hidden></button>
                     <button class="btn btn-rounded btn-grey" data-i18n-key="dialogs.close" data-i18n-attrs="text" close></button>
                 </div>
             </x-paper>
@@ -737,6 +737,10 @@
             <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.-->
             <path d="M256 0c4.6 0 9.2 1 13.4 2.9L457.7 82.8c22 9.3 38.4 31 38.3 57.2c-.5 99.2-41.3 280.7-213.6 363.2c-16.7 8-36.1 8-52.8 0C57.3 420.7 16.5 239.2 16 140c-.1-26.2 16.3-47.9 38.3-57.2L242.7 2.9C246.8 1 251.4 0 256 0zm0 66.8V444.8C394 378 431.1 230.1 432 141.4L256 66.8l0 0z"></path>
         </symbol>
+        <symbol id="turn-indicator" viewBox="0 0 576 512">
+            <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+            <path d="M0 80C0 53.5 21.5 32 48 32h96c26.5 0 48 21.5 48 48V96H384V80c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v96c0 26.5-21.5 48-48 48H432c-26.5 0-48-21.5-48-48V160H192v16c0 1.7-.1 3.4-.3 5L272 288h96c26.5 0 48 21.5 48 48v96c0 26.5-21.5 48-48 48H272c-26.5 0-48-21.5-48-48V336c0-1.7 .1-3.4 .3-5L144 224H48c-26.5 0-48-21.5-48-48V80z"></path>
+        </symbol>
     </svg>
     <!-- Scripts -->
     <script src="scripts/localization.js" defer></script>
@@ -744,7 +748,7 @@
     <script src="scripts/ui-main.js" defer></script>
     <script src="scripts/main.js" defer></script>
     <!-- Sounds -->
-    <audio id="blop" autobuffer="true">
+    <audio id="blop" preload="metadata" disableremoteplayback="true" x-webkit-airplay="deny" muted>
         <source src="sounds/blop.mp3" type="audio/mpeg">
         <source src="sounds/blop.ogg" type="audio/ogg">
     </audio>

public/lang/ar.json

@@ -48,7 +48,6 @@
         "pairing-cleared": "جميع الأجهزة غير مقترنة",
         "notifications-enabled": "تم تمكين الإشعارات",
         "online-requirement-pairing": "يجب أن تكون متصلاً بالإنترنت لإقران الأجهزة",
-        "ios-memory-limit": "لا يمكن إرسال ملفات إلى iOS إلا بحجم يصل إلى 200 ميجابايت مرة واحدة",
         "online-requirement-public-room": "يجب أن تكون متصلاً بالإنترنت لإنشاء غرفة عامة",
         "copied-text-error": "فشلت الكتابة من الحافظة. انسخ يدويًا!",
         "download-successful": "تم تحميل {{descriptor}}",

public/lang/ca.json

@@ -144,7 +144,6 @@
         "pairing-cleared": "Tots els dispositius desvinculats",
         "notifications-enabled": "Notificacions habilitades",
         "online-requirement-pairing": "Has d'estar en línia per vincular dispositius",
-        "ios-memory-limit": "Tan sols és possible enviar fitxers de fins a 200 MB a iOS",
         "online-requirement-public-room": "Cal que estiguis en línia per poder crear una sala pública",
         "room-url-copied-to-clipboard": "Enllaç a la sala pública copiat al porta-retalls",
         "copied-text-error": "L'escriptura al porta-retalls ha fallat. Copiar manualment!",

public/lang/de.json

@@ -138,7 +138,6 @@
         "message-transfer-completed": "Nachricht übertragen",
         "rate-limit-join-key": "Rate Limit erreicht. Warte 10 Sekunden und versuche es erneut.",
         "selected-peer-left": "Ausgewählter Peer ist gegangen",
-        "ios-memory-limit": "Für Übertragungen an iOS Geräte beträgt die maximale Dateigröße 200 MB",
         "public-room-left": "Öffentlichen Raum {{publicRoomId}} verlassen",
         "copied-to-clipboard-error": "Konnte nicht kopieren. Kopiere manuell.",
         "public-room-id-invalid": "Ungültige Raum-ID",

public/lang/en.json

@@ -158,11 +158,13 @@
         "connecting": "Connecting…",
         "files-incorrect": "Files are incorrect",
         "file-transfer-completed": "File transfer completed",
-        "ios-memory-limit": "Sending files to iOS is only possible up to 200 MB at once",
         "message-transfer-completed": "Message transfer completed",
         "unfinished-transfers-warning": "There are unfinished transfers. Are you sure you want to close PairDrop?",
         "rate-limit-join-key": "Rate limit reached. Wait 10 seconds and try again.",
-        "selected-peer-left": "Selected peer left"
+        "selected-peer-left": "Selected peer left",
+        "error-sharing-size": "Files too big to be shared. They can be downloaded instead.",
+        "error-sharing-default": "Error while sharing. It can be downloaded instead.",
+        "ram-exceed-ios": "One of the files is bigger than 250 MB and will crash the page on iOS. Use https and do not use private tabs on the iOS device to prevent this."
     },
     "document-titles": {
         "file-received": "File Received",
@@ -176,9 +178,15 @@
         "click-to-send-share-mode": "Click to send {{descriptor}}",
         "click-to-send": "Click to send files or right click to send a message",
         "connection-hash": "To verify the security of the end-to-end encryption, compare this security number on both devices",
+        "turn-indicator": "Transfer over the Internet",
+        "connecting": "Connecting…",
         "preparing": "Preparing…",
         "waiting": "Waiting…",
         "processing": "Processing…",
-        "transferring": "Transferring…"
+        "transferring": "Sending…",
+        "receiving": "Receiving…",
+        "transfer-complete": "Sent",
+        "receive-complete": "Received",
+        "error": "Error"
     }
 }

public/lang/es.json

@@ -64,7 +64,6 @@
         "pairing-cleared": "Todos los dispositivos han sido desemparejados",
         "notifications-enabled": "Notificaciones habilitadas",
         "online-requirement-pairing": "Debes estar en línea para emparejar dispositivos",
-        "ios-memory-limit": "Enviar archivos a iOS sólo admite hasta 200 MB a la vez",
         "online-requirement-public-room": "Debes estar en línea para crear una sala pública",
         "copied-text-error": "Error al escribir en el portapapeles. ¡Cópielo manualmente!",
         "download-successful": "{{descriptor}} descargado",

public/lang/fr.json

@@ -137,7 +137,6 @@
         "connecting": "Connexion…",
         "files-incorrect": "Les fichiers sont incorrects",
         "file-transfer-completed": "Transfert de fichier terminé",
-        "ios-memory-limit": "L'envoi de fichiers vers iOS n'est possible que jusqu'à 200 Mo à la fois",
         "message-transfer-completed": "Transfert de message terminé",
         "unfinished-transfers-warning": "Il y a des transferts inachevés. Êtes-vous sûr de vouloir fermer PairDrop ?",
         "rate-limit-join-key": "Limite de débit atteinte. Attendez 10 secondes et réessayez.",

public/lang/id.json

@@ -48,7 +48,6 @@
         "pairing-cleared": "Semua Perangkat dilepaskan",
         "notifications-enabled": "Notifikasi diaktifkan",
         "online-requirement-pairing": "Anda harus online untuk memasangkan perangkat",
-        "ios-memory-limit": "Mengirim file ke iOS hanya dapat dilakukan hingga 200 MB sekaligus",
         "online-requirement-public-room": "Anda harus online untuk membuat ruang publik",
         "copied-text-error": "Menyalin ke papan klip gagal. Salinlah secara manual!",
         "download-successful": "{{descriptor}} diunduh",

public/lang/it.json

@@ -129,7 +129,6 @@
         "pairing-cleared": "Tutti i dispositivi sono stati dissociati",
         "notifications-enabled": "Notifiche attivate",
         "online-requirement-pairing": "Devi essere online per abbinare dispositivi",
-        "ios-memory-limit": "L'invio di file a dispositivi iOS è possibile solo 200 MB alla volta",
         "online-requirement-public-room": "Devi essere online per creare una stanza pubblica",
         "copied-text-error": "Scrittura negli appunti fallita. Copia manualmente!",
         "download-successful": "{{descriptor}} scaricato",

public/lang/ja.json

@@ -48,7 +48,6 @@
         "pairing-cleared": "全てのデバイスのペア設定を解除しました",
         "notifications-enabled": "通知が有効です",
         "online-requirement-pairing": "デバイスをペア設定するにはオンラインである必要があります",
-        "ios-memory-limit": "iOSへのファイル送信は一度に200MBまでしかできません",
         "online-requirement-public-room": "パブリックルームを作成するにはオンラインである必要があります",
         "copied-text-error": "クリップボードにコピーできませんでした。手動でコピーしてください。",
         "download-successful": "{{descriptor}}をダウンロードしました",

public/lang/kn.json

@@ -128,7 +128,6 @@
         "pairing-cleared": "ಎಲ್ಲಾ ಸಾಧನಗಳನ್ನು ಜೋಡಿಯಾಗಿ ತೆಗೆಯಲಾಗಿದೆ",
         "notifications-enabled": "ಸೂಚನೆಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ",
         "online-requirement-pairing": "ಸಾಧನಗಳನ್ನು ಜೋಡಿಸಲು ನೀವು ಆನ್‌ಲೈನ್‌ ಇರಬೇಕು",
-        "ios-memory-limit": "iOSಗೆ ಫೈಲ್‌ಗಳನ್ನು ಕಳುಹಿಸುವುದು ಒಂದೇ ಬಾರಿಗೆ 200 MB ವರೆಗೆ ಮಾತ್ರ ಸಾಧ್ಯವಾಗಿದೆ",
         "online-requirement-public-room": "ಸಾರ್ವಜನಿಕ ಕೊಠಡಿಯನ್ನು ರಚಿಸಲು ನೀವು ಆನ್‌ಲೈನ್‌ ಇರಬೇಕು",
         "room-url-copied-to-clipboard": "ಸಾರ್ವಜನಿಕ ಕೊಠಡಿಯ ಲಿಂಕ್ ಅನ್ನು ಕ್ಲಿಪ್‌ಬೋರ್ಡ್‌ಗೆ ನಕಲಿಸಲಾಗಿದೆ",
         "copied-text-error": "ಕ್ಲಿಪ್‌ಬೋರ್ಡ್‌ಗೆ ಬರೆಯುವುದು ವಿಫಲವಾಗಿದೆ. ಕೈಯಾರೆ ನಕಲಿಸಿ!",

public/lang/nb.json

@@ -116,7 +116,6 @@
         "request-title": "{{name}} ønsker å overføre {{count}} {{descriptor}}",
         "message-received": "Melding mottatt av {{name}} - Klikk for å åpne",
         "files-incorrect": "Filene er uriktige",
-        "ios-memory-limit": "Forsendelse av filer til iOS er kun mulig opptil 200 MB av gangen",
         "unfinished-transfers-warning": "Lukk med ufullførte overføringer?",
         "rate-limit-join-key": "Forsøksgrense overskredet. Vent 10 sek. og prøv igjen."
     },

public/lang/nl.json

@@ -48,7 +48,6 @@
         "pairing-cleared": "Alle apparaten ontkoppeld",
         "notifications-enabled": "Meldingen geactiveerd",
         "online-requirement-pairing": "U moet online zijn om apparaten te koppelen",
-        "ios-memory-limit": "Bestandsoverdrachten naar iOS kunnen slechts met 200 MB per keer",
         "online-requirement-public-room": "U moet online zijn om een openbare kamer te maken",
         "copied-text-error": "Schrijven naar klembord mislukt. Kopieer handmatig!",
         "download-successful": "{{descriptor}} downloaden",

public/lang/pt-BR.json

@@ -153,7 +153,6 @@
         "connecting": "Conectando…",
         "files-incorrect": "Os arquivos estão incorretos",
         "file-transfer-completed": "Transferência de arquivo concluída",
-        "ios-memory-limit": "Enviar arquivos para iOS só é possível até 200 MB de uma vez",
         "message-transfer-completed": "Transferência de mensagem concluída",
         "unfinished-transfers-warning": "Há transferências inacabadas. Tem certeza de que deseja fechar o PairDrop?",
         "rate-limit-join-key": "Limite de taxa atingido. Aguarde 10 segundos e tente novamente.",

public/lang/ro.json

@@ -48,7 +48,6 @@
         "pairing-cleared": "Toate dispozitivele sunt decuplate",
         "notifications-enabled": "Notificări activate",
         "online-requirement-pairing": "Trebuie să fiți online pentru a asocia dispozitivele",
-        "ios-memory-limit": "Trimiterea de fișiere pe iOS este posibilă doar până la 200 MB simultan",
         "online-requirement-public-room": "Trebuie să fiți online pentru a crea o cameră publică",
         "copied-text-error": "Scrierea în clipboard a eșuat. Copiați manual!",
         "download-successful": "{{descriptor}} descărcat",

public/lang/ru.json

@@ -121,7 +121,6 @@
         "online-requirement": "Для сопряжения устройств вам нужно быть в сети.",
         "files-incorrect": "Файлы неверны",
         "message-transfer-completed": "Передача сообщения завершена",
-        "ios-memory-limit": "Отправка файлов на iOS устройства возможна только до 200 МБ за один раз",
         "selected-peer-left": "Выбранный узел вышел",
         "request-title": "{{name}} хотел бы передать {{count}} {{descriptor}}",
         "rate-limit-join-key": "Достигнут предел скорости. Подождите 10 секунд и повторите попытку.",

public/lang/tr.json

@@ -145,7 +145,6 @@
         "pairing-cleared": "Tüm cihazlar eşleştirmeden çıkarıldı",
         "notifications-enabled": "Bildirimler etkinleştirildi",
         "online-requirement-pairing": "Cihazları eşleştirmek için çevrimiçi olmanız lazım",
-        "ios-memory-limit": "iOS'a tek seferde sadece 200MB'a kadar dosya gönderebilirsin",
         "online-requirement-public-room": "Genel oda oluşturmak için çevrimiçi olmanız lazım",
         "room-url-copied-to-clipboard": "Genel oda bağlantı linki panoya kopyalandı",
         "copied-text-error": "Panoya kopyalanamadı. Lütfen manuel olarak kopyalayın!",

public/lang/zh-CN.json

@@ -154,7 +154,6 @@
         "files-incorrect": "文件不正确",
         "file-transfer-completed": "文件传输已完成",
         "connecting": "连接中…",
-        "ios-memory-limit": "向 iOS 发送文件 一次最多只能发送 200 MB",
         "rate-limit-join-key": "已达连接限制。请等待 10秒 后再试。",
         "public-room-left": "已退出公共房间 {{publicRoomId}}",
         "copied-to-clipboard-error": "无法复制。请手动复制。",

public/scripts/browser-tabs-connector.js

@@ -10,7 +10,7 @@ class BrowserTabsConnector {
     }
 
     _onMessage(e) {
-        console.log('Broadcast:', e.data)
+        Logger.debug('Broadcast:', e.data)
         switch (e.data.type) {
             case 'self-display-name-changed':
                 Events.fire('self-display-name-changed', e.data.detail);

public/scripts/localization.js

@@ -67,7 +67,7 @@ class Localization {
         Localization.$htmlRoot.setAttribute('lang', locale);
 
 
-        console.log("Page successfully translated",
+        Logger.debug("Page successfully translated",
             `System language: ${Localization.systemLocale}`,
             `Selected language: ${locale}`
         );
@@ -145,7 +145,7 @@ class Localization {
             translation = translationObj[lastKey];
 
         } catch (e) {
-            console.error(e);
+            Logger.error(e);
         }
 
         if (!translation) {
@@ -179,7 +179,7 @@ class Localization {
         }
         catch (e) {
             // Log warnings and help calls
-            console.warn(e);
+            Logger.warn(e);
             Localization.logTranslationMissingOrBroken(key, attr, data, useDefault);
             Localization.logHelpCallKey(key, attr);
             Localization.logHelpCall();
@@ -192,7 +192,7 @@ class Localization {
             else {
                 // Is not default locale yet
                 // Get translation for default language with same arguments
-                console.log(`Using default language ${Localization.defaultLocale.toUpperCase()} instead.`);
+                Logger.debug(`Using default language ${Localization.defaultLocale.toUpperCase()} instead.`);
                 translation = this.getTranslation(key, attr, data, true);
             }
         }
@@ -205,11 +205,11 @@ class Localization {
             ? Localization.defaultLocale.toUpperCase()
             : Localization.locale.toUpperCase();
 
-        console.warn(`Missing or broken translation for language ${usedLocale}.\n`, 'key:', key, 'attr:', attr, 'data:', data);
+        Logger.warn(`Missing or broken translation for language ${usedLocale}.\n`, 'key:', key, 'attr:', attr, 'data:', data);
     }
 
     static logHelpCall() {
-        console.log("Help translating PairDrop: https://hosted.weblate.org/engage/pairdrop/");
+        Logger.warn("Help translating PairDrop: https://hosted.weblate.org/engage/pairdrop/");
     }
 
     static logHelpCallKey(key, attr) {
@@ -219,7 +219,7 @@ class Localization {
             ? key
             : `${key}_${attr}`;
 
-        console.warn(`Translate this string here: https://hosted.weblate.org/browse/pairdrop/pairdrop-spa/${locale}/?q=${keyComplete}`);
+        Logger.warn(`Translate this string here: https://hosted.weblate.org/browse/pairdrop/pairdrop-spa/${locale}/?q=${keyComplete}`);
     }
 
     static escapeHTML(unsafeText) {

public/scripts/main.js

@@ -1,3 +1,23 @@
+class Logger {
+
+    static debug(message, ...optionalParams) {
+        if (window.debugMode) {
+            console.debug("DEBUG:", message, ...optionalParams);
+        }
+    }
+    static log(message, ...optionalParams) {
+        console.log("LOG:", message, ...optionalParams);
+    }
+
+    static warn(message, ...optionalParams) {
+        console.warn("WARN:", message, ...optionalParams);
+    }
+
+    static error(message, ...optionalParams) {
+        console.error("ERROR:", message, ...optionalParams);
+    }
+}
+
 class PairDrop {
 
     constructor() {
@@ -34,14 +54,14 @@ class PairDrop {
 
         this.initialize()
             .then(_ => {
-                console.log("Initialization completed.");
+                Logger.log("Initialization completed.");
             });
     }
 
     async initialize() {
         // Translate page before fading in
         await this.localization.setInitialTranslation()
-        console.log("Initial translation successful.");
+        Logger.log("Initial translation successful.");
 
         // Show "Loading..." until connected to WsServer
         await this.footerUI.showLoading();
@@ -56,16 +76,16 @@ class PairDrop {
         await this.backgroundCanvas.fadeIn();
 
         // Load deferred assets
-        console.log("Load deferred assets...");
+        Logger.log("Load deferred assets...");
         await this.loadDeferredAssets();
-        console.log("Loading of deferred assets completed.");
+        Logger.log("Loading of deferred assets completed.");
 
-        console.log("Hydrate UI...");
+        Logger.log("Hydrate UI...");
         await this.hydrate();
-        console.log("UI hydrated.");
+        Logger.log("UI hydrated.");
 
         // Evaluate url params as soon as ws is connected
-        console.log("Evaluate URL params as soon as websocket connection is established.");
+        Logger.log("Evaluate URL params as soon as websocket connection is established.");
         Events.on('ws-connected', _ => this.evaluateUrlParams(), {once: true});
     }
 
@@ -74,7 +94,7 @@ class PairDrop {
             navigator.serviceWorker
                 .register('service-worker.js')
                 .then(serviceWorker => {
-                    console.log('Service Worker registered');
+                    Logger.log('Service Worker registered');
                     window.serviceWorker = serviceWorker
                 });
         }
@@ -133,10 +153,10 @@ class PairDrop {
         return new Promise( async (resolve) => {
             try {
                 await this.loadStyleSheet(url);
-                console.log(`Stylesheet loaded successfully: ${url}`);
+                Logger.log(`Stylesheet loaded successfully: ${url}`);
                 resolve();
             } catch (error) {
-                console.error('Error loading stylesheet:', error);
+                Logger.error('Error loading stylesheet:', error);
             }
         });
     }
@@ -156,10 +176,10 @@ class PairDrop {
         return new Promise( async (resolve) => {
             try {
                 await this.loadScript(url);
-                console.log(`Script loaded successfully: ${url}`);
+                Logger.log(`Script loaded successfully: ${url}`);
                 resolve();
             } catch (error) {
-                console.error('Error loading script:', error);
+                Logger.error('Error loading script:', error);
             }
         });
     }
@@ -229,12 +249,17 @@ class PairDrop {
                 this.publicRoomDialog._createPublicRoom();
             }
         }
+        else if (urlParams.has("debug") && urlParams.get("debug") === "true") {
+            window.debugMode = true;
+        }
 
+        if (!window.debugMode) {
             // remove url params from url
             const urlWithoutParams = getUrlWithoutArguments();
             window.history.replaceState({}, "Rewrite URL", urlWithoutParams);
+        }
 
-        console.log("URL params evaluated.");
+        Logger.log("URL params evaluated.");
     }
 }
 

public/scripts/persistent-storage.js

@@ -7,19 +7,18 @@ class PersistentStorage {
         const DBOpenRequest = window.indexedDB.open('pairdrop_store', 5);
         DBOpenRequest.onerror = e => {
             PersistentStorage.logBrowserNotCapable();
-            console.log('Error initializing database: ');
+            Logger.error('Error initializing database:', e);
-            console.log(e)
         };
         DBOpenRequest.onsuccess = _ => {
-            console.log('Database initialised.');
+            Logger.debug('Database initialised.');
         };
         DBOpenRequest.onupgradeneeded = async e => {
             const db = e.target.result;
             const txn = e.target.transaction;
 
-            db.onerror = e => console.log('Error loading database: ' + e);
+            db.onerror = e => Logger.error('Error loading database:', e);
 
-            console.log(`Upgrading IndexedDB database from version ${e.oldVersion} to version ${e.newVersion}`);
+            Logger.debug(`Upgrading IndexedDB database from version ${e.oldVersion} to version ${e.newVersion}`);
 
             if (e.oldVersion === 0) {
                 // initiate v1
@@ -54,7 +53,7 @@ class PersistentStorage {
     }
 
     static logBrowserNotCapable() {
-        console.log("This browser does not support IndexedDB. Paired devices will be gone after the browser is closed.");
+        Logger.log("This browser does not support IndexedDB. Paired devices will be gone after the browser is closed.");
     }
 
     static set(key, value) {
@@ -66,7 +65,7 @@ class PersistentStorage {
                 const objectStore = transaction.objectStore('keyval');
                 const objectStoreRequest = objectStore.put(value, key);
                 objectStoreRequest.onsuccess = _ => {
-                    console.log(`Request successful. Added key-pair: ${key} - ${value}`);
+                    Logger.debug(`Request successful. Added key-pair: ${key} - ${value}`);
                     resolve(value);
                 };
             }
@@ -85,7 +84,7 @@ class PersistentStorage {
                 const objectStore = transaction.objectStore('keyval');
                 const objectStoreRequest = objectStore.get(key);
                 objectStoreRequest.onsuccess = _ => {
-                    console.log(`Request successful. Retrieved key-pair: ${key} - ${objectStoreRequest.result}`);
+                    Logger.debug(`Request successful. Retrieved key-pair: ${key} - ${objectStoreRequest.result}`);
                     resolve(objectStoreRequest.result);
                 }
             }
@@ -104,7 +103,7 @@ class PersistentStorage {
                 const objectStore = transaction.objectStore('keyval');
                 const objectStoreRequest = objectStore.delete(key);
                 objectStoreRequest.onsuccess = _ => {
-                    console.log(`Request successful. Deleted key: ${key}`);
+                    Logger.debug(`Request successful. Deleted key: ${key}`);
                     resolve();
                 };
             }
@@ -128,7 +127,7 @@ class PersistentStorage {
                     'auto_accept': false
                 });
                 objectStoreRequest.onsuccess = e => {
-                    console.log(`Request successful. RoomSecret added: ${e.target.result}`);
+                    Logger.debug(`Request successful. RoomSecret added: ${e.target.result}`);
                     resolve();
                 }
             }
@@ -145,7 +144,7 @@ class PersistentStorage {
             for (let i = 0; i < roomSecrets.length; i++) {
                 secrets.push(roomSecrets[i].secret);
             }
-            console.log(`Request successful. Retrieved ${secrets.length} room_secrets`);
+            Logger.debug(`Request successful. Retrieved ${secrets.length} room_secrets`);
             return(secrets);
         } catch (e) {
             this.logBrowserNotCapable();
@@ -182,13 +181,13 @@ class PersistentStorage {
                 objectStoreRequestKey.onsuccess = e => {
                     const key = e.target.result;
                     if (!key) {
-                        console.log(`Nothing to retrieve. Entry for room_secret not existing: ${roomSecret}`);
+                        Logger.debug(`Nothing to retrieve. Entry for room_secret not existing: ${roomSecret}`);
                         resolve();
                         return;
                     }
                     const objectStoreRequestRetrieval = objectStore.get(key);
                     objectStoreRequestRetrieval.onsuccess = e => {
-                        console.log(`Request successful. Retrieved entry for room_secret: ${key}`);
+                        Logger.debug(`Request successful. Retrieved entry for room_secret: ${key}`);
                         resolve({
                             "entry": e.target.result,
                             "key": key
@@ -215,14 +214,14 @@ class PersistentStorage {
                 const objectStoreRequestKey = objectStore.index("secret").getKey(roomSecret);
                 objectStoreRequestKey.onsuccess = e => {
                     if (!e.target.result) {
-                        console.log(`Nothing to delete. room_secret not existing: ${roomSecret}`);
+                        Logger.debug(`Nothing to delete. room_secret not existing: ${roomSecret}`);
                         resolve();
                         return;
                     }
                     const key = e.target.result;
                     const objectStoreRequestDeletion = objectStore.delete(key);
                     objectStoreRequestDeletion.onsuccess = _ => {
-                        console.log(`Request successful. Deleted room_secret: ${key}`);
+                        Logger.debug(`Request successful. Deleted room_secret: ${key}`);
                         resolve(roomSecret);
                     }
                     objectStoreRequestDeletion.onerror = e => {
@@ -245,7 +244,7 @@ class PersistentStorage {
                 const objectStore = transaction.objectStore('room_secrets');
                 const objectStoreRequest = objectStore.clear();
                 objectStoreRequest.onsuccess = _ => {
-                    console.log('Request successful. All room_secrets cleared');
+                    Logger.debug('Request successful. All room_secrets cleared');
                     resolve();
                 };
             }
@@ -255,15 +254,15 @@ class PersistentStorage {
         })
     }
 
-    static updateRoomSecretNames(roomSecret, displayName, deviceName) {
+    static updateRoomSecretDisplayName(roomSecret, displayName) {
-        return this.updateRoomSecret(roomSecret, undefined, displayName, deviceName);
+        return this.updateRoomSecret(roomSecret, null, displayName, null);
     }
 
     static updateRoomSecretAutoAccept(roomSecret, autoAccept) {
-        return this.updateRoomSecret(roomSecret, undefined, undefined, undefined, autoAccept);
+        return this.updateRoomSecret(roomSecret, null, null, null, autoAccept);
     }
 
-    static updateRoomSecret(roomSecret, updatedRoomSecret = undefined, updatedDisplayName = undefined, updatedDeviceName = undefined, updatedAutoAccept = undefined) {
+    static updateRoomSecret(roomSecret, updatedRoomSecret = null, updatedDisplayName = null, updatedDeviceName = null, updatedAutoAccept = null) {
         return new Promise((resolve, reject) => {
             const DBOpenRequest = window.indexedDB.open('pairdrop_store');
             DBOpenRequest.onsuccess = e => {
@@ -278,16 +277,16 @@ class PersistentStorage {
                         const objectStore = transaction.objectStore('room_secrets');
                         // Do not use `updatedRoomSecret ?? roomSecretEntry.entry.secret` to ensure compatibility with older browsers
                         const updatedRoomSecretEntry = {
-                            'secret': updatedRoomSecret !== undefined ? updatedRoomSecret : roomSecretEntry.entry.secret,
+                            'secret': updatedRoomSecret !== null ? updatedRoomSecret : roomSecretEntry.entry.secret,
-                            'display_name': updatedDisplayName !== undefined ? updatedDisplayName : roomSecretEntry.entry.display_name,
+                            'display_name': updatedDisplayName !== null ? updatedDisplayName : roomSecretEntry.entry.display_name,
-                            'device_name': updatedDeviceName !== undefined ? updatedDeviceName : roomSecretEntry.entry.device_name,
+                            'device_name': updatedDeviceName !== null ? updatedDeviceName : roomSecretEntry.entry.device_name,
-                            'auto_accept': updatedAutoAccept !== undefined ? updatedAutoAccept : roomSecretEntry.entry.auto_accept
+                            'auto_accept': updatedAutoAccept !== null ? updatedAutoAccept : roomSecretEntry.entry.auto_accept
                         };
 
                         const objectStoreRequestUpdate = objectStore.put(updatedRoomSecretEntry, roomSecretEntry.key);
 
                         objectStoreRequestUpdate.onsuccess = e => {
-                            console.log(`Request successful. Updated room_secret: ${roomSecretEntry.key}`);
+                            Logger.debug(`Request successful. Updated room_secret: ${roomSecretEntry.key}`);
                             resolve({
                                 "entry": updatedRoomSecretEntry,
                                 "key": roomSecretEntry.key

public/scripts/sw-file-digester.js

@@ -0,0 +1,79 @@
+self.addEventListener('message', async e => {
+    try {
+        switch (e.data.type) {
+            case "check-support":
+                await checkSupport();
+                break;
+            case "part":
+                await onPart(e.data.name, e.data.buffer, e.data.offset);
+                break;
+            case "get-file":
+                await onGetFile(e.data.name);
+                break;
+            case "delete-file":
+                await onDeleteFile(e.data.name);
+                break;
+        }
+    }
+    catch (e) {
+        self.postMessage({type: "error", error: e});
+    }
+})
+
+async function checkSupport() {
+    try {
+        await getAccessHandle("test.txt");
+        self.postMessage({type: "support", supported: true});
+    }
+    catch (e) {
+        self.postMessage({type: "support", supported: false});
+    }
+}
+
+async function getFileHandle(fileName) {
+    const root = await navigator.storage.getDirectory();
+    return await root.getFileHandle(fileName, {create: true});
+}
+
+async function getAccessHandle(fileName) {
+    const fileHandle = await getFileHandle(fileName);
+
+    // Create FileSystemSyncAccessHandle on the file.
+    return await fileHandle.createSyncAccessHandle();
+}
+
+async function onPart(fileName, buffer, offset) {
+    const accessHandle = await getAccessHandle(fileName);
+
+    // Write the message to the end of the file.
+    let encodedMessage = new DataView(buffer);
+    accessHandle.write(encodedMessage, { at: offset });
+
+    // Always close FileSystemSyncAccessHandle if done.
+    accessHandle.close();    accessHandle.close();
+
+    self.postMessage({type: "part", part: encodedMessage});
+    encodedMessage = null;
+}
+
+async function onGetFile(fileName) {
+    const fileHandle = await getFileHandle(fileName);
+    let file = await fileHandle.getFile();
+
+    self.postMessage({type: "file", file: file});
+}
+
+async function onDeleteFile(fileName) {
+    const accessHandle = await getAccessHandle(fileName);
+
+    // Truncate the file to 0 bytes
+    accessHandle.truncate(0);
+
+    // Persist changes to disk.
+    accessHandle.flush();
+
+    // Always close FileSystemSyncAccessHandle if done.
+    accessHandle.close();
+
+    self.postMessage({type: "file-deleted"});
+}

public/scripts/ui-main.js

@@ -238,7 +238,7 @@ class FooterUI {
 
         if (!displayName) return;
 
-        console.log("Retrieved edited display name:", displayName)
+        Logger.debug("Retrieved edited display name:", displayName)
         Events.fire('self-display-name-changed', displayName);
     }
 
@@ -275,7 +275,7 @@ class FooterUI {
                     Events.fire('notify-user', Localization.getTranslation("notifications.display-name-changed-permanently"));
                 })
                 .catch(_ => {
-                    console.log("This browser does not support IndexedDB. Use localStorage instead.");
+                    Logger.debug("This browser does not support IndexedDB. Use localStorage instead.");
                     localStorage.setItem('edited_display_name', newDisplayName);
                     Events.fire('notify-user', Localization.getTranslation("notifications.display-name-changed-temporarily"));
                 })
@@ -287,7 +287,7 @@ class FooterUI {
         else {
             PersistentStorage.delete('edited_display_name')
                 .catch(_ => {
-                    console.log("This browser does not support IndexedDB. Use localStorage instead.")
+                    Logger.debug("This browser does not support IndexedDB. Use localStorage instead.")
                     localStorage.removeItem('edited_display_name');
                 })
                 .finally(() => {

public/scripts/util.js

@@ -62,41 +62,67 @@ window.isMobile = window.iOS || window.android;
 
 
 // Helper functions
+
+const audioPlayer = (() => {
+    const blop = document.getElementById('blop');
+    blop.addEventListener('ended', _ => {
+        blop.muted = true
+    });
+
+
+    return {
+        playBlop() {
+            if (window.isMobile) return;
+
+            blop.muted = false;
+            blop.play();
+        }
+    }
+})();
+
 const zipper = (() => {
 
-    let zipWriter;
     return {
-        createNewZipWriter() {
+        async getObjectUrlOfZipFile(files, onZipProgressCallback){
-            zipWriter = new zip.ZipWriter(new zip.BlobWriter("application/zip"), { bufferedWrite: true, level: 0 });
+            try {
-        },
+                const zipWriter = new zip.ZipWriter(new zip.BlobWriter("application/zip"));
-        addFile(file, options) {
+
-            return zipWriter.add(file.name, new zip.BlobReader(file), options);
+                let bytesProcessed = 0;
-        },
+                for (let i = 0; i < files.length; i++) {
-        async getBlobURL() {
+                    await zipWriter.add(
-            if (zipWriter) {
+                        files[i].name,
-                const blobURL = URL.createObjectURL(await zipWriter.close());
+                        new zip.BlobReader(files[i]),
-                zipWriter = null;
+                        {
-                return blobURL;
+                            onprogress: (progress) => onZipProgressCallback(bytesProcessed + progress)
                         }
-            else {
+                    );
-                throw new Error("Zip file closed");
+                    bytesProcessed += files[i].size;
                 }
-        },
+
-        async getZipFile(filename = "archive.zip") {
+                return URL.createObjectURL(await zipWriter.close());
-            if (zipWriter) {
-                const file = new File([await zipWriter.close()], filename, {type: "application/zip"});
-                zipWriter = null;
-                return file;
             }
-            else {
+            catch (e) {
-                throw new Error("Zip file closed");
+                Logger.error(e);
+                return false;
             }
         },
         async getEntries(file, options) {
+            try {
                 return await (new zip.ZipReader(new zip.BlobReader(file))).getEntries(options);
+            }
+            catch (e) {
+                Logger.error(e);
+                return false;
+            }
         },
         async getData(entry, options) {
+            try {
                 return await entry.getData(new zip.BlobWriter(), options);
+            }
+            catch (e) {
+                Logger.error(e);
+                return false;
+            }
         },
     };
 
@@ -521,7 +547,7 @@ function getThumbnailAsDataUrl(file, width = undefined, height = undefined, qual
             let dataUrl = canvas.toDataURL("image/jpeg", quality);
             resolve(dataUrl);
         } catch (e) {
-            console.error(e);
+            Logger.error(e);
             reject(new Error(`Could not create an image thumbnail from type ${file.type}`));
         }
     })

public/styles/styles-deferred.css

@@ -105,6 +105,8 @@ x-peer {
     padding: 8px;
     align-content: start;
     flex-wrap: wrap;
+    transition: transform 150ms;
+    will-change: transform;
 }
 
 x-peer input[type="file"] {
@@ -122,8 +124,6 @@ x-peer label {
 x-peer x-icon {
     --icon-size: 40px;
     margin-bottom: 4px;
-    transition: transform 150ms;
-    will-change: transform;
     display: flex;
     flex-direction: column;
 }
@@ -149,7 +149,7 @@ x-peer:not(.type-ip):not(.type-secret).type-public-id .icon-wrapper {
 .highlight-wrapper {
     align-self: center;
     align-items: center;
-    margin: 7px auto 0;
+    margin: 10px auto 0;
     height: 6px;
 }
 
@@ -188,14 +188,16 @@ x-peer:not(.type-public-id) .highlight-room-public-id {
     display: none;
 }
 
-x-peer:not([status]):hover x-icon,
+x-peer:is(:not([status]), [status$=-complete], [status=error]):hover,
-x-peer:not([status]):focus x-icon {
+x-peer:is(:not([status]), [status$=-complete], [status=error]):focus {
     transform: scale(1.05);
 }
 
-x-peer[status] x-icon {
+x-peer[status]:not([status$=-complete]) x-icon {
     box-shadow: none;
-    opacity: 0.8;
+}
+
+x-peer[status] {
     transform: scale(1);
 }
 
@@ -238,7 +240,7 @@ x-peer.ws-peer .highlight-wrapper {
 
 .status,
 .device-name {
-    opacity: 0.7;
+    color: color-mix(in srgb, rgb(var(--text-color)) 30%, grey);
     white-space: nowrap;
 }
 
@@ -247,14 +249,22 @@ x-peer[status] .device-name {
     display: none;
 }
 
-x-peer[status] {
+x-peer[status]:not([status$=-complete]):not([status=error]) {
     pointer-events: none;
 }
 
-x-peer x-icon {
+x-peer {
     animation: pop 600ms ease-out 1;
 }
 
+x-peer[status$=-complete] .status {
+    color: var(--primary-color);
+}
+
+x-peer[status=error] .status {
+    color: var(--error-color);
+}
+
 @keyframes pop {
     0% {
         transform: scale(0.7);
@@ -269,6 +279,40 @@ x-peer[drop] x-icon {
     transform: scale(1.1);
 }
 
+x-peer:not(.turn) .turn-indicator-wrapper {
+    display: none;
+}
+
+x-peer .turn-indicator-wrapper {
+    z-index: 0;
+    display: flex;
+    position: absolute;
+    top: 43px;
+    right: 23px;
+    width: 22px;
+    height: 22px;
+}
+
+x-peer .turn-indicator-wrapper:before {
+    z-index: -1;
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: white;
+    border-radius: 50%;
+    border: solid 2px var(--primary-color);
+}
+
+x-peer .turn-indicator {
+    margin: auto;
+    width: calc(var(--icon-size) / 3);
+    height: calc(var(--icon-size) / 3);
+    fill: var(--primary-color);
+}
+
 /* Checkboxes as slider */
 
 .switch {
@@ -745,7 +789,6 @@ x-dialog .dialog-subheader {
     top: -8px;
     clip: rect(0px, 80px, 80px, 40px);
     --progress: rotate(0deg);
-    transition: transform 200ms;
 }
 
 .circle {
@@ -759,6 +802,10 @@ x-dialog .dialog-subheader {
     transform: var(--progress);
 }
 
+.animate .circle {
+    transition: transform 200ms;
+}
+
 .over50 {
     clip: rect(auto, auto, auto, auto);
 }

public/styles/styles-main.css

@@ -921,6 +921,7 @@ x-peers:empty~x-instructions {
 body {
     /* Constant colors */
     --primary-color: #4285f4;
+    --error-color: #ff6b6b;
     --paired-device-color: #00a69c;
     --public-room-color: #ed9d01;
     --accent-color: var(--primary-color);

server/ws-server.js

@@ -89,22 +89,12 @@ export default class PairDropWsServer {
                 this._onLeavePublicRoom(sender);
                 break;
             case 'signal':
-                this._signalAndRelay(sender, message);
+                this._signalAndWsRelay(sender, message);
                 break;
-            case 'request':
+            case 'ws-relay':
-            case 'header':
-            case 'partition':
-            case 'partition-received':
-            case 'progress':
-            case 'files-transfer-response':
-            case 'file-transfer-complete':
-            case 'message-transfer-complete':
-            case 'text':
-            case 'display-name-changed':
-            case 'ws-chunk':
                 // relay ws-fallback
                 if (this._conf.wsFallback) {
-                    this._signalAndRelay(sender, message);
+                    this._signalAndWsRelay(sender, message);
                 }
                 else {
                     console.log("Websocket fallback is not activated on this instance.")
@@ -112,7 +102,7 @@ export default class PairDropWsServer {
         }
     }
 
-    _signalAndRelay(sender, message) {
+    _signalAndWsRelay(sender, message) {
         const room = message.roomType === 'ip'
             ? sender.ip
             : message.roomId;