Merge branch 'master' into bring_back_animation

public/index.html

@@ -10,6 +10,7 @@
     <meta name="theme-color" content="#3367d6">
     <meta name="color-scheme" content="dark light">
     <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <meta name="apple-mobile-web-app-title" content="PairDrop">
     <meta name="application-name" content="PairDrop">
     <!-- Descriptions -->
@@ -416,12 +417,12 @@
                         <h2 class="dialog-title" data-i18n-key="dialogs.edit-paired-devices-title" data-i18n-attrs="text"></h2>
                     </div>
                     <div class="paired-devices-wrapper" data-i18n-key="dialogs.paired-devices-wrapper" data-i18n-attrs="data-empty"></div>
-                    <div class="font-subheading center">
-                        <p>
+                    <div class="row center p-2">
+                        <div class="font-subheading">
                             <span data-i18n-key="dialogs.auto-accept-instructions-1" data-i18n-attrs="text"></span>
                             <u data-i18n-key="dialogs.auto-accept" data-i18n-attrs="text"></u>
                             <span data-i18n-key="dialogs.auto-accept-instructions-2" data-i18n-attrs="text"></span>
-                        </p>
+                        </div>
                     </div>
                     <div class="center row-reverse btn-row wrap">
                         <button class="btn btn-rounded btn-grey" type="button" data-i18n-key="dialogs.close" data-i18n-attrs="text" close></button>
@@ -681,9 +682,9 @@
                         <use xlink:href="#donation"></use>
                     </svg>
                 </a>
-                <a class="icon-button" id="twitter-btn" target="_blank" href="https://twitter.com/intent/tweet?text=https%3A%2F%2Fpairdrop.net%20by%20https%3A%2F%2Fgithub.com%2Fschlagmichdoch%2F&amp;" rel="noreferrer" data-i18n-key="about.tweet" data-i18n-attrs="title">
+                <a class="icon-button" id="x-twitter-btn" target="_blank" href="https://x.com/intent/tweet?text=https%3A%2F%2Fpairdrop.net%20by%20https%3A%2F%2Fgithub.com%2Fschlagmichdoch%2F&amp;" rel="noreferrer" data-i18n-key="about.tweet" data-i18n-attrs="title">
                     <svg class="icon">
-                        <use xlink:href="#twitter"></use>
+                        <use xlink:href="#x-twitter"></use>
                     </svg>
                 </a>
                 <a class="icon-button" id="mastodon-btn" target="_blank" rel="noreferrer" data-i18n-key="about.mastodon" data-i18n-attrs="title" hidden>
@@ -739,8 +740,8 @@
         <symbol id="help-outline" viewBox="0 0 24 24">
             <path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"></path>
         </symbol>
-        <symbol id="twitter">
-            <path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"></path>
+        <symbol id="x-twitter">
+            <path d="M17.996,2.219l3.265,0l-7.13,8.148l8.388,11.088l-6.566,0l-5.147,-6.723l-5.882,6.723l-3.269,0l7.625,-8.716l-8.041,-10.52l6.733,0l4.647,6.146l5.377,-6.146Zm-1.146,17.285l1.808,-0l-11.671,-15.435l-1.942,0l11.805,15.435Z"></path>
         </symbol>
         <symbol id="github">
             <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path>

public/manifest.json

@@ -26,7 +26,7 @@
         }
     ],
     "background_color": "#efefef",
