iceyrazor
/
youtube-playlist-cli
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

- added ability to disable thumbnails on web

This commit is contained in:
iceyrazor 2025-09-15 17:23:54 -05:00
parent 5eb82d8f14
commit fedd9c2c81
2 changed files with 31 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/ytlist.html
View File

@ -4,11 +4,10 @@
<link rel="stylesheet" href="/ytlist/ytlist.css" /> <link rel="stylesheet" href="/ytlist/ytlist.css" />
</head> </head>
<body> <body>
<script src='/ytlist/sql-wasm.js'></script>
<script src='/ytlist/ytlist.js'></script>
<div id="search_box"> <div id="search_box">
leave blank for seaching all<br> leave blank for seaching all<br>
query: <input id="search_in"></input><br> query: <input id="search_in"></input><br>
show thumbnails: <input type="checkbox" id="gen_thumb_check" name="gen_thumb_check" checked></input><br>
category category
<div id="category_box"> <div id="category_box">
<input type="radio" name="category_choice" value="ALL" checked> ALL<br> <input type="radio" name="category_choice" value="ALL" checked> ALL<br>
@ -20,5 +19,7 @@
<button onclick="search()">search</button><br> <button onclick="search()">search</button><br>
</div> </div>
<div id="the_box"></div> <div id="the_box"></div>
<script src='/ytlist/sql-wasm.js'></script>
<script src='/ytlist/ytlist.js'></script>
</body> </body>
</html> </html>

46
web/ytlist/ytlist.js
View File

@ -1,34 +1,43 @@
let db_file="youtube_stuffs.db" let db_file="youtube_stuffs.db"
let gen_thumb=true
function insert_item(item,imgurl){ function insert_item(item,imgurl){
let imgtag="<br><br>"
if(imgurl){
imgtag=`<img src="${imgurl}"></img>`
}
the_box.innerHTML+=`<div> the_box.innerHTML+=`<div>
<a href="https://youtube.com/watch?v=${item[2]}" target="_BLANK"> <a href="https://youtube.com/watch?v=${item[2]}" target="_BLANK">
<span class="video-title">${item[0]}: ${item[1]}</span> <span class="video-title">${item[0]}: ${item[1]}</span>
<span class="video-channelname">${item[3]}</span> <span class="video-channelname">${item[3]}</span>
<br> <br>
<img src="${imgurl}"></img> ${imgtag}
</a> </a>
</div>` </div>`
} }
function get_item(item){ function get_item(item){
fetch(`/ytlist/thumbnails/${item[2]}.webp`, if(gen_thumb==true){
{ method: "HEAD" } fetch(`/ytlist/thumbnails/${item[2]}.webp`,
).then((res) => { { method: "HEAD" }
if (res.ok) { ).then((res) => {
insert_item(item,res.url); if (res.ok) {
} else { insert_item(item,res.url);
fetch(`/ytlist/thumbnails/${item[2]}.jpg`, } else {
{ method: "HEAD" } fetch(`/ytlist/thumbnails/${item[2]}.jpg`,
).then((res) => { { method: "HEAD" }
if (res.ok) { ).then((res) => {
insert_item(item,res.url); if (res.ok) {
} else { insert_item(item,res.url);
insert_item(item,null); } else {
} insert_item(item,null);
}); }
} });
}); }
});
} else {
insert_item(item,null)
}
} }
async function search(){ async function search(){
@ -54,6 +63,7 @@ async function search(){
let res = db.exec(query); let res = db.exec(query);
the_box.innerHTML=""; the_box.innerHTML="";
gen_thumb=gen_thumb_check.checked
res[0].values.forEach(item=>{get_item(item)}); res[0].values.forEach(item=>{get_item(item)});
} }