savethenurse/ai-media-hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Migrate search to Vertex AI and enhance preview modal
All checks were successful
build-push / docker (push) Successful in 4m1s
Details

Browse Source
This commit is contained in:
AI Assistant
2026-03-12 16:31:45 +09:00
parent af6deb885c
commit 5b53cc6e11
7 changed files with 170 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/app.js
View File

@@ -15,6 +15,7 @@ const downloadResult = document.getElementById("downloadResult");
const cardTemplate = document.getElementById("searchCardTemplate");
const previewModal = document.getElementById("previewModal");
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");
@@ -117,6 +118,17 @@ function openPreviewModal(preview) {
previewTitle.textContent = preview.title;
previewThumbnail.src = preview.thumbnail;
previewThumbnail.alt = preview.title;
previewVideo.pause();
previewVideo.removeAttribute("src");
previewVideo.load();
if (preview.previewStreamUrl) {
previewVideo.src = 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 || []) {
@@ -132,6 +144,9 @@ function openPreviewModal(preview) {
}
function closeModal() {
previewVideo.pause();
previewVideo.removeAttribute("src");
previewVideo.load();
previewModal.classList.add("hidden");
previewModal.classList.remove("flex");
pendingDownload = null;

15
frontend/index.html
View File

@@ -60,10 +60,6 @@
<h2 class="text-xl font-semibold text-white">Direct Downloader & Crop</h2>
<form id="downloadForm" class="mt-4 space-y-3">
<input id="downloadUrl" type="url" placeholder="https://..." class="w-full rounded-2xl border border-white/10 bg-black/40 px-4 py-3 text-sm text-white placeholder:text-zinc-500" />
<div class="grid grid-cols-2 gap-3">
<input id="startTime" type="text" value="00:00:00" class="rounded-2xl border border-white/10 bg-black/40 px-4 py-3 text-sm text-white" />
<input id="endTime" type="text" value="00:00:00" class="rounded-2xl border border-white/10 bg-black/40 px-4 py-3 text-sm text-white" />
</div>
<button class="w-full rounded-2xl border border-white px-5 py-3 text-sm font-medium text-white transition hover:bg-white hover:text-black">Preview & Queue</button>
</form>
<p id="downloadResult" class="mt-3 text-sm text-zinc-400"></p>
@@ -83,6 +79,7 @@
</div>
<div class="mt-5 grid gap-5 md:grid-cols-[1.1fr_0.9fr]">
<div class="overflow-hidden rounded-3xl border border-white/10 bg-black/30">
<video id="previewVideo" class="hidden aspect-video h-full w-full bg-black object-cover" controls playsinline></video>
<img id="previewThumbnail" class="aspect-video h-full w-full object-cover" alt="" />
</div>
<div class="space-y-4">
@@ -92,6 +89,16 @@
<span id="previewDuration"></span>
</div>
</div>
<div class="grid grid-cols-2 gap-3">
<label class="block space-y-2">
<span class="text-sm text-zinc-400">Start</span>
<input id="startTime" type="text" value="00:00:00" class="w-full rounded-2xl border border-white/10 bg-black/40 px-4 py-3 text-sm text-white" />
</label>
<label class="block space-y-2">
<span class="text-sm text-zinc-400">End</span>
<input id="endTime" type="text" value="00:00:00" class="w-full rounded-2xl border border-white/10 bg-black/40 px-4 py-3 text-sm text-white" />
</label>
</div>
<label class="block space-y-2">
<span class="text-sm text-zinc-400">Quality</span>
<select id="qualitySelect" class="w-full rounded-2xl border border-white/10 bg-black/40 px-4 py-3 text-sm text-white"></select>