mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-22 00:03:51 +02:00
356 lines
16 KiB
Vue
356 lines
16 KiB
Vue
<template>
|
|
<div>
|
|
<div class="options-container" style="margin-top: 0">
|
|
<span class="header">{{ t('view.settings.notifications.notifications.header') }}</span>
|
|
<div class="options-container-item">
|
|
<el-button size="small" :icon="ChatSquare" @click="showNotyFeedFiltersDialog">{{
|
|
t('view.settings.notifications.notifications.notification_filter')
|
|
}}</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="options-container">
|
|
<span class="sub-header">{{
|
|
t('view.settings.notifications.notifications.steamvr_notifications.header')
|
|
}}</span>
|
|
<div class="options-container-item">
|
|
<span class="name">{{
|
|
t('view.settings.notifications.notifications.desktop_notifications.when_to_display')
|
|
}}</span>
|
|
<br />
|
|
<ToggleGroup
|
|
type="single"
|
|
required
|
|
variant="outline"
|
|
size="sm"
|
|
:model-value="overlayToast"
|
|
:disabled="
|
|
(!overlayNotifications || !openVR) &&
|
|
!xsNotifications &&
|
|
!ovrtHudNotifications &&
|
|
!ovrtWristNotifications
|
|
"
|
|
style="margin-top: 5px"
|
|
@update:model-value="
|
|
setOverlayToast($event);
|
|
saveOpenVROption();
|
|
">
|
|
<ToggleGroupItem value="Never">{{
|
|
t('view.settings.notifications.notifications.conditions.never')
|
|
}}</ToggleGroupItem>
|
|
<ToggleGroupItem value="Game Running">{{
|
|
t('view.settings.notifications.notifications.conditions.inside_vrchat')
|
|
}}</ToggleGroupItem>
|
|
<ToggleGroupItem value="Game Closed">{{
|
|
t('view.settings.notifications.notifications.conditions.outside_vrchat')
|
|
}}</ToggleGroupItem>
|
|
<ToggleGroupItem value="Always">{{
|
|
t('view.settings.notifications.notifications.conditions.always')
|
|
}}</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
</div>
|
|
<simple-switch
|
|
:label="t('view.settings.notifications.notifications.steamvr_notifications.steamvr_overlay')"
|
|
:value="openVR"
|
|
@change="
|
|
setOpenVR();
|
|
saveOpenVROption();
|
|
" />
|
|
<template v-if="openVR">
|
|
<simple-switch
|
|
:label="t('view.settings.notifications.notifications.steamvr_notifications.overlay_notifications')"
|
|
:value="overlayNotifications"
|
|
:disabled="!openVR"
|
|
@change="
|
|
setOverlayNotifications();
|
|
saveOpenVROption();
|
|
" />
|
|
<div class="options-container-item">
|
|
<el-button
|
|
size="small"
|
|
:icon="Rank"
|
|
:disabled="!overlayNotifications || !openVR"
|
|
@click="showNotificationPositionDialog"
|
|
>{{
|
|
t('view.settings.notifications.notifications.steamvr_notifications.notification_position')
|
|
}}</el-button
|
|
>
|
|
</div>
|
|
</template>
|
|
<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>
|
|
<div style="flex: 0 0 300px; width: 300px; max-width: 100%; padding-top: 16px">
|
|
<Slider v-model="notificationOpacityValue" :min="0" :max="100" />
|
|
</div>
|
|
</div>
|
|
<div class="options-container-item">
|
|
<el-button
|
|
size="small"
|
|
:icon="Timer"
|
|
: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 v-if="!isLinux">
|
|
<simple-switch
|
|
:label="
|
|
t('view.settings.notifications.notifications.steamvr_notifications.xsoverlay_notifications')
|
|
"
|
|
:value="xsNotifications"
|
|
@change="
|
|
setXsNotifications();
|
|
saveOpenVROption();
|
|
" />
|
|
</template>
|
|
<template v-else>
|
|
<simple-switch
|
|
:label="
|
|
t('view.settings.notifications.notifications.steamvr_notifications.wlxoverlay_notifications')
|
|
"
|
|
:value="xsNotifications"
|
|
@change="
|
|
setXsNotifications();
|
|
saveOpenVROption();
|
|
" />
|
|
</template>
|
|
<template v-if="!isLinux">
|
|
<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();
|
|
" />
|
|
</template>
|
|
</div>
|
|
<div class="options-container">
|
|
<span class="sub-header">{{
|
|
t('view.settings.notifications.notifications.desktop_notifications.header')
|
|
}}</span>
|
|
<div class="options-container-item">
|
|
<span class="name">{{
|
|
t('view.settings.notifications.notifications.desktop_notifications.when_to_display')
|
|
}}</span>
|
|
<br />
|
|
<ToggleGroup
|
|
type="single"
|
|
required
|
|
variant="outline"
|
|
size="sm"
|
|
:model-value="desktopToast"
|
|
style="margin-top: 5px"
|
|
@update:model-value="setDesktopToast(String($event))">
|
|
<ToggleGroupItem value="Never">{{
|
|
t('view.settings.notifications.notifications.conditions.never')
|
|
}}</ToggleGroupItem>
|
|
<ToggleGroupItem value="Desktop Mode">{{
|
|
t('view.settings.notifications.notifications.conditions.desktop')
|
|
}}</ToggleGroupItem>
|
|
<ToggleGroupItem value="Inside VR">{{
|
|
t('view.settings.notifications.notifications.conditions.inside_vr')
|
|
}}</ToggleGroupItem>
|
|
<ToggleGroupItem value="Outside VR">{{
|
|
t('view.settings.notifications.notifications.conditions.outside_vr')
|
|
}}</ToggleGroupItem>
|
|
<ToggleGroupItem value="Game Running">{{
|
|
t('view.settings.notifications.notifications.conditions.inside_vrchat')
|
|
}}</ToggleGroupItem>
|
|
<ToggleGroupItem value="Game Closed">{{
|
|
t('view.settings.notifications.notifications.conditions.outside_vrchat')
|
|
}}</ToggleGroupItem>
|
|
<ToggleGroupItem value="Always">{{
|
|
t('view.settings.notifications.notifications.conditions.always')
|
|
}}</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
</div>
|
|
<simple-switch
|
|
:label="
|
|
t('view.settings.notifications.notifications.desktop_notifications.desktop_notification_while_afk')
|
|
"
|
|
:value="afkDesktopToast"
|
|
@change="setAfkDesktopToast" />
|
|
</div>
|
|
<div class="options-container">
|
|
<span class="sub-header">{{ t('view.settings.notifications.notifications.text_to_speech.header') }}</span>
|
|
<div class="options-container-item">
|
|
<span class="name">{{
|
|
t('view.settings.notifications.notifications.text_to_speech.when_to_play')
|
|
}}</span>
|
|
<br />
|
|
<ToggleGroup
|
|
type="single"
|
|
required
|
|
variant="outline"
|
|
size="sm"
|
|
:model-value="notificationTTS"
|
|
style="margin-top: 5px"
|
|
@update:model-value="saveNotificationTTS">
|
|
<ToggleGroupItem value="Never">{{
|
|
t('view.settings.notifications.notifications.conditions.never')
|
|
}}</ToggleGroupItem>
|
|
<ToggleGroupItem value="Inside VR">{{
|
|
t('view.settings.notifications.notifications.conditions.inside_vr')
|
|
}}</ToggleGroupItem>
|
|
<ToggleGroupItem value="Game Running">{{
|
|
t('view.settings.notifications.notifications.conditions.inside_vrchat')
|
|
}}</ToggleGroupItem>
|
|
<ToggleGroupItem value="Game Closed">{{
|
|
t('view.settings.notifications.notifications.conditions.outside_vrchat')
|
|
}}</ToggleGroupItem>
|
|
<ToggleGroupItem value="Always">{{
|
|
t('view.settings.notifications.notifications.conditions.always')
|
|
}}</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
</div>
|
|
<div class="options-container-item">
|
|
<span class="name">{{ t('view.settings.notifications.notifications.text_to_speech.tts_voice') }}</span>
|
|
<el-dropdown trigger="click" size="small" @command="(voice) => changeTTSVoice(voice)">
|
|
<el-button size="small" :disabled="notificationTTS === 'Never'">
|
|
<span
|
|
>{{ getTTSVoiceName() }} <el-icon style="margin-left: 5px"><ArrowDown /></el-icon
|
|
></span>
|
|
</el-button>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item
|
|
v-for="(voice, index) in TTSvoices"
|
|
:key="index"
|
|
:command="index"
|
|
v-text="voice.name" />
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
<simple-switch
|
|
:label="t('view.settings.notifications.notifications.text_to_speech.use_memo_nicknames')"
|
|
:value="notificationTTSNickName"
|
|
:disabled="notificationTTS === 'Never'"
|
|
@change="setNotificationTTSNickName" />
|
|
<simple-switch
|
|
:label="t('view.settings.notifications.notifications.text_to_speech.tts_test_placeholder')"
|
|
:value="isTestTTSVisible"
|
|
@change="isTestTTSVisible = !isTestTTSVisible" />
|
|
<div v-if="isTestTTSVisible" style="margin-top: 5px">
|
|
<el-input
|
|
v-model="notificationTTSTest"
|
|
type="textarea"
|
|
:placeholder="t('view.settings.notifications.notifications.text_to_speech.tts_test_placeholder')"
|
|
:rows="1"
|
|
style="width: 175px; display: inline-block"></el-input>
|
|
<el-button size="small" :icon="VideoPlay" style="margin-left: 10px" @click="testNotificationTTS">{{
|
|
t('view.settings.notifications.notifications.text_to_speech.play')
|
|
}}</el-button>
|
|
</div>
|
|
</div>
|
|
<NotificationPositionDialog v-model:isNotificationPositionDialogVisible="isNotificationPositionDialogVisible" />
|
|
<FeedFiltersDialog v-model:feedFiltersDialogMode="feedFiltersDialogMode" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ArrowDown, ChatSquare, Rank, Timer, VideoPlay } from '@element-plus/icons-vue';
|
|
import { computed, ref } from 'vue';
|
|
import { storeToRefs } from 'pinia';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
import { useAdvancedSettingsStore, useNotificationsSettingsStore, useVrStore } from '../../../../stores';
|
|
import { Slider } from '../../../../components/ui/slider';
|
|
import { ToggleGroup, ToggleGroupItem } from '../../../../components/ui/toggle-group';
|
|
|
|
import FeedFiltersDialog from '../../dialogs/FeedFiltersDialog.vue';
|
|
import NotificationPositionDialog from '../../dialogs/NotificationPositionDialog.vue';
|
|
import SimpleSwitch from '../SimpleSwitch.vue';
|
|
|
|
const { t } = useI18n();
|
|
|
|
const notificationsSettingsStore = useNotificationsSettingsStore();
|
|
const advancedSettingsStore = useAdvancedSettingsStore();
|
|
const { saveOpenVROption } = useVrStore();
|
|
|
|
const {
|
|
overlayToast,
|
|
openVR,
|
|
overlayNotifications,
|
|
xsNotifications,
|
|
ovrtHudNotifications,
|
|
ovrtWristNotifications,
|
|
imageNotifications,
|
|
desktopToast,
|
|
afkDesktopToast,
|
|
notificationTTS,
|
|
notificationTTSNickName,
|
|
isTestTTSVisible,
|
|
notificationTTSTest,
|
|
TTSvoices
|
|
} = storeToRefs(notificationsSettingsStore);
|
|
|
|
const { notificationOpacity } = storeToRefs(advancedSettingsStore);
|
|
|
|
const {
|
|
setOverlayToast,
|
|
setOpenVR,
|
|
setOverlayNotifications,
|
|
setXsNotifications,
|
|
setOvrtHudNotifications,
|
|
setOvrtWristNotifications,
|
|
setImageNotifications,
|
|
setDesktopToast,
|
|
setAfkDesktopToast,
|
|
setNotificationTTSNickName,
|
|
getTTSVoiceName,
|
|
changeTTSVoice,
|
|
saveNotificationTTS,
|
|
testNotificationTTS,
|
|
promptNotificationTimeout
|
|
} = notificationsSettingsStore;
|
|
|
|
const { setNotificationOpacity } = advancedSettingsStore;
|
|
|
|
const feedFiltersDialogMode = ref('');
|
|
const isNotificationPositionDialogVisible = ref(false);
|
|
const isLinux = computed(() => LINUX);
|
|
const notificationOpacityValue = computed({
|
|
get: () => [notificationOpacity.value],
|
|
set: (value) => {
|
|
const next = value?.[0];
|
|
if (typeof next === 'number') {
|
|
setNotificationOpacity(next);
|
|
}
|
|
}
|
|
});
|
|
|
|
function showNotyFeedFiltersDialog() {
|
|
feedFiltersDialogMode.value = 'noty';
|
|
}
|
|
|
|
function showNotificationPositionDialog() {
|
|
isNotificationPositionDialogVisible.value = true;
|
|
}
|
|
</script>
|