tytd-web/js/search.js

191 lines
5.7 KiB
JavaScript
Raw Normal View History

2021-11-08 08:32:37 +00:00
const search_list = document.getElementById('search_list');
const text_field = document.getElementById('text_field');
const button = document.getElementById('search_button');
button.addEventListener('click', ()=>{
search(text_field.value);
});
function addVideo(id,title)
{
let row = document.createElement('tr');
let image_col = document.createElement('td');
let title_col = document.createElement('td');
let type_col = document.createElement('td');
let id_col = document.createElement('td');
let res_col = document.createElement('td');
// image
let img_link = document.createElement('a');
img_link.href = "api/AddVideo/" + id;
let img = document.createElement('img');
img.src = "api/Storage/File/Thumbnails/120x90/" + id + ".jpg";
img.alt = title;
img.width = 128;
img.height = 72;
img_link.appendChild(img);
image_col.appendChild(img_link);
row.appendChild(image_col);
//title
let title_link = document.createElement('a');
title_link.href="api/AddVideo/" + id;
title_link.textContent = title;
title_col.appendChild(title_link);
row.appendChild(title_col);
//type constant
type_col.textContent = "Video";
row.appendChild(type_col);
//id
id_col.textContent = id;
row.appendChild(id_col);
//other res
let link0 = document.createElement('a');
let sep = document.createElement('a');
let link1 = document.createElement('a');
link0.textContent = "Highest";
link0.href="api/AddVideo/0/" + id;
res_col.appendChild(link0);
sep.textContent = "|";
res_col.appendChild(sep);
link1.textContent = "Audio Only";
link1.href="api/AddVideo/2/" + id;
res_col.appendChild(link1);
row.appendChild(res_col)
//append to list
search_list.appendChild(row);
}
function addPlaylist(id,title)
{
let row = document.createElement('tr');
let image_col = document.createElement('td');
let title_col = document.createElement('td');
let type_col = document.createElement('td');
let id_col = document.createElement('td');
let res_col = document.createElement('td');
// image
let img_link = document.createElement('a');
img_link.href = "api/AddPlaylist/" + id;
let img = document.createElement('img');
img.src = "api/Storage/File/Thumbnails/196x110/" + id + ".jpg";
img.alt = title;
img.width = 128;
img.height = 72;
img_link.appendChild(img);
image_col.appendChild(img_link);
row.appendChild(image_col);
//title
let title_link = document.createElement('a');
title_link.href="api/AddPlaylist/" + id;
title_link.textContent = title;
title_col.appendChild(title_link);
row.appendChild(title_col);
//type constant
type_col.textContent = "Playlist";
row.appendChild(type_col);
//id
id_col.textContent = id;
row.appendChild(id_col);
//other resolutions
let link0 = document.createElement('a');
let sep = document.createElement('a');
let link1 = document.createElement('a');
link0.textContent = "Highest";
link0.href="api/AddPlaylist/0/" + id;
res_col.appendChild(link0);
sep.textContent = "|";
res_col.appendChild(sep);
link1.textContent = "Audio Only";
link1.href="api/AddPlaylist/2/" + id;
res_col.appendChild(link1);
row.appendChild(res_col)
//append to list
search_list.appendChild(row);
}
function addChannel(id,title)
{
let row = document.createElement('tr');
let image_col = document.createElement('td');
let title_col = document.createElement('td');
let type_col = document.createElement('td');
let id_col = document.createElement('td');
let res_col = document.createElement('td');
// image
let img_link = document.createElement('a');
img_link.href = "api/AddChannel/" + id;
let img = document.createElement('img');
img.src = "api/Storage/File/Thumbnails/900x900/" + id + ".jpg";
img.alt = title;
img.width = 128;
img.height = 72;
img_link.appendChild(img);
image_col.appendChild(img_link);
row.appendChild(image_col);
//title
let title_link = document.createElement('a');
title_link.href="api/AddChannel/" + id;
title_link.textContent = title;
title_col.appendChild(title_link);
row.appendChild(title_col);
//type constant
type_col.textContent = "Channel";
row.appendChild(type_col);
//id
id_col.textContent = id;
row.appendChild(id_col);
//other resolutions
let link0 = document.createElement('a');
let sep = document.createElement('a');
let link1 = document.createElement('a');
link0.textContent = "Highest";
link0.href="api/AddChannel/0/" + id;
res_col.appendChild(link0);
sep.textContent = "|";
res_col.appendChild(sep);
link1.textContent = "Audio Only";
link1.href="api/AddChannel/2/" + id;
res_col.appendChild(link1);
row.appendChild(res_col)
//append to list
search_list.appendChild(row);
}
function search(query){
search_list.textContent = '';
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myData = JSON.parse(this.responseText);
myData.forEach((item, index) => {
if(item.Kind == 0){
addVideo(item.Id,item.Title);
}
if(item.Kind == 1)
{
addPlaylist(item.Id,item.Title);
}
if(item.Kind == 2){
addChannel(item.Id,item.Title);
}
});
};
};
xmlhttp.open("GET", "api/Search/" + encodeUri(query), true);
xmlhttp.send();
}