Add source filters and a full-window media view

poc/public/media.js

@@ -18,7 +18,8 @@
         items: [],
         scrapes: [],
         channels: [],
-        loadedChannels: false
+        loadedChannels: false,
+        filters: { source: "", channelId: "" }
     };
 
     const overlay = document.createElement("div");
@@ -63,8 +64,18 @@
         return node;
     }
 
+    /** Start the view below the header and the call strip, filling the rest. */
+    function layoutTop() {
+        const header = document.querySelector(".vk-header");
+        const callStrip = document.querySelector("#call-strip");
+        let top = header ? header.getBoundingClientRect().bottom : 0;
+        if (callStrip && !callStrip.hidden) top = Math.max(top, callStrip.getBoundingClientRect().bottom);
+        overlay.style.setProperty("--media-top", `${Math.round(top)}px`);
+    }
+
     function show(view) {
         state.view = view;
+        layoutTop();
         overlay.hidden = false;
         document.querySelector("#scope-media")?.classList.toggle("active", view === "media");
         document.querySelector("#scope-bot")?.classList.toggle("active", view === "bot");
@@ -128,6 +139,7 @@
             setStatus(`media status failed: ${error.message}`);
         }
         renderScrapes();
+        if (state.view === "media") renderToolbar();
     }
 
     async function loadMedia(reset) {
@@ -137,7 +149,11 @@
         }
         try {
             const kind = state.kind === "all" ? "" : `&kind=${state.kind}`;
-            const items = await window.VK.api.get(`/api/media?limit=60&offset=${state.offset}${kind}`);
+            const source = state.filters.source ? `&source=${state.filters.source}` : "";
+            const channel = state.filters.channelId ? `&channelId=${state.filters.channelId}` : "";
+            const items = await window.VK.api.get(
+                `/api/media?limit=60&offset=${state.offset}${kind}${source}${channel}`
+            );
             state.items = state.items.concat(items);
             state.offset += items.length;
             setStatus(`${state.items.length} items loaded`);
@@ -236,6 +252,50 @@
 
             toolbar.append(button("Start links", () => void startScrape("links")));
             toolbar.append(button("Start download", () => void startScrape("download")));
+
+            const sourceSelect = document.createElement("select");
+            sourceSelect.className = "vk-chip vk-chip-off";
+            for (const [value, label] of [
+                ["", "Any source"],
+                ["attachment", "Attachments"],
+                ["sticker", "Stickers"],
+                ["embed", "Embeds"]
+            ]) {
+                const option = document.createElement("option");
+                option.value = value;
+                option.textContent = label;
+                sourceSelect.append(option);
+            }
+            sourceSelect.value = state.filters.source;
+            sourceSelect.addEventListener("change", () => {
+                state.filters.source = sourceSelect.value;
+                void loadMedia(true);
+            });
+            toolbar.append(sourceSelect);
+
+            const channelSelect = document.createElement("select");
+            channelSelect.className = "vk-chip vk-chip-off";
+            const anyChannel = document.createElement("option");
+            anyChannel.value = "";
+            anyChannel.textContent = "Any channel";
+            channelSelect.append(anyChannel);
+
+            const seen = new Set();
+            for (const scrape of state.scrapes) {
+                if (seen.has(scrape.channelId)) continue;
+                seen.add(scrape.channelId);
+                const option = document.createElement("option");
+                option.value = scrape.channelId;
+                option.textContent =
+                    state.channels.find(channel => channel.id === scrape.channelId)?.label ?? scrape.channelId;
+                channelSelect.append(option);
+            }
+            channelSelect.value = state.filters.channelId;
+            channelSelect.addEventListener("change", () => {
+                state.filters.channelId = channelSelect.value;
+                void loadMedia(true);
+            });
+            toolbar.append(channelSelect);
         } else {
             toolbar.append(el("span", null, "Slopbot is the dedicated bot core. Setup: docs/slopbot.md."));
         }
@@ -436,6 +496,17 @@
 
     document.querySelector("#media-clean")?.addEventListener("click", openCleanModal);
 
+    window.addEventListener("resize", () => {
+        if (state.view) layoutTop();
+    });
+
+    const callStrip = document.querySelector("#call-strip");
+    if (callStrip) {
+        new MutationObserver(() => {
+            if (state.view) layoutTop();
+        }).observe(callStrip, { attributes: true, attributeFilter: ["hidden"] });
+    }
+
     const settingsOverlay = document.querySelector("#settings-overlay");
     if (settingsOverlay) {
         new MutationObserver(() => {