diff --git a/src/app.scss b/src/app.scss
index 8b681e40..b772360d 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -1063,3 +1063,7 @@ i.x-status-icon.red {
color: var(--el-color-info-dark-2);
background-color: var(--el-bg-color);
}
+
+.el-alert__title {
+ padding: 5px;
+}
diff --git a/src/components/VrcStatus.vue b/src/components/VrcStatus.vue
index effb5826..bb88746b 100644
--- a/src/components/VrcStatus.vue
+++ b/src/components/VrcStatus.vue
@@ -1,20 +1,39 @@
-
+
+
+
+ {{ statusText }}
+
+
+
+
+
diff --git a/src/stores/vrcStatus.js b/src/stores/vrcStatus.js
index 24da3ade..2efd210a 100644
--- a/src/stores/vrcStatus.js
+++ b/src/stores/vrcStatus.js
@@ -1,15 +1,23 @@
import { defineStore } from 'pinia';
import webApiService from '../service/webapi';
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
export const useVrcStatusStore = defineStore('VrcStatus', () => {
const vrcStatusApiUrl = 'https://status.vrchat.com/api/v2';
const lastStatus = ref('');
+ const lastStatusSummary = ref('');
const lastTimeFetched = ref(0);
const isAlertClosed = ref(false);
const pollingInterval = ref(0);
+ const statusText = computed(() => {
+ if (lastStatusSummary.value) {
+ return `${lastStatus.value}: ${lastStatusSummary.value}`;
+ }
+ return lastStatus.value;
+ });
+
async function getVrcStatus() {
const response = await webApiService.execute({
url: `${vrcStatusApiUrl}/status.json`,
@@ -27,6 +35,28 @@ export const useVrcStatusStore = defineStore('VrcStatus', () => {
}
lastStatus.value = data.status.description;
pollingInterval.value = 2 * 60 * 1000; // 2 minutes
+ getVrcStatusSummary();
+ }
+
+ async function getVrcStatusSummary() {
+ const response = await webApiService.execute({
+ url: `${vrcStatusApiUrl}/summary.json`,
+ method: 'GET',
+ headers: {
+ Referer: 'https://vrcx.app'
+ }
+ });
+ const data = JSON.parse(response.data);
+ let summary = '';
+ for (const component of data.components) {
+ if (component.status !== 'operational') {
+ summary += `${component.name}, `;
+ }
+ }
+ if (summary.endsWith(', ')) {
+ summary = summary.slice(0, -2);
+ }
+ lastStatusSummary.value = summary;
}
// ran from Cef and Electron when browser is focused
@@ -51,7 +81,7 @@ export const useVrcStatusStore = defineStore('VrcStatus', () => {
init();
return {
- lastStatus,
+ statusText,
isAlertClosed,
onBrowserFocus,
getVrcStatus