feat: ✨ updater changes

NUXT/pages/mods/updates.vue

@@ -14,20 +14,34 @@
       <h1>{{ lang.noupdate }}</h1>
       <p>{{ lang.noupdatemessage }}</p>
       <div class="bottom">
+        <v-btn rounded @click="getLatest">{{ lang.refresh }}</v-btn>
         <v-btn rounded color="primary" @click="$router.go(-1)">{{ lang.okay }}</v-btn>
       </div>
     </div>
 
     <div v-if="status == 'available'">
-      <h1>{{ lang.available }}</h1>
+      <h1 v-if="!downloading">{{ lang.available }}</h1>
+      <h1 v-if="downloading">{{ lang.updating }}</h1>
       <div>{{ lang.installed }}: {{ installedVersion }}</div>
       <div>{{ lang.latest }}: {{ latestVersion.tag_name }}</div>
-      <div style="margin-top: 3em; color: #999;"><b>Changelog</b></div>
+
+      <div style="margin-top: 1em; color: #999;">
+        <div>{{ lang.published }}: {{ new Date(update.created_at).toLocaleString() }}</div>
+        <div>{{ lang.size }}: {{ require("~/plugins/utils").humanFileSize(update.size) }}</div>
+        <div>{{ lang.users }}: {{ update.download_count }}</div>
+      </div>
+
+
+      <div style="margin-top: 1em; color: #999;"><b>Changelog</b></div>
       <p style="white-space: pre-line;  color: #999;">{{ latestVersion.body.trim() }}</p>
-      <p></p>
+
       <div class="bottom">
         <v-btn rounded @click="$router.go(-1)">{{ lang.later }}</v-btn>
-        <v-btn rounded color="primary" @click="update()">{{ lang.update }}</v-btn>
+        <v-btn rounded color="primary" @click="install()">{{ lang.update }}</v-btn>
+      </div>
+      <div class="bottom">
+        <v-btn rounded @click="$router.go(-1)">{{ lang.later }}</v-btn>
+        <v-btn rounded color="primary" @click="install()">{{ lang.update }}</v-btn>
       </div>
     </div>
 
@@ -53,46 +67,72 @@ export default {
       installedVersion: process.env.appVersion,
       latestVersion: "",
       lang: {},
-      status: "checking"
+      status: "checking",
+      update: {},
+      downloading: false,
     };
   },
   async mounted() {
     //---   Setup Lang Pack   ---//
     this.lang = this.$lang("mods").updates;
 
-    //---   Get Latest Version   ---//
+    this.getLatest();
-    const releases = await this.$vuetube.releases;
-    this.latestVersion = releases[0];
-
-    //---   Wait like 2 seconds because if people don't see loading, they think it didn't refresh properly   ---//
-    if (!this.$route.query.nowait) await require("~/plugins/utils").delay(2000);
-
-    //---   Kick Off Update Notice   ---//
-    if (this.latestVersion.tag_name != this.installedVersion) {
-      this.status = "available";
-    } else {
-      this.status = "latest";
-    }
   },
 
   methods: {
-    async update() {
+
+    async getUpdate() {
       const device = await Device.getInfo();
       const platform = device.platform;
 
+      //---   Put all strings into 1 array   ---//
       let downloads = new Array();
       for (const i in this.latestVersion.assets) {
         const asset = this.latestVersion.assets[i];
         downloads.push(asset.browser_download_url);
       }
-      console.log(downloads)
 
+      //---   Pick String For Platform From Above Array   ---//
       if (platform == "ios") {
-        window.open(downloads.filter(m => m.includes('.ipa'))[0], '_blank');
+        this.update = downloads.filter(m => m.includes('.ipa'))[0];
       } else {
-        window.open(downloads.filter(m => m.includes('.apk'))[0], '_blank');
+        this.update = downloads.filter(m => m.includes('.apk'))[0];
       }
 
+      //---   Set Update As Full Data   ---//
+      for (const i in this.latestVersion.assets) {
+        const asset = this.latestVersion.assets[i];
+        if (asset.browser_download_url == this.update) {
+          return this.update = asset;
+        }
+      }
+
+    },
+
+    async getLatest() {
+       //---   Get Latest Version   ---//
+      this.status = "checking";
+      const releases = await this.$vuetube.releases;
+      this.latestVersion = releases[0];
+
+      //---   Wait like 2 seconds because if people don't see loading, they think it didn't refresh properly   ---//
+      if (!this.$route.query.nowait) await require("~/plugins/utils").delay(2000);
+
+      //---   Get Proper File   ---//
+      this.getUpdate();
+
+      //---   Kick Off Update Notice   ---//
+      if (this.latestVersion.tag_name != this.installedVersion) {
+        this.status = "available";
+      } else {
+        this.status = "latest";
+      }
+    },
+
+    async install() {
+      
+      window.open(this.update.browser_download_url, '_blank');
+
     }
   }
 };

NUXT/plugins/languages/english.js

@@ -55,6 +55,7 @@ module.exports = {
       defaultpage: "Default Page",
     },
     updates: {
+      updating: "Downloading update",
       checking: "Checking for updates",
       available: "Update available",
       noupdate: "No updates available",
@@ -63,7 +64,12 @@ module.exports = {
       installed: "Installed Version",
       latest: "Latest Version",
 
+      published: "Published",
+      users: "Users",
+      size: "Update Size",
+
       okay: "Okay",
+      refresh: "Refresh",
       update: "Update",
       later: "Later",
     },

NUXT/plugins/utils.js

@@ -77,6 +77,11 @@ function linkParser(url) {
 }
 const delay = (ms) => new Promise((res) => setTimeout(res, ms));
 
+function humanFileSize(size) {
+  var i = Math.floor( Math.log(size) / Math.log(1024) );
+  return ( size / Math.pow(1024, i) ).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
+};
+
 module.exports = {
   getBetweenStrings,
   hexToRgb,
@@ -86,4 +91,5 @@ module.exports = {
   linkParser,
   delay,
   parseEmoji,
+  humanFileSize,
 };