progress

src/components/Video.astro

@@ -1,5 +1,5 @@
 ---
-// src/components/Video.astro
+// src/components/Video.astro - SIMPLIFIED using consolidated videoProcessor
 import { videoProcessor, type VideoMetadata } from '../utils/videoUtils.js';
 
 export interface Props {
@@ -36,7 +36,7 @@ const {
   fallback
 } = Astro.props;
 
-// Process the video URL and generate optimized sources
+// SIMPLIFIED: Use consolidated videoProcessor
 const metadata: Partial<VideoMetadata> = {
   title,
   description,
@@ -55,21 +55,18 @@ const options = {
   height
 };
 
-let processedVideo;
 let videoHTML = '';
-let errorMessage = '';
 
 try {
-  processedVideo = await videoProcessor.processVideoUrl(src, metadata);
+  const processedVideo = await videoProcessor.processVideoUrl(src, metadata);
   videoHTML = videoProcessor.generateVideoHTML(processedVideo, options);
 } catch (error) {
   console.error('[VIDEO COMPONENT] Processing failed:', error);
-  errorMessage = error.message;
   videoHTML = `
     <div class="video-container aspect-${aspectRatio}">
       <div class="video-error">
         <div class="error-icon">⚠️</div>
-        <div>${fallback || `Video could not be loaded: ${errorMessage}`}</div>
+        <div>${fallback || `Video could not be loaded: ${error.message}`}</div>
       </div>
     </div>
   `;
@@ -79,7 +76,7 @@ try {
 <Fragment set:html={videoHTML} />
 
 <script>
-  // Client-side video enhancement
+  // CONSOLIDATED: Client-side video enhancement
   document.addEventListener('DOMContentLoaded', () => {
     const videos = document.querySelectorAll('.video-container video') as NodeListOf<HTMLVideoElement>;
     
@@ -87,22 +84,19 @@ try {
       const container = video.closest('.video-container') as HTMLElement;
       if (!container) return;
       
-      // Add loading state
-      video.addEventListener('loadstart', () => {
-        container.classList.add('loading');
-      });
-      
+      // Loading states
+      video.addEventListener('loadstart', () => container.classList.add('loading'));
       video.addEventListener('loadeddata', () => {
         container.classList.remove('loading');
         container.classList.add('loaded');
       });
       
+      // Error handling
       video.addEventListener('error', (e) => {
         console.error('[VIDEO] Load error:', e);
         container.classList.remove('loading');
         container.classList.add('error');
         
-        // Show error message
         const errorDiv = document.createElement('div');
         errorDiv.className = 'video-error';
         errorDiv.innerHTML = `
@@ -110,38 +104,29 @@ try {
           <div>Video could not be loaded</div>
         `;
         
-        (video as HTMLElement).style.display = 'none';
+        video.style.display = 'none';
         container.appendChild(errorDiv);
       });
       
-      // Handle fullscreen
+      // Fullscreen on double-click
       video.addEventListener('dblclick', () => {
-        const videoElement = video as any;
         if (video.requestFullscreen) {
           video.requestFullscreen();
-        } else if (videoElement.webkitRequestFullscreen) {
-          videoElement.webkitRequestFullscreen();
-        } else if (videoElement.msRequestFullscreen) {
-          videoElement.msRequestFullscreen();
+        } else if ((video as any).webkitRequestFullscreen) {
+          (video as any).webkitRequestFullscreen();
         }
       });
       
-      // Add keyboard shortcuts
+      // Keyboard shortcuts
       video.addEventListener('keydown', (e: KeyboardEvent) => {
         switch(e.key) {
           case ' ':
             e.preventDefault();
-            if (video.paused) {
-              video.play();
-            } else {
-              video.pause();
-            }
+            video.paused ? video.play() : video.pause();
             break;
           case 'f':
             e.preventDefault();
-            if (video.requestFullscreen) {
-              video.requestFullscreen();
-            }
+            if (video.requestFullscreen) video.requestFullscreen();
             break;
           case 'm':
             e.preventDefault();
@@ -151,35 +136,4 @@ try {
       });
     });
   });
-</script>
-
-<style>
-  /* Component-specific enhancements */
-  .video-container.loading video {
-    opacity: 0.5;
-  }
-  
-  .video-container.loading::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 2rem;
-    height: 2rem;
-    border: 3px solid var(--color-border);
-    border-top: 3px solid var(--color-primary);
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-    z-index: 10;
-  }
-  
-  .video-container.error video {
-    display: none;
-  }
-  
-  @keyframes spin {
-    0% { transform: translate(-50%, -50%) rotate(0deg); }
-    100% { transform: translate(-50%, -50%) rotate(360deg); }
-  }
-</style>
+</script>