Tighten source filters and add platform toggles

frontend/app.js

@@ -5,6 +5,7 @@ const searchQuery = document.getElementById("searchQuery");
 const searchResults = document.getElementById("searchResults");
 const searchWarning = document.getElementById("searchWarning");
 const queryVariants = document.getElementById("queryVariants");
+const platformToggles = Array.from(document.querySelectorAll("[data-platform-toggle]"));
 const dropzone = document.getElementById("dropzone");
 const fileInput = document.getElementById("fileInput");
 const uploadResult = document.getElementById("uploadResult");
@@ -35,6 +36,7 @@ let cropStart = 0;
 let cropEnd = 0;
 let cropMax = 0;
 let activeThumb = null;
+const activePlatforms = new Set(["envato", "artgrid", "google video"]);
 
 function setStatus(label, progress) {
   statusLabel.textContent = label;
@@ -87,6 +89,19 @@ function renderQueryVariants(queries = []) {
   queryVariants.classList.remove("hidden");
 }
 
+function syncPlatformButtons() {
+  for (const button of platformToggles) {
+    const platform = button.dataset.platformToggle;
+    const active = activePlatforms.has(platform);
+    button.classList.toggle("bg-white", active);
+    button.classList.toggle("text-black", active);
+    button.classList.toggle("border-white", active);
+    button.classList.toggle("bg-transparent", !active);
+    button.classList.toggle("text-zinc-300", !active);
+    button.classList.toggle("border-white/20", !active);
+  }
+}
+
 function connectWS() {
   const protocol = window.location.protocol === "https:" ? "wss" : "ws";
   const socket = new WebSocket(`${protocol}://${window.location.host}/ws`);
@@ -145,12 +160,13 @@ function renderResults(results) {
     if (item.previewVideoUrl) {
       previewVideo.src = item.previewVideoUrl;
       previewVideo.poster = item.thumbnailUrl || "";
-      node.addEventListener("mouseenter", () => {
+      const mediaArea = node.querySelector(".relative");
+      mediaArea.addEventListener("mouseenter", () => {
         overlays.forEach((overlay) => overlay.classList.add("hidden"));
         previewVideo.classList.remove("hidden");
         previewVideo.play().catch(() => {});
       });
-      node.addEventListener("mouseleave", () => {
+      mediaArea.addEventListener("mouseleave", () => {
         previewVideo.pause();
         previewVideo.currentTime = 0;
         previewVideo.classList.add("hidden");
@@ -169,7 +185,7 @@ searchForm.addEventListener("submit", async (event) => {
     const data = await api("/api/search", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ query: searchQuery.value }),
+      body: JSON.stringify({ query: searchQuery.value, platforms: Array.from(activePlatforms) }),
     });
     renderResults(data.results || []);
     renderQueryVariants(data.queries || []);
@@ -368,6 +384,18 @@ previewThumbnail.addEventListener("load", () => {
     previewMediaFrame.style.aspectRatio = `${previewThumbnail.naturalWidth} / ${previewThumbnail.naturalHeight}`;
   }
 });
+for (const button of platformToggles) {
+  button.addEventListener("click", () => {
+    const platform = button.dataset.platformToggle;
+    if (activePlatforms.has(platform) && activePlatforms.size > 1) {
+      activePlatforms.delete(platform);
+    } else {
+      activePlatforms.add(platform);
+    }
+    syncPlatformButtons();
+  });
+}
 
 connectWS();
+syncPlatformButtons();
 setStatus("idle", 0);