()
| 3955 | && bytes <= maxVideoPreviewBytes; |
| 3956 | |
| 3957 | const renderRemoteVideoPreview = () => { |
| 3958 | if (!isStillActive()) return; |
| 3959 | |
| 3960 | const previewUrl = apiFileUrl(folder, file.name, true, sourceId); |
| 3961 | thumbEl.innerHTML = ""; |
| 3962 | thumbEl.style.minHeight = "140px"; |
| 3963 | thumbEl.style.position = "relative"; |
| 3964 | |
| 3965 | const video = document.createElement("video"); |
| 3966 | video.muted = true; |
| 3967 | video.playsInline = true; |
| 3968 | video.preload = "metadata"; |
| 3969 | video.src = previewUrl; |
| 3970 | video.style.maxWidth = "200px"; |
| 3971 | video.style.maxHeight = "120px"; |
| 3972 | video.style.display = "block"; |
| 3973 | video.style.borderRadius = "6px"; |
| 3974 | video.style.background = "rgba(0,0,0,0.15)"; |
| 3975 | video.setAttribute("aria-label", file.name); |
| 3976 | |
| 3977 | video.addEventListener("loadedmetadata", () => { |
| 3978 | try { |
| 3979 | video.currentTime = 0.1; |
| 3980 | } catch (e) { /* ignore */ } |
| 3981 | }, { once: true }); |
| 3982 | |
| 3983 | video.addEventListener("error", () => { |
| 3984 | renderVideoFallbackMessage(); |
| 3985 | }, { once: true }); |
| 3986 | |
| 3987 | thumbEl.appendChild(video); |
| 3988 | |
| 3989 | const overlay = document.createElement("span"); |
| 3990 | overlay.className = "material-icons"; |
| 3991 | overlay.textContent = "play_circle"; |
| 3992 | overlay.style.position = "absolute"; |
| 3993 | overlay.style.left = "50%"; |
| 3994 | overlay.style.top = "50%"; |
| 3995 | overlay.style.transform = "translate(-50%, -50%)"; |
| 3996 | overlay.style.fontSize = "1.6rem"; |
| 3997 | overlay.style.opacity = "0.85"; |
| 3998 | overlay.style.color = "rgba(255,255,255,0.9)"; |
| 3999 | overlay.style.textShadow = "0 2px 6px rgba(0,0,0,0.5)"; |
| 4000 | overlay.style.pointerEvents = "none"; |
| 4001 | thumbEl.appendChild(overlay); |
| 4002 | }; |
| 4003 | |
| 4004 | if (isRemoteSource) { |
| 4005 | if (canStreamRemotePreview) { |
no test coverage detected