increase version to v1.8.3

Bumps [express-rate-limit](https://github.com/express-rate-limit/express-rate-limit) from 7.0.1 to 7.1.0.
- [Release notes](https://github.com/express-rate-limit/express-rate-limit/releases)
- [Changelog](https://github.com/express-rate-limit/express-rate-limit/blob/main/changelog.md)
- [Commits](https://github.com/express-rate-limit/express-rate-limit/compare/v7.0.1...v7.1.0)

---
updated-dependencies:
- dependency-name: express-rate-limit
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

.github/ISSUE_TEMPLATE/bug-report.md

@@ -36,7 +36,7 @@ If applicable, add screenshots to help explain your problem.
 
 **Bug occurs on official PairDrop instance https://pairdrop.net/**
 No | Yes
-Version: v1.8.2
+Version: v1.8.3
 
 **Bug occurs on self-hosted PairDrop instance**
 No | Yes
@@ -44,7 +44,7 @@ No | Yes
 **Self-Hosted Setup**
 Proxy: Nginx | Apache2
 Deployment: docker run | docker-compose | npm run start:prod
-Version: v1.8.2
+Version: v1.8.3
 
 **Additional context**
 Add any other context about the problem here.

package-lock.json

@@ -1,19 +1,19 @@
 {
   "name": "pairdrop",
-  "version": "1.8.2",
+  "version": "1.8.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "pairdrop",
-      "version": "1.8.2",
+      "version": "1.8.3",
       "license": "ISC",
       "dependencies": {
         "express": "^4.18.2",
-        "express-rate-limit": "^7.0.1",
+        "express-rate-limit": "^7.1.0",
         "ua-parser-js": "^1.0.36",
         "unique-names-generator": "^4.3.0",
-        "ws": "^8.14.1"
+        "ws": "^8.14.2"
       },
       "engines": {
         "node": ">=15"
@@ -204,9 +204,9 @@
       }
     },
     "node_modules/express-rate-limit": {
-      "version": "7.0.1",
+      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-7.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-7.1.0.tgz",
-      "integrity": "sha512-oTIPm094gh8c7nbShl4TNLqnayzOcbDGY7dCRnFqUAvptyb0pp5231LaH34JtvVEbZlOJMiixikU5AVK8VN3FA==",
+      "integrity": "sha512-pwKOMedrpJJeINON/9jhAa18udV2qwxPZSoklPZK8pmXxUyE5uXaptiwjGw8bZILbxqfUZ/p8pQA99ODjSgA5Q==",
       "engines": {
         "node": ">= 16"
       },
@@ -637,9 +637,9 @@
       }
     },
     "node_modules/ws": {
-      "version": "8.14.1",
+      "version": "8.14.2",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.14.1.tgz",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.14.2.tgz",
-      "integrity": "sha512-4OOseMUq8AzRBI/7SLMUwO+FEDnguetSk7KMb1sHwvF2w2Wv5Hoj0nlifx8vtGsftE/jWHojPy8sMMzYLJ2G/A==",
+      "integrity": "sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==",
       "engines": {
         "node": ">=10.0.0"
       },
@@ -805,9 +805,9 @@
       }
     },
     "express-rate-limit": {
-      "version": "7.0.1",
+      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-7.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-7.1.0.tgz",
-      "integrity": "sha512-oTIPm094gh8c7nbShl4TNLqnayzOcbDGY7dCRnFqUAvptyb0pp5231LaH34JtvVEbZlOJMiixikU5AVK8VN3FA==",
+      "integrity": "sha512-pwKOMedrpJJeINON/9jhAa18udV2qwxPZSoklPZK8pmXxUyE5uXaptiwjGw8bZILbxqfUZ/p8pQA99ODjSgA5Q==",
       "requires": {}
     },
     "finalhandler": {
@@ -1099,9 +1099,9 @@
       "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg=="
     },
     "ws": {
-      "version": "8.14.1",
+      "version": "8.14.2",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.14.1.tgz",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.14.2.tgz",
-      "integrity": "sha512-4OOseMUq8AzRBI/7SLMUwO+FEDnguetSk7KMb1sHwvF2w2Wv5Hoj0nlifx8vtGsftE/jWHojPy8sMMzYLJ2G/A==",
+      "integrity": "sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==",
       "requires": {}
     }
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pairdrop",
-  "version": "1.8.2",
+  "version": "1.8.3",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -11,10 +11,10 @@
   "license": "ISC",
   "dependencies": {
     "express": "^4.18.2",
-    "express-rate-limit": "^7.0.1",
+    "express-rate-limit": "^7.1.0",
     "ua-parser-js": "^1.0.36",
     "unique-names-generator": "^4.3.0",
-    "ws": "^8.14.1"
+    "ws": "^8.14.2"
   },
   "engines": {
     "node": ">=15"

public/index.html

@@ -150,6 +150,7 @@
                     <button class="button fw" data-i18n-key="dialogs.system-language" data-i18n-attrs="text">System Language</button>
                     <button class="button fw" value="en">English</button>
                     <button class="button fw" value="de">Deutsch (German)</button>
+                    <button class="button fw" value="fr">Français (French)</button>
                     <button class="button fw" value="id">Bahasa Indonesia (Indonesian)</button>
                     <button class="button fw" value="nb">Norsk (Norwegian)</button>
                     <button class="button fw" value="ro">Română (Romanian)</button>
@@ -366,7 +367,7 @@
                     </div>
                     <div class="row">
                         <div class="column fw">
-                            <div id="text-input" title="Message" class="textarea" role="textbox" autocapitalize="none" spellcheck="false" autofocus contenteditable></div>
+                            <textarea title="Message" class="textarea" wrap="off" autofocus></textarea>
                         </div>
                     </div>
                     <div class="button-row row-reverse">
@@ -433,7 +434,7 @@
             </svg>
             <div class="title-wrapper">
                 <h1>PairDrop</h1>
-                <div class="font-subheading">v1.8.2</div>
+                <div class="font-subheading">v1.8.3</div>
             </div>
             <div class="font-subheading" data-i18n-key="about.claim" data-i18n-attrs="text">The easiest way to transfer files across devices</div>
             <div class="row">

public/lang/en.json

@@ -143,6 +143,7 @@
         "file-received": "File Received",
         "file-received-plural": "{{count}} Files Received",
         "file-transfer-requested": "File Transfer Requested",
+        "image-transfer-requested": "Image Transfer Requested",
         "message-received": "Message Received",
         "message-received-plural": "{{count}} Messages Received"
     },

public/lang/fr.json

@@ -0,0 +1,160 @@
+{
+    "header": {
+        "about_title": "A propos de",
+        "language-selector_title": "Choix de la langue",
+        "about_aria-label": "Ouvrir à propos de",
+        "theme-auto_title": "Adapter le thème au système",
+        "theme-light_title": "Toujours utiliser le thème clair",
+        "theme-dark_title": "Toujours utiliser le thème sombre",
+        "notification_title": "Activer les notifications",
+        "install_title": "Installer PairDrop",
+        "pair-device_title": "Associez vos appareils de manière permanente",
+        "edit-paired-devices_title": "Gérer les appareils couplés",
+        "join-public-room_title": "Rejoindre temporairement la salle publique",
+        "cancel-paste-mode": "Terminé"
+    },
+    "instructions": {
+        "no-peers_data-drop-bg": "Déposer pour choisir le destinataire",
+        "no-peers-title": "Ouvrez PairDrop sur d'autres appareils pour envoyer des fichiers",
+        "no-peers-subtitle": "Associez des appareils ou entrez dans une salle publique pour être visible sur d'autres réseaux",
+        "x-instructions_desktop": "Cliquez pour envoyer des fichiers ou faites un clic droit pour envoyer un message",
+        "x-instructions_mobile": "Appuyez pour envoyer des fichiers ou appuyez longuement pour envoyer un message",
+        "x-instructions_data-drop-peer": "Déposer pour envoyer au destinataire",
+        "x-instructions_data-drop-bg": "Lâcher pour choisir le destinataire",
+        "click-to-send": "Cliquez pour envoyer",
+        "tap-to-send": "Appuyez pour envoyer",
+        "activate-paste-mode-base": "Ouvrez PairDrop sur d'autres appareils pour envoyer",
+        "activate-paste-mode-and-other-files": "et {{count}} autres fichiers",
+        "activate-paste-mode-shared-text": "texte partagé"
+    },
+    "footer": {
+        "known-as": "Vous êtes connu sous le nom de:",
+        "display-name_data-placeholder": "Chargement…",
+        "display-name_title": "Modifiez le nom de votre appareil de manière permanente",
+        "discovery": "Vous pouvez être découvert:",
+        "on-this-network": "sur ce réseau",
+        "on-this-network_title": "Vous pouvez être découvert par tout le monde sur ce réseau.",
+        "paired-devices": "par les appareils couplés",
+        "paired-devices_title": "Vous pouvez être découvert par les appareils couplés à tout moment, indépendamment du réseau.",
+        "public-room-devices": "dans la salle {{roomId}}",
+        "public-room-devices_title": "Vous pouvez être découvert par les appareils de cette salle publique indépendamment du réseau.",
+        "traffic": "Le trafic est",
+        "routed": "routé via le serveur",
+        "webrtc": "si WebRTC n'est pas disponible.",
+        "display-name_placeholder": "Chargement…"
+    },
+    "dialogs": {
+        "pair-devices-title": "Associer les appareils de manière permanente",
+        "input-key-on-this-device": "Saisissez cette clé sur un autre appareil",
+        "scan-qr-code": "ou scannez le QR-code.",
+        "enter-key-from-another-device": "Entrez ici la clé d'un autre appareil.",
+        "temporary-public-room-title": "Salle publique temporaire",
+        "input-room-id-on-another-device": "Saisissez cet ID de salle sur un autre appareil",
+        "enter-room-id-from-another-device": "Entrez l'ID de la salle depuis un autre appareil pour rejoindre la salle.",
+        "hr-or": "OU",
+        "pair": "associer",
+        "cancel": "Annuler",
+        "edit-paired-devices-title": "Modifier les appareils couplés",
+        "unpair": "Dissocier",
+        "paired-devices-wrapper_data-empty": "Aucun appareil couplé.",
+        "auto-accept-instructions-1": "Activer",
+        "auto-accept": "auto-accepter",
+        "auto-accept-instructions-2": "pour accepter automatiquement tous les fichiers envoyés depuis cet appareil.",
+        "close": "Fermer",
+        "join": "Rejoindre",
+        "leave": "Partir",
+        "would-like-to-share": "aimerait partager",
+        "accept": "Accepter",
+        "decline": "Refuser",
+        "has-sent": "a envoyé:",
+        "share": "Partage",
+        "download": "Télécharger",
+        "send-message-title": "Envoyer un message",
+        "send-message-to": "Envoyer un message à",
+        "send": "Envoyer",
+        "receive-text-title": "Message reçu",
+        "copy": "Copier",
+        "base64-processing": "Traitement…",
+        "base64-tap-to-paste": "Appuyez ici pour coller {{type}}",
+        "base64-paste-to-send": "Coller ici pour envoyer {{type}}",
+        "base64-text": "texte",
+        "base64-files": "fichiers",
+        "file-other-description-image": "et 1 autre image",
+        "file-other-description-file": "et 1 autre fichier",
+        "file-other-description-image-plural": "et {{count}} autres images",
+        "file-other-description-file-plural": "et {{count}} autres fichiers",
+        "title-image": "Image",
+        "title-file": "Fichier",
+        "title-image-plural": "Images",
+        "title-file-plural": "Fichiers",
+        "receive-title": "{{descriptor}} Reçu",
+        "download-again": "Télécharger à nouveau",
+        "language-selector-title": "Sélectionnez la langue",
+        "system-language": "Langue du système"
+    },
+    "about": {
+        "close-about_aria-label": "Fermer à propos de PairDrop",
+        "claim": "Le moyen le plus simple de transférer des fichiers entre appareils",
+        "github_title": "PairDrop sur GitHub",
+        "buy-me-a-coffee_title": "Achete-moi un café!",
+        "tweet_title": "Tweet à propos de PairDrop",
+        "faq_title": "Questions fréquemment posées"
+    },
+    "notifications": {
+        "display-name-changed-permanently": "Le nom d'affichage est modifié de manière permanente.",
+        "display-name-changed-temporarily": "Le nom d'affichage est modifié uniquement pour cette session.",
+        "display-name-random-again": "Le nom d'affichage est à nouveau généré aléatoirement.",
+        "download-successful": "{{descriptor}} téléchargé",
+        "pairing-tabs-error": "Le couplage de deux onglets de navigateur Web est impossible.",
+        "pairing-success": "Appareils couplés.",
+        "pairing-not-persistent": "Les appareils couplés ne sont pas persistants.",
+        "pairing-key-invalid": "Clé invalide",
+        "pairing-key-invalidated": "Clé {{key}} invalidée.",
+        "pairing-cleared": "Tous les appareils ne sont plus appairés.",
+        "public-room-id-invalid": "ID de salle non valide",
+        "public-room-left": "Salle publique {{publicRoomId}} quittée",
+        "copied-to-clipboard": "Copié dans le presse-papier",
+        "copied-to-clipboard-error": "Copie impossible. Copier manuellement.",
+        "text-content-incorrect": "Le contenu du texte est incorrect.",
+        "file-content-incorrect": "Le contenu du fichier est incorrect.",
+        "clipboard-content-incorrect": "Le contenu du presse-papiers est incorrect.",
+        "notifications-enabled": "Notifications activées.",
+        "link-received": "Lien reçu par {{name}} - Cliquez pour ouvrir",
+        "message-received": "Message reçu par {{name}} - Cliquez pour copier",
+        "click-to-download": "Cliquez pour télécharger",
+        "request-title": "{{name}} souhaite transférer {{count}} {{descriptor}}",
+        "click-to-show": "Cliquez pour afficher",
+        "copied-text": "Texte copié dans le presse-papiers",
+        "copied-text-error": "L'écriture dans le presse-papiers a échoué. Copiez manuellement!",
+        "offline": "Vous êtes hors ligne",
+        "online": "Vous êtes de nouveau en ligne",
+        "connected": "Connecté.",
+        "online-requirement-pairing": "Vous devez être en ligne pour coupler des appareils.",
+        "online-requirement-public-room": "Vous devez être en ligne pour créer une salle publique.",
+        "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. Etes-vous sûr de vouloir fermer PairDrop?",
+        "rate-limit-join-key": "Limite de débit atteinte. Attendez 10 secondes et réessayez.",
+        "selected-peer-left": "Appareils selectionnés restants."
+    },
+    "document-titles": {
+        "file-received": "Fichier reçu",
+        "file-received-plural": "{{count}} fichiers reçus",
+        "file-transfer-requested": "Transfert de fichier demandé",
+        "image-transfer-requested": "Transfert d'image demandé",
+        "message-received": "Message reçu",
+        "message-received-plural": "{{count}} Messages reçus"
+    },
+    "peer-ui": {
+        "click-to-send-paste-mode": "Cliquez pour envoyer {{descriptor}}",
+        "click-to-send": "Cliquez pour envoyer des fichiers ou faites un clic droit pour envoyer un message",
+        "connection-hash": "Pour vérifier la sécurité du chiffrement de bout en bout, comparez ce numéro de sécurité sur les deux appareils",
+        "preparing": "Préparation…",
+        "waiting": "En attente…",
+        "processing": "En cours…",
+        "transferring": "Transfert en cours…"
+    }
+}

public/scripts/localization.js

@@ -1,7 +1,7 @@
 class Localization {
     constructor() {
         Localization.defaultLocale = "en";
-        Localization.supportedLocales = ["en", "nb", "ru", "zh-CN", "de", "ro", "id"];
+        Localization.supportedLocales = ["en", "nb", "ru", "zh-CN", "de", "ro", "id", "fr"];
         Localization.translations = {};
         Localization.defaultTranslations = {};
 

public/scripts/network.js

@@ -220,7 +220,9 @@ class ServerConnection {
 
     _onDisconnect() {
         console.log('WS: server disconnected');
-        Events.fire('notify-user', Localization.getTranslation("notifications.connecting"));
+        setTimeout(() => {
+            Events.fire('notify-user', Localization.getTranslation("notifications.connecting"));
+        }, 100); //delay for 100ms to prevent flickering on page reload
         clearTimeout(this._reconnectTimer);
         this._reconnectTimer = setTimeout(_ => this._connect(), 1000);
         Events.fire('ws-disconnected');

public/scripts/ui.js

@@ -36,9 +36,24 @@ class PeersUI {
         Events.on('drop', e => this._onDrop(e));
         Events.on('keydown', e => this._onKeyDown(e));
 
+        this.$header = document.querySelector('body > header')
         this.$xPeers = $$('x-peers');
         this.$xNoPeers = $$('x-no-peers');
         this.$xInstructions = $$('x-instructions');
+        this.$center = $$('#center');
+        this.$logo = $$('footer .icon.logo');
+        this.$discoveryWrapper = $$('footer .discovery-wrapper');
+        this.$knownAsWrapper = $$('footer .known-as-wrapper');
+
+        this.$header.style.opacity = "1";
+        this.$xPeers.style.opacity = "1";
+        this.$xNoPeers.style.opacity = "1";
+        this.$xInstructions.style.opacity = "0.5";
+        this.$center.style.opacity = "1";
+        this.$logo.style.opacity = "1";
+        this.$discoveryWrapper.style.opacity = "1";
+        this.$knownAsWrapper.style.opacity = "1";
+
 
         Events.on('peer-added', _ => this.evaluateOverflowing());
         Events.on('bg-resize', _ => this.evaluateOverflowing());
@@ -1004,9 +1019,13 @@ class ReceiveRequestDialog extends ReceiveDialog {
             this.$previewBox.appendChild(element)
         }
 
-        this.$receiveTitle.innerText = `${request.imagesOnly ? 'Image' : 'File'} Transfer Request`
+        const transferRequestTitle= request.imagesOnly
+            ? Localization.getTranslation('document-titles.image-transfer-requested')
+            : Localization.getTranslation('document-titles.file-transfer-requested');
 
-        document.title = `${ Localization.getTranslation("document-titles.file-transfer-requested") } - PairDrop`;
+        this.$receiveTitle.innerText = transferRequestTitle;
+
+        document.title =  `${transferRequestTitle} - PairDrop`;
         document.changeFavicon("images/favicon-96x96-notification.png");
         this.show();
     }
@@ -1705,7 +1724,7 @@ class SendTextDialog extends Dialog {
     constructor() {
         super('send-text-dialog');
         Events.on('text-recipient', e => this._onRecipient(e.detail.peerId, e.detail.deviceName));
-        this.$text = this.$el.querySelector('#text-input');
+        this.$text = this.$el.querySelector('.textarea');
         this.$peerDisplayName = this.$el.querySelector('.display-name');
         this.$form = this.$el.querySelector('form');
         this.$submit = this.$el.querySelector('button[type="submit"]');
@@ -1726,7 +1745,7 @@ class SendTextDialog extends Dialog {
     }
 
     _textInputEmpty() {
-        return !this.$text.innerText || this.$text.innerText === "\n";
+        return !this.$text.value || this.$text.value === "\n";
     }
 
     _onChange(e) {
@@ -1748,7 +1767,6 @@ class SendTextDialog extends Dialog {
         const range = document.createRange();
         const sel = window.getSelection();
 
-        this.$text.focus();
         range.selectNodeContents(this.$text);
         sel.removeAllRanges();
         sel.addRange(range);
@@ -1762,7 +1780,7 @@ class SendTextDialog extends Dialog {
     _send() {
         Events.fire('send-text', {
             to: this.correspondingPeerId,
-            text: this.$text.innerText
+            text: this.$text.value
         });
         this.$text.value = "";
         this.hide();
@@ -2044,6 +2062,7 @@ class Notifications {
             this.$button.removeAttribute('hidden');
             this.$button.addEventListener('click', _ => this._requestPermission());
         }
+
         Events.on('text-received', e => this._messageNotification(e.detail.text, e.detail.peerId));
         Events.on('files-received', e => this._downloadNotification(e.detail.files));
         Events.on('files-transfer-request', e => this._requestNotification(e.detail.request, e.detail.peerId));
@@ -2729,6 +2748,7 @@ Events.on('load', () => {
         dw = Math.round(Math.max(w, h, 1000) / 13);
 
         drawCircles(cCtx, dw);
+        c.style.opacity = "1";
     }
 
     Events.on('bg-resize', _ => init());
@@ -2750,7 +2770,7 @@ Events.on('load', () => {
         }
     }
 
-    init();
+    setTimeout(_ => init(), 300);
 });
 
 document.changeFavicon = function (src) {

public/service-worker.js

@@ -1,4 +1,4 @@
-const cacheVersion = 'v1.8.2';
+const cacheVersion = 'v1.8.3';
 const cacheTitle = `pairdrop-cache-${cacheVersion}`;
 const urlsToCache = [
     'index.html',

public/styles.css

@@ -415,8 +415,9 @@ x-no-peers {
     display: flex;
     flex-direction: column;
     padding: 8px;
+    height: 137px;
     text-align: center;
-    animation: fade-in 300ms;
+    animation: fade-in 600ms;
     animation-fill-mode: backwards;
     /* prevent flickering on load */
     animation-iteration-count: 0;
@@ -612,6 +613,7 @@ footer .logo {
     margin-bottom: 8px;
     color: var(--primary-color);
     margin-top: -10px;
+    animation: ease-in;
 }
 
 .discovery-wrapper {
@@ -622,6 +624,7 @@ footer .logo {
     padding: 2px;
     background-color: rgb(var(--bg-color));
     transition: background-color 0.5s ease;
+    min-height: 24px;
 }
 
 /*You can be discovered wrapper*/
@@ -1008,7 +1011,7 @@ x-dialog .dialog-subheader {
     padding-bottom: 0;
 }
 
-#text-input {
+#send-text-dialog .textarea {
     min-height: 200px;
     width: 100%;
 }
@@ -1200,15 +1203,22 @@ button::-moz-focus-inner {
     z-index: 1;
 }
 
+#about:not(:target) header.fade-in {
+    transition-delay: 400ms;
+}
+
+#about:target header.fade-in {
+    transition-delay: 100ms;
+}
+
 #about .fade-in {
-    transition: opacity 300ms;
+    transition: opacity 300ms ease 300ms;
     will-change: opacity;
-    transition-delay: 300ms;
     pointer-events: all;
 }
 
 #about:not(:target) .fade-in {
-    opacity: 0;
+    opacity: 0 !important;
     pointer-events: none;
     transition-delay: 0s;
 }
@@ -1258,10 +1268,6 @@ button::-moz-focus-inner {
     flex-grow: 1;
 }
 
-#about header {
-    align-self: end;
-}
-
 canvas.circles {
     width: 100vw;
     position: absolute;
@@ -1345,7 +1351,6 @@ x-toast:not([show]):not(:hover) {
 x-instructions {
     position: relative;
     opacity: 0.5;
-    transition: opacity 300ms;
     text-align: center;
     margin-left: 10px;
     margin-right: 10px;
@@ -1372,7 +1377,7 @@ x-instructions p {
 }
 
 x-peers:empty~x-instructions {
-    opacity: 0;
+    opacity: 0 !important;
 }
 
 @media (hover: none) and (pointer: coarse) {
@@ -1382,6 +1387,21 @@ x-peers:empty~x-instructions {
     }
 }
 
+/* Prevent Cumulative Layout Shift */
+
+body > header,
+canvas,
+#center,
+x-no-peers,
+x-peers,
+x-instructions,
+footer > .icon.logo,
+.discovery-wrapper,
+.known-as-wrapper {
+    transition: opacity 0.5s ease 0.1s;
+    opacity: 0; /* will be set to 1 after initial translation is loaded */
+}
+
 /* Responsive Styles */
 
 @media screen and (min-height: 800px) {

public_included_ws_fallback/index.html

@@ -155,6 +155,7 @@
                     <button class="button fw" data-i18n-key="dialogs.system-language" data-i18n-attrs="text">System Language</button>
                     <button class="button fw" value="en">English</button>
                     <button class="button fw" value="de">Deutsch (German)</button>
+                    <button class="button fw" value="fr">Français (French)</button>
                     <button class="button fw" value="id">Bahasa Indonesia (Indonesian)</button>
                     <button class="button fw" value="nb">Norsk (Norwegian)</button>
                     <button class="button fw" value="ro">Română (Romanian)</button>
@@ -371,7 +372,7 @@
                     </div>
                     <div class="row">
                         <div class="column fw">
-                            <div id="text-input" title="Message" class="textarea" role="textbox" autocapitalize="none" spellcheck="false" autofocus contenteditable></div>
+                            <textarea title="Message" class="textarea" wrap="off" autofocus></textarea>
                         </div>
                     </div>
                     <div class="button-row row-reverse">
@@ -438,7 +439,7 @@
             </svg>
             <div class="title-wrapper">
                 <h1>PairDrop</h1>
-                <div class="font-subheading">v1.8.2</div>
+                <div class="font-subheading">v1.8.3</div>
             </div>
             <div class="font-subheading" data-i18n-key="about.claim" data-i18n-attrs="text">The easiest way to transfer files across devices</div>
             <div class="row">

public_included_ws_fallback/lang/en.json

@@ -143,6 +143,7 @@
         "file-received": "File Received",
         "file-received-plural": "{{count}} Files Received",
         "file-transfer-requested": "File Transfer Requested",
+        "image-transfer-requested": "Image Transfer Requested",
         "message-received": "Message Received",
         "message-received-plural": "{{count}} Messages Received"
     },

public_included_ws_fallback/lang/fr.json

@@ -0,0 +1,160 @@
+{
+    "header": {
+        "about_title": "A propos de",
+        "language-selector_title": "Choix de la langue",
+        "about_aria-label": "Ouvrir à propos de",
+        "theme-auto_title": "Adapter le thème au système",
+        "theme-light_title": "Toujours utiliser le thème clair",
+        "theme-dark_title": "Toujours utiliser le thème sombre",
+        "notification_title": "Activer les notifications",
+        "install_title": "Installer PairDrop",
+        "pair-device_title": "Associez vos appareils de manière permanente",
+        "edit-paired-devices_title": "Gérer les appareils couplés",
+        "join-public-room_title": "Rejoindre temporairement la salle publique",
+        "cancel-paste-mode": "Terminé"
+    },
+    "instructions": {
+        "no-peers_data-drop-bg": "Déposer pour choisir le destinataire",
+        "no-peers-title": "Ouvrez PairDrop sur d'autres appareils pour envoyer des fichiers",
+        "no-peers-subtitle": "Associez des appareils ou entrez dans une salle publique pour être visible sur d'autres réseaux",
+        "x-instructions_desktop": "Cliquez pour envoyer des fichiers ou faites un clic droit pour envoyer un message",
+        "x-instructions_mobile": "Appuyez pour envoyer des fichiers ou appuyez longuement pour envoyer un message",
+        "x-instructions_data-drop-peer": "Déposer pour envoyer au destinataire",
+        "x-instructions_data-drop-bg": "Lâcher pour choisir le destinataire",
+        "click-to-send": "Cliquez pour envoyer",
+        "tap-to-send": "Appuyez pour envoyer",
+        "activate-paste-mode-base": "Ouvrez PairDrop sur d'autres appareils pour envoyer",
+        "activate-paste-mode-and-other-files": "et {{count}} autres fichiers",
+        "activate-paste-mode-shared-text": "texte partagé"
+    },
+    "footer": {
+        "known-as": "Vous êtes connu sous le nom de:",
+        "display-name_data-placeholder": "Chargement…",
+        "display-name_title": "Modifiez le nom de votre appareil de manière permanente",
+        "discovery": "Vous pouvez être découvert:",
+        "on-this-network": "sur ce réseau",
+        "on-this-network_title": "Vous pouvez être découvert par tout le monde sur ce réseau.",
+        "paired-devices": "par les appareils couplés",
+        "paired-devices_title": "Vous pouvez être découvert par les appareils couplés à tout moment, indépendamment du réseau.",
+        "public-room-devices": "dans la salle {{roomId}}",
+        "public-room-devices_title": "Vous pouvez être découvert par les appareils de cette salle publique indépendamment du réseau.",
+        "traffic": "Le trafic est",
+        "routed": "routé via le serveur",
+        "webrtc": "si WebRTC n'est pas disponible.",
+        "display-name_placeholder": "Chargement…"
+    },
+    "dialogs": {
+        "pair-devices-title": "Associer les appareils de manière permanente",
+        "input-key-on-this-device": "Saisissez cette clé sur un autre appareil",
+        "scan-qr-code": "ou scannez le QR-code.",
+        "enter-key-from-another-device": "Entrez ici la clé d'un autre appareil.",
+        "temporary-public-room-title": "Salle publique temporaire",
+        "input-room-id-on-another-device": "Saisissez cet ID de salle sur un autre appareil",
+        "enter-room-id-from-another-device": "Entrez l'ID de la salle depuis un autre appareil pour rejoindre la salle.",
+        "hr-or": "OU",
+        "pair": "associer",
+        "cancel": "Annuler",
+        "edit-paired-devices-title": "Modifier les appareils couplés",
+        "unpair": "Dissocier",
+        "paired-devices-wrapper_data-empty": "Aucun appareil couplé.",
+        "auto-accept-instructions-1": "Activer",
+        "auto-accept": "auto-accepter",
+        "auto-accept-instructions-2": "pour accepter automatiquement tous les fichiers envoyés depuis cet appareil.",
+        "close": "Fermer",
+        "join": "Rejoindre",
+        "leave": "Partir",
+        "would-like-to-share": "aimerait partager",
+        "accept": "Accepter",
+        "decline": "Refuser",
+        "has-sent": "a envoyé:",
+        "share": "Partage",
+        "download": "Télécharger",
+        "send-message-title": "Envoyer un message",
+        "send-message-to": "Envoyer un message à",
+        "send": "Envoyer",
+        "receive-text-title": "Message reçu",
+        "copy": "Copier",
+        "base64-processing": "Traitement…",
+        "base64-tap-to-paste": "Appuyez ici pour coller {{type}}",
+        "base64-paste-to-send": "Coller ici pour envoyer {{type}}",
+        "base64-text": "texte",
+        "base64-files": "fichiers",
+        "file-other-description-image": "et 1 autre image",
+        "file-other-description-file": "et 1 autre fichier",
+        "file-other-description-image-plural": "et {{count}} autres images",
+        "file-other-description-file-plural": "et {{count}} autres fichiers",
+        "title-image": "Image",
+        "title-file": "Fichier",
+        "title-image-plural": "Images",
+        "title-file-plural": "Fichiers",
+        "receive-title": "{{descriptor}} Reçu",
+        "download-again": "Télécharger à nouveau",
+        "language-selector-title": "Sélectionnez la langue",
+        "system-language": "Langue du système"
+    },
+    "about": {
+        "close-about_aria-label": "Fermer à propos de PairDrop",
+        "claim": "Le moyen le plus simple de transférer des fichiers entre appareils",
+        "github_title": "PairDrop sur GitHub",
+        "buy-me-a-coffee_title": "Achete-moi un café!",
+        "tweet_title": "Tweet à propos de PairDrop",
+        "faq_title": "Questions fréquemment posées"
+    },
+    "notifications": {
+        "display-name-changed-permanently": "Le nom d'affichage est modifié de manière permanente.",
+        "display-name-changed-temporarily": "Le nom d'affichage est modifié uniquement pour cette session.",
+        "display-name-random-again": "Le nom d'affichage est à nouveau généré aléatoirement.",
+        "download-successful": "{{descriptor}} téléchargé",
+        "pairing-tabs-error": "Le couplage de deux onglets de navigateur Web est impossible.",
+        "pairing-success": "Appareils couplés.",
+        "pairing-not-persistent": "Les appareils couplés ne sont pas persistants.",
+        "pairing-key-invalid": "Clé invalide",
+        "pairing-key-invalidated": "Clé {{key}} invalidée.",
+        "pairing-cleared": "Tous les appareils ne sont plus appairés.",
+        "public-room-id-invalid": "ID de salle non valide",
+        "public-room-left": "Salle publique {{publicRoomId}} quittée",
+        "copied-to-clipboard": "Copié dans le presse-papier",
+        "copied-to-clipboard-error": "Copie impossible. Copier manuellement.",
+        "text-content-incorrect": "Le contenu du texte est incorrect.",
+        "file-content-incorrect": "Le contenu du fichier est incorrect.",
+        "clipboard-content-incorrect": "Le contenu du presse-papiers est incorrect.",
+        "notifications-enabled": "Notifications activées.",
+        "link-received": "Lien reçu par {{name}} - Cliquez pour ouvrir",
+        "message-received": "Message reçu par {{name}} - Cliquez pour copier",
+        "click-to-download": "Cliquez pour télécharger",
+        "request-title": "{{name}} souhaite transférer {{count}} {{descriptor}}",
+        "click-to-show": "Cliquez pour afficher",
+        "copied-text": "Texte copié dans le presse-papiers",
+        "copied-text-error": "L'écriture dans le presse-papiers a échoué. Copiez manuellement!",
+        "offline": "Vous êtes hors ligne",
+        "online": "Vous êtes de nouveau en ligne",
+        "connected": "Connecté.",
+        "online-requirement-pairing": "Vous devez être en ligne pour coupler des appareils.",
+        "online-requirement-public-room": "Vous devez être en ligne pour créer une salle publique.",
+        "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. Etes-vous sûr de vouloir fermer PairDrop?",
+        "rate-limit-join-key": "Limite de débit atteinte. Attendez 10 secondes et réessayez.",
+        "selected-peer-left": "Appareils selectionnés restants."
+    },
+    "document-titles": {
+        "file-received": "Fichier reçu",
+        "file-received-plural": "{{count}} fichiers reçus",
+        "file-transfer-requested": "Transfert de fichier demandé",
+        "image-transfer-requested": "Transfert d'image demandé",
+        "message-received": "Message reçu",
+        "message-received-plural": "{{count}} Messages reçus"
+    },
+    "peer-ui": {
+        "click-to-send-paste-mode": "Cliquez pour envoyer {{descriptor}}",
+        "click-to-send": "Cliquez pour envoyer des fichiers ou faites un clic droit pour envoyer un message",
+        "connection-hash": "Pour vérifier la sécurité du chiffrement de bout en bout, comparez ce numéro de sécurité sur les deux appareils",
+        "preparing": "Préparation…",
+        "waiting": "En attente…",
+        "processing": "En cours…",
+        "transferring": "Transfert en cours…"
+    }
+}

public_included_ws_fallback/scripts/localization.js

@@ -1,7 +1,7 @@
 class Localization {
     constructor() {
         Localization.defaultLocale = "en";
-        Localization.supportedLocales = ["en", "nb", "ru", "zh-CN", "de", "ro", "id"];
+        Localization.supportedLocales = ["en", "nb", "ru", "zh-CN", "de", "ro", "id", "fr"];
         Localization.translations = {};
         Localization.defaultTranslations = {};
 

public_included_ws_fallback/scripts/network.js

@@ -231,7 +231,9 @@ class ServerConnection {
 
     _onDisconnect() {
         console.log('WS: server disconnected');
-        Events.fire('notify-user', Localization.getTranslation("notifications.connecting"));
+        setTimeout(() => {
+            Events.fire('notify-user', Localization.getTranslation("notifications.connecting"));
+        }, 100); //delay for 100ms to prevent flickering on page reload
         clearTimeout(this._reconnectTimer);
         this._reconnectTimer = setTimeout(_ => this._connect(), 1000);
         Events.fire('ws-disconnected');

public_included_ws_fallback/scripts/ui.js

@@ -36,9 +36,24 @@ class PeersUI {
         Events.on('drop', e => this._onDrop(e));
         Events.on('keydown', e => this._onKeyDown(e));
 
+        this.$header = document.querySelector('body > header')
         this.$xPeers = $$('x-peers');
         this.$xNoPeers = $$('x-no-peers');
         this.$xInstructions = $$('x-instructions');
+        this.$center = $$('#center');
+        this.$logo = $$('footer .icon.logo');
+        this.$discoveryWrapper = $$('footer .discovery-wrapper');
+        this.$knownAsWrapper = $$('footer .known-as-wrapper');
+
+        this.$header.style.opacity = "1";
+        this.$xPeers.style.opacity = "1";
+        this.$xNoPeers.style.opacity = "1";
+        this.$xInstructions.style.opacity = "0.5";
+        this.$center.style.opacity = "1";
+        this.$logo.style.opacity = "1";
+        this.$discoveryWrapper.style.opacity = "1";
+        this.$knownAsWrapper.style.opacity = "1";
+
 
         Events.on('peer-added', _ => this.evaluateOverflowing());
         Events.on('bg-resize', _ => this.evaluateOverflowing());
@@ -1006,9 +1021,13 @@ class ReceiveRequestDialog extends ReceiveDialog {
             this.$previewBox.appendChild(element)
         }
 
-        this.$receiveTitle.innerText = `${request.imagesOnly ? 'Image' : 'File'} Transfer Request`
+        const transferRequestTitle= request.imagesOnly
+            ? Localization.getTranslation('document-titles.image-transfer-requested')
+            : Localization.getTranslation('document-titles.file-transfer-requested');
 
-        document.title = `${ Localization.getTranslation("document-titles.file-transfer-requested") } - PairDrop`;
+        this.$receiveTitle.innerText = transferRequestTitle;
+
+        document.title =  `${transferRequestTitle} - PairDrop`;
         document.changeFavicon("images/favicon-96x96-notification.png");
         this.show();
     }
@@ -1707,7 +1726,7 @@ class SendTextDialog extends Dialog {
     constructor() {
         super('send-text-dialog');
         Events.on('text-recipient', e => this._onRecipient(e.detail.peerId, e.detail.deviceName));
-        this.$text = this.$el.querySelector('#text-input');
+        this.$text = this.$el.querySelector('.textarea');
         this.$peerDisplayName = this.$el.querySelector('.display-name');
         this.$form = this.$el.querySelector('form');
         this.$submit = this.$el.querySelector('button[type="submit"]');
@@ -1728,7 +1747,7 @@ class SendTextDialog extends Dialog {
     }
 
     _textInputEmpty() {
-        return !this.$text.innerText || this.$text.innerText === "\n";
+        return !this.$text.value || this.$text.value === "\n";
     }
 
     _onChange(e) {
@@ -1750,7 +1769,6 @@ class SendTextDialog extends Dialog {
         const range = document.createRange();
         const sel = window.getSelection();
 
-        this.$text.focus();
         range.selectNodeContents(this.$text);
         sel.removeAllRanges();
         sel.addRange(range);
@@ -1764,7 +1782,7 @@ class SendTextDialog extends Dialog {
     _send() {
         Events.fire('send-text', {
             to: this.correspondingPeerId,
-            text: this.$text.innerText
+            text: this.$text.value
         });
         this.$text.value = "";
         this.hide();
@@ -2046,6 +2064,7 @@ class Notifications {
             this.$button.removeAttribute('hidden');
             this.$button.addEventListener('click', _ => this._requestPermission());
         }
+
         Events.on('text-received', e => this._messageNotification(e.detail.text, e.detail.peerId));
         Events.on('files-received', e => this._downloadNotification(e.detail.files));
         Events.on('files-transfer-request', e => this._requestNotification(e.detail.request, e.detail.peerId));
@@ -2730,6 +2749,7 @@ Events.on('load', () => {
         dw = Math.round(Math.max(w, h, 1000) / 13);
 
         drawCircles(cCtx, dw);
+        c.style.opacity = "1";
     }
 
     Events.on('bg-resize', _ => init());
@@ -2751,7 +2771,7 @@ Events.on('load', () => {
         }
     }
 
-    init();
+    setTimeout(_ => init(), 300);
 });
 
 document.changeFavicon = function (src) {

public_included_ws_fallback/service-worker.js

@@ -1,4 +1,4 @@
-const cacheVersion = 'v1.8.2';
+const cacheVersion = 'v1.8.3';
 const cacheTitle = `pairdrop-included-ws-fallback-cache-${cacheVersion}`;
 const urlsToCache = [
     'index.html',

public_included_ws_fallback/styles.css

@@ -420,8 +420,9 @@ x-no-peers {
     display: flex;
     flex-direction: column;
     padding: 8px;
+    height: 137px;
     text-align: center;
-    animation: fade-in 300ms;
+    animation: fade-in 600ms;
     animation-fill-mode: backwards;
     /* prevent flickering on load */
     animation-iteration-count: 0;
@@ -642,6 +643,7 @@ footer .logo {
     margin-bottom: 8px;
     color: var(--primary-color);
     margin-top: -10px;
+    animation: ease-in;
 }
 
 .discovery-wrapper {
@@ -652,6 +654,7 @@ footer .logo {
     padding: 2px;
     background-color: rgb(var(--bg-color));
     transition: background-color 0.5s ease;
+    min-height: 24px;
 }
 
 /*You can be discovered wrapper*/
@@ -1038,7 +1041,7 @@ x-dialog .dialog-subheader {
     padding-bottom: 0;
 }
 
-#text-input {
+#send-text-dialog .textarea {
     min-height: 200px;
     width: 100%;
 }
@@ -1230,15 +1233,22 @@ button::-moz-focus-inner {
     z-index: 1;
 }
 
+#about:not(:target) header.fade-in {
+    transition-delay: 400ms;
+}
+
+#about:target header.fade-in {
+    transition-delay: 100ms;
+}
+
 #about .fade-in {
-    transition: opacity 300ms;
+    transition: opacity 300ms ease 300ms;
     will-change: opacity;
-    transition-delay: 300ms;
     pointer-events: all;
 }
 
 #about:not(:target) .fade-in {
-    opacity: 0;
+    opacity: 0 !important;
     pointer-events: none;
     transition-delay: 0s;
 }
@@ -1288,10 +1298,6 @@ button::-moz-focus-inner {
     flex-grow: 1;
 }
 
-#about header {
-    align-self: end;
-}
-
 canvas.circles {
     width: 100vw;
     position: absolute;
@@ -1375,7 +1381,6 @@ x-toast:not([show]):not(:hover) {
 x-instructions {
     position: relative;
     opacity: 0.5;
-    transition: opacity 300ms;
     text-align: center;
     margin-left: 10px;
     margin-right: 10px;
@@ -1402,7 +1407,7 @@ x-instructions p {
 }
 
 x-peers:empty~x-instructions {
-    opacity: 0;
+    opacity: 0 !important;
 }
 
 @media (hover: none) and (pointer: coarse) {
@@ -1412,6 +1417,21 @@ x-peers:empty~x-instructions {
     }
 }
 
+/* Prevent Cumulative Layout Shift */
+
+body > header,
+canvas,
+#center,
+x-no-peers,
+x-peers,
+x-instructions,
+footer > .icon.logo,
+.discovery-wrapper,
+.known-as-wrapper {
+    transition: opacity 0.5s ease 0.1s;
+    opacity: 0; /* will be set to 1 after initial translation is loaded */
+}
+
 /* Responsive Styles */
 
 @media screen and (min-height: 800px) {