Sunshine/src_assets/common/assets/web/index.html

<div id="content" class="container">
  <h1 class="my-4">Hello, Sunshine!</h1>
  <p>Sunshine is a self-hosted game stream host for Moonlight.</p>
  <!--Version-->
  <div class="card p-2 my-4">
    <div class="card-body" v-if="version">
      <h2>Version {{version}}</h2>
      <br />
      <div v-if="loading">
        Loading Latest Release...
      </div>
      <div class="alert alert-success" v-if="runningDirtyBuild">
        Thank you for helping to make Sunshine a better software! 🌇
      </div>
      <div v-else-if="!nightlyBuildAvailable && !stableBuildAvailable && !runningDirtyBuild">
        <div class="alert alert-success">
          You're running the latest version of Sunshine
        </div>
      </div>
      <div v-if="nightlyBuildAvailable">
        <div class="alert alert-warning">
          <div class="d-flex justify-content-between">
            <div class="my-2">A new <b>Nightly</b> Version is Available!</div>
            <a class="btn btn-success m-1" href="https://github.com/LizardByte/Sunshine/releases/nightly-dev" target="_blank">Download</a>
          </div>
          <pre><b>{{nightlyData.head_sha}}</b></pre>
          <pre>{{nightlyData.display_title}}</pre>
        </div>
      </div>
      <div v-if="stableBuildAvailable">
        <div class="alert alert-warning">
          <div class="d-flex justify-content-between">
            <div class="my-2">A new <b>Stable</b> Version is Available!</div>
            <a class="btn btn-success m-1" :href="githubVersion.html_url" target="_blank">Download</a>
          </div>
          <h3>{{githubVersion.name}}</h3>
          <pre>{{githubVersion.body}}</pre>
        </div>
      </div>
    </div>
  </div>
  <!--Resources-->
  <div class="card p-2 my-4">
    <div class="card-body">
      <h2>Resources</h2>
      <br />
      <p>
        Resources for Sunshine!
      </p>
      <div class="card-group p-4 align-items-center">
        <a class="btn btn-success m-1" href="https://app.lizardbyte.dev" target="_blank">LizardByte Website</a>
        <a class="btn btn-primary m-1" href="https://app.lizardbyte.dev/discord" target="_blank">
          <i class="fab fa-fw fa-discord"></i> Discord</a>
        <a class="btn btn-secondary m-1" href="https://github.com/LizardByte/Sunshine/discussions" target="_blank">
          <i class="fab fa-fw fa-github"></i> Github Discussions</a>
      </div>
    </div>
  </div>
  <!--Legal-->
  <div class="card p-2 my-4">
    <div class="card-body">
      <h2>Legal</h2>
      <br />
      <p>
        By continuing to use this software you agree to the terms and conditions in the following documents.
      </p>
      <div class="card-group p-4 align-items-center">
        <a class="btn btn-danger m-1" href="https://github.com/LizardByte/Sunshine/blob/master/LICENSE" target="_blank">
          <i class="fas fa-fw fa-file-alt"></i> License</a>
        <a class="btn btn-danger m-1" href="https://github.com/LizardByte/Sunshine/blob/master/NOTICE" target="_blank">
          <i class="fas fa-fw fa-exclamation"></i> Third Party Notice</a>
      </div>
    </div>
  </div>
</div>

<script>
  new Vue({
    el: "#content",
    data() {
      return {
        version: null,
        githubVersion: null,
        nightlyData: null,
        loading: true,
      }
    },
    async created() {
      try {
        this.version = (await fetch("/api/config").then((r) => r.json())).version;
        this.githubVersion = (await fetch("https://api.github.com/repos/LizardByte/Sunshine/releases/latest").then((r) => r.json()));
        if (this.buildVersionIsNightly()) {
          this.nightlyData = (await fetch("https://api.github.com/repos/LizardByte/Sunshine/actions/workflows/CI.yml/runs?branch=nightly&status=success&per_page=1").then((r) => r.json())).workflow_runs[0];
        }
      } catch(e){
      }
      this.loading = false;
    },
    computed: {
      runningDirtyBuild() {
        return this.buildVersionIsDirty()
      },
      stableBuildAvailable() {
        // If we can't get versions, return false
        if (!this.githubVersion || !this.version) return false;
        // Get the GitHub version tag
        let v = this.githubVersion.name;
        // If the version starts with a v, remove it
        if (v.indexOf("v") === 0) v = v.substring(1);

        // if nightly or dirty, we do an additional check to make sure it's an actual upgrade.
        if (this.buildVersionIsNightly() || this.buildVersionIsDirty()) {
          const stableVersion = this.version.split('.').slice(0, 3).join('.');
          return this.githubVersion.tag_name.substring(1) > stableVersion;
        }

        // return true if the version is different, otherwise false
        return v !== this.version.split(".")[0];
      },
      nightlyBuildAvailable() {
        // Verify nightly data is available and the build version is not stable
        // This is important to ensure the UI does not try to load undefined values.
        if (!this.nightlyData || this.buildVersionIsStable()) return false;
        // If built with dirty git tree, return false
        if (this.buildVersionIsDirty()) return false;
        // Get the commit hash
        let commit = this.version?.split(".").pop();
        // return true if the commit hash is different, otherwise false
        return this.nightlyData.head_sha.indexOf(commit) !== 0;
      }
    },
    methods: {
      buildVersionIsDirty() {
        return this.version?.split(".").length === 5 &&
          this.version.indexOf("dirty") !== -1
      },
      buildVersionIsNightly() {
        return this.version?.split(".").length === 4
      },
      buildVersionIsStable() {
        return this.version?.split(".").length === 3
      }
    }
  });
</script>