plugins-nextcloud-mirror/spreed
1
0
Fork 0
mirror of https://github.com/nextcloud/spreed.git synced 2025-12-18 05:20:50 +01:00
Code Projects Releases Activity

fix: merge guest name setting dialog into media settings in lobby

Browse source 
Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>
This commit is contained in:
Dorra Jaouad 2025-06-30 23:37:25 +02:00
parent 5134962f27
commit f0c56fb9d4
3 changed files with 54 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/LobbyScreen.vue
View file

@ -5,7 +5,6 @@
<template>
<div class="lobby">
<GuestWelcomeWindow v-if="isGuestWithoutDisplayName" :token="token" />
<div class="lobby__header">
<RoomService :size="64" />
<h2>{{ currentConversationName }}</h2>
@ -53,7 +52,6 @@ export default {
name: 'LobbyScreen',
components: {
GuestWelcomeWindow,
NcRichText,
RoomService,
SetGuestUsername,
@ -103,10 +101,6 @@ export default {
currentUserIsGuest() {
return !this.actorStore.userId
},
isGuestWithoutDisplayName() {
return !this.actorStore.displayName && this.currentUserIsGuest
},
},
methods: {

77
src/components/MediaSettings/MediaSettings.vue
View file

@ -149,36 +149,39 @@
</template>
</MediaSettingsTabs>
<template v-if="!isDeviceCheck">
<!-- Moderator options before starting a call-->
<NcCheckboxRadioSwitch v-if="!hasCall && canModerateRecording"
v-model="isRecordingFromStart"
class="checkbox">
{{ t('spreed', 'Start recording immediately with the call') }}
</NcCheckboxRadioSwitch>
<!-- Recording warning -->
<NcNoteCard v-if="showRecordingWarning" type="warning">
<p v-if="isCurrentlyRecording">
<strong>{{ t('spreed', 'The call is being recorded.') }}</strong>
</p>
<p v-else>
<strong>{{ t('spreed', 'The call might be recorded.') }}</strong>
</p>
<template v-if="isRecordingConsentRequired">
<p>
{{ t('spreed', 'The recording might include your voice, video from camera, and screen share. Your consent is required before joining the call.') }}
</p>
<NcCheckboxRadioSwitch class="checkbox--warning"
:model-value="recordingConsentGiven"
@update:model-value="setRecordingConsentGiven">
{{ t('spreed', 'Give consent to the recording of this call') }}
</NcCheckboxRadioSwitch>
</template>
</NcNoteCard>
</template>
<!-- Guest display name setting-->
<SetGuestUsername v-if="isGuest && isDialog"
class="media-settings__guest"
compact />
</div>
</div>
<template v-if="!isDeviceCheck && !isInLobby">
<!-- Moderator options before starting a call-->
<NcCheckboxRadioSwitch v-if="!hasCall && canModerateRecording"
v-model="isRecordingFromStart"
class="checkbox">
{{ t('spreed', 'Start recording immediately with the call') }}
</NcCheckboxRadioSwitch>
<!-- Recording warning -->
<NcNoteCard v-if="showRecordingWarning" type="warning">
<p v-if="isCurrentlyRecording">
<strong>{{ t('spreed', 'The call is being recorded.') }}</strong>
</p>
<p v-else>
<strong>{{ t('spreed', 'The call might be recorded.') }}</strong>
</p>
<template v-if="isRecordingConsentRequired">
<p>
{{ t('spreed', 'The recording might include your voice, video from camera, and screen share. Your consent is required before joining the call.') }}
</p>
<NcCheckboxRadioSwitch class="checkbox--warning"
:model-value="recordingConsentGiven"
@update:model-value="setRecordingConsentGiven">
{{ t('spreed', 'Give consent to the recording of this call') }}
</NcCheckboxRadioSwitch>
</template>
</NcNoteCard>
</template>
<!-- buttons bar at the bottom -->
<div class="media-settings__call-buttons">
<!-- Silent call -->
@ -209,7 +212,7 @@
class="call-button"
is-media-settings
:is-recording-from-start="isRecordingFromStart"
:disabled="isRecordingConsentRequired && !recordingConsentGiven"
:disabled="disabledCallButton"
:recording-consent-given="recordingConsentGiven"
:silent-call="silentCall" />
</template>
@ -244,6 +247,7 @@ import IconVideo from 'vue-material-design-icons/Video.vue'
import IconVideoOff from 'vue-material-design-icons/VideoOff.vue'
import AvatarWrapper from '../AvatarWrapper/AvatarWrapper.vue'
import VideoBackground from '../CallView/shared/VideoBackground.vue'
import SetGuestUsername from '../SetGuestUsername.vue'
import CallButton from '../TopBar/CallButton.vue'
import VolumeIndicator from '../UIShared/VolumeIndicator.vue'
import MediaDevicesSelector from './MediaDevicesSelector.vue'
@ -284,6 +288,7 @@ export default {
VideoBackground,
VideoBackgroundEditor,
VolumeIndicator,
SetGuestUsername,
// Icons
IconBell,
IconBellOff,
@ -482,7 +487,7 @@ export default {
},
showRecordingWarning() {
return !this.isDeviceCheck && !this.isInCall && (this.isCurrentlyRecording || this.isRecordingConsentRequired)
return !this.isInCall && (this.isCurrentlyRecording || this.isRecordingConsentRequired)
},
showSilentCallOption() {
@ -491,7 +496,6 @@ export default {
showUpdateChangesButton() {
return (this.isDeviceCheck
|| (this.isDialog && !this.token)
|| this.isInCall)
&& (this.updatedBackground
|| this.audioDeviceStateChanged
@ -558,6 +562,11 @@ export default {
return t('spreed', 'Error while accessing camera')
},
disabledCallButton() {
return (this.isRecordingConsentRequired && !this.recordingConsentGiven)
|| (!this.actorStore.userId && !this.actorStore.displayName.length)
},
},
watch: {
@ -930,6 +939,10 @@ export default {
padding: 10px 0 20px;
}
&__guest {
margin-top: var(--default-grid-baseline);
}
&__device-error {
padding: calc(var(--default-grid-baseline) * 2);
}
@ -966,8 +979,6 @@ export default {
}
.checkbox {
display: flex;
justify-content: center;
margin: calc(var(--default-grid-baseline) * 2);
&--warning {

13
src/components/SetGuestUsername.vue
View file

@ -5,10 +5,13 @@
<template>
<div class="username-form">
<p v-if="compact">
{{ t('spreed', 'Display name (required)') }}
</p>
<!-- eslint-disable-next-line vue/no-v-html -->
<h3 v-html="displayNameLabel" />
<h3 v-else v-html="displayNameLabel" />
<NcButton v-if="!isEditingUsername"
<NcButton v-if="!isEditingUsername && !compact"
@click="toggleEdit">
{{ t('spreed', 'Edit display name') }}
<template #icon>
@ -21,6 +24,7 @@
v-model="guestUserName"
:placeholder="t('spreed', 'Guest')"
class="username-form__input"
label-outside
:show-trailing-button="!!guestUserName"
trailing-button-icon="arrowEnd"
:trailing-button-label="t('spreed', 'Save name')"
@ -28,7 +32,7 @@
@keydown.enter="updateDisplayName"
@keydown.esc="toggleEdit" />
<div class="login-info">
<div v-if="!compact" class="login-info">
<span> {{ t('spreed', 'Do you already have an account?') }}</span>
<NcButton
class="login-info__button"
@ -57,6 +61,9 @@ import { EventBus } from '../services/EventBus.ts'
import { useActorStore } from '../stores/actor.ts'
import { useGuestNameStore } from '../stores/guestName.js'
const { compact = false } = defineProps<{
compact: boolean
}>()
const loginUrl = `${generateUrl('/login')}?redirect_url=${encodeURIComponent(window.location.pathname)}`
const actorStore = useActorStore()