Violet/SimpleTube
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Loading, padding, pfps work now

Browse source
This commit is contained in:
Bingus_Violet 2024-02-14 15:38:05 -06:00
parent a55036e7d0
commit d20ea8c743
3 changed files with 76 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

121
index.js
View file

@ -35,61 +35,66 @@ function searchResultToHTML(results) {
var addedHTML = "" var addedHTML = ""
for (let index = 0; index < results.length; index++) { for (let index = 0; index < results.length; index++) {
const result = results[index].content || results[index]; const result = results[index].content || results[index];
if (result && result.type == "Video" && result.published && result.duration != "N/A") { try {
if (!result.description_snippet) { if (result && result.type == "Video" && result.published && result.duration.text != "N/A" && result.thumbnails && result.author.thumbnails) {
if (result.snippets) { if (!result.description_snippet) {
result.description_snippet = result.snippets[0].text.runs[0] if (result.snippets) {
} else { result.description_snippet = result.snippets[0].text.runs[0]
result.description_snippet = {text: ''} } else {
result.description_snippet = {text: ''}
}
} }
} videosHTML += `
videosHTML += ` <div class="col-xxl-4 col-sm-6 resultContainer">
<div class="col-xxl-4 col-sm-6 resultContainer"> <div class="videoResult container-fluid row">
<div class="videoResult container-fluid row"> <div class="col-lg-6 thumbparent">
<div class="col-lg-6 thumbparent"> <a class="videoLink" href="/watch?v=${result.id}">
<a class="videoLink" href="/watch?v=${result.id}"> <img class="thumbnail" src="${getThumbor()}/${result.thumbnails[0].url}">
<img class="thumbnail" src="${getThumbor()}/${result.thumbnails[0].url}"> <p style="display: block; text-align: left;">${result.duration.text}</p>
<p style="display: block; text-align: left;">${result.duration.text}</p> </a>
</a> </div>
</div> <div class="col-lg-6">
<div class="col-lg-6"> <a class="videoLink" href="/watch?v=${result.id}">
<a class="videoLink" href="/watch?v=${result.id}"> <p style="font-size: 1.25rem;">${result.title.text || "No Title Found"}</p>
<p style="font-size: 1.25rem;">${result.title.text || "No Title Found"}</p> <p class="resultDescription">${(result.description_snippet).text}</p>
<p class="resultDescription">${(result.description_snippet).text}</p> <p style="display: block;">${result.published.text}</p>
<p style="display: block;">${result.published.text}</p> </a>
</a> </div>
</div> <div style="display: inline-block; width: 100%;">
<div style="display: inline-block; width: 100%;"> <a style="color: white; margin: 10px; display: inline-block;" href="/channel?q=${result.author.id}">
<a style="color: white; margin: 10px; display: inline-block;" href="/channel?q=${result.author.id}"> <img src="${getThumbor()}/${result.author.thumbnails[0].url}" class="minipfp">
<img src="${getThumbor()}/${result.author.thumbnails[0].url}" class="minipfp"> ${result.author.name}
${result.author.name} </a>
</a> </div>
</div> </div>
</div> </div>
</div> `
` } else if (result.type == "Channel" && result.author.thumbnails[0]) {
} else if (result.type == "Channel" && result.author.thumbnails[0]) { channelsHTML += `
channelsHTML += ` <div class="col-xxl-4 col-sm-6 resultContainer">
<div class="col-xxl-4 col-sm-6 resultContainer"> <div class="videoResult container-fluid row">
<div class="videoResult container-fluid row"> <div class="col-lg-6 thumbparent">
<div class="col-lg-6 thumbparent"> <a class="videoLink" href="/channel?v=${result.id}">
<a class="videoLink" href="/channel?v=${result.id}"> <img class="pfp" src="${getThumbor()}/https:${result.author.thumbnails[0].url}">
<img class="pfp" src="${getThumbor()}/${result.author.thumbnails[0].url}"> <p style="display: block; text-align: left;">${result.video_count.text}</p>
<p style="display: block; text-align: left;">${result.video_count.text}</p> </a>
</a> </div>
</div> <div class="col-lg-6">
<div class="col-lg-6"> <a class="videoLink" href="/channel?v=${result.id}">
<a class="videoLink" href="/channel?v=${result.id}"> <p style="font-size: 1.25rem;">${result.author.name}<br>
<p style="font-size: 1.25rem;">${result.author.name}<br> <span class="note">${result.subscriber_count.text}</span></p>
<span class="note">${result.subscriber_count.text}</span></p> <p class="resultDescription">${(result.description_snippet).text}</p>
<p class="resultDescription">${(result.description_snippet).text}</p> </a>
</a> </div>
</div> </div>
</div> </div>
</div> `
` } else {
} else { console.log(result.type)
console.log(result.type) }
} catch (error) {
console.error(error)
console.log(result)
} }
} }
@ -100,6 +105,8 @@ function searchResultToHTML(results) {
addedHTML += videosHTML addedHTML += videosHTML
} }
addedHTML += "<style>#hideOnLoad { display: none; }</style>"
return addedHTML return addedHTML
} }
@ -140,10 +147,10 @@ app.get("/search", async (req, res) => {
res.write(addedHTML + html.substring(html.indexOf("{RESULTS}") + 9), () => {res.end()}) res.write(addedHTML + html.substring(html.indexOf("{RESULTS}") + 9), () => {res.end()})
}) })
process.on('uncaughtException', (err, origin) => { // process.on('uncaughtException', (err, origin) => {
fs.writeSync( // fs.writeSync(
process.stderr.fd, // process.stderr.fd,
`Caught exception: ${err}\n` + // `Caught exception: ${err}\n` +
`Exception origin: ${origin}`, // `Exception origin: ${origin}`,
); // );
}); // });

