Resolverrrr

public/index.html

@@ -17,9 +17,12 @@
             <textarea id="VideosToRecord"></textarea>
         </div>
 
+        <div id="ResolvedVideoContainer"></div>
+
         <!-- <button id="Download">Download</button> -->
         <!-- <input type="checkbox" id="AudioOnly">Only Download Audio (.mp3) -->
 
+        <script src="youtubedombuilder.js"></script>
         <script src="index.js"></script>
         <div id="copyright">Copyright Benjamin Kyd© <script type="text/javascript">document.write(new Date().getFullYear())</script></div>
     </body>

public/index.js

@@ -5,7 +5,7 @@ let Socket = io();
     console.log('Starting up');
 })();
 
-const VideoInput = document.getElementById("VideosToRecord");
+const VideoInput = document.getElementById('VideosToRecord');
 
 VideoInput.oninput = () => 
 {
@@ -17,6 +17,15 @@ VideoInput.oninput = () =>
     Socket.emit('VideoListUpdate', ToSend);
 };
 
-Socket.on('VideoListResolution', (req) => console.log(req));
+Socket.on('VideoListResolution', (res) => 
+{
+    if (res.Error === true) return;
+    ResolvedBasic(res.Content);
+});
 
-Socket.on('VideoListResolved', (req) => console.log(req));
+Socket.on('VideoListResolved', (res) =>
+{
+    console.log(res);
+    if (res.Error === true) return;
+    ResolvedVideos(res.Content);
+});

public/youtubedombuilder.js

@@ -0,0 +1,91 @@
+let VideoList = []; // Array indexed by video ID
+
+const ResolvedVideoContainer = document.getElementById('ResolvedVideoContainer');
+
+function CleanUp()
+{
+
+}
+
+function ResolvingElement(id, url, status, error = 'An unknown error occured')
+{
+    console.log(status);
+    if (status == 'Resolving')
+        return `<div id="${id}"> URL: ${url} <br>Status: Resolving...</div><br>`
+    if (status == 'Error')
+        return `<div id="${id}"> URL: ${url} <br>Status: Error, ${error}</div><br>`
+}
+
+function ResolvedBasic(BasicResolution)
+{
+    for (res of BasicResolution)
+    {
+        // url is not valid
+        if (res.id == -1) 
+        {
+            console.log(`Video: ${res.url} will not be resolved`);
+            continue;
+        }
+
+        if (VideoList[res.id]) continue;
+
+        const action = res.action;
+        ResolvedVideoContainer.innerHTML += ResolvingElement(res.id, res.url, action)        
+        const htmlElement = document.getElementById(res.id);
+
+        VideoList[res.id] = {
+            id: res.id,
+            element: htmlElement,
+            status: res.action
+        };
+    }
+}
+
+function VideoElement(id, title, desc, views, thumbnail, channel, runtime)
+{
+    // assumes the div has already been created
+    return `
+        <table>
+        <tr>
+            <td rowspan="3"><a href="https://www.youtube.com/watch?v=${id}"><img src="${thumbnail}"></a></td>
+            <td colspan="3">${title}</td>
+        </tr>
+        <tr>
+            <td>${channel}</td>
+            <td>${views}</td>
+            <td>${runtime}</td>
+        </tr>
+        <tr>
+            <td colspan="3">${desc}</td>
+        </tr>
+        </table>
+    `;
+}
+
+function ResolvedVideos(VideoResolution)
+{
+    for (res of VideoResolution)
+    {
+        if (!VideoList[res.id]) 
+        {
+            console.log(`Unexpected video, ${res.id} was not in the resolve queue`)
+            continue;
+        }
+        
+        if (VideoList[res.id].status == "Resolved") continue;
+        
+        const Video = VideoList[res.id];
+        const htmlElement = Video.element;
+
+        if (res.Error == true)
+        {
+            // there is no url element ! it is discarded on the server in place for an ID
+            htmlElement.innerHTML = ResolvingElement(res.id, `https://www.youtube.com/watch?v=${res.id}`, 'Error', res.Errors[0]);
+            VideoList[res.id].status = "Error";
+            continue;
+        }
+        
+        htmlElement.innerHTML = VideoElement(res.id, res.title, res.desc, res.views, res.thumbnail, res.channel, res.runtime);
+        VideoList[res.id].status = "Resolved";
+    }
+}

src/server.js

@@ -81,6 +81,7 @@ async function VideoListUpdate(socket, req)
     Res.Content = [];
     for (video of VideoArray)
     {
+        video = video.trim()
         if (YoutubeRegex.exec(video))
         {
             let VideoID = video.match(YoutubeRegex)[5];
@@ -95,10 +96,10 @@ async function VideoListUpdate(socket, req)
         } else 
         {
             Res.Content.push({
-                id: 1,
-                url: null,
+                id: -1, // -1 means not resolved
+                url: video, // used as ID on the client
                 valid: false,
-                action: 'error'
+                action: 'Error'
             });
         }
     }

src/youtubehelper.js

@@ -87,7 +87,7 @@ module.exports.GetVideoInfo = async (video) =>
         } else 
         {
             // TODO: is the YouTube API faster for this?
-            Logger.Log(`Resolving '${video}'`)
+            Logger.Log(`Resolving '${video}'`);
             Video = await YTDL.getInfo(video);
             // register the info into the cache
             RegisterCache(Video);
@@ -100,7 +100,11 @@ module.exports.GetVideoInfo = async (video) =>
     } catch (e)
     {
         Logger.Log(`Error resolving video '${video}', ${e}`);
-        return { Error: "Video cannot resolve" };
+        return { 
+            id: video,
+            Error: true, 
+            Errors: [ "Video cannot resolve" ]
+        };
     }
 }