Allow "voice mode" to be set as default on room creation
Also, hide it behind a flag in config (experimental_voice_mode)
This commit is contained in:
N-Pex
parent
3853f21f90
commit
afa38275f0
7 changed files with 246 additions and 244 deletions
|
|
@ -3,29 +3,23 @@
|
|||
<div>
|
||||
<v-container fluid>
|
||||
<div class="room-name no-upper">{{ $t("new_room.new_room") }}</div>
|
||||
<v-btn
|
||||
id="btn-back"
|
||||
text
|
||||
class="header-button-left"
|
||||
v-show="$navigation && $navigation.canPop()"
|
||||
@click.stop="goBack"
|
||||
:disabled="step > steps.NAME_SET"
|
||||
>
|
||||
<v-btn id="btn-back" text class="header-button-left" v-show="$navigation && $navigation.canPop()"
|
||||
@click.stop="goBack" :disabled="step > steps.NAME_SET">
|
||||
<v-icon>arrow_back</v-icon>
|
||||
<span class="d-none d-sm-block">{{ $t("menu.back") }}</span>
|
||||
</v-btn>
|
||||
<!-- <v-btn
|
||||
text
|
||||
:disabled="
|
||||
!roomName || (step != steps.INITIAL && step != steps.CREATED)
|
||||
"
|
||||
class="header-button-right"
|
||||
@click.stop="onCreate"
|
||||
>
|
||||
<span>{{
|
||||
step == steps.CREATED ? $t("new_room.done") : $t("new_room.next")
|
||||
}}</span>
|
||||
</v-btn> -->
|
||||
text
|
||||
:disabled="
|
||||
!roomName || (step != steps.INITIAL && step != steps.CREATED)
|
||||
"
|
||||
class="header-button-right"
|
||||
@click.stop="onCreate"
|
||||
>
|
||||
<span>{{
|
||||
step == steps.CREATED ? $t("new_room.done") : $t("new_room.next")
|
||||
}}</span>
|
||||
</v-btn> -->
|
||||
</v-container>
|
||||
</div>
|
||||
|
||||
|
|
@ -39,51 +33,43 @@
|
|||
</v-col>
|
||||
</v-row>
|
||||
<v-row cols="12" align="center" justify="center">
|
||||
<v-col sm="8" align="center">
|
||||
<v-col sm="8" align="center">
|
||||
<div class="text-left font-weight-light">{{ $t("new_room.name_room") }}</div>
|
||||
<v-text-field
|
||||
v-model="roomName"
|
||||
color="black"
|
||||
:rules="roomNamerules"
|
||||
counter="50"
|
||||
maxlength="50"
|
||||
background-color="white"
|
||||
v-on:keyup.enter="$refs.topic.focus()"
|
||||
:disabled="step > steps.INITIAL"
|
||||
autofocus
|
||||
solo
|
||||
@update:error="updateErrorState"
|
||||
></v-text-field>
|
||||
<div class="text-left font-weight-light" v-show="roomName.length> 0">{{ $t("new_room.room_topic") }}</div>
|
||||
<v-text-field
|
||||
v-model="roomTopic"
|
||||
v-show="roomName.length > 0"
|
||||
color="black"
|
||||
background-color="white"
|
||||
v-on:keyup.enter="$refs.create.focus()"
|
||||
:disabled="step > steps.INITIAL"
|
||||
solo
|
||||
></v-text-field>
|
||||
<div class="error--text" v-if="roomCreationErrorMsg"> {{roomCreationErrorMsg}}</div>
|
||||
<v-btn
|
||||
id="btn-room-create"
|
||||
color="black"
|
||||
depressed
|
||||
class="filled-button"
|
||||
@click.stop="onCreate"
|
||||
:disabled="isDisabled"
|
||||
>
|
||||
<div v-if="status && !enterRoomDialog" class="text-center">
|
||||
{{ status }}
|
||||
<v-progress-circular
|
||||
v-if="step == steps.CREATING"
|
||||
indeterminate
|
||||
color="primary"
|
||||
size="20"
|
||||
></v-progress-circular>
|
||||
</div>
|
||||
<span v-else>{{ $t("new_room.create") }}</span>
|
||||
</v-btn>
|
||||
<v-text-field v-model="roomName" color="black" :rules="roomNamerules" counter="50" maxlength="50"
|
||||
background-color="white" v-on:keyup.enter="$refs.topic.focus()" :disabled="step > steps.INITIAL" autofocus
|
||||
solo @update:error="updateErrorState"></v-text-field>
|
||||
<div class="text-left font-weight-light" v-show="roomName.length > 0">{{ $t("new_room.room_topic") }}</div>
|
||||
<v-text-field v-model="roomTopic" v-show="roomName.length > 0" color="black" background-color="white"
|
||||
v-on:keyup.enter="$refs.create.focus()" :disabled="step > steps.INITIAL" solo></v-text-field>
|
||||
|
||||
<!-- Our only option right now is voice mode, so if not enabled, hide the 'options' drop down as well -->
|
||||
<template v-if="$config.experimental_voice_mode">
|
||||
<div @click.stop="showOptions = !showOptions" v-show="roomName.length > 0" class="options clickable">
|
||||
<div>{{ $t("new_room.options") }}</div>
|
||||
<v-icon v-if="!showOptions">expand_more</v-icon>
|
||||
<v-icon v-else>expand_less</v-icon>
|
||||
</div>
|
||||
<v-card v-show="showOptions" class="account ma-3" flat>
|
||||
<v-card-text class="with-right-label">
|
||||
<div>
|
||||
<div class="option-title">{{ $t('room_info.voice_mode') }}</div>
|
||||
<div class="option-text">{{ $t('room_info.voice_mode_info') }}</div>
|
||||
</div>
|
||||
<v-switch v-model="useVoiceMode"></v-switch>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<div class="error--text" v-if="roomCreationErrorMsg"> {{ roomCreationErrorMsg }}</div>
|
||||
<v-btn id="btn-room-create" color="black" depressed class="filled-button" @click.stop="onCreate"
|
||||
:disabled="isDisabled">
|
||||
<div v-if="status && !enterRoomDialog" class="text-center">
|
||||
{{ status }}
|
||||
<v-progress-circular v-if="step == steps.CREATING" indeterminate color="primary"
|
||||
size="20"></v-progress-circular>
|
||||
</div>
|
||||
<span v-else>{{ $t("new_room.create") }}</span>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
|
@ -91,126 +77,101 @@
|
|||
<v-fade-transition>
|
||||
<!-- <div class="section ma-3" flat v-if="step > steps.INITIAL"> -->
|
||||
<!-- <div class="h4 text-left">{{ $t("new_room.join_permissions") }}</div>
|
||||
<div class="h2 text-left">
|
||||
{{ $t("new_room.set_join_permissions") }}
|
||||
</div>
|
||||
<div>{{ $t("new_room.join_permissions_info") }}</div>
|
||||
<v-select
|
||||
:disabled="step >= steps.CREATING"
|
||||
:items="joinRules"
|
||||
class="mt-4"
|
||||
v-model="joinRule"
|
||||
item-value="id"
|
||||
>
|
||||
<template v-slot:selection="{ item }">
|
||||
{{ item.text }}
|
||||
</template>
|
||||
<template v-slot:item="{ item, attrs, on }">
|
||||
<v-list-item v-on="on" v-bind="attrs" #default="{ active }">
|
||||
<v-list-item-avatar>
|
||||
<v-icon class="grey lighten-1" dark>{{ item.icon }}</v-icon>
|
||||
</v-list-item-avatar>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title v-text="item.text"></v-list-item-title>
|
||||
<v-list-item-subtitle
|
||||
v-text="item.descr"
|
||||
></v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
<v-list-item-action>
|
||||
<v-btn icon v-if="active">
|
||||
<v-icon color="grey lighten-1">check</v-icon>
|
||||
</v-btn>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</v-select>
|
||||
<div class="h2 text-left">
|
||||
{{ $t("new_room.set_join_permissions") }}
|
||||
</div>
|
||||
<div>{{ $t("new_room.join_permissions_info") }}</div>
|
||||
<v-select
|
||||
:disabled="step >= steps.CREATING"
|
||||
:items="joinRules"
|
||||
class="mt-4"
|
||||
v-model="joinRule"
|
||||
item-value="id"
|
||||
>
|
||||
<template v-slot:selection="{ item }">
|
||||
{{ item.text }}
|
||||
</template>
|
||||
<template v-slot:item="{ item, attrs, on }">
|
||||
<v-list-item v-on="on" v-bind="attrs" #default="{ active }">
|
||||
<v-list-item-avatar>
|
||||
<v-icon class="grey lighten-1" dark>{{ item.icon }}</v-icon>
|
||||
</v-list-item-avatar>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title v-text="item.text"></v-list-item-title>
|
||||
<v-list-item-subtitle
|
||||
v-text="item.descr"
|
||||
></v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
<v-list-item-action>
|
||||
<v-btn icon v-if="active">
|
||||
<v-icon color="grey lighten-1">check</v-icon>
|
||||
</v-btn>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</v-select>
|
||||
|
||||
<v-divider style="margin-bottom: 20px" />
|
||||
<v-divider style="margin-bottom: 20px" />
|
||||
|
||||
<v-text-field
|
||||
v-if="publicRoomLink"
|
||||
:value="publicRoomLink"
|
||||
class="room-link"
|
||||
readonly
|
||||
filled
|
||||
background-color="transparent"
|
||||
append-icon="content_copy"
|
||||
type="text"
|
||||
@click:append.stop="copyRoomLink"
|
||||
></v-text-field>
|
||||
<v-btn
|
||||
v-else-if="joinRule == 'public'"
|
||||
:loading="step == steps.CREATING"
|
||||
block
|
||||
depressed
|
||||
class="outlined-button"
|
||||
@click.stop="getPublicLink"
|
||||
><v-icon class="me-2">link</v-icon
|
||||
>{{ $t("new_room.get_link") }}</v-btn
|
||||
>
|
||||
<v-btn
|
||||
v-else-if="joinRule == 'invite'"
|
||||
block
|
||||
depressed
|
||||
class="outlined-button"
|
||||
@click.stop="addPeople"
|
||||
><v-icon class="me-2">person_add</v-icon
|
||||
>{{ $t("new_room.add_people") }}</v-btn
|
||||
>
|
||||
<v-text-field
|
||||
v-if="publicRoomLink"
|
||||
:value="publicRoomLink"
|
||||
class="room-link"
|
||||
readonly
|
||||
filled
|
||||
background-color="transparent"
|
||||
append-icon="content_copy"
|
||||
type="text"
|
||||
@click:append.stop="copyRoomLink"
|
||||
></v-text-field>
|
||||
<v-btn
|
||||
v-else-if="joinRule == 'public'"
|
||||
:loading="step == steps.CREATING"
|
||||
block
|
||||
depressed
|
||||
class="outlined-button"
|
||||
@click.stop="getPublicLink"
|
||||
><v-icon class="me-2">link</v-icon
|
||||
>{{ $t("new_room.get_link") }}</v-btn
|
||||
>
|
||||
<v-btn
|
||||
v-else-if="joinRule == 'invite'"
|
||||
block
|
||||
depressed
|
||||
class="outlined-button"
|
||||
@click.stop="addPeople"
|
||||
><v-icon class="me-2">person_add</v-icon
|
||||
>{{ $t("new_room.add_people") }}</v-btn
|
||||
>
|
||||
|
||||
<div v-if="publicRoomLinkCopied" class="link-copied">
|
||||
{{ $t("new_room.link_copied") }}
|
||||
</div>
|
||||
-->
|
||||
<div v-if="publicRoomLinkCopied" class="link-copied">
|
||||
{{ $t("new_room.link_copied") }}
|
||||
</div>
|
||||
-->
|
||||
<!-- <div v-if="status && !enterRoomDialog" class="text-center">
|
||||
<v-progress-circular
|
||||
v-if="step == steps.CREATING"
|
||||
indeterminate
|
||||
color="primary"
|
||||
size="20"
|
||||
></v-progress-circular>
|
||||
{{ status }}
|
||||
</div> -->
|
||||
<v-progress-circular
|
||||
v-if="step == steps.CREATING"
|
||||
indeterminate
|
||||
color="primary"
|
||||
size="20"
|
||||
></v-progress-circular>
|
||||
{{ status }}
|
||||
</div> -->
|
||||
<!-- </div> -->
|
||||
</v-fade-transition>
|
||||
<input
|
||||
id="room-avatar-picker"
|
||||
ref="avatar"
|
||||
type="file"
|
||||
name="avatar"
|
||||
@change="handlePickedAvatar($event)"
|
||||
accept="image/*"
|
||||
class="d-none"
|
||||
/>
|
||||
<v-dialog
|
||||
v-model="enterRoomDialog"
|
||||
:width="$vuetify.breakpoint.smAndUp ? '50%' : '90%'"
|
||||
>
|
||||
<input id="room-avatar-picker" ref="avatar" type="file" name="avatar" @change="handlePickedAvatar($event)"
|
||||
accept="image/*" class="d-none" />
|
||||
<v-dialog v-model="enterRoomDialog" :width="$vuetify.breakpoint.smAndUp ? '50%' : '90%'">
|
||||
<v-card>
|
||||
<v-container v-if="canEditProfile" class="pa-10">
|
||||
<v-row class="align-center">
|
||||
<v-col class="py-0">
|
||||
<div class="text-left font-weight-bold">{{ $t("join.choose_name") }}</div>
|
||||
<v-select
|
||||
ref="avatar"
|
||||
:items="availableAvatars"
|
||||
cache-items
|
||||
outlined
|
||||
dense
|
||||
@change="selectAvatar"
|
||||
:value="availableAvatars[0]"
|
||||
single-line
|
||||
autofocus
|
||||
>
|
||||
<v-select ref="avatar" :items="availableAvatars" cache-items outlined dense @change="selectAvatar"
|
||||
:value="availableAvatars[0]" single-line autofocus>
|
||||
<template v-slot:selection>
|
||||
<v-text-field
|
||||
background-color="transparent"
|
||||
solo
|
||||
flat
|
||||
hide-details
|
||||
@click.native.stop="{}"
|
||||
v-model="selectedProfile.name"
|
||||
></v-text-field>
|
||||
<v-text-field background-color="transparent" solo flat hide-details @click.native.stop="{}"
|
||||
v-model="selectedProfile.name"></v-text-field>
|
||||
</template>
|
||||
<template v-slot:item="data">
|
||||
<v-avatar size="32">
|
||||
|
|
@ -219,33 +180,23 @@
|
|||
<div class="ms-2">{{ data.item.name }}</div>
|
||||
</template>
|
||||
</v-select>
|
||||
</v-col>
|
||||
<v-col cols="2" class="py-0">
|
||||
<v-avatar @click="showAvatarPickerList">
|
||||
</v-col>
|
||||
<v-col cols="2" class="py-0">
|
||||
<v-avatar @click="showAvatarPickerList">
|
||||
<v-img v-if="selectedProfile" :src="selectedProfile.image" />
|
||||
</v-avatar>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row class="mt-0">
|
||||
<v-col class="py-0">
|
||||
<v-checkbox
|
||||
id="chk-remember-me"
|
||||
class="mt-0"
|
||||
v-model="rememberMe"
|
||||
@change="onRememberMe"
|
||||
:label="$t('join.remember_me')"
|
||||
/>
|
||||
<v-checkbox id="chk-remember-me" class="mt-0" v-model="rememberMe" @change="onRememberMe"
|
||||
:label="$t('join.remember_me')" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-btn
|
||||
color="black"
|
||||
depressed
|
||||
class="filled-button"
|
||||
@click.stop="onEnterRoom"
|
||||
:disabled="!selectedProfile.name"
|
||||
>
|
||||
{{ $t("join.enter_room") }}
|
||||
</v-btn>
|
||||
<v-btn color="black" depressed class="filled-button" @click.stop="onEnterRoom"
|
||||
:disabled="!selectedProfile.name">
|
||||
{{ $t("join.enter_room") }}
|
||||
</v-btn>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
|
@ -253,7 +204,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import util from "../plugins/utils";
|
||||
import util, { ROOM_TYPE_VOICE_MODE } from "../plugins/utils";
|
||||
import rememberMeMixin from "./rememberMeMixin";
|
||||
|
||||
const steps = Object.freeze({
|
||||
|
|
@ -265,7 +216,7 @@ const steps = Object.freeze({
|
|||
|
||||
export default {
|
||||
name: "CreateRoom",
|
||||
mixins:[rememberMeMixin],
|
||||
mixins: [rememberMeMixin],
|
||||
data() {
|
||||
return {
|
||||
steps,
|
||||
|
|
@ -305,7 +256,9 @@ export default {
|
|||
v => !v.includes(':') || this.$t("new_room.colon_not_allowed")
|
||||
],
|
||||
roomNameHasError: false,
|
||||
roomCreationErrorMsg: ""
|
||||
roomCreationErrorMsg: "",
|
||||
showOptions: false,
|
||||
useVoiceMode: false,
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -314,7 +267,7 @@ export default {
|
|||
this.availableAvatars = util.getDefaultAvatars();
|
||||
this.selectAvatar(
|
||||
this.availableAvatars[
|
||||
Math.floor(Math.random() * this.availableAvatars.length)
|
||||
Math.floor(Math.random() * this.availableAvatars.length)
|
||||
]
|
||||
);
|
||||
},
|
||||
|
|
@ -359,7 +312,7 @@ export default {
|
|||
},
|
||||
|
||||
onCreate() {
|
||||
if(this.currentUser) {
|
||||
if (this.currentUser) {
|
||||
this.onEnterRoom();
|
||||
} else {
|
||||
this.enterRoomDialog = true;
|
||||
|
|
@ -486,6 +439,11 @@ export default {
|
|||
// Add topic
|
||||
createRoomOptions.topic = this.roomTopic;
|
||||
}
|
||||
if (this.useVoiceMode) {
|
||||
createRoomOptions.creation_content = {
|
||||
type: ROOM_TYPE_VOICE_MODE
|
||||
}
|
||||
}
|
||||
|
||||
return this.$matrix
|
||||
.getLoginPromise()
|
||||
|
|
@ -592,7 +550,7 @@ export default {
|
|||
})
|
||||
.catch((error) => {
|
||||
this.status = ""
|
||||
this.roomCreationErrorMsg = (error.data && error.data.error) || error.message || error.toString();
|
||||
this.roomCreationErrorMsg = (error.data && error.data.error) || error.message || error.toString();
|
||||
this.step = steps.INITIAL; // revert
|
||||
return null;
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue