fix(ui): ensure pre-releases are properly checked (#2564)

.github/workflows/CI.yml

@@ -125,7 +125,7 @@ jobs:
       - name: Configure Flatpak Manifest
         run: |
           # variables for manifest
-          branch=${{ github.head_ref }}
+          branch="${{ github.head_ref }}"
           commit=${{ needs.setup_release.outputs.release_commit }}
 
           # check the branch variable
@@ -505,7 +505,7 @@ jobs:
       - name: Configure formula
         run: |
           # variables for formula
-          branch=${{ github.head_ref }}
+          branch="${{ github.head_ref }}"
           commit=${{ needs.setup_release.outputs.release_commit }}
 
           # check the branch variable
@@ -623,7 +623,7 @@ jobs:
       - name: Configure Portfile
         run: |
           # variables for Portfile
-          branch=${{ github.head_ref }}
+          branch="${{ github.head_ref }}"
           commit=${{ needs.setup_release.outputs.release_commit }}
 
           # check the branch variable

src_assets/common/assets/web/index.html

@@ -24,7 +24,7 @@
     <!-- Version -->
     <div class="card p-2 my-4">
       <div class="card-body" v-if="version">
-        <h2>Version {{version}}</h2>
+        <h2>Version {{version.version}}</h2>
         <br>
         <div v-if="loading">
           {{ $t('index.loading_latest') }}
@@ -32,7 +32,10 @@
         <div class="alert alert-success" v-if="buildVersionIsDirty">
           {{ $t('index.version_dirty') }} 🌇
         </div>
-        <div v-else-if="!preReleaseBuildAvailable && !stableBuildAvailable && !buildVersionIsDirty">
+        <div class="alert alert-info" v-if="installedVersionNotStable">
+          {{ $t('index.installed_version_not_stable') }}
+        </div>
+        <div v-else-if="(!preReleaseBuildAvailable || !notifyPreReleases) && !stableBuildAvailable && !buildVersionIsDirty">
           <div class="alert alert-success">
             {{ $t('index.version_latest') }}
           </div>
@@ -43,10 +46,10 @@
               <div class="my-2">
                 <p>{{ $t('index.new_pre_release') }}</p>
               </div>
-              <a class="btn btn-success m-1" :href="preReleaseVersion.html_url" target="_blank">{{ $t('index.download') }}</a>
+              <a class="btn btn-success m-1" :href="preReleaseVersion.release.html_url" target="_blank">{{ $t('index.download') }}</a>
             </div>
-            <pre><b>{{preReleaseVersion.name}}</b></pre>
+            <pre><b>{{preReleaseVersion.release.name}}</b></pre>
-            <pre>{{preReleaseVersion.body}}</pre>
+            <pre>{{preReleaseVersion.release.body}}</pre>
           </div>
         </div>
         <div v-if="stableBuildAvailable">
@@ -55,10 +58,10 @@
               <div class="my-2">
                 <p>{{ $t('index.new_stable') }}</p>
               </div>
-              <a class="btn btn-success m-1" :href="githubVersion.html_url" target="_blank">{{ $t('index.download') }}</a>
+              <a class="btn btn-success m-1" :href="githubVersion.release.html_url" target="_blank">{{ $t('index.download') }}</a>
             </div>
-            <h3>{{githubVersion.name}}</h3>
+            <h3>{{githubVersion.release.name}}</h3>
-            <pre>{{githubVersion.body}}</pre>
+            <pre>{{githubVersion.release.body}}</pre>
           </div>
         </div>
       </div>
@@ -75,6 +78,7 @@
   import { initApp } from './init'
   import Navbar from './Navbar.vue'
   import ResourceCard from './ResourceCard.vue'
+  import SunshineVersion from './sunshine_version'
 
   console.log("Hello, Sunshine!")
   let app = createApp({
@@ -96,10 +100,14 @@
       try {
         let config = await fetch("/api/config").then((r) => r.json());
         this.notifyPreReleases = config.notify_pre_releases;
-        this.version = config.version;
+        this.version = new SunshineVersion(null, config.version);
-        this.githubVersion = (await fetch("https://api.github.com/repos/LizardByte/Sunshine/releases/latest").then((r) => r.json()));
+        console.log("Version: ", this.version.version)
-        this.githubPreRelease = (await fetch("https://api.github.com/repos/LizardByte/Sunshine/releases").then((r) => r.json())).find(release => release.prerelease);
+        this.githubVersion = new SunshineVersion(await fetch("https://api.github.com/repos/LizardByte/Sunshine/releases/latest").then((r) => r.json()), null);
+        console.log("GitHub Version: ", this.githubVersion.version)
+        this.preReleaseVersion = new SunshineVersion((await fetch("https://api.github.com/repos/LizardByte/Sunshine/releases").then((r) => r.json())).find(release => release.prerelease), null);
+        console.log("Pre-Release Version: ", this.preReleaseVersion.version)
       } catch (e) {
+        console.error(e);
       }
       try {
         this.logs = (await fetch("/api/logs").then(r => r.text()))
@@ -109,41 +117,27 @@
       this.loading = false;
     },
     computed: {
+      installedVersionNotStable() {
+        if (!this.githubVersion || !this.version) {
+          return false;
+        }
+        return this.version.isGreater(this.githubVersion);
+      },
       stableBuildAvailable() {
         if (!this.githubVersion || !this.version) {
           return false;
         }
-        let v_github = this.githubVersion.name;
+        return this.githubVersion.isGreater(this.version);
-        if (v_github.indexOf("v") === 0) {
-          v_github = v_github.substring(1);
-        }
-        let v_this = this.version;
-        if (v_this.indexOf("v") === 0) {
-          v_this = v_this.substring(1);
-        }
-        return v_github !== v_this;
       },
       preReleaseBuildAvailable() {
-        if (!this.githubPreRelease || !this.githubVersion || !this.version) {
+        if (!this.preReleaseVersion || !this.githubVersion || !this.version) {
           return false;
         }
-        let v_github_pre = this.githubPreRelease.name;
+        return this.preReleaseVersion.isGreater(this.version) && this.preReleaseVersion.isGreater(this.githubVersion);
-        if (v_github_pre.indexOf("v") === 0) {
-          v_github_pre = v_github_pre.substring(1);
-        }
-        let v_github_stable = this.githubVersion.name;
-        if (v_github_stable.indexOf("v") === 0) {
-          v_github_stable = v_github_stable.substring(1);
-        }
-        let v_this = this.version;
-        if (v_this.indexOf("v") === 0) {
-          v_this = v_this.substring(1);
-        }
-        return v_github_pre !== v_this && new Date(this.githubPreRelease.published_at) > new Date(this.githubVersion.published_at);
       },
       buildVersionIsDirty() {
-        return this.version?.split(".").length === 5 &&
+        return this.version.version?.split(".").length === 5 &&
-          this.version.indexOf("dirty") !== -1
+          this.version.version.indexOf("dirty") !== -1
       },
       /** Parse the text errors, calculating the text, the timestamp and the level */
       fancyLogs() {

src_assets/common/assets/web/public/assets/locale/en.json

@@ -322,6 +322,7 @@
   "index": {
     "description": "Sunshine is a self-hosted game stream host for Moonlight.",
     "download": "Download",
+    "installed_version_not_stable": "You are running a pre-release version of Sunshine. You may experience bugs or other issues. Please report any issues you encounter. Thank you for helping to make Sunshine a better software!",
     "loading_latest": "Loading latest release...",
     "new_pre_release": "A new Pre-Release Version is Available!",
     "new_stable": "A new Stable Version is Available!",

src_assets/common/assets/web/sunshine_version.js

@@ -0,0 +1,55 @@
+class SunshineVersion {
+  constructor(release = null, version = null) {
+    if (release) {
+      this.release = release;
+      this.version = release.tag_name;
+      this.versionName = release.name;
+      this.versionTag = release.tag_tag;
+    } else if (version) {
+      this.release = null;
+      this.version = version;
+      this.versionName = null;
+      this.versionTag = null;
+    } else {
+      throw new Error('Either release or version must be provided');
+    }
+    this.versionParts = this.parseVersion(this.version);
+    this.versionMajor = this.versionParts ? this.versionParts[0] : null;
+    this.versionMinor = this.versionParts ? this.versionParts[1] : null;
+    this.versionPatch = this.versionParts ? this.versionParts[2] : null;
+  }
+
+  parseVersion(version) {
+    if (!version) {
+      return null;
+    }
+    let v = version;
+    if (v.indexOf("v") === 0) {
+      v = v.substring(1);
+    }
+    return v.split('.').map(Number);
+  }
+
+  isGreater(otherVersion) {
+    let otherVersionParts;
+    if (otherVersion instanceof SunshineVersion) {
+      otherVersionParts = otherVersion.versionParts;
+    } else if (typeof otherVersion === 'string') {
+      otherVersionParts = this.parseVersion(otherVersion);
+    } else {
+      throw new Error('Invalid argument: otherVersion must be a SunshineVersion object or a version string');
+    }
+
+    if (!this.versionParts || !otherVersionParts) {
+      return false;
+    }
+    for (let i = 0; i < Math.min(3, this.versionParts.length, otherVersionParts.length); i++) {
+      if (this.versionParts[i] > otherVersionParts[i]) {
+        return true;
+      }
+    }
+    return false;
+  }
+}
+
+export default SunshineVersion;