refactor: Improve update.js and RunningAppBar.vue.

Bump to v0.10.302

apps/app-frontend/src/components/ui/RunningAppBar.vue

@@ -38,7 +38,7 @@
     </div>
     <div v-if="updateState">
       <a>
-        <Button class="download" :disabled="installState" @click="confirmUpdating(), getRemote(false, false)">
+        <Button class="download" :disabled="installState" @click="initUpdateModal(), getRemote(false)">
           <DownloadIcon />
           {{
             installState
@@ -48,7 +48,7 @@
         </Button>
       </a>
     </div>
-    <ModalWrapper ref="confirmUpdate" :has-to-type="false" header="Request to update the AstralRinth launcher">
+    <ModalWrapper ref="updateModalView" :has-to-type="false" header="Request to update the AstralRinth launcher">
       <div class="modal-body">
         <div class="markdown-body">
           <p>The new version of the AstralRinth launcher is available.</p>
@@ -66,14 +66,30 @@
           <p class="cosmic inline-fix">v{{ version }}</p>
         </span>
         <div class="button-group push-right">
-          <Button class="download-modal" @click="confirmUpdate.hide()">
+          <Button class="updater-modal" @click="updateModalView.hide()">
-            Decline</Button>
+            Cancel</Button>
-          <Button class="download-modal" @click="approveUpdate()">
+          <Button class="updater-modal" @click="initDownload()">
-            Accept
+            Download file
           </Button>
         </div>
       </div>
     </ModalWrapper>
+    <ModalWrapper ref="updateRequestFailView" :has-to-type="false" header="Failed to request a file from the server :(">
+      <div class="modal-body">
+        <div class="markdown-body">
+          <p><strong>Error occurred</strong></p>
+          <p>Unfortunately, the program was unable to download the file from our servers.</p>
+          <p>Please try downloading it yourself from <a href="https://me.astralium.su/get/ar" target="_blank" rel="noopener noreferrer">Git Astralium</a> if there are any updates available.</p>
+        </div>
+        <span>Local AstralRinth •
+          <p class="cosmic inline-fix">v{{ version }}</p>
+        </span>
+      </div>
+      <div class="button-group push-right">
+          <Button class="updater-modal" @click="updateRequestFailView.hide()">
+            Close</Button>
+      </div>
+    </ModalWrapper>
   </div>
   <transition name="download">
     <Card v-if="showCard === true && currentLoadingBars.length > 0" ref="card" class="info-card">
@@ -129,18 +145,22 @@ const version = await getVersion()
 import { installState, getRemote, updateState } from '@/helpers/update.js'
 import ModalWrapper from './modal/ModalWrapper.vue'
 
-const confirmUpdate = ref(null)
+const updateModalView = ref(null)
+const updateRequestFailView = ref(null)
 
-const confirmUpdating = async () => {
+const initUpdateModal = async () => {
-  confirmUpdate.value.show()
+  updateModalView.value.show()
 }
 
-const approveUpdate = async () => {
+const initDownload = async () => {
-  confirmUpdate.value.hide()
+  updateModalView.value.hide()
-  await getRemote(true, true)
+  const result = await getRemote(true);
+  if (!result) {
+    updateRequestFailView.value.show()
+  }
 }
 
-await getRemote(true, false)
+await getRemote(false)
 
 const router = useRouter()
 const card = ref(null)
@@ -375,7 +395,7 @@ onBeforeUnmount(() => {
   text-shadow: #26065e;
 }
 
-.download-modal {
+.updater-modal {
   color: #3e8cde;
   padding: var(--gap-sm) var(--gap-lg);
   text-decoration: none;
@@ -386,9 +406,9 @@ onBeforeUnmount(() => {
   transition: color 0.35s ease;
 }
 
-.download-modal:hover,
+.updater-modal:hover,
-.download-modal:focus,
+.updater-modal:focus,
-.download-modal:active {
+.updater-modal:active {
   color: #10fae5;
   text-shadow: #26065e;
 }

apps/app-frontend/src/helpers/update.js

@@ -2,21 +2,19 @@ import { ref } from 'vue'
 import { getVersion } from '@tauri-apps/api/app'
 import { getArtifact, getOS } from '@/helpers/utils.js'
 
-
 export const allowState = ref(false)
 export const installState = ref(false)
 export const updateState = ref(false)
-export const latestBetaCommitTruncatedSha = ref('')
-export const latestBetaCommitLink = ref('')
-export const launcherUrl = 'https://www.astralium.su/get/ar'
 
-const os = ref('')
+const currentOS = ref('')
 const releaseLink = `https://git.astralium.su/api/v1/repos/didirus/AstralRinth/releases/latest`
 const failedFetch = [`Failed to fetch remote releases:`, `Failed to fetch remote commits:`]
-const osNames = ['macos', 'windows', 'linux']
+
-const macExtension = `.dmg` // MacOS file type for download
+const osList = ['macos', 'windows', 'linux']
-const windowsExtension = `.msi` // Windows file type for download
+const macExtensionList = ['.app', '.dmg']
-const blacklistedBuilds = [
+const windowsExtensionList = ['.exe', '.msi']
+
+const blacklistPrefixes = [
   `dev`,
   `nightly`,
   `dirty`,
@@ -26,110 +24,73 @@ const blacklistedBuilds = [
   `dirty_nightly`,
 ] // This is blacklisted builds for download. For example, file.startsWith('dev') is not allowed.
 
-/**
+export async function getRemote(isDownloadState) {
- * Asynchronous function to get remote data and handle updates and downloads.
+  var releaseData = null;
- *
+  var result = false;
- * @param {boolean} elementIdBool - Indicates whether to disable an element ID.
+  try {
- * @param {boolean} downloadArtifactBool - Indicates whether to download an artifact.
+    const response = await fetch(releaseLink);
- */
+    if (!response.ok) {
-export async function getRemote(elementIdBool, downloadArtifactBool) {
+      throw new Error(response.status);
-  fetch(releaseLink)
+    }
-    .then((response) => {
+    const remoteData = await response.json();
-      if (!response.ok) {
+    currentOS.value = await getOS();
-        throw new Error(response.status)
+    const remoteLatestReleaseTag = remoteData.tag_name;
-      }
+    releaseData = document.getElementById('releaseData');
-      return response.json()
+    const remoteVersion = releaseData ? (releaseData.textContent = remoteLatestReleaseTag) : remoteLatestReleaseTag;
-    })
-    .then(async (data) => {
-      os.value = await getOS()
-      const latestRelease = data.name
-      let remoteVersion = undefined
 
-      if (!elementIdBool) {
+    if (osList.includes(currentOS.value.toLowerCase())) {
-        const releaseData = document.getElementById('releaseData')
+      const localVersion = await getVersion();
-        if (releaseData == null) {
+      const isUpdateAvailable = !remoteVersion.includes(localVersion);
-          console.error('Release data element not found.')
-          return false
-        }
-        releaseData.textContent = latestRelease
-        remoteVersion = `${releaseData.textContent}`
-      } else {
-        remoteVersion = latestRelease
-      }
-      if (osNames.includes(os.value.toLowerCase())) {
-        if (remoteVersion.startsWith('v' + await getVersion())) {
-          updateState.value = false
-          allowState.value = false
-        } else {
-          updateState.value = true
-          allowState.value = true
-        }
-      } else {
-        updateState.value = false
-        allowState.value = false
-      }
-      console.log('Update available state is', updateState.value)
-      console.log('Remote version is', remoteVersion)
-      console.log('Local version is', await getVersion())
-      console.log('Operating System is', os.value)
 
-      if (downloadArtifactBool) {
+      updateState.value = isUpdateAvailable;
-        installState.value = true
+      allowState.value = isUpdateAvailable;
-        const builds = data.assets
+    } else {
-        const fileName = getInstaller(getExtension(), builds)
+      updateState.value = false;
-        if (fileName != null) {
+      allowState.value = false;
-          await getArtifact(fileName[1], fileName[0], os.value, true)
+    }
-        }
+    if (isDownloadState) {
-        installState.value = false
+      installState.value = true;
-      }
+      const builds = remoteData.assets;
-    })
+      const fileName = getInstaller(getExtension(), builds);
-    .catch((error) => {
+      result = !fileName ? await getArtifact(fileName[1], fileName[0], currentOS.value, true) : false;
-      console.error(failedFetch[0], error)
+      installState.value = false;
-      if (!elementIdBool) {
+    }
-        const errorData = document.getElementById('releaseData')
-        if (errorData) {
-          errorData.textContent = `${error.message}`
-        }
-        updateState.value = false
-        allowState.value = false
-        installState.value = false
-      }
-    })
-}
 
-/**
+    console.log('Update available state is', updateState.value);
- * Retrieves the installer for a specific operating system.
+    console.log('Remote version is', remoteVersion);
- *
+    console.log('Local version is', await getVersion());
- * @param {string} osExtension - The file extension of the installer.
+    console.log('Operating System is', currentOS.value);
- * @param {Array} builds - The list of builds.
+    return result;
- * @return {Array|null} An array containing the installer name and URL if found, or null if not found.
+  } catch (error) {
- */
+    console.error(failedFetch[0], error);
-function getInstaller(osExtension, builds) {
+    if (!releaseData) {
-  for (let i of builds) {
+      const errorData = document.getElementById('releaseData');
-    let blacklistedItem = false
+      if (errorData) {
-    blacklistedBuilds.forEach((item) => {
+        errorData.textContent = `${error.message}`;
-      if (i.name.startsWith(item)) {
-        return (blacklistedItem = true)
       }
-    })
+      updateState.value = false;
-    if (i.name.endsWith(osExtension) && !blacklistedItem) {
+      allowState.value = false;
-      console.log(i.browser_download_url)
+      installState.value = false;
-      return [i.name, i.browser_download_url]
     }
   }
-  return null
 }
 
-/**
+function getInstaller(osExtension, builds) {
- * A function to get the extension based on the operating system.
+  console.log(osExtension, builds)
- *
+  for (const build of builds) {
- * @return {string} The extension based on the operating system.
+    if (blacklistPrefixes.some(prefix => build.name.startsWith(prefix))) {
- */
+      continue;
-function getExtension() {
+    }
-  if (os.value.toLowerCase() == osNames[0]) {
+    if (osExtension.some(ext => build.name.endsWith(ext))) {
-    return macExtension
+      console.log(build.name, build.browser_download_url);
-  } else if (os.value.toLowerCase() == osNames[1]) {
+      return [build.name, build.browser_download_url];
-    return windowsExtension
+    }
   }
-  return null
+  return null;
-}
+}
+
+function getExtension() {
+  return osList.find(osName => osName === currentOS.value.toLowerCase())?.endsWith('macos')
+    ? macExtensionList
+    : windowsExtensionList;
+}

apps/app/tauri.conf.json

@@ -41,7 +41,7 @@
     ]
   },
   "productName": "AstralRinth App",
-  "version": "0.10.3",
+  "version": "0.10.302",
   "mainBinaryName": "AstralRinth App",
   "identifier": "AstralRinthApp",
   "plugins": {