-    "display": "minimal-ui",
+    "display": "standalone",
     "theme_color": "#3367d6",
     "screenshots" : [
         {

public/scripts/main.js

@@ -81,7 +81,7 @@ class PairDrop {
     }
 
     onPwaInstallable(e) {
-        if (!window.matchMedia('(display-mode: minimal-ui)').matches) {
+        if (!window.matchMedia('(display-mode: standalone)').matches) {
             // only display install btn when not installed
             this.$headerInstallBtn.removeAttribute('hidden');
             this.$headerInstallBtn.addEventListener('click', () => {

public/scripts/ui-main.js

@@ -420,7 +420,6 @@ class BackgroundCanvas {
             w = clientWidth;
             h = clientHeight;
             offset = footerOffsetHeight - 28;
-            if (h > 800) offset += 11;
 
             if (oldW === w && oldH === h && oldOffset === offset) return; // nothing has changed
 

public/scripts/ui.js

@@ -2087,21 +2087,34 @@ class ReceiveTextDialog extends Dialog {
 
             let m = 0;
 
-            const allowedDomainChars = "a-zA-Z0-9áàäčçđéèêŋńñóòôöšŧüžæøåëìíîïðùúýþćěłřśţźǎǐǒǔǥǧǩǯəʒâûœÿãõāēīōūăąĉċďĕėęĝğġģĥħĩĭįıĵķĸĺļľņňŏőŕŗŝşťũŭůűųŵŷżאבגדהוזחטיךכלםמןנסעףפץצקרשתװױײ";
-            const urlRgx = new RegExp(`(^|\\n|\\s|["><\\-_~:\\/?#\\[\\]@!$&'()*+,;=%.])(((https?:\\/\\/)?(?:[${allowedDomainChars}](?:[${allowedDomainChars}-]{0,61}[${allowedDomainChars}])?\\.)+[${allowedDomainChars}][${allowedDomainChars}-]{0,61}[${allowedDomainChars}])(:?\\d*)\\/?([${allowedDomainChars}_\\/\\-#.]*)(\\?([${allowedDomainChars}\\-_~:\\/?#\\[\\]@!$&'()*+,;=%.]*))?)`, 'g');
+            const chrs = `a-zA-Z0-9áàäčçđéèêŋńñóòôöšŧüžæøåëìíîïðùúýþćěłřśţźǎǐǒǔǥǧǩǯəʒâûœÿãõāēīōūăąĉċďĕėęĝğġģĥħĩĭįıĵķĸĺļľņňŏőŕŗŝşťũŭůűųŵŷżאבגדהוזחטיךכלםמןנסעףפץצקרשתװױײ`; // allowed chars in domain names
+            const rgxWhitespace = `(^|\\n|\\s)`;
+            const rgxScheme = `(https?:\\/\\/)`
+            const rgxSchemeMail = `(mailto:)`
+            const rgxUserinfo = `(?:(?:[${chrs}.%]*(?::[${chrs}.%]*)?)@)`;
+            const rgxHost = `(?:(?:[${chrs}](?:[${chrs}-]{0,61}[${chrs}])?\\.)+[${chrs}][${chrs}-]{0,61}[${chrs}])`;
+            const rgxPort = `(:\\d*)`;
+            const rgxPath = `(?:(?:\\/[${chrs}\\-\\._~!$&'\\(\\)\\*\\+,;=:@%]*)*)`;
+            const rgxQueryAndFragment = `(\\?[${chrs}\\-_~:\\/#\\[\\]@!$&'\\(\\)*+,;=%.]*)`;
+            const rgxUrl = `(${rgxScheme}?${rgxHost}${rgxPort}?${rgxPath}${rgxQueryAndFragment}?)`;
+            const rgxMail = `(${rgxSchemeMail}${rgxUserinfo}${rgxHost})`;
+            const rgxUrlAll = new RegExp(`${rgxWhitespace}${rgxUrl}`, 'g');
+            const rgxMailAll = new RegExp(`${rgxWhitespace}${rgxMail}`, 'g');
 
-            $textShadow.innerText = text.replace(urlRgx,
-                (match, whitespaceOrSpecial, url, g3, scheme) => {
+            const replaceMatchWithPlaceholder = function(match, whitespace, url, scheme) {
                 let link = url;
 
-                    // prefix www.example.com with http protocol to prevent it from being a relative link
+                // prefix www.example.com with http scheme to prevent it from being a relative link
                 if (!scheme && link.startsWith('www')) {
                     link = "http://" + link
                 }
 
-                    if (isUrlValid(link)) {
-                        // link is valid -> replace with link node placeholder
+                if (!isUrlValid(link)) {
+                    // link is not valid -> do not replace
+                    return match;
+                }
 
+                // link is valid -> replace with link node placeholder
                 // find linkNodePlaceholder that is not yet present in text node
                 m++;
                 while (occP.includes(`${p}${m}`)) {
@@ -2111,11 +2124,11 @@ class ReceiveTextDialog extends Dialog {
 
                 // add linkNodePlaceholder to text node and save a reference to linkNodes object
                 linkNodes[linkNodePlaceholder] = `<a href="${link}" target="_blank" rel="noreferrer">${url}</a>`;
-                        return `${whitespaceOrSpecial}${linkNodePlaceholder}`;
+                return `${whitespace}${linkNodePlaceholder}`;
             }
-                    // link is not valid -> do not replace
-                    return match;
-                });
+
+            text = text.replace(rgxUrlAll, replaceMatchWithPlaceholder);
+            $textShadow.innerText = text.replace(rgxMailAll, replaceMatchWithPlaceholder);
 
 
             this.$text.innerHTML = $textShadow.innerHTML.replace(pRgx,

public/scripts/util.js

@@ -590,7 +590,7 @@ async function decodeBase64Text(base64) {
 
 function isUrlValid(url) {
     try {
-        let urlObj = new URL(url);
+        new URL(url);
         return true;
     }
     catch (e) {

public/scripts/worker/canvas-worker.js

@@ -55,7 +55,6 @@ function initCanvas(footerOffsetHeight, clientWidth, clientHeight) {
     w = clientWidth;
     h = clientHeight;
     offset = footerOffsetHeight - 28;
-    if (h > 800) offset += 11;
 
     if (oldW === w && oldH === h && oldOffset === offset) return; // nothing has changed
 

public/styles/styles-main.css

@@ -587,7 +587,6 @@ x-dialog:not([show]) x-background {
     font-weight: 700;
     letter-spacing: 0.12em;
     text-transform: uppercase;
-    white-space: nowrap;
     cursor: pointer;
     user-select: none;
     background: inherit;
@@ -899,7 +898,7 @@ x-peers:empty~x-instructions {
 
 @media screen and (min-height: 800px) {
     footer {
-        margin-bottom: 16px;
+        padding-bottom: 10px;
     }
 }
 
@@ -909,6 +908,13 @@ x-peers:empty~x-instructions {
     }
 }
 
+/* PWA Standalone styles */
+@media all and (display-mode: standalone) {
+    footer {
+        padding-bottom: 34px;
+    }
+}
+
 /* Constants */
 
 :root {