ui revamp (3.5)

package.json

@@ -1,7 +1,7 @@
 {
     "name": "cobalt",
     "description": "save what you love",
-    "version": "3.4.3",
+    "version": "3.5",
     "author": "wukko",
     "exports": "./src/cobalt.js",
     "type": "module",

src/front/cobalt.css

@@ -154,7 +154,6 @@ input[type="checkbox"] {
     width: 60%;
     height: auto;
     display: inline-flex;
-    padding: 3rem;
 }
 #logo-area {
     padding-right: 3rem;
@@ -164,10 +163,22 @@ input[type="checkbox"] {
     white-space: nowrap;
 }
 #download-area {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+#cobalt-main-box #top {
     display: inline-flex;
     height: 2rem;
-    width: 100%;
     margin-top: -0.6rem;
+    flex-direction: row;
+}
+#cobalt-main-box #bottom {
+    padding-top: 1.5rem;
+}
+#cobalt-main-box #bottom button {
+    width: auto!important;
+    padding: 0.6rem 1.2rem!important;
 }
 .box {
     background: var(--background);
@@ -182,8 +193,17 @@ input[type="checkbox"] {
     border: 0;
     float: right;
     border-bottom: 0.1rem solid var(--accent-unhover);
-    transition: border-bottom 0.2s;
     outline: none;
+    font-size: 0.8rem;
+}
+#url-clear {
+    background: none;
+    padding: 0 1.1rem;
+    font-size: 1rem;
+    transform: none;
+    line-height: 0rem;
+    height: 1.6rem;
+    margin-top: .4rem;
 }
 #url-input-area:focus {
     outline: none;
@@ -194,10 +214,10 @@ input[type="checkbox"] {
     color: var(--accent);
     background: none;
     border: none;
-    font-size: 1.4rem;
+    font-size: 1.6rem;
     cursor: pointer;
     padding: 0;
-    letter-spacing: -0.1rem;
+    letter-spacing: -0.36rem;
 }
 #download-button:disabled {
     color: var(--accent-unhover);
@@ -210,25 +230,19 @@ input[type="checkbox"] {
     transform: translate(-50%, -50%);
     font-size: 0.9rem;
     text-align: center;
-    width: 90%;
+    width: auto;
 }
