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.
This commit is contained in:
wukko
parent
6e01026894
commit
19087944f7
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
|
|
|||
3
src/front/vectorIcons/checkmark.svg
Normal file
3
src/front/vectorIcons/checkmark.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 366 B |
3
src/front/vectorIcons/checkmark_b.svg
Normal file
3
src/front/vectorIcons/checkmark_b.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 366 B |
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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": "режим левши"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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'),
|
||||
|
|
|
|||
Loading…
Reference in a new issue