more ui enhancements

new in this commit:
- rounded corners everywhere! cobalt is now safe for everyone who can't handle sharp objects.
- proper banner loading. no more jumping text!
- proper banner error handling. if banner wasn't loaded, it'll simply go grey instead of disappearing.
- links are no longer italic and are instead underlined.
- collapsible lists now have corresponding emoji.
- donate button is now highlighted with magenta instead of white.
- added a list of keyboard shortcuts to about tab.
- centered old changelog loader.

package.json

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

src/front/cobalt.css

@@ -8,7 +8,7 @@
     --font-mono: 'Noto Sans Mono', 'Consolas', 'SF Mono', monospace;
     --padding-1: 0.75rem;
     --line-height: 1.65rem;
-    --red: rgb(255, 0, 61);
+    --red: rgb(249, 47, 96);
     --gap: 0.5rem;
     --gap-no-icon: 0.6rem;
 }
@@ -19,6 +19,7 @@
         --accent-subtext: rgb(110, 110, 110);
         --accent-hover: rgb(30, 30, 30);
         --accent-hover-elevated: rgb(48, 48, 48);
+        --accent-hover-transparent: rgba(48, 48, 48, 0.5);
         --accent-button: rgb(25, 25, 25);
         --accent-button-elevated: rgb(42, 42, 42);
         --glass: rgba(25, 25, 25, 0.85);
@@ -34,6 +35,7 @@
         --accent-subtext: rgb(110, 110, 110);
         --accent-hover: rgb(230, 230, 230);
         --accent-hover-elevated: rgb(215, 215, 215);
+        --accent-hover-transparent: rgba(215, 215, 215, 0.5);
         --accent-button: rgb(225, 225, 225);
         --accent-button-elevated: rgb(210, 210, 210);
         --glass: rgba(230, 230, 230, 0.85);
@@ -48,6 +50,7 @@
     --accent-subtext: rgb(110, 110, 110);
     --accent-hover: rgb(30, 30, 30);
     --accent-hover-elevated: rgb(48, 48, 48);
+    --accent-hover-transparent: rgba(48, 48, 48, 0.5);
     --accent-button: rgb(25, 25, 25);
     --accent-button-elevated: rgb(42, 42, 42);
     --glass: rgba(25, 25, 25, 0.85);
@@ -61,6 +64,7 @@
     --accent-subtext: rgb(110, 110, 110);
     --accent-hover: rgb(230, 230, 230);
     --accent-hover-elevated: rgb(215, 215, 215);
+    --accent-hover-transparent: rgba(215, 215, 215, 0.5);
     --accent-button: rgb(225, 225, 225);
     --accent-button-elevated: rgb(210, 210, 210);
     --glass: rgba(230, 230, 230, 0.85);
@@ -171,8 +175,7 @@ input[type="text"],
 .desktop .switch:hover,
 .desktop .checkbox:hover,
 .desktop .text-to-copy:hover,
-.desktop .collapse-header:hover,
+.desktop .collapse-header:hover {
-.desktop #back-button:hover {
     background: var(--accent-hover);
     box-shadow: 0 0 0 0.1rem var(--accent-highlight) inset;
     cursor: pointer;
@@ -336,9 +339,10 @@ button:active,
 .text-backdrop {
     background: var(--accent);
     color: var(--background);
+    padding: 0 0.2rem;
 }
-.italic {
+.text-backdrop.link {
-    font-style: italic;
+    text-decoration: underline;
 }
 .cobalt-support-link {
     display: flex;
@@ -367,12 +371,13 @@ button:active,
     max-height: 95%;
     opacity: 0;
     transform: translate(-50%,-48%)scale(.95);
+    box-shadow: 0 0 40px 0 var(--accent-hover-transparent);
 }
 .popup.visible {
     visibility: visible;
     opacity: 1;
     transform: translate(-50%, -50%);
-    transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out;
+    transition: transform 100ms ease-out, opacity 100ms ease-in-out;
 }
 #popup-backdrop {
     visibility: hidden;
@@ -388,7 +393,7 @@ button:active,
 #popup-backdrop.visible {
     visibility: visible;
     opacity: 0.5;
-    transition: opacity 0.1s ease-in-out;
+    transition: opacity 130ms ease-in-out;
 }
 .popup.small {
     width: 20%;
@@ -411,7 +416,7 @@ button:active,
     border: none;
 }
 .popup.small #popup-title {
-    margin-bottom: .2rem;
+    margin-bottom: 0.2rem;
 }
 .popup.small .explanation {
     margin-bottom: 0.8rem;
@@ -434,9 +439,11 @@ button:active,
     position: relative;
     width: 100%;
     max-height: 300px;
-    min-height: 160px;
+    min-height: 210px;
-    margin-bottom: 1rem;
+    margin-bottom: 0.7rem;
     float: left;
+    background: var(--accent-hover);
+    display: flex;
 }
 .changelog-img {
     object-fit: cover;
@@ -452,11 +459,11 @@ button:active,
 }
 .changelog-tag-version {
     font-size: 1rem;
-    padding: 0.15rem 0.45rem;
+    padding: 0.15rem 0.7rem;
 }
 .changelog-tag-date {
     color: var(--accent-subtext);
-    font-size: .8rem;
+    font-size: 0.8rem;
 }
 .nowrap {
     white-space: nowrap;
@@ -492,7 +499,7 @@ button:active,
     font-size: 0.8rem;
 }
 #popup-content {
-    overflow-x: hidden;
+    overflow-x: scroll;
     overflow-y: auto;
     height: 100%;
     scrollbar-width: none;
@@ -589,12 +596,17 @@ button:active,
     box-shadow: var(--inset-focus) inset;
 }
 #popup-tabs .switch {
-    background: unset;
+    background: none;
+}
+.desktop #popup-tabs .switch:hover,
+#popup-tabs .switch:active {
+    background: var(--accent-hover-transparent);
+    box-shadow: 0 0 0 0.1rem var(--accent-highlight) inset;
 }
 .switch[data-enabled="true"],
 #popup-tabs .switch[data-enabled="true"] {
     color: var(--background);
-    background: var(--accent);
+    background: var(--accent)!important;
     cursor: default;
 }
 .switch[data-enabled="true"]:hover {
@@ -628,7 +640,7 @@ button:active,
     user-select: text;
     -webkit-user-select: text;
     background: var(--accent-button);
-    padding: var(--padding-1);
+    padding: var(--gap-no-icon);
     overflow: auto;
 }
 #back-button {
@@ -637,10 +649,11 @@ button:active,
     max-width: 4rem;
     font-size: 1rem;
 }
-#back-button svg path {
+#back-button svg path,
+.collapse-indicator svg path {
     fill: var(--accent);
 }
-.popup-tab-content {
+.popup-tab-content[data-enabled="false"] {
     display: none;
 }
 #popup-tabs {
@@ -657,7 +670,6 @@ button:active,
     padding: 0 0.2rem;
 }
 .emoji, svg {
-    margin-right: 0.4rem;
     user-select: none;
     -webkit-user-select: none;
     pointer-events: none;
@@ -729,27 +741,36 @@ button:active,
     user-select: none;
     -webkit-user-select: none;
 }
+.collapse-list.last {
+    margin-bottom: 1rem;
+}
 .collapse-header {
-    padding: var(--padding-1);
+    padding: 0.5rem var(--padding-1);
-    font-size: 1rem;
+    font-size: 0.95rem;
     display: flex;
     flex-direction: row;
     align-items: center;
     cursor: pointer;
     background: var(--accent-button);
 }
-.collapse-indicator {
+.collapse-header .emoji {
-    transform: rotate(180deg);
+    margin-right: var(--padding-1);
 }
-.expanded .collapse-indicator {
+.collapse-indicator {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
     transform: none;
 }
+.collapse-list.expanded .collapse-indicator {
+    transform: rotate(180deg);
+}
 .collapse-title {
     width: 100%;
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: 0.8rem;
 }
 .collapse-body {
     display: none;
@@ -767,7 +788,8 @@ button:active,
     display: none;
 }
 #about-donate-footer {
-    box-shadow: 0 0 0 0.1rem var(--accent) inset;
+    box-shadow: 0 0 0 .1rem var(--red) inset, 0 0 1rem 0 var(--red);
+    z-index: 1;
 }
 .popup-content-inner,
 .tab-content-settings,
@@ -823,6 +845,82 @@ button:active,
 .popup-from-bottom.visible {
     visibility: visible;
 }
+#keyboard-collapse {
+    display: none;
+}
+.desktop #keyboard-collapse {
+    display: block;
+}
+.text-backdrop.key {
+    color: var(--accent-hover-elevated);
+}
+#keyboard-shortcuts {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: 1.5rem;
+    user-select: none;
+    color: var(--accent);
+}
+/* rounded corners */
+#bottom #paste,
+#footer .switch,
+#audioMode,
+#popup-content .switches,
+.checkbox,
+.changelog-img,
+.changelog-banner,
+#close-error,
+.changelog-tag-version,
+#download-switcher .switch,
+#popup-about .switch,
+#popup-tabs .switch,
+.text-to-copy {
+    border-radius: 5px / 6px;
+}
+[type=checkbox] {
+    border-radius: 3px / 4px;
+}
+.popup {
+    border-radius: 8px / 9px;
+}
+#popup-header {
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+}
+#popup-tabs {
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+.switches .first {
+    border-top-left-radius: 5px 6px;
+    border-bottom-left-radius: 5px 6px;
+}
+.switches .last {
+    border-top-right-radius: 5px 6px;
+    border-bottom-right-radius: 5px 6px;
+}
+.text-backdrop {
+    border-radius: 3px / 4px;
+}
+.collapse-list.first,
+.collapse-list.first .collapse-header {
+    border-top-left-radius: 7px 8px;
+    border-top-right-radius: 7px 8px;
+}
+.collapse-list.last,
+.collapse-list.last .collapse-header {
+    border-bottom-left-radius: 7px 8px;
+    border-bottom-right-radius: 7px 8px;
+}
+.collapse-list.last.expanded .collapse-header {
+    border-radius: 0;
+}
+.loader {
+    text-align: center;
+}
 /* adapt the page according to screen size */
 @media screen and (max-width: 1550px) {
     .popup.small {
@@ -918,7 +1016,7 @@ button:active,
     .subtitle,
     #popup-desc,
     .collapse-title {
-        font-size: .7rem;
+        font-size: 0.7rem;
     }
     .collapse-header {
         padding: 0.5rem;
@@ -928,13 +1026,13 @@ button:active,
         font-size: 0.6rem;
     }
     .explanation {
-        font-size: .6rem;
+        font-size: 0.6rem;
         margin-top: 0.5rem;
         line-height: 1rem!important;
     }
     #popup-desc {
         line-height: 1.2rem;
-        font-size: .64rem;
+        font-size: 0.64rem;
     }
     .changelog-subtitle, #popup-subtitle {
         font-size: 0.8rem!important;
@@ -1005,6 +1103,16 @@ button:active,
     .urgent-notice {
         padding-top: calc(env(safe-area-inset-bottom)/2 + 1rem);
     }
+    .popup,
+    #popup-header,
+    #popup-tabs {
+        border-radius: 0;
+    }
+    .popup.center {
+        top: unset;
+        left: unset;
+        transform: unset;
+    }
     .popup.small {
         width: calc(100% - 1.7rem * 2);
         height: auto;
@@ -1016,15 +1124,18 @@ button:active,
         border: none;
         border-top: var(--accent-highlight) solid 0.15rem;
         padding-bottom: calc(env(safe-area-inset-bottom)/2 + 1.7rem);
-        transform: none;
+        transform: translateY(30rem);
     }
     .popup.small.visible {
         transform: none;
-        transition: opacity 0.1s ease-in-out;
+        transition: transform 200ms cubic-bezier(0.075, 0.82, 0.165, 1), opacity 130ms ease-in-out;
     }
     .popup.small #popup-header {
         background: none;
     }
+    .no-animation .popup.small {
+        transition: none;
+    }
     #close-error {
         bottom: 3rem;
     }
@@ -1053,11 +1164,6 @@ button:active,
         height: 100%;
         max-height: 100%;
     }
-    .popup.center {
-        top: unset;
-        left: unset;
-        transform: unset;
-    }
     #popup-tabs {
         padding-bottom: calc(env(safe-area-inset-bottom)/2 + 1.5rem);
     }

src/front/cobalt.js

@@ -3,7 +3,7 @@ const isIOS = ua.match("iphone os");
 const isMobile = ua.match("android") || ua.match("iphone os");
 const isFirefox = ua.match("firefox/");
 const isOldFirefox = ua.match("firefox/") && ua.split("firefox/")[1].split('.')[0] < 103;