-#footer-buttons {
+#footer-buttons, .footer-pair {
-    display: inline-flex;
+    display: flex;
+    flex-direction: row;
     align-items: center;
 }
 .footer-button {
-    cursor: pointer;
+    width: auto!important;
     color: var(--accent-unhover-2);
-    border: 0.15rem solid var(--accent-unhover-2);
+    padding: 0.6rem 1.2rem!important;
-    padding: 0.4rem 0.8rem 0.5rem;
     margin: 0.4rem;
-    display: flex;
     align-content: center;
-    align-items: center;
-}
-.footer-button:hover {
-    color: var(--accent);
-    border: var(--border-15);
 }
 .text-backdrop {
     background: var(--accent);
@@ -290,7 +304,8 @@ input[type="checkbox"] {
     padding-bottom: 1rem;
 }
 #popup-desc,
-#desc-error {
+#desc-error,
+#popup-info-desc {
     width: 100%;
     text-align: left;
     float: left;
@@ -493,8 +508,8 @@ input[type="checkbox"] {
     padding-top: 0!important;
     padding-bottom: 1rem;
 }
-#popup-imagePicker #popup-buttons {
+.popup-tabs {
-    padding-top: 1rem;
+    padding-top: 0.5rem;
 }
 /* adapt the page according to screen size */
 @media screen and (min-width: 2300px) {
@@ -563,14 +578,9 @@ input[type="checkbox"] {
 }
 /* mobile page */
 @media screen and (max-width: 949px) {
-    #cobalt-main-box {
+    #cobalt-main-box, #footer {
         width: 85%;
     }
-    #close-error {
-        bottom: 5%;
-        position: absolute;
-        width: var(--without-padding);
-    }
 }
 @media screen and (max-width: 475px) {
     .tab {
@@ -579,11 +589,36 @@ input[type="checkbox"] {
     .tab .emoji {
         margin-right: 0;
     }
-    #cobalt-main-box {
+    #cobalt-main-box, #footer {
         width: 90%;
     }
 }
+@media screen and (max-width: 320px) {
+    .footer-button {
+        font-size: 0;
+    }
+    #cobalt-main-box #bottom button {
+        font-size: 0;
+    }
+    .footer-button .emoji, #cobalt-main-box #bottom button .emoji  {
+        margin-right: 0;
+    }
+}
 @media screen and (max-width: 949px) {
+    #cobalt-main-box #bottom button {
+        width: 100%!important;
+    }
+    #footer {
+        bottom: 2rem;
+        transform: translate(-50%, 0%);
+    }
+    #footer-buttons {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    .footer-pair .footer-button {
+        width: 100%!important;
+    }
     .imagepicker-image-container {
         height: 7rem;
         width: 7rem;

src/front/cobalt.js

@@ -1,5 +1,7 @@
 let isIOS = navigator.userAgent.toLowerCase().match("iphone os");
-let version = 6;
+let isFirefox = navigator.userAgent.toLowerCase().match("firefox/");
+let version = 7;
+let regex = new RegExp(/https:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_\+.~#?&\/\/=]*)/);
 
 let switchers = {
     "theme": ["auto", "light", "dark"],
@@ -7,7 +9,8 @@ let switchers = {
     "quality": ["max", "hig", "mid", "low"],
     "audioFormat": ["best", "mp3", "ogg", "wav", "opus"]
 }
-let checkboxes = ["disableTikTokWatermark", "fullTikTokAudio"]
+let checkboxes = ["disableTikTokWatermark", "fullTikTokAudio"];
+if (!isFirefox) checkboxes.push("disableClipboardButton");
 let exceptions = { // used solely for ios devices, because they're less capable than everything else.
     "ytFormat": "mp4",
     "audioFormat": "mp3"
@@ -65,8 +68,17 @@ document.addEventListener("keydown", (event) => {
     }
 })
 function button() {
-    let regex = /https:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_\+.~#?&\/\/=]*)/.test(eid("url-input-area").value);
+    let regexTest = regex.test(eid("url-input-area").value);
-    regex ? changeDownloadButton(1, '>>') : changeDownloadButton(0, '>>');
+    if ((eid("url-input-area").value).length > 0) {
+        eid("url-clear").style.display = "block";
+    } else {
+        eid("url-clear").style.display = "none";
+    }
+    regexTest ? changeDownloadButton(1, '>>') : changeDownloadButton(0, '>>');
+}
+function clearInput() {
+    eid("url-input-area").value = '';
+    button();
 }
 function copy(id, data) {
     let e = document.getElementById(id);
@@ -106,6 +118,7 @@ function hideAllPopups() {
     eid("popup-backdrop").style.visibility = "hidden";
 }
 function popup(type, action, text) {
+    if (action == 1) hideAllPopups();
     eid("popup-backdrop").style.visibility = vis(action);
     switch (type) {
         case "about":
@@ -170,16 +183,18 @@ function changeSwitcher(li, b) {
 }
 function internetError() {
     eid("url-input-area").disabled = false
-    changeDownloadButton(2, '!!')
+    changeDownloadButton(2, '!!');
     popup("error", 1, loc.noInternet);
 }
 function checkbox(action) {
     if (eid(action).checked) {
         sSet(action, "true");
         if (action == "alwaysVisibleButton") button();
+        if (action == "disableClipboardButton") eid("pasteFromClipboard").style.display = "none";
     } else {
         sSet(action, "false");
         if (action == "alwaysVisibleButton") button();
+        if (action == "disableClipboardButton") eid("pasteFromClipboard").style.display = "flex";
     }
 }
 function updateToggle(toggl, state) {
@@ -188,7 +203,7 @@ function updateToggle(toggl, state) {
             eid(toggl).innerHTML = loc.toggleAudio;
             break;
         case "false":
-            eid(toggl).innerHTML = sGet(`${toggl}ToggledOnce`) == "true" ? loc.toggleDefault : loc.pressToChange + loc.toggleDefault;
+            eid(toggl).innerHTML = loc.toggleDefault;
             break;
     }
 }
@@ -203,6 +218,7 @@ function toggle(toggl) {
     updateToggle(toggl, sGet(toggl))
 }
 function loadSettings() {
+    if (sGet("disableClipboardButton") == "true") eid("pasteFromClipboard").style.display = "none";
     if (sGet("alwaysVisibleButton") == "true") {
         eid("alwaysVisibleButton").checked = true;
         eid("download-button").value = '>>'
@@ -222,8 +238,17 @@ function loadSettings() {
         changeSwitcher(i, sGet(i))
     }
 }
+async function pasteClipboard() {
+    let t = await navigator.clipboard.readText();
+    if (regex.test(t)) {
+        eid("url-input-area").value = t;
+        download(eid("url-input-area").value);
+    }
+    button();
+}
 async function download(url) {
     changeDownloadButton(2, '...');
+    eid("url-clear").style.display = "none";
     eid("url-input-area").disabled = true;
     let audioMode = sGet("audioMode");
     let format = ``;
@@ -246,7 +271,8 @@ async function download(url) {
                     case "redirect":
                         changeDownloadButton(2, '>>>')
                         setTimeout(() => {
-                            changeDownloadButton(1, '>>')
+                            changeDownloadButton(1, '>>');
+                            eid("url-clear").style.display = "block";
                             eid("url-input-area").disabled = false
                         }, 3000)
                         if (sGet("downloadPopup") == "true") {
@@ -271,29 +297,34 @@ async function download(url) {
                                     window.location.href = j.url
                                 }
                                 setTimeout(() => {
-                                    changeDownloadButton(1, '>>')
+                                    changeDownloadButton(1, '>>');
+                                    eid("url-clear").style.display = "block";
                                     eid("url-input-area").disabled = false
                                 }, 5000)
                             } else {
                                 eid("url-input-area").disabled = false
-                                changeDownloadButton(2, '!!')
+                                changeDownloadButton(2, '!!');
+                                eid("url-clear").style.display = "block";
                                 popup("error", 1, jp.text);
                             }
                         }).catch((error) => internetError());
                         break;
                     default:
                         eid("url-input-area").disabled = false
-                        changeDownloadButton(2, '!!')
+                        changeDownloadButton(2, '!!');
+                        eid("url-clear").style.display = "block";
                         popup("error", 1, loc.unknownStatus);
                         break;
                 }
             } else {
                 eid("url-input-area").disabled = false
+                eid("url-clear").style.display = "block";
                 changeDownloadButton(2, '!!')
                 popup("error", 1, loc.noURLReturned);
             }
         } else {
             eid("url-input-area").disabled = false
+            eid("url-clear").style.display = "block";
             changeDownloadButton(2, '!!')
             popup("error", 1, j.text);
         }
@@ -318,9 +349,14 @@ window.onload = () => {
         button();
     }
 }
+eid("url-input-area").addEventListener("keydown", (event) => {
+    if (event.key === 'Escape') eid("url-input-area").value = '';
+    button();
+})
 eid("url-input-area").addEventListener("keyup", (event) => {
     if (event.key === 'Enter') eid("download-button").click();
 })
 document.onkeydown = (event) => {
+    if (event.key == "Tab" || event.ctrlKey) eid("url-input-area").focus();
     if (event.key === 'Escape') hideAllPopups();
 };

src/front/emoji/clipboard.svg

@@ -0,0 +1,10 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 4.5C5 3.67157 5.67157 3 6.5 3H25.5C26.3284 3 27 3.67157 27 4.5V28.5C27 29.3284 26.3284 30 25.5 30H6.5C5.67157 30 5 29.3284 5 28.5V4.5Z" fill="#E19747"/>
+<path d="M25 6C25 5.44772 24.5523 5 24 5H8C7.44772 5 7 5.44772 7 6V27C7 27.5523 7.44772 28 8 28H18.5858C18.7327 28 18.8764 27.9677 19.0071 27.9069L19.3282 27.1239L19.96 23.0379L24.4166 22.255L24.9064 22.0082C24.9675 21.8772 25 21.7332 25 21.5858V6Z" fill="#F3EEF8"/>
+<path d="M24.9102 22H20C19.4477 22 19 22.4477 19 23V27.9102C19.108 27.861 19.2074 27.7926 19.2929 27.7071L24.7071 22.2929C24.7926 22.2074 24.861 22.108 24.9102 22Z" fill="#CDC4D6"/>
+<path d="M18 4C18 2.89543 17.1046 2 16 2C14.8954 2 14 2.89543 14 4H13C11.8954 4 11 4.89543 11 6V7.5C11 7.77614 11.2239 8 11.5 8H20.5C20.7761 8 21 7.77614 21 7.5V6C21 4.89543 20.1046 4 19 4H18ZM17 4C17 4.55228 16.5523 5 16 5C15.4477 5 15 4.55228 15 4C15 3.44772 15.4477 3 16 3C16.5523 3 17 3.44772 17 4Z" fill="#9B9B9B"/>
+<path d="M9 12.5C9 12.2239 9.22386 12 9.5 12H22.5C22.7761 12 23 12.2239 23 12.5C23 12.7761 22.7761 13 22.5 13H9.5C9.22386 13 9 12.7761 9 12.5Z" fill="#9B9B9B"/>
+<path d="M9 15.5C9 15.2239 9.22386 15 9.5 15H22.5C22.7761 15 23 15.2239 23 15.5C23 15.7761 22.7761 16 22.5 16H9.5C9.22386 16 9 15.7761 9 15.5Z" fill="#9B9B9B"/>
+<path d="M9.5 18C9.22386 18 9 18.2239 9 18.5C9 18.7761 9.22386 19 9.5 19H22.5C22.7761 19 23 18.7761 23 18.5C23 18.2239 22.7761 18 22.5 18H9.5Z" fill="#9B9B9B"/>
+<path d="M9 21.5C9 21.2239 9.22386 21 9.5 21H17.5C17.7761 21 18 21.2239 18 21.5C18 21.7761 17.7761 22 17.5 22H9.5C9.22386 22 9 21.7761 9 21.5Z" fill="#9B9B9B"/>
+</svg>

src/front/emoji/dragon_face_wukko.svg

@@ -0,0 +1,11 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.0985 20L11.2876 20.0023C11.163 20.0027 11.039 20.0205 10.9196 20.0553C9.57284 20.4476 9.75254 22.345 11.1502 22.4907L15.3126 22.9244C15.6061 22.955 15.7939 22.6293 15.6127 22.404L14.6445 21.1998C14.0337 20.4401 13.0937 19.9972 12.0985 20Z" fill="#F92F60"/>
+<path d="M9.86911 18.7891L9.82812 18.75H13.2344L12.1306 20.02C11.8606 20.29 11.4306 20.29 11.1606 20.02L10.2561 19.1579L9.41187 20.02C9.14187 20.29 8.71187 20.29 8.44187 20.02L7.54963 19.1104L6.6775 20.02C6.4075 20.29 5.9775 20.29 5.7075 20.02L4.51562 18.8281H7.27269L7.23438 18.7891H9.86911Z" fill="#E6B3B3"/>
+<path d="M19.6562 19.0002H19L19.5369 12.0625H29.6719C30.2519 12.0625 30.5469 12.6075 30.5469 13.1875V14.5C30.5469 16.8086 28.7796 18.7047 26.1464 18.9688H29.3263C30.0562 18.9688 30.6562 19.3796 30.6562 20.1096V23.7609C30.6562 27.5159 28.5156 29.9209 26.1875 29.9209H19.6562V19.0002Z" fill="#393939"/>
+<path d="M10.551 1.6787C10.037 1.52971 9.49952 1.82562 9.35053 2.33964C9.20153 2.85367 9.49745 3.39115 10.0115 3.54014C10.6835 3.73494 10.9953 3.99416 11.132 4.17663C11.2583 4.34529 11.285 4.5116 11.2547 4.67813C11.1764 5.1085 10.7662 5.42164 10.4687 5.42164C10.0082 5.42164 9.68486 5.27825 9.18245 5.05545C9.01245 4.98007 8.82195 4.89559 8.5987 4.8045C7.74073 4.45443 6.70166 4.20545 5.30246 4.75415C3.38697 5.50532 3.04515 7.3959 3.15012 8.85442C3.2569 10.3381 3.82769 11.8428 4.30201 12.6056C4.58463 13.06 5.18216 13.1994 5.63663 12.9167C6.09111 12.6341 6.23043 12.0366 5.94781 11.5821C5.63586 11.0805 5.16688 9.87831 5.08318 8.7153C4.99767 7.52712 5.31465 6.83113 6.01002 6.55843C6.79884 6.24909 7.29884 6.3673 7.86653 6.59893C7.96476 6.63901 8.07608 6.68952 8.19916 6.74536C8.75587 6.99795 9.55318 7.3597 10.4687 7.3597C11.8252 7.3597 12.9384 6.25096 13.1615 5.02508C13.2819 4.36349 13.1537 3.64307 12.6832 3.01486C12.2231 2.40046 11.4961 1.95264 10.551 1.6787Z" fill="#F92F60"/>
+<path d="M22.8585 5.00005H27.5433C27.7528 5.00005 27.9051 5.23005 27.8194 5.43005L27.5909 6.00005C27.1148 7.21005 25.9912 8.00005 24.7439 8.00005H22.8585C22.5919 8.00005 22.3444 8.17005 22.2301 8.42005L20.8399 11.65C20.7447 11.86 20.5447 12 20.3257 12H18.3738C17.9738 12 17.6977 11.56 17.8596 11.17L19.4497 7.34005C20.0401 5.92005 21.3827 5.00005 22.8585 5.00005Z" fill="#F92F60"/>
+<path d="M13.545 7.74869C13.7109 7.46456 13.8246 7.2698 13.8438 7.23444C13.9453 7.04684 14.4842 6.07835 15.4062 6.07819C16.0743 6.07808 16.6307 6.07814 16.9406 6.07817C17.033 6.07818 17.1035 6.07819 17.1484 6.07819C17.7109 6.07819 18.0234 6.64842 18.0234 6.98436C18.0234 7.37498 17.8047 7.99996 17.1484 7.99996H16.375C16.3125 7.98434 16.1687 7.98746 16.0938 8.12496C16.06 8.18681 15.9428 8.5144 15.8028 8.92064H27.6793C27.9293 8.92064 28.0993 9.15064 28.0493 9.39064L27.7193 11.3506C27.4193 12.5506 26.3393 13.3906 25.1093 13.3906H23.3993L23.4593 13.4606C23.9993 14.0606 24.2993 14.8306 24.2993 15.6406L24.2893 23.0606V23.4206L24.2493 24.4606C24.2393 24.6306 24.2193 24.8106 24.1993 24.9806L24.1393 25.5006C24.1256 25.6243 24.1024 25.7432 24.0795 25.8607C24.0691 25.9142 24.0587 25.9674 24.0493 26.0206L23.9493 26.5306C23.9293 26.644 23.9004 26.7573 23.8715 26.8707C23.8571 26.9273 23.8426 26.984 23.8293 27.0406C23.5693 28.0306 23.2093 29.0006 22.7593 29.9206H14.5155L15.4365 26.7122C15.9941 26.1945 16.0208 25.5264 16.0493 24.8137C16.057 24.6214 16.0648 24.4258 16.0832 24.229C16.0946 24.1079 16.0016 24 15.8799 24H7.13932C5.49932 24 4.06932 22.7706 4.07932 21.5206C4.07932 21.1906 4.34618 21.0337 4.67618 21.0337H10.2278C10.7195 21.0337 11.4005 20.7175 11.7505 20.3675L13.0793 18.9206H3.81932C2.85932 18.9206 2.07932 18.1406 2.07932 17.1806V13.3806C2.09932 12.0206 3.20932 10.9206 4.57932 10.9206C5.17932 10.9206 5.91494 11.0606 6.34494 11.4206C6.37301 11.444 6.40148 11.4681 6.43038 11.4925C6.71031 11.7292 7.02924 11.9988 7.39182 11.9988L10.4293 11.8906C10.9293 11.8906 11.3693 11.5906 11.5593 11.1406L11.9993 10.4206C12.0261 10.3744 12.0541 10.3291 12.0831 10.2848C12.5006 9.53792 13.162 8.40493 13.545 7.74869Z" fill="#EED5D5"/>
+<path d="M14.6163 29.9206C15.3233 29.4798 16.5543 27.5772 17.25 25.8614C17.8125 24.4741 16.849 24.0424 16.2969 24H14.2031L14.1373 24.0416C14.243 24.0583 14.3192 24.1576 14.3038 24.2674C14.1748 25.1883 14.0447 26.0547 13.3367 26.7122C12.4068 27.5889 10.6728 28.1548 9.44604 28.5551C9.35744 28.584 9.27149 28.6121 9.18867 28.6393C9.09414 28.6857 8.99705 28.7294 8.90131 28.7725C8.46028 28.971 8.04805 29.1566 8.04805 29.5299C8.04805 29.8805 8.27448 29.888 8.63617 29.8998C8.74323 29.9034 8.86215 29.9073 8.99056 29.9206H14.6163Z" fill="#F92F60"/>
+<path d="M4 17C3.45361 17 3 16.5905 3 16.0762V13.9238C3 13.419 3.4433 13 4 13C4.54639 13 5 13.4095 5 13.9238V16.0762C4.98969 16.581 4.54639 17 4 17Z" fill="#F8AEAE"/>
+<path d="M14 14C14 13.4477 14.4477 13 15 13C15.5523 13 16 13.4477 16 14V16C16 16.5523 15.5523 17 15 17C14.4477 17 14 16.5523 14 16V14Z" fill="#1C1C1C"/>
+</svg>

src/localization/changelog.json

@@ -1,5 +1,5 @@
 {
-    "ContentTitle": "tiktok images and better localization (3.4)",
+    "ContentTitle": "ui revamp and usability imporvements (3.5)",
-    "Content": "- added ability to save images from tiktok conveniently, and without watermarks.\n- it's now way easier to contribute translations to cobalt. read more on how to do it <a class=\"text-backdrop\" href=\"https://github.com/wukko/cobalt#how-to-contribute-translations\" target=\"_blank\">on github</a>. in short, you don't need to fork the repo anymore, everything is handled through crowdin :D\n- updated readme in github repo to make it easier to read and understand.\n- began to add more descriptive errors, more to come soon.\n\ninternal stuff:\n- remade entirety of tiktok module and merged it with douyin one. now both (basically identical) platforms have perfect parity of download features.\n- cleaned up the twitter module, now it's way more compact and easy to read.\n- moved changelog out of english localization.\n- other small improvements and fixes.",
+    "Content": "new features:\n- cobalt now lets you paste the link in your clipboard and download the file in a single press of a button. if content in your clipboard isn't a valid url, cobalt won't process or paste it. you can also hide it in settings if you want to.\nunfortunately, the clipboard button is not visible to firefox users because mozilla didn't add proper support for clipboard api.\n\n- there's now a button to quickly clean the input area, right next to download button. added it just in case you want to quickly save a bunch of videos and don't want to bother selecting text (personally my favorite new feature).\n\n- keyboard shortcuts! you love them, i love them, and now we can use them to perform quick actions in cobalt. use ctrl+v combo to paste the link without focusing the input area and esc key to close the active popup or clean the input area. and if you didn't know, you can also press enter to download content from the link.\n\nnew looks:\n- main box has been revamped. it has lost its border, thick padding, and now feels light and fresh.\n\n- download button is now prettier, and has been tuned to make >> look just like the logo.\n\n- buttons on the bottom now actually look like buttons and are way more descriptive. no more #@+?$ bullshit. it's way easier to see and understand what each of them does.\n\n- bottom buttons are also prettier and easier to use on a phone. they're bigger and stretch out to sides, making them easier to press.\n\nfixes:\n\n- it's now impossible to overlap multiple popups at once. no more mess if you decide to explore popups while waiting for request to process.\n\n- popup tabs have been slightly moved down in order to prevent popup content overlapping.\n\n- ui scalability has been improved.",
     "FollowTwitter": "follow cobalt's twitter account for polls, updates, and more: <a class=\"text-backdrop\" href=\"https://twitter.com/justusecobalt\" target=\"_blank\">@justusecobalt</a>"
 }

src/localization/languages/en.json

@@ -96,6 +96,8 @@
         "ImagePickerExplanationPC": "right click an image to save it.",
         "ImagePickerExplanationPhone": "press and hold an image to save it.",
         "ErrorNoUrlReturned": "server didn't return a download link. this should never happen. reload the page and try again, but if it doesn't help, {ContactLink}.",
-        "ErrorUnknownStatus": "i received a response i can't process. most likely something with status is wrong. this should never happen. reload the page and try again, but if it doesn't help, {ContactLink}."
+        "ErrorUnknownStatus": "i received a response i can't process. most likely something with status is wrong. this should never happen. reload the page and try again, but if it doesn't help, {ContactLink}.",
+        "PasteFromClipboard": "paste from clipboard",
+        "SettingsDisableClipboard": "hide clipboard button"
     }
 }

src/localization/languages/ru.json

@@ -82,7 +82,7 @@
         "SettingsAudioFormatDescription": "когда выбран \"лучший\" формат, ты получишь аудио максимально возможного качества, так как оно останется в оригинальном формате. если же выбрано что-то другое, то аудио будет немного сжато.",
         "Keyphrase": "сохраняй то, что любишь",
         "SettingsDisableChangelogOnUpdate": "не показывать изменения после обновлений",
-        "SettingsRemoveWatermark": "убрать ватермарку",
+        "SettingsRemoveWatermark": "выключить ватермарку",
         "ErrorPopupCloseButton": "ясно",
         "ModeToggle": "режим",
         "ModeToggleSmart": "умный",
@@ -96,6 +96,8 @@
         "ImagePickerExplanationPC": "нажми правой кнопкой мыши на изображение, чтобы его сохранить.",
         "ImagePickerExplanationPhone": "зажми и удерживай изображение, чтобы его сохранить.",
         "ErrorNoUrlReturned": "я не получил ссылку для скачивания от сервера. такого происходить не должно. перезагрузи страницу, а если не поможет, то {ContactLink}.",
-        "ErrorUnknownStatus": "сервер ответил мне чем-то непонятным. такого происходить не должно. перезагрузи страницу, а если не поможет, то {ContactLink}."
+        "ErrorUnknownStatus": "сервер ответил мне чем-то непонятным. такого происходить не должно. перезагрузи страницу, а если не поможет, то {ContactLink}.",
+        "PasteFromClipboard": "вставить из буфера обмена",
+        "SettingsDisableClipboard": "скрыть кнопку буфера обмена"
     }
 }

