mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-19 14:53:50 +02:00
refactor: launch dialog and new instance dialog (#1191)
* refactor: launch dialog and new instance dialog * fix * fix
This commit is contained in:
pa
GitHub
228
src/views/dialogs/launch/LaunchDialog.vue
Normal file
228
src/views/dialogs/launch/LaunchDialog.vue
Normal file
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
ref="launchDialog"
|
||||
:before-close="beforeDialogClose"
|
||||
:visible.sync="isVisible"
|
||||
:title="$t('dialog.launch.header')"
|
||||
width="450px"
|
||||
@mousedown.native="dialogMouseDown"
|
||||
@mouseup.native="dialogMouseUp">
|
||||
<el-form :model="launchDialog" label-width="100px">
|
||||
<el-form-item :label="$t('dialog.launch.url')">
|
||||
<el-input
|
||||
v-model="launchDialog.url"
|
||||
size="mini"
|
||||
style="width: 260px"
|
||||
@click.native="$event.target.tagName === 'INPUT' && $event.target.select()" />
|
||||
<el-tooltip placement="right" :content="$t('dialog.launch.copy_tooltip')" :disabled="hideTooltips">
|
||||
<el-button
|
||||
size="mini"
|
||||
icon="el-icon-s-order"
|
||||
style="margin-left: 5px"
|
||||
circle
|
||||
@click="copyInstanceMessage(launchDialog.url)" />
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="launchDialog.shortUrl">
|
||||
<template slot="label">
|
||||
<span>{{ $t('dialog.launch.short_url') }}</span>
|
||||
<el-tooltip
|
||||
placement="top"
|
||||
style="margin-left: 5px"
|
||||
:content="$t('dialog.launch.short_url_notice')">
|
||||
<i class="el-icon-warning" />
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<el-input
|
||||
v-model="launchDialog.shortUrl"
|
||||
size="mini"
|
||||
style="width: 260px"
|
||||
@click.native="$event.target.tagName === 'INPUT' && $event.target.select()" />
|
||||
<el-tooltip placement="right" :content="$t('dialog.launch.copy_tooltip')" :disabled="hideTooltips">
|
||||
<el-button
|
||||
size="mini"
|
||||
icon="el-icon-s-order"
|
||||
style="margin-left: 5px"
|
||||
circle
|
||||
@click="copyInstanceMessage(launchDialog.shortUrl)" />
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('dialog.launch.location')">
|
||||
<el-input
|
||||
v-model="launchDialog.location"
|
||||
size="mini"
|
||||
style="width: 260px"
|
||||
@click.native="$event.target.tagName === 'INPUT' && $event.target.select()" />
|
||||
<el-tooltip placement="right" :content="$t('dialog.launch.copy_tooltip')" :disabled="hideTooltips">
|
||||
<el-button
|
||||
size="mini"
|
||||
icon="el-icon-s-order"
|
||||
style="margin-left: 5px"
|
||||
circle
|
||||
@click="copyInstanceMessage(launchDialog.location)" />
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-checkbox v-model="launchDialog.desktop" style="float: left; margin-top: 5px" @change="saveLaunchDialog">
|
||||
{{ $t('dialog.launch.start_as_desktop') }}
|
||||
</el-checkbox>
|
||||
<template slot="footer">
|
||||
<el-button size="small" @click="showPreviousInstanceInfoDialog(launchDialog.location)">
|
||||
{{ $t('dialog.launch.info') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
:disabled="!checkCanInvite(launchDialog.location)"
|
||||
@click="showInviteDialog(launchDialog.location)">
|
||||
{{ $t('dialog.launch.invite') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
:disabled="!launchDialog.secureOrShortName"
|
||||
@click="launchGame(launchDialog.location, launchDialog.shortName, launchDialog.desktop)">
|
||||
{{ $t('dialog.launch.launch') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import utils from '../../../classes/utils';
|
||||
import configRepository from '../../../repository/config';
|
||||
import { instanceRequest } from '../../../classes/request';
|
||||
|
||||
export default {
|
||||
name: 'LaunchDialog',
|
||||
inject: [
|
||||
'beforeDialogClose',
|
||||
'dialogMouseDown',
|
||||
'dialogMouseUp',
|
||||
'showPreviousInstanceInfoDialog',
|
||||
'showInviteDialog',
|
||||
'adjustDialogZ'
|
||||
],
|
||||
props: {
|
||||
hideTooltips: Boolean,
|
||||
launchDialogData: { type: Object, required: true },
|
||||
checkCanInvite: {
|
||||
type: Function,
|
||||
required: true
|
||||
},
|
||||
getLaunchURL: {
|
||||
type: Function,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
launchDialog: {
|
||||
loading: false,
|
||||
desktop: false,
|
||||
tag: '',
|
||||
location: '',
|
||||
url: '',
|
||||
shortName: '',
|
||||
shortUrl: '',
|
||||
secureOrShortName: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isVisible: {
|
||||
get() {
|
||||
return this.launchDialogData.visible;
|
||||
},
|
||||
set(value) {
|
||||
this.$emit('update:launch-dialog-data', { ...this.launchDialogData, visible: value });
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'launchDialogData.loading': {
|
||||
handler() {
|
||||
this.getConfig();
|
||||
this.initLaunchDialog();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getConfig();
|
||||
},
|
||||
methods: {
|
||||
launchGame(location, shortName, desktop) {
|
||||
this.$emit('launch-game', location, shortName, desktop);
|
||||
this.isVisible = false;
|
||||
},
|
||||
getConfig() {
|
||||
configRepository.getBool('launchAsDesktop').then((value) => (this.launchDialog.desktop = value));
|
||||
},
|
||||
saveLaunchDialog() {
|
||||
configRepository.setBool('launchAsDesktop', this.launchDialog.desktop);
|
||||
},
|
||||
async initLaunchDialog() {
|
||||
const { tag, shortName } = this.launchDialogData;
|
||||
if (!utils.isRealInstance(tag)) {
|
||||
return;
|
||||
}
|
||||
this.$nextTick(() => this.adjustDialogZ(this.$refs.launchDialog.$el));
|
||||
const D = this.launchDialog;
|
||||
D.tag = tag;
|
||||
D.secureOrShortName = shortName;
|
||||
D.shortUrl = '';
|
||||
D.shortName = shortName;
|
||||
const L = utils.parseLocation(tag);
|
||||
L.shortName = shortName;
|
||||
if (shortName) {
|
||||
D.shortUrl = `https://vrch.at/${shortName}`;
|
||||
}
|
||||
if (L.instanceId) {
|
||||
D.location = `${L.worldId}:${L.instanceId}`;
|
||||
} else {
|
||||
D.location = L.worldId;
|
||||
}
|
||||
D.url = this.getLaunchURL(L);
|
||||
if (!shortName) {
|
||||
const res = await instanceRequest.getInstanceShortName({
|
||||
worldId: L.worldId,
|
||||
instanceId: L.instanceId
|
||||
});
|
||||
// NOTE:
|
||||
// splitting the 'INSTANCE:SHORTNAME' event and put code here
|
||||
if (!res.json) {
|
||||
return;
|
||||
}
|
||||
const resLocation = `${res.instance.worldId}:${res.instance.instanceId}`;
|
||||
if (resLocation === this.launchDialog.tag) {
|
||||
const resShortName = res.json.shortName;
|
||||
const secureOrShortName = res.json.shortName || res.json.secureName;
|
||||
const parsedL = utils.parseLocation(location);
|
||||
parsedL.shortName = resShortName;
|
||||
this.launchDialog.shortName = resShortName;
|
||||
this.launchDialog.secureOrShortName = secureOrShortName;
|
||||
if (resShortName) {
|
||||
this.launchDialog.shortUrl = `https://vrch.at/${resShortName}`;
|
||||
}
|
||||
this.launchDialog.url = this.getLaunchURL(parsedL);
|
||||
}
|
||||
}
|
||||
},
|
||||
async copyInstanceMessage(input) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(input);
|
||||
this.$message({
|
||||
message: 'Instance copied to clipboard',
|
||||
type: 'success'
|
||||
});
|
||||
} catch (error) {
|
||||
this.$message({
|
||||
message: 'Instance copied failed',
|
||||
type: 'error'
|
||||
});
|
||||
console.error(error.message);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
877
src/views/dialogs/newInstance/NewInstanceDialog.vue
Normal file
877
src/views/dialogs/newInstance/NewInstanceDialog.vue
Normal file
@@ -0,0 +1,877 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
ref="newInstanceDialog"
|
||||
:before-close="beforeDialogClose"
|
||||
:visible.sync="newInstanceDialog.visible"
|
||||
:title="$t('dialog.new_instance.header')"
|
||||
width="650px"
|
||||
@mousedown.native="dialogMouseDown"
|
||||
@mouseup.native="dialogMouseUp">
|
||||
<el-tabs v-model="newInstanceDialog.selectedTab" type="card" @tab-click="newInstanceTabClick">
|
||||
<el-tab-pane :label="$t('dialog.new_instance.normal')">
|
||||
<el-form :model="newInstanceDialog" label-width="150px">
|
||||
<el-form-item :label="$t('dialog.new_instance.access_type')">
|
||||
<el-radio-group v-model="newInstanceDialog.accessType" size="mini" @change="buildInstance">
|
||||
<el-radio-button label="public">{{
|
||||
$t('dialog.new_instance.access_type_public')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button label="group">{{
|
||||
$t('dialog.new_instance.access_type_group')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button label="friends+">{{
|
||||
$t('dialog.new_instance.access_type_friend_plus')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button label="friends">{{
|
||||
$t('dialog.new_instance.access_type_friend')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button label="invite+">{{
|
||||
$t('dialog.new_instance.access_type_invite_plus')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button label="invite">{{
|
||||
$t('dialog.new_instance.access_type_invite')
|
||||
}}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="newInstanceDialog.accessType === 'group'"
|
||||
:label="$t('dialog.new_instance.group_access_type')">
|
||||
<el-radio-group v-model="newInstanceDialog.groupAccessType" size="mini" @change="buildInstance">
|
||||
<el-radio-button
|
||||
label="members"
|
||||
:disabled="
|
||||
!hasGroupPermission(newInstanceDialog.groupRef, 'group-instance-open-create')
|
||||
"
|
||||
>{{ $t('dialog.new_instance.group_access_type_members') }}</el-radio-button
|
||||
>
|
||||
<el-radio-button
|
||||
label="plus"
|
||||
:disabled="
|
||||
!hasGroupPermission(newInstanceDialog.groupRef, 'group-instance-plus-create')
|
||||
"
|
||||
>{{ $t('dialog.new_instance.group_access_type_plus') }}</el-radio-button
|
||||
>
|
||||
<el-radio-button
|
||||
label="public"
|
||||
:disabled="
|
||||
!hasGroupPermission(newInstanceDialog.groupRef, 'group-instance-public-create') ||
|
||||
newInstanceDialog.groupRef.privacy === 'private'
|
||||
"
|
||||
>{{ $t('dialog.new_instance.group_access_type_public') }}</el-radio-button
|
||||
>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('dialog.new_instance.region')">
|
||||
<el-radio-group v-model="newInstanceDialog.region" size="mini" @change="buildInstance">
|
||||
<el-radio-button label="US West">{{
|
||||
$t('dialog.new_instance.region_usw')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button label="US East">{{
|
||||
$t('dialog.new_instance.region_use')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button label="Europe">{{ $t('dialog.new_instance.region_eu') }}</el-radio-button>
|
||||
<el-radio-button label="Japan">{{ $t('dialog.new_instance.region_jp') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('dialog.new_instance.content_settings')">
|
||||
<el-select
|
||||
v-model="newInstanceDialog.selectedContentSettings"
|
||||
multiple
|
||||
:placeholder="$t('dialog.new_instance.content_placeholder')"
|
||||
style="width: 100%"
|
||||
@change="buildInstance">
|
||||
<el-option-group :label="$t('dialog.new_instance.content_placeholder')">
|
||||
<el-option
|
||||
class="x-friend-item"
|
||||
value="emoji"
|
||||
:label="$t('dialog.new_instance.content_emoji')"></el-option>
|
||||
<el-option
|
||||
class="x-friend-item"
|
||||
value="stickers"
|
||||
:label="$t('dialog.new_instance.content_stickers')"></el-option>
|
||||
<el-option
|
||||
class="x-friend-item"
|
||||
value="pedestals"
|
||||
:label="$t('dialog.new_instance.content_pedestals')"></el-option>
|
||||
<el-option
|
||||
class="x-friend-item"
|
||||
value="prints"
|
||||
:label="$t('dialog.new_instance.content_prints')"></el-option>
|
||||
<el-option
|
||||
class="x-friend-item"
|
||||
value="drones"
|
||||
:label="$t('dialog.new_instance.content_drones')"></el-option>
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="newInstanceDialog.accessType === 'group'"
|
||||
:label="$t('dialog.new_instance.queueEnabled')">
|
||||
<el-checkbox v-model="newInstanceDialog.queueEnabled" @change="buildInstance"></el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="newInstanceDialog.accessType === 'group'"
|
||||
:label="$t('dialog.new_instance.ageGate')">
|
||||
<el-checkbox
|
||||
v-model="newInstanceDialog.ageGate"
|
||||
:disabled="
|
||||
!hasGroupPermission(newInstanceDialog.groupRef, 'group-instance-age-gated-create')
|
||||
"
|
||||
@change="buildInstance"></el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('dialog.new_instance.world_id')">
|
||||
<el-input
|
||||
v-model="newInstanceDialog.worldId"
|
||||
size="mini"
|
||||
@click.native="$event.target.tagName === 'INPUT' && $event.target.select()"
|
||||
@change="buildInstance"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="newInstanceDialog.accessType === 'group'"
|
||||
:label="$t('dialog.new_instance.group_id')">
|
||||
<el-select
|
||||
v-model="newInstanceDialog.groupId"
|
||||
clearable
|
||||
:placeholder="$t('dialog.new_instance.group_placeholder')"
|
||||
filterable
|
||||
style="width: 100%"
|
||||
@change="buildInstance">
|
||||
<el-option-group :label="$t('dialog.new_instance.group_placeholder')">
|
||||
<el-option
|
||||
v-for="group in API.currentUserGroups.values()"
|
||||
v-if="
|
||||
group &&
|
||||
(hasGroupPermission(group, 'group-instance-public-create') ||
|
||||
hasGroupPermission(group, 'group-instance-plus-create') ||
|
||||
hasGroupPermission(group, 'group-instance-open-create'))
|
||||
"
|
||||
:key="group.id"
|
||||
:label="group.name"
|
||||
:value="group.id"
|
||||
class="x-friend-item"
|
||||
style="height: auto; width: 478px">
|
||||
<div class="avatar">
|
||||
<img v-lazy="group.iconUrl" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span class="name" v-text="group.name"></span>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="
|
||||
newInstanceDialog.accessType === 'group' && newInstanceDialog.groupAccessType === 'members'
|
||||
"
|
||||
:label="$t('dialog.new_instance.roles')">
|
||||
<el-select
|
||||
v-model="newInstanceDialog.roleIds"
|
||||
multiple
|
||||
clearable
|
||||
:placeholder="$t('dialog.new_instance.role_placeholder')"
|
||||
style="width: 100%"
|
||||
@change="buildInstance">
|
||||
<el-option-group :label="$t('dialog.new_instance.role_placeholder')">
|
||||
<el-option
|
||||
v-for="role in newInstanceDialog.selectedGroupRoles"
|
||||
:key="role.id"
|
||||
class="x-friend-item"
|
||||
:label="role.name"
|
||||
:value="role.id"
|
||||
style="height: auto; width: 478px">
|
||||
<div class="detail">
|
||||
<span class="name" v-text="role.name"></span>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<template v-if="newInstanceDialog.instanceCreated">
|
||||
<el-form-item :label="$t('dialog.new_instance.location')">
|
||||
<el-input
|
||||
v-model="newInstanceDialog.location"
|
||||
size="mini"
|
||||
readonly
|
||||
@click.native="$event.target.tagName === 'INPUT' && $event.target.select()"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('dialog.new_instance.url')">
|
||||
<el-input v-model="newInstanceDialog.url" size="mini" readonly></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('dialog.new_instance.legacy')">
|
||||
<el-form :model="newInstanceDialog" label-width="150px">
|
||||
<el-form-item :label="$t('dialog.new_instance.access_type')">
|
||||
<el-radio-group
|
||||
v-model="newInstanceDialog.accessType"
|
||||
size="mini"
|
||||
@change="buildLegacyInstance">
|
||||
<el-radio-button label="public">{{
|
||||
$t('dialog.new_instance.access_type_public')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button label="group">{{
|
||||
$t('dialog.new_instance.access_type_group')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button label="friends+">{{
|
||||
$t('dialog.new_instance.access_type_friend_plus')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button label="friends">{{
|
||||
$t('dialog.new_instance.access_type_friend')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button label="invite+">{{
|
||||
$t('dialog.new_instance.access_type_invite_plus')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button label="invite">{{
|
||||
$t('dialog.new_instance.access_type_invite')
|
||||
}}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="newInstanceDialog.accessType === 'group'"
|
||||
:label="$t('dialog.new_instance.group_access_type')">
|
||||
<el-radio-group
|
||||
v-model="newInstanceDialog.groupAccessType"
|
||||
size="mini"
|
||||
@change="buildLegacyInstance">
|
||||
<el-radio-button label="members">{{
|
||||
$t('dialog.new_instance.group_access_type_members')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button label="plus">{{
|
||||
$t('dialog.new_instance.group_access_type_plus')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button label="public">{{
|
||||
$t('dialog.new_instance.group_access_type_public')
|
||||
}}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('dialog.new_instance.region')">
|
||||
<el-radio-group v-model="newInstanceDialog.region" size="mini" @change="buildLegacyInstance">
|
||||
<el-radio-button label="US West">{{
|
||||
$t('dialog.new_instance.region_usw')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button label="US East">{{
|
||||
$t('dialog.new_instance.region_use')
|
||||
}}</el-radio-button>
|
||||
<el-radio-button label="Europe">{{ $t('dialog.new_instance.region_eu') }}</el-radio-button>
|
||||
<el-radio-button label="Japan">{{ $t('dialog.new_instance.region_jp') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="newInstanceDialog.accessType === 'group'"
|
||||
:label="$t('dialog.new_instance.ageGate')">
|
||||
<el-checkbox v-model="newInstanceDialog.ageGate" @change="buildInstance"></el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('dialog.new_instance.world_id')">
|
||||
<el-input
|
||||
v-model="newInstanceDialog.worldId"
|
||||
size="mini"
|
||||
@click.native="$event.target.tagName === 'INPUT' && $event.target.select()"
|
||||
@change="buildLegacyInstance"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('dialog.new_instance.instance_id')">
|
||||
<el-input
|
||||
v-model="newInstanceDialog.instanceName"
|
||||
:placeholder="$t('dialog.new_instance.instance_id_placeholder')"
|
||||
size="mini"
|
||||
@change="buildLegacyInstance"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="newInstanceDialog.accessType !== 'public' && newInstanceDialog.accessType !== 'group'"
|
||||
:label="$t('dialog.new_instance.instance_creator')">
|
||||
<el-select
|
||||
v-model="newInstanceDialog.userId"
|
||||
clearable
|
||||
:placeholder="$t('dialog.new_instance.instance_creator_placeholder')"
|
||||
filterable
|
||||
style="width: 100%"
|
||||
@change="buildLegacyInstance">
|
||||
<el-option-group v-if="API.currentUser" :label="$t('side_panel.me')">
|
||||
<el-option
|
||||
class="x-friend-item"
|
||||
:label="API.currentUser.displayName"
|
||||
:value="API.currentUser.id"
|
||||
style="height: auto">
|
||||
<div class="avatar" :class="userStatusClass(API.currentUser)">
|
||||
<img v-lazy="userImage(API.currentUser)" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span class="name" v-text="API.currentUser.displayName"></span>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
<el-option-group v-if="vipFriends.length" :label="$t('side_panel.favorite')">
|
||||
<el-option
|
||||
v-for="friend in vipFriends"
|
||||
:key="friend.id"
|
||||
class="x-friend-item"
|
||||
:label="friend.name"
|
||||
:value="friend.id"
|
||||
style="height: auto">
|
||||
<template v-if="friend.ref">
|
||||
<div class="avatar" :class="userStatusClass(friend.ref)">
|
||||
<img v-lazy="userImage(friend.ref)" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span
|
||||
class="name"
|
||||
:style="{ color: friend.ref.$userColour }"
|
||||
v-text="friend.ref.displayName"></span>
|
||||
</div>
|
||||
</template>
|
||||
<span v-else v-text="friend.id"></span>
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
<el-option-group v-if="onlineFriends.length" :label="$t('side_panel.online')">
|
||||
<el-option
|
||||
v-for="friend in onlineFriends"
|
||||
:key="friend.id"
|
||||
class="x-friend-item"
|
||||
:label="friend.name"
|
||||
:value="friend.id"
|
||||
style="height: auto">
|
||||
<template v-if="friend.ref">
|
||||
<div class="avatar" :class="userStatusClass(friend.ref)">
|
||||
<img v-lazy="userImage(friend.ref)" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span
|
||||
class="name"
|
||||
:style="{ color: friend.ref.$userColour }"
|
||||
v-text="friend.ref.displayName"></span>
|
||||
</div>
|
||||
</template>
|
||||
<span v-else v-text="friend.id"></span>
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
<el-option-group v-if="activeFriends.length" :label="$t('side_panel.active')">
|
||||
<el-option
|
||||
v-for="friend in activeFriends"
|
||||
:key="friend.id"
|
||||
class="x-friend-item"
|
||||
:label="friend.name"
|
||||
:value="friend.id"
|
||||
style="height: auto">
|
||||
<template v-if="friend.ref">
|
||||
<div class="avatar">
|
||||
<img v-lazy="userImage(friend.ref)" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span
|
||||
class="name"
|
||||
:style="{ color: friend.ref.$userColour }"
|
||||
v-text="friend.ref.displayName"></span>
|
||||
</div>
|
||||
</template>
|
||||
<span v-else v-text="friend.id"></span>
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
<el-option-group v-if="offlineFriends.length" :label="$t('side_panel.offline')">
|
||||
<el-option
|
||||
v-for="friend in offlineFriends"
|
||||
:key="friend.id"
|
||||
class="x-friend-item"
|
||||
:label="friend.name"
|
||||
:value="friend.id"
|
||||
style="height: auto">
|
||||
<template v-if="friend.ref">
|
||||
<div class="avatar">
|
||||
<img v-lazy="userImage(friend.ref)" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span
|
||||
class="name"
|
||||
:style="{ color: friend.ref.$userColour }"
|
||||
v-text="friend.ref.displayName"></span>
|
||||
</div>
|
||||
</template>
|
||||
<span v-else v-text="friend.id"></span>
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="newInstanceDialog.accessType === 'group'"
|
||||
:label="$t('dialog.new_instance.group_id')">
|
||||
<el-select
|
||||
v-model="newInstanceDialog.groupId"
|
||||
clearable
|
||||
:placeholder="$t('dialog.new_instance.group_placeholder')"
|
||||
filterable
|
||||
style="width: 100%"
|
||||
@change="buildLegacyInstance">
|
||||
<el-option-group :label="$t('dialog.new_instance.group_placeholder')">
|
||||
<el-option
|
||||
v-for="group in API.currentUserGroups.values()"
|
||||
v-if="group"
|
||||
:key="group.id"
|
||||
class="x-friend-item"
|
||||
:label="group.name"
|
||||
:value="group.id"
|
||||
style="height: auto; width: 478px">
|
||||
<div class="avatar">
|
||||
<img v-lazy="group.iconUrl" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span class="name" v-text="group.name"></span>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('dialog.new_instance.location')">
|
||||
<el-input
|
||||
v-model="newInstanceDialog.location"
|
||||
size="mini"
|
||||
readonly
|
||||
@click.native="$event.target.tagName === 'INPUT' && $event.target.select()"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('dialog.new_instance.url')">
|
||||
<el-input v-model="newInstanceDialog.url" size="mini" readonly></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<template v-if="newInstanceDialog.selectedTab === '0'" #footer>
|
||||
<template v-if="newInstanceDialog.instanceCreated">
|
||||
<el-button size="small" @click="copyInstanceUrl(newInstanceDialog.location)">{{
|
||||
$t('dialog.new_instance.copy_url')
|
||||
}}</el-button>
|
||||
<el-button size="small" @click="selfInvite(newInstanceDialog.location)">{{
|
||||
$t('dialog.new_instance.self_invite')
|
||||
}}</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
:disabled="
|
||||
(newInstanceDialog.accessType === 'friends' || newInstanceDialog.accessType === 'invite') &&
|
||||
newInstanceDialog.userId !== API.currentUser.id
|
||||
"
|
||||
@click="showInviteDialog(newInstanceDialog.location)"
|
||||
>{{ $t('dialog.new_instance.invite') }}</el-button
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="showLaunchDialog(newInstanceDialog.location, newInstanceDialog.shortName)"
|
||||
>{{ $t('dialog.new_instance.launch') }}</el-button
|
||||
>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-button type="primary" size="small" @click="handleCreateNewInstance">{{
|
||||
$t('dialog.new_instance.create_instance')
|
||||
}}</el-button>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else-if="newInstanceDialog.selectedTab === '1'" #footer>
|
||||
<el-button size="small" @click="copyInstanceUrl(newInstanceDialog.location)">{{
|
||||
$t('dialog.new_instance.copy_url')
|
||||
}}</el-button>
|
||||
<el-button size="small" @click="selfInvite(newInstanceDialog.location)">{{
|
||||
$t('dialog.new_instance.self_invite')
|
||||
}}</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
:disabled="
|
||||
(newInstanceDialog.accessType === 'friends' || newInstanceDialog.accessType === 'invite') &&
|
||||
newInstanceDialog.userId !== API.currentUser.id
|
||||
"
|
||||
@click="showInviteDialog(newInstanceDialog.location)"
|
||||
>{{ $t('dialog.new_instance.invite') }}</el-button
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="showLaunchDialog(newInstanceDialog.location, newInstanceDialog.shortName)"
|
||||
>{{ $t('dialog.new_instance.launch') }}</el-button
|
||||
>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { instanceRequest } from '../../../classes/request';
|
||||
import utils from '../../../classes/utils';
|
||||
import configRepository from '../../../repository/config';
|
||||
|
||||
export default {
|
||||
name: 'NewInstanceDialog',
|
||||
inject: [
|
||||
'API',
|
||||
'userImage',
|
||||
'userStatusClass',
|
||||
'beforeDialogClose',
|
||||
'dialogMouseDown',
|
||||
'dialogMouseUp',
|
||||
'showInviteDialog',
|
||||
'showLaunchDialog',
|
||||
'adjustDialogZ'
|
||||
],
|
||||
props: {
|
||||
hasGroupPermission: {
|
||||
type: Function,
|
||||
required: true
|
||||
},
|
||||
getLaunchURL: {
|
||||
type: Function,
|
||||
required: true
|
||||
},
|
||||
vipFriends: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
onlineFriends: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
activeFriends: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
offlineFriends: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
instanceContentSettings: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
createNewInstance: {
|
||||
type: Function,
|
||||
required: true
|
||||
},
|
||||
newInstanceDialogLocationTag: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
newInstanceDialog: {
|
||||
visible: false,
|
||||
// loading: false,
|
||||
selectedTab: '0',
|
||||
instanceCreated: false,
|
||||
queueEnabled: false,
|
||||
worldId: '',
|
||||
instanceId: '',
|
||||
instanceName: '',
|
||||
userId: '',
|
||||
accessType: 'public',
|
||||
region: 'US West',
|
||||
groupRegion: '',
|
||||
groupId: '',
|
||||
groupAccessType: 'plus',
|
||||
ageGate: false,
|
||||
strict: false,
|
||||
location: '',
|
||||
shortName: '',
|
||||
url: '',
|
||||
secureOrShortName: '',
|
||||
lastSelectedGroupId: '',
|
||||
selectedGroupRoles: [],
|
||||
roleIds: [],
|
||||
groupRef: {},
|
||||
contentSettings: this.instanceContentSettings,
|
||||
selectedContentSettings: []
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
newInstanceDialogLocationTag(value) {
|
||||
this.initNewInstanceDialog(value);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initializeNewInstanceDialog();
|
||||
},
|
||||
methods: {
|
||||
initNewInstanceDialog(tag) {
|
||||
if (!utils.isRealInstance(tag)) {
|
||||
return;
|
||||
}
|
||||
this.$nextTick(() => this.adjustDialogZ(this.$refs.newInstanceDialog.$el));
|
||||
const D = this.newInstanceDialog;
|
||||
const L = utils.parseLocation(tag);
|
||||
if (D.worldId === L.worldId) {
|
||||
// reopening dialog, keep last open instance
|
||||
D.visible = true;
|
||||
return;
|
||||
}
|
||||
D.worldId = L.worldId;
|
||||
D.instanceCreated = false;
|
||||
D.lastSelectedGroupId = '';
|
||||
D.selectedGroupRoles = [];
|
||||
D.groupRef = {};
|
||||
D.roleIds = [];
|
||||
D.strict = false;
|
||||
D.shortName = '';
|
||||
D.secureOrShortName = '';
|
||||
this.API.getGroupPermissions({ userId: this.API.currentUser.id });
|
||||
this.buildInstance();
|
||||
this.buildLegacyInstance();
|
||||
this.updateNewInstanceDialog();
|
||||
D.visible = true;
|
||||
},
|
||||
initializeNewInstanceDialog() {
|
||||
configRepository
|
||||
.getBool('instanceDialogQueueEnabled', true)
|
||||
.then((value) => (this.newInstanceDialog.queueEnabled = value));
|
||||
|
||||
configRepository
|
||||
.getString('instanceDialogInstanceName', '')
|
||||
.then((value) => (this.newInstanceDialog.instanceName = value));
|
||||
|
||||
configRepository
|
||||
.getString('instanceDialogUserId', '')
|
||||
.then((value) => (this.newInstanceDialog.userId = value));
|
||||
|
||||
configRepository
|
||||
.getString('instanceDialogAccessType', 'public')
|
||||
.then((value) => (this.newInstanceDialog.accessType = value));
|
||||
|
||||
configRepository
|
||||
.getString('instanceRegion', 'US West')
|
||||
.then((value) => (this.newInstanceDialog.region = value));
|
||||
|
||||
configRepository
|
||||
.getString('instanceDialogGroupId', '')
|
||||
.then((value) => (this.newInstanceDialog.groupId = value));
|
||||
|
||||
configRepository
|
||||
.getString('instanceDialogGroupAccessType', 'plus')
|
||||
.then((value) => (this.newInstanceDialog.groupAccessType = value));
|
||||
|
||||
configRepository
|
||||
.getBool('instanceDialogAgeGate', false)
|
||||
.then((value) => (this.newInstanceDialog.ageGate = value));
|
||||
|
||||
configRepository
|
||||
.getString('instanceDialogSelectedContentSettings', JSON.stringify(this.instanceContentSettings))
|
||||
.then((value) => (this.newInstanceDialog.selectedContentSettings = JSON.parse(value)));
|
||||
},
|
||||
saveNewInstanceDialog() {
|
||||
const {
|
||||
accessType,
|
||||
region,
|
||||
instanceName,
|
||||
userId,
|
||||
groupId,
|
||||
groupAccessType,
|
||||
queueEnabled,
|
||||
ageGate,
|
||||
selectedContentSettings
|
||||
} = this.newInstanceDialog;
|
||||
|
||||
configRepository.setString('instanceDialogAccessType', accessType);
|
||||
configRepository.setString('instanceRegion', region);
|
||||
configRepository.setString('instanceDialogInstanceName', instanceName);
|
||||
configRepository.setString('instanceDialogUserId', userId === this.API.currentUser.id ? '' : userId);
|
||||
configRepository.setString('instanceDialogGroupId', groupId);
|
||||
configRepository.setString('instanceDialogGroupAccessType', groupAccessType);
|
||||
configRepository.setBool('instanceDialogQueueEnabled', queueEnabled);
|
||||
configRepository.setBool('instanceDialogAgeGate', ageGate);
|
||||
configRepository.setString(
|
||||
'instanceDialogSelectedContentSettings',
|
||||
JSON.stringify(selectedContentSettings)
|
||||
);
|
||||
},
|
||||
newInstanceTabClick(tab) {
|
||||
if (tab === '1') {
|
||||
this.buildInstance();
|
||||
} else {
|
||||
this.buildLegacyInstance();
|
||||
}
|
||||
},
|
||||
updateNewInstanceDialog(noChanges) {
|
||||
const D = this.newInstanceDialog;
|
||||
if (D.instanceId) {
|
||||
D.location = `${D.worldId}:${D.instanceId}`;
|
||||
} else {
|
||||
D.location = D.worldId;
|
||||
}
|
||||
const L = utils.parseLocation(D.location);
|
||||
if (noChanges) {
|
||||
L.shortName = D.shortName;
|
||||
} else {
|
||||
D.shortName = '';
|
||||
}
|
||||
D.url = this.getLaunchURL(L);
|
||||
},
|
||||
selfInvite(location) {
|
||||
const L = utils.parseLocation(location);
|
||||
if (!L.isRealInstance) {
|
||||
return;
|
||||
}
|
||||
instanceRequest
|
||||
.selfInvite({
|
||||
instanceId: L.instanceId,
|
||||
worldId: L.worldId
|
||||
})
|
||||
.then((args) => {
|
||||
this.$message({
|
||||
message: 'Self invite sent',
|
||||
type: 'success'
|
||||
});
|
||||
return args;
|
||||
});
|
||||
},
|
||||
async handleCreateNewInstance() {
|
||||
const args = await this.createNewInstance(this.newInstanceDialog.worldId, this.newInstanceDialog);
|
||||
|
||||
if (args) {
|
||||
this.newInstanceDialog.location = args.json.location;
|
||||
this.newInstanceDialog.instanceId = args.json.instanceId;
|
||||
this.newInstanceDialog.secureOrShortName = args.json.shortName || args.json.secureName;
|
||||
this.newInstanceDialog.instanceCreated = true;
|
||||
this.updateNewInstanceDialog();
|
||||
}
|
||||
},
|
||||
buildInstance() {
|
||||
const D = this.newInstanceDialog;
|
||||
D.instanceCreated = false;
|
||||
D.instanceId = '';
|
||||
D.shortName = '';
|
||||
D.secureOrShortName = '';
|
||||
if (!D.userId) {
|
||||
D.userId = this.API.currentUser.id;
|
||||
}
|
||||
if (D.groupId && D.groupId !== D.lastSelectedGroupId) {
|
||||
D.roleIds = [];
|
||||
const ref = this.API.cachedGroups.get(D.groupId);
|
||||
if (typeof ref !== 'undefined') {
|
||||
D.groupRef = ref;
|
||||
D.selectedGroupRoles = ref.roles;
|
||||
this.API.getGroupRoles({
|
||||
groupId: D.groupId
|
||||
}).then((args) => {
|
||||
D.lastSelectedGroupId = D.groupId;
|
||||
D.selectedGroupRoles = args.json;
|
||||
ref.roles = args.json;
|
||||
});
|
||||
}
|
||||
}
|
||||
if (!D.groupId) {
|
||||
D.roleIds = [];
|
||||
D.groupRef = {};
|
||||
D.selectedGroupRoles = [];
|
||||
D.lastSelectedGroupId = '';
|
||||
}
|
||||
this.saveNewInstanceDialog();
|
||||
},
|
||||
buildLegacyInstance() {
|
||||
const D = this.newInstanceDialog;
|
||||
D.instanceCreated = false;
|
||||
D.shortName = '';
|
||||
D.secureOrShortName = '';
|
||||
const tags = [];
|
||||
if (D.instanceName) {
|
||||
D.instanceName = D.instanceName.replace(/[^A-Za-z0-9]/g, '');
|
||||
tags.push(D.instanceName);
|
||||
} else {
|
||||
const randValue = (99999 * Math.random() + 1).toFixed(0);
|
||||
tags.push(String(randValue).padStart(5, '0'));
|
||||
}
|
||||
if (!D.userId) {
|
||||
D.userId = this.API.currentUser.id;
|
||||
}
|
||||
const userId = D.userId;
|
||||
if (D.accessType !== 'public') {
|
||||
if (D.accessType === 'friends+') {
|
||||
tags.push(`~hidden(${userId})`);
|
||||
} else if (D.accessType === 'friends') {
|
||||
tags.push(`~friends(${userId})`);
|
||||
} else if (D.accessType === 'group') {
|
||||
tags.push(`~group(${D.groupId})`);
|
||||
tags.push(`~groupAccessType(${D.groupAccessType})`);
|
||||
} else {
|
||||
tags.push(`~private(${userId})`);
|
||||
}
|
||||
if (D.accessType === 'invite+') {
|
||||
tags.push('~canRequestInvite');
|
||||
}
|
||||
}
|
||||
if (D.accessType === 'group' && D.ageGate) {
|
||||
tags.push('~ageGate');
|
||||
}
|
||||
if (D.region === 'US West') {
|
||||
tags.push(`~region(us)`);
|
||||
} else if (D.region === 'US East') {
|
||||
tags.push(`~region(use)`);
|
||||
} else if (D.region === 'Europe') {
|
||||
tags.push(`~region(eu)`);
|
||||
} else if (D.region === 'Japan') {
|
||||
tags.push(`~region(jp)`);
|
||||
}
|
||||
if (D.accessType !== 'invite' && D.accessType !== 'friends') {
|
||||
D.strict = false;
|
||||
}
|
||||
if (D.strict) {
|
||||
tags.push('~strict');
|
||||
}
|
||||
if (D.groupId && D.groupId !== D.lastSelectedGroupId) {
|
||||
D.roleIds = [];
|
||||
const ref = this.API.cachedGroups.get(D.groupId);
|
||||
if (typeof ref !== 'undefined') {
|
||||
D.groupRef = ref;
|
||||
D.selectedGroupRoles = ref.roles;
|
||||
this.API.getGroupRoles({
|
||||
groupId: D.groupId
|
||||
}).then((args) => {
|
||||
D.lastSelectedGroupId = D.groupId;
|
||||
D.selectedGroupRoles = args.json;
|
||||
ref.roles = args.json;
|
||||
});
|
||||
}
|
||||
}
|
||||
if (!D.groupId) {
|
||||
D.roleIds = [];
|
||||
D.selectedGroupRoles = [];
|
||||
D.groupRef = {};
|
||||
D.lastSelectedGroupId = '';
|
||||
}
|
||||
D.instanceId = tags.join('');
|
||||
this.updateNewInstanceDialog(false);
|
||||
this.saveNewInstanceDialog();
|
||||
},
|
||||
async copyInstanceUrl(location) {
|
||||
const L = utils.parseLocation(location);
|
||||
const args = await instanceRequest.getInstanceShortName({
|
||||
worldId: L.worldId,
|
||||
instanceId: L.instanceId
|
||||
});
|
||||
if (args.json) {
|
||||
if (args.json.shortName) {
|
||||
L.shortName = args.json.shortName;
|
||||
}
|
||||
// NOTE:
|
||||
// splitting the 'INSTANCE:SHORTNAME' event and put code here
|
||||
const resLocation = `${args.instance.worldId}:${args.instance.instanceId}`;
|
||||
if (resLocation === this.newInstanceDialog.location) {
|
||||
const shortName = args.json.shortName;
|
||||
const secureOrShortName = args.json.shortName || args.json.secureName;
|
||||
this.newInstanceDialog.shortName = shortName;
|
||||
this.newInstanceDialog.secureOrShortName = secureOrShortName;
|
||||
this.updateNewInstanceDialog(true);
|
||||
}
|
||||
}
|
||||
const newUrl = this.getLaunchURL(L);
|
||||
this.copyToClipboard(newUrl);
|
||||
},
|
||||
async copyToClipboard(newUrl) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(newUrl);
|
||||
this.$message({
|
||||
message: 'Instance copied to clipboard',
|
||||
type: 'success'
|
||||
});
|
||||
} catch (error) {
|
||||
this.$message({
|
||||
message: 'Instance copied failed',
|
||||
type: 'error'
|
||||
});
|
||||
console.error(error.message);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -740,7 +740,16 @@
|
||||
import database from '../../../repository/database.js';
|
||||
export default {
|
||||
name: 'WorldDialog',
|
||||
inject: ['API', 'showUserDialog', 'userStatusClass', 'userImage', 'adjustDialogZ'],
|
||||
inject: [
|
||||
'API',
|
||||
'showUserDialog',
|
||||
'userStatusClass',
|
||||
'userImage',
|
||||
'adjustDialogZ',
|
||||
'showPreviousInstanceInfoDialog',
|
||||
'showLaunchDialog',
|
||||
'showFullscreenImageDialog'
|
||||
],
|
||||
props: {
|
||||
worldDialog: Object,
|
||||
hideTooltips: Boolean,
|
||||
@@ -819,9 +828,6 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showFullscreenImageDialog(imageUrl) {
|
||||
this.$emit('show-fullscreen-image-dialog', imageUrl);
|
||||
},
|
||||
openFolderGeneric(path) {
|
||||
this.$emit('open-folder-generic', path);
|
||||
},
|
||||
@@ -835,15 +841,9 @@
|
||||
this.$emit('world-dialog-command', command);
|
||||
}
|
||||
},
|
||||
showLaunchDialog(location, shortName) {
|
||||
this.$emit('show-launch-dialog', location, shortName);
|
||||
},
|
||||
refreshInstancePlayerCount(tag) {
|
||||
this.$emit('refresh-instance-player-count', tag);
|
||||
},
|
||||
showPreviousInstanceInfoDialog(location) {
|
||||
this.$emit('show-previous-instance-info-dialog', location);
|
||||
},
|
||||
onWorldMemoChange() {
|
||||
const worldId = this.worldDialog.id;
|
||||
const memo = this.worldDialog.memo;
|
||||
|
||||
Reference in New Issue
Block a user