-const version = 32;
+const version = 33;
 const regex = new RegExp(/https:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_\+.~#?&\/\/=]*)/);
 const notification = `<div class="notification-dot"></div>`;
 
@@ -114,14 +114,17 @@ function detectColorScheme() {
 function changeTab(evnt, tabId, tabClass) {
     let tabcontent = document.getElementsByClassName(`tab-content-${tabClass}`);
     let tablinks = document.getElementsByClassName(`tab-${tabClass}`);
+
     for (let i = 0; i < tabcontent.length; i++) {
-        tabcontent[i].style.display = "none";
+        tabcontent[i].dataset.enabled = "false";
     }
     for (let i = 0; i < tablinks.length; i++) {
         tablinks[i].dataset.enabled = "false";
     }
-    eid(tabId).style.display = "block";
+    
     evnt.currentTarget.dataset.enabled = "true";
+    eid(tabId).dataset.enabled = "true";
+
     if (tabId === "tab-about-changelog" && sGet("changelogStatus") !== `${version}`) notificationCheck("changelog");
     if (tabId === "tab-about-about" && !sGet("seenAbout")) notificationCheck("about");
 }
@@ -409,7 +412,12 @@ async function download(url) {
                 fetch(`${j.url}&p=1`).then(async (res) => {
                     let jp = await res.json();
                     if (jp.status === "continue") {
-                        changeDownloadButton(2, '>>>'); window.location.href = j.url;
+                        changeDownloadButton(2, '>>>');
+                        if (sGet("downloadPopup") === "true") {
+                            popup('download', 1, j.url)
+                        } else {
+                            window.open(j.url, '_blank')
+                        }
                         setTimeout(() => { changeButton(1) }, 2500);
                     } else {
                         changeButton(0, jp.text);
@@ -432,7 +440,7 @@ async function loadCelebrationsEmoji() {
     try {
         let j = await fetch(`/onDemand?blockId=1`).then((r) => { if (r.status === 200) { return r.json() } else { return false } }).catch(() => { return false });
         if (j && j.status === "success" && j.text) {
-            eid("about-footer").innerHTML = eid("about-footer").innerHTML.replace('<img class="emoji" draggable="false" height="22" width="22" alt="🐲" src="emoji/dragon_face.svg">', j.text);
+            eid("about-footer").innerHTML = eid("about-footer").innerHTML.replace('<img class="emoji" draggable="false" height="22" width="22" alt="🐲" src="emoji/dragon_face.svg" loading="lazy">', j.text);
         }
     } catch (e) {
         eid("about-footer").innerHTML = bac;
@@ -441,7 +449,7 @@ async function loadCelebrationsEmoji() {
 async function loadOnDemand(elementId, blockId) {
     let j = {};
     store.historyButton = eid(elementId).innerHTML;
-    eid(elementId).innerHTML = "...";
+    eid(elementId).innerHTML = `<div class="loader">...</div>`;
 
     try {
         if (store.historyContent) {
@@ -477,7 +485,7 @@ window.onload = () => {
     loadCelebrationsEmoji();
     if (isIOS) {
         sSet("downloadPopup", "true");
-        eid("downloadPopup-chkbx").style.pointerEvents = "none"; // wip, disables the checkbox without any signs
+        eid("downloadPopup-chkbx").style.display = "none";
     }
     let urlQuery = new URLSearchParams(window.location.search).get("u");
     if (urlQuery !== null && regex.test(urlQuery)) {
@@ -502,8 +510,8 @@ document.onkeydown = (e) => {
         if (e.key === "L") changeSwitcher('audioMode', 'true');
         
         // popups
-        if (e.key === "B") popup('about', 1);
+        if (e.key === "B") popup('about', 1, 'about'); // open about
-        if (e.key === "N") popup('about', 1, 'donate');
+        if (e.key === "N") popup('about', 1, 'changelog'); // open changelog
         if (e.key === "M") popup('settings', 1);
         
     } else {

src/front/emoji/keyboard.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 10C2 8.3431 3.34315 7 5 7H27C28.6569 7 30 8.3431 30 10V21.25C30 22.9069 28.6569 24.25 27 24.25H5C3.34315 24.25 2 22.9069 2 21.25V10Z" fill="#CDC4D6"/>
+<path d="M4 9.5C4 9.2239 4.22386 9 4.5 9H5.5C5.77614 9 6 9.2239 6 9.5V10C6 10.2761 5.77614 10.5 5.5 10.5H4.5C4.22386 10.5 4 10.2761 4 10V9.5ZM4 13.5C4 13.2239 4.22386 13 4.5 13H5.5C5.77614 13 6 13.2239 6 13.5V14.5C6 14.7761 5.77614 15 5.5 15H4.5C4.22386 15 4 14.7761 4 14.5V13.5ZM6.5 16C6.22386 16 6 16.2239 6 16.5V17.5C6 17.7761 6.22386 18 6.5 18H7.5C7.77614 18 8 17.7761 8 17.5V16.5C8 16.2239 7.77614 16 7.5 16H6.5ZM7.5 19C7.22386 19 7 19.2239 7 19.5V20.5C7 20.7761 7.22386 21 7.5 21H8.5C8.77614 21 9 20.7761 9 20.5V19.5C9 19.2239 8.77614 19 8.5 19H7.5ZM23.5 19C23.2239 19 23 19.2239 23 19.5V20.5C23 20.7761 23.2239 21 23.5 21H24.5C24.7761 21 25 20.7761 25 20.5V19.5C25 19.2239 24.7761 19 24.5 19H23.5ZM10 19.5C10 19.2239 10.2239 19 10.5 19H21.5C21.7761 19 22 19.2239 22 19.5V20.5C22 20.7761 21.7761 21 21.5 21H10.5C10.2239 21 10 20.7761 10 20.5V19.5ZM9 16.5C9 16.2239 9.22386 16 9.5 16H10.5C10.7761 16 11 16.2239 11 16.5V17.5C11 17.7761 10.7761 18 10.5 18H9.5C9.22386 18 9 17.7761 9 17.5V16.5ZM12.5 16C12.2239 16 12 16.2239 12 16.5V17.5C12 17.7761 12.2239 18 12.5 18H13.5C13.7761 18 14 17.7761 14 17.5V16.5C14 16.2239 13.7761 16 13.5 16H12.5ZM15 16.5C15 16.2239 15.2239 16 15.5 16H16.5C16.7761 16 17 16.2239 17 16.5V17.5C17 17.7761 16.7761 18 16.5 18H15.5C15.2239 18 15 17.7761 15 17.5V16.5ZM18.5 16C18.2239 16 18 16.2239 18 16.5V17.5C18 17.7761 18.2239 18 18.5 18H19.5C19.7761 18 20 17.7761 20 17.5V16.5C20 16.2239 19.7761 16 19.5 16H18.5ZM21 16.5C21 16.2239 21.2239 16 21.5 16H22.5C22.7761 16 23 16.2239 23 16.5V17.5C23 17.7761 22.7761 18 22.5 18H21.5C21.2239 18 21 17.7761 21 17.5V16.5ZM24.5 16C24.2239 16 24 16.2239 24 16.5V17.5C24 17.7761 24.2239 18 24.5 18H25.5C25.7761 18 26 17.7761 26 17.5V16.5C26 16.2239 25.7761 16 25.5 16H24.5ZM7.5 13C7.22386 13 7 13.2239 7 13.5V14.5C7 14.7761 7.22386 15 7.5 15H8.5C8.77614 15 9 14.7761 9 14.5V13.5C9 13.2239 8.77614 13 8.5 13H7.5ZM10 13.5C10 13.2239 10.2239 13 10.5 13H11.5C11.7761 13 12 13.2239 12 13.5V14.5C12 14.7761 11.7761 15 11.5 15H10.5C10.2239 15 10 14.7761 10 14.5V13.5ZM13.5 13C13.2239 13 13 13.2239 13 13.5V14.5C13 14.7761 13.2239 15 13.5 15H14.5C14.7761 15 15 14.7761 15 14.5V13.5C15 13.2239 14.7761 13 14.5 13H13.5ZM16 13.5C16 13.2239 16.2239 13 16.5 13H17.5C17.7761 13 18 13.2239 18 13.5V14.5C18 14.7761 17.7761 15 17.5 15H16.5C16.2239 15 16 14.7761 16 14.5V13.5ZM19.5 13C19.2239 13 19 13.2239 19 13.5V14.5C19 14.7761 19.2239 15 19.5 15H20.5C20.7761 15 21 14.7761 21 14.5V13.5C21 13.2239 20.7761 13 20.5 13H19.5ZM22 13.5C22 13.2239 22.2239 13 22.5 13H23.5C23.7761 13 24 13.2239 24 13.5V14.5C24 14.7761 23.7761 15 23.5 15H22.5C22.2239 15 22 14.7761 22 14.5V13.5ZM25.5 13C25.2239 13 25 13.2239 25 13.5V14.5C25 14.7761 25.2239 15 25.5 15H26.5C26.7761 15 27 14.7761 27 14.5V13.5C27 13.2239 26.7761 13 26.5 13H25.5ZM10.5 9C10.2239 9 10 9.2239 10 9.5V10C10 10.2761 10.2239 10.5 10.5 10.5H11.5C11.7761 10.5 12 10.2761 12 10V9.5C12 9.2239 11.7761 9 11.5 9H10.5ZM13 9.5C13 9.2239 13.2239 9 13.5 9H14.5C14.7761 9 15 9.2239 15 9.5V10C15 10.2761 14.7761 10.5 14.5 10.5H13.5C13.2239 10.5 13 10.2761 13 10V9.5ZM16.5 9C16.2239 9 16 9.2239 16 9.5V10C16 10.2761 16.2239 10.5 16.5 10.5H17.5C17.7761 10.5 18 10.2761 18 10V9.5C18 9.2239 17.7761 9 17.5 9H16.5ZM19 9.5C19 9.2239 19.2239 9 19.5 9H20.5C20.7761 9 21 9.2239 21 9.5V10C21 10.2761 20.7761 10.5 20.5 10.5H19.5C19.2239 10.5 19 10.2761 19 10V9.5ZM22.5 9C22.2239 9 22 9.2239 22 9.5V10C22 10.2761 22.2239 10.5 22.5 10.5H23.5C23.7761 10.5 24 10.2761 24 10V9.5C24 9.2239 23.7761 9 23.5 9H22.5ZM25 9.5C25 9.2239 25.2239 9 25.5 9H26.5C26.7761 9 27 9.2239 27 9.5V10C27 10.2761 26.7761 10.5 26.5 10.5H25.5C25.2239 10.5 25 10.2761 25 10V9.5ZM2 23V21C2 22.6569 3.34315 24 5 24H27C28.6569 24 30 22.6569 30 21V23C30 24.6569 28.6569 26 27 26H5C3.34315 26 2 24.6569 2 23Z" fill="#998EA4"/>
+</svg>

src/front/emoji/link.svg

@@ -0,0 +1,4 @@
+<svg width="100%" height="100%" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M21.1475 21.1475C19.5275 20.7171 18.3006 21.0135 16.5275 21.7175L13.1175 25.1275C11.3475 26.8975 8.4775 26.8975 6.7175 25.1275C4.9475 23.3575 4.9475 20.4875 6.7175 18.7275L10.1275 15.3175H11.0489L13.4375 13.4475C14.7475 13.3075 16.1175 13.7175 17.1175 14.7275C18.1175 15.7375 18.5375 17.0975 18.3975 18.4075C19.1157 19.1907 20.0747 19.3579 20.8347 18.5979L21.7075 16.5375C21.4375 14.9975 20.7075 13.5175 19.5175 12.3275C18.3275 11.1375 16.8475 10.4075 15.3075 10.1375L13.1175 9.46387L10.6975 10.6975C9.8375 11.0775 9.0275 11.6175 8.3175 12.3275L4.3175 16.3275C1.2275 19.4175 1.2275 24.4475 4.3175 27.5375C7.4075 30.6275 12.4375 30.6275 15.5275 27.5375L19.5275 23.5375C20.2275 22.8275 20.7675 22.0175 21.1475 21.1475Z" fill="#9B9B9B" />
+  <path d="M27.5277 4.3175C24.4377 1.2275 19.4077 1.2275 16.3177 4.3175L12.3177 8.3175C11.6177 9.0275 11.0777 9.8375 10.6977 10.6975C12.1577 10.0475 13.7677 9.8575 15.3177 10.1275L18.7277 6.7175C20.4977 4.9475 23.3677 4.9475 25.1277 6.7175C26.8877 8.4875 26.8977 11.3575 25.1277 13.1175L21.7177 16.5275L21.1277 17.1175C20.3677 17.8775 19.3977 18.2875 18.4077 18.3975C17.0977 18.5375 15.7277 18.1275 14.7277 17.1175C13.7277 16.1075 13.3077 14.7475 13.4477 13.4375C12.4477 13.5475 11.4877 13.9575 10.7277 14.7175L10.1377 15.3075C10.4077 16.8475 11.1377 18.3275 12.3277 19.5175C13.5177 20.7075 14.9977 21.4375 16.5377 21.7075C18.0877 21.9775 19.6977 21.7875 21.1577 21.1375C22.0177 20.7575 22.8277 20.2175 23.5377 19.5075L27.5377 15.5075C30.6177 12.4375 30.6177 7.4075 27.5277 4.3175Z" fill="#BEBEBE" />
+</svg>

src/front/emoji/locked.svg

@@ -0,0 +1,5 @@
+<svg width="100%" height="100%" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M16 2C12.6863 2 10 4.68629 10 8V11C10 14.3137 12.6863 17 16 17C19.3137 17 22 14.3137 22 11V8C22 4.68629 19.3137 2 16 2ZM16 4.5C17.933 4.5 19.5 6.067 19.5 8V11C19.5 12.933 17.933 14.5 16 14.5C14.067 14.5 12.5 12.933 12.5 11V8C12.5 6.067 14.067 4.5 16 4.5Z" fill="#D3D3D3" />
+  <path d="M5 14C5 12.3431 6.34315 11 8 11H24C25.6569 11 27 12.3431 27 14V27C27 28.6569 25.6569 30 24 30H8C6.34315 30 5 28.6569 5 27V14Z" fill="#F9C23C" />
+  <path d="M17.5 20.5002C18.1072 20.0441 18.5 19.3179 18.5 18.5C18.5 17.1193 17.3807 16 16 16C14.6193 16 13.5 17.1193 13.5 18.5C13.5 19.3179 13.8928 20.0441 14.5 20.5002V24C14.5 24.8284 15.1716 25.5 16 25.5C16.8284 25.5 17.5 24.8284 17.5 24V20.5002Z" fill="#433B6B" />
+</svg>

src/front/emoji/magnifying_glass.svg

@@ -0,0 +1,5 @@
+<svg width="100%" height="100%" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3 13C3 18.5228 7.47715 23 13 23C18.5228 23 23 18.5228 23 13C23 7.47715 18.5228 3 13 3C7.47715 3 3 7.47715 3 13Z" fill="#00A6ED" />
+  <path d="M18.3481 7.73205C18.9004 8.68864 18.7665 9.79989 18.049 10.2141C17.3316 10.6283 16.3023 10.1886 15.75 9.23205C15.1977 8.27547 15.3316 7.16421 16.049 6.75C16.7665 6.33579 17.7958 6.77547 18.3481 7.73205Z" fill="white" />
+  <path d="M2 13C2 19.0751 6.92487 24 13 24C15.2952 24 17.4262 23.2971 19.1895 22.0947C18.9147 23.3086 19.2498 24.6327 20.195 25.5779L23.3769 28.7599C24.8414 30.2243 27.2158 30.2243 28.6803 28.7599C30.1447 27.2954 30.1447 24.921 28.6803 23.4566L25.4983 20.2746C24.5607 19.3371 23.2503 18.9997 22.0445 19.2626C23.2774 17.4852 24 15.327 24 13C24 6.92487 19.0751 2 13 2C6.92487 2 2 6.92487 2 13ZM22 13C22 17.9706 17.9706 22 13 22C8.02944 22 4 17.9706 4 13C4 8.02944 8.02944 4 13 4C17.9706 4 22 8.02944 22 13Z" fill="#533566" />
+</svg>

src/front/emoji/mending_heart.svg

@@ -0,0 +1,5 @@
+<svg width="100%" height="100%" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M21.0163 5.15966C19.1428 5.48746 17.5594 7.06018 16.6978 8.09396C16.3495 8.51195 15.6505 8.51195 15.3022 8.09396C14.4406 7.06018 12.8572 5.48746 10.9837 5.15966C6.26039 4.32908 3.40517 6.85743 2.40485 10.0008L5.60146 14.2955L6.09508 21.6282C9.14914 25.3465 13.0775 28.3459 14.9355 29.6684C15.577 30.125 16.4229 30.1248 17.0642 29.668C19.646 27.8288 26.2261 22.7486 28.9042 17.0021L27.3547 13.195L26.5453 5.99222C25.1352 5.13927 23.2927 4.75936 21.0163 5.15966Z" fill="#F92F60" />
+  <path d="M29.5949 10H2.40511C1.92106 11.5205 1.87107 13.185 2.25363 14.6829C2.45195 15.463 2.73767 16.2373 3.0923 17H28.9052C29.2605 16.2373 29.547 15.463 29.7464 14.6829C30.1289 13.185 30.0789 11.5205 29.5949 10Z" fill="#E6E6E6" />
+  <path d="M2.86942 16.4973L26.5285 5.98218C28.3793 7.09408 29.4886 9.01902 29.8599 11.0675L6.0959 21.6293C4.77942 20.0266 3.62532 18.2904 2.86942 16.4973Z" fill="#F4F4F4" />
+</svg>

src/localization/languages/en.json

@@ -1,7 +1,7 @@
 {
     "name": "english",
     "substrings": {
-        "ContactLink": "<a class=\"text-backdrop italic\" href=\"{repo}\" target=\"_blank\">create an issue on github</a>"
+        "ContactLink": "<a class=\"text-backdrop link\" href=\"{repo}\" target=\"_blank\">create an issue on github</a>"
     },
     "strings": {
         "AppTitleCobalt": "cobalt",
@@ -47,7 +47,7 @@
         "SettingsQualityDescription": "if selected quality isn't available, closest one is used instead.",
         "LinkGitHubChanges": "&gt;&gt; see previous commits and contribute on github",
         "NoScriptMessage": "cobalt uses javascript for api requests and interactive interface. you have to allow javascript to use this site. there are no pesty scripts, pinky promise.",
-        "DownloadPopupDescriptionIOS": "easiest way to save videos on ios:\n1. add <a class=\"text-backdrop italic\" href=\"{saveToGalleryShortcut}\" target=\"_blank\">this siri shortcut</a>.\n2. press \"share\" above and select \"save to photos\" in appeared share sheet.\nif asked, review the permission request, and press \"always allow\".\n\nalternative method:\npress and hold the download button, hide the video preview, and select \"download linked file\" to download.\nthen, open safari downloads, select the file you downloaded, open share menu, and finally press \"save video\".",
+        "DownloadPopupDescriptionIOS": "easiest way to save videos on ios:\n1. add <a class=\"text-backdrop link\" href=\"{saveToGalleryShortcut}\" target=\"_blank\">this siri shortcut</a>.\n2. press \"share\" above and select \"save to photos\" in appeared share sheet.\nif asked, review the permission request, and press \"always allow\".\n\nalternative method:\npress and hold the download button, hide the video preview, and select \"download linked file\" to download.\nthen, open safari downloads, select the file you downloaded, open share menu, and finally press \"save video\".",
         "DownloadPopupDescription": "download button opens a new tab with requested file. you can disable this popup in settings.",
         "ClickToCopy": "press to copy",
         "Download": "download",
@@ -94,7 +94,7 @@
         "DonateSub": "help it stay online",
         "DonateExplanation": "cobalt does not (and will never) serve ads or sell your data, meaning that <span class=\"text-backdrop\">it's completely free to use</span>. turns out developing and keeping up a web service used by over 300,000 people is not that easy.\n\nif you ever found cobalt useful and want to help continue its development and maintenance consider chipping in! if you want to thank the developer, you can also do that via donations. every cent helps and is VERY appreciated!\n\ncobalt's usage worldwide grows daily and i need to make up for it. as you can imagine, hosting costs grow progressively too. as a year 1 university student, i was not prepared for such expenses :(\n\ni am yet to earn anything from cobalt, everything goes back to users, so you're helping everyone who uses cobalt.\n\n<span class=\"text-backdrop\">your help is more appreciated than ever!</span>",
         "DonateVia": "donate via",
-        "DonateHireMe": "...or you can <a class=\"text-backdrop italic\" href=\"{s}\" target=\"_blank\">hire me</a> :)",
+        "DonateHireMe": "...or you can <a class=\"text-backdrop link\" href=\"{s}\" target=\"_blank\">hire me</a> :)",
         "SettingsVideoMute": "mute audio",
         "SettingsVideoMuteExplanation": "removes audio from video downloads when possible.",
         "ErrorSoundCloudNoClientId": "i couldn't get the temporary token that's required to download songs from soundcloud. try again, but if issue persists, {ContactLink}.",
@@ -105,7 +105,7 @@
         "FollowSupport": "keep in touch with cobalt for support, polls, news, and more:",
         "SupportNote": "please note that response may take a while, there's only one person managing everything.",
         "SourceCode": "report issues, explore source code, star or fork the repo:",
-        "PrivacyPolicy": "cobalt's privacy policy is simple: no data about you is ever collected or stored. zero, zilch, nada, nothing.\nwhat you download is your business, not mine.\n\nsome non-backtraceable data does get temporarily stored when requested download requires live render. it's necessary for that feature to function.\n\nin that case, information about requested stream is temporarily stored in server's RAM for <span class=\"text-backdrop\">20 seconds</span>. as 20 seconds have passed, all previously stored information is permanently removed.\nno one (even me) has access to this data, because official cobalt codebase doesn't provide a way to read it outside of processing functions.\n\nyou can check cobalt's <a class=\"text-backdrop italic\" href=\"{repo}\" target=\"_blank\">github repo</a> yourself and see that everything is as stated.",
+        "PrivacyPolicy": "cobalt's privacy policy is simple: no data about you is ever collected or stored. zero, zilch, nada, nothing.\nwhat you download is your business, not mine.\n\nsome non-backtraceable data does get temporarily stored when requested download requires live render. it's necessary for that feature to function.\n\nin that case, information about requested stream is temporarily stored in server's RAM for <span class=\"text-backdrop\">20 seconds</span>. as 20 seconds have passed, all previously stored information is permanently removed.\nno one (even me) has access to this data, because official cobalt codebase doesn't provide a way to read it outside of processing functions.\n\nyou can check cobalt's <a class=\"text-backdrop link\" href=\"{repo}\" target=\"_blank\">github repo</a> yourself and see that everything is as stated.",
         "ErrorYTUnavailable": "this youtube video is unavailable, it could be region or age restricted. try another one!",
         "ErrorYTTryOtherCodec": "i couldn't find anything to download with your settings. try another codec or quality!\n\nnote: youtube api sometimes acts unexpectedly. blame google for this, not me.",
         "SettingsCodecSubtitle": "youtube codec",
@@ -125,9 +125,14 @@
         "SettingsReduceTransparency": "reduce transparency",
         "SettingsDisableAnimations": "disable animations",
         "FeatureErrorGeneric": "your browser doesn't allow or support this feature. check if there are any updates available and try again!",
-        "ClipboardErrorFirefox": "you're using firefox where all clipboard reading functionality is disabled.\n\nyou can fix this by following steps listed <a class=\"text-backdrop italic\" href=\"{repo}/wiki/Troubleshooting#how-to-fix-clipboard-pasting-in-firefox\" target=\"_blank\">here!</a>\n\n...or you can paste the link manually instead.",
+        "ClipboardErrorFirefox": "you're using firefox where all clipboard reading functionality is disabled.\n\nyou can fix this by following steps listed <a class=\"text-backdrop link\" href=\"{repo}/wiki/Troubleshooting#how-to-fix-clipboard-pasting-in-firefox\" target=\"_blank\">here!</a>\n\n...or you can paste the link manually instead.",
         "ClipboardErrorNoPermission": "cobalt can't access the most recent item in your clipboard without your permission.\n\nif you don't want to give access, just paste the link manually instead.\n\nif you do, go to site settings and enable the clipboard permission.",
-        "SupportSelfTroubleshooting": "experiencing issues? try <a class=\"text-backdrop italic\" href=\"{repo}/wiki/Troubleshooting\" target=\"_blank\">self-troubleshooting guide</a> first!",
+        "SupportSelfTroubleshooting": "experiencing issues? try <a class=\"text-backdrop link\" href=\"{repo}/wiki/Troubleshooting\" target=\"_blank\">self-troubleshooting guide</a> first!",
-        "AccessibilityGoBack": "go back and close the popup"
+        "AccessibilityGoBack": "go back and close the popup",
+        "CollapseKeyboard": "keyboard shortcuts",
+        "KeyboardShortcutsIntro": "you can use cobalt even faster with keyboard shortcuts:",
+        "KeyboardShortcutQuickPaste": "paste the link",
+        "KeyboardShortcutClear": "clear link input area",
+        "KeyboardShortcutClosePopup": "close all popups"
     }
 }

src/localization/languages/ru.json

@@ -1,7 +1,7 @@
 {
     "name": "русский",
     "substrings": {
-        "ContactLink": "<a class=\"text-backdrop italic\" href=\"{repo}\" target=\"_blank\">напиши об этом на github (можно на русском)</a>"
+        "ContactLink": "<a class=\"text-backdrop link\" href=\"{repo}\" target=\"_blank\">напиши об этом на github (можно на русском)</a>"
     },
     "strings": {
         "AppTitleCobalt": "кобальт",
@@ -47,7 +47,7 @@
         "SettingsQualityDescription": "если выбранное качество недоступно, то выбирается ближайшее к нему.",
         "LinkGitHubChanges": "&gt;&gt; смотри предыдущие изменения на github",
         "NoScriptMessage": "кобальт использует javascript для обработки ссылок и интерактивного интерфейса. ты должен разрешить использование javascript, чтобы пользоваться сайтом. тут нет никаких зловредных скриптов, обещаю.",
-        "DownloadPopupDescriptionIOS": "наиболее простой метод скачивания видео на ios:\n1. добавь <a class=\"text-backdrop italic\" href=\"{saveToGalleryShortcut}\" target=\"_blank\">этот сценарий siri</a>.\n2. нажми \"поделиться\" выше и выбери \"save to photos\" в открывшемся окне.\nесли появляется окно с запросом разрешения, то прочитай его, потом нажми \"всегда разрешать\".\n\nальтернативный метод:\nзажми кнопку \"скачать\", затем скрой превью и выбери \"загрузить файл по ссылке\" в появившемся окне.\nпотом открой загрузки в safari, выбери скачанный файл, нажми иконку \"поделиться\", и, наконец, нажми \"сохранить видео\".",
+        "DownloadPopupDescriptionIOS": "наиболее простой метод скачивания видео на ios:\n1. добавь <a class=\"text-backdrop link\" href=\"{saveToGalleryShortcut}\" target=\"_blank\">этот сценарий siri</a>.\n2. нажми \"поделиться\" выше и выбери \"save to photos\" в открывшемся окне.\nесли появляется окно с запросом разрешения, то прочитай его, потом нажми \"всегда разрешать\".\n\nальтернативный метод:\nзажми кнопку \"скачать\", затем скрой превью и выбери \"загрузить файл по ссылке\" в появившемся окне.\nпотом открой загрузки в safari, выбери скачанный файл, нажми иконку \"поделиться\", и, наконец, нажми \"сохранить видео\".",
         "DownloadPopupDescription": "кнопка скачивания открывает новое окно с файлом. ты можешь отключить выбор метода скачивания файла в настройках.",
         "ClickToCopy": "нажми, чтобы скопировать",
         "Download": "скачать",
@@ -78,7 +78,7 @@
         "ErrorNoUrlReturned": "я не получил ссылку для скачивания от сервера. такого происходить не должно. попробуй ещё раз, а если не поможет, то {ContactLink}.",
         "ErrorUnknownStatus": "сервер ответил мне чем-то непонятным. такого происходить не должно. попробуй ещё раз, а если не поможет, то {ContactLink}.",
         "PasteFromClipboard": "вставить и скачать",
-        "ChangelogOlder": "предыдущие версии (на английском)",
+        "ChangelogOlder": "предыдущие версии (тоже на английском)",
         "ChangelogPressToExpand": "раскрыть",
         "Miscellaneous": "разное",
         "ModeToggleAuto": "авто режим",
@@ -95,7 +95,7 @@
         "DonateSub": "ты можешь помочь!",
         "DonateExplanation": "кобальт не пихает рекламу тебе в лицо и не продаёт твои личные данные, а значит работает <span class=\"text-backdrop\">совершенно бесплатно</span>. но оказывается, что разработка и поддержка сервиса, которым пользуются более 300 тысяч людей, обходится довольно затратно.\n\nесли кобальт тебе помог и ты хочешь, чтобы он продолжал работать, то это можно сделать через донаты!\n\nиспользование кобальта по всему миру растёт с каждым днём, а в след за ним и стоимость хостинга. мне, как первокурснику, оплачивать такое в одиночку довольно трудно.\n\nя еще ничего не заработал на кобальте, всё возвращается обратно пользователям, так что ты помогаешь всем, кто использует кобальт.\n\n<span class=\"text-backdrop\">твой донат на вес золота, ценится как никогда!</span>",
         "DonateVia": "открыть",
-        "DonateHireMe": "...или же ты можешь <a class=\"text-backdrop italic\" href=\"{s}\" target=\"_blank\">пригласить меня на работу</a> :)",
+        "DonateHireMe": "...или же ты можешь <a class=\"text-backdrop link\" href=\"{s}\" target=\"_blank\">пригласить меня на работу</a> :)",
         "SettingsVideoMute": "убрать аудио",
         "SettingsVideoMuteExplanation": "убирает звук при загрузке видео, но только когда это возможно.",
         "ErrorSoundCloudNoClientId": "мне не удалось достать временный токен, который необходим для скачивания аудио из soundcloud. попробуй ещё раз, но если так и не получится, {ContactLink}.",
@@ -106,7 +106,7 @@
         "FollowSupport": "оставайтесь на связи с кобальтом для новостей, поддержки, участия в опросах, и многого другого:",
         "SupportNote": "так как я один занимаюсь разработкой и поддержкой в одиночку, время ожидания ответа может достигать нескольких часов. но я отвечаю всем, так что не стесняйся.",
         "SourceCode": "пиши о проблемах, шарься в исходнике, или же форкай репозиторий:",
-        "PrivacyPolicy": "политика конфиденциальности кобальта довольно проста: ничего не хранится об истории твоих действий или загрузок. совсем. даже ошибки.\nто, что ты скачиваешь - только твоё личное дело.\n\nв случаях, когда твоей загрузке требуется лайв-рендер, временно хранится неотслеживаемая информация. это необходимо для работы такого типа загрузок.\n\nв этом случае данные о запрошенном стриме хранятся в ОЗУ сервера в течение <span class=\"text-backdrop\">20 секунд</span>. по истечении этого периода всё стирается. ни у кого (даже у меня) нет доступа к временно хранящимся данным, так как официальный код кобальта не предоставляет такой возможности.\n\nты всегда можешь посмотреть <a class=\"text-backdrop italic\" href=\"{repo}\" target=\"_blank\">исходный код кобальт</a> и убедиться, что всё так, как описано.",
+        "PrivacyPolicy": "политика конфиденциальности кобальта довольно проста: ничего не хранится об истории твоих действий или загрузок. совсем. даже ошибки.\nто, что ты скачиваешь - только твоё личное дело.\n\nв случаях, когда твоей загрузке требуется лайв-рендер, временно хранится неотслеживаемая информация. это необходимо для работы такого типа загрузок.\n\nв этом случае данные о запрошенном стриме хранятся в ОЗУ сервера в течение <span class=\"text-backdrop\">20 секунд</span>. по истечении этого периода всё стирается. ни у кого (даже у меня) нет доступа к временно хранящимся данным, так как официальный код кобальта не предоставляет такой возможности.\n\nты всегда можешь посмотреть <a class=\"text-backdrop link\" href=\"{repo}\" target=\"_blank\">исходный код кобальт</a> и убедиться, что всё так, как описано.",
         "ErrorYTUnavailable": "это видео недоступно, возможно оно ограничено по региону или доступу. попробуй другое!",
         "ErrorYTTryOtherCodec": "я не нашёл того, что мог бы скачать с твоими настройками. попробуй другой кодек или качество!",
         "SettingsCodecSubtitle": "кодек для видео с youtube",
@@ -126,9 +126,14 @@
         "SettingsReduceTransparency": "уменьшить прозрачность",
         "SettingsDisableAnimations": "выключить анимации",
         "FeatureErrorGeneric": "твой браузер не разрешает или не поддерживает эту функцию. проверь наличие обновлений и попробуй ещё раз!",
-        "ClipboardErrorFirefox": "ты используешь firefox в котором все функции чтения из буфера обмена отключены по умолчанию.\n\nно это можно исправить следуя шагам, описанным <a class=\"text-backdrop italic\" href=\"{repo}/wiki/Troubleshooting#how-to-fix-clipboard-pasting-in-firefox\" target=\"_blank\">здесь</a>\n\n...или же ты можешь просто вставить ссылку вручную.",
+        "ClipboardErrorFirefox": "ты используешь firefox в котором все функции чтения из буфера обмена отключены по умолчанию.\n\nно это можно исправить следуя шагам, описанным <a class=\"text-backdrop link\" href=\"{repo}/wiki/Troubleshooting#how-to-fix-clipboard-pasting-in-firefox\" target=\"_blank\">здесь</a>\n\n...или же ты можешь просто вставить ссылку вручную.",
         "ClipboardErrorNoPermission": "кобальт не может прочитать последний элемент в буфере обмена без твоего разрешения.\n\nесли ты не хочешь давать доступ, просто вставь ссылку вручную.\n\nну а если хочешь, то открой настройки сайта и разреши доступ на чтение буфера обмена.",
-        "SupportSelfTroubleshooting": "возникли проблемы? попробуй сначала исправить всё сам <a class=\"text-backdrop italic\" href=\"{repo}/wiki/Troubleshooting\" target=\"_blank\">по этому гиду!</a>",
+        "SupportSelfTroubleshooting": "возникли проблемы? попробуй сначала исправить всё сам <a class=\"text-backdrop link\" href=\"{repo}/wiki/Troubleshooting\" target=\"_blank\">по этому гиду!</a>",
-        "AccessibilityGoBack": "вернуться назад и закрыть окно"
+        "AccessibilityGoBack": "вернуться назад и закрыть окно",
+        "CollapseKeyboard": "горячие клавиши",
+        "KeyboardShortcutsIntro": "ты можешь пользоваться кобальтом ещё быстрее с горячими клавишами:",
+        "KeyboardShortcutQuickPaste": "вставить ссылку",
+        "KeyboardShortcutClear": "очистить зону вставки ссылки",
+        "KeyboardShortcutClosePopup": "закрыть все окна"
     }
 }

src/modules/changelog/changelog.json

@@ -1,71 +1,124 @@
 {
     "current": {
-        "version": "7.0",
+        "version": "7.0-dev2",
-        "date": "August 4, 2023",
+        "date": "August 11, 2023",
-        "title": "wip: ui refresh and more!",
+        "title": "wip: better experience all around!",
-        "banner": "cattired.webp",
+        "banner": {
-        "content": "hey beta testers, this changelog isn't final but i do want to highlight some changes here just to keep track of them. make sure to report all issues in the testing discord channel!\n\n(this changelog is not sorted as it usually is)\n\nservice improvements:\n*; fixed unexpected stream drop when downloading a silent reddit video with mute mode on.\n*; added support for new reddit audio link type.\n\nweb improvements:\n*; removed 6.0 api fallback.\n*; moved on demand blocks to web server, now changelog can be updated independently from preferred api server.\n*; all-new matte glass aesthetic, applied to revamped popup headers, tab selectors, and also small popups.\n*; optimized installed web app to look and act like a native app, especially on ios. !!!!please try this!!!!\n*; added ability to attach a date to changelog.\n*; refreshed the look of entire changelog tab: separated title and version/commit, made title bigger, evened out all paddings.\n*; popups now work without any weird workarounds, especially on mobile. they're clean and nice.\n*; homescreen now also works without any weird workarounds. it is also clean and nice.\n*; replaced close button with back button, moved it to left. it makes more sense.\n*; (kinda old but not in older changelog) absolutely reimagined error and download popups, consistent with the rest of refreshed design.\n*; reduced spacing, optimized css of almost all ui elements. should be even more consistent across platforms now.\n*; added interaction animations.\n*; added more accessibility options, put them all into one category. you can disable animations and transparency if you want to.\n*; added a link to self-troubleshooting guide to support expand list in about popup.\n*; renamed 2160p and 4320p to 4k and 8k respectfully for better clarity.\n*; cobalt now lets you know if your browser doesn't support clipboard api and helps you fix it.\n*; added ability to translate \"cobalt\" for twitter-like localization. in russian cobalt is now кобальт, that's the style i will be going with from now on.\n*; updated some localization strings.\n*; removed ability to change the app name dynamically in all locations. cobalt is a sustained product name.\n*; \n*; added more keyboard shorcuts:\nshift+d: paste and download,\nshift+k: auto mode,\nshift+L: audio mode,\nshift+b: about popup,\nshift+n: donate popup,\nshift+m: settings popup.\n\non top of existing ones:\nctrl+v (without focusing anything): paste the link;\nescape/delete/clear: clear url input area\nescape: close current popup;\n\nyour keyboard slightly represents cobalt's ui. let me know if you like these.\n\ninternal web improvements:\n*; cleaned up all related frontend modules, especially page.js. will add more in final changelog, i'm very tired.\n\napi improvements:\n*; now catching all json api related errors.\n*; moved on demand blocks to web server.\n*; now sending standard rate limiting headers.\n*; better readability in source.\n\nother improvements:\n*; renamed docker-compose.yml.example to docker-compose.example.yml for linting in code editors.\n*; added a wiki with wip troubleshooting guide on github.\n\nwhat doesn't work or works poorly:\n*; tiktok/twitter media pickers look like shit, they haven't been worked on yet. they also might not work at all on ios.\n*; unknown if scrolling within popups works properly on ios 16 (when installed as web app).\n*; \"ask how to save\" toggle is pressable on ios devices even though it shouldn't be.\n\nwhat will surely be added in coming days:\n*; list of all keyboard shortcuts, probably a popup opened with a little button in left or right corner of the screen.\n*; proper dropdown arrow for about tab dropdowns.\n*; dates for all older changelogs.\n*; ...more?"
+            "file": "cattired.webp",
+            "width": 640,
+            "height": 286
+        },
+        "content": "hey beta testers, this changelog isn't final but i do want to highlight some changes here just to keep track of them. make sure to report all issues in the testing discord channel!\n\n(this changelog is not sorted as it usually is)\n\nnew in 7.0-dev2:\n*; rounded corners everywhere! cobalt is now safe for everyone who can't handle sharp objects. <span class=\"text-backdrop\">i really want your feedback on this</span>.\n*; proper banner loading. no more jumping text!\n*; proper banner error handling. if banner wasn't loaded, it'll simply go grey instead of disappearing.\n*; links are no longer italic and are instead underlined.\n*; collapsible lists now have corresponding emoji.\n*; donate button is now highlighted with magenta instead of white.\n*; added a list of keyboard shortcuts to about tab.\n\nwon't be in final changelog:\n*; popup tabs now get highlighted on hover instead of being hollow.\n*; small popup is now animated on mobile. it slides from bottom to top.\n*; back arrow is now centered.\n\n\n<span class=\"text-backdrop\">everything from previous version of this changelog:</span>\n\nservice improvements:\n*; fixed unexpected stream drop when downloading a silent reddit video with mute mode on.\n*; added support for new reddit audio link type.\n\nweb improvements:\n*; removed 6.0 api fallback.\n*; moved on demand blocks to web server, now changelog can be updated independently from preferred api server.\n*; all-new matte glass aesthetic, applied to revamped popup headers, tab selectors, and also small popups.\n*; optimized installed web app to look and act like a native app, especially on ios. !!!!please try this!!!!\n*; added ability to attach a date to changelog.\n*; refreshed the look of entire changelog tab: separated title and version/commit, made title bigger, evened out all paddings.\n*; popups now work without any weird workarounds, especially on mobile. they're clean and nice.\n*; homescreen now also works without any weird workarounds. it is also clean and nice.\n*; replaced close button with back button, moved it to left. it makes more sense.\n*; (kinda old but not in older changelog) absolutely reimagined error and download popups, consistent with the rest of refreshed design.\n*; reduced spacing, optimized css of almost all ui elements. should be even more consistent across platforms now.\n*; added interaction animations.\n*; added more accessibility options, put them all into one category. you can disable animations and transparency if you want to.\n*; added a link to self-troubleshooting guide to support expand list in about popup.\n*; renamed 2160p and 4320p to 4k and 8k respectfully for better clarity.\n*; cobalt now lets you know if your browser doesn't support clipboard api and helps you fix it.\n*; added ability to translate \"cobalt\" for twitter-like localization. in russian cobalt is now кобальт, that's the style i will be going with from now on.\n*; updated some localization strings.\n*; removed ability to change the app name dynamically in all locations. cobalt is a sustained product name.\n*; added more keyboard shorcuts.\n*; added a list of keyboard shortcuts to about tab.\n\nyour keyboard slightly represents cobalt's ui. let me know if you like these.\n\ninternal web improvements:\n*; cleaned up all related frontend modules, especially page.js. will add more in final changelog, i'm very tired.\n\napi improvements:\n*; now catching all json api related errors.\n*; moved on demand blocks to web server.\n*; now sending standard rate limiting headers.\n*; better readability in source.\n\nother improvements:\n*; renamed docker-compose.yml.example to docker-compose.example.yml for linting in code editors.\n*; added a wiki with wip troubleshooting guide on github.\n\nwhat doesn't work or works poorly:\n*; tiktok/twitter media pickers look like shit, they haven't been worked on yet. they also might not work at all on ios.\n*; unknown if scrolling within popups works properly on ios 16 (when installed as web app).\n*; \"ask how to save\" toggle is pressable on ios devices even though it shouldn't be."
     },
     "history": [{
         "version": "6.2",
         "date": "June 27 2023",
         "title": "all network issues have been fixed!",
-        "banner": "meowthhammer.webp",
+        "banner": {
-        "content": "hey! there have been some hiccups in cobalt's stability lately, i was going through finals while trying to scale up the infrastructure, and that didn't really work out, lol.\nBUT i'm happy to announce that i've optimized all nodes! <span class='text*;backdrop'>there should no longer be any networking issues</span>.\n\nenjoy stable experience while i work in background to make cobalt even better :)\n\nhere's what's new in this update:\n*; better button contrast in both themes. \n*; button highlight in light theme now actually looks like a highlight.\n*; removed ip gate for streamables and updated privacy policy to reflect this change.\n*; streamable links now last for 20 seconds instead of 2 minutes.\n*; cleaned up stream verification algorithm. now the same function doesn't run 4 times in a row.\n*; removed deprecated way of hosting a cobalt instance.\n\nthank you for sticking with cobalt, and i hope you have a great day :D"
+            "file": "meowthhammer.webp",
+            "width": 1280,
+            "height": 827
+        },
+        "content": "hey! there have been some hiccups in cobalt's stability lately, i was going through finals while trying to scale up the infrastructure, and that didn't really work out, lol.\nBUT i'm happy to announce that i've optimized all nodes! <span class=\"text-backdrop\">there should no longer be any networking issues</span>.\n\nenjoy stable experience while i work in background to make cobalt even better :)\n\nhere's what's new in this update:\n*; better button contrast in both themes. \n*; button highlight in light theme now actually looks like a highlight.\n*; removed ip gate for streamables and updated privacy policy to reflect this change.\n*; streamable links now last for 20 seconds instead of 2 minutes.\n*; cleaned up stream verification algorithm. now the same function doesn't run 4 times in a row.\n*; removed deprecated way of hosting a cobalt instance.\n\nthank you for sticking with cobalt, and i hope you have a great day :D"
     }, {
         "version": "6.0",
+        "date": "June 7, 2023",
         "title": "better reliability, new infrastructure, pinterest support, and way more!",
-        "banner": "catswitchboxes.webp",
+        "banner": {
-        "content": "hey! long time no see, hopefully over 40 changes will make up for it :)\n\ncobalt now has an official community discord server. you can go there for news, support, or just to chat. <a class=\"text-backdrop italic\" href=\"https://discord.gg/pQPt8HBUPu\" target=\"_blank\">go check it out!</a>\n\n<span class='text-backdrop'>tl;dr</span>\n*; new infra, new hosting structure, new main instance api url. developers, <a class=\"text-backdrop italic\" href=\"https://github.com/wukko/cobalt/blob/current/docs/API.md\" target=\"_blank\">get it here.</a>\n*; added support for pinterest, vine archive, tumblr audio, youtube vr videos.\n*; better web app performance and look.\n*; better stability thanks to load balancing.\n*; (hopefully) no more random video/audio download drops.\n\nservice improvements:\n*; added support for pinterest videos and stories (pr by <a class=\"text-backdrop italic\" href=\"https://github.com/wukko/cobalt/commit/40291c4d24cb5f441cdddfd26104f149bc4ee27c\" target=\"_blank\">@Snazzah</a>).\n*; added support for tumblr audio. sorry, tumblr.\n*; added support for youtube vr videos. please note that they're in youtube's proprietary ratio.\n*; added support for vine archive.\n*; added support for ancient vk videos in 240p.\n*; fixed an issue related to muted video downloads from tumblr.\n*; moved to twitter v2 api.\n*; soundcloud share links are now processed without errors.\n\nui improvements:\n*; lazy image loading. should significantly speed up the page load.\n*; fixed checkbox width on mobile devices.\n*; addition of a temporary urgent notice.\n*; added hover border to all buttons.\n*; less annoying donation button highlight.\n*; more consistent color scheme.\n*; added link to a discord server into about popup.\n*; remember celebratory emoji changes? they've been fixed, and are now dynamically loaded!\n*; changelog history now lets you try to load it again if first attempt failed for whatever reason.\n*; padding (everywhere) has been slightly reduced to fit in more content and be consistent across ui.\n*; added more info to the \"how to save\" popup for ios devices.\n*; crypto wallet press-to-copy buttons now look like buttons.\n*; improved ui layout for smallest screens (iphone 5, 5s, se, etc).\n*; removed partial translations for sake of clarity and consistency.\n\ninternal improvements:\n*; separated web and api servers. they're now completely independent and therefore more stress-resistant.\n*; added a dedicated script for building the web app if you don't want to reload the frontend server.\n*; web app building improvements.\n*; async localization preloading.\n*; consistent server start time reporting.\n*; dynamic stream and ip hashing salt generation.\n\ninfrastructure improvements:\n*; load balancing: your api requests are now sent to the least busy server. yes, there are now several of them with more to come in the future.\n*; when possible, server in closest region is used instead of a far-away one. this should help with download speeds.\n*; currently there are multiple servers in europe. i will let you know when (and if) i manage to get an american one.\n\nupdates for developers and instance hosters:\n*; server info api endpoint: you can now check up on the api server of choice. it reports all the basic info you may need. <a class=\"text-backdrop italic\" href=\"https://github.com/wukko/cobalt/blob/current/docs/API.md#get-apiserverinfo\" target=\"_blank\">check the api docs</a> for more info.\n*; api names: each and every api instance should have a distinctive name. this will be useful in the future :)\n*; added docker compose sample config.\n*; updated and more granular setup script.\n*; better api scalability and faster server start up thanks to web and api separation.\n*; added ability to specify ffmpeg threads. simply add ffmpegThreads to your environment variables!\n\ni'm still in awe from how popular cobalt has become. there are now over 200k of unique users monthly, and that number only keeps growing. i even had to come up with something to accommodate for larger traffic, it's absolutely insane.\n\nlove you all, have a great day :D"
+            "file": "catswitchboxes.webp",
+            "width": 600,
+            "height": 314
+        },
+        "content": "hey! long time no see, hopefully over 40 changes will make up for it :)\n\ncobalt now has an official community discord server. you can go there for news, support, or just to chat. <a class=\"text-backdrop link\" href=\"https://discord.gg/pQPt8HBUPu\" target=\"_blank\">go check it out!</a>\n\n<span class='text-backdrop'>tl;dr</span>\n*; new infra, new hosting structure, new main instance api url. developers, <a class=\"text-backdrop link\" href=\"https://github.com/wukko/cobalt/blob/current/docs/API.md\" target=\"_blank\">get it here.</a>\n*; added support for pinterest, vine archive, tumblr audio, youtube vr videos.\n*; better web app performance and look.\n*; better stability thanks to load balancing.\n*; (hopefully) no more random video/audio download drops.\n\nservice improvements:\n*; added support for pinterest videos and stories (pr by <a class=\"text-backdrop link\" href=\"https://github.com/wukko/cobalt/commit/40291c4d24cb5f441cdddfd26104f149bc4ee27c\" target=\"_blank\">@Snazzah</a>).\n*; added support for tumblr audio. sorry, tumblr.\n*; added support for youtube vr videos. please note that they're in youtube's proprietary ratio.\n*; added support for vine archive.\n*; added support for ancient vk videos in 240p.\n*; fixed an issue related to muted video downloads from tumblr.\n*; moved to twitter v2 api.\n*; soundcloud share links are now processed without errors.\n\nui improvements:\n*; lazy image loading. should significantly speed up the page load.\n*; fixed checkbox width on mobile devices.\n*; addition of a temporary urgent notice.\n*; added hover border to all buttons.\n*; less annoying donation button highlight.\n*; more consistent color scheme.\n*; added link to a discord server into about popup.\n*; remember celebratory emoji changes? they've been fixed, and are now dynamically loaded!\n*; changelog history now lets you try to load it again if first attempt failed for whatever reason.\n*; padding (everywhere) has been slightly reduced to fit in more content and be consistent across ui.\n*; added more info to the \"how to save\" popup for ios devices.\n*; crypto wallet press-to-copy buttons now look like buttons.\n*; improved ui layout for smallest screens (iphone 5, 5s, se, etc).\n*; removed partial translations for sake of clarity and consistency.\n\ninternal improvements:\n*; separated web and api servers. they're now completely independent and therefore more stress-resistant.\n*; added a dedicated script for building the web app if you don't want to reload the frontend server.\n*; web app building improvements.\n*; async localization preloading.\n*; consistent server start time reporting.\n*; dynamic stream and ip hashing salt generation.\n\ninfrastructure improvements:\n*; load balancing: your api requests are now sent to the least busy server. yes, there are now several of them with more to come in the future.\n*; when possible, server in closest region is used instead of a far-away one. this should help with download speeds.\n*; currently there are multiple servers in europe. i will let you know when (and if) i manage to get an american one.\n\nupdates for developers and instance hosters:\n*; server info api endpoint: you can now check up on the api server of choice. it reports all the basic info you may need. <a class=\"text-backdrop link\" href=\"https://github.com/wukko/cobalt/blob/current/docs/API.md#get-apiserverinfo\" target=\"_blank\">check the api docs</a> for more info.\n*; api names: each and every api instance should have a distinctive name. this will be useful in the future :)\n*; added docker compose sample config.\n*; updated and more granular setup script.\n*; better api scalability and faster server start up thanks to web and api separation.\n*; added ability to specify ffmpeg threads. simply add ffmpegThreads to your environment variables!\n\ni'm still in awe from how popular cobalt has become. there are now over 200k of unique users monthly, and that number only keeps growing. i even had to come up with something to accommodate for larger traffic, it's absolutely insane.\n\nlove you all, have a great day :D"
     }, {
         "version": "5.4",
         "title": "instagram support, docker, and more!",
-        "banner": "catphonestand.webp",
+        "banner": {
+            "file": "catphonestand.webp",
+            "width": 451,
+            "height": 272
+        },
         "content": "something many of you've been waiting for is finally here! try it out and let me know what you think :)\n\n<span class='text-backdrop'>tl;dr:</span>\n*; added experimental instagram support! download any reels or videos you like, and make sure to report any issues you encounter. yes, you can convert either to audio.\n*; fixed support for on.soundcloud links.\n*; added share button to \"how to save?\" popup.\n*; added docker support.\n\nservice improvements:\n*; added experimental support for videos from instagram. currently only reels and post videos are downloadable, but i'm looking into ways to save high resolution photos too. if you experience any issues, please report them on either of support platforms.\n*; fixed support for on.soundcloud share links. should work just as well as other versions!\n*; fixed an issue that made some youtube videos impossible to download.\n\ninterface improvements:\n*; new css-only checkmark! yes, i can't stop tinkering with it because slight flashing on svg load annoyed me. now it loads instantly (and also looks slightly better).\n*; fixed copy animation.\n*; minor localization improvements.\n*; fixed the embed logo that i broke somewhere in between 5.3 and 5.4.\n\ninternal improvements:\n*; now using nanoid for live render stream ids.\n*; added support for docker. it's kind of clumsy because of how i get .git folder inside the container, but if you know how to do it better, feel free to make a pr.\n*; cobalt now checks only for existence of environment variables, not exactly the .env file.\n*; changed the way user ip address is retrieved for instances using cloudflare.\n*; added ability to disable cors, both to setup script and environment variables.\n\ni can't believe how diverse and widespread cobalt has become. it's used in all fields: music production, education, content creation, and even game development. <span class='text-backdrop'>thank you</span>. this is absolutely nuts.\nif you don't mind sharing, please tell me about your use case. i'd really love to hear how you use cobalt and how i could make it even more useful for you."
     }, {
         "version": "5.3",
         "title": "better looks, better feel",
-        "banner": "cattired.webp",
+        "banner": {
+            "file": "cattired.webp",
+            "width": 640,
+            "height": 286
+        },
         "content": "this update isn't as big as previous ones, but it still greatly enhances the cobalt experience.\n\nhere's what's up:\n*; new mode switcher! elegant and 100% clear. should no longer cause any confusion. let me know if you like it better this way :D\n*; wide paste button on mobile is back, but now it's even closer to your finger.\n*; removed the weird grey chin on changelog banners.\n*; removed left-handed layout toggle since it is no longer needed.\n*; fixed input area display in chromium 112+.\n*; centered the main action box.\n*; cleaned up css of main action box to get rid of tricks and ensure correct display on all devices.\n*; fixed a bug that'd cause notifications dots to disappear when an unrelated checkbox was checked.\n\nhopefully from now on i'll focus on adding support for more services.\nthank you for using cobalt. stay cool :)"
     }, {
         "version": "5.2",
         "title": "fastest one in the game",
-        "banner": "catspeed.webp",
+        "banner": {
+            "file": "catspeed.webp",
+            "width": 640,
+            "height": 356
+        },
         "content": "hey, notice anything different? well, at very least the page loaded way faster! this update includes many improvements and fixes, but also some new features.\n\n<span class=\"text-backdrop\">tl;dr:</span>\n*; twitter retweet links are now supported.\n*; all vimeo videos should now be possible to download.\n*; you now can download audio from vimeo.\n*; it's now possible to pick between preferred vimeo download method in settings.\n*; fixed issues related to tiktok, twitter, twitter spaces, and vimeo downloads.\n*; overall cobalt performance should be MUCH better.\n\nservice improvements:\n*; added support for twitter retweet links. now all kinds of tweet links are supported.\n*; fixed the issue related to periods in tiktok usernames (#96).\n*; fixed twitter spaces downloads.\n*; added support for audio downloads from vimeo.\n*; added ability to choose between \"progressive\" and \"dash\" vimeo downloads. go to settings > video to pick your preference.\n*; fixed the issue related to vimeo quality picking.\n*; fixed the issue when vimeo module wouldn't show appropriate errors and instead would fallback to default ones.\n*; improved audio only downloads for some edge cases.\n*; (hopefully) better youtube reliability.\n*; temporarily disabled douyin support due to api endpoint cut off.\n\ninterface improvements:\n*; merged clipboard and mode switcher rows into one for mobile view.\n*; added left-handed layout toggle for those who prefer to have the clipboard button on left.\n*; new custom-made clipboard icon. now it clearly indicates what it does.\n*; improved english and russian localization. both are way more direct and less bloaty.\n*; frontend page is now rendered once and is cached on disk instead of being rendered every time someone requests a page. this greatly improves page loading speeds and further reduces strain put on the server.\n*; frontend page is now minimized just like js and css files. this should minimize traffic wasted on loading the page, along with minor loading speed improvement.\n*; added proper checkbox icon for better clarity.\n*; checkboxes are now stretched edge-to-edge on phone to be easier to manage for right-handed people.\n*; removed button hover highlights on phones.\n*; fixed button press animations for safari on ios.\n*; fixed text selection on ios. previously you could select text or images anywhere, but now they're selectable in limited places, just like on other platforms.\n*; frontend platform is now marked in settings: p is for pc; m is for mobile; i is for ios. this is done for possible future debugging and issue-solving.\n*; better error messaging.\n\ninternal improvements:\n*; better rate limiting, there should be way less cases of accidental limits.\n*; added support for m3u8 playlists. this will be useful for future additions, and is currently used by vimeo module.\n*; added support for \"chop\" stream format for vimeo downloads.\n*; fixed vk user id extraction. i assumed the - in url was a separator, but it's actually a part of id.\n*; completely reworked the vimeo module. it's much cleaner and better performant now.\n*; minor clean ups across the board.\n\nnot really related to this update, but thank you for 50k monthly users! i really appreciate that you're still here, because that means i'm doing some things right :D"
     }, {
         "version": "5.1",
         "title": "the evil has been defeated",
-        "banner": "happymeowth.webp",
+        "banner": {
+            "file": "happymeowth.webp",
+            "width": 500,
+            "height": 330
+        },
         "content": "hey, ever wanted to download a youtube video without a hassle? cobalt is here to help. this update fixes all issues related to youtube downloads.\nnot only that, but it also introduces features never before seen in a downloader, such as youtube dub downloads! read below to see what's up :)\n\n<span class=\"text-backdrop\">tl;dr:</span>\n*; audio in youtube videos FINALLY no longer gets cut off.\n*; you now can pick any video resolution you want (from 360p to 8k) and any possible youtube video codec (h264/av1/vp9).\n*; you now can download youtube videos with dubs in your native language. just check settings > audio.\n*; youtube processing has been vastly sped up.\n\nok, now onto the nerdy part of changelog. this update is pretty huge and includes improvements across the board.\n\nservice improvements:\n*; all youtube functionality has been reworked. cobalt now relies on innertube apis, not web scraping.\n*; random audio cut off issue has been fixed, let me know if it ever occurs again. (closes #62, #66, #75, #88).\n*; added support for youtube dubs. currently it's using your browser's default language when enabled, but i have plans on making a picker. i'll ask people on twitter and mastodon if this feature is needed, and add a picker in next updates.\n*; instead of adding more quality presets, i added granular quality options. pick whatever you like, from 360p up to 4320p (for all services, not just youtube).\n*; replaced a format picker with codec picker for youtube. you can pick h264, av1, or vp9. all of them should work as expected (closes #88).\n*; youtube audio files are now properly matched to corresponding video files.\n*; it's now always possible to download pristine h264 720p/360p videos from youtube. these videos will work ANYWHERE, so they're default for mobile.\n*; youtube requests are no longer permanently cached, ram usage should drop even further.\n*; youtube video and audio file names now include codec and dub language when applicable.\n*; max video and audio duration limits have been bumped up to 3 hours.\n*; general performance of entire youtube download process has been greatly improved.\n*; vk module has been reworked to be more compact and not make use of outdated technique of quality picking. should also be way more reliable.\n\ninternal improvements:\n*; cleaned up services config, all constants have been moved directly to modules for quicker access.\n*; matching module has been slightly cleaned up.\n\ninterface improvements:\n*; many descriptions and error messages have been slightly tuned to be less wordy.\n*; unnecessary title duplications in settings have been merged into one.\n*; added more clarity to quality and codec descriptions.\n\nif you use cobalt api, please note that you have to update your creation to support new features.\n\nthis is the second batch of 5.x improvements, there's way more to come. thank you for being here, i really appreciate your support.\n\nif you want to thank me (the developer), there's a nice tab under this changelog that has \"donations\" text on it. anything helps me continue developing and hosting the friendliest media downloader :D"
     }, {
         "version": "5.0",
         "title": "it's all about attention to detail!",
-        "banner": "valentines.webp",
+        "banner": {
+            "file": "valentines.webp",
+            "width": 489,
+            "height": 374
+        },
         "content": "happy valentine's day! i have an update for you, as a gift :D\n\ntl;dr: added support for <span class=\"text-backdrop\">reddit gifs</span>, fixed douyin downloads, fixed vimeo quality picking, revamped entirety of codebase, and many other fixes.\n\nhere's more info:\n\nthis update is mostly about cleaning up and polishing the codebase, but it also has some new features. here's what's up:\n\nservice-related improvements:\n*; you now can download gifs from reddit!\n*; attempting to download a video from douyin no longer throws an error (bytedance changed the api endpoint, yet again).\n*; fixed quality picking for vimeo downloads.\n*; fixed length limit check in vimeo module.\n*; fixed support for \"user view\" vk clips links.\n*; various twitter errors are now displayed correctly instead of falling back to the default error.\n*; state of all services is now tested on each commit.\n\nui improvements:\n*; cobalt social links no longer disappear if you have an aggressive ad blocking extension installed.\n*; various localization improvements for both english and russian.\n*; changed some service aliases to display full list of supported downloads.\n*; added current branch information to version text (in settings).\n*; fixed typos in older changelogs.\n\ninternal improvements:\n*; <span class=\"text-backdrop\">everything</span> has been sanitized, improved, and refactored. code is now much easier to read and maintain.\n*; rewrote and/or optimized all modules that were messy or inefficient.\n*; all git interaction functions now store info in cache instead of fetching it every time the function is called.\n*; added a test script that checks functionality of all supported services.\n*; updated deepsource config. checks are more accurate now.\n*; requests from internet explorer are now dropped entirely instead of redirecting people stuck in 90s to a proper browser download page. this was done to avoid (my) personal bias towards browsers.\n\ni put a ton of effort into this version, and i hope you like it as much as i do.\n\nthank you for using cobalt. there's so much more to come :)"
     }, {
         "version": "4.8",
         "title": "prettier than ever",
-        "banner": "catmakeup.webp",
+        "banner": {
-        "content": "this version brings many visual improvements and a completely revamped \"about\" tab.\n\nwhat's new in \"about\" tab:\n*; all information is now split into collapsible sections, making it easier to navigate.\n*; added privacy policy to further prove that none of your data is collected.\n*; added emoji to the page title to make it look consistent with other pages.\n*; added mastodon account handle and link.\n*; there are now short notes at the end of each section.\n*; other changes that are too small to describe. just go check it out!\n\nvisual improvements:\n*; less wasted space: paddings and margins have been reduced and optimized for usability, consistency, and overall beauty.\n*; all <a class=\"text-backdrop italic\" href=\"https://youtu.be/dQw4w9WgXcQ\" target=\"_blank\">links</a> are now in italic. it's much easier to tell them apart from <span class=\"text-backdrop\">regular highlights</span>.\n*; error popup no longer looks broken and out of place.\n*; download popup now has a proper close button, not something from 2.x era.\n*; emoji are no longer selectable or draggable.\n*; better scalability: desktop layout for home screen is shown if device viewport is wide enough to fit in three action buttons.\n*; page shouldn't look broken on phones in landscape mode (i still highly recommend using cobalt in portrait mode).\n*; removed bulletpoint padding. it was unnecessary.\n*; updated some service names.\n\nas always, you can suggest features or report bugs on any platform listed in the \"support\" section of about tab.\n\nthank you for using cobalt. i hope you have a good day :)"
+            "file": "catmakeup.webp",
+            "width": 394,
+            "height": 266
+        },
+        "content": "this version brings many visual improvements and a completely revamped \"about\" tab.\n\nwhat's new in \"about\" tab:\n*; all information is now split into collapsible sections, making it easier to navigate.\n*; added privacy policy to further prove that none of your data is collected.\n*; added emoji to the page title to make it look consistent with other pages.\n*; added mastodon account handle and link.\n*; there are now short notes at the end of each section.\n*; other changes that are too small to describe. just go check it out!\n\nvisual improvements:\n*; less wasted space: paddings and margins have been reduced and optimized for usability, consistency, and overall beauty.\n*; all <a class=\"text-backdrop link\" href=\"https://youtu.be/dQw4w9WgXcQ\" target=\"_blank\">links</a> are now in italic. it's much easier to tell them apart from <span class=\"text-backdrop\">regular highlights</span>.\n*; error popup no longer looks broken and out of place.\n*; download popup now has a proper close button, not something from 2.x era.\n*; emoji are no longer selectable or draggable.\n*; better scalability: desktop layout for home screen is shown if device viewport is wide enough to fit in three action buttons.\n*; page shouldn't look broken on phones in landscape mode (i still highly recommend using cobalt in portrait mode).\n*; removed bulletpoint padding. it was unnecessary.\n*; updated some service names.\n\nas always, you can suggest features or report bugs on any platform listed in the \"support\" section of about tab.\n\nthank you for using cobalt. i hope you have a good day :)"
     }, {
         "version": "4.7",
         "title": "we're better together! thank you for bug reports.",
-        "banner": "bettertogether.webp",
+        "banner": {
-        "content": "this update includes a bunch of improvements, many of which were made thanks to the community :D\n\nservice-related improvements:\n*; private soundcloud links are now supported (#68);\n*; tiktok usernames with dots in them no longer confuse cobalt (#71);\n*; .ogg files no longer wrongfully include a video channel (#67);\n*; fixed an issue that caused cobalt to freak out when user attempted to download an audio from audio-only service with \"mute video\" option enabled.\n\nui improvements:\n*; popup padding has been evened out. popups are now able to fit in more information on scroll, especially on mobile;\n*; all buttons are now of even size and are displayed without any padding issues across all modern browsers and devices;\n*; checkbox is no longer crippled on ios;\n*; many explanation texts have been simplified to get rid of unnecessary bloat (no bullshit, remember?);\n*; moved tiktok section in video settings higher due to higher priority;\n*; fixed unexpectedly displayed scrollbars on switch rows in firefox.\n\nstability improvements:\n*; ffmpeg process now should end upon finishing the render;\n*; ffmpeg should also quit when download is abruptly cut off;\n*; fixed a memory leak that was caused by misconfigured stream information caching (#63).\n\ninternal improvements:\n*; requested streams are now stored in cache for 2 minutes instead of 1000 hours (yes, 1000 hours, i fucked up);\n*; cached data is now reused if user requests same content within 2 minutes;\n*; page render module is now even cleaner than before;\n*; proper support for bullet-points in loc strings.\n\nyou can suggest features or report bugs on <a class=\"text-backdrop italic\" href=\"{repo}\" target=\"_blank\">github</a> or <a class=\"text-backdrop italic\" href=\"https://twitter.com/justusecobalt\" target=\"_blank\">twitter</a>. both work just fine, use whichever you're more comfortable with.\n\nthank you for using cobalt, and thank you for reading this changelog.\n\nyou're amazing, keep it up :)"
+            "file": "bettertogether.webp",
+            "width": 640,
+            "height": 358
+        },
+        "content": "this update includes a bunch of improvements, many of which were made thanks to the community :D\n\nservice-related improvements:\n*; private soundcloud links are now supported (#68);\n*; tiktok usernames with dots in them no longer confuse cobalt (#71);\n*; .ogg files no longer wrongfully include a video channel (#67);\n*; fixed an issue that caused cobalt to freak out when user attempted to download an audio from audio-only service with \"mute video\" option enabled.\n\nui improvements:\n*; popup padding has been evened out. popups are now able to fit in more information on scroll, especially on mobile;\n*; all buttons are now of even size and are displayed without any padding issues across all modern browsers and devices;\n*; checkbox is no longer crippled on ios;\n*; many explanation texts have been simplified to get rid of unnecessary bloat (no bullshit, remember?);\n*; moved tiktok section in video settings higher due to higher priority;\n*; fixed unexpectedly displayed scrollbars on switch rows in firefox.\n\nstability improvements:\n*; ffmpeg process now should end upon finishing the render;\n*; ffmpeg should also quit when download is abruptly cut off;\n*; fixed a memory leak that was caused by misconfigured stream information caching (#63).\n\ninternal improvements:\n*; requested streams are now stored in cache for 2 minutes instead of 1000 hours (yes, 1000 hours, i fucked up);\n*; cached data is now reused if user requests same content within 2 minutes;\n*; page render module is now even cleaner than before;\n*; proper support for bullet-points in loc strings.\n\nyou can suggest features or report bugs on <a class=\"text-backdrop link\" href=\"{repo}\" target=\"_blank\">github</a> or <a class=\"text-backdrop link\" href=\"https://twitter.com/justusecobalt\" target=\"_blank\">twitter</a>. both work just fine, use whichever you're more comfortable with.\n\nthank you for using cobalt, and thank you for reading this changelog.\n\nyou're amazing, keep it up :)"
     }, {
         "version": "4.6",
         "title": "mute videos and proper soundcloud support",
-        "banner": "shutup.png",
+        "banner": {
+            "file": "shutup.webp",
+            "width": 1024,
+            "height": 665
+        },
         "content": "i've been longing to implement both of these things, and here they finally are.\n\nservice-related improvements:\n*; you now can download videos with no audio! simply enable the \"mute audio\" option in settings &gt; audio.\n*; soundcloud module has been updated, and downloads should no longer break after some time.\nvisual improvements:\n*; moved some things around in settings popup, and added separators where separation is needed.\n*; updated some texts in english and russian.\n*; version and commit hash have been joined together, now they're a single unit.\ninternal improvements:\n*; updated api documentation to include isAudioMuted.\n*; simplified the startup message.\n*; created render elements for separator and explanation due to high duplication of them in the page.\n*; fully deprecated GET method for API requests.\n*; fixed some code quirks.\nhere's how soundcloud downloads got fixed:\n\npreviously, client_id was (stupidly) hardcoded. that means cobalt wasn't able to fetch song data if soundcloud web app got updated.\nnow, cobalt tries to find the up-to-date client_id, caches it in memory, and checks if web app version has changed to update the id accordingly. you can see this change for yourself on github."
     }, {
         "version": "4.5",
         "title": "better, faster, stronger, stable",
-        "banner": "meowthstrong.webp",
+        "banner": {
-        "content": "your favorite social media downloader just got even better! this update includes a ton of improvements and fixes.\n\nin fact, there are so many changes, i had to split them in sections.\n\nservice-related improvements:\n*; vimeo module has been revamped, all sorts of videos should now be supported.\n*; vimeo audio downloads! you now can download audios from more recent videos.\n*; cobalt now supports all sorts of tumblr links. (even those scary ones from the mobile app)\n*; vk clips support has been fixed. they rolled back the separation of videos and clips, so i had to do the same.\n*; youtube videos with community warnings should now be possible to download.\nuser interface improvements:\n*; list of supported services is now MUCH easier to read.\n*; banners in changelog history should no longer overlap each other.\n*; bullet points! they have a bit of extra padding, so it makes them stand out of the rest of text.\ninternal improvements:\n*; cobalt will now match the link to regex when using ?u= query for autopasting it into input area.\n*; better rate limiting: limiting now is done per minute, not per 20 minutes. this ensures less waiting and less attack area for request spammers.\n*; moved to my own fork of ytdl-core, cause main project seems to have been abandoned. go check it out on <a class=\"text-backdrop italic\" href=\"https://github.com/wukko/better-ytdl-core\" target=\"_blank\">github</a> or <a class=\"text-backdrop italic\" href=\"https://www.npmjs.com/package/better-ytdl-core\" target=\"_blank\">npm</a>!\n*; ALL user inputs are now properly sanitized on the server. that includes variables for POST api method, too.\n*; \"got\" package has been (mostly) replaced by native fetch api. this should greatly reduce ram usage.\n*; all unnecessary duplications of module imports have been gotten rid of. no more error passing strings from inside of service modules. you don't make mistakes only if you don't do anything, right?\n*; other code optimizations. there's less clutter overall.\nhuge update, right? seems like everything's fixed now?\n\nnope, one issue still persists: sometimes youtube server drops packets for an audio file while cobalt's rendering the video for you. this results in abrupt cuts of audio. if you want to help solving this issue, <a class=\"text-backdrop italic\" href=\"https://github.com/wukko/cobalt/issues/62\" target=\"_blank\">please feel free to do it on github!</a>\n\nthank you for reading this, and thank you for sticking with cobalt and me."
+            "file": "meowthstrong.webp",
+            "width": 500,
+            "height": 280
+        },
+        "content": "your favorite social media downloader just got even better! this update includes a ton of improvements and fixes.\n\nin fact, there are so many changes, i had to split them in sections.\n\nservice-related improvements:\n*; vimeo module has been revamped, all sorts of videos should now be supported.\n*; vimeo audio downloads! you now can download audios from more recent videos.\n*; cobalt now supports all sorts of tumblr links. (even those scary ones from the mobile app)\n*; vk clips support has been fixed. they rolled back the separation of videos and clips, so i had to do the same.\n*; youtube videos with community warnings should now be possible to download.\nuser interface improvements:\n*; list of supported services is now MUCH easier to read.\n*; banners in changelog history should no longer overlap each other.\n*; bullet points! they have a bit of extra padding, so it makes them stand out of the rest of text.\ninternal improvements:\n*; cobalt will now match the link to regex when using ?u= query for autopasting it into input area.\n*; better rate limiting: limiting now is done per minute, not per 20 minutes. this ensures less waiting and less attack area for request spammers.\n*; moved to my own fork of ytdl-core, cause main project seems to have been abandoned. go check it out on <a class=\"text-backdrop link\" href=\"https://github.com/wukko/better-ytdl-core\" target=\"_blank\">github</a> or <a class=\"text-backdrop link\" href=\"https://www.npmjs.com/package/better-ytdl-core\" target=\"_blank\">npm</a>!\n*; ALL user inputs are now properly sanitized on the server. that includes variables for POST api method, too.\n*; \"got\" package has been (mostly) replaced by native fetch api. this should greatly reduce ram usage.\n*; all unnecessary duplications of module imports have been gotten rid of. no more error passing strings from inside of service modules. you don't make mistakes only if you don't do anything, right?\n*; other code optimizations. there's less clutter overall.\nhuge update, right? seems like everything's fixed now?\n\nnope, one issue still persists: sometimes youtube server drops packets for an audio file while cobalt's rendering the video for you. this results in abrupt cuts of audio. if you want to help solving this issue, <a class=\"text-backdrop link\" href=\"https://github.com/wukko/cobalt/issues/62\" target=\"_blank\">please feel free to do it on github!</a>\n\nthank you for reading this, and thank you for sticking with cobalt and me."
     }, {
         "version": "4.4",
         "title": "over 1 million monthly requests. thank you.",
-        "banner": "onemillionr.webp",
+        "banner": {
+            "file": "onemillionr.webp",
+            "width": 1441,
+            "height": 1441
+        },
         "content": "this is a huge milestone for me, i cannot express enough how grateful i am for each and every one of you.\nthank you for using cobalt, and thank you for showing that people love the web that's friendly and bullshit-free. i'm hoping to never disappoint you in the future and keep up the good work.\n\nthank you <3\n\nif you want to thank ME, check out the renovated donations tab, which now is also linked alongside bottom action buttons."
     }, {
         "version": "4.3.2",
@@ -74,8 +127,12 @@
     }, {
         "version": "4.3",
         "title": "developers, developers, developers, developers",
-        "banner": "developersdevelopersdevelopers.webp",
+        "banner": {
-        "content": "this update features a TON of improvements.\n\n<a class=\"text-backdrop italic\" href=\"https://www.youtube.com/watch?v=SaVTHG-Ev4k\" target=\"_blank\">developers</a>, you now can rely on cobalt for getting content from social media. the api has been revamped and <a class=\"text-backdrop italic\" href=\"https://github.com/wukko/cobalt/tree/current/docs/API.md\" target=\"_blank\">documentation</a> is now available. you can read more about API changes down below. go crazy, and have fun :D\n\nif you're not a developer, here's a list of changes that you probably care about:\n- rate limit is now approximately 8 times bigger. no more waiting, even if you want to download entirety of your tiktok \"for you\" page.\n- some updates will now have expressive banners, just like this one.\n- fixed what was causing an error when a youtube video had no description.\n- mp4 format button text should now be displayed properly, no matter if you touched the switcher or not.\n\nnext, the star of this update — improved api!\n- main endpoint now uses POST method instead of GET.\n- internal variables for preferences have been updated to be consistent and easier to understand.\n- ip address is now hashed right upon request, not somewhere deep inside the code.\n- global stream salt variable is no longer unnecessarily passed over a billion functions.\n- url and picker keys are now separate in the json response.\n- cobalt web app now correctly processes responses with \"success\" status.\n\nif you currently have a siri shortcut or some other script that uses the GET method, make sure to update it soon. this method is deprecated, limited, and will be removed entirely in coming updates.\n\nif you ever make something using cobalt's api, make sure to mention <a class=\"text-backdrop italic\" href=\"https://twitter.com/justusecobalt\" target=\"_blank\">@justusecobalt</a> on twitter, i would absolutely love to see what you made."
+            "file": "developers.webp",
+            "width": 640,
+            "height": 360
+        },
+        "content": "this update features a TON of improvements.\n\n<a class=\"text-backdrop link\" href=\"https://www.youtube.com/watch?v=SaVTHG-Ev4k\" target=\"_blank\">developers</a>, you now can rely on cobalt for getting content from social media. the api has been revamped and <a class=\"text-backdrop link\" href=\"https://github.com/wukko/cobalt/tree/current/docs/API.md\" target=\"_blank\">documentation</a> is now available. you can read more about API changes down below. go crazy, and have fun :D\n\nif you're not a developer, here's a list of changes that you probably care about:\n- rate limit is now approximately 8 times bigger. no more waiting, even if you want to download entirety of your tiktok \"for you\" page.\n- some updates will now have expressive banners, just like this one.\n- fixed what was causing an error when a youtube video had no description.\n- mp4 format button text should now be displayed properly, no matter if you touched the switcher or not.\n\nnext, the star of this update — improved api!\n- main endpoint now uses POST method instead of GET.\n- internal variables for preferences have been updated to be consistent and easier to understand.\n- ip address is now hashed right upon request, not somewhere deep inside the code.\n- global stream salt variable is no longer unnecessarily passed over a billion functions.\n- url and picker keys are now separate in the json response.\n- cobalt web app now correctly processes responses with \"success\" status.\n\nif you currently have a siri shortcut or some other script that uses the GET method, make sure to update it soon. this method is deprecated, limited, and will be removed entirely in coming updates.\n\nif you ever make something using cobalt's api, make sure to mention <a class=\"text-backdrop link\" href=\"https://twitter.com/justusecobalt\" target=\"_blank\">@justusecobalt</a> on twitter, i would absolutely love to see what you made."
     }, {
         "version": "4.2",
         "title": "optimized quality picking and 8k video support",
@@ -87,7 +144,7 @@
     }, {
         "version": "4.0",
         "title": "better and faster than ever",
-        "content": "this update has a ton of improvements and new features.\n\nchanges you probably care about:\n- cobalt now has support for recorded twitter spaces! download the previous conversation no matter how long it was.\n- download speeds from youtube are at least 10 times better now. you're welcome.\n- both video and audio length limits have been extended to 2 hours.\n- audio downloads from youtube, youtube music, twitter spaces, and soundcloud now have metadata! most often it's just title and artist, but when cobalt is able to get more info, it adds that metadata too.\n- tiktok downloads have been fixed, yet again, and if they ever break in the future, cobalt will fall back to downloading a less annoyingly watermarked video.\n- soundcloud downloads have been fixed, too.\n\nless notable changes:\n- currently experimenting with using mp3 as default audio format. if you set something other than mp3 before, it'll be set to mp3. you can always change it back in settings. let me know what you think about this.\n- \"download audio\" button from image picker no longer stays on the screen after popup was closed.\n- clipboard button now shows up depending on your browser's support for it.\n- you can no longer manually hide the clipboard button, 'cause it's unnecessary.\n- small internal improvements such as separation of changelog version and title.\n- fair bit of internal clean up.\n\nif you want to help me implement covers for downloaded audios, <a class=\"text-backdrop italic\" href=\"https://github.com/wukko/cobalt\" target=\"_blank\">you can do it on github</a>."
+        "content": "this update has a ton of improvements and new features.\n\nchanges you probably care about:\n- cobalt now has support for recorded twitter spaces! download the previous conversation no matter how long it was.\n- download speeds from youtube are at least 10 times better now. you're welcome.\n- both video and audio length limits have been extended to 2 hours.\n- audio downloads from youtube, youtube music, twitter spaces, and soundcloud now have metadata! most often it's just title and artist, but when cobalt is able to get more info, it adds that metadata too.\n- tiktok downloads have been fixed, yet again, and if they ever break in the future, cobalt will fall back to downloading a less annoyingly watermarked video.\n- soundcloud downloads have been fixed, too.\n\nless notable changes:\n- currently experimenting with using mp3 as default audio format. if you set something other than mp3 before, it'll be set to mp3. you can always change it back in settings. let me know what you think about this.\n- \"download audio\" button from image picker no longer stays on the screen after popup was closed.\n- clipboard button now shows up depending on your browser's support for it.\n- you can no longer manually hide the clipboard button, 'cause it's unnecessary.\n- small internal improvements such as separation of changelog version and title.\n- fair bit of internal clean up.\n\nif you want to help me implement covers for downloaded audios, <a class=\"text-backdrop link\" href=\"https://github.com/wukko/cobalt\" target=\"_blank\">you can do it on github</a>."
     }, {
         "version": "3.7",
         "title": "support for multi media tweets is here!",
@@ -103,7 +160,7 @@
     }, {
         "version": "3.5.4",
         "title": "tiktok support is back :D",
-        "content": "you can download videos, sounds, and images from tiktok again!\nhuge thank you to <a class=\"text-backdrop italic\" href=\"https://github.com/minzique\" target=\"_blank\">@minzique</a> for finding another api endpoint that works."
+        "content": "you can download videos, sounds, and images from tiktok again!\nhuge thank you to <a class=\"text-backdrop link\" href=\"https://github.com/minzique\" target=\"_blank\">@minzique</a> for finding another api endpoint that works."
     }, {
         "version": "3.5.2",
         "title": "vk clips support, improved changelog system, and less bugs",

src/modules/changelog/changelogManager.js

@@ -13,7 +13,11 @@ export default function(string) {
             case "title":
                 return replaceBase(changelog["current"]["title"]);
             case "banner":
-                return changelog["current"]["banner"] ? `updateBanners/${changelog["current"]["banner"]}` : false;
+                return changelog["current"]["banner"] ? {
+                    url: `updateBanners/${changelog["current"]["banner"]["file"]}`,
+                    width: changelog["current"]["banner"]["width"],
+                    height: changelog["current"]["banner"]["height"]
+                } : false;
             case "content":
                 return replaceBase(changelog["current"]["content"]);
             case "history":
@@ -24,7 +28,11 @@ export default function(string) {
                             i["date"] ? `<span class="changelog-tag-date">· ${i["date"]}</span>` : ''
                         }`,
                         content: replaceBase(i["content"]),
-                        banner: i["banner"] ? `updateBanners/${i["banner"]}` : false,
+                        banner: i["banner"] ? {
+                            url: `updateBanners/${i["banner"]["file"]}`,
+                            width: i["banner"]["width"],
+                            height: i["banner"]["height"]
+                        } : false,
                     }
                 });
             default:

src/modules/emoji.js

@@ -26,7 +26,12 @@ const names = {
     "👾": "alien_monster",
     "😿": "cat_crying",
     "🙀": "cat_flabbergasted",
-    "🐱": "cat_smile"
+    "🐱": "cat_smile",
+    "❤️‍🩹": "mending_heart",
+    "🔒": "locked",
+    "🔍": "magnifying_glass",
+    "🔗": "link",
+    "⌨": "keyboard"
 }
 let sizing = {
     18: 0.8,

src/modules/pageRender/elements.js

@@ -2,7 +2,11 @@ import { celebrations } from "../config.js";
 import emoji from "../emoji.js";
 
 export const backButtonSVG = `<svg width="22" height="22" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.7551 27.5102L3 15.7551L14.7551 4L16.7755 5.99417L8.45773 14.312H30V17.1982H8.45773L16.7755 25.4898L14.7551 27.5102Z" fill="#FFFFFF"/>
+<path d="M14.1905 28.5L2 16L14.1905 3.5L16.2857 5.62054L7.65986 14.4654H30V17.5346H7.65986L16.2857 26.3516L14.1905 28.5Z" fill="#E1E1E1"/>
+</svg>`
+
+export const dropdownSVG = `<svg width="18" height="18" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M28 12.0533L16 24L4 12.0533L6.03571 10L14.7188 18.4104L16.25 19.9348L17.7813 18.4104L25.9375 10L28 12.0533Z" fill="#E1E1E1"/>
 </svg>`
 
 export function switcher(obj) {
@@ -11,7 +15,9 @@ export function switcher(obj) {
         items = obj.items;
     } else {
         for (let i = 0; i < obj.items.length; i++) {
-            let classes = obj.items[i]["classes"] ? obj.items[i]["classes"] : []
+            let classes = obj.items[i]["classes"] ? obj.items[i]["classes"] : [];
+            if (i === 0) classes.push("first");
+            if (i === (obj.items.length - 1)) classes.push("last");
             items += `<button id="${obj.name}-${obj.items[i]["action"]}" class="switch${classes.length > 0 ? ' ' + classes.join(' ') : ''}" onclick="changeSwitcher('${obj.name}', '${obj.items[i]["action"]}')">${obj.items[i]["text"] ? obj.items[i]["text"] : obj.items[i]["action"]}</button>`
         }
     }
@@ -102,12 +108,16 @@ export function multiPagePopup(obj) {
     </div>`
 }
 export function collapsibleList(arr) {
-    let items = ``
+    let items = ``;
+
     for (let i = 0; i < arr.length; i++) {
-        items += `<div id="${arr[i]["name"]}-collapse" class="collapse-list">
+        let classes = arr[i]["classes"] ? arr[i]["classes"] : [];
+        if (i === 0) classes.push("first");
+        if (i === (arr.length - 1)) classes.push("last");
+        items += `<div id="${arr[i]["name"]}-collapse" class="collapse-list${classes.length > 0 ? ' ' + classes.join(' ') : ''}">
             <div class="collapse-header" onclick="expandCollapsible(event)">
                 <div class="collapse-title">${arr[i]["title"]}</div>
-                <div class="collapse-indicator">^</div>
+                <div class="collapse-indicator">${dropdownSVG}</div>
             </div>
             <div id="${arr[i]["name"]}-body" class="collapse-body">${arr[i]["body"]}</div>
         </div>`
@@ -138,7 +148,7 @@ export function popupWithBottomButtons(obj) {
     </div>`
 }
 export function socialLink(emji, name, handle, url) {
-    return `<div class="cobalt-support-link">${emji} ${name}: <a class="text-backdrop italic" href="${url}" target="_blank">${handle}</a></div>`
+    return `<div class="cobalt-support-link">${emji} ${name}: <a class="text-backdrop link" href="${url}" target="_blank">${handle}</a></div>`
 }
 export function settingsCategory(obj) {
     return `<div id="settings-${obj.name}" class="settings-category">
@@ -193,3 +203,26 @@ export function celebrationsEmoji() {
         return false
     }
 }
+export function urgentNotice(obj) {
+    if (obj.visible) {
+        return `<div id="urgent-notice" class="urgent-notice explanation" onclick="${obj.action}" style="visibility: hidden;">${emoji(obj.emoji, 18)} ${obj.text}</div>`
+    }
+    return ``
+}
+export function keyboardShortcuts(arr) {
+    let base = `<div id="keyboard-shortcuts" class="explanation">`;
+
+    for (let i = 0; i < arr.length; i++) {
+        base += `<div class="shortcut-category">`;
+        for (let c = 0; c < arr[i].items.length; c++) {
+            let combo = arr[i].items[c].combo.split('+').map(
+                key => `<span class="text-backdrop key">${key}</span>`
+            ).join("+")
+            base += `<div class="shortcut">${combo}: ${arr[i].items[c].name}</div>`
+        }
+        base += `</div>`
+    }
+    base += `</div>`;
+
+    return base;
+}

src/modules/pageRender/onDemand.js

@@ -13,8 +13,14 @@ export function changelogHistory() { // blockId 0
         let separator = (i !== 0 && i !== historyLen) ? '<div class="separator"></div>' : '';
 
         render += `
-        ${separator}${history[i]["banner"] ? `<div class="changelog-banner">
+        ${separator}${history[i]["banner"] ?
-            <img class="changelog-img" src="${history[i]["banner"]}" onerror="this.style.display='none'" loading="lazy"></img>
+        `<div class="changelog-banner">
+            <img class="changelog-img" ` +
+                `src="${history[i]["banner"]["url"]}" ` +
+                `width="${history[i]["banner"]["width"]}" ` +
+                `height="${history[i]["banner"]["height"]}" ` +
+                `onerror="this.style.opacity=0" loading="lazy">`+
+            `</img>
         </div>` : ''}
         <div id="popup-desc" class="changelog-tags">${history[i]["version"]}</div>
         <div id="popup-desc" class="changelog-subtitle">${history[i]["title"]}</div>

src/modules/pageRender/page.js

@@ -1,4 +1,4 @@
-import { checkbox, collapsibleList, explanation, footerButtons, multiPagePopup, popup, popupWithBottomButtons, sep, settingsCategory, switcher, socialLink } from "./elements.js";
+import { checkbox, collapsibleList, explanation, footerButtons, multiPagePopup, popup, popupWithBottomButtons, sep, settingsCategory, switcher, socialLink, urgentNotice, keyboardShortcuts } from "./elements.js";
 import { services as s, authorInfo, version, repo, donations, supportedAudio } from "../config.js";
 import { getCommitInfo } from "../sub/currentCommit.js";
 import loc from "../../localization/manager.js";
@@ -98,13 +98,52 @@ export default function(obj) {
                     }, {
                         text: collapsibleList([{
                             name: "services",
-                            title: t("CollapseServices"),
+                            title: `${emoji("🔗")} ${t("CollapseServices")}`,
                             body: `${enabledServices}<br/><br/>${t("ServicesNote")}`
+                        }, {
+                            name: "keyboard",
+                            title: `${emoji("⌨")} ${t("CollapseKeyboard")}`,
+                            body: 
+                            `${t("KeyboardShortcutsIntro")}
+                            ${keyboardShortcuts([{
+                                items: [{
+                                    combo: "Shift+D",
+                                    name: t("PasteFromClipboard")
+                                }, {
+                                     combo: "Shift+K",
+                                     name: t("ModeToggleAuto")
+                                }, {
+                                     combo: "Shift+L",
+                                     name: t("ModeToggleAudio")
+                                }]
+                            }, {
+                                items: [{
+                                    combo: "Ctrl+V",
+                                    name: t("KeyboardShortcutQuickPaste")
+                                }, {
+                                    combo: "Esc/Del",
+                                    name: t("KeyboardShortcutClear")
+                                }, {
+                                    combo: "Esc",
+                                    name: t("KeyboardShortcutClosePopup")
+                                }]
+                            }, {
+                                items: [{
+                                     combo: "Shift+B",
+                                     name: t("AboutTab")
+                                }, {
+                                     combo: "Shift+N",
+                                     name: t("ChangelogTab")
+                                }, {
+                                    combo: "Shift+M",
+                                    name: t("TitlePopupSettings")
+                                }]
+                            }])}`
                         }, {
                             name: "support",
-                            title: t("CollapseSupport"),
+                            title: `${emoji("❤️‍🩹")} ${t("CollapseSupport")}`,
-                            body: `
+                            body: 
-                            ${t("SupportSelfTroubleshooting")}<br/><br/>
+                            `${t("SupportSelfTroubleshooting")}<br/><br/>
                             ${t("FollowSupport")}<br/>
                             ${socialLink(
                                 emoji("🐦"), "twitter", authorInfo.support.twitter.handle, authorInfo.support.twitter.url
@@ -122,7 +161,7 @@ export default function(obj) {
                             ${t("SupportNote")}`
                         }, {
                             name: "privacy",
-                            title: t("CollapsePrivacy"),
+                            title: `${emoji("🔒")} ${t("CollapsePrivacy")}`,
                             body: t("PrivacyPolicy")
                         }])
                     }]
@@ -142,7 +181,12 @@ export default function(obj) {
                     }, {
                         text: changelogManager("banner") ?
                         `<div class="changelog-banner">
-                            <img class="changelog-img" src="${changelogManager("banner")}" onerror="this.style.display='none'" loading="lazy"></img>
+                            <img class="changelog-img" ` +
+                                `src="${changelogManager("banner")["url"]}" ` +
+                                `width="${changelogManager("banner")["width"]}" ` +
+                                `height="${changelogManager("banner")["height"]}" ` +
+                                `onerror="this.style.opacity=0" loading="lazy">`+
+                            `</img>
                         </div>`: '',
                         raw: true
                     }, {
@@ -192,9 +236,13 @@ export default function(obj) {
                         text: `<div class="category-title">${t('DonateSub')}</div>`,
                         raw: true
                     }, {
-                        text: `
+                        text: `<div class="changelog-banner">
-                        <div class="changelog-banner">
+                            <img class="changelog-img" ` +
-                            <img class="changelog-img" src="updateBanners/catsleep.webp" onerror="this.style.display='none'" loading="lazy"></img>
+                                `src="updateBanners/catsleep.webp"` +
+                                `width="480" ` +
+                                `height="270" ` +
+                                `onerror="this.style.opacity=0" loading="lazy">`+
+                            `</img>
                         </div>`,
                         raw: true
                     }, {
@@ -356,7 +404,6 @@ export default function(obj) {
                     title: t('SettingsAppearanceSubtitle'),
                     body: switcher({
                         name: "theme",
-                        subtitle: t('SettingsThemeSubtitle'),
                         items: [{
                             action: "auto",
                             text: t('SettingsThemeAuto')
@@ -448,7 +495,12 @@ export default function(obj) {
         </div>
         <div id="popup-backdrop" onclick="hideAllPopups()"></div>
         <div id="home">
-            <div id="urgent-notice" class="urgent-notice explanation" onclick="popup('about', 1, 'donate')" style="visibility: hidden;">${emoji("💖", 18)} ${t("UrgentDonate")}</div>
+            ${urgentNotice({
+                emoji: "🐱",
+                text: "report any issues!",
+                visible: true,
+                action: "popup('about', 1, 'changelog')"
+            })}
             <div id="cobalt-main-box" class="center" style="visibility: hidden;">
                 <div id="logo">${t("AppTitleCobalt")}</div>
                 <div id="download-area">