5.2.2: accessibility improvements

- moved clipboard button to right, added left-handed layout toggle for those who prefer to have it on left.
- removed button hover highlights on phones.
- added proper checkbox icon for better clarity.
- checkboxes are now stretched edge-to-edge on phone to be easier to manage for right-handed people.

package.json

@@ -1,7 +1,7 @@
 {
     "name": "cobalt",
     "description": "save what you love",
-    "version": "5.2",
+    "version": "5.2.2",
     "author": "wukko",
     "exports": "./src/cobalt.js",
     "type": "module",
@@ -33,6 +33,6 @@
         "node-cache": "^5.1.2",
         "url-pattern": "1.0.3",
         "xml-js": "^1.6.11",
-        "youtubei.js": "4.1.0"
+        "youtubei.js": "4.1.1"
     }
 }

src/front/cobalt.css

@@ -4,9 +4,10 @@
     --border-15: 0.15rem solid var(--accent);
     --border-10: 0.1rem solid var(--accent);
     --font-mono: 'Noto Sans Mono', 'Consolas', 'SF Mono', monospace;
-    --red: rgb(255, 0, 61);
     --padding-1: 0.75rem;
     --line-height: 1.65rem;
+    --red: rgb(255, 0, 61);
+    --color: rgb(107, 67, 139);
 }
 @media (prefers-color-scheme: dark) {
     :root {
@@ -17,6 +18,7 @@
         --accent-unhover: rgb(100, 100, 100);
         --accent-unhover-2: rgb(110, 110, 110);
         --background: rgb(0, 0, 0);
+        --checkmark: url(vectorIcons/checkmark_b.svg);
     }
 }
 @media (prefers-color-scheme: light) {
@@ -28,6 +30,7 @@
         --accent-unhover: rgb(190, 190, 190);
         --accent-unhover-2: rgb(110, 110, 110);
         --background: rgb(255, 255, 255);
+        --checkmark: url(vectorIcons/checkmark.svg);
     }
 }
 [data-theme="dark"] {
@@ -38,6 +41,7 @@
     --accent-unhover: rgb(100, 100, 100);
     --accent-unhover-2: rgb(110, 110, 110);
     --background: rgb(0, 0, 0);
+    --checkmark: url(vectorIcons/checkmark_b.svg);
 }
 [data-theme="light"] {
     --accent: rgb(25, 25, 25);
@@ -47,6 +51,7 @@
     --accent-unhover: rgb(190, 190, 190);
     --accent-unhover-2: rgb(110, 110, 110);
     --background: rgb(255, 255, 255);
+    --checkmark: url(vectorIcons/checkmark.svg);
 }
 html,
 body {
@@ -89,15 +94,20 @@ a {
     content: "";
     width: 15px;
     height: 15px;
-    border: var(--border-15);
+    border: 0.15rem solid var(--accent);
-    background-color: var(--accent-button-bg);
     display: block;
     z-index: 5;
     position: relative;
 }
 [type="checkbox"]:checked::before {
-    box-shadow: inset 0 0 0 0.14rem var(--accent-button-bg);
+    background: var(--checkmark);
+    background-size: 90%;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+[type="checkbox"]:checked::before {
     background-color: var(--accent);
+    border: 0.15rem solid var(--accent);
 }
 .checkbox span {
     margin-top: 0.21rem;
@@ -115,11 +125,12 @@ input[type="text"],
 [type="text"] {
     border-radius: 0;
 }
-button:hover,
+.desktop button:hover,
-.switch:hover,
+.desktop .switch:hover,
-.checkbox:hover,
+.desktop .checkbox:hover,
-.text-to-copy:hover,
+.desktop .text-to-copy:hover,
-.collapse-header:hover {
+.desktop .collapse-header:hover,
+.desktop #close-button:hover {
     background: var(--accent-hover);
     cursor: pointer;
 }
@@ -135,9 +146,9 @@ button:active,
     background: var(--accent-press);
     cursor: pointer;
 }
-.switch.text-backdrop:hover,
+.desktop .switch.text-backdrop:hover,
 .switch.text-backdrop:active,
-.text-to-copy.text-backdrop:hover,
+.desktop .text-to-copy.text-backdrop:hover,
 .text-to-copy.text-backdrop:active {
     background: var(--accent);
     color: var(--background);
@@ -494,6 +505,9 @@ input[type="checkbox"] {
     cursor: default;
     z-index: 999
 }
+.switch[data-enabled="true"]:hover {
+    background: var(--accent);
+}
 .switches {
     display: flex;
     width: auto;
@@ -709,13 +723,18 @@ input[type="checkbox"] {
         padding-bottom: 2rem;
     }
 }
+@media screen and (min-width: 720px) {
+    #leftHandedLayout-chkbx {
+        display: none;
+    }
+}
 /* mobile page */
 @media screen and (max-width: 720px) {
     #cobalt-main-box, #footer {
         width: 90%;
     }
 }
-@media screen and (max-width: 475px) {
+@media screen and (max-width: 499px) {
     .tab {
         font-size: 0!important;
     }
@@ -725,6 +744,9 @@ input[type="checkbox"] {
     #cobalt-main-box, #footer {
         width: 90%;
     }
+    .checkbox {
+        width: 100%;
+    }
 }
 @media screen and (max-width: 320px) {
     #popup-title {
@@ -758,12 +780,17 @@ input[type="checkbox"] {
     #cobalt-main-box #bottom button {
         width: 100%;
     }
+    #cobalt-main-box #bottom {
+        flex-direction: row-reverse;
+    }
+    #cobalt-main-box #bottom[data-lefthanded="true"] {
+        flex-direction: row;
+    }
     #pasteFromClipboard .emoji {
         margin-right: 0;
     }
     #pasteFromClipboard {
         width: 20%!important;
