-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
278 lines (242 loc) · 9.17 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
/**
* Coded by Jerickson Mayor
*/
let shouldContinueProcessing = true;
function convert() {
const APIKEY = 'f6a5076aaamsh068e5bef20f4c60p125dcbjsn23685700616b'; // Get the API key here --> https://rapidapi.com/hub
const videoURL = document.getElementById('videoURL').value;
const videoID = extractVideoId(videoURL);
let formatSelected = document.querySelector('.selected-option').textContent.toLowerCase();
let APIHOST;
let APIURL;
switch (formatSelected) {
case 'mp3':
APIHOST = 'youtube-mp36.p.rapidapi.com';
APIURL = 'https://youtube-mp36.p.rapidapi.com/dl';
break;
default:
APIHOST = 'ytstream-download-youtube-videos.p.rapidapi.com';
APIURL = 'https://ytstream-download-youtube-videos.p.rapidapi.com/dl';
break;
}
if (!isValidYouTubeUrl(videoURL)) {
showErrorMessage('Please enter a valid YouTube video URL');
return;
}
document.querySelector('.loading-container').style.display = 'flex';
const options = {
method: 'GET',
url: APIURL,
params: {
id: videoID
},
headers: {
'X-RapidAPI-Key': APIKEY,
'X-RapidAPI-Host': APIHOST
}
};
axios
.request(options)
.then((response) => {
const status = response.data.status;
if (status === 'processing' && shouldContinueProcessing) {
setTimeout(convert, 1000);
return;
}
shouldContinueProcessing = false;
const thumbnail = response.data.thumbnail;
// const thumb = response.data.thumb;
const title = response.data.title;
const mp3Link = response.data.link;
const formats = response.data.formats;
const formatsContainer = document.querySelector('.formats-container');
if (formatSelected === 'mp3' && mp3Link) {
var formatDiv = document.createElement('div');
formatDiv.className = 'format';
formatDiv.innerHTML =
'<span>Format: MP3 </span>' + '<a href="' + mp3Link + '" class="download-btn" download>Download</a>';
formatsContainer.appendChild(formatDiv);
// document.querySelector('.thumbnail img').src = thumb;
getMp3Thumbnail(videoID, APIKEY)
.then((thumbnail) => {
// Use the thumbnail URL here
document.querySelector('.thumbnail img').src = thumbnail;
})
.catch((error) => {
console.error('Error fetching MP4 thumbnail:', error.message);
});
document.querySelector('.thumbnail a').href = videoURL;
} else {
if (formats && thumbnail) {
formats.forEach(function (format) {
var formatDiv = document.createElement('div');
formatDiv.className = 'format';
formatDiv.innerHTML =
'<span>Format: ' +
mapFormat(format.mimeType) +
'</span>' +
'<a href="' +
format.url +
'" class="download-btn" download>Download</a>';
formatsContainer.appendChild(formatDiv);
});
}
document.querySelector('.thumbnail img').src = thumbnail[1].url;
document.querySelector('.thumbnail a').href = videoURL;
}
document.querySelector('.thumbnail .title').textContent = title;
// Hide loading animation
document.querySelector('.loading-container').style.display = 'none';
document.querySelectorAll('.format').forEach(function (format) {
format.style.display = 'block';
});
document.querySelector('img').style.display = 'inline-block';
document.querySelector('.title').style.display = 'block';
document.querySelectorAll('.download-btn').forEach(function (btn) {
btn.style.display = 'inline-block';
});
// Show thumbnails, formats, and download buttons
document.querySelector('.thumbnail').style.display = 'block';
document.getElementById('convert-again').style.display = 'inline-block';
})
.catch((error) => {
console.error('Error:', error.message);
document.querySelector('.loading-container').style.display = 'none';
document.getElementById('input-container').style.display = 'block';
if (error.response) {
// The request was made and the server responded with a status code
const statusCode = error.response.status;
if (statusCode === 429) {
showErrorMessage('API request limit exceeded.');
} else if (statusCode === 403) {
showErrorMessage('You are not subscribed to this API.');
} else {
showErrorMessage('An error occurred. Please try again.');
}
} else if (error.request) {
// The request was made but no response was received
showErrorMessage('No response received from the server.');
} else {
// Something happened in setting up the request that triggered an error
showErrorMessage('An error occurred.');
}
return;
// Handle errors or show an alert
});
// Hide input and convert button, show Convert Again button
document.getElementById('input-container').style.display = 'none';
}
function convertAgain() {
// Reload the page
location.reload();
document.getElementById('videoURL').value = '';
}
function extractVideoId(url) {
// Check if it's a shorts link first
const shortsMatch = url.match(/youtube\.com\/shorts\/([^?&]+)/);
if (shortsMatch) {
// For shorts links, return the ID after "youtube.com/shorts/"
return shortsMatch[1];
}
// Check if it's a youtu.be link
const youtuBeMatch = url.match(/youtu\.be\/([^?&]+)/);
if (youtuBeMatch) {
// For youtu.be links, return the ID after "youtu.be/"
return youtuBeMatch[1];
}
// Check if it's a regular YouTube link
const regularMatch = url.match(/[?&](v|vi)=([^&]+)/);
return regularMatch ? regularMatch[2] : null;
}
// Function to map mime types to user-friendly formats
function mapFormat(mimeType) {
if (mimeType.includes('3gpp')) {
return '3GP ';
} else if (mimeType.includes('mp4') && !mimeType.includes('avc1.64001F')) {
return 'MP4 ';
} else if (mimeType.includes('mp4') && mimeType.includes('avc1.64001F')) {
return 'MP4 HD ';
} else {
// Add additional mappings as needed
return mimeType; // Default to the original mime type if no match is found
}
}
function isValidYouTubeUrl(url) {
const youtubeRegex =
/^(https?:\/\/)?(www\.|m\.)?(youtube\.com\/(watch\?.*v=|embed\/|v\/|c\/|u\/\w\/|user\/\w+|.*[?&]v=)|youtu\.be\/|youtube\.com\/shorts\/)[^"&?\/\s]+(.*)?$/;
return youtubeRegex.test(url);
}
function showErrorMessage(message) {
const errorMessage = document.getElementById('errorMessage');
errorMessage.textContent = message;
errorMessage.style.display = 'block';
setTimeout(() => {
errorMessage.style.display = 'none';
}, 2000);
}
function validateAndProceed() {
const videoURL = document.getElementById('videoURL').value;
if (isValidYouTubeUrl(videoURL)) {
console.log('Valid YouTube URL');
// Proceed with your logic here
} else {
showErrorMessage('Please enter a valid YouTube video URL');
}
}
document.addEventListener('DOMContentLoaded', function () {
const customDropdown = document.getElementById('customDropdown');
const selectedOption = document.getElementById('selectedOption');
const dropdownOptions = document.getElementById('dropdownOptions');
const options = document.querySelectorAll('.option');
// Toggle the dropdown display and update ARIA attributes
selectedOption.addEventListener('click', function () {
const isExpanded = customDropdown.getAttribute('aria-expanded') === 'true';
customDropdown.setAttribute('aria-expanded', isExpanded ? 'false' : 'true');
dropdownOptions.style.display = isExpanded ? 'none' : 'block';
});
// Handle option selection
options.forEach(function (option) {
option.addEventListener('click', function () {
console.log(option.textContent);
selectedOption.textContent = option.textContent;
dropdownOptions.style.display = 'none';
customDropdown.setAttribute('aria-expanded', 'false');
// If you have unique IDs for each option, consider updating aria-activedescendant here
});
});
// Close dropdown if clicked outside
document.addEventListener('click', function (event) {
if (!event.target.closest('.custom-dropdown')) {
dropdownOptions.style.display = 'none';
customDropdown.setAttribute('aria-expanded', 'false');
}
});
});
function getMp3Thumbnail(videoID, APIKEY) {
const mp4APIURL = 'https://ytstream-download-youtube-videos.p.rapidapi.com/dl';
const mp4APIHOST = 'ytstream-download-youtube-videos.p.rapidapi.com';
const mp4Options = {
method: 'GET',
url: mp4APIURL,
params: {
id: videoID
},
headers: {
'X-RapidAPI-Key': APIKEY,
'X-RapidAPI-Host': mp4APIHOST
}
};
return axios
.request(mp4Options)
.then((response) => {
return response.data.thumbnail[1].url; // Assuming the thumbnail URL is available in the response
})
.catch((error) => {
console.error('Error fetching MP4 thumbnail:', error.message);
return null;
});
}
// Add this script to clear the input field on page reload
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('videoURL').value = '';
});