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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

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_nkTWcYuZp@o5!nT4H|ofQb!SUG?g2sl`Q0ziV5lZ}Iu
zl~tHahMS#3ij#wtPf<cjR#0A8UYJ`+LP<_SMo3tQ5vY!x4XB=jRfvO?Lx^PX{{Vv^
z2SXG?1v8@(1Ct;lvmoRDBMj0&2Qo2(oC*hwEKJPoY^*>@TLA_pMkZz;kCzoH&BVye
z!YU}lCalP=WN73Vlqlj<STyO9XlP^0#3>sO9y)yS@(1z2q?FA-?II|~f(-zP3L;wu
z5xvF0!whtXAhRHYJ;Qqkkl>7_lEx0B3nq*pqOn6Qp#dbyz#x#eDrsq#7Ne&0w8l?n
z%~@{>!lKNjZ(W@wdh1?~vz2mb+U7Hdmbc6N;h$);B5Hj&*RFiu?9#su-=rIN*u;EV
z?tk{+{il09{%n?iwdjwpeO&x4=G%EZQH_tor&`&S@rVD}a_`do)6F?W^E2*Rq&}+B
zy0!g2Lsj{*%v6&H(ypn!&Oeo{Y&EWY`zji=Mcr-bV}sK#Cf!YC+Q9>M-AV3k-K#>D
zwEnhyw4h*3)uTLpL+-ZR;IMa3x0ZYk+pP3wR;a=<U(e^(<?|L-`>XB|I#kHLI$EV-
zsd;GFv~7=8uU=O2?L!;W3|q5%IcpMvGc`-iIZOA(RcVEWFJ2ZsTX@PkpQWeQw%tv%
z=c&wF)t&42b?tZWop-H{yo}oUe7#yc&w-B%zE*Q@66{-gHEVlu)|M<?(U2wU-iA(&
z%ROckv((?b<F@b8>h7=^Wm{K=-JM&t=E}UF)EW!MuRHD6n-uz(Zq4l48g=(i*e0XY
zFQ?`<J>yf~^me(xVb!XzPnZ9lDto=(f=ka)&jI9Fq1M}OkL4!yNWZk3U=e%DD|Aio
zrKwqqt1gBm)g6|~*VKA(sb|urzO_?U>q|_{J9*}Jb#BX*jk|Z1dEU7jy0S1oN_?hv
z=+mcB)lzCv{H?33FR-q0`uFJTw6$-qW-pJp&>ytgTC3#A{#%?iUQbu(PPuzMyL7I1
zwrPB^RJ6sjlGOP^%TgM%`H!s2+4@uUZguRN%+<SBom^RMTB{m4|H;S9yqjrnCmBmE
z-pf$yJIS}APh$VOX!A`UK7W&4_OLJZ<T}xyt#`Gbc}AJdK7Q}ill4(SfkM-(lEaFp
z-z(YG!?sMp1011VCmDEWZ7q&WT)bOrv)swGYuDaipPg^Fb+6<fg*3KhhjpUYw%^=-
zHskj)dzOfr$n>vS_6zqL&XBs!vng(!eA<4K#qVZ^-D@h<&Aohe`=b3VJ;xGqroVX;
Wx9T`+e`qz28pIZ`RY*kr|C<0Vg`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