Switch VRC status to notification

This commit is contained in:
Natsumi
2025-10-04 20:07:47 +13:00
parent 042606b591
commit 4bd589e8f0
4 changed files with 56 additions and 50 deletions

View File

@@ -1,7 +1,6 @@
<template>
<!DOCTYPE html>
<el-config-provider :locale="currentLocale">
<VrcStatus></VrcStatus>
<div
id="x-app"
class="x-app"
@@ -105,8 +104,6 @@
import zhTW from 'element-plus/es/locale/lang/zh-tw';
import th from 'element-plus/es/locale/lang/th';
import VrcStatus from './components/VrcStatus.vue';
import Login from './views/Login/Login.vue';
import NavMenu from './components/NavMenu.vue';
import Sidebar from './views/Sidebar/Sidebar.vue';

View File

@@ -1,39 +0,0 @@
<template>
<el-alert v-if="statusText" type="warning" show-icon center :closable="true" @close="onAlertClose">
<template #title>
<span @click="openStatusPage" class="status-text">
{{ statusText }}
</span>
</template>
</el-alert>
</template>
<script setup>
import { storeToRefs } from 'pinia';
import { useVrcStatusStore } from '../stores';
import { openExternalLink } from '../shared/utils';
const { statusText, isAlertClosed } = storeToRefs(useVrcStatusStore());
isAlertClosed.value = false;
function onAlertClose() {
isAlertClosed.value = true;
}
function openStatusPage() {
if (isAlertClosed.value) {
return;
}
openExternalLink('https://status.vrchat.com');
}
</script>
<style scoped>
.status-text {
cursor: pointer;
}
.status-text:hover {
text-decoration: underline;
}
</style>

View File

@@ -1,6 +1,8 @@
import { defineStore } from 'pinia';
import webApiService from '../service/webapi';
import { ref, computed } from 'vue';
import { ElNotification } from 'element-plus';
import { openExternalLink } from '../shared/utils';
export const useVrcStatusStore = defineStore('VrcStatus', () => {
const vrcStatusApiUrl = 'https://status.vrchat.com/api/v2';
@@ -8,9 +10,10 @@ export const useVrcStatusStore = defineStore('VrcStatus', () => {
const lastStatus = ref('');
const lastStatusSummary = ref('');
const lastTimeFetched = ref(0);
const isAlertClosed = ref(false);
const pollingInterval = ref(0);
const alertRef = ref(null);
const lastStatusText = ref('');
const statusText = computed(() => {
if (lastStatusSummary.value) {
return `${lastStatus.value}: ${lastStatusSummary.value}`;
@@ -18,6 +21,52 @@ export const useVrcStatusStore = defineStore('VrcStatus', () => {
return lastStatus.value;
});
function updateAlert() {
if (lastStatusText.value === statusText.value) {
return;
}
lastStatusText.value = statusText.value;
if (!statusText.value) {
if (alertRef.value) {
alertRef.value.close();
alertRef.value = ElNotification({
title: 'VRChat Status',
message: 'All Systems Operational',
type: 'success',
duration: 0,
showClose: true,
onClick: () => {
openStatusPage();
},
onClose: () => {
alertRef.value = null;
}
});
}
return;
}
alertRef.value?.close();
alertRef.value = ElNotification({
title: 'VRChat Status',
message: statusText.value,
type: 'warning',
duration: 0,
showClose: true,
onClick: () => {
openStatusPage();
},
onClose: () => {
alertRef.value = null;
}
});
}
function openStatusPage() {
openExternalLink('https://status.vrchat.com');
}
async function getVrcStatus() {
const response = await webApiService.execute({
url: `${vrcStatusApiUrl}/status.json`,
@@ -31,10 +80,12 @@ export const useVrcStatusStore = defineStore('VrcStatus', () => {
if (data.status.description === 'All Systems Operational') {
lastStatus.value = '';
pollingInterval.value = 15 * 60 * 1000; // 15 minutes
updateAlert();
return;
}
lastStatus.value = data.status.description;
pollingInterval.value = 2 * 60 * 1000; // 2 minutes
updateAlert();
getVrcStatusSummary();
}
@@ -57,6 +108,7 @@ export const useVrcStatusStore = defineStore('VrcStatus', () => {
summary = summary.slice(0, -2);
}
lastStatusSummary.value = summary;
updateAlert();
}
// ran from Cef and Electron when browser is focused
@@ -69,9 +121,6 @@ export const useVrcStatusStore = defineStore('VrcStatus', () => {
function init() {
getVrcStatus();
setInterval(() => {
if (isAlertClosed.value) {
return;
}
if (Date.now() - lastTimeFetched.value > pollingInterval.value) {
getVrcStatus();
}
@@ -81,8 +130,8 @@ export const useVrcStatusStore = defineStore('VrcStatus', () => {
init();
return {
lastStatus,
statusText,
isAlertClosed,
onBrowserFocus,
getVrcStatus
};

View File

@@ -170,7 +170,7 @@
<span class="extra">
<span class="time">{{ formatDate(feed.created_at) }}</span>
<i class="ri-mail-send-line mr-5"></i>
<span class="name" v-text="feed.senderUsername"></span>
<span class="name mr-5" v-text="feed.senderUsername"></span>
<VrLocation
:location="feed.details.worldId"
:hint="feed.details.worldName"
@@ -401,9 +401,8 @@
<template v-if="feed.displayName">
<i class="ri-bard-line mr-5"></i>
<span
class="name"
class="name mr-5"
v-text="feed.displayName"
style="margin-right: 5px"
:style="{ color: feed.tagColour }"></span>
<VrLocation
:location="feed.instanceId"