From 0c2da78ed2bb7ca27fcc1f827317f462325a2bcd Mon Sep 17 00:00:00 2001 From: schlagmichdoch Date: Fri, 24 Nov 2023 16:25:30 +0100 Subject: [PATCH] Refactor "paste mode" to "share mode"; Introduce a small clipboard panel instead of changing the xNoPeer instructions. This also enables the use of the header btns while sharing; Add possibility to change shared text before sending via a dialog; Add a setting that specifies whether that dialog should always be opened when sharing text --- public/index.html | 211 +++++++--- public/lang/ar.json | 14 +- public/lang/de.json | 14 +- public/lang/en.json | 25 +- public/lang/es.json | 14 +- public/lang/fr.json | 14 +- public/lang/id.json | 14 +- public/lang/it.json | 14 +- public/lang/ja.json | 14 +- public/lang/nb.json | 14 +- public/lang/nl.json | 14 +- public/lang/ro.json | 14 +- public/lang/ru.json | 14 +- public/lang/tr.json | 14 +- public/lang/zh-CN.json | 14 +- public/scripts/main.js | 1 + public/scripts/network.js | 50 +-- public/scripts/ui-main.js | 15 +- public/scripts/ui.js | 653 ++++++++++++++++++++---------- public/scripts/util.js | 37 ++ public/styles/deferred-styles.css | 114 ++++-- public/styles/styles-main.css | 126 +++--- 22 files changed, 908 insertions(+), 506 deletions(-) diff --git a/public/index.html b/public/index.html index c8afe83..62aa65c 100644 --- a/public/index.html +++ b/public/index.html @@ -41,61 +41,62 @@
- - - - - -
- - - -
-
-
+
+ - + + + +
+ +
-
-
+
+
- +
-
- - - +
+
+ + + +
+
+ + + +
+ + +
+ + + +
+ +
+ + + +
- - -
- - - -
- -
- - - -
-
@@ -106,9 +107,35 @@

- -

- + + -
+
@@ -370,8 +397,8 @@
-
- +
+
@@ -402,9 +429,9 @@
-
+
- +
@@ -430,10 +457,10 @@
-
+
-
+
@@ -459,20 +486,53 @@
-
+
+ + + + +
+
+

