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

@@ -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;
-    }
 }

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 += `<a class="picker-image-container"><img class="picker-image" src="${text.arr[i]["url"]}" onerror="this.parentNode.style.display='none'"></img></a>`
                         }
@@ -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 = `<div class="picker-various-container" onClick="${isIOS ? `share('${text.arr[i]["url"]}')` : `window.location.href='${text.arr[i]["url"]}'`}"><div class="picker-element-name">VIDEO ${Number(i)+1}</div><div class="imageBlock"></div><img class="picker-image" src="${text.arr[i]["thumb"]}" onerror="this.style.display='none'"></img></div>`
+                                    item = `<div class="picker-image-container" onClick="${isIOS ? `share('${text.arr[i]["url"]}')` : `window.location.href='${text.arr[i]["url"]}'`}"><div class="picker-element-name">${Number(i)+1}</div><div class="imageBlock"></div><img class="picker-image" src="${text.arr[i]["thumb"]}" onerror="this.style.display='none'"></img></div>`
                                     break;
                             }
                             eid("picker-holder").innerHTML += item

src/front/emoji/abacus.svg

@@ -0,0 +1,8 @@
+<svg width="100%" height="100%" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M29 8H3V9H29V8ZM29 13H3V14H29V13ZM3 18H29V19H3V18ZM29 23H3V24H29V23Z" fill="#D3D3D3" />
+  <path d="M8 2C4.68629 2 2 4.68629 2 8V24C2 27.3137 4.68629 30 8 30H24C27.3137 30 30 27.3137 30 24V8C30 4.68629 27.3137 2 24 2H8ZM8 4H24C26.2091 4 28 5.79086 28 8V24C28 26.2091 26.2091 28 24 28H8C5.79086 28 4 26.2091 4 24V8C4 5.79086 5.79086 4 8 4Z" fill="#FF6723" />
+  <path d="M6 8C6 7.17157 6.67157 6.5 7.5 6.5C8.32843 6.5 9 7.17157 9 8C9 7.17157 9.67157 6.5 10.5 6.5C11.3284 6.5 12 7.17157 12 8C12 7.17157 12.6716 6.5 13.5 6.5C14.3284 6.5 15 7.17157 15 8C15 7.17157 15.6716 6.5 16.5 6.5C17.3284 6.5 18 7.17157 18 8V9C18 9.82843 17.3284 10.5 16.5 10.5C15.6716 10.5 15 9.82843 15 9C15 9.82843 14.3284 10.5 13.5 10.5C12.6716 10.5 12 9.82843 12 9C12 9.82843 11.3284 10.5 10.5 10.5C9.67157 10.5 9 9.82843 9 9C9 9.82843 8.32843 10.5 7.5 10.5C6.67157 10.5 6 9.82843 6 9V8ZM24.5 6.5C23.6716 6.5 23 7.17157 23 8V9C23 9.82843 23.6716 10.5 24.5 10.5C25.3284 10.5 26 9.82843 26 9V8C26 7.17157 25.3284 6.5 24.5 6.5Z" fill="#F70A8D" />
+  <path d="M6 13C6 12.1716 6.67157 11.5 7.5 11.5C8.32843 11.5 9 12.1716 9 13C9 12.1716 9.67157 11.5 10.5 11.5C11.3284 11.5 12 12.1716 12 13C12 12.1716 12.6716 11.5 13.5 11.5C14.3284 11.5 15 12.1716 15 13C15 12.1716 15.6716 11.5 16.5 11.5C17.3284 11.5 18 12.1716 18 13V14C18 14.8284 17.3284 15.5 16.5 15.5C15.6716 15.5 15 14.8284 15 14C15 14.8284 14.3284 15.5 13.5 15.5C12.6716 15.5 12 14.8284 12 14C12 14.8284 11.3284 15.5 10.5 15.5C9.67157 15.5 9 14.8284 9 14C9 14.8284 8.32843 15.5 7.5 15.5C6.67157 15.5 6 14.8284 6 14V13ZM24.5 11.5C23.6716 11.5 23 12.1716 23 13V14C23 14.8284 23.6716 15.5 24.5 15.5C25.3284 15.5 26 14.8284 26 14V13C26 12.1716 25.3284 11.5 24.5 11.5Z" fill="#00A6ED" />
+  <path d="M6 18C6 17.1716 6.67157 16.5 7.5 16.5C8.32843 16.5 9 17.1716 9 18C9 17.1716 9.67157 16.5 10.5 16.5C11.3284 16.5 12 17.1716 12 18C12 17.1716 12.6716 16.5 13.5 16.5C14.3284 16.5 15 17.1716 15 18C15 17.1716 15.6716 16.5 16.5 16.5C17.3284 16.5 18 17.1716 18 18V19C18 19.8284 17.3284 20.5 16.5 20.5C15.6716 20.5 15 19.8284 15 19C15 19.8284 14.3284 20.5 13.5 20.5C12.6716 20.5 12 19.8284 12 19C12 19.8284 11.3284 20.5 10.5 20.5C9.67157 20.5 9 19.8284 9 19C9 19.8284 8.32843 20.5 7.5 20.5C6.67157 20.5 6 19.8284 6 19V18ZM24.5 16.5C23.6716 16.5 23 17.1716 23 18V19C23 19.8284 23.6716 20.5 24.5 20.5C25.3284 20.5 26 19.8284 26 19V18C26 17.1716 25.3284 16.5 24.5 16.5Z" fill="#FCD53F" />
+  <path d="M6 23C6 22.1716 6.67157 21.5 7.5 21.5C8.32843 21.5 9 22.1716 9 23C9 22.1716 9.67157 21.5 10.5 21.5C11.3284 21.5 12 22.1716 12 23C12 22.1716 12.6716 21.5 13.5 21.5C14.3284 21.5 15 22.1716 15 23C15 22.1716 15.6716 21.5 16.5 21.5C17.3284 21.5 18 22.1716 18 23V24C18 24.8284 17.3284 25.5 16.5 25.5C15.6716 25.5 15 24.8284 15 24C15 24.8284 14.3284 25.5 13.5 25.5C12.6716 25.5 12 24.8284 12 24C12 24.8284 11.3284 25.5 10.5 25.5C9.67157 25.5 9 24.8284 9 24C9 24.8284 8.32843 25.5 7.5 25.5C6.67157 25.5 6 24.8284 6 24V23ZM24.5 21.5C23.6716 21.5 23 22.1716 23 23V24C23 24.8284 23.6716 25.5 24.5 25.5C25.3284 25.5 26 24.8284 26 24V23C26 22.1716 25.3284 21.5 24.5 21.5Z" fill="#00D26A" />
+</svg>

src/modules/emoji.js

@@ -32,7 +32,8 @@ const names = {
     "🔍": "magnifying_glass",
     "🔗": "link",
     "⌨": "keyboard",
-    "📑": "boring_document"
+    "📑": "boring_document",
+    "🧮": "abacus"
 }
 let sizing = {
     18: 0.8,

src/modules/pageRender/page.js

@@ -455,7 +455,7 @@ export default function(obj) {
             name: "picker",
             closeAria: t('AccessibilityGoBack'),
             header: {
-                title: `<div id="picker-title"></div>`,
+                title: `${emoji("🧮", 30)} <div id="picker-title"></div>`,
                 explanation: `<div id="picker-subtitle"></div>`,
             },
             buttons: [`<a id="picker-download" class="switch" target="_blank" href="/">${t('ImagePickerDownloadAudio')}</a>`],