240 lines
8.6 KiB
HTML
240 lines
8.6 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Tesses YouTube Downloader</title>
|
|
<link rel="manifest" href="manifest.webmanifest" crossorigin="use-credentials">
|
|
<link rel="stylesheet" href="css/styles.css" crossorigin="use-credentials">
|
|
<link href="css/bootstrap.min.css" rel="stylesheet" crossorigin="use-credentials">
|
|
</head>
|
|
<body>
|
|
|
|
<nav class="navbar navbar-expand-lg bg-danger navbar-dark">
|
|
<div class="container">
|
|
<a href="#" data-target="home" class="navbar-brand spalnk">Tesses YouTube Downloader</a>
|
|
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="navmenu">
|
|
<ul class="navbar-nav ms-auto">
|
|
|
|
<li class="nav-item">
|
|
<a href="upload.html" class="nav-link">Upload</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="legacy.html" class="nav-link">Legacy Mode</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="extensions.html" class="nav-link">Extensions</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="my_videos.html" class="nav-link">My Videos</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<main>
|
|
<section class="bg-danger text-light p-3">
|
|
<div class="container">
|
|
<div>
|
|
<div>
|
|
<h3>
|
|
Download YouTube Videos, Playlists or Channels
|
|
</h3>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="bg-light text-dark p-3">
|
|
<!-- <div class="dropdown-menu">
|
|
<a class="dropdown-item" href="#">Server Download (SD)</a>
|
|
<a class="dropdown-item" href="#">Server Download (HD)</a>
|
|
<a class="dropdown-item" href="#">Server Download (Audio Only)</a>
|
|
<div role="separator" class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="#">Download To Device (SD)</a>
|
|
<a class="dropdown-item" href="#">Download To Device (HD)</a>
|
|
<a class="dropdown-item" href="#">Download To Device (Audio Only)</a>
|
|
</div>-->
|
|
|
|
<div class="input-group">
|
|
|
|
|
|
<input type="text" id="download_text_box" class="form-control" placeholder="https://www.youtube.com/watch?v=il9nqWw9W3Y" aria-label="Text input with segmented dropdown button">
|
|
<select class="form-control custom-select" id="selector" style="max-width: 6em;">
|
|
|
|
<option selected value=0>YouTube</option>
|
|
<!--<option value=1>Playlist</option>
|
|
<option value=2>Channel</option>
|
|
<option value=3>User</option>-->
|
|
<option value=4>Download</option>
|
|
<option value=5>Play</option>
|
|
</select>
|
|
<select class="form-control custom-select" id="res_selector" style="max-width: 5em;">
|
|
|
|
<option selected value=1>SD</option>
|
|
<option value=0>HD</option>
|
|
<option value=2>Audio</option>
|
|
|
|
|
|
</select>
|
|
<div class="input-group-append">
|
|
|
|
<button id="download_button" type="button" class="btn btn-primary">Download</button>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
|
|
|
|
<!--Home Page-->
|
|
|
|
<section class="bg-light text-dark p-3">
|
|
<div class="container" style="text-align: center;">
|
|
|
|
|
|
<video controls id="my_player1" style="max-height: 45%;max-width: 90%;" loop >
|
|
|
|
</video>
|
|
</div>
|
|
|
|
</section>
|
|
<section class="bg-danger text-light p-3" style="height: 100%;">
|
|
<div class="container">
|
|
|
|
<a id="video_link" style="text-decoration: none" class="text-info" href="/"> <h1 id="video_name"></h1></h1></a>
|
|
|
|
<a id="author_link" style="text-decoration: none" class="text-info" href="/"><h2 id="author_name"></h2></a>
|
|
<hr>
|
|
<h4 ><a style="text-decoration: none" class="text-info" id="download_link" href="/">Download</a></h4>
|
|
<hr>
|
|
<h3 id="date">00/00/0000</h3>
|
|
<h3 id="views">42 views - 0 likes - 0 dislikes</h3>
|
|
<hr>
|
|
Keywords: <span id="keywords"></span>
|
|
<hr>
|
|
<p id="description">
|
|
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</main>
|
|
|
|
<!-- <script src="js/jquery.js"></script>
|
|
<script src="js/lazyload.js"></script>
|
|
<script src="js/spa.js"></script>
|
|
<script src="js/new_main.js"></script>-->
|
|
<script src="js/popper.min.js"></script>
|
|
<script src="js/bootstrap.min.js"></script>
|
|
<script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const my_date = document.getElementById('date');
|
|
|
|
|
|
const video_url = document.getElementById('video_link');
|
|
|
|
const myTitle = document.getElementById('video_name');
|
|
|
|
|
|
const channel_name = document.getElementById('author_name');
|
|
const channel_url = document.getElementById('author_link');
|
|
const myViews = document.getElementById('views');
|
|
const myKeywords = document.getElementById('keywords');
|
|
const myDescription = document.getElementById('description');
|
|
const download_link = document.getElementById('download_link');
|
|
function progress2page(id)
|
|
{
|
|
var xmlhttp = new XMLHttpRequest();
|
|
|
|
|
|
xmlhttp.onreadystatechange = function() {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
var myData = JSON.parse(this.responseText);
|
|
//var progressStr=myData.Progress.toString() + '%';
|
|
//var progressData = myData.Progress;
|
|
//var fileLength = formatBytes(myData.Length);
|
|
var title = myData.Title;
|
|
var uploadDate = new Date(myData.UploadDate);
|
|
|
|
var atitle = myData.AuthorTitle;
|
|
var acid = myData.AuthorChannelId;
|
|
var desc = myData.Description;
|
|
//var dur = sec2time(myData.Saved.Duration);
|
|
var views = myData.Views;
|
|
var likes = myData.Likes;
|
|
var dislikes = myData.Dislikes;
|
|
download_link.setAttribute('download',title + '-' + id + '.mp4');
|
|
//myProgress.setAttribute("value", progressData.toString());
|
|
//myProgressVal.textContent = progressStr;
|
|
|
|
myDescription.textContent = desc;
|
|
myTitle.textContent = title;
|
|
channel_name.textContent = atitle;
|
|
myViews.textContent = views.toString() + " view(s) - " + likes.toString() + " like(s) - " + dislikes.toString() + " dislikes";
|
|
|
|
channel_url.href = "https://www.youtube.com/channel/" + acid;
|
|
video_url.href = "https://www.youtube.com/watch?v=" + id;
|
|
|
|
my_date.textContent = (uploadDate.getMonth() + 1).toString() + '/' + uploadDate.getDate().toString() + '/' + uploadDate.getFullYear().toString();
|
|
let kw = "";
|
|
myData.Keywords.forEach((item, index) => {
|
|
if(index == 0)
|
|
{
|
|
kw = item;
|
|
}else{
|
|
kw += ", " + item;
|
|
}
|
|
|
|
});
|
|
|
|
keywords.textContent = kw;
|
|
}
|
|
//if(!(fileLength === undefined || dur ))
|
|
{
|
|
//size_len.textContent = fileLength + " - " + dur;
|
|
}
|
|
};
|
|
xmlhttp.open("GET", "api/Storage/File/Info/" + id + ".json", true);
|
|
xmlhttp.send();
|
|
}
|
|
function play_video()
|
|
{
|
|
console.log(window.location.hash);
|
|
var vals= window.location.hash.replace('#','').split('=');
|
|
const player=document.getElementById('my_player1');
|
|
|
|
download_link.setAttribute('href','api/Storage/File/' + vals[0] + '/' + vals[1] + ".mp4");
|
|
player.setAttribute('src','api/Storage/File/' + vals[0] + '/' + vals[1] + ".mp4");
|
|
// /246x138/
|
|
player.setAttribute('poster','api/Storage/File/Thumbnails/246x138/' + vals[1] + ".jpg");
|
|
progress2page(vals[1]);
|
|
|
|
}
|
|
|
|
|
|
play_video();
|
|
</script>
|
|
<script src="js/download_video.js"></script>
|
|
</body>
|
|
</html> |