7
resources/mainPage.html
View file

@ -27,11 +27,12 @@
<h1>Welcome to SimpleTube</h1> <h1>Welcome to SimpleTube</h1>
<p>SimpleTube is a Youtube client that aims to be free, fast, and javascript free. (and has no ads!) </p> <p>SimpleTube is a Youtube client that aims to be free, fast, and javascript free. (and has no ads!) </p>
<p> <p class="chip">
<a href="https://codeberg.org/Bingus_Violet/SimpleTube">Codeberg</a> <a href="https://codeberg.org/Univerter/SimpleTube">Codeberg</a>
</p> </p>
<div class="row container-fluid"> <h2 id="hideOnLoad">Loading...</h2>
<div class="row container-fluid results">
{RESULTS} {RESULTS}
</div> </div>

15
static/mainStyle.css
View file

@ -1,5 +1,6 @@
body, html { body, html {
min-height: 100vh; min-height: 100vh;
widtH: 100vw;
padding: 0; padding: 0;
margin: 0; margin: 0;
background-color: rgb(40, 30, 50); background-color: rgb(40, 30, 50);
@ -11,12 +12,12 @@ body, html {
line-height: 1.5rem; line-height: 1.5rem;
} }
/* div { .results {
padding: 0 !important; padding: 0 !important;
margin: 0 !important; margin: 0 !important;
} */ }
a:not(h1 > a):not(.videoLink) { .chip {
font-size: 1.25rem; font-size: 1.25rem;
background-color: black; background-color: black;
padding: 8px; padding: 8px;
@ -25,7 +26,7 @@ a:not(h1 > a):not(.videoLink) {
border-radius: 8px; border-radius: 8px;
color: rgb(240, 220, 255); color: rgb(240, 220, 255);
text-decoration: none; text-decoration: none;
display: inline; display: inline-block;
} }
.videoLink { .videoLink {
@ -158,11 +159,11 @@ p {
margin: 5px auto; margin: 5px auto;
} }
.thumbparent { /* .thumbparent {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
display: flex; display: flex;
} } */
/* @media (max-width: 1200px) and (min-width: 992px) { /* @media (max-width: 1200px) and (min-width: 992px) {
.resultDescription { .resultDescription {
@ -181,7 +182,7 @@ p {
} }
main { main {
padding: 5px; padding: 15px;
} }
.pfp { .pfp {