Please do not turn off the time settings; just change the video automatically according to the time as written in the code by time - Follow Up Deployment

index.html

@@ -36,7 +36,9 @@
             box-shadow: 0 35px 60px -12px rgba(0, 0, 0, 0.6);
         }
 
-        #schedule-times > div.bg-yellow-500 {
+        #schedule-times > div.active-schedule {
+            background-color: rgba(234, 179, 8, 0.2);
+            border-left: 4px solid rgba(234, 179, 8, 0.8);
             transition: all 0.3s ease;
         }
 
@@ -108,17 +110,17 @@
                 <h3 class="text-xl font-bold mb-4 text-yellow-300 tracking-wider">✨ Today's Schedule ✨</h3>
                 <div id="schedule-times" class="text-sm space-y-3">
                     <div class="flex items-start">
-                        <div class="w-24 font-mono text-yellow-400 transition-colors duration-300">21:00 – 23:35</div>
+                        <div class="w-24 font-mono text-yellow-400">21:00 – 23:35</div>
                         <div class="flex-1">
-                            <div class="font-medium transition-colors duration-300">Dance in Front of the Library of Alexandria</div>
+                            <div class="font-medium">Dance in Front of the Library of Alexandria</div>
                             <div class="text-yellow-300 opacity-80 text-xs">Duration: 02:35</div>
                         </div>
                     </div>
                     <div class="h-px bg-gradient-to-r from-transparent via-yellow-500/30 to-transparent"></div>
                     <div class="flex items-start">
-                        <div class="w-24 font-mono text-yellow-400 transition-colors duration-300">23:35 – 01:28</div>
+                        <div class="w-24 font-mono text-yellow-400">23:35 – 01:28</div>
                         <div class="flex-1">
-                            <div class="font-medium transition-colors duration-300">✨ Belly Dance  ✨ - Sensual Dance</div>
+                            <div class="font-medium">✨ Belly Dance ✨ - Sensual Dance</div>
                             <div class="text-yellow-300 opacity-80 text-xs">Duration: 01:53</div>
                         </div>
                     </div>
@@ -132,9 +134,9 @@
                     </div>
                     <div class="h-px bg-gradient-to-r from-transparent via-yellow-500/30 to-transparent"></div>
                     <div class="flex items-start">
-                        <div class="w-24 font-mono text-yellow-400 transition-colors duration-300">06:09 – 21:00</div>
+                        <div class="w-24 font-mono text-yellow-400">06:09 – 21:00</div>
                         <div class="flex-1">
-                            <div class="font-medium transition-colors duration-300">Feast of Hathor</div>
+                            <div class="font-medium">Feast of Hathor</div>
                             <div class="text-yellow-300 opacity-80 text-xs">Duration: 03:28</div>
                         </div>
                     </div>
@@ -220,13 +222,9 @@
                 const scheduleItems = document.querySelectorAll('#schedule-times > div');
                 scheduleItems.forEach((item, i) => {
                     if (i === index * 2) { // Each video is every second div (0, 2, 4...)
-                        item.classList.add('bg-yellow-500', 'bg-opacity-10', 'rounded-lg', 'py-2', 'px-3');
-                        item.querySelector('.w-24').classList.add('text-yellow-200', 'font-bold');
-                        item.querySelector('.font-medium').classList.add('text-yellow-200');
+                        item.classList.add('active-schedule');
                     } else {
-                        item.classList.remove('bg-yellow-500', 'bg-opacity-10', 'rounded-lg', 'py-2', 'px-3');
-                        item.querySelector('.w-24').classList.remove('text-yellow-200', 'font-bold');
-                        item.querySelector('.font-medium').classList.remove('text-yellow-200');
+                        item.classList.remove('active-schedule');
                     }
                 });
             }
@@ -271,64 +269,35 @@
                 // Highlight current schedule item
                 highlightCurrentScheduleItem(videoIndex);
 
-                // Add fade transition
-                videoElement.style.opacity = '0';
-                videoElement.style.transition = 'opacity 0.5s ease';
-                
-                // Set video source and metadata
-                videoElement.src = video.url;
-                
-                // When video is ready to play
-                videoElement.oncanplay = function() {
-                    // Play video from calculated position
-                    videoElement.currentTime = videoCurrentPosition;
-                    videoElement.loop = true;
-                    videoElement.play().catch(e => {
-                        console.log('Auto-play prevented:', e);
-                        // Fallback: mute and try again
-                        videoElement.muted = true;
-                        videoElement.play();
-                    }).then(() => {
-                        // Fade in the video
-                        videoElement.style.opacity = '1';
-                    });
-                    
-                    // Clear any previous timeout
-                    if (window.nextVideoTimeout) {
-                        clearTimeout(window.nextVideoTimeout);
-                    }
-                    
-                    // Calculate time until next video should start
-                    const timeUntilNextVideo = (video.endHour - currentHour) * 3600 * 1000;
-                    window.nextVideoTimeout = setTimeout(playScheduledVideo, timeUntilNextVideo);
-                };
+                // Play video from calculated position
+                videoElement.currentTime = videoCurrentPosition;
+                videoElement.loop = true;
+                videoElement.play().catch(e => {
+                    console.log('Auto-play prevented:', e);
+                    // Fallback: mute and try again
+                    videoElement.muted = true;
+                    videoElement.play();
+                });
                 
-                // Handle potential loading errors
-                videoElement.onerror = function() {
-                    console.error('Error loading video:', video.url);
-                    // Try again after 5 seconds
-                    setTimeout(playScheduledVideo, 5000);
-                };
+                // Calculate time until next video should start
+                const timeUntilNextVideo = (video.endHour - currentHour) * 3600 * 1000;
+                // Clear any existing timeout to prevent multiple triggers
+                if (window.scheduleTimeout) {
+                    clearTimeout(window.scheduleTimeout);
+                }
+                window.scheduleTimeout = setTimeout(playScheduledVideo, timeUntilNextVideo);
             }
             
-            // Handle video end and potential interruptions
+            // Handle video end (shouldn't be needed with loop=true, but just in case)
             videoElement.addEventListener('ended', function() {
                 const now = new Date();
                 const currentHour = now.getUTCHours() + now.getUTCMinutes() / 60;
                 const currentVideo = videos[currentVideoIndex];
                 
-                const now = new Date();
-                const currentHour = now.getUTCHours() + now.getUTCMinutes() / 60;
-                const currentVideo = videos[currentVideoIndex];
-                
                 // If still within current video's time slot, restart it
                 if (currentHour >= currentVideo.startHour && currentHour < currentVideo.endHour) {
                     videoElement.currentTime = 0;
-                    videoElement.play().catch(e => {
-                        console.log('Restart failed:', e);
-                        // If restart fails, force a schedule check
-                        playScheduledVideo();
-                    });
+                    videoElement.play();
                 } else {
                     // Otherwise switch to scheduled video
                     playScheduledVideo();