From d1f4ed8416b81aa1f211d6feb6183608b360119f Mon Sep 17 00:00:00 2001 From: ramram Date: Tue, 28 May 2024 15:30:32 +0800 Subject: [PATCH] changes: added boarder on thumbnail/enhanced the video info --- public/js/script.js | 91 ++++++++++++++++++++++++++++++++++----------- server.js | 3 +- views/index.ejs | 21 ++++++----- 3 files changed, 83 insertions(+), 32 deletions(-) diff --git a/public/js/script.js b/public/js/script.js index e4a08c3..338c59d 100644 --- a/public/js/script.js +++ b/public/js/script.js @@ -54,40 +54,89 @@ document.getElementById('converter-form').addEventListener('submit', async funct cogIcon.classList.remove('spin-animation'); } }); - document.getElementById('download-button').addEventListener('click', function () { const videoUrl = document.getElementById('video-url').value; const qualitySelect = document.getElementById('quality'); const itag = qualitySelect.value; const quality = qualitySelect.options[qualitySelect.selectedIndex].dataset.quality; - const downloadUrl = `/download?url=${encodeURIComponent(videoUrl)}&itag=${itag}&quality=${quality}`; + const subtitles = document.getElementById('subtitles') ? '&subtitles=true' : ''; + const downloadUrl = `/download?url=${encodeURIComponent(videoUrl)}&itag=${itag}&quality=${quality}${subtitles}`; - const a = document.createElement('a'); - a.href = downloadUrl; - a.download = 'video.mp4'; - document.body.appendChild(a); - a.click(); - document.body.removeChild(a); -}); + // Fetch the video title and other info using YouTube oEmbed API + fetch(`https://www.youtube.com/oembed?url=${encodeURIComponent(videoUrl)}&format=json`) + .then(response => response.json()) + .then(data => { + const videoTitle = data.title; + const sanitizedTitle = videoTitle.replace(/[^a-z0-9]/gi, '_').toLowerCase(); -document.addEventListener('DOMContentLoaded', function () { - const pasteClipboardButton = document.getElementById('paste-clipboard'); - if (pasteClipboardButton) { - pasteClipboardButton.addEventListener('click', function () { - navigator.clipboard.readText() - .then(text => { - document.getElementById('video-url').value = text; - }) - .catch(err => { - console.error('Failed to read clipboard contents: ', err); - }); + const a = document.createElement('a'); + a.href = downloadUrl; + a.download = `${sanitizedTitle}.mp4`; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + }) + .catch(error => { + console.error('Error fetching video title:', error); + alert('Failed to fetch video title. Please try again.'); }); +}); + +document.getElementById('thumbnail-container').addEventListener('click', function () { + const videoUrl = document.getElementById('video-url').value; + const videoId = new URLSearchParams(new URL(videoUrl).search).get('v'); + if (videoId) { + const videoElement = document.createElement('iframe'); + videoElement.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`; + videoElement.style.width = '80%'; + videoElement.style.height = '80%'; + videoElement.style.borderRadius = '10px'; + videoElement.style.border = 'none'; + videoElement.allow = 'autoplay; encrypted-media'; + videoElement.allowFullscreen = true; + + const thumbnailContainer = document.getElementById('thumbnail-container'); + thumbnailContainer.innerHTML = ''; + thumbnailContainer.appendChild(videoElement); + } else { + alert('Invalid YouTube URL'); } }); + +// document.getElementById('download-button').addEventListener('click', function () { +// const videoUrl = document.getElementById('video-url').value; +// const qualitySelect = document.getElementById('quality'); +// const itag = qualitySelect.value; +// const quality = qualitySelect.options[qualitySelect.selectedIndex].dataset.quality; +// const downloadUrl = `/download?url=${encodeURIComponent(videoUrl)}&itag=${itag}&quality=${quality}`; + +// const a = document.createElement('a'); +// a.href = downloadUrl; +// a.download = 'video.mp4'; +// document.body.appendChild(a); +// a.click(); +// document.body.removeChild(a); +// }); + +// document.addEventListener('DOMContentLoaded', function () { +// const pasteClipboardButton = document.getElementById('paste-clipboard'); +// if (pasteClipboardButton) { +// pasteClipboardButton.addEventListener('click', function () { +// navigator.clipboard.readText() +// .then(text => { +// document.getElementById('video-url').value = text; +// }) +// .catch(err => { +// console.error('Failed to read clipboard contents: ', err); +// }); +// }); +// } +// }); + function formatDuration(seconds) { const hrs = Math.floor(seconds / 3600); const mins = Math.floor((seconds % 3600) / 60); const secs = seconds % 60; return `${hrs > 0 ? `${hrs} hour${hrs > 1 ? 's' : ''}, ` : ''}${mins > 0 ? `${mins} minute${mins > 1 ? 's' : ''}, ` : ''}${secs} second${secs > 1 ? 's' : ''}`; -} +} \ No newline at end of file diff --git a/server.js b/server.js index ccc8f2d..00af23c 100644 --- a/server.js +++ b/server.js @@ -18,7 +18,6 @@ app.post('/get-video-info', async (req, res) => { if (!ytdl.validateURL(videoUrl)) { return res.status(400).json({ error: 'Invalid URL' }); } - try { const info = await ytdl.getInfo(videoUrl); const videoDetails = { @@ -81,4 +80,4 @@ app.get('/download', (req, res) => { app.listen(PORT, () => { console.log(`Server running on port ${PORT}`); -}); +}); \ No newline at end of file diff --git a/views/index.ejs b/views/index.ejs index 4e2f736..9f7d04b 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -24,21 +24,24 @@
- +
- +

đŸ’¡Generate for free. No signup needed