-        min-width: 15%;
         font-size: 0;
     }
     #footer {

src/front/cobalt.js

@@ -15,7 +15,7 @@ let switchers = {
     "dubLang": ["original", "auto"],
     "vimeoDash": ["false", "true"]
 }
-let checkboxes = ["disableTikTokWatermark", "fullTikTokAudio", "muteAudio"];
+let checkboxes = ["disableTikTokWatermark", "fullTikTokAudio", "muteAudio", "leftHandedLayout"];
 let exceptions = { // used for mobile devices
     "vQuality": "720"
 }
@@ -241,12 +241,12 @@ function internetError() {
     popup("error", 1, loc.noInternet);
 }
 function checkbox(action) {
-    if (eid(action).checked) {
+    sSet(action, !!eid(action).checked);
-        sSet(action, "true");
+    switch(action) {
-        if (action === "alwaysVisibleButton") button();
+        case "alwaysVisibleButton": button(); break;
-    } else {
+        case "leftHandedLayout":
-        sSet(action, "false");
+            eid("bottom").setAttribute("data-lefthanded", sGet("leftHandedLayout"));
-        if (action === "alwaysVisibleButton") button();
+            break;
     }
     sGet(action) === "true" ? notificationCheck("disable") : notificationCheck();
 }
@@ -321,11 +321,13 @@ function resetSettings() {
     window.location.reload();
 }
 async function pasteClipboard() {
-    let t = await navigator.clipboard.readText();
+    try {
-    if (regex.test(t)) {
+        let t = await navigator.clipboard.readText();
-        eid("url-input-area").value = t;
+        if (regex.test(t)) {
-        download(eid("url-input-area").value);
+            eid("url-input-area").value = t;
-    }
+            download(eid("url-input-area").value);
+        }
+    } catch (e) {}
 }
 async function download(url) {
     changeDownloadButton(2, '...');
@@ -449,6 +451,7 @@ window.onload = () => {
     eid("cobalt-main-box").style.visibility = 'visible';
     eid("footer").style.visibility = 'visible';
     eid("url-input-area").value = "";
+    eid("bottom").setAttribute("data-lefthanded", sGet("leftHandedLayout"));
     notificationCheck();
     if (isIOS) sSet("downloadPopup", "true");
     let urlQuery = new URLSearchParams(window.location.search).get("u");

src/front/vectorIcons/checkmark.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 13.3871H2.1188L2.57078 14.1436L12.1982 30.2565L12.3437 30.5H12.6274H14.9529H15.2564L15.3965 30.2308L29.4436 3.23077L29.8238 2.5H29H25.6087H25.3024L25.1633 2.77281L13.875 24.903L6.45111 13.6124L6.30297 13.3871H6.03333H3Z" fill="white" stroke="white"/>
+</svg>

src/front/vectorIcons/checkmark_b.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 13.3871H2.1188L2.57078 14.1436L12.1982 30.2565L12.3437 30.5H12.6274H14.9529H15.2564L15.3965 30.2308L29.4436 3.23077L29.8238 2.5H29H25.6087H25.3024L25.1633 2.77281L13.875 24.903L6.45111 13.6124L6.30297 13.3871H6.03333H3Z" fill="black" stroke="black"/>
+</svg>

src/localization/languages/en.json

@@ -94,7 +94,7 @@
         "ChangelogPressToHide": "collapse",
         "Donate": "donate",
         "DonateSub": "help me keep it up",
-        "DonateExplanation": "{appName} does not (and will never) serve ads or sell your data, therefore it's <span class=\"text-backdrop\">completely free to use</span>. but turns out keeping up a web service used by over 40 thousand of people is somewhat costly.\n\nif you ever found {appName} useful and want to keep it online, or simply want to thank the developer, consider chipping in! each and every cent helps and is VERY appreciated :D",
+        "DonateExplanation": "{appName} does not (and will never) serve ads or sell your data, therefore it's <span class=\"text-backdrop\">completely free to use</span>. but turns out keeping up a web service used by over 40 thousand people is somewhat costly.\n\nif you ever found {appName} useful and want to keep it online, or simply want to thank the developer, consider chipping in! each and every cent helps and is VERY appreciated :D",
         "DonateVia": "donate via",
         "DonateHireMe": "or you can <a class=\"text-backdrop italic\" href=\"{s}\" target=\"_blank\">hire me</a>",
         "SettingsVideoMute": "mute audio",
@@ -117,6 +117,7 @@
         "SettingsDubDefault": "original",
         "SettingsDubAuto": "auto",
         "SettingsVimeoPrefer": "vimeo downloads type",
-        "SettingsVimeoPreferDescription": "progressive: direct file link to vimeo's cdn. max quality is 1080p.\ndash: video and audio are merged by {appName} into one file. max quality is 4k.\n\npick \"progressive\" if you want best editor/player/social media compatibility. if progressive download isn't available, dash is used instead."
+        "SettingsVimeoPreferDescription": "progressive: direct file link to vimeo's cdn. max quality is 1080p.\ndash: video and audio are merged by {appName} into one file. max quality is 4k.\n\npick \"progressive\" if you want best editor/player/social media compatibility. if progressive download isn't available, dash is used instead.",
+        "LeftHanded": "left-handed layout"
     }
 }

src/localization/languages/ru.json

@@ -117,6 +117,7 @@
         "SettingsDubDefault": "оригинал",
         "SettingsDubAuto": "авто",
         "SettingsVimeoPrefer": "тип загрузок с vimeo",
-        "SettingsVimeoPreferDescription": "progressive: прямая ссылка на файл с сервера vimeo. максимальное качество: 1080p.\ndash: {appName} совмещает видео и аудио в один файл. максимальное качество: 4k.\n\nвыбирай \"progressive\", если тебе нужна наилучшая совместимость с плеерами/редакторами/соцсетями. если \"progressive\" файл недоступен, {appName} скачает \"dash\"."
+        "SettingsVimeoPreferDescription": "progressive: прямая ссылка на файл с сервера vimeo. максимальное качество: 1080p.\ndash: {appName} совмещает видео и аудио в один файл. максимальное качество: 4k.\n\nвыбирай \"progressive\", если тебе нужна наилучшая совместимость с плеерами/редакторами/соцсетями. если \"progressive\" файл недоступен, {appName} скачает \"dash\".",
+        "LeftHanded": "режим левши"
     }
 }

