MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-17 13:53:52 +02:00
Code Issues Packages Projects Releases Wiki Activity

Linux: SteamVR overlay support (#1299)

Browse Source 
* fix: open folder and select item on linux

* feat: linux wrist overlay

* feat: linux hmd overlay

* feat: replace unix sockets with shm on linux

* fix: reduce linux wrist overlay fps

* fix: hide electron offscreen windows

* fix: destroy electron offscreen windows when not in use

* fix: open folder and select item on linux

* feat: cpu, uptime and device monitoring on linux

* feat: native wayland gl context with x11 fallback on linux

* fix: use platform agnostic wording for common folders

* fix: crash dumps folder button on linux

* fix: enable missing VR notification options on linux

* fix: update cef, eslint config to include updated AppApiVr names

* merge: rebase linux VR changes to upstream

* Clean up

* Load custom file contents rather than path

Fixes loading custom file in debug mode

* fix: call SetVR on linux as well

* fix: AppApiVrElectron init, properly create and dispose of shm

* Handle avatar history error

* Lint

* Change overlay dispose logic

* macOS DOTNET_ROOT

* Remove moving dotnet bin

* Fix

* fix: init overlay on SteamVR restart

* Fix fetching empty instance, fix user dialog not fetching

* Trim direct access inputs

* Make icon higher res, because mac build would fail 😂

* macOS fixes

* will it build? that's the question

* fix: ensure offscreen windows are ready before vrinit

* will it build? that's the question

* will it build? that's the question

* meow

* one, more, time

* Fix crash and overlay ellipsis

* a

---------

Co-authored-by: Natsumi <cmcooper123@hotmail.com>
This commit is contained in:
rs189
2025-07-19 09:07:43 +09:00
committed by GitHub
parent 53723d37b0
commit a2dc6ba9a4
53 changed files with 10555 additions and 7865 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/plugin/ipc.js
View File

@@ -20,4 +20,5 @@ if (WINDOWS) {
window.LogWatcher = InteropApi.LogWatcher;
window.Discord = InteropApi.Discord;
window.AssetBundleManager = InteropApi.AssetBundleManager;
}
window.AppApiVrElectron = InteropApi.AppApiVrElectron;
}

38
src/shared/utils/base/ui.js
View File

