added support for updating yt-dlp binary;moved version info display to admin section

src/adminSettings.vue

@@ -12,6 +12,7 @@
     path="/apps/ncdownloader/admin/aria2/save" :validOptions="validOptions">
     <template #save>Save Settings</template>
   </customOptions>
+  <systemInfo :aria2Version="aria2Version" :ytdVersion="ytdVersion" />
 </template>
 <script>
 import customOptions from "./components/customOptions";
@@ -19,6 +20,7 @@ import helper from "./utils/helper";
 import aria2Options from "./utils/aria2Options";
 import settingsRow from "./components/settingsRow";
 import toggleButton from "./components/toggleButton";
+import systemInfo from "./components/systemInfo";
 
 export default {
   name: "adminSettings",
@@ -28,12 +30,15 @@ export default {
       validOptions: aria2Options,
       settings: [],
       pStatus: false,
+      aria2Version: "",
+      ytdVersion: "",
     };
   },
   components: {
     customOptions,
     settingsRow,
     toggleButton,
+    systemInfo,
   },
   methods: {
     toggle(name, value) {
@@ -83,10 +88,13 @@ export default {
       options = JSON.parse(options);
       this.settings = data;
       this.pStatus = helper.str2Boolean(data["disallow_aria2_settings"]);
+      this.aria2Version = data["aria2_version"];
+      this.ytdVersion = data["ytdl_version"];
       this.options = options;
     } catch (e) {
       helper.error(e);
     }
   },
+
 };
 </script>

src/components/mainForm.vue

