diff --git a/.gitignore b/.gitignore index 04cb6b6..1201210 100644 --- a/.gitignore +++ b/.gitignore @@ -5,3 +5,5 @@ thumberr.txt thumbnails/** vids/** title_vids/** +web/ytlist/sql-wasm.js +web/ytlist/sql-wasm.wasm diff --git a/README.md b/README.md index 4178d87..057c122 100644 --- a/README.md +++ b/README.md @@ -5,6 +5,8 @@ A simplish set of bash scripts to have a locally stored youtube playlist using fzf and sqlite3 with thumbnails +there is also a web frontend in ``web`` + Technically you can modify this to store anything other than just yt videos ![noimg](https://github.com/iceyrazor/youtube-playlist-cli/blob/main/example.png?raw=true) diff --git a/web/README.md b/web/README.md new file mode 100644 index 0000000..029d3d7 --- /dev/null +++ b/web/README.md @@ -0,0 +1,17 @@ +# the web page + +this isnt perfect takes longer to load the more there is. + +![noimg](https://github.com/iceyrazor/youtube-playlist-cli/blob/main/web/example-web.png?raw=true) + +- download [https://github.com/sql-js/sql.js/releases/tag/v1.13.0](https://github.com/sql-js/sql.js/releases/tag/v1.13.0) sql-wasm.js and sql-wasm.wasm +- put both files in web/ytlist +- get some sort of webserver. (tis free. i reccomend caddy) +- either + - download rsync + - edit upload-web.sh to your server target directory or ssh + - run upload-web.sh +- or + - copy all the files in web/ytlist and ytlist.html to your webserver + - then copy thumbnails directory to your webserver/ytlist +- goto webpage /ytlist.html diff --git a/web/example-web.png b/web/example-web.png new file mode 100644 index 0000000..281b52f Binary files /dev/null and b/web/example-web.png differ diff --git a/web/upload-web.sh b/web/upload-web.sh new file mode 100755 index 0000000..d315475 --- /dev/null +++ b/web/upload-web.sh @@ -0,0 +1,6 @@ +cd "$(dirname "$0")" + +rsync -Ra --progress ./ytlist.html ./ytlist/ serv:~/servers/local_html + +cd ../ +rsync -Ra --progress ./thumbnails serv:~/servers/local_html/ytlist/ diff --git a/web/ytlist.html b/web/ytlist.html new file mode 100644 index 0000000..02ca50d --- /dev/null +++ b/web/ytlist.html @@ -0,0 +1,20 @@ + + + + + + + + + +
+ + diff --git a/web/ytlist/ytlist.css b/web/ytlist/ytlist.css new file mode 100644 index 0000000..47f6446 --- /dev/null +++ b/web/ytlist/ytlist.css @@ -0,0 +1,35 @@ +a:link { + text-decoration: none; +} + +a:visited { + text-decoration: none; +} + +a:hover { + text-decoration: none; +} + +a:active { + text-decoration: none; +} + +#the_box{ + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-gap: 5px; +} + +#the_box img { + width: 100%; +} + +.video-title, .video-channelname{ + text-decoration: none; + color: #222222; +} + + +.video-title{ + font-size: 24px +} diff --git a/web/ytlist/ytlist.js b/web/ytlist/ytlist.js new file mode 100644 index 0000000..d4ab060 --- /dev/null +++ b/web/ytlist/ytlist.js @@ -0,0 +1,79 @@ +function insert_item(item,imgurl){ + the_box.innerHTML+=`
+ + ${item[0]}: ${item[1]} + ${item[3]} +
+ + +
` +} + +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+=` ${item[0]}
` + } + }) + +} +init()