Spaces:

Souvikyt
/

vidload-hub

Running

Write the name of my website in one corner on this website and generate a logo for the name and add a sign up option so that users can log in and I will write down what the name will be. "VidLoad Hub"

340e1b6 verified about 1 year ago

Raw History Blame Contribute Delete

6.59 kB

document.addEventListener('DOMContentLoaded', function() {
    // DOM Elements
    const videoUrlInput = document.getElementById('videoUrl');
    const pasteBtn = document.getElementById('pasteBtn');
    const downloadBtn = document.getElementById('downloadBtn');
    const videoPreviewSection = document.getElementById('videoPreview');
    const videoThumbnail = document.getElementById('videoThumbnail');
    const videoTitle = document.getElementById('videoTitle');
    const videoDuration = document.getElementById('videoDuration');
    const qualitySelect = document.getElementById('qualitySelect');
    const formatSelect = document.getElementById('formatSelect');
    const downloadFinalBtn = document.getElementById('downloadFinalBtn');
    const convertBtn = document.getElementById('convertBtn');
    const recentDownloads = document.getElementById('recentDownloads');

    // Event Listeners
    pasteBtn.addEventListener('click', handlePaste);
    downloadBtn.addEventListener('click', handleDownload);
    downloadFinalBtn.addEventListener('click', handleFinalDownload);
    convertBtn.addEventListener('click', handleConvertToMP3);

    // Functions
    function handlePaste() {
        navigator.clipboard.readText()
            .then(text => {
                videoUrlInput.value = text;
            })
            .catch(err => {
                console.error('Failed to read clipboard contents: ', err);
            });
    }

    function handleDownload() {
        const url = videoUrlInput.value.trim();
        
        if (!url) {
            showAlert('Please enter a valid video URL', 'error');
            return;
        }

        // Show loading state
        downloadBtn.disabled = true;
        downloadBtn.innerHTML = '<span class="spinner inline-block w-5 h-5 border-2 border-white border-t-transparent rounded-full mr-2"></span> Analyzing...';

        // Simulate API call (in a real app, this would be a fetch to your backend)
        setTimeout(() => {
            // Mock response
            const mockResponse = {
                success: true,
                thumbnail: 'http://static.photos/technology/640x360/1',
                title: 'Sample Video Title',
                duration: '5:30',
                availableQualities: ['360', '720', '1080']
            };

            if (mockResponse.success) {
                // Populate video info
                videoThumbnail.src = mockResponse.thumbnail;
                videoTitle.textContent = mockResponse.title;
                videoDuration.textContent = `Duration: ${mockResponse.duration}`;
                
                // Show the preview section
                videoPreviewSection.classList.remove('hidden');
                
                // Scroll to preview
                videoPreviewSection.scrollIntoView({ behavior: 'smooth' });
                
                // Add to recent downloads (simplified)
                addToRecentDownloads(mockResponse.title, url);
            } else {
                showAlert('Failed to analyze the video URL. Please check if it\'s valid and try again.', 'error');
            }
            
            // Reset button
            downloadBtn.disabled = false;
            downloadBtn.innerHTML = '<i data-feather="download"></i><span>Analyze & Download</span>';
            feather.replace();
        }, 1500);
    }

    function handleFinalDownload() {
        const url = videoUrlInput.value.trim();
        const quality = qualitySelect.value;
        const format = formatSelect.value;
        
        showAlert(`Preparing ${quality}p ${format.toUpperCase()} download...`, 'success');
        
        // In a real app, this would redirect to your backend download endpoint
        console.log(`Downloading: ${url} at ${quality}p as ${format}`);
    }

    function handleConvertToMP3() {
        const url = videoUrlInput.value.trim();
        showAlert('Converting to MP3...', 'success');
        
        // In a real app, this would redirect to your backend conversion endpoint
        console.log(`Converting to MP3: ${url}`);
    }

    function addToRecentDownloads(title, url) {
        // Simplified - in a real app you would save this to localStorage or a database
        const downloadItem = document.createElement('div');
        downloadItem.className = 'flex items-center justify-between p-3 bg-gray-100 dark:bg-gray-700 rounded-lg';
        downloadItem.innerHTML = `
            <div class="flex items-center gap-3">
                <div class="w-12 h-12 bg-gray-300 dark:bg-gray-600 rounded-lg overflow-hidden">
                    <img src="${videoThumbnail.src}" alt="${title}" class="w-full h-full object-cover">
                </div>
                <div>
                    <h4 class="font-medium text-gray-900 dark:text-white line-clamp-1">${title}</h4>
                    <p class="text-sm text-gray-500 dark:text-gray-400">${new Date().toLocaleDateString()}</p>
                </div>
            </div>
            <button class="text-primary hover:text-primary/80 dark:text-secondary dark:hover:text-secondary/80 transition-colors">
                <i data-feather="download"></i>
            </button>
        `;
        
        // If it's the first item, remove the placeholder
        if (recentDownloads.children.length === 1 && recentDownloads.children[0].classList.contains('text-center')) {
            recentDownloads.innerHTML = '';
        }
        
        recentDownloads.prepend(downloadItem);
        feather.replace();
    }

    function showAlert(message, type) {
        const alert = document.createElement('div');
        alert.className = `fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg text-white font-medium z-50 transition-all duration-300 transform translate-x-full ${type === 'error' ? 'bg-red-500' : 'bg-green-500'}`;
        alert.textContent = message;
        document.body.appendChild(alert);
        
        setTimeout(() => {
            alert.classList.remove('translate-x-full');
            alert.classList.add('translate-x-0');
        }, 10);
        
        setTimeout(() => {
            alert.classList.remove('translate-x-0');
            alert.classList.add('translate-x-full');
            setTimeout(() => {
                alert.remove();
            }, 300);
        }, 3000);
    }

    // Initialize theme from localStorage
    if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        document.documentElement.classList.add('dark');
    }
});

	document.addEventListener('DOMContentLoaded', function() {
	// DOM Elements
	const videoUrlInput = document.getElementById('videoUrl');
	const pasteBtn = document.getElementById('pasteBtn');
	const downloadBtn = document.getElementById('downloadBtn');
	const videoPreviewSection = document.getElementById('videoPreview');
	const videoThumbnail = document.getElementById('videoThumbnail');
	const videoTitle = document.getElementById('videoTitle');
	const videoDuration = document.getElementById('videoDuration');
	const qualitySelect = document.getElementById('qualitySelect');
	const formatSelect = document.getElementById('formatSelect');
	const downloadFinalBtn = document.getElementById('downloadFinalBtn');
	const convertBtn = document.getElementById('convertBtn');
	const recentDownloads = document.getElementById('recentDownloads');

	// Event Listeners
	pasteBtn.addEventListener('click', handlePaste);
	downloadBtn.addEventListener('click', handleDownload);
	downloadFinalBtn.addEventListener('click', handleFinalDownload);
	convertBtn.addEventListener('click', handleConvertToMP3);

	// Functions
	function handlePaste() {
	navigator.clipboard.readText()
	.then(text => {
	videoUrlInput.value = text;
	})
	.catch(err => {
	console.error('Failed to read clipboard contents: ', err);
	});
	}

	function handleDownload() {
	const url = videoUrlInput.value.trim();

	if (!url) {
	showAlert('Please enter a valid video URL', 'error');
	return;
	}

	// Show loading state
	downloadBtn.disabled = true;
	downloadBtn.innerHTML = '<span class="spinner inline-block w-5 h-5 border-2 border-white border-t-transparent rounded-full mr-2"></span> Analyzing...';

	// Simulate API call (in a real app, this would be a fetch to your backend)
	setTimeout(() => {
	// Mock response
	const mockResponse = {
	success: true,
	thumbnail: 'http://static.photos/technology/640x360/1',
	title: 'Sample Video Title',
	duration: '5:30',
	availableQualities: ['360', '720', '1080']
	};

	if (mockResponse.success) {
	// Populate video info
	videoThumbnail.src = mockResponse.thumbnail;
	videoTitle.textContent = mockResponse.title;
	videoDuration.textContent = `Duration: ${mockResponse.duration}`;

	// Show the preview section
	videoPreviewSection.classList.remove('hidden');

	// Scroll to preview
	videoPreviewSection.scrollIntoView({ behavior: 'smooth' });

	// Add to recent downloads (simplified)
	addToRecentDownloads(mockResponse.title, url);
	} else {
	showAlert('Failed to analyze the video URL. Please check if it\'s valid and try again.', 'error');
	}

	// Reset button
	downloadBtn.disabled = false;
	downloadBtn.innerHTML = '<i data-feather="download"></i><span>Analyze & Download</span>';
	feather.replace();
	}, 1500);
	}

	function handleFinalDownload() {
	const url = videoUrlInput.value.trim();
	const quality = qualitySelect.value;
	const format = formatSelect.value;

	showAlert(`Preparing ${quality}p ${format.toUpperCase()} download...`, 'success');

	// In a real app, this would redirect to your backend download endpoint
	console.log(`Downloading: ${url} at ${quality}p as ${format}`);
	}

	function handleConvertToMP3() {
	const url = videoUrlInput.value.trim();
	showAlert('Converting to MP3...', 'success');

	// In a real app, this would redirect to your backend conversion endpoint
	console.log(`Converting to MP3: ${url}`);
	}

	function addToRecentDownloads(title, url) {
	// Simplified - in a real app you would save this to localStorage or a database
	const downloadItem = document.createElement('div');
	downloadItem.className = 'flex items-center justify-between p-3 bg-gray-100 dark:bg-gray-700 rounded-lg';
	downloadItem.innerHTML = `
	<div class="flex items-center gap-3">
	<div class="w-12 h-12 bg-gray-300 dark:bg-gray-600 rounded-lg overflow-hidden">
	<img src="${videoThumbnail.src}" alt="${title}" class="w-full h-full object-cover">
	</div>
	<div>
	<h4 class="font-medium text-gray-900 dark:text-white line-clamp-1">${title}</h4>
	<p class="text-sm text-gray-500 dark:text-gray-400">${new Date().toLocaleDateString()}</p>
	</div>
	</div>
	<button class="text-primary hover:text-primary/80 dark:text-secondary dark:hover:text-secondary/80 transition-colors">
	<i data-feather="download"></i>
	</button>
	`;

	// If it's the first item, remove the placeholder
	if (recentDownloads.children.length === 1 && recentDownloads.children[0].classList.contains('text-center')) {
	recentDownloads.innerHTML = '';
	}

	recentDownloads.prepend(downloadItem);
	feather.replace();
	}

	function showAlert(message, type) {
	const alert = document.createElement('div');
	alert.className = `fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg text-white font-medium z-50 transition-all duration-300 transform translate-x-full ${type === 'error' ? 'bg-red-500' : 'bg-green-500'}`;
	alert.textContent = message;
	document.body.appendChild(alert);

	setTimeout(() => {
	alert.classList.remove('translate-x-full');
	alert.classList.add('translate-x-0');
	}, 10);

	setTimeout(() => {
	alert.classList.remove('translate-x-0');
	alert.classList.add('translate-x-full');
	setTimeout(() => {
	alert.remove();
	}, 300);
	}, 3000);
	}

	// Initialize theme from localStorage
	if (localStorage.getItem('theme') === 'dark' \|\| (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
	document.documentElement.classList.add('dark');
	}
	});