tiktok images and crowdin

src/front/cobalt.css

@@ -127,6 +127,10 @@ button:active,
     cursor: pointer;
     transform: scale(0.95)
 }
+.imagepicker-image:active {
+    cursor: pointer;
+    transform: scale(0.95)
+}
 input[type="checkbox"] {
     cursor: pointer;
 }
@@ -465,6 +469,30 @@ input[type="checkbox"] {
 .button:active .tooltip {
     display: none;
 }
+.imagepicker-image {
+    object-fit: cover;
+    width: inherit;
+    height: inherit;
+}
+.imagepicker-image-container {
+    width: 8rem;
+    height: 8rem;
+    margin-bottom: 1rem;
+    background-color: var(--accent-button-bg);
+    text-align: center;
+    letter-spacing: -0.2rem;
+    line-height: 8rem;
+}
+#imagepicker-holder {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    align-content: space-around;
+}
+#popup-imagePicker .explanation {
+    padding-top: 0!important;
+    padding-bottom: 1rem;
+}
 /* adapt the page according to screen size */
 @media screen and (min-width: 2300px) {
     html {
@@ -553,6 +581,11 @@ input[type="checkbox"] {
     }
 }
 @media screen and (max-width: 949px) {
+    .imagepicker-image-container {
+        height: 7rem;
+        width: 7rem;
+        line-height: 7rem;
+    }
     #close-error {
         bottom: 5%;
         position: absolute;
@@ -582,3 +615,13 @@ input[type="checkbox"] {
         padding-bottom: 2rem;
     }
 }
+@media screen and (max-width: 400px) {
+    .popup-title {
+        line-height: inherit;
+    }
+    .imagepicker-image-container {
+        line-height: 6rem;
+        height: 6rem;
+        width: 6rem;
+    }
+}

src/front/cobalt.js

@@ -1,5 +1,5 @@
 let isIOS = navigator.userAgent.toLowerCase().match("iphone os");
-let version = 5;
+let version = 6;
 
 let switchers = {
     "theme": ["auto", "light", "dark"],
@@ -101,6 +101,8 @@ function hideAllPopups() {
     for (let i = 0; i < filter.length; i++) {
         filter[i].style.visibility = "hidden";
     }
+    eid("imagepicker-holder").innerHTML = '';
+    eid("imagepicker-download").href = '/';
     eid("popup-backdrop").style.visibility = "hidden";
 }
 function popup(type, action, text) {
@@ -130,6 +132,21 @@ function popup(type, action, text) {
             }
             eid("popup-download").style.visibility = vis(action);
             break;
+        case "imagePicker":
+            switch (action) {
+                case 1:
+                    eid("imagepicker-download").href = text.url;
+                    for (let i in text.images) {
+                        eid("imagepicker-holder").innerHTML += `<div class="imagepicker-image-container"><img class="imagepicker-image" src="${text.images[i]}" onerror="this.style.display='none';this.parentNode.innerHTML=':('"></img></div>`
+                    }
+                    break;
+                case 0:
+                    eid("imagepicker-download").href = '/';
+                    eid("imagepicker-holder").innerHTML = ''
+                    break;
+            }
+            eid("popup-imagePicker").style.visibility = vis(action);
+            break;
         default:
             eid(`popup-${type}`).style.visibility = vis(action);
             break;
@@ -238,13 +255,21 @@ async function download(url) {
                             window.open(j.url, '_blank');
                         }
                         break;
+                    case "images":
                     case "stream":
                         changeDownloadButton(2, '?..')
                         fetch(`${j.url}&p=1&origin=front`).then(async (res) => {
                             let jp = await res.json();
                             if (jp.status == "continue") {
                                 changeDownloadButton(2, '>>>')
-                                window.location.href = j.url
+                                if (j.status === "images") {
+                                    popup('imagePicker', 1, {
+                                        url: j.url,
+                                        images: j.images
+                                    })
+                                } else {
+                                    window.location.href = j.url
+                                }
                                 setTimeout(() => {
                                     changeDownloadButton(1, '>>')
                                     eid("url-input-area").disabled = false
@@ -259,7 +284,7 @@ async function download(url) {
                     default:
                         eid("url-input-area").disabled = false
                         changeDownloadButton(2, '!!')
-                        popup("error", 1, loc.noURLReturned);
+                        popup("error", 1, loc.unknownStatus);
                         break;
                 }
             } else {