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 5fe2013..2b7d630 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 f05b132..37662df 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 0000000..6f9587c --- /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 514e8a1..c019037 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 b923040..5e02280 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')}`],