From c4830cac08c83634fe0fc6528080df869edcd7c2 Mon Sep 17 00:00:00 2001 From: wukko Date: Mon, 14 Aug 2023 01:36:19 +0600 Subject: [PATCH] made picker usable in new ui, but still ugly download audio button still dies after 20 seconds, have to change url from stream to direct file (because tiktok audio links are static) --- src/front/cobalt.css | 42 ++++++++++++++-------------------- src/front/cobalt.js | 21 +++++++++++------ src/front/emoji/abacus.svg | 8 +++++++ src/modules/emoji.js | 3 ++- src/modules/pageRender/page.js | 2 +- 5 files changed, 42 insertions(+), 34 deletions(-) create mode 100644 src/front/emoji/abacus.svg diff --git a/src/front/cobalt.css b/src/front/cobalt.css index 5fe20137..2b7d630e 100644 --- a/src/front/cobalt.css +++ b/src/front/cobalt.css @@ -505,7 +505,8 @@ button:active, scrollbar-width: none; } .popup-content-inner, -.tab-content-settings { +.tab-content-settings, +#picker-holder { padding-top: calc(env(safe-area-inset-top)/2 + 4.9rem); padding-bottom: calc(env(safe-area-inset-bottom)/2 + 4.8rem); } @@ -679,25 +680,26 @@ button:active, } .picker-image { object-fit: cover; - width: inherit; - height: inherit; + width: 100%; + height: 100%; cursor: pointer; user-select: all; -webkit-user-select: all; } .picker-image-container { - width: 8rem; - height: 8rem; - margin-bottom: var(--padding-1); + width: calc(100% / 3); + height: 12rem; background-color: var(--accent-button); + cursor: pointer; } .picker-various-container { - height: 20rem; - width: 25rem; + height: 12rem; + width: 12rem; margin-bottom: var(--padding-1); background-color: var(--accent-button); border: var(--accent-button) 0.18rem solid; position: relative; + cursor: pointer; } #picker-holder { display: flex; @@ -707,12 +709,6 @@ button:active, padding-top: calc(env(safe-area-inset-top)/2 + 7.6rem); padding-bottom: calc(env(safe-area-inset-bottom)/2 + 4.8rem); } -#picker-holder.various { - justify-content: left; - flex-wrap: unset; - overflow-x: scroll; - gap: 2rem; -} .imageBlock { height: 100%; width: 100%; @@ -867,6 +863,12 @@ button:active, .loader { text-align: center; } +#picker-download { + visibility: hidden; +} +#picker-download.visible { + visibility: visible; +} #home { opacity: 0; } @@ -929,8 +931,8 @@ button:active, .collapse-list.last.expanded .collapse-header { border-radius: 0; } +/* prevent resizing fliecker on ios if web app is installed as standalone */ @media all and (display-mode: standalone) { - /* prevent resizing fliecker on ios if web app is installed as standalone */ #home.visible { transition-delay: 0.1s; } @@ -1167,11 +1169,6 @@ button:active, height: 20rem; max-width: 100%; } - .picker-image-container { - height: 7rem; - width: 7rem; - line-height: 7rem; - } .popup, .popup.scrollable { border: none; width: 100%; @@ -1196,9 +1193,4 @@ button:active, .popup-title { line-height: inherit; } - .picker-image-container { - line-height: 6rem; - height: 6rem; - width: 6rem; - } } \ No newline at end of file diff --git a/src/front/cobalt.js b/src/front/cobalt.js index f05b1320..37662dfd 100644 --- a/src/front/cobalt.js +++ b/src/front/cobalt.js @@ -164,11 +164,13 @@ function hideAllPopups() { for (let i = 0; i < filter.length; i++) { filter[i].classList.remove("visible"); } + eid("popup-backdrop").classList.remove("visible"); + store.isPopupOpen = false; + + // clear the picker eid("picker-holder").innerHTML = ''; eid("picker-download").href = '/'; eid("picker-download").classList.remove("visible"); - eid("popup-backdrop").classList.remove("visible"); - store.isPopupOpen = false; } function popup(type, action, text) { if (action === 1) { @@ -197,10 +199,13 @@ function popup(type, action, text) { case "images": eid("picker-title").innerHTML = loc.pickerImages; eid("picker-subtitle").innerHTML = loc.pickerImagesExpl; - if (!eid("popup-picker").classList.contains("scrollable")) eid("popup-picker").classList.add("scrollable"); - if (eid("picker-holder").classList.contains("various")) eid("picker-holder").classList.remove("various"); + + eid("popup-picker").classList.add("scrollable"); + eid("picker-holder").classList.remove("various"); + eid("picker-download").href = text.audio; eid("picker-download").classList.add("visible"); + for (let i in text.arr) { eid("picker-holder").innerHTML += `` } @@ -208,13 +213,15 @@ function popup(type, action, text) { default: eid("picker-title").innerHTML = loc.pickerDefault; eid("picker-subtitle").innerHTML = loc.pickerDefaultExpl; - if (eid("popup-picker").classList.contains("scrollable")) eid("popup-picker").classList.remove("scrollable"); - if (!eid("picker-holder").classList.contains("various")) eid("picker-holder").classList.add("various"); + + eid("popup-picker").classList.remove("scrollable"); + eid("picker-holder").classList.add("various"); + for (let i in text.arr) { let s = text.arr[i], item; switch (s.type) { case "video": - item = `
VIDEO ${Number(i)+1}
` + item = `
${Number(i)+1}
` break; } eid("picker-holder").innerHTML += item diff --git a/src/front/emoji/abacus.svg b/src/front/emoji/abacus.svg new file mode 100644 index 00000000..6f9587c4 --- /dev/null +++ b/src/front/emoji/abacus.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/src/modules/emoji.js b/src/modules/emoji.js index 514e8a1d..c019037a 100644 --- a/src/modules/emoji.js +++ b/src/modules/emoji.js @@ -32,7 +32,8 @@ const names = { "🔍": "magnifying_glass", "🔗": "link", "⌨": "keyboard", - "📑": "boring_document" + "📑": "boring_document", + "🧮": "abacus" } let sizing = { 18: 0.8, diff --git a/src/modules/pageRender/page.js b/src/modules/pageRender/page.js index b923040a..5e022805 100644 --- a/src/modules/pageRender/page.js +++ b/src/modules/pageRender/page.js @@ -455,7 +455,7 @@ export default function(obj) { name: "picker", closeAria: t('AccessibilityGoBack'), header: { - title: `
`, + title: `${emoji("🧮", 30)}
`, explanation: `
`, }, buttons: [`${t('ImagePickerDownloadAudio')}`],