@@ -151,35 +151,35 @@ function updateTrustColorClasses(trustColor) {
document.getElementsByTagName('head')[0].appendChild(style);
}
function refreshCustomCss() {
async function refreshCustomCss() {
if (document.contains(document.getElementById('app-custom-style'))) {
document.getElementById('app-custom-style').remove();
}
AppApi.CustomCssPath().then((customCss) => {
const customCss = await AppApi.CustomCss();
if (customCss) {
const head = document.head;
if (customCss) {
const $appCustomStyle = document.createElement('link');
$appCustomStyle.setAttribute('id', 'app-custom-style');
$appCustomStyle.rel = 'stylesheet';
$appCustomStyle.href = `file://${customCss}?_=${Date.now()}`;
head.appendChild($appCustomStyle);
}
});
const $appCustomStyle = document.createElement('link');
$appCustomStyle.setAttribute('id', 'app-custom-style');
$appCustomStyle.rel = 'stylesheet';
$appCustomStyle.type = 'text/css';
$appCustomStyle.textContent = customCss;
head.appendChild($appCustomStyle);
}
}
function refreshCustomScript() {
async function refreshCustomScript() {
if (document.contains(document.getElementById('app-custom-script'))) {
document.getElementById('app-custom-script').remove();
}
AppApi.CustomScriptPath().then((customScript) => {
const customScript = await AppApi.CustomScript();
if (customScript) {
const head = document.head;
if (customScript) {
const $appCustomScript = document.createElement('script');
$appCustomScript.setAttribute('id', 'app-custom-script');
$appCustomScript.src = `file://${customScript}?_=${Date.now()}`;
head.appendChild($appCustomScript);
}
});
const $appCustomScript = document.createElement('script');
$appCustomScript.setAttribute('id', 'app-custom-script');
$appCustomScript.type = 'text/javascript';
$appCustomScript.textContent = customScript;
head.appendChild($appCustomScript);
}
}
/**

2
src/shared/utils/location.js
View File

@@ -60,7 +60,7 @@ function parseLocation(tag) {
ctx.isPrivate = true;
} else if (_tag === 'traveling' || _tag === 'traveling:traveling') {
ctx.isTraveling = true;
} else if (!_tag.startsWith('local')) {
} else if (tag && !_tag.startsWith('local')) {
ctx.isRealInstance = true;
const sep = _tag.indexOf(':');
// technically not part of instance id, but might be there when coping id from url so why not support it

40
src/stores/avatar.js
View File

@@ -385,31 +385,35 @@ export const useAvatarStore = defineStore('Avatar', () => {
}
/**
* aka: `$app.methods.addAvatarToHistory`
* @param {string} avatarId
*/
function addAvatarToHistory(avatarId) {
avatarRequest.getAvatar({ avatarId }).then((args) => {
const ref = applyAvatar(args.json);
avatarRequest
.getAvatar({ avatarId })
.then((args) => {
const ref = applyAvatar(args.json);
database.addAvatarToCache(ref);
database.addAvatarToHistory(ref.id);
database.addAvatarToCache(ref);
database.addAvatarToHistory(ref.id);
if (ref.authorId === userStore.currentUser.id) {
return;
}
const historyArray = state.avatarHistoryArray;
for (let i = 0; i < historyArray.length; ++i) {
if (historyArray[i].id === ref.id) {
historyArray.splice(i, 1);
if (ref.authorId === userStore.currentUser.id) {
return;
}
}
state.avatarHistoryArray.unshift(ref);
state.avatarHistory.delete(ref.id);
state.avatarHistory.add(ref.id);
});
const historyArray = state.avatarHistoryArray;
for (let i = 0; i < historyArray.length; ++i) {
if (historyArray[i].id === ref.id) {
historyArray.splice(i, 1);
}
}
state.avatarHistoryArray.unshift(ref);
state.avatarHistory.delete(ref.id);
state.avatarHistory.add(ref.id);
})
.catch((err) => {
console.error('Failed to add avatar to history:', err);
});
}
function clearAvatarHistory() {

6
src/stores/settings/advanced.js
View File

@@ -531,10 +531,10 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
state.folderSelectorDialogVisible = true;
let newFolder = '';
if (LINUX) {
newFolder = await window.electron.openDirectoryDialog();
if (WINDOWS) {
newFolder = await AppApi.OpenFolderSelectorDialog(oldPath);
} else {
newFolder = await AppApi.OpenFolderSelectorDialog(oldPath);
newFolder = await window.electron.openDirectoryDialog();
}
state.folderSelectorDialogVisible = false;

12
src/stores/settings/notifications.js
View File

@@ -362,10 +362,10 @@ export const useNotificationsSettingsStore = defineStore(
function getTTSVoiceName() {
let voices;
if (LINUX) {
voices = state.TTSvoices;
} else {
if (WINDOWS) {
voices = speechSynthesis.getVoices();
} else {
voices = state.TTSvoices;
}
if (voices.length === 0) {
return '';
@@ -379,10 +379,10 @@ export const useNotificationsSettingsStore = defineStore(
async function changeTTSVoice(index) {
setNotificationTTSVoice(index);
let voices;
if (LINUX) {
voices = state.TTSvoices;
} else {
if (WINDOWS) {
voices = speechSynthesis.getVoices();
} else {
voices = state.TTSvoices;
}
if (voices.length === 0) {
return;

8
src/stores/updateLoop.js
View File

@@ -133,16 +133,16 @@ export const useUpdateLoopStore = defineStore('UpdateLoop', () => {
(vrcxStore.isRunningUnderWine || LINUX) &&
--state.nextGameRunningCheck <= 0
) {
if (LINUX) {
if (WINDOWS) {
state.nextGameRunningCheck = 3;
AppApi.CheckGameRunning();
} else {
state.nextGameRunningCheck = 1;
gameStore.updateIsGameRunning(
await AppApi.IsGameRunning(),
await AppApi.IsSteamVRRunning(),
false
);
} else {
state.nextGameRunningCheck = 3;
AppApi.CheckGameRunning();
}
}
if (--state.nextDatabaseOptimize <= 0) {

7
src/stores/user.js
View File

@@ -851,12 +851,7 @@ export const useUserStore = defineStore('User', () => {
}
applyUserDialogLocation(true);
if (
args.cache &&
args.ref.$lastFetch < Date.now() - 10000 // 10 seconds
) {
userRequest.getUser(args.params);
}
userRequest.getUser(args.params);
let inCurrentWorld = false;
if (
locationStore.lastLocation.playerList.has(D.ref.id)

57
src/stores/vr.js
View File

@@ -27,7 +27,9 @@ export const useVrStore = defineStore('Vr', () => {
const userStore = useUserStore();
const sharedFeedStore = useSharedFeedStore();
const state = reactive({});
const state = reactive({
overlayActive: false
});
watch(
() => watchState.isFriendsLoaded,
@@ -48,6 +50,8 @@ export const useVrStore = defineStore('Vr', () => {
sharedFeedStore.updateSharedFeed(true);
friendStore.onlineFriendCount = 0; // force an update
friendStore.updateOnlineFriendCoutner();
state.overlayActive = true;
}
async function saveOpenVROption() {
@@ -74,7 +78,7 @@ export const useVrStore = defineStore('Vr', () => {
}
}
}
let onlineFor = '';
let onlineFor = null;
if (!wristOverlaySettingsStore.hideUptimeFromFeed) {
onlineFor = userStore.currentUser.$online_for;
}
@@ -125,6 +129,13 @@ export const useVrStore = defineStore('Vr', () => {
}
function updateOpenVR() {
let newState = {
active: false,
hmdOverlay: false,
wristOverlay: false,
menuButton: false,
overlayHand: 0
};
if (
notificationsSettingsStore.openVR &&
gameStore.isSteamVRRunning &&
@@ -140,16 +151,42 @@ export const useVrStore = defineStore('Vr', () => {
) {
hmdOverlay = true;
}
// active, hmdOverlay, wristOverlay, menuButton, overlayHand
AppApi.SetVR(
true,
newState = {
active: true,
hmdOverlay,
wristOverlaySettingsStore.overlayWrist,
wristOverlaySettingsStore.overlaybutton,
wristOverlaySettingsStore.overlayHand
wristOverlay: wristOverlaySettingsStore.overlayWrist,
menuButton: wristOverlaySettingsStore.overlaybutton,
overlayHand: wristOverlaySettingsStore.overlayHand
};
}
AppApi.SetVR(
newState.active,
newState.hmdOverlay,
newState.wristOverlay,
newState.menuButton,
newState.overlayHand
);
if (LINUX) {
window.electron.updateVr(
newState.active,
newState.hmdOverlay,
newState.wristOverlay,
newState.menuButton,
newState.overlayHand
);
} else {
AppApi.SetVR(false, false, false, false, 0);
if (state.overlayActive !== newState.active) {
if (
window.electron.getWristOverlayWindow() ||
window.electron.getHmdOverlayWindow()
) {
vrInit();
state.overlayActive = newState.active;
}
setTimeout(() => vrInit(), 1000); // give the overlay time to load
}
}
}

6
src/stores/vrcx.js
View File

@@ -652,11 +652,11 @@ export const useVrcxStore = defineStore('Vrcx', () => {
async function backupVrcRegistry(name) {
let regJson;
if (LINUX) {
if (WINDOWS) {
regJson = await AppApi.GetVRChatRegistry();
} else {
regJson = await AppApi.GetVRChatRegistryJson();
regJson = JSON.parse(regJson);
} else {
regJson = await AppApi.GetVRChatRegistry();
}
const newBackup = {
name,

55
src/types/globals.d.ts vendored
View File

@@ -7,6 +7,7 @@ declare global {
interface Window {
$app: any;
AppApi: AppApi;
AppApiVr: AppApiVr;
WebApi: WebApi;
VRCXStorage: VRCXStorage;
SQLite: SQLite;
@@ -51,6 +52,15 @@ declare global {
Function: (event: any, state: { windowState: any }) => void
) => void;
restartApp: () => Promise<void>;
getWristOverlayWindow: () => Promise<boolean>;
getHmdOverlayWindow: () => Promise<boolean>;
updateVr: (
active: bool,
hmdOverlay: bool,
wristOverlay: bool,
menuButton: bool,
overlayHand: int
) => Promise<void>;
};
__APP_GLOBALS__: {
debug: boolean;
@@ -141,7 +151,10 @@ declare global {
};
const Discord: {
SetTimestamps(startTimestamp: number, endTimestamp: number): void;
SetTimestamps(
startTimestamp: number,
endTimestamp: number
): Promise<void>;
SetAssets(
bigIcon: string,
bigIconText: string,
@@ -154,8 +167,8 @@ declare global {
buttonUrl: string,
appId: string,
activityType: number
): void;
SetText(details: string, state: string): void;
): Promise<void>;
SetText(details: string, state: string): Promise<void>;
SetActive(active: boolean): Promise<boolean>;
};
@@ -202,8 +215,8 @@ declare global {
GetLaunchCommand(): Promise<string>;
IPCAnnounceStart(): Promise<void>;
SendIpc(type: string, data: string): Promise<void>;
CustomCssPath(): Promise<string>;
CustomScriptPath(): Promise<string>;
CustomCss(): Promise<string>;
CustomScript(): Promise<string>;
CurrentCulture(): Promise<string>;
CurrentLanguage(): Promise<string>;
GetVersion(): Promise<string>;
@@ -355,21 +368,23 @@ declare global {
};
const AppApiVr: {
Init(): void;
VrInit(): void;
ToggleSystemMonitor(enabled: boolean): void;
CpuUsage(): number;
GetVRDevices(): string[][];
GetUptime(): number;
CurrentCulture(): string;
CustomVrScriptPath(): string;
IsRunningUnderWine(): boolean;
Init(): Promise<void>;
VrInit(): Promise<void>;
ToggleSystemMonitor(enabled: boolean): Promise<void>;
CpuUsage(): Promise<number>;
GetVRDevices(): Promise<string[][]>;
GetUptime(): Promise<number>;
CurrentCulture(): Promise<string>;
CustomVrScript(): Promise<string>;
IsRunningUnderWine(): Promise<boolean>;
GetExecuteVrFeedFunctionQueue(): Promise<Map<string, string>>;
GetExecuteVrOverlayFunctionQueue(): Promise<Map<string, string>>;
};
const WebApi: {
ClearCookies(): void;
GetCookies(): string;
SetCookies(cookie: string): void;
ClearCookies(): Promise<void>;
GetCookies(): Promise<string>;
SetCookies(cookie: string): Promise<void>;
Execute(options: any): Promise<{ Item1: number; Item2: string }>;
ExecuteJson(requestJson: string): Promise<string>;
};
@@ -399,9 +414,9 @@ declare global {
};
const webApiService: {
clearCookies(): void;
getCookies(): string;
setCookies(cookie: string): void;
clearCookies(): Promise<void>;
getCookies(): Promise<string>;
setCookies(cookie: string): Promise<void>;
execute(options: {
url: string;
method: string;

2
src/types/user.d.ts vendored
View File

@@ -128,7 +128,7 @@ interface getCurrentUserResponse extends getUserResponse {
oculusId: string;
offlineFriends: string[];
onlineFriends: string[];
pastDisplayNames: { displayName: string; dateChanged: string }[];
pastDisplayNames: { displayName: string; updated_at: string }[];
picoId: string;
presence?: {
avatarThumbnail: string;

3
src/views/Profile/Profile.vue
View File

@@ -595,6 +595,7 @@
inputPattern: /\S+/,
inputErrorMessage: t('prompt.direct_access_user_id.input_error'),
callback: (action, instance) => {
instance.inputValue = instance.inputValue.trim();
if (action === 'confirm' && instance.inputValue) {
const testUrl = instance.inputValue.substring(0, 15);
if (testUrl === 'https://vrchat.') {
@@ -622,6 +623,7 @@
inputPattern: /\S+/,
inputErrorMessage: t('prompt.direct_access_world_id.input_error'),
callback: (action, instance) => {
instance.inputValue = instance.inputValue.trim();
if (action === 'confirm' && instance.inputValue) {
if (!directAccessWorld(instance.inputValue)) {
$message({
@@ -641,6 +643,7 @@
inputPattern: /\S+/,
inputErrorMessage: t('prompt.direct_access_avatar_id.input_error'),
callback: (action, instance) => {
instance.inputValue = instance.inputValue.trim();
if (action === 'confirm' && instance.inputValue) {
const testUrl = instance.inputValue.substring(0, 15);
if (testUrl === 'https://vrchat.') {

191
src/views/Settings/Settings.vue
View File

@@ -77,32 +77,31 @@
<!--//- General | Application-->
<div class="options-container">
<span class="header">{{ t('view.settings.general.application.header') }}</span>
<template v-if="!isLinux">
<simple-switch
:label="t('view.settings.general.application.startup')"
:value="isStartAtWindowsStartup"
@change="setIsStartAtWindowsStartup" />
<simple-switch
:label="t('view.settings.general.application.minimized')"
:value="isStartAsMinimizedState"
@change="setIsStartAsMinimizedState" />
<simple-switch
:label="t('view.settings.general.application.tray')"
:value="isCloseToTray"
@change="setIsCloseToTray" />
</template>
<template v-if="!isLinux">
<simple-switch
:label="t('view.settings.general.application.disable_gpu_acceleration')"
:value="disableGpuAcceleration"
:tooltip="t('view.settings.general.application.disable_gpu_acceleration_tooltip')"
@change="setDisableGpuAcceleration" />
<simple-switch
:label="t('view.settings.general.application.disable_vr_overlay_gpu_acceleration')"
:value="disableVrOverlayGpuAcceleration"
:tooltip="t('view.settings.general.application.disable_gpu_acceleration_tooltip')"
@change="setDisableVrOverlayGpuAcceleration" />
</template>
<simple-switch
v-if="!isLinux"
:label="t('view.settings.general.application.startup')"
:value="isStartAtWindowsStartup"
@change="setIsStartAtWindowsStartup" />
<simple-switch
:label="t('view.settings.general.application.minimized')"
:value="isStartAsMinimizedState"
@change="setIsStartAsMinimizedState" />
<simple-switch
:label="t('view.settings.general.application.tray')"
:value="isCloseToTray"
@change="setIsCloseToTray" />
<simple-switch
v-if="!isLinux"
:label="t('view.settings.general.application.disable_gpu_acceleration')"
:value="disableGpuAcceleration"
:tooltip="t('view.settings.general.application.disable_gpu_acceleration_tooltip')"
@change="setDisableGpuAcceleration" />
<simple-switch
v-if="!isLinux"
:label="t('view.settings.general.application.disable_vr_overlay_gpu_acceleration')"
:value="disableVrOverlayGpuAcceleration"
:tooltip="t('view.settings.general.application.disable_gpu_acceleration_tooltip')"
@change="setDisableVrOverlayGpuAcceleration" />
<div class="options-container-item">
<el-button size="small" icon="el-icon-connection" @click="promptProxySettings">{{
t('view.settings.general.application.proxy')
@@ -796,7 +795,7 @@
}}</el-radio-button>
</el-radio-group>
</div>
<template v-if="!isLinux">
<template>
<simple-switch
:label="
t('view.settings.notifications.notifications.steamvr_notifications.steamvr_overlay')
@@ -831,6 +830,43 @@
}}</el-button
>
</div>
<div class="options-container-item">
<span class="name" style="vertical-align: top; padding-top: 10px">{{
t(
'view.settings.notifications.notifications.steamvr_notifications.notification_opacity'
)
}}</span>
<el-slider
:value="notificationOpacity"
@input="setNotificationOpacity"
:show-tooltip="false"
:min="0"
:max="100"
show-input
style="display: inline-block; width: 300px" />
</div>
<div class="options-container-item">
<el-button
size="small"
icon="el-icon-time"
:disabled="(!overlayNotifications || !openVR) && !xsNotifications"
@click="promptNotificationTimeout"
>{{
t(
'view.settings.notifications.notifications.steamvr_notifications.notification_timeout'
)
}}</el-button
>
</div>
<simple-switch
:label="t('view.settings.notifications.notifications.steamvr_notifications.user_images')"
:value="imageNotifications"
@change="
setImageNotifications();
saveOpenVROption();
" />
</template>
<template v-if="!isLinux">
<simple-switch
:label="
t(
@@ -856,61 +892,30 @@
saveOpenVROption();
" />
</template>
<simple-switch
:label="
t(
'view.settings.notifications.notifications.steamvr_notifications.ovrtoolkit_hud_notifications'
)
"
:value="ovrtHudNotifications"
@change="
setOvrtHudNotifications();
saveOpenVROption();
" />
<simple-switch
:label="
t(
'view.settings.notifications.notifications.steamvr_notifications.ovrtoolkit_wrist_notifications'
)
"
:value="ovrtWristNotifications"
@change="
setOvrtWristNotifications();
saveOpenVROption();
" />
<simple-switch
:label="t('view.settings.notifications.notifications.steamvr_notifications.user_images')"
:value="imageNotifications"
@change="
setImageNotifications();
saveOpenVROption();
" />
<div class="options-container-item">
<span class="name" style="vertical-align: top; padding-top: 10px">{{
t('view.settings.notifications.notifications.steamvr_notifications.notification_opacity')
}}</span>
<el-slider
:value="notificationOpacity"
@input="setNotificationOpacity"
:show-tooltip="false"
:min="0"
:max="100"
show-input
style="display: inline-block; width: 300px" />
</div>
<div class="options-container-item">
<el-button
size="small"
icon="el-icon-time"
:disabled="(!overlayNotifications || !openVR) && !xsNotifications"
@click="promptNotificationTimeout"
>{{
<template v-if="!isLinux">
<simple-switch
:label="
t(
'view.settings.notifications.notifications.steamvr_notifications.notification_timeout'
'view.settings.notifications.notifications.steamvr_notifications.ovrtoolkit_hud_notifications'
)
}}</el-button
>
</div>
"
:value="ovrtHudNotifications"
@change="
setOvrtHudNotifications();
saveOpenVROption();
" />
<simple-switch
:label="
t(
'view.settings.notifications.notifications.steamvr_notifications.ovrtoolkit_wrist_notifications'
)
"
:value="ovrtWristNotifications"
@change="
setOvrtWristNotifications();
saveOpenVROption();
" />
</template>
</div>
<!--//- Notifications | Notifications | Desktop Notifications-->
<div class="options-container">
@@ -1047,7 +1052,7 @@
</el-tab-pane>
<!--//- Wrist Overlay Tab-->
<el-tab-pane v-if="!isLinux" lazy :label="t('view.settings.category.wrist_overlay')">
<el-tab-pane lazy :label="t('view.settings.category.wrist_overlay')">
<!--//- Wrist Overlay | SteamVR Wrist Overlay-->
<div class="options-container" style="margin-top: 0">
<span class="header">{{ t('view.settings.wrist_overlay.steamvr_wrist_overlay.header') }}</span>
@@ -1436,19 +1441,15 @@
saveOpenVROption();
"></simple-switch>
<!--//- Advanced | VRChat Quit Fix-->
<template v-if="!isLinux">
<span class="sub-header">{{
t('view.settings.advanced.advanced.vrchat_quit_fix.header')
}}</span>
<simple-switch
:label="t('view.settings.advanced.advanced.vrchat_quit_fix.description')"
:value="vrcQuitFix"
:long-label="true"
@change="
setVrcQuitFix();
saveOpenVROption();
" />
</template>
<span class="sub-header">{{ t('view.settings.advanced.advanced.vrchat_quit_fix.header') }}</span>
<simple-switch
:label="t('view.settings.advanced.advanced.vrchat_quit_fix.description')"
:value="vrcQuitFix"
:long-label="true"
@change="
setVrcQuitFix();
saveOpenVROption();
" />
<!--//- Advanced | Auto Cache Management-->
<span class="sub-header">{{
t('view.settings.advanced.advanced.auto_cache_management.header')
@@ -1528,7 +1529,7 @@
</div>
</div>
<!--//- Advanced | Video Progress Pie-->
<div v-if="!isLinux" class="options-container">
<div class="options-container">
<span class="header">{{ t('view.settings.advanced.advanced.video_progress_pie.header') }}</span>
<simple-switch
:label="t('view.settings.advanced.advanced.video_progress_pie.enable')"

293
src/vr.js
View File

@@ -23,13 +23,19 @@ import { removeFromArray } from './shared/utils/base/array';
import { timeToText } from './shared/utils/base/format';
import pugTemplate from './vr.pug';
import InteropApi from './ipc-electron/interopApi.js';
Vue.component('marquee-text', MarqueeText);
(async function () {
let $app = {};
await CefSharp.BindObjectAsync('AppApiVr');
if (WINDOWS) {
await CefSharp.BindObjectAsync('AppApiVr');
} else {
// @ts-ignore
window.AppApiVr = InteropApi.AppApiVrElectron;
}
Noty.overrideDefaults({
animation: {
@@ -82,7 +88,7 @@ Vue.component('marquee-text', MarqueeText);
methods: {
parse() {
this.text = this.location;
var L = parseLocation(this.location);
const L = parseLocation(this.location);
if (L.isOffline) {
this.text = 'Offline';
} else if (L.isPrivate) {
@@ -176,9 +182,12 @@ Vue.component('marquee-text', MarqueeText);
watch: {},
el: '#root',
async mounted() {
this.isRunningUnderWine = await AppApiVr.IsRunningUnderWine();
await this.applyWineEmojis();
workerTimers.setTimeout(() => AppApiVr.VrInit(), 5000);
if (WINDOWS) {
this.isRunningUnderWine = await AppApiVr.IsRunningUnderWine();
await this.applyWineEmojis();
} else {
this.updateVrElectronLoop();
}
if (this.appType === '1') {
this.refreshCustomScript();
this.updateStatsLoop();
@@ -189,97 +198,97 @@ Vue.component('marquee-text', MarqueeText);
Object.assign($app, app);
$app.methods.configUpdate = function (json) {
this.config = JSON.parse(json);
this.hudFeed = [];
this.hudTimeout = [];
this.setDatetimeFormat();
this.setAppLanguage(this.config.appLanguage);
this.updateFeedLength();
$app.config = JSON.parse(json);
$app.hudFeed = [];
$app.hudTimeout = [];
$app.setDatetimeFormat();
$app.setAppLanguage($app.config.appLanguage);
$app.updateFeedLength();
if (
this.config.vrOverlayCpuUsage !== this.cpuUsageEnabled ||
this.config.pcUptimeOnFeed !== this.pcUptimeEnabled
$app.config.vrOverlayCpuUsage !== $app.cpuUsageEnabled ||
$app.config.pcUptimeOnFeed !== $app.pcUptimeEnabled
) {
this.cpuUsageEnabled = this.config.vrOverlayCpuUsage;
this.pcUptimeEnabled = this.config.pcUptimeOnFeed;
$app.cpuUsageEnabled = $app.config.vrOverlayCpuUsage;
$app.pcUptimeEnabled = $app.config.pcUptimeOnFeed;
AppApiVr.ToggleSystemMonitor(
this.cpuUsageEnabled || this.pcUptimeEnabled
$app.cpuUsageEnabled || $app.pcUptimeEnabled
);
}
if (this.config.notificationOpacity !== this.notificationOpacity) {
this.notificationOpacity = this.config.notificationOpacity;
this.setNotyOpacity(this.notificationOpacity);
if ($app.config.notificationOpacity !== $app.notificationOpacity) {
$app.notificationOpacity = $app.config.notificationOpacity;
$app.setNotyOpacity($app.notificationOpacity);
}
};
$app.methods.updateOnlineFriendCount = function (count) {
this.onlineFriendCount = parseInt(count, 10);
$app.onlineFriendCount = parseInt(count, 10);
};
$app.methods.nowPlayingUpdate = function (json) {
this.nowPlaying = JSON.parse(json);
if (this.appType === '2') {
var circle = document.querySelector('.np-progress-circle-stroke');
$app.nowPlaying = JSON.parse(json);
if ($app.appType === '2') {
const circle = document.querySelector('.np-progress-circle-stroke');
if (
this.lastLocation.progressPie &&
this.nowPlaying.percentage !== 0
$app.lastLocation.progressPie &&
$app.nowPlaying.percentage !== 0
) {
circle.style.opacity = 0.5;
var circumference = circle.getTotalLength();
const circumference = circle.getTotalLength();
circle.style.strokeDashoffset =
circumference -
(this.nowPlaying.percentage / 100) * circumference;
($app.nowPlaying.percentage / 100) * circumference;
} else {
circle.style.opacity = 0;
}
}
this.updateFeedLength();
$app.updateFeedLength();
};
$app.methods.lastLocationUpdate = function (json) {
this.lastLocation = JSON.parse(json);
$app.lastLocation = JSON.parse(json);
};
$app.methods.wristFeedUpdate = function (json) {
this.wristFeed = JSON.parse(json);
this.updateFeedLength();
$app.wristFeed = JSON.parse(json);
$app.updateFeedLength();
};
$app.methods.updateFeedLength = function () {
if (this.appType === '2' || this.wristFeed.length === 0) {
if ($app.appType === '2' || $app.wristFeed.length === 0) {
return;
}
var length = 16;
if (!this.config.hideDevicesFromFeed) {
let length = 16;
if (!$app.config.hideDevicesFromFeed) {
length -= 2;
if (this.deviceCount > 8) {
if ($app.deviceCount > 8) {
length -= 1;
}
}
if (this.nowPlaying.playing) {
if ($app.nowPlaying.playing) {
length -= 1;
}
if (length < this.wristFeed.length) {
this.wristFeed.length = length;
if (length < $app.wristFeed.length) {
$app.wristFeed.length = length;
}
};
$app.methods.refreshCustomScript = function () {
$app.methods.refreshCustomScript = async function () {
if (document.contains(document.getElementById('vr-custom-script'))) {
document.getElementById('vr-custom-script').remove();
}
AppApiVr.CustomVrScriptPath().then((customScript) => {
var head = document.head;
if (customScript) {
var $vrCustomScript = document.createElement('script');
$vrCustomScript.setAttribute('id', 'vr-custom-script');
$vrCustomScript.src = `file://${customScript}?_=${Date.now()}`;
head.appendChild($vrCustomScript);
}
});
const customScript = await AppApiVr.CustomVrScript();
if (customScript) {
const head = document.head;
const $vrCustomScript = document.createElement('script');
$vrCustomScript.setAttribute('id', 'vr-custom-script');
$vrCustomScript.type = 'text/javascript';
$vrCustomScript.textContent = customScript;
head.appendChild($vrCustomScript);
}
};
$app.methods.setNotyOpacity = function (value) {
var opacity = parseFloat(value / 100).toFixed(2);
const opacity = parseFloat(value / 100).toFixed(2);
let element = document.getElementById('noty-opacity');
if (!element) {
document.body.insertAdjacentHTML(
@@ -293,43 +302,43 @@ Vue.component('marquee-text', MarqueeText);
$app.methods.updateStatsLoop = async function () {
try {
this.currentTime = new Date()
.toLocaleDateString(this.currentCulture, {
$app.currentTime = new Date()
.toLocaleDateString($app.currentCulture, {
month: '2-digit',
day: '2-digit',
year: 'numeric',
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
hourCycle: this.config.dtHour12 ? 'h12' : 'h23'
hourCycle: $app.config.dtHour12 ? 'h12' : 'h23'
})
.replace(' AM', ' am')
.replace(' PM', ' pm')
.replace(',', '');
if (this.cpuUsageEnabled) {
var cpuUsage = await AppApiVr.CpuUsage();
this.cpuUsage = cpuUsage.toFixed(0);
if ($app.cpuUsageEnabled) {
const cpuUsage = await AppApiVr.CpuUsage();
$app.cpuUsage = cpuUsage.toFixed(0);
}
if (this.lastLocation.date !== 0) {
this.lastLocationTimer = timeToText(
Date.now() - this.lastLocation.date
if ($app.lastLocation.date !== 0) {
$app.lastLocationTimer = timeToText(
Date.now() - $app.lastLocation.date
);
} else {
this.lastLocationTimer = '';
$app.lastLocationTimer = '';
}
if (this.lastLocation.onlineFor) {
this.onlineForTimer = timeToText(
Date.now() - this.lastLocation.onlineFor
if ($app.lastLocation.onlineFor) {
$app.onlineForTimer = timeToText(
Date.now() - $app.lastLocation.onlineFor
);
} else {
this.onlineForTimer = '';
$app.onlineForTimer = '';
}
if (!this.config.hideDevicesFromFeed) {
if (!$app.config.hideDevicesFromFeed) {
AppApiVr.GetVRDevices().then((devices) => {
var deviceList = [];
var baseStations = 0;
let deviceList = [];
let baseStations = 0;
devices.forEach((device) => {
device[3] = parseInt(device[3], 10);
if (device[0] === 'base' && device[1] === 'connected') {
@@ -338,7 +347,7 @@ Vue.component('marquee-text', MarqueeText);
deviceList.push(device);
}
});
this.deviceCount = deviceList.length;
$app.deviceCount = deviceList.length;
const deviceValue = (dev) => {
if (dev[0] === 'headset') return 0;
if (dev[0] === 'leftController') return 1;
@@ -368,38 +377,89 @@ Vue.component('marquee-text', MarqueeText);
'',
baseStations
]);
this.deviceCount += 1;
$app.deviceCount += 1;
}
this.devices = deviceList;
$app.devices = deviceList;
});
} else {
this.devices = [];
$app.devices = [];
}
if (this.config.pcUptimeOnFeed) {
if ($app.config.pcUptimeOnFeed) {
AppApiVr.GetUptime().then((uptime) => {
if (uptime) {
this.pcUptime = timeToText(uptime);
$app.pcUptime = timeToText(uptime);
}
});
} else {
this.pcUptime = '';
$app.pcUptime = '';
}
} catch (err) {
console.error(err);
}
workerTimers.setTimeout(() => this.updateStatsLoop(), 500);
workerTimers.setTimeout(() => $app.updateStatsLoop(), 500);
};
$app.methods.updateVrElectronLoop = async function () {
try {
if ($app.appType === '1') {
const wristOverlayQueue =
await AppApiVr.GetExecuteVrFeedFunctionQueue();
if (wristOverlayQueue) {
wristOverlayQueue.forEach((item) => {
// item[0] is the function name, item[1] is already an object
const fullFunctionName = item[0];
const jsonArg = item[1];
if (
typeof window.$app === 'object' &&
typeof window.$app[fullFunctionName] === 'function'
) {
window.$app[fullFunctionName](jsonArg);
} else {
console.error(
`$app.${fullFunctionName} is not defined or is not a function`
);
}
});
}
} else {
const hmdOverlayQueue =
await AppApiVr.GetExecuteVrOverlayFunctionQueue();
if (hmdOverlayQueue) {
hmdOverlayQueue.forEach((item) => {
// item[0] is the function name, item[1] is already an object
const fullFunctionName = item[0];
const jsonArg = item[1];
if (
typeof window.$app === 'object' &&
typeof window.$app[fullFunctionName] === 'function'
) {
window.$app[fullFunctionName](jsonArg);
} else {
console.error(
`$app.${fullFunctionName} is not defined or is not a function`
);
}
});
}
}
} catch (err) {
console.error(err);
}
workerTimers.setTimeout(() => $app.updateVrElectronLoop(), 500);
};
$app.methods.playNoty = function (json) {
var { noty, message, image } = JSON.parse(json);
let { noty, message, image } = JSON.parse(json);
if (typeof noty === 'undefined') {
console.error('noty is undefined');
return;
}
var noty = escapeTagRecursive(noty);
var message = escapeTag(message) || '';
var text = '';
var img = '';
noty = escapeTagRecursive(noty);
message = escapeTag(message) || '';
let text = '';
let img = '';
if (image) {
img = `<img class="noty-img" src="${image}"></img>`;
}
@@ -423,7 +483,7 @@ Vue.component('marquee-text', MarqueeText);
)}`;
break;
case 'Online':
var locationName = '';
let locationName = '';
if (noty.worldName) {
locationName = ` to ${displayLocation(
noty.location,
@@ -444,7 +504,8 @@ Vue.component('marquee-text', MarqueeText);
noty.senderUsername
}</strong> has invited you to ${displayLocation(
noty.details.worldId,
noty.details.worldName
noty.details.worldName,
''
)}${message}`;
break;
case 'requestInvite':
@@ -556,16 +617,16 @@ Vue.component('marquee-text', MarqueeText);
if (text) {
new Noty({
type: 'alert',
theme: this.config.notificationTheme,
timeout: this.config.notificationTimeout,
layout: this.config.notificationPosition,
theme: $app.config.notificationTheme,
timeout: $app.config.notificationTimeout,
layout: $app.config.notificationPosition,
text: `${img}<div class="noty-text">${text}</div>`
}).show();
}
};
$app.methods.statusClass = function (status) {
var style = {};
let style = {};
if (typeof status === 'undefined') {
return style;
}
@@ -593,56 +654,56 @@ Vue.component('marquee-text', MarqueeText);
$app.data.cleanHudFeedLoopStatus = false;
$app.methods.cleanHudFeedLoop = function () {
if (!this.cleanHudFeedLoopStatus) {
if (!$app.cleanHudFeedLoopStatus) {
return;
}
this.cleanHudFeed();
if (this.hudFeed.length === 0) {
this.cleanHudFeedLoopStatus = false;
$app.cleanHudFeed();
if ($app.hudFeed.length === 0) {
$app.cleanHudFeedLoopStatus = false;
return;
}
workerTimers.setTimeout(() => this.cleanHudFeedLoop(), 500);
workerTimers.setTimeout(() => $app.cleanHudFeedLoop(), 500);
};
$app.methods.cleanHudFeed = function () {
var dt = Date.now();
this.hudFeed.forEach((item) => {
if (item.time + this.config.photonOverlayMessageTimeout < dt) {
removeFromArray(this.hudFeed, item);
const dt = Date.now();
$app.hudFeed.forEach((item) => {
if (item.time + $app.config.photonOverlayMessageTimeout < dt) {
removeFromArray($app.hudFeed, item);
}
});
if (this.hudFeed.length > 10) {
this.hudFeed.length = 10;
if ($app.hudFeed.length > 10) {
$app.hudFeed.length = 10;
}
if (!this.cleanHudFeedLoopStatus) {
this.cleanHudFeedLoopStatus = true;
this.cleanHudFeedLoop();
if (!$app.cleanHudFeedLoopStatus) {
$app.cleanHudFeedLoopStatus = true;
$app.cleanHudFeedLoop();
}
};
$app.methods.addEntryHudFeed = function (json) {
var data = JSON.parse(json);
var combo = 1;
this.hudFeed.forEach((item) => {
const data = JSON.parse(json);
let combo = 1;
$app.hudFeed.forEach((item) => {
if (
item.displayName === data.displayName &&
item.text === data.text
) {
combo = item.combo + 1;
removeFromArray(this.hudFeed, item);
removeFromArray($app.hudFeed, item);
}
});
this.hudFeed.unshift({
$app.hudFeed.unshift({
time: Date.now(),
combo,
...data
});
this.cleanHudFeed();
$app.cleanHudFeed();
};
$app.methods.updateHudFeedTag = function (json) {
var ref = JSON.parse(json);
this.hudFeed.forEach((item) => {
const ref = JSON.parse(json);
$app.hudFeed.forEach((item) => {
if (item.userId === ref.userId) {
item.colour = ref.colour;
}
@@ -652,16 +713,16 @@ Vue.component('marquee-text', MarqueeText);
$app.data.hudTimeout = [];
$app.methods.updateHudTimeout = function (json) {
this.hudTimeout = JSON.parse(json);
$app.hudTimeout = JSON.parse(json);
};
$app.methods.setDatetimeFormat = async function () {
this.currentCulture = await AppApiVr.CurrentCulture();
var formatDate = function (date) {
$app.currentCulture = await AppApiVr.CurrentCulture();
const formatDate = function (date) {
if (!date) {
return '';
}
var dt = new Date(date);
const dt = new Date(date);
return dt
.toLocaleTimeString($app.currentCulture, {
hour: '2-digit',
@@ -678,9 +739,9 @@ Vue.component('marquee-text', MarqueeText);
if (!appLanguage) {
return;
}
if (appLanguage !== this.appLanguage) {
this.appLanguage = appLanguage;
i18n.locale = this.appLanguage;
if (appLanguage !== $app.appLanguage) {
$app.appLanguage = appLanguage;
i18n.locale = $app.appLanguage;
}
};
@@ -688,8 +749,8 @@ Vue.component('marquee-text', MarqueeText);
if (document.contains(document.getElementById('app-emoji-font'))) {
document.getElementById('app-emoji-font').remove();
}
if (this.isRunningUnderWine) {
var $appEmojiFont = document.createElement('link');
if ($app.isRunningUnderWine) {
const $appEmojiFont = document.createElement('link');
$appEmojiFont.setAttribute('id', 'app-emoji-font');
$appEmojiFont.rel = 'stylesheet';
$appEmojiFont.href = 'emoji.font.css';

17
src/vr.scss
View File

@@ -8,7 +8,7 @@
// For a copy, see <https://opensource.org/licenses/MIT>.
//
@use "./assets/scss/flags.scss";
@use './assets/scss/flags.scss';
@import '~animate.css/animate.min.css';
@import '~noty/lib/noty.css';
@@ -20,6 +20,10 @@
손등 18px -> 나나 24
*/
body {
margin: 0;
}
.noty_body {
display: block;
}
@@ -171,13 +175,20 @@
border-radius: 16px;
}
@font-face {
font-family: 'ellipsis-font';
src: local('Times New Roman');
unicode-range: U+2026;
}
body,
input,
textarea,
select,
button {
font-family: 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans TC', 'Noto Sans SC',
'Meiryo UI', 'Malgun Gothic', 'Segoe UI', sans-serif;
font-family:
'ellipsis-font', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans TC',
'Noto Sans SC', 'Meiryo UI', 'Malgun Gothic', 'Segoe UI', sans-serif;
line-height: normal;
text-shadow:
#000 0px 0px 3px,