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

Hide overlays during hover preview
build-push / docker (push) Successful in 4m29s
Details

Browse Source
This commit is contained in:
AI Assistant
2026-03-13 15:40:11 +09:00
parent b78865d4bf
commit 27000dbf28
2 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app.js
+3
View File
@@ -135,6 +135,7 @@ function renderResults(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;
@@ -145,6 +146,7 @@ function renderResults(results) {
previewVideo.src = item.previewVideoUrl;
previewVideo.poster = item.thumbnailUrl || "";
node.addEventListener("mouseenter", () => {
overlays.forEach((overlay) => overlay.classList.add("hidden"));
previewVideo.classList.remove("hidden");
previewVideo.play().catch(() => {});
});
@@ -152,6 +154,7 @@ function renderResults(results) {
previewVideo.pause();
previewVideo.currentTime = 0;
previewVideo.classList.add("hidden");
overlays.forEach((overlay) => overlay.classList.remove("hidden"));
});
}
searchResults.appendChild(node);
frontend/index.html
+3 -3
View File
@@ -129,8 +129,8 @@
<div class="relative aspect-video overflow-hidden bg-zinc-900">
<img class="h-full w-full object-cover transition duration-500 group-hover:scale-105" alt="" />
<video class="preview-hover absolute inset-0 hidden h-full w-full object-cover" muted loop playsinline preload="none"></video>
<div class="absolute left-3 top-3 rounded-full border border-white/20 bg-black/60 px-3 py-1 text-[11px] uppercase tracking-[0.25em] text-white">AI Recommended</div>
<div class="source-badge absolute bottom-3 left-3 rounded-full bg-white px-3 py-1 text-[11px] font-medium uppercase tracking-[0.2em] text-black"></div>
<div class="preview-overlay absolute left-3 top-3 rounded-full border border-white/20 bg-black/60 px-3 py-1 text-[11px] uppercase tracking-[0.25em] text-white">AI Recommended</div>
<div class="source-badge preview-overlay absolute bottom-3 left-3 rounded-full bg-white px-3 py-1 text-[11px] font-medium uppercase tracking-[0.2em] text-black"></div>
</div>
<div class="space-y-2 p-5">
<h3 class="line-clamp-2 text-base font-medium text-white"></h3>
@@ -139,6 +139,6 @@
</a>
</template>
<script src="/app.js?v=20260313e" defer></script>
<script src="/app.js?v=20260313f" defer></script>
</body>
</html>