+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+ +
+ + + -
+
@@ -480,7 +540,14 @@
- + + +
+ + + +
+
@@ -555,9 +622,9 @@ - + - + @@ -598,6 +665,18 @@ + + + + + + + + + + + + diff --git a/public/lang/ar.json b/public/lang/ar.json index 6a58459..f952959 100644 --- a/public/lang/ar.json +++ b/public/lang/ar.json @@ -55,7 +55,7 @@ "click-to-show": "اضغط للعرض" }, "header": { - "cancel-paste-mode": "تمّ", + "cancel-share-mode": "تمّ", "theme-auto_title": "تكيٌف المظهر مع النظام", "install_title": "تثبيت PairDrop", "theme-dark_title": "إستخدام دائما المظهر المظلم", @@ -70,12 +70,12 @@ }, "instructions": { "x-instructions_mobile": "انقر لإرسال الملفات أو انقر لفترة طويلة لإرسال رسالة", - "click-to-send": "انقر للإرسال", - "activate-paste-mode-and-other-files": "و{{count}} ملفات أخرى", - "tap-to-send": "انقر للإرسال", - "activate-paste-mode-base": "افتح PairDrop على الأجهزة الأخرى للإرسال", + "x-instructions-share-mode_desktop": "انقر للإرسال", + "activate-share-mode-and-other-files-plural": "و{{count}} ملفات أخرى", + "x-instructions-share-mode_mobile": "انقر للإرسال", + "activate-share-mode-base": "افتح PairDrop على الأجهزة الأخرى للإرسال", "no-peers-subtitle": "قم بإقران الأجهزة أو ادخل إلى غرفة عامة لتتمكن من إكتشافها على الشبكات الأخرى", - "activate-paste-mode-shared-text": "النص المشترك", + "activate-share-mode-shared-text": "النص المشترك", "x-instructions_desktop": "انقر لإرسال الملفات أو انقر بزر الماوس الأيمن لإرسال رسالة", "no-peers-title": "افتح PairDrop على الأجهزة الأخرى لإرسال الملفات", "x-instructions_data-drop-bg": "حرر لتحديد المستلم", @@ -84,7 +84,7 @@ }, "peer-ui": { "processing": "مُعالجة …", - "click-to-send-paste-mode": "انقر للإرسال {{descriptor}}", + "click-to-send-share-mode": "انقر للإرسال {{descriptor}}", "click-to-send": "انقر لإرسال الملفات أو انقر بزر الماوس الأيمن لإرسال رسالة", "waiting": "يُرجى الإنتظار…", "connection-hash": "للتحقق من أمان التشفير الشامل، قم بمقارنة رقم الأمان هذا على كلا الجهازين", diff --git a/public/lang/de.json b/public/lang/de.json index ab2a95c..e1318f8 100644 --- a/public/lang/de.json +++ b/public/lang/de.json @@ -9,7 +9,7 @@ "theme-auto_title": "Systemstil verwenden", "theme-dark_title": "Immer dunklen Stil verwenden", "theme-light_title": "Immer hellen Stil verwenden", - "cancel-paste-mode": "Fertig", + "cancel-share-mode": "Fertig", "language-selector_title": "Sprache Wählen", "join-public-room_title": "Öffentlichen Raum temporär betreten" }, @@ -138,14 +138,14 @@ "no-peers-title": "Öffne PairDrop auf anderen Geräten, um Dateien zu senden", "no-peers_data-drop-bg": "Hier ablegen, um Empfänger auszuwählen", "no-peers-subtitle": "Kopple Geräte oder besuche einen öffentlichen Raum, damit du in anderen Netzwerken sichtbar bist", - "click-to-send": "Klicke zum Senden von", - "tap-to-send": "Tippe zum Senden von", + "x-instructions-share-mode_desktop": "Klicke zum Senden von", + "x-instructions-share-mode_mobile": "Tippe zum Senden von", "x-instructions_data-drop-peer": "Hier ablegen, um an Peer zu senden", "x-instructions_data-drop-bg": "Loslassen um Empfänger auszuwählen", "x-instructions_mobile": "Tippe, um Dateien zu senden oder tippe lange, um Nachrichten zu senden", - "activate-paste-mode-base": "Öffne PairDrop auf anderen Geräten zum Senden von", - "activate-paste-mode-and-other-files": "und {{count}} anderen Dateien", - "activate-paste-mode-shared-text": "freigegebenem Text" + "activate-share-mode-base": "Öffne PairDrop auf anderen Geräten zum Senden von", + "activate-share-mode-and-other-files-plural": "und {{count}} anderen Dateien", + "activate-share-mode-shared-text": "freigegebenem Text" }, "document-titles": { "file-transfer-requested": "Dateiübertragung angefordert", @@ -159,7 +159,7 @@ "click-to-send": "Klicke, um Dateien zu senden oder benutze einen Rechtsklick, um eine Textnachricht zu senden", "connection-hash": "Um die Ende-zu-Ende Verschlüsselung zu verifizieren, vergleiche die Sicherheitsnummer auf beiden Geräten", "waiting": "Warte…", - "click-to-send-paste-mode": "Klicken um {{descriptor}} zu senden", + "click-to-send-share-mode": "Klicken um {{descriptor}} zu senden", "transferring": "Übertragung läuft…", "processing": "Bearbeitung läuft…", "preparing": "Vorbereitung läuft…" diff --git a/public/lang/en.json b/public/lang/en.json index 6c3a214..9161e41 100644 --- a/public/lang/en.json +++ b/public/lang/en.json @@ -11,7 +11,8 @@ "pair-device_title": "Pair your devices permanently", "edit-paired-devices_title": "Edit paired devices", "join-public-room_title": "Join public room temporarily", - "cancel-paste-mode": "Done" + "cancel-share-mode": "Cancel", + "edit-share-mode": "Edit" }, "instructions": { "no-peers_data-drop-bg": "Release to select recipient", @@ -21,11 +22,14 @@ "x-instructions_mobile": "Tap to send files or long tap to send a message", "x-instructions_data-drop-peer": "Release to send to peer", "x-instructions_data-drop-bg": "Release to select recipient", - "click-to-send": "Click to send", - "tap-to-send": "Tap to send", - "activate-paste-mode-base": "Open PairDrop on other devices to send", - "activate-paste-mode-and-other-files": "and {{count}} other files", - "activate-paste-mode-shared-text": "shared text", + "x-instructions-share-mode_desktop": "Click to send {{descriptor}}", + "x-instructions-share-mode_mobile": "Tap to send {{descriptor}}", + "activate-share-mode-base": "Open PairDrop on other devices to send", + "activate-share-mode-and-other-file": "and 1 other file", + "activate-share-mode-and-other-files-plural": "and {{count}} other files", + "activate-share-mode-shared-text": "shared text", + "activate-share-mode-shared-file": "shared file", + "activate-share-mode-shared-files-plural": "{{count}} shared files", "webrtc-requirement": "To use PairDrop on this instance, WebRTC must be enabled!" }, "footer": { @@ -94,7 +98,12 @@ "language-selector-title": "Set Language", "system-language": "System Language", "public-room-qr-code_title": "Click to copy link to public room", - "pair-devices-qr-code_title": "Click to copy link to pair this device" + "pair-devices-qr-code_title": "Click to copy link to pair this device", + "approve": "approve", + "share-text-title": "Share Text Message", + "share-text-subtitle": "Edit message before sending:", + "share-text-checkbox": "Always show this dialog when sharing text", + "close-toast_title": "Close notification" }, "about": { "close-about_aria-label": "Close About PairDrop", @@ -156,7 +165,7 @@ "message-received-plural": "{{count}} Messages Received" }, "peer-ui": { - "click-to-send-paste-mode": "Click to send {{descriptor}}", + "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", "preparing": "Preparing…", diff --git a/public/lang/es.json b/public/lang/es.json index 5ba42c1..c2392c4 100644 --- a/public/lang/es.json +++ b/public/lang/es.json @@ -4,7 +4,7 @@ "language-selector_title": "Configurar Idioma", "about_title": "Sobre PairDrop", "about_aria-label": "Abrir Sobre PairDrop", - "cancel-paste-mode": "Listo", + "cancel-share-mode": "Listo", "install_title": "Instalar PairDrop", "theme-dark_title": "Siempre usar tema oscuro", "pair-device_title": "Empareja tus dispositivos permanentemente", @@ -73,12 +73,12 @@ }, "instructions": { "x-instructions_mobile": "Toque para enviar archivos o toque prologádamente para enviar un mensaje", - "click-to-send": "Haga clic para enviar", - "activate-paste-mode-and-other-files": "y {{count}} archivos diferentes", - "tap-to-send": "Toca para enviar", - "activate-paste-mode-base": "Abra PairDrop en otros dispositivos para enviar", + "x-instructions-share-mode_desktop": "Haga clic para enviar", + "activate-share-mode-and-other-files-plural": "y {{count}} archivos diferentes", + "x-instructions-share-mode_mobile": "Toca para enviar", + "activate-share-mode-base": "Abra PairDrop en otros dispositivos para enviar", "no-peers-subtitle": "Empareje dispositivos o ingrese a una sala pública para que lo puedan encontrar en otras redes", - "activate-paste-mode-shared-text": "texto compartido", + "activate-share-mode-shared-text": "texto compartido", "x-instructions_desktop": "Haga clic para enviar archivos o haga clic derecho para enviar un mensaje", "no-peers-title": "Abra PairDrop en otros dispositivos para enviar archivos", "x-instructions_data-drop-peer": "Liberar para enviar a un par", @@ -87,7 +87,7 @@ }, "peer-ui": { "processing": "Procesando…", - "click-to-send-paste-mode": "Haga clic para enviar {{descriptor}}", + "click-to-send-share-mode": "Haga clic para enviar {{descriptor}}", "click-to-send": "Haga clic para enviar archivos o haga clic derecho para enviar un mensaje", "waiting": "Esperando…", "connection-hash": "Para verificar la seguridad del cifrado de extremo a extremo, compare este número de seguridad en ambos dispositivos", diff --git a/public/lang/fr.json b/public/lang/fr.json index 133561e..94f6cbf 100644 --- a/public/lang/fr.json +++ b/public/lang/fr.json @@ -11,7 +11,7 @@ "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é" + "cancel-share-mode": "Terminé" }, "instructions": { "no-peers_data-drop-bg": "Déposer pour choisir le destinataire", @@ -21,11 +21,11 @@ "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é" + "x-instructions-share-mode_desktop": "Cliquez pour envoyer", + "x-instructions-share-mode_mobile": "Appuyez pour envoyer", + "activate-share-mode-base": "Ouvrez PairDrop sur d'autres appareils pour envoyer", + "activate-share-mode-and-other-files-plural": "et {{count}} autres fichiers", + "activate-share-mode-shared-text": "texte partagé" }, "footer": { "known-as": "Vous êtes connu comme :", @@ -149,7 +149,7 @@ "message-received-plural": "{{count}} Messages reçus" }, "peer-ui": { - "click-to-send-paste-mode": "Cliquez pour envoyer {{descriptor}}", + "click-to-send-share-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…", diff --git a/public/lang/id.json b/public/lang/id.json index 0e22dc5..e82fe30 100644 --- a/public/lang/id.json +++ b/public/lang/id.json @@ -58,7 +58,7 @@ "room-url-copied-to-clipboard": "Tautan ke ruang publik disalin ke papan klip" }, "header": { - "cancel-paste-mode": "Selesai", + "cancel-share-mode": "Selesai", "theme-auto_title": "Sesuaikan tema dengan sistem", "install_title": "Instal PairDrop", "theme-dark_title": "Selalu gunakan tema gelap", @@ -73,12 +73,12 @@ }, "instructions": { "x-instructions_mobile": "Ketuk untuk mengirim file atau ketuk lama untuk mengirim pesan", - "click-to-send": "Klik untuk mengirim", - "activate-paste-mode-and-other-files": "dan {{count}} file lainnya", - "tap-to-send": "Ketuk untuk mengirim", - "activate-paste-mode-base": "Buka PairDrop di perangkat lain untuk berkirim", + "x-instructions-share-mode_desktop": "Klik untuk mengirim", + "activate-share-mode-and-other-files-plural": "dan {{count}} file lainnya", + "x-instructions-share-mode_mobile": "Ketuk untuk mengirim", + "activate-share-mode-base": "Buka PairDrop di perangkat lain untuk berkirim", "no-peers-subtitle": "Pasangkan perangkat atau masuk ke ruang publik agar dapat terdeteksi di jaringan lain", - "activate-paste-mode-shared-text": "teks bersama", + "activate-share-mode-shared-text": "teks bersama", "x-instructions_desktop": "Klik untuk mengirim file atau klik kanan untuk mengirim pesan", "no-peers-title": "Buka PairDrop di perangkat lain untuk berkirim file", "x-instructions_data-drop-peer": "Lepaskan untuk mengirim ke rekan", @@ -87,7 +87,7 @@ }, "peer-ui": { "processing": "Memproses…", - "click-to-send-paste-mode": "Klik untuk mengirim {{descriptor}}", + "click-to-send-share-mode": "Klik untuk mengirim {{descriptor}}", "click-to-send": "Klik untuk mengirim file atau klik kanan untuk mengirim pesan", "waiting": "Menunggu…", "connection-hash": "Untuk memverifikasi keamanan enkripsi end-to-end, bandingkan nomor keamanan ini pada kedua perangkat", diff --git a/public/lang/it.json b/public/lang/it.json index d753438..bdacd2f 100644 --- a/public/lang/it.json +++ b/public/lang/it.json @@ -15,7 +15,7 @@ "known-as": "Sei visibile come:" }, "header": { - "cancel-paste-mode": "Fatto", + "cancel-share-mode": "Fatto", "theme-auto_title": "Adatta il tema al sistema automaticamente", "install_title": "Installa PairDrop", "theme-dark_title": "Usa sempre il tema scuro", @@ -30,12 +30,12 @@ }, "instructions": { "x-instructions_mobile": "Tocca per inviare file o tocco prolungato per inviare un messaggio", - "click-to-send": "Clicca per inviare", - "activate-paste-mode-and-other-files": "e altri {{count}} files", - "tap-to-send": "Tocca per inviare", - "activate-paste-mode-base": "Apri PairDrop su altri dispositivi per inviare", + "x-instructions-share-mode_desktop": "Clicca per inviare", + "activate-share-mode-and-other-files-plural": "e altri {{count}} files", + "x-instructions-share-mode_mobile": "Tocca per inviare", + "activate-share-mode-base": "Apri PairDrop su altri dispositivi per inviare", "no-peers-subtitle": "Abbina dispositivi o entra in una stanza pubblica per essere rilevabile su altre reti", - "activate-paste-mode-shared-text": "testo condiviso", + "activate-share-mode-shared-text": "testo condiviso", "x-instructions_desktop": "Clicca per inviare files o usa il tasto destro per inviare un messaggio", "no-peers-title": "Apri PairDrop su altri dispositivi per inviare files", "x-instructions_data-drop-peer": "Rilascia per inviare al peer", @@ -139,7 +139,7 @@ }, "peer-ui": { "processing": "Elaborazione…", - "click-to-send-paste-mode": "Clicca per inviare {{descriptor}}", + "click-to-send-share-mode": "Clicca per inviare {{descriptor}}", "click-to-send": "Clicca per inviare files o tasto destro per inviare un messaggio", "waiting": "In attesa…", "connection-hash": "Per verificare la sicurezza della crittografia end-to-end, confronta questo numero di sicurezza su entrambi i dispositivi", diff --git a/public/lang/ja.json b/public/lang/ja.json index 8803fe6..06a8471 100644 --- a/public/lang/ja.json +++ b/public/lang/ja.json @@ -58,7 +58,7 @@ "room-url-copied-to-clipboard": "パブリックルームへのリンクをクリップボードにコピーしました" }, "header": { - "cancel-paste-mode": "完了", + "cancel-share-mode": "完了", "theme-auto_title": "テーマをシステムの設定に自動的に合わせる", "install_title": "PairDropをインストール", "theme-dark_title": "常にダークテーマを使用する", @@ -73,12 +73,12 @@ }, "instructions": { "x-instructions_mobile": "タップしてファイルを送信または長押ししてメッセージを送信します", - "click-to-send": "クリックして送信", - "activate-paste-mode-and-other-files": "とその他{{count}}個のファイル", - "tap-to-send": "タップして送信", - "activate-paste-mode-base": "他のデバイスでPairDropを開いて送信します", + "x-instructions-share-mode_desktop": "クリックして送信", + "activate-share-mode-and-other-files-plural": "とその他{{count}}個のファイル", + "x-instructions-share-mode_mobile": "タップして送信", + "activate-share-mode-base": "他のデバイスでPairDropを開いて送信します", "no-peers-subtitle": "デバイスをペア設定するかパブリックルームに参加すると、他のネットワーク上からも見つけられるようになります", - "activate-paste-mode-shared-text": "共有されたテキスト", + "activate-share-mode-shared-text": "共有されたテキスト", "x-instructions_desktop": "左クリックしてファイルを送信または右クリックしてメッセージを送信します", "no-peers-title": "他のデバイスでPairDropを開いてファイルを送信します", "x-instructions_data-drop-peer": "離すとこの相手に送信します", @@ -87,7 +87,7 @@ }, "peer-ui": { "processing": "処理中…", - "click-to-send-paste-mode": "クリックして{{descriptor}}を送信", + "click-to-send-share-mode": "クリックして{{descriptor}}を送信", "click-to-send": "クリックしてファイルを送信または右クリックしてメッセージを送信します", "waiting": "待機中…", "connection-hash": "エンドツーエンド暗号化のセキュリティを確認するには、両方のデバイスのセキュリティナンバーを確認します", diff --git a/public/lang/nb.json b/public/lang/nb.json index 394fb90..e197fa2 100644 --- a/public/lang/nb.json +++ b/public/lang/nb.json @@ -7,7 +7,7 @@ "theme-light_title": "Alltid bruk lys drakt", "theme-dark_title": "Alltid bruk mørk drakt", "notification_title": "Skru på merknader", - "cancel-paste-mode": "Ferdig", + "cancel-share-mode": "Ferdig", "install_title": "Installer PairDrop", "pair-device_title": "Sammenkoble enhet" }, @@ -25,15 +25,15 @@ "x-instructions_desktop": "Klikk for å sende filer, eller høyreklikk for å sende en melding", "x-instructions_mobile": "Trykk for å sende filer, eller lang-trykk for å sende en melding", "x-instructions_data-drop-bg": "Slipp for å velge mottager", - "click-to-send": "Klikk for å sende", + "x-instructions-share-mode_desktop": "Klikk for å sende", "no-peers_data-drop-bg": "Slipp for å velge mottager", "no-peers-title": "Åpne PairDrop på andre enheter for å sende filer", "no-peers-subtitle": "Sammenkoble enheter for å kunne oppdages på andre nettverk", "x-instructions_data-drop-peer": "Slipp for å sende til likemann", - "tap-to-send": "Trykk for å sende", - "activate-paste-mode-base": "Åpne PairDrop på andre enheter for å sende", - "activate-paste-mode-and-other-files": "og {{count}} andre filer", - "activate-paste-mode-shared-text": "delt tekst" + "x-instructions-share-mode_mobile": "Trykk for å sende", + "activate-share-mode-base": "Åpne PairDrop på andre enheter for å sende", + "activate-share-mode-and-other-files-plural": "og {{count}} andre filer", + "activate-share-mode-shared-text": "delt tekst" }, "dialogs": { "input-key-on-this-device": "Skriv inn denne nøkkelen på en annen enhet", @@ -132,7 +132,7 @@ "processing": "Behandler …", "transferring": "Overfører …", "click-to-send": "Klikk for å sende filer, eller høyreklikk for å sende en melding", - "click-to-send-paste-mode": "Klikk for å sende {{descriptor}}", + "click-to-send-share-mode": "Klikk for å sende {{descriptor}}", "connection-hash": "Sammenlign dette sikkerhetsnummeret på begge enhetene for å bekrefte ende-til-ende -krypteringen." } } diff --git a/public/lang/nl.json b/public/lang/nl.json index 573b93b..39f2d5c 100644 --- a/public/lang/nl.json +++ b/public/lang/nl.json @@ -55,7 +55,7 @@ "click-to-show": "Klik om te tonen" }, "header": { - "cancel-paste-mode": "Klaar", + "cancel-share-mode": "Klaar", "theme-auto_title": "Gebruik systeemstijl", "install_title": "PairDrop installeren", "theme-dark_title": "Altijd donkere modus gebruiken", @@ -70,12 +70,12 @@ }, "instructions": { "x-instructions_mobile": "Tik om bestanden te versturen of houdt vast om een bericht te sturen", - "click-to-send": "Klik om te verzenden", - "activate-paste-mode-and-other-files": "en {{count}} andere bestanden", - "tap-to-send": "Tik om te verzenden", - "activate-paste-mode-base": "Open PairDrop op andere apparaten om te verzenden", + "x-instructions-share-mode_desktop": "Klik om te verzenden", + "activate-share-mode-and-other-files-plural": "en {{count}} andere bestanden", + "x-instructions-share-mode_mobile": "Tik om te verzenden", + "activate-share-mode-base": "Open PairDrop op andere apparaten om te verzenden", "no-peers-subtitle": "Koppel apparaten of betreed een openbare ruimte om op andere netwerken zichtbaar te worden", - "activate-paste-mode-shared-text": "gedeelde tekst", + "activate-share-mode-shared-text": "gedeelde tekst", "x-instructions_desktop": "Klik om bestanden te versturen of rechtsklik om een bericht te sturen", "no-peers-title": "Open PairDrop op andere apparaten om bestanden te versturen", "x-instructions_data-drop-peer": "Laat los om naar peer te versturen", @@ -84,7 +84,7 @@ }, "peer-ui": { "processing": "Verwerken…", - "click-to-send-paste-mode": "Klik om {{descriptor}} te versturen", + "click-to-send-share-mode": "Klik om {{descriptor}} te versturen", "click-to-send": "Klik om bestanden te versturen of rechtsklik om een bericht te versturen", "waiting": "Wachten…", "connection-hash": "Vergelijk dit veiligheidsnummer op beide apparaten, om de beveiliging van de eind-tot-eind versleuteling te verifiëren", diff --git a/public/lang/ro.json b/public/lang/ro.json index ef364da..e2e026f 100644 --- a/public/lang/ro.json +++ b/public/lang/ro.json @@ -58,7 +58,7 @@ "room-url-copied-to-clipboard": "Link către sala publică copiat în clipboard" }, "header": { - "cancel-paste-mode": "Gata", + "cancel-share-mode": "Gata", "theme-auto_title": "Adaptează tema la sistem", "install_title": "Instalează PairDrop", "theme-dark_title": "Utilizați mereu tema întunecoasă", @@ -73,12 +73,12 @@ }, "instructions": { "x-instructions_mobile": "Atingeți pentru a trimite fișiere sau atingeți lung pentru a trimite un mesaj", - "click-to-send": "Clic pentru a trimite", - "activate-paste-mode-and-other-files": "și {{count}} alte fișiere", - "tap-to-send": "Atinge pentru a trimite", - "activate-paste-mode-base": "Deschideți PairDrop pe alte dispozitive pentru a trimite", + "x-instructions-share-mode_desktop": "Clic pentru a trimite", + "activate-share-mode-and-other-files-plural": "și {{count}} alte fișiere", + "x-instructions-share-mode_mobile": "Atinge pentru a trimite", + "activate-share-mode-base": "Deschideți PairDrop pe alte dispozitive pentru a trimite", "no-peers-subtitle": "Împerecheați dispozitive sau intrați într-o cameră publică pentru a fi descoperit în alte rețele", - "activate-paste-mode-shared-text": "text partajat", + "activate-share-mode-shared-text": "text partajat", "x-instructions_desktop": "Dați clic pentru a trimite fișiere sau dați clic dreapta pentru a trimite un mesaj", "no-peers-title": "Deschideți PairDrop pe alte dispozitive pentru a trimite fișiere", "x-instructions_data-drop-peer": "Eliberare pentru a trimite la peer", @@ -87,7 +87,7 @@ }, "peer-ui": { "processing": "Procesarea…", - "click-to-send-paste-mode": "Apasă pentru a trimite {{descriptor}}", + "click-to-send-share-mode": "Apasă pentru a trimite {{descriptor}}", "click-to-send": "Apasă pentru a trimite fișiere sau apasă cu butonul din dreapta pentru a trimite un mesaj", "waiting": "Așteptând…", "connection-hash": "Pentru a verifica securitatea criptării end-to-end, comparați acest număr de securitate pe ambele dispozitive", diff --git a/public/lang/ru.json b/public/lang/ru.json index a3006e9..973fd2b 100644 --- a/public/lang/ru.json +++ b/public/lang/ru.json @@ -3,7 +3,7 @@ "about_aria-label": "Открыть страницу \"О сервисе\"", "pair-device_title": "Связать ваши устройства навсегда", "install_title": "Установить PairDrop", - "cancel-paste-mode": "Выполнено", + "cancel-share-mode": "Выполнено", "edit-paired-devices_title": "Редактировать связанные устройства", "notification_title": "Включить уведомления", "about_title": "О сервисе", @@ -16,16 +16,16 @@ "instructions": { "x-instructions_desktop": "Нажмите, чтобы отправить файлы, или щелкните правой кнопкой мыши, чтобы отправить сообщение", "no-peers_data-drop-bg": "Отпустите, чтобы выбрать получателя", - "click-to-send": "Нажмите, чтобы отправить", + "x-instructions-share-mode_desktop": "Нажмите, чтобы отправить", "x-instructions_data-drop-bg": "Отпустите, чтобы выбрать получателя", - "tap-to-send": "Прикоснитесь, чтобы отправить", + "x-instructions-share-mode_mobile": "Прикоснитесь, чтобы отправить", "x-instructions_data-drop-peer": "Отпустите, чтобы послать узлу", "x-instructions_mobile": "Прикоснитесь коротко, чтобы отправить файлы, или долго, чтобы отправить сообщение", "no-peers-title": "Откройте PairDrop на других устройствах, чтобы отправить файлы", "no-peers-subtitle": "Свяжите устройства или войдите в публичную комнату, чтобы вас могли обнаружить из других сетей", - "activate-paste-mode-and-other-files": "и {{count}} других файлов", - "activate-paste-mode-base": "Откройте PairDrop на других устройствах, чтобы отправить", - "activate-paste-mode-shared-text": "общий текст" + "activate-share-mode-and-other-files-plural": "и {{count}} других файлов", + "activate-share-mode-base": "Откройте PairDrop на других устройствах, чтобы отправить", + "activate-share-mode-shared-text": "общий текст" }, "footer": { "display-name_data-placeholder": "Загрузка…", @@ -148,7 +148,7 @@ "room-url-copied-to-clipboard": "Ссылка на публичную комнату была скопирована в буфер обмена" }, "peer-ui": { - "click-to-send-paste-mode": "Нажмите, чтобы отправить {{descriptor}}", + "click-to-send-share-mode": "Нажмите, чтобы отправить {{descriptor}}", "preparing": "Подготовка…", "transferring": "Передача…", "processing": "Обработка…", diff --git a/public/lang/tr.json b/public/lang/tr.json index fe54f5e..241a00f 100644 --- a/public/lang/tr.json +++ b/public/lang/tr.json @@ -9,19 +9,19 @@ "install_title": "PairDrop'u Yükle", "pair-device_title": "Cihazı kalıcı olarak eşle", "edit-paired-devices_title": "Eşleştirilmiş cihazları düzenle", - "cancel-paste-mode": "Bitti", + "cancel-share-mode": "Bitti", "join-public-room_title": "Geçici olarak genel odaya katılın", "language-selector_title": "Dili Seç" }, "instructions": { "no-peers_data-drop-bg": "Alıcıyı seçmek için bırakın", "x-instructions_mobile": "Dosya göndermek için dokun veya mesaj göndermek için uzun dokun", - "click-to-send": "Göndermek için tıkla", - "activate-paste-mode-and-other-files": "ve {{count}} diğer dosya", - "tap-to-send": "Göndermek için dokun", - "activate-paste-mode-base": "Göndermek için diğer cihazlarda PairDrop'u açın", + "x-instructions-share-mode_desktop": "Göndermek için tıkla", + "activate-share-mode-and-other-files-plural": "ve {{count}} diğer dosya", + "x-instructions-share-mode_mobile": "Göndermek için dokun", + "activate-share-mode-base": "Göndermek için diğer cihazlarda PairDrop'u açın", "no-peers-subtitle": "Diğer ağlarda keşfedilebilir olmak için cihazları eşleştirin veya ortak bir odaya girin", - "activate-paste-mode-shared-text": "paylaşılan metin", + "activate-share-mode-shared-text": "paylaşılan metin", "x-instructions_desktop": "Dosya göndermek için tıkla ya da mesaj göndermek için sağ tıkla", "no-peers-title": "Dosya göndermek için diğer cihazlarda PairDrop'u açın", "x-instructions_data-drop-peer": "Göndermek için serbest bırak", @@ -139,7 +139,7 @@ }, "peer-ui": { "processing": "İşleniyor…", - "click-to-send-paste-mode": "{{descriptor}} göndermek için tıkla", + "click-to-send-share-mode": "{{descriptor}} göndermek için tıkla", "click-to-send": "Dosya göndermek için tıkla veya mesaj göndermek için sağ tıkla", "waiting": "Bekleniyor…", "connection-hash": "Uçtan uca şifrelemenin güvenliğini doğrulamak için her iki cihazda da bu güvenlik numarasını karşılaştırın", diff --git a/public/lang/zh-CN.json b/public/lang/zh-CN.json index 197a7cc..26c3c5d 100644 --- a/public/lang/zh-CN.json +++ b/public/lang/zh-CN.json @@ -9,7 +9,7 @@ "theme-dark_title": "总是使用暗黑主题", "notification_title": "开启通知", "edit-paired-devices_title": "管理已配对设备", - "cancel-paste-mode": "完成", + "cancel-share-mode": "完成", "join-public-room_title": "暂时加入公共房间", "language-selector_title": "设置语言" }, @@ -21,11 +21,11 @@ "x-instructions_desktop": "点击以发送文件 或 右键来发送信息", "x-instructions_mobile": "轻触以发送文件 或 长按来发送信息", "x-instructions_data-drop-bg": "释放来选择接收者", - "click-to-send": "点击发送", - "tap-to-send": "轻触发送", - "activate-paste-mode-base": "在其他设备上打开 PairDrop 来发送", - "activate-paste-mode-and-other-files": "和 {{count}} 个其他的文件", - "activate-paste-mode-shared-text": "分享文本" + "x-instructions-share-mode_desktop": "点击发送", + "x-instructions-share-mode_mobile": "轻触发送", + "activate-share-mode-base": "在其他设备上打开 PairDrop 来发送", + "activate-share-mode-and-other-files-plural": "和 {{count}} 个其他的文件", + "activate-share-mode-shared-text": "分享文本" }, "footer": { "routed": "途径服务器", @@ -155,7 +155,7 @@ "image-transfer-requested": "图片传输请求" }, "peer-ui": { - "click-to-send-paste-mode": "点击发送 {{descriptor}}", + "click-to-send-share-mode": "点击发送 {{descriptor}}", "click-to-send": "点击以发送文件 或 右键来发送信息", "connection-hash": "若要验证端到端加密的安全性，请在两个设备上比较此安全编号", "preparing": "准备中…", diff --git a/public/scripts/main.js b/public/scripts/main.js index e999753..20efd1b 100644 --- a/public/scripts/main.js +++ b/public/scripts/main.js @@ -167,6 +167,7 @@ class PairDrop { const clearDevicesDialog = new EditPairedDevicesDialog(); const publicRoomDialog = new PublicRoomDialog(); const base64ZipDialog = new Base64ZipDialog(); + const shareTextDialog = new ShareTextDialog(); const toast = new Toast(); const notifications = new Notifications(); const networkStatusUI = new NetworkStatusUI(); diff --git a/public/scripts/network.js b/public/scripts/network.js index ebf04b5..3d6e01b 100644 --- a/public/scripts/network.js +++ b/public/scripts/network.js @@ -433,47 +433,6 @@ class Peer { : false; } - getResizedImageDataUrl(file, width = undefined, height = undefined, quality = 0.7) { - return new Promise((resolve, reject) => { - let image = new Image(); - image.src = URL.createObjectURL(file); - image.onload = _ => { - let imageWidth = image.width; - let imageHeight = image.height; - let canvas = document.createElement('canvas'); - - // resize the canvas and draw the image data into it - if (width && height) { - canvas.width = width; - canvas.height = height; - } - else if (width) { - canvas.width = width; - canvas.height = Math.floor(imageHeight * width / imageWidth) - } - else if (height) { - canvas.width = Math.floor(imageWidth * height / imageHeight); - canvas.height = height; - } - else { - canvas.width = imageWidth; - canvas.height = imageHeight - } - - var ctx = canvas.getContext("2d"); - ctx.drawImage(image, 0, 0, canvas.width, canvas.height); - - let dataUrl = canvas.toDataURL("image/jpeg", quality); - resolve(dataUrl); - } - image.onerror = _ => reject(`Could not create an image thumbnail from type ${file.type}`); - }) - .then(dataUrl => { - return dataUrl; - }) - .catch(e => console.error(e)); - } - async requestFileTransfer(files) { let header = []; let totalSize = 0; @@ -491,9 +450,14 @@ class Peer { Events.fire('set-progress', {peerId: this._peerId, progress: 0.8, status: 'prepare'}) - let dataUrl = ''; + let dataUrl; + if (files[0].type.split('/')[0] === 'image') { - dataUrl = await this.getResizedImageDataUrl(files[0], 400, null, 0.9); + try { + dataUrl = await getResizedImageDataUrl(files[0], 400, null, 0.9); + } catch (e) { + dataUrl = ''; + } } Events.fire('set-progress', {peerId: this._peerId, progress: 1, status: 'prepare'}) diff --git a/public/scripts/ui-main.js b/public/scripts/ui-main.js index 6d787ef..283eb7f 100644 --- a/public/scripts/ui-main.js +++ b/public/scripts/ui-main.js @@ -241,6 +241,9 @@ class BackgroundCanvas { Events.on('resize', _ => this.init()); Events.on('redraw-canvas', _ => this.init()); Events.on('translation-loaded', _ => this.init()); + + // ShareMode + Events.on('share-mode-changed', e => this.onShareModeChanged(e.detail.active)); } _fadeIn() { @@ -263,16 +266,24 @@ class BackgroundCanvas { this.x0 = this.w / 2; this.y0 = this.h - this.offset; this.dw = Math.round(Math.max(this.w, this.h, 1000) / 13); + this.baseColor = '165, 165, 165'; + this.baseOpacity = 0.3; this.drawCircles(this.cCtx); } + onShareModeChanged(active) { + this.baseColor = active ? '165, 165, 255' : '165, 165, 165'; + this.baseOpacity = active ? 0.5 : 0.3; + this.drawCircles(this.cCtx); + } + drawCircle(ctx, radius) { ctx.beginPath(); ctx.lineWidth = 2; - let opacity = Math.max(0, 0.3 * (1 - 1.2 * radius / Math.max(this.w, this.h))); - ctx.strokeStyle = `rgba(165, 165, 165, ${opacity})`; + let opacity = Math.max(0, this.baseOpacity * (1 - 1.2 * radius / Math.max(this.w, this.h))); + ctx.strokeStyle = `rgba(${this.baseColor}, ${opacity})`; ctx.arc(this.x0, this.y0, radius, 0, 2 * Math.PI); ctx.stroke(); } diff --git a/public/scripts/ui.js b/public/scripts/ui.js index 7899c9f..d650fe0 100644 --- a/public/scripts/ui.js +++ b/public/scripts/ui.js @@ -1,20 +1,31 @@ class PeersUI { constructor() { - this.$cancelPasteModeBtn = $('cancel-paste-mode'); this.$xPeers = $$('x-peers'); this.$xNoPeers = $$('x-no-peers'); this.$xInstructions = $$('x-instructions'); this.$wsFallbackWarning = $('websocket-fallback'); + this.$sharePanel = $$('.share-panel'); + this.$shareModeImageThumb = $$('.share-panel .image-thumb'); + this.$shareModeTextThumb = $$('.share-panel .text-thumb'); + this.$shareModeFileThumb = $$('.share-panel .file-thumb'); + this.$shareModeDescriptor = $$('.share-panel .share-descriptor'); + this.$shareModeDescriptorItem = $$('.share-panel .descriptor-item'); + this.$shareModeDescriptorOther = $$('.share-panel .descriptor-other'); + this.$shareModeCancelBtn = $$('.share-panel .cancel-btn'); + this.$shareModeEditBtn = $$('.share-panel .edit-btn'); + this.peers = {}; - this.pasteMode = {}; - this.pasteMode.activated = false; - this.pasteMode.descriptor = ""; + this.shareMode = {}; + this.shareMode.active = false; + this.shareMode.descriptor = ""; + this.shareMode.files = []; + this.shareMode.text = ""; Events.on('peer-joined', e => this._onPeerJoined(e.detail)); - Events.on('peer-added', _ => this._evaluateOverflowing()); + Events.on('peer-added', _ => this._evaluateOverflowingPeers()); Events.on('peer-connected', e => this._onPeerConnected(e.detail.peerId, e.detail.connectionHash)); Events.on('peer-disconnected', e => this._onPeerDisconnected(e.detail)); Events.on('peers', e => this._onPeers(e.detail)); @@ -25,14 +36,15 @@ class PeersUI { Events.on('dragover', e => this._onDragOver(e)); Events.on('dragleave', _ => this._onDragEnd()); Events.on('dragend', _ => this._onDragEnd()); - Events.on('resize', _ => this._evaluateOverflowing()); + Events.on('resize', _ => this._evaluateOverflowingPeers()); Events.on('paste', e => this._onPaste(e)); - Events.on('activate-paste-mode', e => this._activatePasteMode(e.detail.files, e.detail.text)); + Events.on('activate-share-mode', e => this._activateShareMode(e.detail.files, e.detail.text)); + Events.on('translation-loaded', _ => this._reloadShareMode()); Events.on('room-type-removed', e => this._onRoomTypeRemoved(e.detail.peerId, e.detail.roomType)); - this.$cancelPasteModeBtn.addEventListener('click', _ => this._cancelPasteMode()); + this.$shareModeCancelBtn.addEventListener('click', _ => this._deactivateShareMode()); Events.on('peer-display-name-changed', e => this._onPeerDisplayNameChanged(e)); @@ -63,13 +75,11 @@ class PeersUI { this._changePeerDisplayName(e.detail.peerId, e.detail.displayName); } - _noDialogShown() { - return document.querySelectorAll('x-dialog[show]').length === 0; - } + async _onKeyDown(e) { + if (!this.shareMode.active || Dialog.anyDialogShown()) return; - _onKeyDown(e) { - if (this._noDialogShown() && this.pasteMode.activated && e.code === "Escape") { - Events.fire('deactivate-paste-mode'); + if (e.key === "Escape") { + await this._deactivateShareMode(); } // close About PairDrop page on Escape @@ -103,7 +113,10 @@ class PeersUI { const peer = this.peers[peerId]; - new PeerUI(peer, connectionHash); + new PeerUI(peer, connectionHash, { + active: this.shareMode.active, + descriptor: this.shareMode.descriptor, + }); } _redrawPeerRoomTypes(peerId) { @@ -121,7 +134,7 @@ class PeersUI { Object.keys(peer._roomIds).forEach(roomType => peerNode.classList.add(`type-${roomType}`)); } - _evaluateOverflowing() { + _evaluateOverflowingPeers() { if (this.$xPeers.clientHeight < this.$xPeers.scrollHeight) { this.$xPeers.classList.add('overflowing'); } @@ -138,7 +151,7 @@ class PeersUI { const $peer = $(peerId); if (!$peer) return; $peer.remove(); - this._evaluateOverflowing(); + this._evaluateOverflowingPeers(); } _onRoomTypeRemoved(peerId, roomType) { @@ -159,14 +172,30 @@ class PeersUI { _onDrop(e) { e.preventDefault(); + + if (this.shareMode.active || Dialog.anyDialogShown()) return; + if (!$$('x-peer') || !$$('x-peer').contains(e.target)) { - this._activatePasteMode(e.dataTransfer.files, '') + if (e.dataTransfer.files.length > 0) { + Events.fire('activate-share-mode', {files: e.dataTransfer.files}); + } else { + for (let i=0; i { + Events.fire('activate-share-mode', {text: text}); + }); + } + } + } } this._onDragEnd(); } _onDragOver(e) { e.preventDefault(); + + if (this.shareMode.active || Dialog.anyDialogShown()) return; + this.$xInstructions.setAttribute('drop-bg', true); this.$xNoPeers.setAttribute('drop-bg', true); } @@ -177,91 +206,165 @@ class PeersUI { } _onPaste(e) { - if(document.querySelectorAll('x-dialog[show]').length === 0) { - // prevent send on paste when dialog is open - e.preventDefault() - const files = e.clipboardData.files; - const text = e.clipboardData.getData("Text"); - if (files.length === 0 && text.length === 0) return; - this._activatePasteMode(files, text); + // prevent send on paste when dialog is open + if (this.shareMode.active || Dialog.anyDialogShown()) return; + + e.preventDefault() + const files = e.clipboardData.files; + const text = e.clipboardData.getData("Text"); + + if (files.length > 0) { + Events.fire('activate-share-mode', {files: files}); + } else if (text.length > 0) { + if (ShareTextDialog.isApproveShareTextSet()) { + Events.fire('share-text-dialog', text); + } else { + Events.fire('activate-share-mode', {text: text}); + } } } - _activatePasteMode(files, text) { - if (!this.pasteMode.activated && (files.length > 0 || text.length > 0)) { - const openPairDrop = Localization.getTranslation("instructions.activate-paste-mode-base"); - const andOtherFiles = Localization.getTranslation("instructions.activate-paste-mode-and-other-files", null, {count: files.length-1}); - const sharedText = Localization.getTranslation("instructions.activate-paste-mode-shared-text"); - const clickToSend = Localization.getTranslation("instructions.click-to-send") - const tapToSend = Localization.getTranslation("instructions.tap-to-send") + async _activateShareMode(files = [], text = "") { + if (this.shareMode.active || (files.length === 0 && text.length === 0)) return; - let descriptor; + this._activateCallback = e => this._sendShareData(e); + this._editShareTextCallback = _ => { + this._deactivateShareMode(); + Events.fire('share-text-dialog', text); + }; - if (files.length === 1) { - descriptor = `${files[0].name}`; + Events.on('share-mode-pointerdown', this._activateCallback); + + const andOtherFilesPlural = Localization.getTranslation("instructions.activate-share-mode-and-other-files-plural", null, {count: files.length-1}); + const andOtherFiles = Localization.getTranslation("instructions.activate-share-mode-and-other-file"); + + let descriptorComplete, descriptorItem, descriptorOther, descriptorInstructions; + + if (files.length > 2) { + // files shared + descriptorItem = files[0].name; + descriptorOther = andOtherFilesPlural; + descriptorComplete = `${descriptorItem} ${descriptorOther}`; + } + else if (files.length === 2) { + descriptorItem = files[0].name; + descriptorOther = andOtherFiles; + descriptorComplete = `${descriptorItem} ${descriptorOther}`; + } else if (files.length === 1) { + descriptorItem = files[0].name; + descriptorComplete = descriptorItem; + } + else { + // text shared + descriptorItem = text.replace(/\s/g," "); + descriptorComplete = descriptorItem; + } + + if (files.length > 0) { + if (descriptorOther) { + this.$shareModeDescriptorOther.innerText = descriptorOther; + this.$shareModeDescriptorOther.removeAttribute('hidden'); } - else if (files.length > 1) { - descriptor = `${files[0].name}
${andOtherFiles}`; + if (files.length > 1) { + descriptorInstructions = Localization.getTranslation("instructions.activate-share-mode-shared-files-plural", null, {count: files.length}); } else { - descriptor = sharedText; + descriptorInstructions = Localization.getTranslation("instructions.activate-share-mode-shared-file"); } - this.$xInstructions.querySelector('p').innerHTML = `${descriptor}`; - this.$xInstructions.querySelector('p').style.display = 'block'; - this.$xInstructions.setAttribute('desktop', clickToSend); - this.$xInstructions.setAttribute('mobile', tapToSend); - - this.$xNoPeers.querySelector('h2').innerHTML = `${openPairDrop}
${descriptor}`; - - this.pasteMode.descriptor = descriptor; - - const _callback = e => this._sendClipboardData(e, files, text); - Events.on('paste-pointerdown', _callback); - Events.on('deactivate-paste-mode', _ => this._deactivatePasteMode(_callback), { once: true }); - - this.$cancelPasteModeBtn.removeAttribute('hidden'); - - - console.log('Paste mode activated.'); - Events.fire('paste-mode-changed', { - active: true, - descriptor: descriptor - }); + if (files[0].type.split('/')[0] === 'image') { + getResizedImageDataUrl(files[0], 80, null, 0.9) + .then(dataUrl => { + this.$shareModeImageThumb.style.backgroundImage = `url(${dataUrl})`; + this.$shareModeImageThumb.removeAttribute('hidden'); + }) + .catch(_ => { + this.$shareModeFileThumb.removeAttribute('hidden'); + }); + } else { + this.$shareModeFileThumb.removeAttribute('hidden'); + } } - } + else { + this.$shareModeTextThumb.removeAttribute('hidden'); - _cancelPasteMode() { - Events.fire('deactivate-paste-mode'); - } + this.$shareModeEditBtn.addEventListener('click', this._editShareTextCallback); + this.$shareModeEditBtn.removeAttribute('hidden'); - _deactivatePasteMode(_callback) { - if (this.pasteMode.activated) { - this.pasteMode.activated = false; - this.pasteMode.descriptor = ""; - Events.off('paste-pointerdown', _callback); - - this.$xInstructions.querySelector('p').innerText = ''; - this.$xInstructions.querySelector('p').style.display = 'none'; - - this.$xInstructions.setAttribute('desktop', Localization.getTranslation("instructions.x-instructions", "desktop")); - this.$xInstructions.setAttribute('mobile', Localization.getTranslation("instructions.x-instructions", "mobile")); - - this.$xNoPeers.querySelector('h2').innerHTML = Localization.getTranslation("instructions.no-peers-title"); - - this.$cancelPasteModeBtn.setAttribute('hidden', true); - - console.log('Paste mode deactivated.') - Events.fire('paste-mode-changed', { - active: false, - descriptor: null - }); + descriptorInstructions = Localization.getTranslation("instructions.activate-share-mode-shared-text"); } + + const desktop = Localization.getTranslation("instructions.x-instructions-share-mode_desktop", null, {descriptor: descriptorInstructions}); + const mobile = Localization.getTranslation("instructions.x-instructions-share-mode_mobile", null, {descriptor: descriptorInstructions}); + + this.$xInstructions.setAttribute('desktop', desktop); + this.$xInstructions.setAttribute('mobile', mobile); + + this.$sharePanel.removeAttribute('hidden'); + + this.$shareModeDescriptor.removeAttribute('hidden'); + this.$shareModeDescriptorItem.innerText = descriptorItem; + + this.shareMode.active = true; + this.shareMode.files = files; + this.shareMode.text = text; + + console.log('Share mode activated.'); + + Events.fire('share-mode-changed', { + active: true, + descriptor: descriptorComplete + }); } - _sendClipboardData(e, files, text) { - // send the pasted file/text content + async _reloadShareMode() { + // If shareMode is active only + if (!this.shareMode.active) return; + + let files = this.shareMode.files; + let text = this.shareMode.text; + + await this._deactivateShareMode(); + await this._activateShareMode(files, text); + } + + async _deactivateShareMode() { + if (!this.shareMode.active) return; + + this.shareMode.active = false; + this.shareMode.files = []; + this.shareMode.text = ""; + + Events.off('share-mode-pointerdown', this._activateCallback); + + const desktop = Localization.getTranslation("instructions.x-instructions_desktop"); + const mobile = Localization.getTranslation("instructions.x-instructions_mobile"); + + this.$xInstructions.setAttribute('desktop', desktop); + this.$xInstructions.setAttribute('mobile', mobile); + + this.$sharePanel.setAttribute('hidden', true); + + this.$shareModeImageThumb.setAttribute('hidden', true); + this.$shareModeFileThumb.setAttribute('hidden', true); + this.$shareModeTextThumb.setAttribute('hidden', true); + + this.$shareModeDescriptorItem.innerHTML = ""; + this.$shareModeDescriptorItem.classList.remove('cursive'); + this.$shareModeDescriptorOther.innerHTML = ""; + this.$shareModeDescriptorOther.setAttribute('hidden', true); + this.$shareModeEditBtn.removeEventListener('click', this._editShareTextCallback); + this.$shareModeEditBtn.setAttribute('hidden', true); + + console.log('Share mode deactivated.') + Events.fire('share-mode-changed', { active: false }); + } + + _sendShareData(e) { + // send the shared file/text content const peerId = e.detail.peerId; + const files = this.shareMode.files; + const text = this.shareMode.text; if (files.length > 0) { Events.fire('files-selected', { @@ -281,8 +384,12 @@ class PeersUI { class PeerUI { static _badgeClassNames = ["badge-room-ip", "badge-room-secret", "badge-room-public-id"]; + static _shareMode = { + active: false, + descriptor: "" + }; - constructor(peer, connectionHash) { + constructor(peer, connectionHash, shareMode) { this.$xInstructions = $$('x-instructions'); this.$xPeers = $$('x-peers'); @@ -290,30 +397,24 @@ class PeerUI { this._connectionHash = `${connectionHash.substring(0, 4)} ${connectionHash.substring(4, 8)} ${connectionHash.substring(8, 12)} ${connectionHash.substring(12, 16)}`; - this.pasteMode = {}; - this.pasteMode.activated = false; - this.pasteMode.descriptor = ""; + // This is needed if the ShareMode is started BEFORE the PeerUI is drawn. + PeerUI._shareMode = shareMode; this._initDom(); - this._bindListeners(); this.$xPeers.appendChild(this.$el); Events.fire('peer-added'); + + // ShareMode + Events.on('share-mode-changed', e => this._onShareModeChanged(e.detail.active, e.detail.descriptor)); } html() { - let title; - let input = ''; - if (this.pasteMode.activated) { - title = Localization.getTranslation("peer-ui.click-to-send-paste-mode", null, {descriptor: this.pasteMode.descriptor}); - } - else { - title = Localization.getTranslation("peer-ui.click-to-send"); - input = ''; - } + let title = Localization.getTranslation("peer-ui.click-to-send", null, {descriptor: PeerUI._shareMode.descriptor}); + this.$el.innerHTML = `