From 19087944f746376f2fa6607cbc982120ac554cce Mon Sep 17 00:00:00 2001 From: wukko Date: Wed, 29 Mar 2023 22:08:41 +0600 Subject: [PATCH] 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 | 4 +- src/front/cobalt.css | 53 ++++++++++++++++++++------- src/front/cobalt.js | 27 ++++++++------ src/front/vectorIcons/checkmark.svg | 3 ++ src/front/vectorIcons/checkmark_b.svg | 3 ++ src/localization/languages/en.json | 5 ++- src/localization/languages/ru.json | 3 +- src/modules/changelog/changelog.json | 2 +- src/modules/pageRender/page.js | 4 +- 9 files changed, 71 insertions(+), 33 deletions(-) create mode 100644 src/front/vectorIcons/checkmark.svg create mode 100644 src/front/vectorIcons/checkmark_b.svg diff --git a/package.json b/package.json index f97eccb1..77a8ab9a 100644 --- a/package.json +++ b/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" } } diff --git a/src/front/cobalt.css b/src/front/cobalt.css index a1464979..678224bb 100644 --- a/src/front/cobalt.css +++ b/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); - background-color: var(--accent-button-bg); + border: 0.15rem solid var(--accent); 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, -.switch:hover, -.checkbox:hover, -.text-to-copy:hover, -.collapse-header:hover { +.desktop button:hover, +.desktop .switch:hover, +.desktop .checkbox:hover, +.desktop .text-to-copy: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 { diff --git a/src/front/cobalt.js b/src/front/cobalt.js index d29db0a6..7b6a7dda 100644 --- a/src/front/cobalt.js +++ b/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, "true"); - if (action === "alwaysVisibleButton") button(); - } else { - sSet(action, "false"); - if (action === "alwaysVisibleButton") button(); + sSet(action, !!eid(action).checked); + switch(action) { + case "alwaysVisibleButton": button(); break; + case "leftHandedLayout": + eid("bottom").setAttribute("data-lefthanded", sGet("leftHandedLayout")); + 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(); - if (regex.test(t)) { - eid("url-input-area").value = t; - download(eid("url-input-area").value); - } + try { + let t = await navigator.clipboard.readText(); + if (regex.test(t)) { + 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"); diff --git a/src/front/vectorIcons/checkmark.svg b/src/front/vectorIcons/checkmark.svg new file mode 100644 index 00000000..a470f70e --- /dev/null +++ b/src/front/vectorIcons/checkmark.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/front/vectorIcons/checkmark_b.svg b/src/front/vectorIcons/checkmark_b.svg new file mode 100644 index 00000000..42e9e05a --- /dev/null +++ b/src/front/vectorIcons/checkmark_b.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/localization/languages/en.json b/src/localization/languages/en.json index 7f1f591b..8fe874bf 100644 --- a/src/localization/languages/en.json +++ b/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 completely free to use. 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 completely free to use. 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 hire me", "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" } } diff --git a/src/localization/languages/ru.json b/src/localization/languages/ru.json index c9b45220..2612767e 100644 --- a/src/localization/languages/ru.json +++ b/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": "режим левши" } } diff --git a/src/modules/changelog/changelog.json b/src/modules/changelog/changelog.json index c6b5103c..f4aaaba8 100644 --- a/src/modules/changelog/changelog.json +++ b/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\ntl;dr:\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\ntl;dr:\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", diff --git a/src/modules/pageRender/page.js b/src/modules/pageRender/page.js index aaae41ac..f99941c1 100644 --- a/src/modules/pageRender/page.js +++ b/src/modules/pageRender/page.js @@ -68,7 +68,7 @@ export default function(obj) { - + ${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'),