GTA
/
training-academy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

FIX: Move captured videos to primary working video library 

CORRECTED: Video library integration location
- Moved captured videos from setupLibraryVideoTab() (slated for deletion) to populateVideoGallery()
- Now integrates with primary lib-video-gallery system that's confirmed working
- Captured videos appear in the main library video tab as intended

ENHANCED: Primary video gallery display
- Added captured videos to populateVideoGallery() function with proper thumbnails
- Videos show with session recording metadata (date, duration, type)
- Maintains consistent gallery-item styling with linked videos
- Includes action buttons (play, download, delete) directly in gallery

FIXED: Video count display
- Updated lib-video-count to include both linked and captured videos
- Shows accurate total count in library header
- Console logging for debugging video counts

RESULT: Captured videos now appear in correct primary library
- Videos show up in the main working library video gallery
- Consistent with library architecture and cleanup plan
- No longer in deprecated/duplicate gallery systems
This commit is contained in:
dilgenfritz 2025-11-10 10:55:54 -06:00
parent 325a71bf75
commit 18087c372d
1 changed files with 65 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
index.html
View File

@ -4187,31 +4187,6 @@
videoGallery.appendChild(videoElement);
});
// Add captured session videos
const capturedVideos = JSON.parse(localStorage.getItem('capturedVideos') || '[]');
console.log(`📹 Found ${capturedVideos.length} captured session videos`);
capturedVideos.forEach((video, index) => {
const date = new Date(video.timestamp);
const duration = formatVideoDuration(video.duration);
const videoElement = document.createElement('div');
videoElement.className = 'gallery-item captured-video-item';
videoElement.innerHTML = `
<div class="video-info">
<div class="video-icon">📹</div>
<div class="video-name">Session Recording ${index + 1}</div>
<div class="video-type">Captured Video</div>
<div class="video-meta">${date.toLocaleDateString()} - ${duration}</div>
</div>
<div class="video-actions">
<button class="btn-small" onclick="playCapturedVideo('${video.id}')">▶️ Play</button>
<button class="btn-small" onclick="downloadCapturedVideo('${video.id}')">💾 Download</button>
<button class="btn-small btn-danger" onclick="deleteCapturedVideo('${video.id}')">🗑️ Delete</button>
</div>
`;
videoGallery.appendChild(videoElement);
});
// If no categorized videos were added but we have uncategorized videos, add those
if (videoGallery.children.length === 0 && allVideos.length > 0) {
allVideos.forEach((video, index) => {
@ -5893,9 +5868,14 @@
console.log(`🎬 Total videos found: ${allVideos.length}`);
// Include captured videos in count
const capturedVideos = JSON.parse(localStorage.getItem('capturedVideos') || '[]');
const totalVideos = allVideos.length + capturedVideos.length;
const videoCountElement = document.getElementById('lib-video-count');
if (videoCountElement) {
videoCountElement.textContent = `${allVideos.length} videos`;
videoCountElement.textContent = `${totalVideos} videos`;
console.log(`📊 Updated video count: ${totalVideos} (${allVideos.length} linked + ${capturedVideos.length} captured)`);
}
populateVideoGallery(allVideos);
@ -5981,6 +5961,65 @@
});
console.log(`✅ Created ${videos.length} linked video gallery items`);
// Add captured session videos
const capturedVideos = JSON.parse(localStorage.getItem('capturedVideos') || '[]');
console.log(`📹 Found ${capturedVideos.length} captured session videos`);
capturedVideos.forEach((video, index) => {
const date = new Date(video.timestamp);
const duration = formatVideoDuration(video.duration);
const videoElement = document.createElement('div');
videoElement.className = 'gallery-item captured-video-item';
videoElement.innerHTML = `
<div class="video-thumbnail-container">
<video class="video-thumbnail" preload="metadata" muted>
<source src="${video.dataURL}" type="video/webm">
</video>
<div class="video-overlay">
<div class="play-icon">▶️</div>
</div>
<div class="video-fallback" style="display: none;">
<div class="video-icon">📹</div>
</div>
</div>
<div class="video-info">
<div class="video-name">Session Recording ${index + 1}</div>
<div class="video-directory">Captured • ${date.toLocaleDateString()} • ${duration}</div>
</div>
<div class="video-actions">
<button class="btn-small" onclick="playCapturedVideo('${video.id}')">▶️ Play</button>
<button class="btn-small" onclick="downloadCapturedVideo('${video.id}')">💾 Download</button>
<button class="btn-small btn-danger" onclick="deleteCapturedVideo('${video.id}')">🗑️ Delete</button>
</div>
`;
// Handle video thumbnail loading
const videoThumb = videoElement.querySelector('.video-thumbnail');
const fallback = videoElement.querySelector('.video-fallback');
videoThumb.addEventListener('loadedmetadata', function() {
console.log(`✅ Captured video thumbnail loaded: Recording ${index + 1}`);
this.currentTime = 2; // Seek to 2 seconds
});
videoThumb.addEventListener('error', function(e) {
console.log(`❌ Captured video thumbnail failed: Recording ${index + 1}`, e);
videoThumb.style.display = 'none';
fallback.style.display = 'flex';
});
videoElement.addEventListener('click', function(e) {
// Don't trigger on button clicks
if (e.target.tagName === 'BUTTON') return;
playCapturedVideo(video.id);
});
videoGallery.appendChild(videoElement);
});
const totalVideos = videos.length + capturedVideos.length;
console.log(`✅ Total videos in gallery: ${totalVideos} (${videos.length} linked + ${capturedVideos.length} captured)`);
console.log(`🎬 Final gallery innerHTML length:`, videoGallery.innerHTML.length);
console.log(`🎬 Gallery children count:`, videoGallery.children.length);
console.log(`🎬 Gallery computed style display:`, window.getComputedStyle(videoGallery).display);