src/modules/changelog/changelog.json

@@ -3,7 +3,7 @@
         "version": "5.2",
         "title": "fastest one in the game",
         "banner": "catspeed.webp",
-        "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. please share your thoughts on it.\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*; 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 40k monthly users! i really appreciate that you're still here, because that means i'm doing some things right :D"
+        "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"
     },
     "history": [{
         "version": "5.1",

src/modules/pageRender/page.js

@@ -68,7 +68,7 @@ export default function(obj) {
 
         <noscript><div style="margin: 2rem;">${t('NoScriptMessage')}</div></noscript>
     </head>
-    <body id="cobalt-body" data-nosnippet ontouchstart>
+    <body id="cobalt-body" ${platform === "p" ? 'class="desktop"' : ''} data-nosnippet ontouchstart>
         ${multiPagePopup({
             name: "about",
             closeAria: t('AccessibilityClosePopup'),
@@ -314,7 +314,7 @@ export default function(obj) {
                             "action": "light",
                             "text": t('SettingsThemeLight')
                         }]
-                    }) + checkbox("alwaysVisibleButton", t('SettingsKeepDownloadButton'), 4, t('AccessibilityKeepDownloadButton'))
+                    }) + checkbox("alwaysVisibleButton", t('SettingsKeepDownloadButton'), 4, t('AccessibilityKeepDownloadButton')) + checkbox("leftHandedLayout", t('LeftHanded'), 4)
                 }) + settingsCategory({
                     name: "miscellaneous",
                     title: t('Miscellaneous'),