Updated the client

public/index.js

@@ -5,6 +5,11 @@ let Socket = io();
     console.log('Starting up');
 })();
 
+function DownloadButtonPressed(format, id)
+{
+    alert(`${format} ${id}`);
+}
+
 const VideoInput = document.getElementById('VideosToRecord');
 
 VideoInput.oninput = () => 

public/style.css

@@ -34,19 +34,42 @@ h {
     font-weight: 400;
 }
 
-#VideoContainer {
-    padding: 30px, 0px, 30px, 0px;
+.table {
+    width: 60%;
 }
 
-#VideoBox {
-    padding-top: 10px;
-    font-weight: lighter;
+.thumbnail {
+    max-width: 150%;
+    height: auto;
 }
 
-#Updater {
-    position: absolute;
-    top: 5px;
-    right: 10px;}
+.videotitle {
+    font-size: 1rem;
+}
+
+.channel {
+    font-size: 0.9rem;
+}
+
+.views {
+    font-size: 0.9rem;
+}
+
+.desc {
+    font-size: 0.8rem;
+    display: inline-block;
+    text-overflow: ellipsis;
+    word-wrap: break-word;
+    overflow: hidden;
+    line-height: 1.2em;
+    max-height: 2.4em;
+    font-style: italic;
+}
+
+.downloadbuttons {
+    font-size: 0.8rem;
+    
+}
 
 #copyright {
     position: absolute;

public/youtubedombuilder.js

@@ -43,20 +43,32 @@ function ResolvedBasic(BasicResolution)
 
 function VideoElement(id, title, desc, views, thumbnail, channel, runtime)
 {
-    // assumes the div has already been created
+    
+    
+    // format views so theres commas
+    // in it ennit - Will is a stupid
+    // "Fuck you, of course it's a string" - b_boy_ww 2020
+    views = parseInt(views);
+    views = views.toLocaleString('en-US');
+
     return `
-        <table>
+        <table class="table">
         <tr>
-            <td rowspan="3"><a href="https://www.youtube.com/watch?v=${id}"><img src="${thumbnail}"></a></td>
-            <td colspan="3">${title}</td>
+            <td rowspan="4" class="thumbnail"><a href="https://www.youtube.com/watch?v=${id}"><img src="${thumbnail}"></a></td>
+            <td colspan="4" class="videotitle">${title}</td>
         </tr>
         <tr>
-            <td>${channel}</td>
-            <td>${views}</td>
-            <td>${runtime}</td>
+            <td class="channel">${channel}</td>
+            <td class="views">${views} views</td>
+            <td></td>
+            <td></td>
         </tr>
         <tr>
-            <td colspan="3">${desc}</td>
+            <td colspan="4" class="desc">${desc}</td>
+        </tr>
+        <tr>
+            <td colspan="2" class="downloadbuttons"><button onclick="DownloadButtonPressed('MP4(MAX)', ${id})">Download Video</button> </td>
+            <td colspan="2" class="downloadbuttons"><button onclick="DownloadButtonPressed('MP3(MAX)', ${id})">Download Audio</button> </td>
         </tr>
         </table>
     `;

src/config.js

@@ -9,8 +9,8 @@ module.exports.Load = () =>
         ListenPort: 8080,
         PublicDirectory: 'public',
         StorageDirectory: './tmp/',
-        CacheCleanInterval: 30000, // 5 mins
-        CacheTimeToUse: 60000, // 10 mins
+        CacheCleanInterval: 300000, // 5 mins
+        CacheTimeToUse: 600000, // 10 mins
     }
     Logger.Log('Configuration loaded');
 }