@@ -199,18 +199,16 @@ export default {
   .checkboxes {
     border-radius: 0%;
   }
-  .download-button,
-  .search-button {
-    height: $column-height;
-    .btn-primary {
+  .download-button.btn-primary,
+  .search-button.btn-primary {
       color: #fff;
       background-color: #2d3f59;
       border-color: #1e324f;
       border-radius: 0%;
-    }
-    .btn-primary:hover {
+  }
+  .download-button.btn-primary:hover,
+  .search-button.btn-primary:hover {
       background-color: #191a16;
-    }
   }
 
   .magnet-link,

src/components/systemInfo.vue

@@ -0,0 +1,144 @@
+<template>
+    <div class="system-info-wrapper section">
+        <h2 class="section-title">System Info</h2>
+        <div class="system-info">
+            <div class="system-info-item">
+                <div class="system-info-item-label">Aria2 Version: </div>
+                <div class="system-info-item-value"><span class="version">{{ aria2Ver }}</span>
+                </div>
+            </div>
+            <div class="system-info-item">
+                <div class="system-info-item-label">Yt-dlp Version: </div>
+                <div class="system-info-item-value"><span class="version">{{ ytdVer }}</span>
+                    <actionButton action="check" btnType="ytd" @clicked="checkUpdate" enableLoading="true"
+                        className="check-button">
+                        {{
+        ytdBtn
+                        }}</actionButton>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import helper from "../utils/helper";
+import actionButton from "./actionButton";
+const ARIA2_CHECK_URL = "/apps/ncdownloader/aria2/release/check";
+const ARIA2_UPDATE_URL = "/apps/ncdownloader/aria2/release/update";
+const YTD_CHECK_URL = "/apps/ncdownloader/ytdl/release/check";
+const YTD_UPDATE_URL = "/apps/ncdownloader/ytdl/release/update";
+
+export default {
+    name: "systemInfo",
+    data() {
+        return {
+            aria2Btn: "Check for Update",
+            ytdBtn: "Check for Update",
+        };
+    },
+    components: {
+        actionButton
+    },
+    computed: {
+        aria2Ver: {
+            get() {
+                return this.$props.aria2Version
+            },
+            set(value) {
+                this.$props.aria2Version = value
+                //this.$emit("update:aria2Version", value)
+            }
+        },
+        ytdVer: {
+            get() {
+                return this.$props.ytdVersion
+            },
+            set(value) {
+                this.$props.ytdVersion = value
+                //this.$emit("update:ytdVersion", value)
+            }
+        }
+    },
+    methods: {
+        checkUpdate(event, $vm) {
+            const { btnType, action } = $vm.$props;
+            const path = action === "check" ? (btnType === "aria2" ? ARIA2_CHECK_URL : YTD_CHECK_URL) : (btnType === "aria2" ? ARIA2_UPDATE_URL : YTD_UPDATE_URL);
+            helper
+                .httpClient(helper.generateUrl(path))
+                .setMethod("GET")
+                .setHandler((data) => {
+                    $vm.loading = false;
+                    if (data.status) {
+                        helper.info(data.message)
+                        //update button text
+                        if (action == "check") {
+                            if (btnType == "ytd") {
+                                this.ytdBtn = "Update"
+                            } else {
+                                this.aria2Btn = "Update"
+                            }
+                            $vm.$props.action = "update"
+                        } else {
+                            if (btnType == "ytd") {
+                                this.ytdBtn = "Check for Update"
+                            } else {
+                                this.aria2Btn = "Check for Update"
+                            }
+                            $vm.$props.action = "check"
+                            if (data.data) {
+                                if (btnType == "ytd") {
+                                    this.ytdVer = data.data
+                                } else if (btnType == "aria2") {
+                                    this.aria2Ver = data.data
+                                }
+                            }
+                        }
+                    } else {
+                        helper.info(data.message)
+                    }
+                })
+                .send();
+        },
+
+    },
+    props: {
+        aria2Version: {
+            type: String,
+            default: ""
+        },
+        ytdVersion: {
+            type: String,
+            default: ""
+        },
+    },
+}
+</script>
+<style scoped lang="scss">
+.system-info {
+    display: flex;
+    flex-direction: column;
+    margin-top: 10px;
+
+
+    .system-info-item {
+        display: flex;
+        flex-direction: row;
+        margin-bottom: 10px;
+    }
+
+    .system-info-item-label {
+        font-weight: bold;
+        margin-right: 10px;
+        display: flex;
+        align-items: flex-end;
+    }
+
+    .system-info-item-value {
+        font-weight: normal;
+
+        .check-button {
+            border-radius: 0.25em;
+        }
+    }
+}
+</style>

src/css/bootstrap.scss

@@ -1,3 +1,4 @@
 @import "../../node_modules/bootstrap/scss/functions";
 @import "../../node_modules/bootstrap/scss/variables";
 @import "../../node_modules/bootstrap/scss/mixins";
+@import "../../node_modules/bootstrap/scss/root";

src/css/btn.scss

@@ -0,0 +1 @@
+@import "../../node_modules/bootstrap/scss/buttons";

src/personalSettings.vue

@@ -12,19 +12,6 @@
     path="/apps/ncdownloader/personal/ytdl/save" :validOptions="ytdlOptions">
     <template #save>Save Youtube-dl Settings</template>
   </customOptions>
-  <div class="system-info-wrapper section">
-    <h2 class="section-title">System Info</h2>
-    <div class="system-info">
-      <div class="system-info-item">
-        <div class="system-info-item-label">Aria2 Version: </div>
-        <div class="system-info-item-value">{{ aria2Version }}</div>
-      </div>
-      <div class="system-info-item">
-        <div class="system-info-item-label">yt-dlp Version: </div>
-        <div class="system-info-item-value">{{ ytdVersion }}</div>
-      </div>
-    </div>
-  </div>
 </template>
 <script>
 import customOptions from "./components/customOptions";
@@ -42,9 +29,6 @@ export default {
       ytdlOptions: ytdlOptions,
       disallowAria2Settings: false,
       isAdmin: false,
-      aria2Version: "",
-      ytdVersion: "",
-
     };
   },
   components: {
@@ -102,8 +86,6 @@ export default {
       options = JSON.parse(options);
       this.disallowAria2Settings = helper.str2Boolean(data["disallow_aria2_settings"]);
       this.isAdmin = data["is_admin"];
-      this.aria2Version = data["aria2_version"];
-      this.ytdVersion = data["ytdl_version"];
       this.options = options
     } catch (e) {
       helper.error(e);
@@ -111,25 +93,3 @@ export default {
   },
 };
 </script>
-<style scoped>
-.system-info {
-  display: flex;
-  flex-direction: column;
-  margin-top: 10px;
-}
-
-.system-info-item {
-  display: flex;
-  flex-direction: row;
-  margin-bottom: 10px;
-}
-
-.system-info-item-label {
-  font-weight: bold;
-  margin-right: 10px;
-}
-
-.system-info-item-value {
-  font-weight: normal;
-}
-</style>