From b6b6e44992f890399a96d96821351fe6956eb633 Mon Sep 17 00:00:00 2001
From: Violet <Violetbutagain@gmail.com>
Date: Mon, 30 Oct 2023 00:57:48 -0500
Subject: [PATCH] SEARCH CACHING!!!

---
 index.js             | 49 ++++++++++++++++++++++++++++++++++----------
 static/mainStyle.css | 23 +++++++++++++++++----
 2 files changed, 57 insertions(+), 15 deletions(-)

diff --git a/index.js b/index.js
index 0c825ba..c9b0402 100644
--- a/index.js
+++ b/index.js
@@ -13,8 +13,8 @@ const cssPath = path.join(staticPath, 'mainStyle.css')
 
 const resources = path.join(__dirname, 'resources')
 
-const cachePath = path.join(__dirname, 'cache')
-// const cachePath = "/tmp/cache/SimpleTube"
+const cachePath = path.join(__dirname, 'cache/videos')
+const searchCacheDur = (process.env.SEARCH_DUR || 24) * 3600000
 
 const playerPath = path.join(resources, 'player.html')
 const searchPath = path.join(resources, 'searchPage.html')
@@ -31,6 +31,7 @@ fs.mkdirSync(cachePath)
 
 
 var videoCache = {}
+var searchCache = {}
 
 var app = express()
 
@@ -42,13 +43,13 @@ app.listen(PORT, () => {
     console.log("Simpletube is now listening on port: " + PORT)
 })
 
-function cacher(id, ready) {
-    console.log(id)
+async function cacher(id, ready) {
     vidpath = path.join(__dirname, `cache/${id}.mp4`)
 
     var debounce = true
 
     var dp = 0
+    var vidInfo = await ytdl.getBasicInfo(id)
     var video = ytdl(id, { filter: 'videoandaudio', quality: "highest", format: 'mp4' })
         .on("progress", (chunk, ct, et) => {
             
@@ -59,7 +60,8 @@ function cacher(id, ready) {
                     "size": et,
                     "downloaded": false,
                     "download%": 0,
-                    "lastUsed": new Date().getTime()
+                    "lastUsed": new Date().getTime(),
+                    "duration": (vidInfo.videoDetails.lengthSeconds + 1) * 1000
                 }
 
                 ready(vidpath, fs.readFileSync(vidpath))
@@ -81,7 +83,8 @@ function cacher(id, ready) {
 app.get("/search", async (req, res) => {
     var search = req.query.q || "How to search on SimpleTube"
     res.setHeader("Content-Type", "text/html")
-    youtube.search(search, { type: "all" }).then((results) => {
+
+    function searchReturn(results) {
         var videos = results.videos
 
         var html = fs.readFileSync(searchPath).toString()
@@ -125,20 +128,20 @@ app.get("/search", async (req, res) => {
             addedHTML += `
             <div class="col-xxl-4 col-sm-6 resultContainer">
                 <div class="videoResult container-fluid row">
-                    <div class=" col-lg-6 thumbparent">
+                    <div class="col-lg-6 thumbparent">
                         <a class="videoLink" href="/watch?v=${result.id}">
                             <img class="thumbnail" src="${result.thumbnail}">
                             <p style="display: block; text-align: left;">${result.durationString}</p>
                         </a>
                     </div>
-                    <div class=" col-lg-6">
+                    <div class="col-lg-6">
                         <a class="videoLink" href="/watch?v=${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: inline-block; width: 100%; ">
+                    <div style="display: inline-block; width: 100%;">
                         <a style="color: white; margin: 10px; display: inline-block;" href="${result.channel.link}">
                         <img src="${result.channel.thumbnail}" class="minipfp">
                         ${result.channel.name}
@@ -150,7 +153,31 @@ app.get("/search", async (req, res) => {
         }
 
         res.send(html.replace("{RESULTS}", addedHTML))
-    })
+    }
+
+    var tA = Object.keys(searchCache)
+
+
+    for (let index = 0; index < tA.length; index++) {
+        itemName = tA[index]
+        const item = searchCache[itemName];
+
+        if (item[1] < Date.now()) {
+            console.log("Deleted!")
+            delete searchCache[search]
+        }
+    }
+
+    if (search in searchCache) {
+        searchReturn(searchCache[search][0])
+        searchCache[search][1] = Date.now() + searchCacheDur
+    } else {
+        youtube.search(search, { type: "all" })
+        .then((result)=> {
+            searchReturn(result)
+            searchCache[search] = [result, Date.now() + searchCacheDur]
+        })
+    }
 })
 
 app.get("/video", async (req, res) => {
@@ -212,7 +239,7 @@ app.get("/video", async (req, res) => {
             }
         } else {
             videoCache[id] = []
-            var video = cacher(id, ready)
+            var video = await cacher(id, ready)
             video.pipe(fs.createWriteStream(vidpath))
         }
 
diff --git a/static/mainStyle.css b/static/mainStyle.css
index b65d17b..d771c97 100644
--- a/static/mainStyle.css
+++ b/static/mainStyle.css
@@ -117,25 +117,39 @@ p {
     background-color: black;
     border: 2px gray solid;
     border-radius: 10px;
-    padding: 3px;
+    padding: 2px;
     margin: auto;
     text-align: left;
     height: 100%;
     overflow: hidden;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 720px) {
     .resultContainer {
         max-width: 450px;
     }
 }
 
+@media (min-width: 720px) and (max-width: 992px) {
+    .resultContainer {
+        max-width: 450px;
+    }
+}
+
+@media (min-width: 992px) {
+    .resultContainer {
+        max-width: 550px;
+    }
+}
+
 .resultContainer {
-    margin: 5px auto;
+    margin: 0 auto;
+    padding: 5px;
 }
 
 .thumbnail {
     width: 100%;
+    max-width: 350px;
     margin: auto;
     border-radius: 20px;
     aspect-ratio: 16/9;
@@ -167,11 +181,12 @@ p {
 }
 
 main {
-    padding: 10px;
+    padding: 5px;
 }
 
 .pfp {
     width: 100%;
+    max-width: 150px;
     border-radius: 50%;
     border: white 2px solid;
     margin: 15px auto;