AI Assistant
427 lines
14 KiB
JavaScript
427 lines
14 KiB
JavaScript
const statusBar = document.getElementById("statusBar");
|
|
const statusLabel = document.getElementById("statusLabel");
|
|
const searchForm = document.getElementById("searchForm");
|
|
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");
|
|
const downloadForm = document.getElementById("downloadForm");
|
|
const downloadUrl = document.getElementById("downloadUrl");
|
|
const downloadResult = document.getElementById("downloadResult");
|
|
const cardTemplate = document.getElementById("searchCardTemplate");
|
|
const previewModal = document.getElementById("previewModal");
|
|
const previewMediaFrame = document.getElementById("previewMediaFrame");
|
|
const previewTitle = document.getElementById("previewTitle");
|
|
const previewVideo = document.getElementById("previewVideo");
|
|
const previewThumbnail = document.getElementById("previewThumbnail");
|
|
const previewDuration = document.getElementById("previewDuration");
|
|
const qualitySelect = document.getElementById("qualitySelect");
|
|
const confirmDownload = document.getElementById("confirmDownload");
|
|
const closePreviewModal = document.getElementById("closePreviewModal");
|
|
const rangeSummary = document.getElementById("rangeSummary");
|
|
const rangeFill = document.getElementById("rangeFill");
|
|
const startThumb = document.getElementById("startThumb");
|
|
const endThumb = document.getElementById("endThumb");
|
|
const startLabel = document.getElementById("startLabel");
|
|
const endLabel = document.getElementById("endLabel");
|
|
const setStartFromPreview = document.getElementById("setStartFromPreview");
|
|
const setEndFromPreview = document.getElementById("setEndFromPreview");
|
|
|
|
let pendingDownload = null;
|
|
let cropStart = 0;
|
|
let cropEnd = 0;
|
|
let cropMax = 0;
|
|
let activeThumb = null;
|
|
const activePlatforms = new Set(["envato", "artgrid", "google video"]);
|
|
const hlsInstances = new WeakMap();
|
|
|
|
function setStatus(label, progress) {
|
|
statusLabel.textContent = label;
|
|
statusBar.style.width = `${Math.max(0, Math.min(100, progress))}%`;
|
|
}
|
|
|
|
function toClock(totalSeconds) {
|
|
const seconds = Math.max(0, Math.floor(Number(totalSeconds) || 0));
|
|
const hours = String(Math.floor(seconds / 3600)).padStart(2, "0");
|
|
const minutes = String(Math.floor((seconds % 3600) / 60)).padStart(2, "0");
|
|
const secs = String(seconds % 60).padStart(2, "0");
|
|
return `${hours}:${minutes}:${secs}`;
|
|
}
|
|
|
|
function syncRanges() {
|
|
let start = cropStart;
|
|
let end = cropEnd;
|
|
if (start > end) {
|
|
if (activeThumb === "start") {
|
|
end = start;
|
|
} else {
|
|
start = end;
|
|
}
|
|
}
|
|
cropStart = start;
|
|
cropEnd = end;
|
|
const startPct = cropMax > 0 ? (cropStart / cropMax) * 100 : 0;
|
|
const endPct = cropMax > 0 ? (cropEnd / cropMax) * 100 : 0;
|
|
startThumb.style.left = `calc(${startPct}% - 10px)`;
|
|
endThumb.style.left = `calc(${endPct}% - 10px)`;
|
|
rangeFill.style.left = `${startPct}%`;
|
|
rangeFill.style.width = `${Math.max(0, endPct - startPct)}%`;
|
|
rangeSummary.textContent = `${toClock(start)} - ${toClock(end)}`;
|
|
startLabel.textContent = `Start ${toClock(start)}`;
|
|
endLabel.textContent = `End ${toClock(end)}`;
|
|
}
|
|
|
|
function renderQueryVariants(queries = []) {
|
|
queryVariants.innerHTML = "";
|
|
if (!queries.length) {
|
|
queryVariants.classList.add("hidden");
|
|
return;
|
|
}
|
|
for (const item of queries) {
|
|
const badge = document.createElement("span");
|
|
badge.className = "rounded-full border border-white/10 bg-white/[0.03] px-3 py-1 text-xs uppercase tracking-[0.18em] text-zinc-300";
|
|
badge.textContent = item;
|
|
queryVariants.appendChild(badge);
|
|
}
|
|
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`);
|
|
socket.addEventListener("message", (event) => {
|
|
const payload = JSON.parse(event.data);
|
|
if (payload.event !== "progress") {
|
|
return;
|
|
}
|
|
const data = payload.data;
|
|
const label = data.status || `${data.type || "task"} in progress`;
|
|
setStatus(label, Number(data.progress ?? 0));
|
|
if (data.type === "upload" && data.status === "completed") {
|
|
uploadResult.textContent = `${data.filename} saved successfully`;
|
|
}
|
|
if (data.type === "download" && data.status === "completed") {
|
|
downloadResult.textContent = data.output || "download completed";
|
|
}
|
|
if (data.status === "error") {
|
|
downloadResult.textContent = data.message || "task failed";
|
|
}
|
|
});
|
|
socket.addEventListener("close", () => {
|
|
setTimeout(connectWS, 1000);
|
|
});
|
|
}
|
|
|
|
async function api(path, options = {}) {
|
|
const response = await fetch(path, options);
|
|
const data = await response.json().catch(() => ({}));
|
|
if (!response.ok) {
|
|
const error = new Error(data.error || "request failed");
|
|
error.status = response.status;
|
|
error.data = data;
|
|
throw error;
|
|
}
|
|
return data;
|
|
}
|
|
|
|
function attachVideoSource(video, src) {
|
|
detachVideoSource(video);
|
|
if (!src) {
|
|
return;
|
|
}
|
|
if (src.endsWith(".m3u8") && window.Hls && window.Hls.isSupported()) {
|
|
const hls = new window.Hls({ enableWorker: false });
|
|
hls.loadSource(src);
|
|
hls.attachMedia(video);
|
|
hlsInstances.set(video, hls);
|
|
return;
|
|
}
|
|
video.src = src;
|
|
}
|
|
|
|
function detachVideoSource(video) {
|
|
const existing = hlsInstances.get(video);
|
|
if (existing) {
|
|
existing.destroy();
|
|
hlsInstances.delete(video);
|
|
}
|
|
video.removeAttribute("src");
|
|
video.load();
|
|
}
|
|
|
|
function renderResults(results) {
|
|
searchResults.innerHTML = "";
|
|
if (!results.length) {
|
|
searchResults.innerHTML = `<div class="rounded-3xl border border-white/10 bg-black/30 p-5 text-sm text-zinc-400">No results matched the current search sources.</div>`;
|
|
return;
|
|
}
|
|
for (const item of results) {
|
|
const node = cardTemplate.content.firstElementChild.cloneNode(true);
|
|
const image = node.querySelector("img");
|
|
const previewVideo = node.querySelector(".preview-hover");
|
|
const overlays = node.querySelectorAll(".preview-overlay");
|
|
node.href = item.link;
|
|
image.src = item.thumbnailUrl || "https://placehold.co/1280x720/0a0a0a/ffffff?text=Preview";
|
|
image.alt = item.title;
|
|
node.querySelector("h3").textContent = item.title;
|
|
node.querySelector("p").textContent = item.reason;
|
|
node.querySelector(".source-badge").textContent = item.source;
|
|
if (item.previewVideoUrl) {
|
|
attachVideoSource(previewVideo, item.previewVideoUrl);
|
|
previewVideo.poster = item.thumbnailUrl || "";
|
|
const mediaArea = node.querySelector(".relative");
|
|
mediaArea.addEventListener("mouseenter", () => {
|
|
overlays.forEach((overlay) => overlay.classList.add("hidden"));
|
|
previewVideo.classList.remove("hidden");
|
|
previewVideo.play().catch(() => {});
|
|
});
|
|
mediaArea.addEventListener("mouseleave", () => {
|
|
previewVideo.pause();
|
|
previewVideo.currentTime = 0;
|
|
previewVideo.classList.add("hidden");
|
|
overlays.forEach((overlay) => overlay.classList.remove("hidden"));
|
|
});
|
|
}
|
|
searchResults.appendChild(node);
|
|
}
|
|
}
|
|
|
|
searchForm.addEventListener("submit", async (event) => {
|
|
event.preventDefault();
|
|
setStatus("preparing search", 5);
|
|
searchWarning.classList.add("hidden");
|
|
try {
|
|
const data = await api("/api/search", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ query: searchQuery.value, platforms: Array.from(activePlatforms) }),
|
|
});
|
|
renderResults(data.results || []);
|
|
renderQueryVariants(data.queries || []);
|
|
if (data.warning) {
|
|
searchWarning.textContent = data.warning;
|
|
searchWarning.classList.remove("hidden");
|
|
}
|
|
setStatus("search complete", 100);
|
|
} catch (error) {
|
|
searchWarning.textContent = error.message;
|
|
searchWarning.classList.remove("hidden");
|
|
renderQueryVariants([]);
|
|
setStatus("search failed", 100);
|
|
}
|
|
});
|
|
|
|
async function uploadFile(file) {
|
|
const formData = new FormData();
|
|
formData.append("file", file);
|
|
uploadResult.textContent = "uploading...";
|
|
try {
|
|
await api("/api/upload", { method: "POST", body: formData });
|
|
} catch (error) {
|
|
uploadResult.textContent = error.message;
|
|
}
|
|
}
|
|
|
|
function openPreviewModal(preview) {
|
|
previewTitle.textContent = preview.title;
|
|
previewThumbnail.src = preview.thumbnail;
|
|
previewThumbnail.alt = preview.title;
|
|
previewVideo.pause();
|
|
detachVideoSource(previewVideo);
|
|
previewMediaFrame.style.aspectRatio = "";
|
|
if (preview.previewStreamUrl) {
|
|
attachVideoSource(previewVideo, preview.previewStreamUrl);
|
|
previewVideo.classList.remove("hidden");
|
|
previewThumbnail.classList.add("hidden");
|
|
} else {
|
|
previewVideo.classList.add("hidden");
|
|
previewThumbnail.classList.remove("hidden");
|
|
}
|
|
previewDuration.textContent = preview.duration;
|
|
qualitySelect.innerHTML = "";
|
|
for (const item of preview.qualities || []) {
|
|
const option = document.createElement("option");
|
|
option.value = item.value;
|
|
option.textContent = item.label;
|
|
qualitySelect.appendChild(option);
|
|
}
|
|
cropMax = Number(preview.durationSeconds || 0);
|
|
cropStart = 0;
|
|
cropEnd = cropMax;
|
|
syncRanges();
|
|
previewModal.classList.remove("hidden");
|
|
previewModal.classList.add("flex");
|
|
}
|
|
|
|
function closeModal() {
|
|
previewVideo.pause();
|
|
detachVideoSource(previewVideo);
|
|
previewMediaFrame.style.aspectRatio = "";
|
|
previewModal.classList.add("hidden");
|
|
previewModal.classList.remove("flex");
|
|
cropStart = 0;
|
|
cropEnd = 0;
|
|
cropMax = 0;
|
|
syncRanges();
|
|
pendingDownload = null;
|
|
}
|
|
|
|
dropzone.addEventListener("dragover", (event) => {
|
|
event.preventDefault();
|
|
dropzone.classList.add("border-white/60", "bg-white/[0.08]");
|
|
});
|
|
|
|
dropzone.addEventListener("dragleave", () => {
|
|
dropzone.classList.remove("border-white/60", "bg-white/[0.08]");
|
|
});
|
|
|
|
dropzone.addEventListener("drop", async (event) => {
|
|
event.preventDefault();
|
|
dropzone.classList.remove("border-white/60", "bg-white/[0.08]");
|
|
const file = event.dataTransfer.files[0];
|
|
if (file) {
|
|
await uploadFile(file);
|
|
}
|
|
});
|
|
|
|
fileInput.addEventListener("change", async () => {
|
|
const [file] = fileInput.files;
|
|
if (file) {
|
|
await uploadFile(file);
|
|
}
|
|
});
|
|
|
|
downloadForm.addEventListener("submit", async (event) => {
|
|
event.preventDefault();
|
|
downloadResult.textContent = "checking duplicate history...";
|
|
try {
|
|
const dup = await api(`/api/history/check?url=${encodeURIComponent(downloadUrl.value)}`);
|
|
let force = false;
|
|
if (dup.exists) {
|
|
force = window.confirm("동일 URL 다운로드 이력이 있습니다. 계속 진행할까요?");
|
|
if (!force) {
|
|
downloadResult.textContent = "cancelled";
|
|
return;
|
|
}
|
|
}
|
|
pendingDownload = { url: downloadUrl.value, force };
|
|
downloadResult.textContent = "loading preview...";
|
|
const preview = await api("/api/download/preview", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ url: downloadUrl.value }),
|
|
});
|
|
openPreviewModal(preview);
|
|
downloadResult.textContent = "preview loaded";
|
|
} catch (error) {
|
|
downloadResult.textContent = error.message;
|
|
}
|
|
});
|
|
|
|
confirmDownload.addEventListener("click", async () => {
|
|
if (!pendingDownload) {
|
|
return;
|
|
}
|
|
try {
|
|
const data = await api("/api/download", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
url: pendingDownload.url,
|
|
start: toClock(cropStart),
|
|
end: toClock(cropEnd),
|
|
quality: qualitySelect.value,
|
|
force: pendingDownload.force,
|
|
}),
|
|
});
|
|
closeModal();
|
|
downloadResult.textContent = data.message;
|
|
} catch (error) {
|
|
downloadResult.textContent = error.message;
|
|
}
|
|
});
|
|
|
|
closePreviewModal.addEventListener("click", closeModal);
|
|
previewModal.addEventListener("click", (event) => {
|
|
if (event.target === previewModal) {
|
|
closeModal();
|
|
}
|
|
});
|
|
setStartFromPreview.addEventListener("click", () => {
|
|
cropStart = Math.floor(previewVideo.currentTime || 0);
|
|
activeThumb = "start";
|
|
syncRanges();
|
|
});
|
|
setEndFromPreview.addEventListener("click", () => {
|
|
cropEnd = Math.floor(previewVideo.currentTime || 0);
|
|
activeThumb = "end";
|
|
syncRanges();
|
|
});
|
|
for (const [thumb, name] of [[startThumb, "start"], [endThumb, "end"]]) {
|
|
thumb.addEventListener("pointerdown", (event) => {
|
|
event.preventDefault();
|
|
activeThumb = name;
|
|
thumb.setPointerCapture(event.pointerId);
|
|
});
|
|
thumb.addEventListener("pointermove", (event) => {
|
|
if (activeThumb !== name || cropMax <= 0) {
|
|
return;
|
|
}
|
|
const track = thumb.parentElement.getBoundingClientRect();
|
|
const ratio = Math.max(0, Math.min(1, (event.clientX - track.left) / track.width));
|
|
const value = Math.round(ratio * cropMax);
|
|
if (name === "start") {
|
|
cropStart = value;
|
|
} else {
|
|
cropEnd = value;
|
|
}
|
|
syncRanges();
|
|
});
|
|
thumb.addEventListener("pointerup", () => {
|
|
activeThumb = null;
|
|
});
|
|
}
|
|
previewVideo.addEventListener("loadedmetadata", () => {
|
|
if (previewVideo.videoWidth > 0 && previewVideo.videoHeight > 0) {
|
|
previewMediaFrame.style.aspectRatio = `${previewVideo.videoWidth} / ${previewVideo.videoHeight}`;
|
|
}
|
|
});
|
|
previewThumbnail.addEventListener("load", () => {
|
|
if (!previewVideo.src && previewThumbnail.naturalWidth > 0 && previewThumbnail.naturalHeight > 0) {
|
|
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();
|
|
setStatus(`active platforms: ${Array.from(activePlatforms).join(", ")}`, 0);
|
|
});
|
|
}
|
|
|
|
connectWS();
|
|
syncPlatformButtons();
|
|
setStatus(`active platforms: ${Array.from(activePlatforms).join(", ")}`, 0);
|