youtube-playlist-cli/web/ytlist/ytlist.js

80 lines
2.4 KiB
JavaScript

function insert_item(item,imgurl){
the_box.innerHTML+=`<div>
<a href="https://youtube.com/watch?v=${item[2]}" target="_BLANK">
<span class="video-title">${item[0]}: ${item[1]}</span>
<span class="video-channelname">${item[3]}</span>
<br>
<img src="${imgurl}"></img>
</a>
</div>`
}
function get_item(item){
fetch(`/ytlist/thumbnails/${item[2]}.webp`,
{ method: "HEAD" }
).then((res) => {
if (res.ok) {
insert_item(item,res.url);
} else {
fetch(`/ytlist/thumbnails/${item[2]}.jpg`,
{ method: "HEAD" }
).then((res) => {
if (res.ok) {
insert_item(item,res.url);
} else {
console.log("no");
}
});
}
});
}
async function search(){
const sqlPromise = initSqlJs({
locateFile: file => `/ytlist/${file}`
});
const dataPromise = fetch("/ytlist/youtube_stuffs.db").then(res => res.arrayBuffer());
const [SQL, buf] = await Promise.all([sqlPromise, dataPromise])
const db = new SQL.Database(new Uint8Array(buf));
//search_box.style.display="none";
category=document.querySelector('input[name="category_choice"]:checked').value;
let query="SELECT rowid,* FROM ytlist"
if (category!="ALL"){
query+=` WHERE category='${category}'`
if (search_in.value != ""){
query+=` AND title LIKE '%${search_in.value}%'`
}
} else if (search_in.value != ""){
query+=` WHERE title LIKE '%${search_in.value}%'`
}
let res = db.exec(query);
the_box.innerHTML="";
res[0].values.forEach(item=>{get_item(item)});
}
async function init(){
const sqlPromise = initSqlJs({
locateFile: file => `/ytlist/${file}`
});
const dataPromise = fetch("/ytlist/youtube_stuffs.db").then(res => res.arrayBuffer());
const [SQL, buf] = await Promise.all([sqlPromise, dataPromise])
const db = new SQL.Database(new Uint8Array(buf));
const res = db.exec("SELECT category FROM ytlist");
let categories=[]
res[0].values.forEach(item=>{
if (categories.indexOf(item[0]) < 0) {
categories.push(item[0]);
category_box.innerHTML+=`<input type="radio" name="category_choice" value="${item[0]}"> ${item[0]}<br>`
}
})
}
init()