src/modules/emoji.js

@@ -7,10 +7,11 @@ const names = {
     "✨": "sparkles",
     "🪅": "pinata",
     "🪄": "magic_wand",
-    "🐲": "dragon_face",
+    "🐲": "dragon_face_wukko",
     "💸": "money_with_wings",
     "⚙️": "gear",
-    "☹️": "frowning_face"
+    "☹️": "frowning_face",
+    "📋": "clipboard"
 }
 let sizing = {
     22: 0.4,

src/modules/pageRender/elements.js

@@ -105,8 +105,18 @@ export function settingsCategory(obj) {
 export function footerButtons(obj) {
     let items = ``
     for (let i = 0; i < obj.length; i++) {
-        let func = `${obj[i]["type"] == "toggle" ? `toggle('${obj[i]["name"]}')` : `popup('${obj[i]["name"]}', 1)`}`;
+        switch (obj[i]["type"]) {
-        items += `<button id="${obj[i]["name"]}" class="button footer-button" onclick="${func}" aria-label="${obj[i]["aria"]}">${obj[i]["icon"]}</button>`;
+            case "toggle": 
+                items += `<button id="${obj[i]["name"]}" class="switch footer-button" onclick="toggle('${obj[i]["name"]}')" aria-label="${obj[i]["aria"]}">${obj[i]["text"]}</button>`;
+                break;
+            case "action":
+                items += `<button id="${obj[i]["name"]}" class="switch footer-button" onclick="${obj[i]["action"]}()" aria-label="${obj[i]["aria"]}">${obj[i]["text"]}</button>`;
+                break;
+            case "popup":
+                items += `<div class="footer-pair"><button id="${obj[i]["name"]}" class="switch footer-button" onclick="popup('${obj[i]["name"]}', 1)" aria-label="${obj[i]["aria"]}">${obj[i]["text"]}</button><button id="${obj[i+1]["name"]}" class="switch footer-button" onclick="popup('${obj[i+1]["name"]}', 1)" aria-label="${obj[i+1]["aria"]}">${obj[i+1]["text"]}</button></div>`;
+                i++;
+                break;
+        }
     }
     return `
     <div id="footer-buttons">${items}</div>`

src/modules/pageRender/page.js

@@ -28,10 +28,11 @@ for (let i in donations["crypto"]) {
     extr = ' extra'
 }
 export default function(obj) {
-    audioFormats[0]["text"] = loc(obj.lang, 'SettingsAudioFormatBest')
+    audioFormats[0]["text"] = loc(obj.lang, 'SettingsAudioFormatBest');
-    let ua = obj.useragent.toLowerCase()
+    let ua = obj.useragent.toLowerCase();
-    let isIOS = ua.match("iphone os")
+    let isIOS = ua.match("iphone os");
-    let isMobile = ua.match("android") || ua.match("iphone os")
+    let isMobile = ua.match("android") || ua.match("iphone os");
+    let isFirefox = ua.match("firefox/");
     try {
         return `<!DOCTYPE html>
 <html lang="en">
@@ -239,7 +240,10 @@ export default function(obj) {
                             "text": loc(obj.lang, 'SettingsThemeLight')
                         }]
                     })
-                }) + checkbox("alwaysVisibleButton", loc(obj.lang, 'SettingsKeepDownloadButton'), loc(obj.lang, 'AccessibilityKeepDownloadButton')) + checkbox("disableChangelog", loc(obj.lang, 'SettingsDisableChangelogOnUpdate'), loc(obj.lang, 'SettingsDisableChangelogOnUpdate'))
+                })
+                + checkbox("alwaysVisibleButton", loc(obj.lang, 'SettingsKeepDownloadButton'), loc(obj.lang, 'AccessibilityKeepDownloadButton'))
+                + checkbox("disableChangelog", loc(obj.lang, 'SettingsDisableChangelogOnUpdate'), loc(obj.lang, 'SettingsDisableChangelogOnUpdate'))
+                + (!isFirefox ? checkbox("disableClipboardButton", loc(obj.lang, 'SettingsDisableClipboard'), loc(obj.lang, 'SettingsDisableClipboard')) : ``)
             }],
         })}
         ${popup({
@@ -267,7 +271,6 @@ export default function(obj) {
             buttons: [`<a id="imagepicker-download" class="switch" target="_blank" href="/">${loc(obj.lang, 'ImagePickerDownloadAudio')}</a>`],
             content: '<div id="imagepicker-holder"></div>'
         })}
-        
         ${popup({
             name: "error",
             standalone: true,
@@ -281,29 +284,49 @@ export default function(obj) {
             },
             body: `<div id="desc-error" class="desc-padding subtext"></div>`
         })}
+        ${popup({
+            name: "info",
+            standalone: true,
+            buttonOnly: true,
+            emoji: emoji("✨", 48, 1),
+            classes: ["small"],
+            buttonText: loc(obj.lang, 'ErrorPopupCloseButton'),
+            header: {
+                closeAria: loc(obj.lang, 'AccessibilityClosePopup'),
+                title: "popup title"
+            },
+            body: `<div id="popup-info-desc" class="desc-padding subtext"></div>`
+        })}
         <div id="popup-backdrop" style="visibility: hidden;" onclick="hideAllPopups()"></div>
-        <div id="cobalt-main-box" class="center box" style="visibility: hidden;">
+        <div id="cobalt-main-box" class="center" style="visibility: hidden;">
             <div id="logo-area">${appName}</div>
             <div id="download-area" class="mobile-center">
-                <input id="url-input-area" class="mono" type="text" autocorrect="off" maxlength="128" autocapitalize="off" placeholder="${loc(obj.lang, 'LinkInput')}" aria-label="${loc(obj.lang, 'AccessibilityInputArea')}" oninput="button()">
+                <div id="top">
+                    <input id="url-input-area" class="mono" type="text" autocorrect="off" maxlength="128" autocapitalize="off" placeholder="${loc(obj.lang, 'LinkInput')}" aria-label="${loc(obj.lang, 'AccessibilityInputArea')}" oninput="button()"></input>
+                    <button id="url-clear" onclick="clearInput()" style="display:none;">x</button>
                     <input id="download-button" class="mono dontRead" onclick="download(document.getElementById('url-input-area').value)" type="submit" value="" disabled=true aria-label="${loc(obj.lang, 'AccessibilityDownloadButton')}">
                 </div>
+                ${!isFirefox ? `<div id="bottom">
+                <button id="pasteFromClipboard" class="switch" onclick="pasteClipboard()" aria-label="toggle download mode">${emoji("📋", 22)} ${loc(obj.lang, 'PasteFromClipboard')}</button>
+            </div>` : ''}
+            </div>
         </div>
         <footer id="footer" style="visibility: hidden;">
-        ${footerButtons([{
+        ${/* big action buttons are ALWAYS either first or last, because usual buttons are bundled in pairs and are sandwiched between bigger buttons for mobile view */
+        footerButtons([{
             name: "about",
             type: "popup",
-            icon: "?",
+            text: `${emoji("🐲", 22)} ${loc(obj.lang, 'AboutTab')}`,
             aria: loc(obj.lang, 'AccessibilityOpenAbout')
         }, {
             name: "settings",
             type: "popup",
-            icon: "+",
+            text: `${emoji("⚙️", 22)} ${loc(obj.lang, 'TitlePopupSettings')}`,
             aria: loc(obj.lang, 'AccessibilityOpenSettings')
         }, {
             name: "audioMode",
             type: "toggle",
-            icon: emoji("✨", 22, 1),
+            text: emoji("✨", 22, 1),
             aria: loc(obj.lang, 'AccessibilityModeToggle')
         }]
         )}
@@ -314,8 +337,7 @@ export default function(obj) {
         noURLReturned: ` + "`" + loc(obj.lang, 'ErrorNoUrlReturned') + "`" + `,
         unknownStatus: ` + "`" + loc(obj.lang, 'ErrorUnknownStatus') + "`" + `,
         toggleDefault: '${emoji("✨")} ${loc(obj.lang, "ModeToggleSmart")} ${loc(obj.lang, "ModeToggle")}',
-        toggleAudio: '${emoji("🎶")} ${loc(obj.lang, "SettingsAudioTab")} ${loc(obj.lang, "ModeToggle")}',
+        toggleAudio: '${emoji("🎶")} ${loc(obj.lang, "SettingsAudioTab")} ${loc(obj.lang, "ModeToggle")}'
-        pressToChange: '<div class="tooltip">▼ ${loc(obj.lang, 'AccessibilityModeToggle')}</div>'
     };</script>
     <script type="text/javascript" src="cobalt.js"></script>
 </html>`;