Update templates/index.html

templates/index.html

@@ -77,6 +77,93 @@
     </div>
 
     <script>
+        const Toast = Swal.mixin({
+            toast: true,
+            position: 'top-end',
+            showConfirmButton: false,
+            timer: 3000,
+            timerProgressBar: true,
+            didOpen: (toast) => {
+                toast.addEventListener('mouseenter', Swal.stopTimer)
+                toast.addEventListener('mouseleave', Swal.resumeTimer)
+            }
+        });
+
+        function showLoading(message) {
+            return Swal.fire({
+                html: `
+                    <div class="space-y-3">
+                        <div class="w-16 h-16 mx-auto border-4 border-gray-200 border-t-blue-500 rounded-full animate-spin"></div>
+                        <div class="text-gray-600 text-sm">${message}</div>
+                    </div>
+                `,
+                showConfirmButton: false,
+                allowOutsideClick: false,
+                background: '#ffffff',
+                customClass: {
+                    popup: 'rounded-2xl'
+                }
+            });
+        }
+
+        function showSuccess(message) {
+            Toast.fire({
+                icon: 'success',
+                title: message,
+                background: '#F0FDF4',
+                iconColor: '#22C55E'
+            });
+        }
+
+        function showError(message) {
+            Toast.fire({
+                icon: 'error',
+                title: message,
+                background: '#FEF2F2',
+                iconColor: '#EF4444'
+            });
+        }
+
+        function formatDuration(seconds) {
+            const minutes = Math.floor(seconds / 60);
+            const remainingSeconds = seconds % 60;
+            return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
+        }
+
+        function getVideoInfo() {
+            const url = $('#youtubeUrl').val().trim();
+            if (!url) {
+                showError('Please enter a YouTube URL');
+                return;
+            }
+
+            showLoading('Fetching video information...');
+            $('#videoInfo').addClass('hidden');
+
+            $.ajax({
+                url: '/get-info',
+                type: 'POST',
+                contentType: 'application/json',
+                data: JSON.stringify({ url: url }),
+                success: function(response) {
+                    $('#thumbnailContainer').html(`
+                        <img src="${response.thumbnail}" alt="Video Thumbnail" 
+                             class="w-full object-cover transition-transform duration-300 hover:scale-105">
+                    `);
+                    $('#videoTitle').text(response.title);
+                    $('#channelName span').text(response.channel);
+                    $('#duration span').text(formatDuration(response.duration));
+                    $('#videoInfo').removeClass('hidden');
+                    Swal.close();
+                    showSuccess('Video information retrieved');
+                },
+                error: function(xhr) {
+                    Swal.close();
+                    showError(xhr.responseJSON?.error || 'Failed to get video information');
+                }
+            });
+        }
+
         function playAudio() {
             const url = $('#youtubeUrl').val().trim();
             if (!url) {
@@ -97,15 +184,17 @@
                 success: function(response) {
                     const blob = new Blob([response], { type: 'audio/mp3' });
                     const audioUrl = URL.createObjectURL(blob);
-                    
+
                     const videoInfoContainer = document.querySelector('#videoInfo .p-6');
+                    // Remove any existing audio players
                     const existingAudioPlayers = videoInfoContainer.querySelectorAll('audio');
                     existingAudioPlayers.forEach(player => player.remove());
-                    
+
                     const audioPlayer = document.createElement('audio');
                     audioPlayer.src = audioUrl;
                     audioPlayer.controls = true;
-                    
+                    audioPlayer.style.width = '100%';
+                    audioPlayer.style.marginTop = '1rem';
                     audioPlayer.autoplay = true;
 
                     videoInfoContainer.appendChild(audioPlayer);
@@ -119,6 +208,22 @@
                 }
             });
         }
+
+        // Smooth page load animation
+        document.addEventListener('DOMContentLoaded', () => {
+            requestAnimationFrame(() => {
+                document.body.style.opacity = '0';
+                requestAnimationFrame(() => {
+                    document.body.style.transition = 'opacity 0.5s ease-in';
+                    document.body.style.opacity = '1';
+                });
+            });
+        });
+
+        // Check system dark mode preference
+        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            document.documentElement.classList.add('dark');
+        }
     </script>
 </body>
-</html>
+</html>