fangorn/sunshine-qemu
public
ref:main
<!DOCTYPE html>
<html lang="en" data-bs-theme="auto">
<head>
<%- header %>
</head>
<body id="app" v-cloak>
<Navbar></Navbar>
<div id="content" class="container">
<h1 class="my-4">{{ $t('index.welcome') }}</h1>
<p>{{ $t('index.description') }}</p>
<!-- Fatal Errors Alert -->
<div class="alert alert-danger my-4" v-if="fancyLogs.find(x => x.level === 'Fatal')">
<div>
<div class="d-flex align-items-center mb-3">
<alert-circle :size="32" class="icon-lg me-3"></alert-circle>
<div v-html="$t('index.startup_errors')"></div>
</div>
<ul class="mb-3">
<li v-for="v in fancyLogs.filter(x => x.level === 'Fatal')">{{v.value}}</li>
</ul>
<a class="btn btn-danger" href="./troubleshooting#logs">
<file-text :size="18" class="icon"></file-text>
View Logs
</a>
</div>
</div>
<!-- Windows virtual input status -->
<div class="alert my-4" :class="virtualInputNotice.alertClass" v-if="virtualInputNotice">
<div>
<div class="d-flex align-items-center mb-3">
<alert-triangle v-if="virtualInputNotice.warning" :size="32" class="icon-lg me-3"></alert-triangle>
<info v-else :size="32" class="icon-lg me-3"></info>
<div>
<p class="mb-1"><strong>{{ $t(virtualInputNotice.title) }}</strong></p>
<p v-for="message in virtualInputNotice.messages" :key="message.key" class="mb-1">
{{ $t(message.key, message.params || {}) }}
</p>
</div>
</div>
<a class="btn" :class="virtualInputNotice.buttonClass" :href="virtualInputNotice.href">
<gamepad-2 v-if="virtualInputNotice.chooseDriver" :size="18" class="icon"></gamepad-2>
<wrench v-else :size="18" class="icon"></wrench>
{{ $t(virtualInputNotice.action) }}
</a>
</div>
</div>
<!-- Version -->
<div class="card my-4">
<div class="card-body" v-if="version">
<h2>Version {{version.version}}</h2>
<div v-if="loading" class="my-3">
{{ $t('index.loading_latest') }}
</div>
<div class="alert alert-success my-3" v-if="buildVersionIsDirty">
<package :size="18" class="icon"></package>
{{ $t('index.version_dirty') }} 🌇
</div>
<div class="alert alert-info my-3" v-if="installedVersionNotStable">
<info :size="18" class="icon"></info>
{{ $t('index.installed_version_not_stable') }}
</div>
<div v-else-if="(!preReleaseBuildAvailable || !notifyPreReleases) && !stableBuildAvailable && !buildVersionIsDirty">
<div class="alert alert-success my-3">
<check-circle :size="18" class="icon"></check-circle>
{{ $t('index.version_latest') }}
</div>
</div>
<div v-if="notifyPreReleases && preReleaseBuildAvailable">
<div class="alert alert-warning my-3">
<!-- header row -->
<div class="d-flex align-items-center justify-content-between gap-3 flex-wrap mb-3">
<div class="d-flex align-items-center gap-3 flex-wrap">
<alert-circle :size="18" class="icon"></alert-circle>
<span>{{ $t('index.new_pre_release') }}</span>
<h5 class="mb-0">{{ preReleaseVersion.release.name }}</h5>
</div>
<a class="btn btn-success flex-shrink-0" :href="preReleaseVersion.release.html_url" target="_blank">
<download :size="18" class="icon"></download>
{{ $t('index.download') }}
</a>
</div>
<!-- body row (full width) -->
<div class="markdown-body release-notes" v-html="convertMarkdownToHtml(preReleaseVersion.release.body)"></div>
</div>
</div>
<div v-if="stableBuildAvailable">
<div class="alert alert-warning my-3">
<!-- header row -->
<div class="d-flex align-items-center justify-content-between gap-3 flex-wrap mb-3">
<div class="d-flex align-items-center gap-3 flex-wrap">
<alert-circle :size="18" class="icon"></alert-circle>
<span>{{ $t('index.new_stable') }}</span>
<h5 class="mb-0">{{ githubVersion.release.name }}</h5>
</div>
<a class="btn btn-success flex-shrink-0" :href="githubVersion.release.html_url" target="_blank">
<download :size="18" class="icon"></download>
{{ $t('index.download') }}
</a>
</div>
<!-- body row (full width) -->
<div class="markdown-body release-notes" v-html="convertMarkdownToHtml(githubVersion.release.body)"></div>
</div>
</div>
</div>
</div>
<!-- Resources -->
<div class="my-4">
<Resource-Card :installed-version-not-stable="installedVersionNotStable"></Resource-Card>
</div>
</div>
</body>
<script type="module">
import { createApp } from 'vue'
import { marked } from 'marked'
import { initApp } from './init'
import Navbar from './Navbar.vue'
import ResourceCard from './ResourceCard.vue'
import SunshineVersion from './sunshine_version'
import {
AlertCircle,
AlertTriangle,
FileText,
Wrench,
Package,
Info,
CheckCircle,
Download,
Gamepad2
} from '@lucide/vue'
// Configure marked to allow HTML
marked.setOptions({
breaks: true,
gfm: true,
headerIds: true,
mangle: false,
sanitize: false
});
console.log("Hello, Sunshine!")
let app = createApp({
components: {
Navbar,
ResourceCard,
AlertCircle,
AlertTriangle,
FileText,
Wrench,
Package,
Info,
CheckCircle,
Download,
Gamepad2
},
data() {
return {
version: null,
githubVersion: null,
notifyPreReleases: false,
preReleaseVersion: null,
loading: true,
logs: null,
platform: "",
controllerEnabled: false,
gamepadDriver: '',
virtualhid: null,
virtualhidLicense: null,
vigembus: null,
}
},
async created() {
try {
let config = await fetch("./api/config").then((r) => r.json());
this.notifyPreReleases = config.notify_pre_releases;
this.platform = config.platform;
this.controllerEnabled = config.controller !== "disabled";
this.gamepadDriver = config.gamepad_driver || '';
this.version = new SunshineVersion(null, config.version);
console.log("Version: ", this.version.version)
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)
// The Virtual HID Driver also backs relative mouse input when controllers are disabled.
if (this.platform === 'windows') {
try {
const virtualInputStatus = await fetch("./api/virtual-input/status").then((r) => r.json());
this.virtualhid = virtualInputStatus.virtualhid;
this.vigembus = virtualInputStatus.vigembus;
} catch (e) {
console.error("Failed to fetch virtual input driver status:", e);
}
try {
this.virtualhidLicense = await fetch("./api/virtual-input/license").then((r) => r.json());
} catch (e) {
console.error("Failed to fetch Virtual HID Driver license status:", e);
}
}
} catch (e) {
console.error(e);
}
try {
this.logs = (await fetch("./api/logs").then(r => r.text()))
} catch (e) {
console.error(e);
}
this.loading = false;
},
computed: {
/**
* Build the single Windows virtual-input message shown on the home page.
* Warnings are reserved for an unusable selected backend, an unsupported
* installed driver, or an installed driver with an invalid license.
*/
virtualInputNotice() {
if (this.platform !== 'windows' || !this.virtualhid || !this.vigembus) {
return null;
}
const vigembusUsable = this.vigembus.installed && this.vigembus.version_compatible;
if (!this.gamepadDriver) {
return this.buildVirtualInputNotice(false, 'index.gamepad_driver_choice_title', [{
key: 'index.gamepad_driver_choice_desc',
}], {
action: 'index.choose_gamepad_driver',
chooseDriver: true,
href: './config#gamepad_driver',
});
}
if (this.gamepadDriver === 'vigembus') {
return this.buildVigembusNotice(vigembusUsable);
}
if (this.virtualhid.installed) {
return this.buildInstalledVirtualhidNotice(vigembusUsable);
}
if (this.gamepadDriver === 'virtualhid') {
return this.buildVirtualInputNotice(true, 'index.virtualhid_required_title', [{ key: 'index.virtualhid_required_desc' }]);
}
if (this.controllerEnabled && !vigembusUsable) {
return this.buildVirtualInputNotice(true, 'index.virtual_input_unavailable_title', [{ key: 'index.virtual_input_unavailable_desc' }]);
}
return this.buildVirtualInputNotice(
false,
'index.virtualhid_optional_title',
[{ key: this.controllerEnabled ? 'index.virtualhid_optional_vigembus_desc' : 'index.virtualhid_optional_desc' }],
);
},
installedVersionNotStable() {
if (!this.githubVersion || !this.version) {
return false;
}
return this.version.isGreater(this.githubVersion);
},
stableBuildAvailable() {
if (!this.githubVersion || !this.version) {
return false;
}
return this.githubVersion.isGreater(this.version);
},
preReleaseBuildAvailable() {
if (!this.preReleaseVersion || !this.githubVersion || !this.version) {
return false;
}
return this.preReleaseVersion.isGreater(this.version) && this.preReleaseVersion.isGreater(this.githubVersion);
},
buildVersionIsDirty() {
return this.version.version?.split(".").length === 5 &&
this.version.version.indexOf("dirty") !== -1
},
/** Parse the text errors, calculating the text, the timestamp and the level */
fancyLogs() {
if (!this.logs) return [];
let regex = /(\[\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}\.\d{3}]):\s/g;
let rawLogLines = (this.logs.split(regex)).splice(1);
let logLines = []
for (let i = 0; i < rawLogLines.length; i += 2) {
logLines.push({ timestamp: rawLogLines[i], level: rawLogLines[i + 1].split(":")[0], value: rawLogLines[i + 1] });
}
return logLines;
}
},
methods: {
/**
* Build a home-page notice for the current Windows virtual-input state.
*
* @param {boolean} warning Whether the notice represents an actionable warning.
* @param {string} title Localization key for the notice title.
* @param {object[]} messages Localized message descriptors.
* @param {object} options Optional action and destination overrides.
* @returns {object} Notice data consumed by the template.
*/
buildVirtualInputNotice(warning, title, messages, options = {}) {
return {
action: options.action || 'index.review_virtual_input',
alertClass: warning ? 'alert-warning' : 'alert-info',
buttonClass: warning ? 'btn-warning' : 'btn-info',
chooseDriver: options.chooseDriver || false,
href: options.href || './troubleshooting#virtualhid',
messages,
title,
warning,
};
},
/**
* Build the notice for an explicitly selected ViGEmBus backend.
*
* @param {boolean} vigembusUsable Whether ViGEmBus is installed and compatible.
* @returns {object|null} Warning data, or no notice when ViGEmBus is usable.
*/
buildVigembusNotice(vigembusUsable) {
if (!this.controllerEnabled || vigembusUsable) {
return null;
}
return this.buildVirtualInputNotice(true, 'index.vigembus_required_title', [{
key: this.vigembus.installed ? 'index.vigembus_outdated_desc' : 'index.vigembus_not_installed_desc',
params: { version: this.vigembus.version, supported_versions: this.vigembus.supported_versions },
}]);
},
/**
* Build the notice for an installed Virtual HID Driver.
*
* @param {boolean} vigembusUsable Whether ViGEmBus is available as a fallback.
* @returns {object|null} Warning or informational data, or no notice when fully usable.
*/
buildInstalledVirtualhidNotice(vigembusUsable) {
const messages = [];
if (!this.virtualhid.version_compatible && !this.virtualhid.development_version) {
messages.push({
key: 'index.virtualhid_outdated_desc',
params: { version: this.virtualhid.version, supported_versions: this.virtualhid.supported_versions },
});
}
if (this.virtualhidLicense && !this.virtualhidLicense.licensed) {
const licenseMessageKey = this.gamepadDriver === 'all' && vigembusUsable ?
'index.virtualhid_license_invalid_fallback_desc' :
'index.virtualhid_license_invalid_desc';
messages.push({ key: licenseMessageKey });
}
if (messages.length) {
return this.buildVirtualInputNotice(true, 'index.virtualhid_attention_title', messages);
}
if (this.virtualhid.development_version) {
return this.buildVirtualInputNotice(false, 'index.virtualhid_development_title', [{ key: 'index.virtualhid_development_desc' }]);
}
return null;
},
convertMarkdownToHtml(markdown) {
if (!markdown) return '';
return marked.parse(markdown);
}
}
});
initApp(app);
</script>
</html>