From 9126a9f1c303505e1b525f05dde3452b9f6ac02c Mon Sep 17 00:00:00 2001
From: Violet <Violetbutagain@gmail.com>
Date: Sun, 29 Oct 2023 00:01:40 -0500
Subject: [PATCH] Much improved search UI, fallbacks for images.

---
 index.js                       |  44 ++++++++++++++++--------------
 resources/player.html          |   4 +--
 resources/searchPage.html      |   4 +--
 static/Images/UnknownPFP.jpg   | Bin 0 -> 7231 bytes
 static/Images/UnknownVideo.jpg | Bin 0 -> 1097 bytes
 static/index.html              |   2 +-
 static/mainStyle.css           |  48 +++++++++++++++++++++++++++------
 7 files changed, 69 insertions(+), 33 deletions(-)
 create mode 100644 static/Images/UnknownPFP.jpg
 create mode 100644 static/Images/UnknownVideo.jpg

diff --git a/index.js b/index.js
index 6a5c5d2..d09d122 100644
--- a/index.js
+++ b/index.js
@@ -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,20 +140,20 @@ 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,
                             "size": et,
                             "downloaded": false,
                             "download%": 0
-                        }
+                        } 
                         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%"])
diff --git a/resources/player.html b/resources/player.html
index a37005a..1a1153b 100644
--- a/resources/player.html
+++ b/resources/player.html
@@ -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>
diff --git a/resources/searchPage.html b/resources/searchPage.html
index d4de18c..ddff999 100644
--- a/resources/searchPage.html
+++ b/resources/searchPage.html
@@ -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>
diff --git a/static/Images/UnknownPFP.jpg b/static/Images/UnknownPFP.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..aaf0b816ef130a672d5cf48dff0788e14ad2cc00
GIT binary patch
literal 7231
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
Zsfmu3v;BhS`82$W^s6vp{Imc6O#t1{{9ph8

literal 0
HcmV?d00001

diff --git a/static/Images/UnknownVideo.jpg b/static/Images/UnknownVideo.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..09715b54862d341de01f56416cc796ad159785e6
GIT binary patch
literal 1097
zcmex=<NpH&0WUXCHwH#V1_nk3Mh1rew;5U(SeaSaS=m`xSy|awIat|13=URSc2*8n
zR#r|n4o+59VJ;bNb`B{{4pu%z2`O1Yd0}~BZY2pNISCmdVIf9VR#tX4c2*7!Rv`{n
z4k41k{{swy91Kwm70irE3`~NI%z}*nk1$9xFfuSPgPh6$1B@(8%<OEe|Bo=(3NSD+
zGBGo=v+=S*WtkY6Sy%;y*n}0?l?;s>gAzrY3X3LP5)Ex^nK)(R!9#~HUj85+n3S^l
z{}Bce6l1{#fJ6lu!AvCL|1Aa{W<~}kL1sY)dxrN8AgLKmC5;_M7fcvIL}Q0qLIX&Y
zfk7Z`RnpQfEk;f0X^o%EnzP;%ghiQ4-?}<W^wzx|XDj8>w9RJ@EpM0k!#~kxMb!Fm
zu3h=Q*`<FSzDYOku!;G!-2d#s`%m|J{Mju3YSABG`?&a9%(wG+q8cBEPqnfu;}8F{
z<=&<Fr<-$%=4afsNPSeLb!+>5hN|*qnW-iZq+L^coqsA@*=k(*_Ej`!i@Mv=#|Ecg
zOuC!Ow1Wriyp!D9x>toPY5i^aXhFf6sz-VHhTLtr!C~*7ZY}v7wpr=VtWbqzzMjvm
z%jYew_E+5_bf}Pfb+k&wQuENTY1<yHUcId3+lMx$8MbEka@HgSXKI$3bC&LntI`S$
zU%V`Ow(yj7K1)xpZM&Oj&r_MVsyo;3>)P+$JMUT@c^S3y`Fgc@o&z5je68l*B-pp~
zYS#ARtSwo(q9IGxy$zilmwU`8W~sk<$8F!G)!kt;%C@c!yF0gP&6RmUsWldiUw7KC
zH!1Wn-J038HR|r4uuVp(Urx<!dd8=|>FsiX!>UzbpDzD9RrY$n1(%+q9yo@CT5r2O
zmYdWg{nBoNMeHfB&^5i6re-a!x)_#JcUUT4Q|ra0o=Kbf)=pWiFEKUm<eA^qxh+>V
z?%q}AdFO8E%EJ68@tNA8PoG9rOQ}Wix303jz`Dli-=nY7*1o-(y*%PVf6!`ct&%7E
zZ*kUmJzb$Y<?i+D(z)K*rt!s6(H752Qs)aTOKHsJKe8@o>rd6Y)v<3fSMOeRa%Ht?
zt!m`_Cm%EOZl=ARWGuCKFGH>GB;SfYiT&@Q%{P7c{7rV*!@k&)>qLXL-qn8Q8D%#6
z_`Oq4)<*>e3Qey{4lAC1uVhyb+cE_YaD;lDWZ<2(wKy_y@oufnawpfWU3-6hcD~)#
zy^?<v(%6<A)`?!*eslZTjNi-bSt4p8)4yifFWhf9L+U!urnq(TY5PqUzndL)uc=fw
m_wv>4i}ttl981WV{^m{Gs^hHvq18NU5L>`jArbZeZvp@=g`J-O

literal 0
HcmV?d00001

diff --git a/static/index.html b/static/index.html
index b980664..67f7a20 100644
--- a/static/index.html
+++ b/static/index.html
@@ -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>
diff --git a/static/mainStyle.css b/static/mainStyle.css
index 104100a..9d8e834 100644
--- a/static/mainStyle.css
+++ b/static/mainStyle.css
@@ -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;
 }
\ No newline at end of file