“pretty much i know that i have to do it in java but i really don t know anything about java, only thing i knew how to do is how to make the page not freeze up during changes of the page, through AJAX
pretty much i wanted to challenge myself by implementing the yt-dlb fork for youtube, it works great but i got stuck at adding a timer that tells the user how much time until the converted file will be ready for downloading (what i mean by this is strictly, the time from when the users press convert until the button for them to download the said file appears.)
I don t plan on deploying this anywhere, i just wanna learn how to do it
i tried looking onto some forums but for no use
only thing i tried is this
<h1>Yeqwfwq</h1>
<div id="message"></div>
<form id="download-form">
<label for="youtube_url">YouTube video URL:</label>
<input type="text" name="youtube_url" id="youtube_url">
<br><br>
<label for="format">Select a format:</label>
<select name="format" id="format">
<option value="mp3">MP3</option>
<option value="mp4">MP4</option>
</select>
<br><br>
<button type="submit">Convert</button>
</form>
<div id="progress-bar" style="display:none">
<div id="progress" style="background-color: #4CAF50; width: 0%; height: 20px;"></div>
<div id="progress-text">Conversion progress: <span id="progress-percent">0%</span></div>
<br>
</div>
<script>
$(document).ready(function() {
// Handle form submission
$("#download-form").submit(function(event) {
event.preventDefault();
var form = $(this);
var message = $("#message");
var url = form.find("#youtube_url").val();
var format = form.find("#format").val();
// Check if the YouTube URL is valid
if (url.trim() === "" || !isValidYoutubeUrl(url)) {
message.html("Please enter a valid YouTube video URL");
return;
}
// Send AJAX request to start download
$.ajax({
type: "POST",
url: "download.php",
data: {
youtube_url: url,
format: format
},
beforeSend: function() {
message.html("Starting download...");
$("#progress-bar").show();
},
xhr: function() {
var xhr = $.ajaxSettings.xhr();
if (xhr.upload) {
xhr.upload.addEventListener('progress', function(event) {
var percent = 0;
var position = event.loaded || event.position;
var total = event.total || event.totalSize;
if (event.lengthComputable) {
percent = Math.ceil(position / total * 100);
}
$("#progress").width(percent + '%');
$("#progress-percent").html(percent + '%');
}, true);
}
return xhr;
},
success: function(data) {
message.html(data);
$("#progress-bar").hide();
},
error: function() {
message.html("An error occurred while downloading the video");
$("#progress-bar").hide();
}
});
});
// Validate YouTube URL
function isValidYoutubeUrl(url) {
var pattern = /^(https?://)?(www.)?(youtube.com|youtu.be)//;
return pattern.test(url);
}
});
</script>
but everytime i would try to download something, the timer would show after download is finished.
this would be the php code that does all the job
<?php
// Check if YouTube video URL and format are set
if (isset($_POST['youtube_url']) && isset($_POST['format'])) {
// Get YouTube video URL and format
$youtube_url = $_POST['youtube_url'];
$format = $_POST['format'];
// Validate YouTube URL
if (preg_match('/^(https?://)?(www.)?(youtube.com|youtu.be)//', $youtube_url) !== 1) {
die("Please enter a valid YouTube video URL");
}
// Build yt-dlp command
$cmd = "yt-dlp --yes-playlist -o downloads/%(title)s.%(ext)s " . escapeshellarg($youtube_url);
// If format is mp3, add the --extract-audio and --audio-format mp3 options
if ($format === "mp3") {
$cmd .= " --extract-audio --audio-format mp3";
}
// If format is mp4, add the --merge-output-format mp4 option
if ($format === "mp4") {
$cmd .= " --merge-output-format mp4";
}
// Execute yt-dlp command
exec($cmd, $output, $return);
// Check if the download was successful
if ($return === 0) {
// Find the downloaded file
$files = glob('downloads/*.' . $format);
if (count($files) > 0) {
$filename = $files[0];
// Set headers to download the file
header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename="' . basename($filename) . '"');
header('Content-Length: ' . filesize($filename));
} else {
echo "An error occurred: downloaded file not found";
}
} else {
echo "An error occurred while downloading the video";
}
// Add download button
echo '<a href="downloads/' . basename($filename) . '" download>
<button>Download Converted File</button>
</a>';
} else {
echo "Please enter a YouTube video URL and select a format";
}
?>
and this would be the code that handles the HTML page
<!DOCTYPE html>
<link rel="stylesheet" href="style.css">
<html>
<head>
<title>YouTube Downloader</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h1>YouTube Downloader</h1>
<div id="message"></div>
<form id="download-form">
<label for="youtube_url">YouTube video URL:</label>
<input type="text" name="youtube_url" id="youtube_url">
<br><br>
<label for="format">Select a format:</label>
<select name="format" id="format">
<option value="mp3">MP3</option>
<option value="mp4">MP4</option>
</select>
<br><br>
<button type="submit">Convert</button>
</form>
<script>
$(document).ready(function() {
// Handle form submission
$("#download-form").submit(function(event) {
event.preventDefault();
var form = $(this);
var message = $("#message");
var url = form.find("#youtube_url").val();
var format = form.find("#format").val();
// Check if the YouTube URL is valid
if (url.trim() === "" || !isValidYoutubeUrl(url)) {
message.html("Please enter a valid YouTube video URL");
return;
}
// Send AJAX request to start download
$.ajax({
type: "POST",
url: "download.php",
data: {
youtube_url: url,
format: format
},
beforeSend: function() {
message.html("Starting download...");
},
success: function(data) {
message.html(data);
},
error: function() {
message.html("An error occurred while downloading the video");
}
});
});
// Validate YouTube URL
function isValidYoutubeUrl(url) {
var pattern = /^(https?://)?(www.)?(youtube.com|youtu.be)//;
return pattern.test(url);
}
});
</script>
</body>
</html>
`
`