WanGPT-Injection / injection.js
haraberget's picture
Update injection.js
beb9575 verified
Raw History Blame Contribute Delete
8.45 kB
(() => {
// 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();
})();