Skip to content

Commit

Permalink
change: css responsive change
Browse files Browse the repository at this point in the history
  • Loading branch information
@ramonortegajr
ramonortegajr committed May 30, 2024
1 parent c20c5eb commit ca43e0f
Show file tree
Hide file tree
Showing 4 changed files with 121 additions and 27 deletions.
17 changes: 11 additions & 6 deletions public/css/home.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ header {
padding: 8px;
font-family: Arial, sans-serif;
margin-left: 20px;
}
}
.header-icons {
display: flex;
margin-left: auto;
Expand All @@ -57,7 +57,7 @@ header {

.icon {
margin-right: 10px;
}
}
.menu-icon {
margin-right: 20px;
cursor: pointer;
Expand All @@ -69,7 +69,7 @@ h1 {
i {
font-size: 20px;
color: black;
}
}
.container {
display: flex;
flex-wrap: wrap;
Expand Down Expand Up @@ -209,18 +209,20 @@ i {
text-shadow:
1px 1px 0 #ccc,
2px 2px 0 #bbb,
3px 3px 0 #aaa,
3px 3px 0 #aaa;
}


/* Adjustments for mobile devices */
@media only screen and (max-width: 768px) {
.header-text {
font-size: 2.0em; /* Reduce font size for smaller screens */
text-align: center; /* Center align the title */
}
.container {
width: 100%;
width: 90%;
padding: 10px;
margin-right: 0.5em;
}
.support-me {
display: none; /* Hide "Buy Me a Coffee" on smaller screens */
Expand All @@ -233,7 +235,7 @@ i {
}

.text-section h1 {
font-size: 1.5em;
font-size: 1.0em;
}

input[type="text"],
Expand Down Expand Up @@ -272,6 +274,9 @@ i {
margin-bottom: 10px; /* Adjust margin */
}
}
.spin-animation {
animation: spin 1s linear infinite;
}

@keyframes spin {
0% { transform: rotate(0deg); }
Expand Down
60 changes: 60 additions & 0 deletions public/js/script.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,63 @@
// document.getElementById('converter-form').addEventListener('submit', async function (e) {
// e.preventDefault();

// const videoUrl = document.getElementById('video-url').value;
// const cogIcon = document.getElementById('cog-icon');
// cogIcon.classList.add('spin-animation');

// try {
// const response = await fetch('/get-video-info', {
// method: 'POST',
// headers: {
// 'Content-Type': 'application/json'
// },
// body: JSON.stringify({ url: videoUrl })
// });
// const data = await response.json();

// if (response.ok) {
// document.getElementById('thumbnail').src = data.thumbnail;
// document.getElementById('title').innerText = `Title: ${data.title}`;
// document.getElementById('length').innerText = `Length: ${formatDuration(data.length)}`;
// document.getElementById('video-info').style.display = 'block';

// // Fetch available formats
// const formatsResponse = await fetch('/get-video-formats', {
// method: 'POST',
// headers: {
// 'Content-Type': 'application/json'
// },
// body: JSON.stringify({ url: videoUrl })
// });
// const formatsData = await formatsResponse.json();

// if (formatsResponse.ok) {
// const qualitySelect = document.getElementById('quality');
// qualitySelect.innerHTML = ''; // Clear previous options

// formatsData.formats.forEach(format => {
// const option = document.createElement('option');
// option.value = format.itag;
// option.textContent = `${format.quality} - ${format.container}`;
// option.dataset.quality = format.quality; // Store quality for later use
// qualitySelect.appendChild(option);
// });

// // Enable the download button once the quality options are loaded
// document.getElementById('download-button').disabled = false;
// } else {
// alert(formatsData.error);
// }
// } else {
// alert(data.error);
// }
// } catch (error) {
// alert('An error occurred while fetching video info');
// } finally {
// cogIcon.classList.remove('spin-animation');
// }
// });

document.getElementById('converter-form').addEventListener('submit', async function (e) {
e.preventDefault();

Expand Down
67 changes: 48 additions & 19 deletions server.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ const ytdl = require('ytdl-core');
const app = express();
const path = require("path");

const PORT = process.env.PORT || 3000;
const PORT = process.env.PORT || 2000;

app.use(cors());
app.use(express.json());
Expand Down Expand Up @@ -39,34 +39,63 @@ app.post('/get-video-info', async (req, res) => {
});


// app.post('/get-video-formats', async (req, res) => {
// const videoUrl = req.body.url;
// if (!ytdl.validateURL(videoUrl)) {
// return res.status(400).json({ error: 'Invalid URL' });
// }

// try {
// const info = await ytdl.getInfo(videoUrl);
// const formats = info.formats
// .filter(format => {
// return (
// (format.itag === 18 && format.container === 'mp4' && format.qualityLabel === '360p' &&
// format.codecs.includes('avc1.42001E') && format.audioBitrate === 96) ||
// (format.itag === 137 && format.container === 'mp4' && format.qualityLabel === '1080p' &&
// format.codecs.includes('avc1.640028')) ||
// (format.itag === 248 && format.container === 'webm' && format.qualityLabel === '1080p' &&
// format.codecs.includes('vp9')) ||
// (format.itag === 136 && format.container === 'mp4' && format.qualityLabel === '720p' &&
// format.codecs.includes('avc1.4d4016')) ||
// (format.itag === 247 && format.container === 'webm' && format.qualityLabel === '720p' &&
// format.codecs.includes('vp9')) ||
// (format.itag === 135 && format.container === 'mp4' && format.qualityLabel === '480p' &&
// format.codecs.includes('avc1.4d4014')) ||
// (format.itag === 134 && format.container === 'mp4' && format.qualityLabel === '360p' &&
// format.codecs.includes('avc1.4d401e')) ||
// (format.itag === 140 && format.container === 'mp4' && format.audioBitrate === 128)
// );
// })
// .map(format => ({
// quality: format.qualityLabel,
// itag: format.itag,
// container: format.container,
// codecs: format.codecs,
// bitrate: format.bitrate,
// audioBitrate: format.audioBitrate
// }));
// console.log('Filtered formats:', formats); // Log the formats to check the output
// res.json({ formats });
// } catch (error) {
// console.error(error);
// res.status(500).json({ error: 'Failed to fetch video formats' });
// }
// });

app.post('/get-video-formats', async (req, res) => {
const videoUrl = req.body.url;
if (!ytdl.validateURL(videoUrl)) {
return res.status(400).json({ error: 'Invalid URL' });
}

try {
const supportedQualities = ['360p', '1080p', '720p', '480p']; // Define supported qualities
const info = await ytdl.getInfo(videoUrl);
const formats = info.formats
.filter(format => {
return (
(format.itag === 18 && format.container === 'mp4' && format.qualityLabel === '360p' &&
format.codecs.includes('avc1.42001E') && format.audioBitrate === 96) ||
(format.itag === 248 && format.container === 'webm' && format.qualityLabel === '1080p' &&
format.codecs.includes('vp9')) ||
(format.itag === 136 && format.container === 'mp4' && format.qualityLabel === '720p' &&
format.codecs.includes('avc1.4d4016')) ||
(format.itag === 247 && format.container === 'webm' && format.qualityLabel === '720p' &&
format.codecs.includes('vp9')) ||
(format.itag === 135 && format.container === 'mp4' && format.qualityLabel === '480p' &&
format.codecs.includes('avc1.4d4014'))
// (format.itag === 140 && format.container === 'mp4' && format.audioBitrate === 128)
// (format.itag === 137 && format.container === 'mp4' && format.qualityLabel === '1080p' &&
// format.codecs.includes('avc1.640028')) ||
// (format.itag === 134 && format.container === 'mp4' && format.qualityLabel === '360p' &&
// format.codecs.includes('avc1.4d401e')) ||

);
// Check if format quality is in the supported qualities array
return supportedQualities.includes(format.qualityLabel);
})
.map(format => ({
quality: format.qualityLabel,
Expand Down
4 changes: 2 additions & 2 deletions views/tubetogo.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@
<div class="container" style="display: flex; flex-direction: column; align-items: center;">
<!-- Tube To Go -->
<div class="text-section" style="display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; background: none;">
<h1 style="color: #C13E3E; margin: 0; font-size: 2.5em; margin-bottom: -20px;">Tube To Go</h1>
<h1 class="text-header-title" style="color: #C13E3E; margin: 0; font-size: 2.5em; margin-bottom: -20px;">Tube To Go</h1>
</div>
<div class="card" style="border: 2px solid #C13E3E; padding: 40px; width: 80%; display: flex; justify-content: space-between; align-items: flex-start;">
<form id="converter-form">
<div style="width: 100%; margin-right: 20px;">
<h2 style="color: #C13E3E; margin-bottom: 20px;">Paste YouTube link here:</h2>
<h2 style="color: #C13E3E; margin-bottom: 20px;">Link here:</h2>
<input type="text" id="video-url" placeholder="ex:https://www.youtube.com/watch?qwerty" style="width: 93%; padding: 15px; margin-bottom: 20px; border: 1px solid #C13E3E; border-radius: 5px; background: none;" required>
<button class="more-button red" id="generate-button" type="submit" style="background-color: #C13E3E; color: white; padding: 15px; border: none; border-radius: 5px; font-size: 1.2em; width: 100%;">
<i id="cog-icon" class="fas fa-cog" style="color: white;"></i> Generate Link
Expand Down

0 comments on commit ca43e0f

Please sign in to comment.