Loading, padding, pfps work now

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") {
+        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 += `
+                <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>
+                `
+            } 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>
+                `
+            } else {
+                console.log(result.type)
             }    
-            videosHTML += `
+        } catch (error) {
-            <div class="col-xxl-4 col-sm-6 resultContainer">
+            console.error(error)
-                <div class="videoResult container-fluid row">
+            console.log(result)
-                    <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>
-            `
-        } 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>
-                    </div>
-                </div>
-            </div>
-            `
-        } else {
-            console.log(result.type)
         }
     }
 
@@ -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) => {
+// 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}`,
-    );
+//     );
-});
+// });

resources/mainPage.html

@@ -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>
+        <p class="chip">
-            <a href="https://codeberg.org/Bingus_Violet/SimpleTube">Codeberg</a>
+            <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>
 

static/mainStyle.css

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