beginning of 2.2

- added download popup to solve the issue with downloads on ios - merged big and small popups into one - made buttons in donation menu act like buttons - began to clean up localisation - added ability to embed repo url into localisation strings - moved ffmpeg args to config for more flexibility (and hopefully future changes) - removed error response in stream that could result in a crash - removed notice for ios users from about cause it's no longer relevant - made error popup look and act like the rest - a tiny bit of clean up - ill do better changelog tomorrow i think
2022-07-14 02:32:00 +06:00
parent 78176be045
commit 137184d469
17 changed files with 201 additions and 200 deletions
--- a/files/cobalt.css
+++ b/files/cobalt.css
@@ -98,13 +98,22 @@ input {
 }
 button:hover,
 .switch:hover,
-.checkbox:hover {
+.checkbox:hover,
+.text-to-copy:hover {
    background: var(--accent-hover);
    cursor: pointer;
 }
+.switch.text-backdrop:hover,
+.switch.text-backdrop:active,
+.text-to-copy.text-backdrop:hover,
+.text-to-copy.text-backdrop:active {
+    background: var(--accent);
+    color: var(--background);
+}
 button:active,
 .switch:active,
-.checkbox:active {
+.checkbox:active,
+.text-to-copy:active {
    background: var(--accent-press);
    cursor: pointer;
 }
@@ -216,13 +225,16 @@ input[type="checkbox"] {
 .popup {
    visibility: hidden;
    position: fixed;
-    width: 55%;
    height: auto;
+    width: 30%;
    z-index: 999;
-    padding: 3rem;
+    padding: 3rem 2rem 2rem 2rem;
    font-size: 0.9rem;
    max-height: 80%;
 }
+.popup-big {
+    width: 55%;
+}
 #popup-backdrop {
    opacity: 0.5;
    background-color: var(--background);
@@ -233,17 +245,7 @@ input[type="checkbox"] {
    height: 100%;
    z-index: 998;
 }
-.popup-narrow {
-    visibility: hidden;
-    position: fixed;
-    width: 30%;
-    height: auto;
-    z-index: 999;
-    padding: 3rem 2rem 2rem 2rem;
-    font-size: 0.9rem;
-    max-height: 80%;
-}
-.popup-narrow.scrollable {
+.popup.scrollable {
    height: 80%;
 }
 .nowrap {
@@ -288,7 +290,7 @@ input[type="checkbox"] {
    color: var(--accent-unhover-2);
    font-size: 0.8rem;
 }
-.popup-narrow .popup-content {
+.popup-content {
    overflow-x: hidden;
    overflow-y: auto;
    height: var(--without-padding);
@@ -305,11 +307,8 @@ input[type="checkbox"] {
 #close {
    cursor: pointer;
    float: right;
-    right: 3rem;
-    position: absolute;
-}
-.popup-narrow #close {
    right: 0rem;
+    position: absolute;
 }
 .settings-category {
    padding-bottom: 1.2rem;
@@ -348,6 +347,9 @@ input[type="checkbox"] {
    color: var(--accent);
    margin-top: 1rem;
 }
+.small-padding .subtitle {
+    margin-top: 0.5rem;
+}
 .explanation {
    padding-top: 1rem;
    width: 100%;
@@ -377,6 +379,9 @@ input[type="checkbox"] {
 .switch.right {
    border-right: solid 0.1rem var(--accent);
 }
+.switch.space-right {
+    margin-right: 1rem
+}
 .switch[data-enabled="true"] {
    color: var(--background);
    background: var(--accent);
@@ -411,30 +416,28 @@ input[type="checkbox"] {
    }
 }
@media screen and (max-width: 1440px) {
-    #cobalt-main-box,
-    .popup {
+    #cobalt-main-box {
        width: 65%;
    }
-    .popup-narrow {
-        width: 35%;
+    .popup {
+        width: 40%;
    }
 }
@media screen and (max-width: 1024px) {
-    #cobalt-main-box,
-    .popup {
+    #cobalt-main-box {
        width: 75%;
    }
-    .popup-narrow {
-        width: 50%;
+    .popup {
+        width: 60%;
    }
 }
@media screen and (max-height: 850px) {
-    .popup-narrow {
+    .popup {
        height: 80%
    }
 }
 /* mobile page */
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 949px) {
    #logo-area {
        padding-right: 0;
        padding-top: 0;
@@ -450,9 +453,7 @@ input[type="checkbox"] {
        border: none;
        padding: 0;
    }
-    .popup,
-    .popup-narrow,
-    .popup-narrow.scrollable {
+    .popup, .popup.scrollable {
        border: none;
        width: 90%;
        height: 90%;
@@ -475,9 +476,7 @@ input[type="checkbox"] {
        border: none;
        padding: 0;
    }
-    .popup,
-    .popup-narrow,
-    .popup-narrow.scrollable {
+    .popup, .popup.scrollable {
        border: none;
        width: 90%;
        height: 90%;
--- a/files/cobalt.js
+++ b/files/cobalt.js
@@ -1,3 +1,10 @@
+let isIOS = navigator.userAgent.toLowerCase().match("iphone os");
+let switchers = {
+    "theme": ["auto", "light", "dark"],
+    "youtubeFormat": ["mp4", "webm", "audio"],
+    "quality": ["max", "hig", "mid", "low"]
+}
+
 function eid(id) {
    return document.getElementById(id)
 }
@@ -44,10 +51,10 @@ 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);
    regex ? changeDownloadButton(1, '>>') : changeDownloadButton(0, '>>');
 }
-function copy(id) {
+function copy(id, data) {
    let e = document.getElementById(id);
    e.classList.add("text-backdrop");
-    navigator.clipboard.writeText(e.innerText);
+    data ? navigator.clipboard.writeText(data) : navigator.clipboard.writeText(e.innerText);
    setTimeout(() => { e.classList.remove("text-backdrop") }, 600);
 }
 function detectColorScheme() {
@@ -65,53 +72,35 @@ function popup(type, action, text) {
    switch (type) {
        case "about":
            eid("popup-about").style.visibility = vis(action);
-            if (!localStorage.getItem("seenAbout")) {
-                localStorage.setItem("seenAbout", "true");
-            }
+            if (!localStorage.getItem("seenAbout")) localStorage.setItem("seenAbout", "true");
            break;
        case "error":
            eid("desc-error").innerHTML = text;
            eid("popup-error").style.visibility = vis(action);
            break;
-        case "settings":
-            eid("popup-settings").style.visibility = vis(action);
+        case "download":
+            if (action == 1) {
+                eid("pd-download").href = text;
+                eid("pd-copy").setAttribute("onClick", `copy('pd-copy', '${text}')` );
+            }
+            eid("popup-download").style.visibility = vis(action);
            break;
-        case "changelog":
-            eid("popup-changelog").style.visibility = vis(action);
-            break;
-        case "donate":
-            eid("popup-donate").style.visibility = vis(action);
+        default:
+            eid(`popup-${type}`).style.visibility = vis(action);
            break;
    }
 }
 function changeSwitcher(li, b, u) {
-    if (u) {
-        localStorage.setItem(li, b);
-    }
-    let l = {
-        "theme": ["auto", "light", "dark"],
-        "youtubeFormat": ["mp4", "webm", "audio"],
-        "quality": ["max", "hig", "mid", "low"]
-    }
+    if (u) localStorage.setItem(li, b);
    if (b) {
-        for (i in l[li]) {
-            if (l[li][i] == b) {
-                enable(`${li}-${b}`)
-            } else {
-                disable(`${li}-${l[li][i]}`)
-            }
-        }
-        if (li == "theme") {
-            detectColorScheme();
+        for (i in switchers[li]) {
+            (switchers[li][i] == b) ? enable(`${li}-${b}`) : disable(`${li}-${switchers[li][i]}`)
        }
+        if (li == "theme") detectColorScheme();
    } else {
-        localStorage.setItem(li, l[li][0]);
-        for (i in l[li]) {
-            if (l[li][i] == l[li][0]) {
-                enable(`${li}-${l[li][0]}`)
-            } else {
-                disable(`${li}-${l[li][i]}`)
-            }
+        localStorage.setItem(li, switchers[li][0]);
+        for (i in switchers[li]) {
+            (switchers[li][i] == switchers[li][0]) ? enable(`${li}-${switchers[li][0]}`) : disable(`${li}-${switchers[li][i]}`)
        }
    }
 }
@@ -121,24 +110,23 @@ function internetError() {
    popup("error", 1, loc.noInternet);
 }
 function checkbox(action) {
-    switch(action) {
-        case 'alwaysVisibleButton':
-            if (eid("always-visible-button").checked) {
-                localStorage.setItem("alwaysVisibleButton", "true");
-                button();
-            } else {
-                localStorage.setItem("alwaysVisibleButton", "false");
-                button();
-            }
-            break;
+    if (eid(action).checked) {
+        localStorage.setItem(action, "true");
+        if (action == "alwaysVisibleButton") button();
+    } else {
+        localStorage.setItem(action, "false");
+        if (action == "alwaysVisibleButton") button();
    }
 }
 function loadSettings() {
    if (localStorage.getItem("alwaysVisibleButton") == "true") {
-        eid("always-visible-button").checked = true;
+        eid("alwaysVisibleButton").checked = true;
        eid("download-button").value = '>>'
        eid("download-button").style.padding = '0 1rem';
    }
+    if (localStorage.getItem("downloadPopup") == "true" && !isIOS) {
+        eid("downloadPopup").checked = true;
+    }
    changeSwitcher("theme", localStorage.getItem("theme"))
    changeSwitcher("youtubeFormat", localStorage.getItem("youtubeFormat"))
    changeSwitcher("quality", localStorage.getItem("quality"))
@@ -160,8 +148,8 @@ async function download(url) {
                        changeDownloadButton(1, '>>')
                        eid("url-input-area").disabled = false
                    }, 3000)
-                    if (navigator.userAgent.toLowerCase().match("iphone os")) {
-                        window.location.href = j.url;
+                    if (localStorage.getItem("downloadPopup") == "true") {
+                        popup('download', 1, j.url)
                    } else {
                        window.open(j.url, '_blank');
                    }
@@ -182,9 +170,7 @@ async function download(url) {
                            changeDownloadButton(2, '!!')
                            popup("error", 1, jp.text);
                        }
-                    }).catch((error) => {
-                        internetError()
-                    });
+                    }).catch((error) => internetError());
                    break;
            }
        } else {
@@ -192,9 +178,7 @@ async function download(url) {
            changeDownloadButton(2, '!!')
            popup("error", 1, j.text);
        }
-    }).catch((error) => {
-        internetError()
-    });
+    }).catch((error) => internetError());
 }
 window.onload = function () {
    loadSettings();
@@ -203,9 +187,8 @@ window.onload = function () {
    eid("cobalt-main-box").style.visibility = 'visible';
    eid("footer").style.visibility = 'visible';
    eid("url-input-area").value = "";
-    if (!localStorage.getItem("seenAbout")) {
-        popup('about', 1)
-    }
+    if (!localStorage.getItem("seenAbout")) popup('about', 1);
+    if (isIOS) localStorage.setItem("downloadPopup", "true");
 }
 eid("url-input-area").addEventListener("keyup", (event) => {
    if (event.key === 'Enter') {