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

Much improved search UI, fallbacks for images.

Browse source
This commit is contained in:
Violet 2023-10-29 00:01:40 -05:00
parent 00eb2b5979
commit 9126a9f1c3
7 changed files with 69 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
index.js
View file

@ -54,24 +54,28 @@ app.get("/search", async (req, res) => {
for (let index = 0; index < videos.length; index++) {
const result = videos[index];
addedHTML += `
<div class="videoResult container row">
<div class="col-md-4 col-sm-6">
<a class="videoLink" href="/watch?q=${result.id}">
<img src="${result.thumbnail}">
</a>
</div>
<div class="col-md-8 col-sm-6">
<a class="videoLink" href="/watch?q=${result.id}">
<h3>${result.title}</h3>
<p>${result.description}</p><br>
<img src="${result.channel.thumbnail}" class="minipfp">
<a style="color: white; class="videoLink" href="${result.channel.link}">${result.channel.name}</a>
</a>
<div class="col-xxl-4 col-lg-6 col-md-12 col-sm-6 resultContainer">
<div class="videoResult container-fluid row">
<div class="col-md-4 col-lg-6 thumbparent">
<a class="videoLink" href="/watch?q=${result.id}">
<img class="thumbnail" src="${result.thumbnail}; /Images/UnknownVideo.jpg">
</a>
</div>
<div class="col-md-8 col-lg-6">
<a class="videoLink" href="/watch?q=${result.id}">
<p style="font-size: 1.25rem;">${result.title || "No Title Found"}</p>
<p class="resultDescription">${result.description.substring(0, 75) + "..." || "No Description"}</p>
</a>
</div>
<div style="display: block; width: 100%; ">
<a style="color: white; margin: 10px; display: inline-block;" href="${result.channel.link}">
<img src="${result.channel.thumbnail}; /Images/UnknownPFP.jpg" class="minipfp">
${result.channel.name}
</a>
</div>
</div>
</div>
`
console.log(result)
}
res.send(html.replace("{RESULTS}", addedHTML))
@ -136,9 +140,9 @@ app.get("/video", async (req, res) => {
var debounce = true
var dp = 0
ytdl(id, { filter: "videoandaudio", quality: "highest", format: 'mp4' })
ytdl(id, { filter: 'videoandaudio', quality: "highest", format: 'mp4' })
.on("progress", (chunk, ct, et) => {
if (debounce) {
if (debounce && ct > Math.min(et, 5000000)) {
debounce = false
videoCache[id] = {
"path": vidpath,
@ -149,7 +153,7 @@ app.get("/video", async (req, res) => {
ready(vidpath, fs.readFileSync(vidpath))
}
var percent = Math.round(ct / et * 100)
if (percent > dp) {
if (!debounce && percent > dp) {
dp = percent
videoCache[id]["download%"] = dp
}
@ -206,7 +210,7 @@ app.get("/watch", async (req, res) => {
if (!(id in videoCache && videoCache[id]["downloaded"] == true)) {
html = html.replace("{CACHE_WARNING}", `
<p style="color: lightgray">Please note that this video has not been fully cached, and may have trouble loading!
<br>{DOWNLOAD_PERCENT}% cached (as of page load).</p>
<br>{DOWNLOAD_PERCENT}% cached as of page load. If content fails to load after a minute, reload the page!</p>
`)
if (id in videoCache && "download%" in videoCache[id]) {
html = html.replace("{DOWNLOAD_PERCENT}", videoCache[id]["download%"])

4
resources/player.html
View file

@ -32,10 +32,10 @@
<hr>
<main>
<h2 id="title">{VIDEO_TITLE}</h2>
{CACHE_WARNING}
<div id="description">
{CACHE_WARNING}
<h2>Description: <br></h2>
<p id="description">{VIDEO_DESCRIPTION}</p>
<p>{VIDEO_DESCRIPTION}</p>
</div>
</main>
</body>

4
resources/searchPage.html
View file

@ -14,10 +14,10 @@
<body>
<div id="titleBar" class="row container-fluid">
<div class="col-sm-5">
<div class="col-5">
<h1><a href="/">Simpletube</a></h1>
</div>
<div class="col-sm-7">
<div class="col-7">
<form action="/search">
<input type="text" placeholder="Search" name="q" value="{SEARCH}">
</form>

BIN
static/Images/UnknownPFP.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.1 KiB

BIN
static/Images/UnknownVideo.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

2
static/index.html
View file

@ -13,7 +13,7 @@
</head>
<body>
<div id="titleBar" class="row container">
<div id="titleBar" class="row container-fluid">
<div class="col-sm-5">
<h1><a href="/">Simpletube</a></h1>
</div>

48
static/mainStyle.css
View file

@ -17,7 +17,7 @@ body, html {
} */
a:not(h1 > a):not(.videoLink) {
font-size: 1.5rem;
font-size: 1.25rem;
background-color: black;
padding: 8px;
margin: 5px;
@ -25,6 +25,7 @@ a:not(h1 > a):not(.videoLink) {
border-radius: 15px;
color: rgb(240, 220, 255);
text-decoration: none;
display: inline;
}
.videoLink {
@ -42,7 +43,7 @@ a:not(h1 > a):not(.videoLink) {
}
#titleBar {
width: 100vw;
width: 100%;
background-color: rgb(5, 0, 10);
/* border: 0px; */
border: 2px transparent solid;
@ -50,7 +51,7 @@ a:not(h1 > a):not(.videoLink) {
position: sticky;
top: 0px;
margin: 0;
padding: 0;
padding: 10px;
}
#titleBar > div > * {
@ -109,22 +110,52 @@ a:not(h1 > a):not(.videoLink) {
}
p {
padding: 5px;
padding: 2px;
}
.videoResult {
background-color: black;
border: 2px gray solid;
border-radius: 10px;
padding: 10px;
margin: 10px;
padding: 3px;
margin: auto;
text-align: left;
height: 100%;
}
img {
width: 70%;
@media (max-width: 768px) {
.resultContainer {
max-width: 450px;
}
}
.resultContainer {
margin: 5px auto;
}
.thumbnail {
width: 100%;
margin: auto;
border-radius: 20px;
aspect-ratio: 16/9;
object-fit: cover;
border: 2px white solid;
margin: 5px auto;
}
.thumbparent {
justify-content: center;
align-items: center;
display: flex;
}
/* @media (max-width: 1200px) and (min-width: 992px) {
.resultDescription {
display: none;
}
} */
.minipfp {
width: 60px;
height: 60px;
@ -132,4 +163,5 @@ img {
border-radius: 50%;
padding: 0;
margin: 0;
display: inline-block;
}