added support for instagram images

also improved various picker

docker-compose.example.yml

@@ -21,7 +21,7 @@ services:
             # replace apiName with your instance's distinctive name
             - apiName=eu-nl
             # if you want to use cookies when fetching data from services, uncomment the next line
-            #- cookiePath=/cookies.json
+            #- cookiePath=cookies.json
             # see src/modules/processing/cookie/cookies_example.json for example file.
 
     cobalt-web:

src/front/cobalt.css

@@ -697,15 +697,7 @@ button:active,
     height: 12rem;
     background-color: var(--accent-button);
     cursor: pointer;
-}
-.picker-various-container {
-    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;
@@ -716,8 +708,8 @@ button:active,
     padding-bottom: calc(env(safe-area-inset-bottom)/2 + 4.8rem);
 }
 .imageBlock {
-    height: 100%;
     width: 100%;
+    height: 100%;
     position: absolute;
     z-index: 99;
 }
@@ -1174,11 +1166,6 @@ button:active,
         overflow-x: hidden;
         overflow-y: scroll;
     }
-    .picker-various-container {
-        width: 100%;
-        height: 20rem;
-        max-width: 100%;
-    }
     .popup, .popup.scrollable {
         border: none;
         width: 100%;

src/front/cobalt.js

@@ -202,31 +202,35 @@ function popup(type, action, text) {
                         eid("picker-title").innerHTML = loc.pickerImages;
                         eid("picker-subtitle").innerHTML = loc.pickerImagesExpl;
 
-                        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>`
+                            eid("picker-holder").innerHTML +=
+                            `<a class="picker-image-container" ${
+                                isIOS ? `onClick="share('${text.arr[i]["url"]}')` : `href="${text.arr[i]["url"]}" target="_blank"`
+                            }>` +
+                                `<img class="picker-image" src="${text.arr[i]["url"]}" onerror="this.parentNode.style.display='none'"></img>` +
+                            `</a>`
                         }
                         break;
                     default:
                         eid("picker-title").innerHTML = loc.pickerDefault;
                         eid("picker-subtitle").innerHTML = loc.pickerDefaultExpl;
 
-                        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-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
+                            eid("picker-holder").innerHTML +=
+                            `<a class="picker-image-container" ${
+                                isIOS ? `onClick="share('${text.arr[i]["url"]}')` : `href="${text.arr[i]["url"]}" target="_blank"`
+                            }>` + 
+                                `<div class="picker-element-name">${text.arr[i].type}</div>` +
+                                `<div class="imageBlock"></div>` +
+                                `<img class="picker-image" src="${text.arr[i]["thumb"]}" onerror="this.style.display='none'"></img>` +
+                            `</a>`
                         }
                         eid("picker-download").classList.remove("visible");
                         break;

src/localization/languages/ru.json

@@ -85,7 +85,7 @@
         "ModeToggleAudio": "аудио режим",
         "SettingsDisableNotifications": "cкрыть уведомления",
         "MediaPickerTitle": "выбери, что сохранить",
-        "MediaPickerExplanationPC": "кликни, чтобы скачать. также можно скачать через контекстное меню правой кнопки мыши.",
+        "MediaPickerExplanationPC": "кликни то, что хочешь скачать. также можно скачать правой кнопки мыши.",
         "MediaPickerExplanationPhone": "нажми, или нажми и удерживай, чтобы скачать.",
         "MediaPickerExplanationPhoneIOS": "нажми и удерживай, затем скрой превью и выбери \"загрузить файл по ссылке\", чтобы скачать.",
         "TwitterSpaceWasntRecorded": "мне нечего скачать, так как этот twitter space не был записан. попробуй другой!",

src/modules/processing/services/instagram.js

@@ -38,14 +38,12 @@ export default async function(obj) {
         data = false;
     }
 
-
     if (!data) return { error: 'ErrorCouldntFetch' };
 
     let single, multiple = [];
     const sidecar = data?.shortcode_media?.edge_sidecar_to_children;
     if (sidecar) {
         sidecar.edges.forEach(e => {
-            // todo: allow downloading images once frontend supports it
             if (e.node?.is_video) {
                 multiple.push({
                     type: "video",
@@ -58,6 +56,17 @@ export default async function(obj) {
                     }),
                     url: e.node?.video_url
                 })
+            } else {
+                multiple.push({
+                    type: "photo",
+                    thumb: createStream({
+                        service: "instagram",
+                        type: "default",
+                        u: e.node?.display_url,
+                        filename: "image.jpg"
+                    }),
+                    url: e.node?.display_url
+                })
             }
         })
     } else if (data?.shortcode_media?.video_url) {

src/test/tests.json

@@ -850,6 +850,14 @@
         }
     }],
     "instagram": [{
+        "name": "various picker (photos + video)",
+        "url": "https://www.instagram.com/p/CvYrSgnsKjv/",
+        "params": {},
+        "expected": {
+            "code": 200,
+            "status": "picker"
+        }
+    }, {
         "name": "reel",
         "url": "https://www.instagram.com/reel/CoEBV3eM4QR/",
         "params": {},