Implement sidecar video thumbnails and improved processing UI
- Implemented "sidecar" thumbnail logic: imports video thumbnails from Google Photos as hidden Drive files to display immediately while videos process. - Updated MediaService to serve sidecar thumbnails via server-side Base64 encoding, bypassing CORS restrictions. - Implemented lifecycle management: detects video processing completion to automatically cleanup sidecar files and fallback to native Drive thumbnails. - Enhanced Media Manager UI: added processing warning banner and refined processing tile styling (centered, lighter overlay). - Upgraded Drive API to v3 and improved file creation robustness with Advanced API fallbacks.
This commit is contained in:
Ben Miller
@ -164,25 +164,30 @@
|
||||
/* Processing State */
|
||||
.media-item.processing-card {
|
||||
background-color: #334155 !important;
|
||||
/* Slate-700 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative; /* Ensure absolute children are contained */
|
||||
/* Removed flex centering to let image stretch */
|
||||
}
|
||||
|
||||
.media-item.processing-card .media-content {
|
||||
display: none !important;
|
||||
display: block !important;
|
||||
opacity: 0.8; /* Lighter overlay (was 0.4) */
|
||||
filter: grayscale(30%); /* Less grey (was 80%) */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain; /* Ensure it fills */
|
||||
}
|
||||
|
||||
.processing-icon {
|
||||
font-size: 40px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
bottom: 6px;
|
||||
right: 6px;
|
||||
font-size: 20px; /* Smaller */
|
||||
z-index: 20; /* Above badges */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 5;
|
||||
transition: transform 0.6s ease-in-out;
|
||||
/* Remove fixed width/height so it fits content */
|
||||
}
|
||||
|
||||
/* .flipping removed, handled by JS inline style */
|
||||
@ -454,6 +459,16 @@
|
||||
style="padding:16px; background:#f8fafc; border-bottom:1px solid var(--border); font-family:monospace; font-size:12px; line-height:1.6; display:none;">
|
||||
</div>
|
||||
|
||||
<!-- Processing Warning Banner -->
|
||||
<div id="processing-banner"
|
||||
style="display:none; background-color:#fffbeb; color:#92400e; padding:12px; border-radius:8px; margin: 0 16px 12px 16px; font-size:13px; border:1px solid #fcd34d; align-items:flex-start; gap:8px;">
|
||||
<span style="font-size:16px; line-height:1;">⏳</span>
|
||||
<div>
|
||||
Some videos are still being transcoded by Drive. The video preview might not work yet, but they can still be saved,
|
||||
reordered, or deleted.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="media-grid" class="media-grid">
|
||||
<!-- Rendered Items -->
|
||||
</div>
|
||||
@ -772,6 +787,13 @@
|
||||
var activeCount = items.filter(function (i) { return !i._deleted; }).length;
|
||||
document.getElementById('item-count').innerText = '(' + activeCount + ')';
|
||||
|
||||
// processing check
|
||||
var hasProcessing = items.some(function (i) { return !i._deleted && i.isProcessing; });
|
||||
var banner = document.getElementById('processing-banner');
|
||||
if (banner) {
|
||||
banner.style.display = hasProcessing ? 'flex' : 'none';
|
||||
}
|
||||
|
||||
if (items.length === 0) {
|
||||
this.grid.innerHTML = '<div class="empty-state">No media found. Upload something!</div>';
|
||||
return;
|
||||
@ -889,6 +911,31 @@
|
||||
mediaEl = document.createElement('img');
|
||||
mediaEl.src = item.thumbnail || "";
|
||||
mediaEl.loading = "lazy";
|
||||
mediaEl.referrerPolicy = "no-referrer";
|
||||
mediaEl.onerror = function () {
|
||||
var currentSrc = this.src;
|
||||
console.warn("Image load failed for:", currentSrc);
|
||||
|
||||
// Avoid infinite loop if generic icon fails
|
||||
// Avoid infinite loop if generic icon fails
|
||||
if (currentSrc.startsWith("data:image")) {
|
||||
this.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
// Fallback to generic video icon if it looks like a video
|
||||
if (isVideo) {
|
||||
console.log("Falling back to generic video icon...");
|
||||
// Base64 Video Icon (Blue) to avoid network issues
|
||||
this.src = "data:image/png;base64,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";
|
||||
// Ensure visibility if processing
|
||||
if (item.isProcessing) {
|
||||
this.style.opacity = "0.5";
|
||||
}
|
||||
} else {
|
||||
this.style.display = 'none'; // Hide if failed image
|
||||
}
|
||||
};
|
||||
}
|
||||
mediaEl.className = 'media-content';
|
||||
|
||||
|
||||
Reference in New Issue
Block a user