document.getElementById('download-btn').addEventListener('click', function() {
const videoUrl = document.getElementById('video-url').value.trim();
const errorDiv = document.getElementById('error');
const resultDiv = document.getElementById('result');
const loadingDiv = document.getElementById('loading');
// Hide previous results/errors
errorDiv.style.display = 'none';
resultDiv.style.display = 'none';
// Validate URL
if (!isValidYouTubeShortsUrl(videoUrl)) {
errorDiv.style.display = 'block';
return;
}
// Show loading spinner
loadingDiv.style.display = 'block';
// Simulate processing (in a real app, this would be an API call)
setTimeout(function() {
loadingDiv.style.display = 'none';
// Extract video ID (in a real app, this would come from your backend)
const videoId = extractVideoId(videoUrl);
// Display results (in a real app, these would come from your backend)
document.getElementById('video-title').textContent = "YouTube Shorts Video";
document.getElementById('video-thumbnail').src = `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`;
// Set download links (in a real app, these would point to your backend endpoints)
document.getElementById('download-mp4').href = `/download/mp4?id=${videoId}`;
document.getElementById('download-mp3').href = `/download/mp3?id=${videoId}`;
resultDiv.style.display = 'block';
}, 1500);
});
function isValidYouTubeShortsUrl(url) {
// Basic validation for YouTube Shorts URL
const pattern = /^(https?:\/\/)?(www\.)?youtube\.com\/shorts\/[a-zA-Z0-9_-]{11}/;
return pattern.test(url);
}
function extractVideoId(url) {
// Extract the video ID from a YouTube Shorts URL
const match = url.match(/shorts\/([a-zA-Z0-9_-]{11})/);
return match ? match[1] : null;
}
