changes: added boarder on thumbnail/enhanced the video info

ramonortegajr · May 28, 2024 · d1f4ed8 · d1f4ed8
1 parent c8156c1
commit d1f4ed8
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 32 deletions.
diff --git 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' : ''}`;
-}
+}
diff --git 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}`);
-});
+});
diff --git a/views/index.ejs b/views/index.ejs
@@ -24,21 +24,24 @@
     <div class="converter-box">
         <form id="converter-form">
             <div class="input-container" id="input-container">
-                <textarea id="video-url" placeholder="Paste link here" required></textarea>
+                <textarea id="video-url" placeholder="Paste youtube link here" required></textarea>
                 <button id="generate-button" type="submit" style="background-color: #3e5c7b; color: white;">
                     <i id="cog-icon" class="fas fa-cog"></i> Generate Link
                 </button>
             </div>
         </form>
-        <div id="video-info" style="display: none;">
-            <img id="thumbnail" src="" alt="Video Thumbnail">
-            <p id="title"></p>
-            <p id="length"></p>
-            <select id="quality"></select>
-            <button id="download-button" style="background-color: #3e5c7b; color: white;">
+        <div id="video-info" style="display: none; text-align: center; max-width: 400px; margin: auto; border: 1px solid #ccc; border-radius: 10px; padding: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);">
+            <div id="thumbnail-container">
+                <img id="thumbnail" src="" alt="Video Thumbnail" style="width: 100%; border-radius: 10px; cursor: pointer;">
+            </div>
+            <p id="title" style="font-weight: bold; font-size: 18px; margin: 10px 0;"></p>
+            <p id="length" style="color: #666; margin-bottom: 20px;"></p>
+            <label for="quality" style="display: block; margin-bottom: 10px; font-weight: bold;">Select Quality:</label>
+            <select id="quality" style="width: 100%; padding: 10px; border-radius: 5px; border: 1px solid #ccc; margin-bottom: 20px;"></select>
+            <button id="download-button" style="background-color: #3e5c7b; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer;">
                 <i class="fa fa-download" aria-hidden="true"></i> Download
             </button>
-        </div>
+        </div>                      
         <p class="note">💡Generate for free. No signup needed</p>
     </div>
     <footer>
@@ -47,4 +50,4 @@
     <p style="font-size: 80%;">Developed with <span class="blue-heart">&#x1F499;</span> by Ram Ortega</p>
     <script src="./js/script.js"></script>
 </body>
-</html>
+</html>