Create bridge.js

For autosaving mp4 to 1hit.no from WanGP

bridge.js

@@ -0,0 +1,289 @@
+(() => {
+  // Clean up an earlier copy
+  window.oneHitBridge?.close?.();
+  document.getElementById("onehit-mp4-popup")?.remove();
+
+  // Remember processed URLs during this browser page session
+  const sent = window.__oneHitSent || (window.__oneHitSent = {
+    add: new Set(),
+    sub: new Set()
+  });
+
+  let currentUrl = "";
+  let autoSend = false;
+  let busy = false;
+  let maximized = false;
+
+  const popup = document.createElement("div");
+  popup.id = "onehit-mp4-popup";
+  popup.style.cssText = `
+    position:fixed;right:20px;bottom:20px;width:390px;
+    z-index:2147483647;background:#17191f;color:white;
+    border:1px solid #555;border-radius:10px;
+    box-shadow:0 5px 25px #0009;font:13px Arial,sans-serif;
+    overflow:hidden;
+  `;
+
+  popup.innerHTML = `
+    <div id="oh-head" style="
+      display:flex;align-items:center;justify-content:space-between;
+      padding:12px;background:#292d38;cursor:move;user-select:none">
+      <strong>🎬 1hit MP4 Bridge</strong>
+      <div style="display:flex;gap:5px">
+        <button id="oh-min">—</button>
+        <button id="oh-max">□</button>
+        <button id="oh-close">✕</button>
+      </div>
+    </div>
+
+    <div id="oh-content" style="padding:14px">
+      <div id="oh-status" style="color:#aaa;margin-bottom:8px">
+        Looking for MP4 videos...
+      </div>
+
+      <textarea id="oh-url" readonly placeholder="Waiting for MP4..."
+        style="box-sizing:border-box;width:100%;height:65px;
+        background:#252832;color:white;border:1px solid #555;
+        border-radius:5px;padding:8px;resize:vertical"></textarea>
+
+      <div style="display:flex;align-items:center;gap:10px;margin-top:12px">
+        <label style="flex:1">
+          Endpoint
+          <select id="oh-endpoint" style="
+            display:block;width:100%;margin-top:4px;padding:8px;
+            background:#252832;color:white;border:1px solid #555;border-radius:5px">
+            <option value="add">add.php</option>
+            <option value="sub">sub.php</option>
+          </select>
+        </label>
+
+        <label style="display:flex;align-items:center;gap:6px;padding-top:17px;cursor:pointer">
+          <input id="oh-auto" type="checkbox">
+          AUTO SEND
+        </label>
+      </div>
+
+      <button id="oh-send" style="
+        width:100%;margin-top:12px;padding:10px;
+        background:#2863a0;color:white;border:0;border-radius:5px;cursor:pointer">
+        Send current MP4
+      </button>
+
+      <div id="oh-count" style="color:#999;margin-top:8px;font-size:11px"></div>
+
+      <div id="oh-footer" style="
+        display:flex;justify-content:space-between;align-items:center;
+        flex-wrap:wrap;gap:8px;border-top:1px solid #444;
+        margin-top:12px;padding-top:10px;font-size:12px">
+        <a href="https://1hit.no/kaggle" target="_blank" rel="noopener"
+          style="color:#70b8ff;text-decoration:none">↗ 1hit.no/kaggle</a>
+        <a href="https://chatgpt.com" target="_blank" rel="noopener"
+          style="color:#aaa;text-decoration:none">Built with ChatGPT ↗</a>
+      </div>
+    </div>
+  `;
+
+  document.body.appendChild(popup);
+
+  const $ = id => popup.querySelector("#oh-" + id);
+  const status = $("status");
+  const urlBox = $("url");
+
+  function updateUI() {
+    const endpoint = $("endpoint").value;
+    const done = currentUrl && sent[endpoint].has(currentUrl);
+
+    $("send").disabled = !currentUrl || done || busy;
+    $("send").textContent = done
+      ? "Already sent ✓"
+      : endpoint === "add" ? "Send to add.php" : "Send to sub.php";
+
+    $("send").style.opacity = $("send").disabled ? ".5" : "1";
+
+    $("count").textContent =
+      `Remembered: ${sent.add.size} add.php · ${sent.sub.size} sub.php`;
+  }
+
+  async function sendCurrent(automatic = false) {
+    const url = currentUrl;
+    const endpoint = $("endpoint").value;
+
+    if (!url || busy || sent[endpoint].has(url)) return;
+
+    busy = true;
+    updateUI();
+
+    status.textContent = `Sending to ${endpoint}.php...`;
+    status.style.color = "#f0c674";
+
+    try {
+      let request;
+
+      if (endpoint === "add") {
+        request = fetch(
+          "https://1hit.no/kaggle/add.php/?url=" + encodeURIComponent(url),
+          { method: "GET", mode: "no-cors" }
+        );
+      } else {
+        request = fetch("https://1hit.no/kaggle/sub.php", {
+          method: "POST",
+          mode: "no-cors",
+          headers: {
+            "Content-Type": "text/plain;charset=UTF-8"
+          },
+          body: JSON.stringify({
+            url,
+            client_id: "Wan2GP-Kaggle"
+          })
+        });
+      }
+
+      await request;
+
+      // The no-cors response cannot confirm server-side completion.
+      sent[endpoint].add(url);
+
+      status.textContent = automatic
+        ? `AUTO: request sent to ${endpoint}.php ✓`
+        : `Request sent to ${endpoint}.php ✓`;
+
+      status.style.color = "#70d99a";
+    } catch (error) {
+      status.textContent = `Request failed: ${error.message}`;
+      status.style.color = "#ff7777";
+    } finally {
+      busy = false;
+      updateUI();
+    }
+  }
+
+  function findVideos() {
+    const urls = [...document.querySelectorAll("video")]
+      .map(v => v.currentSrc || v.src || v.querySelector("source")?.src || "")
+      .filter(url =>
+        /^https:\/\//i.test(url) &&
+        /\.mp4(?:[?#]|$)/i.test(url)
+      );
+
+    const best =
+      urls.find(url => url.includes("/gradio_api/file=")) ||
+      urls.at(-1);
+
+    if (best && best !== currentUrl) {
+      currentUrl = best;
+      urlBox.value = best;
+
+      status.textContent = "New MP4 detected ✓";
+      status.style.color = "#70d99a";
+
+      updateUI();
+
+      if (autoSend) sendCurrent(true);
+    }
+  }
+
+  // AUTO SEND toggle
+  $("auto").onchange = () => {
+    autoSend = $("auto").checked;
+
+    status.textContent = autoSend
+      ? "AUTO SEND enabled — scanning every 10 seconds."
+      : "AUTO SEND disabled — manual mode.";
+
+    status.style.color = autoSend ? "#70d99a" : "#aaa";
+  };
+
+  $("endpoint").onchange = updateUI;
+  $("send").onclick = () => sendCurrent(false);
+
+  // Minimize / restore
+  $("min").onclick = () => {
+    const content = $("content");
+    const hidden = content.style.display === "none";
+
+    content.style.display = hidden ? "block" : "none";
+    $("min").textContent = hidden ? "—" : "+";
+  };
+
+  // Maximize / restore
+  $("max").onclick = () => {
+    maximized = !maximized;
+
+    if (maximized) {
+      popup.dataset.oldStyle = JSON.stringify({
+        width: popup.style.width,
+        height: popup.style.height,
+        top: popup.style.top,
+        left: popup.style.left,
+        right: popup.style.right,
+        bottom: popup.style.bottom,
+        borderRadius: popup.style.borderRadius
+      });
+
+      popup.style.width = "min(700px, calc(100vw - 30px))";
+      popup.style.height = "min(85vh, 750px)";
+      popup.style.top = "50%";
+      popup.style.left = "50%";
+      popup.style.right = "auto";
+      popup.style.bottom = "auto";
+      popup.style.transform = "translate(-50%, -50%)";
+
+      $("content").style.overflow = "auto";
+      $("content").style.maxHeight = "calc(85vh - 50px)";
+      $("max").textContent = "❐";
+    } else {
+      const old = JSON.parse(popup.dataset.oldStyle || "{}");
+      Object.assign(popup.style, old);
+      popup.style.transform = "";
+
+      $("content").style.maxHeight = "";
+      $("max").textContent = "□";
+    }
+  };
+
+  // Drag using the header
+  let drag = null;
+
+  $("head").addEventListener("pointerdown", e => {
+    if (e.target.closest("button") || maximized) return;
+
+    const rect = popup.getBoundingClientRect();
+
+    drag = {
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top
+    };
+
+    $("head").setPointerCapture(e.pointerId);
+  });
+
+  $("head").addEventListener("pointermove", e => {
+    if (!drag) return;
+
+    popup.style.left = `${e.clientX - drag.x}px`;
+    popup.style.top = `${e.clientY - drag.y}px`;
+    popup.style.right = "auto";
+    popup.style.bottom = "auto";
+  });
+
+  $("head").addEventListener("pointerup", () => drag = null);
+  $("head").addEventListener("pointercancel", () => drag = null);
+
+  // Scan immediately, then every 10 seconds
+  findVideos();
+  const timer = setInterval(findVideos, 10000);
+
+  $("close").onclick = () => {
+    clearInterval(timer);
+    popup.remove();
+    delete window.oneHitBridge;
+  };
+
+  window.oneHitBridge = {
+    scan: findVideos,
+    close: () => $("close").click(),
+    sent
+  };
+
+  updateUI();
+})();