390 lines
13 KiB
JavaScript
390 lines
13 KiB
JavaScript
|
settings = {
|
||
|
|
defaultPage: "home",
|
||
|
|
showThumbnails: true,
|
||
|
|
load: function()
|
||
|
|
{
|
||
|
|
var data=localStorage.getItem('settings');
|
||
|
|
if(data != null)
|
||
|
|
{
|
||
|
|
cloneObject(settings,JSON.parse(data));
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
save: function()
|
||
|
|
{
|
||
|
|
localStorage.setItem('settings', JSON.stringify(settings));
|
||
|
|
|
||
|
|
}
|
||
|
|
};
|
||
|
|
function cloneObject(target, source) {
|
||
|
|
if (!source || !target || typeof source !== "object" || typeof target !== "object")
|
||
|
|
throw new TypeError("Invalid argument");
|
||
|
|
|
||
|
|
for (var p in source)
|
||
|
|
if (source.hasOwnProperty(p))
|
||
|
|
if (source[p] && typeof source[p] === "object")
|
||
|
|
if (target[p] && typeof target[p] === "object")
|
||
|
|
cloneObject(target[p], source[p]);
|
||
|
|
else
|
||
|
|
target[p] = source[p];
|
||
|
|
else
|
||
|
|
target[p] = source[p];
|
||
|
|
}
|
||
|
|
const app= {
|
||
|
|
|
||
|
|
pages: [],
|
||
|
|
show: new Event('show'),
|
||
|
|
init: function()
|
||
|
|
{
|
||
|
|
myModal = new bootstrap.Modal(document.getElementById('modal1'));
|
||
|
|
settings.load();
|
||
|
|
var starting_page_name = settings.defaultPage;
|
||
|
|
const enable_thumb= document.getElementById("enable_thumbnails");
|
||
|
|
|
||
|
|
|
||
|
|
enable_thumb.checked=settings.showThumbnails;
|
||
|
|
enable_thumb.addEventListener('input',(item)=>{
|
||
|
|
settings.showThumbnails=item.target.checked;
|
||
|
|
settings.save();
|
||
|
|
});
|
||
|
|
|
||
|
|
const starting_page = document.getElementById("starting_page");
|
||
|
|
app.pages = document.querySelectorAll('.page');
|
||
|
|
app.pages.forEach((pg) =>{
|
||
|
|
pg.addEventListener('show',app.pageShown);
|
||
|
|
})
|
||
|
|
document.getElementById(starting_page_name).classList.add('active');
|
||
|
|
document.querySelectorAll('.spalnk').forEach((link)=> {
|
||
|
|
link.addEventListener('click', app.nav);
|
||
|
|
var pageOption = document.createElement("option");
|
||
|
|
starting_page.appendChild(pageOption);
|
||
|
|
var pageLink = link.getAttribute('data-target');
|
||
|
|
var pageName = link.innerText;
|
||
|
|
if(pageName == "Tesses YouTube Downloader")
|
||
|
|
{
|
||
|
|
pageName = "Home";
|
||
|
|
}
|
||
|
|
pageOption.innerText = pageName;
|
||
|
|
pageOption.value = pageLink;
|
||
|
|
if(pageLink == settings.defaultPage)
|
||
|
|
{
|
||
|
|
|
||
|
|
history.replaceState({},pageName,'#' + pageLink);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
})
|
||
|
|
starting_page.addEventListener('input',(event)=>{
|
||
|
|
settings.defaultPage=event.target.value;
|
||
|
|
settings.save();
|
||
|
|
})
|
||
|
|
starting_page.value=settings.defaultPage;
|
||
|
|
window.addEventListener('popstate',app.poppin);
|
||
|
|
if(settings.defaultPage == 'videos')
|
||
|
|
{
|
||
|
|
list_videos();
|
||
|
|
}
|
||
|
|
if(settings.defaultPage == 'playlists')
|
||
|
|
{
|
||
|
|
list_playlists();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
nav: function(ev) {
|
||
|
|
ev.preventDefault();
|
||
|
|
let currentPage = ev.target.getAttribute('data-target');
|
||
|
|
document.querySelector('.active').classList.remove('active');
|
||
|
|
document.getElementById(currentPage).classList.add('active');
|
||
|
|
console.log(currentPage);
|
||
|
|
history.pushState({},currentPage,`#${currentPage}`)
|
||
|
|
document.getElementById(currentPage).dispatchEvent(app.show);
|
||
|
|
},
|
||
|
|
pageShown: function(ev)
|
||
|
|
{
|
||
|
|
let hash=location.hash.replace('#','');
|
||
|
|
|
||
|
|
if(hash == 'videos')
|
||
|
|
{
|
||
|
|
list_videos();
|
||
|
|
}
|
||
|
|
if(hash == 'playlists')
|
||
|
|
{
|
||
|
|
list_playlists();
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
poppin: function(ev)
|
||
|
|
{
|
||
|
|
let hash=location.hash.replace('#','');
|
||
|
|
let currentPage = ev.target.getAttribute('data-target');
|
||
|
|
document.querySelector('.active').classList.remove('active');
|
||
|
|
document.getElementById(hash).classList.add('active');
|
||
|
|
console.log(hash);
|
||
|
|
// history.pushState({},currentPage,`#${currentPage}`)
|
||
|
|
document.getElementById(currentPage).dispatchEvent(app.show);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function get_view_count(views)
|
||
|
|
{
|
||
|
|
if(views > 1000000000)
|
||
|
|
{
|
||
|
|
|
||
|
|
return Math.round(views/1000000000).toString() + "B";
|
||
|
|
}
|
||
|
|
if(views > 1000000)
|
||
|
|
{
|
||
|
|
|
||
|
|
return Math.round(views/1000000).toString() + "M";
|
||
|
|
}
|
||
|
|
if(views > 1000)
|
||
|
|
{
|
||
|
|
|
||
|
|
return Math.round(views/1000).toString() + "K";
|
||
|
|
}
|
||
|
|
return views.toString();
|
||
|
|
}
|
||
|
|
function removeAllChildNodes(parent) {
|
||
|
|
while (parent.firstChild) {
|
||
|
|
parent.removeChild(parent.firstChild);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function add_playlist(vid_list,item)
|
||
|
|
{
|
||
|
|
|
||
|
|
var vid_template = document.getElementById("video_template");
|
||
|
|
var xmlhttp2 = new XMLHttpRequest();
|
||
|
|
xmlhttp2.onreadystatechange = function() {
|
||
|
|
if (this.readyState == 4 && this.status == 200) {
|
||
|
|
var myData2 = JSON.parse(this.responseText);
|
||
|
|
//this is a video
|
||
|
|
var id = myData2.Id;
|
||
|
|
var title=myData2.Title;
|
||
|
|
var author = myData2.AuthorTitle;
|
||
|
|
var views = myData2.Videos.length.toString() + " Videos";
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
var video_element = vid_template.content.cloneNode(true);
|
||
|
|
var video_link=video_element.querySelector(".video_link");
|
||
|
|
video_link.innerText = title;
|
||
|
|
video_link.href="#";
|
||
|
|
video_link.setAttribute('data-id',id);
|
||
|
|
video_link.addEventListener("click",(evt)=>{
|
||
|
|
evt.preventDefault();
|
||
|
|
|
||
|
|
document.querySelector('.active').classList.remove('active');
|
||
|
|
document.getElementById('view_videos_list').classList.add('active');
|
||
|
|
console.log('view_videos_list');
|
||
|
|
history.pushState({},'view_videos_list','#view_videos_list');
|
||
|
|
document.getElementById('view_videos_list').dispatchEvent(app.show);
|
||
|
|
list_playlist(evt.target.getAttribute('data-id'));
|
||
|
|
})
|
||
|
|
var video_thumbnail=video_element.querySelector(".image");
|
||
|
|
if(settings.showThumbnails){
|
||
|
|
if(myData2.videos.length > 0){
|
||
|
|
video_thumbnail.setAttribute("src","api/Storage/File/Thumbnails/168x94/" + myData2.Videos[0] + ".jpg");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
var video_views = video_element.querySelector(".views");
|
||
|
|
video_views.innerText = views;
|
||
|
|
var video_author = video_element.querySelector(".video_author");
|
||
|
|
video_author.innerText = author;
|
||
|
|
|
||
|
|
vid_list.appendChild(video_element);
|
||
|
|
|
||
|
|
}
|
||
|
|
};
|
||
|
|
xmlhttp2.open("GET", "api/Storage/File/Playlist/" + item, true);
|
||
|
|
xmlhttp2.send();
|
||
|
|
}
|
||
|
|
function list_playlist(id)
|
||
|
|
{
|
||
|
|
console.log(id);
|
||
|
|
console.log("list_playlist");
|
||
|
|
var xmlhttp = new XMLHttpRequest();
|
||
|
|
var vid_list= document.getElementById("videos_list_view");
|
||
|
|
|
||
|
|
removeAllChildNodes(vid_list);
|
||
|
|
|
||
|
|
|
||
|
|
xmlhttp.onreadystatechange = function() {
|
||
|
|
if (this.readyState == 4 && this.status == 200) {
|
||
|
|
console.log("got /api/Storage/GetFiles/Playlist");
|
||
|
|
var myData = JSON.parse(this.responseText);
|
||
|
|
myData.Videos.forEach((item)=>{
|
||
|
|
try {
|
||
|
|
add_video(vid_list,item + '.json');
|
||
|
|
} catch (error) {
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
xmlhttp.open("GET", "api/Storage/File/Playlist/" + id + ".json", true);
|
||
|
|
xmlhttp.send();
|
||
|
|
}
|
||
|
|
|
||
|
|
function close_modal()
|
||
|
|
{
|
||
|
|
myModal.hide();
|
||
|
|
}
|
||
|
|
|
||
|
|
function list_playlists()
|
||
|
|
{
|
||
|
|
console.log("list_playlist");
|
||
|
|
var xmlhttp = new XMLHttpRequest();
|
||
|
|
var vid_list= document.getElementById("playlists_list");
|
||
|
|
|
||
|
|
try{
|
||
|
|
removeAllChildNodes(vid_list);
|
||
|
|
}catch(er)
|
||
|
|
{
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
xmlhttp.onreadystatechange = function() {
|
||
|
|
if (this.readyState == 4 && this.status == 200) {
|
||
|
|
console.log("got /api/Storage/GetFiles/Playlist");
|
||
|
|
var myData = JSON.parse(this.responseText);
|
||
|
|
myData.forEach((item)=>{
|
||
|
|
add_playlist(vid_list,item);
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
xmlhttp.open("GET", "api/Storage/GetFiles/Playlist", true);
|
||
|
|
xmlhttp.send();
|
||
|
|
}
|
||
|
|
var myModal;
|
||
|
|
var vtitle_modal;
|
||
|
|
function video_dialog_show(id,title)
|
||
|
|
{
|
||
|
|
const vid = document.getElementById('video_id_modal');
|
||
|
|
const vtitle = document.getElementById('video_title_modal');
|
||
|
|
vid.value = id;
|
||
|
|
vtitle.innerText=title;
|
||
|
|
vtitle_modal=title;
|
||
|
|
|
||
|
|
myModal.show();
|
||
|
|
|
||
|
|
}
|
||
|
|
function play()
|
||
|
|
{
|
||
|
|
const rbs = document.querySelectorAll('input[name="res"]');
|
||
|
|
let selectedValue;
|
||
|
|
for (const rb of rbs) {
|
||
|
|
if (rb.checked) {
|
||
|
|
selectedValue = rb.value;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const vid = document.getElementById('video_id_modal');
|
||
|
|
|
||
|
|
var ar = ["Converted","NotConverted","Audio"];
|
||
|
|
|
||
|
|
window.open('/api/Storage/File/' + ar[parseInt(selectedValue)] + '/' + vid.value + '.mp4',
|
||
|
|
vtitle_modal,
|
||
|
|
"resizable,scrollbars"
|
||
|
|
);
|
||
|
|
close_modal();
|
||
|
|
}
|
||
|
|
function download()
|
||
|
|
{
|
||
|
|
const rbs = document.querySelectorAll('input[name="res"]');
|
||
|
|
let selectedValue;
|
||
|
|
for (const rb of rbs) {
|
||
|
|
if (rb.checked) {
|
||
|
|
selectedValue = rb.value;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const vid = document.getElementById('video_id_modal');
|
||
|
|
window.open('/api/Storage/VideoRes/' + selectedValue + '/' + vid.value,'_blank');
|
||
|
|
close_modal();
|
||
|
|
}
|
||
|
|
function add_video(vid_list,item)
|
||
|
|
{
|
||
|
|
var vid_template = document.getElementById("video_template");
|
||
|
|
var xmlhttp2 = new XMLHttpRequest();
|
||
|
|
xmlhttp2.onreadystatechange = function() {
|
||
|
|
if (this.readyState == 4 && this.status == 200) {
|
||
|
|
var myData2 = JSON.parse(this.responseText);
|
||
|
|
//this is a video
|
||
|
|
var id = myData2.Id;
|
||
|
|
var title=myData2.Title;
|
||
|
|
var author = myData2.AuthorTitle;
|
||
|
|
var views = get_view_count(myData2.Views) + " Views";
|
||
|
|
var uploadDate= new Date(myData2.UploadDate);
|
||
|
|
let myVid=id;
|
||
|
|
let myTitle=title;
|
||
|
|
|
||
|
|
var video_element = vid_template.content.cloneNode(true);
|
||
|
|
var video_link=video_element.querySelector(".video_link");
|
||
|
|
video_link.innerText = title;
|
||
|
|
|
||
|
|
video_link.href="javascript:void";
|
||
|
|
video_link.addEventListener('click',(e)=>{
|
||
|
|
e.preventDefault();
|
||
|
|
video_dialog_show(myVid,myTitle);
|
||
|
|
});
|
||
|
|
var video_thumbnail=video_element.querySelector(".image");
|
||
|
|
if(settings.showThumbnails){
|
||
|
|
video_thumbnail.setAttribute("src","api/Storage/File/Thumbnails/168x94/" + id + ".jpg");
|
||
|
|
|
||
|
|
}else{
|
||
|
|
//video_element.removeChild(video_thumbnail);
|
||
|
|
}
|
||
|
|
var video_views = video_element.querySelector(".views");
|
||
|
|
video_views.innerText = views;
|
||
|
|
var video_author = video_element.querySelector(".video_author");
|
||
|
|
video_author.innerText = author;
|
||
|
|
var video_date = video_element.querySelector(".date");
|
||
|
|
video_date.innerText = (uploadDate.getMonth() + 1).toString() + '/' + uploadDate.getDate().toString() + '/' + uploadDate.getFullYear().toString();
|
||
|
|
|
||
|
|
vid_list.appendChild(video_element);
|
||
|
|
|
||
|
|
}
|
||
|
|
};
|
||
|
|
xmlhttp2.open("GET", "api/Storage/File/Info/" + item, true);
|
||
|
|
xmlhttp2.send();
|
||
|
|
}
|
||
|
|
function list_videos()
|
||
|
|
{
|
||
|
|
console.log("list_videos");
|
||
|
|
var xmlhttp = new XMLHttpRequest();
|
||
|
|
var vid_list= document.getElementById("videos_list");
|
||
|
|
|
||
|
|
removeAllChildNodes(vid_list);
|
||
|
|
|
||
|
|
|
||
|
|
xmlhttp.onreadystatechange = function() {
|
||
|
|
if (this.readyState == 4 && this.status == 200) {
|
||
|
|
console.log("got /api/Storage/GetFiles/Info");
|
||
|
|
var myData = JSON.parse(this.responseText);
|
||
|
|
myData.forEach((item)=>{
|
||
|
|
add_video(vid_list,item);
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
xmlhttp.open("GET", "api/Storage/GetFiles/Info", true);
|
||
|
|
xmlhttp.send();
|
||
|
|
}
|
||
|
|
if ('serviceWorker' in navigator) {
|
||
|
|
window.addEventListener('load', function() {
|
||
|
|
navigator.serviceWorker.register('sw.js').then(function(registration) {
|
||
|
|
// Registration was successful
|
||
|
|
console.log('ServiceWorker registration successful with scope: ', registration.scope);
|
||
|
|
}, function(err) {
|
||
|
|
// registration failed :(
|
||
|
|
console.log('ServiceWorker registration failed: ', err);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
document.addEventListener("DOMContentLoaded",app.init);
|