Loading, padding, pfps work now
This commit is contained in:
Bingus_Violet
parent
a55036e7d0
commit
d20ea8c743
3 changed files with 76 additions and 67 deletions
121
index.js
121
index.js
|
|
@ -35,61 +35,66 @@ function searchResultToHTML(results) {
|
|||
var addedHTML = ""
|
||||
for (let index = 0; index < results.length; index++) {
|
||||
const result = results[index].content || results[index];
|
||||
if (result && result.type == "Video" && result.published && result.duration != "N/A") {
|
||||
if (!result.description_snippet) {
|
||||
if (result.snippets) {
|
||||
result.description_snippet = result.snippets[0].text.runs[0]
|
||||
} else {
|
||||
result.description_snippet = {text: ''}
|
||||
try {
|
||||
if (result && result.type == "Video" && result.published && result.duration.text != "N/A" && result.thumbnails && result.author.thumbnails) {
|
||||
if (!result.description_snippet) {
|
||||
if (result.snippets) {
|
||||
result.description_snippet = result.snippets[0].text.runs[0]
|
||||
} else {
|
||||
result.description_snippet = {text: ''}
|
||||
}
|
||||
}
|
||||
}
|
||||
videosHTML += `
|
||||
<div class="col-xxl-4 col-sm-6 resultContainer">
|
||||
<div class="videoResult container-fluid row">
|
||||
<div class="col-lg-6 thumbparent">
|
||||
<a class="videoLink" href="/watch?v=${result.id}">
|
||||
<img class="thumbnail" src="${getThumbor()}/${result.thumbnails[0].url}">
|
||||
<p style="display: block; text-align: left;">${result.duration.text}</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<a class="videoLink" href="/watch?v=${result.id}">
|
||||
<p style="font-size: 1.25rem;">${result.title.text || "No Title Found"}</p>
|
||||
<p class="resultDescription">${(result.description_snippet).text}</p>
|
||||
<p style="display: block;">${result.published.text}</p>
|
||||
</a>
|
||||
</div>
|
||||
<div style="display: inline-block; width: 100%;">
|
||||
<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">
|
||||
${result.author.name}
|
||||
</a>
|
||||
videosHTML += `
|
||||
<div class="col-xxl-4 col-sm-6 resultContainer">
|
||||
<div class="videoResult container-fluid row">
|
||||
<div class="col-lg-6 thumbparent">
|
||||
<a class="videoLink" href="/watch?v=${result.id}">
|
||||
<img class="thumbnail" src="${getThumbor()}/${result.thumbnails[0].url}">
|
||||
<p style="display: block; text-align: left;">${result.duration.text}</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<a class="videoLink" href="/watch?v=${result.id}">
|
||||
<p style="font-size: 1.25rem;">${result.title.text || "No Title Found"}</p>
|
||||
<p class="resultDescription">${(result.description_snippet).text}</p>
|
||||
<p style="display: block;">${result.published.text}</p>
|
||||
</a>
|
||||
</div>
|
||||
<div style="display: inline-block; width: 100%;">
|
||||
<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">
|
||||
${result.author.name}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
} else if (result.type == "Channel" && result.author.thumbnails[0]) {
|
||||
channelsHTML += `
|
||||
<div class="col-xxl-4 col-sm-6 resultContainer">
|
||||
<div class="videoResult container-fluid row">
|
||||
<div class="col-lg-6 thumbparent">
|
||||
<a class="videoLink" href="/channel?v=${result.id}">
|
||||
<img class="pfp" src="${getThumbor()}/${result.author.thumbnails[0].url}">
|
||||
<p style="display: block; text-align: left;">${result.video_count.text}</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<a class="videoLink" href="/channel?v=${result.id}">
|
||||
<p style="font-size: 1.25rem;">${result.author.name}<br>
|
||||
<span class="note">${result.subscriber_count.text}</span></p>
|
||||
<p class="resultDescription">${(result.description_snippet).text}</p>
|
||||
</a>
|
||||
`
|
||||
} else if (result.type == "Channel" && result.author.thumbnails[0]) {
|
||||
channelsHTML += `
|
||||
<div class="col-xxl-4 col-sm-6 resultContainer">
|
||||
<div class="videoResult container-fluid row">
|
||||
<div class="col-lg-6 thumbparent">
|
||||
<a class="videoLink" href="/channel?v=${result.id}">
|
||||
<img class="pfp" src="${getThumbor()}/https:${result.author.thumbnails[0].url}">
|
||||
<p style="display: block; text-align: left;">${result.video_count.text}</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<a class="videoLink" href="/channel?v=${result.id}">
|
||||
<p style="font-size: 1.25rem;">${result.author.name}<br>
|
||||
<span class="note">${result.subscriber_count.text}</span></p>
|
||||
<p class="resultDescription">${(result.description_snippet).text}</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
} else {
|
||||
console.log(result.type)
|
||||
`
|
||||
} else {
|
||||
console.log(result.type)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
console.log(result)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -100,6 +105,8 @@ function searchResultToHTML(results) {
|
|||
addedHTML += videosHTML
|
||||
}
|
||||
|
||||
addedHTML += "<style>#hideOnLoad { display: none; }</style>"
|
||||
|
||||
return addedHTML
|
||||
}
|
||||
|
||||
|
|
@ -140,10 +147,10 @@ app.get("/search", async (req, res) => {
|
|||
res.write(addedHTML + html.substring(html.indexOf("{RESULTS}") + 9), () => {res.end()})
|
||||
})
|
||||
|
||||
process.on('uncaughtException', (err, origin) => {
|
||||
fs.writeSync(
|
||||
process.stderr.fd,
|
||||
`Caught exception: ${err}\n` +
|
||||
`Exception origin: ${origin}`,
|
||||
);
|
||||
});
|
||||
// process.on('uncaughtException', (err, origin) => {
|
||||
// fs.writeSync(
|
||||
// process.stderr.fd,
|
||||
// `Caught exception: ${err}\n` +
|
||||
// `Exception origin: ${origin}`,
|
||||
// );
|
||||
// });
|
||||
|
|
@ -27,11 +27,12 @@
|
|||
<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>
|
||||
<a href="https://codeberg.org/Bingus_Violet/SimpleTube">Codeberg</a>
|
||||
<p class="chip">
|
||||
<a href="https://codeberg.org/Univerter/SimpleTube">Codeberg</a>
|
||||
</p>
|
||||
|
||||
<div class="row container-fluid">
|
||||
<h2 id="hideOnLoad">Loading...</h2>
|
||||
<div class="row container-fluid results">
|
||||
{RESULTS}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
body, html {
|
||||
min-height: 100vh;
|
||||
widtH: 100vw;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: rgb(40, 30, 50);
|
||||
|
|
@ -11,12 +12,12 @@ body, html {
|
|||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
/* div {
|
||||
.results {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
} */
|
||||
}
|
||||
|
||||
a:not(h1 > a):not(.videoLink) {
|
||||
.chip {
|
||||
font-size: 1.25rem;
|
||||
background-color: black;
|
||||
padding: 8px;
|
||||
|
|
@ -25,7 +26,7 @@ a:not(h1 > a):not(.videoLink) {
|
|||
border-radius: 8px;
|
||||
color: rgb(240, 220, 255);
|
||||
text-decoration: none;
|
||||
display: inline;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.videoLink {
|
||||
|
|
@ -158,11 +159,11 @@ p {
|
|||
margin: 5px auto;
|
||||
}
|
||||
|
||||
.thumbparent {
|
||||
/* .thumbparent {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
} */
|
||||
|
||||
/* @media (max-width: 1200px) and (min-width: 992px) {
|
||||
.resultDescription {
|
||||
|
|
@ -181,7 +182,7 @@ p {
|
|||
}
|
||||
|
||||
main {
|
||||
padding: 5px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.pfp {
|
||||
|
|
|
|||
Loading…
Reference in a new issue