Hotfix MacOS bug where video is incorrect format for extension and it fails to play, some minor cosmetic improvements with an auto updater to come in the future along with a new UI

public/index.html

@@ -21,10 +21,15 @@
 
         <button id="Download">Download</button>
 
-        <div class="VideoContainer">
+        <div id="VideoContainer">
             <div id="VideoBox"></div>
         </div>
 
+        <div id="Updater">
+            <button id="Update">Update</button>
+        </div>
+
         <script src="index.js"></script>
+        <div id="copyright">Copyright Benjamin Kyd© <script type="text/javascript">document.write(new Date().getFullYear())</script></div>
     </body>
 </html>

public/style.css

@@ -30,7 +30,11 @@ textarea {
     height: 100px;
 }
 
-.VideoContainer {
+h {
+    font-weight: 400;
+}
+
+#VideoContainer {
     padding: 30px, 0px, 30px, 0px;
 }
 
@@ -39,6 +43,14 @@ textarea {
     font-weight: lighter;
 }
 
-h {
-    font-weight: 400;
-}
+#Updater {
+    position: absolute;
+    top: 5px;
+    right: 10px;}
+
+#copyright {
+    position: absolute;
+    bottom: 5px;
+    right: 10px;
+    color: #2f2f2f;
+}  

src/index.js

@@ -1,7 +1,7 @@
 const server = require('./server');
 
 let config =  {
-    serverPort: 8080,
+    serverPort: 80,
     downloadLocation: './'
 };
 

src/youtubehelper.js

@@ -37,7 +37,7 @@ module.exports.downloadVideos = async (arr, socket, options) => {
     for (const [key, value] of Object.entries(arr)) {
         if (ytdl.validateURL(key)) {
             try {
-                const stream = await ytdl(key, {quality: 'highest'});
+                const stream = await ytdl(key, {quality: 'highest', filter: (format) => format.container === 'mp4'});
                 stream.pipe(fs.createWriteStream(`${path}/${value.title}.mp4`));
 
                 stream.on('response', (res) => {