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

Migrate to Pinia for guestNameStore

Browse source 
Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
This commit is contained in:
DorraJaouad 2023-09-06 19:22:47 +02:00
parent 0041831dc2
commit 520914722d
12 changed files with 117 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/CallView/shared/LocalVideo.vue
View file

@ -83,6 +83,7 @@ import VideoBackground from './VideoBackground.vue'
import video from '../../../mixins/video.js'
import { ConnectionState } from '../../../utils/webrtc/models/CallParticipantModel.js'
import { useGuestNameStore } from '../../../store/guestNameStore.js'
export default {
@ -135,6 +136,11 @@ export default {
},
},
setup() {
const guestNameStore = useGuestNameStore()
return guestNameStore
},
data() {
return {
notificationHandle: null,
@ -195,7 +201,7 @@ export default {
},
guestName() {
return this.$store.getters.getGuestName(
return this.guestNameStore.getGuestName(
this.$store.getters.getToken(),
this.sessionHash,
)

10
src/components/CallView/shared/ReactionToaster.vue
View file

@ -47,6 +47,7 @@ import { subscribe, unsubscribe } from '@nextcloud/event-bus'
import usernameToColor from '@nextcloud/vue/dist/Functions/usernameToColor.js'
import TransitionWrapper from '../../TransitionWrapper.vue'
import { useGuestNameStore } from '../../../store/guestNameStore.js'
export default {
name: 'ReactionToaster',
@ -79,6 +80,11 @@ export default {
},
},
setup() {
const guestNameStore = useGuestNameStore()
return guestNameStore
},
data() {
return {
registeredModels: {},
@ -147,7 +153,7 @@ export default {
id: model.attributes.peerId,
reaction,
name: isLocalModel
? this.$store.getters.getDisplayName() || this.$store.getters.getGuestName()
? this.$store.getters.getDisplayName() || this.guestNameStore.getGuestName()
: this.getParticipantName(model),
seed: Math.random(),
})
@ -176,7 +182,7 @@ export default {
return participant.displayName
}
return this.$store.getters.getGuestName(this.token, Hex.stringify(SHA1(peerId)))
return this.guestNameStore.getGuestName(this.token, Hex.stringify(SHA1(peerId)))
},
styled(name, seed) {

9
src/components/CallView/shared/Screen.vue
View file

@ -40,6 +40,7 @@ import Hex from 'crypto-js/enc-hex.js'
import SHA1 from 'crypto-js/sha1.js'
import VideoBottomBar from './VideoBottomBar.vue'
import { useGuestNameStore } from '../../../store/guestNameStore.js'
export default {
@ -72,6 +73,12 @@ export default {
},
},
setup() {
const guestNameStore = useGuestNameStore()
return guestNameStore
},
computed: {
model() {
if (this.callParticipantModel) {
@ -103,7 +110,7 @@ export default {
// for registered users, so do not fall back to the guest name in
// the store either until the connection was made.
if (!this.callParticipantModel.attributes.userId && !remoteParticipantName && remoteParticipantName !== undefined) {
remoteParticipantName = this.$store.getters.getGuestName(
remoteParticipantName = this.guestNameStore.getGuestName(
this.$store.getters.getToken(),
this.remoteSessionHash,
)

8
src/components/CallView/shared/VideoVue.vue
View file

@ -112,6 +112,7 @@ import { ATTENDEE } from '../../../constants.js'
import video from '../../../mixins/video.js'
import { EventBus } from '../../../services/EventBus.js'
import { ConnectionState } from '../../../utils/webrtc/models/CallParticipantModel.js'
import { useGuestNameStore } from '../../../store/guestNameStore.js'
export default {
@ -187,6 +188,11 @@ export default {
},
},
setup() {
const guestNameStore = useGuestNameStore()
return guestNameStore
},
data() {
return {
videoAspectRatio: null,
@ -393,7 +399,7 @@ export default {
// for registered users, so do not fall back to the guest name in
// the store either until the connection was made.
if (!this.model.attributes.userId && !participantName && participantName !== undefined) {
participantName = this.$store.getters.getGuestName(
participantName = this.guestNameStore.getGuestName(
this.$store.getters.getToken(),
this.sessionHash,
)

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

@ -209,6 +209,7 @@ import { devices } from '../../mixins/devices.js'
import isInLobby from '../../mixins/isInLobby.js'
import BrowserStorage from '../../services/BrowserStorage.js'
import { localMediaModel } from '../../utils/webrtc/index.js'
import { useGuestNameStore } from '../../store/guestNameStore.js'
export default {
name: 'MediaSettings',
@ -242,7 +243,8 @@ export default {
setup() {
const isInCall = useIsInCall()
return { isInCall }
const guestNameStore = useGuestNameStore()
return { isInCall, guestNameStore }
},
data() {
@ -271,7 +273,7 @@ export default {
},
guestName() {
return this.$store.getters.getGuestName(
return this.guestNameStore.getGuestName(
this.$store.getters.getToken(),
this.$store.getters.getActorId(),
)

6
src/components/MessagesList/MessagesGroup/Message/Message.vue
View file

@ -263,6 +263,7 @@ import { useIsInCall } from '../../../../composables/useIsInCall.js'
import { ATTENDEE, CONVERSATION, PARTICIPANT } from '../../../../constants.js'
import participant from '../../../../mixins/participant.js'
import { EventBus } from '../../../../services/EventBus.js'
import { useGuestNameStore } from '../../../../store/guestNameStore.js'
const isTranslationAvailable = getCapabilities()?.spreed?.config?.chat?.translations?.length > 0
@ -437,7 +438,8 @@ export default {
setup() {
const isInCall = useIsInCall()
return { isInCall, isTranslationAvailable }
const guestNameStore = useGuestNameStore()
return { isInCall, isTranslationAvailable, guestNameStore }
},
expose: ['highlightMessage'],
@ -856,7 +858,7 @@ export default {
const displayName = reaction.actorDisplayName.trim()
if (reaction.actorType === ATTENDEE.ACTOR_TYPE.GUESTS) {
return this.$store.getters.getGuestNameWithGuestSuffix(this.token, reaction.actorId)
return this.guestNameStore.getGuestNameWithGuestSuffix(this.token, reaction.actorId)
}
if (displayName === '') {

8
src/components/MessagesList/MessagesGroup/MessagesGroup.vue
View file

@ -48,6 +48,7 @@ import AuthorAvatar from './AuthorAvatar.vue'
import Message from './Message/Message.vue'
import { ATTENDEE } from '../../../constants.js'
import { useGuestNameStore } from '../../../store/guestNameStore.js'
export default {
name: 'MessagesGroup',
@ -85,6 +86,11 @@ export default {
},
},
setup() {
const guestNameStore = useGuestNameStore()
return guestNameStore
},
expose: ['highlightMessage'],
computed: {
@ -113,7 +119,7 @@ export default {
const displayName = this.messages[0].actorDisplayName.trim()
if (this.actorType === ATTENDEE.ACTOR_TYPE.GUESTS) {
return this.$store.getters.getGuestName(this.token, this.actorId)
return this.guestNameStore.getGuestName(this.token, this.actorId)
}
if (displayName === '') {

8
src/components/NewMessage/NewMessageTypingIndicator.vue
View file

@ -44,6 +44,7 @@
import escapeHtml from 'escape-html'
import AvatarWrapper from '../AvatarWrapper/AvatarWrapper.vue'
import { useGuestNameStore } from '../../store/guestNameStore.js'
export default {
name: 'NewMessageTypingIndicator',
@ -59,6 +60,11 @@ export default {
},
},
setup() {
const guestNameStore = useGuestNameStore()
return guestNameStore
},
computed: {
isGuest() {
return this.$store.getters.getActorType() === 'guests'
@ -131,7 +137,7 @@ export default {
return participant.displayName
}
return this.$store.getters.getGuestName(this.token, participant.actorId)
return this.guestNameStore.getGuestName(this.token, participant.actorId)
},
},
}

10
src/components/SetGuestUsername.vue
View file

@ -55,6 +55,7 @@ import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
import { setGuestUserName } from '../services/participantsService.js'
import { useGuestNameStore } from '../store/guestNameStore.js'
export default {
name: 'SetGuestUsername',
@ -65,6 +66,11 @@ export default {
Pencil,
},
setup() {
const guestNameStore = useGuestNameStore()
return guestNameStore
},
data() {
return {
guestUserName: '',
@ -121,7 +127,7 @@ export default {
const previousName = this.$store.getters.getDisplayName()
try {
this.$store.dispatch('setDisplayName', this.guestUserName)
this.$store.dispatch('forceGuestName', {
this.guestNameStore.forceGuestName({
token: this.token,
actorId: this.$store.getters.getActorId(),
actorDisplayName: this.guestUserName,
@ -135,7 +141,7 @@ export default {
this.isEditingUsername = false
} catch (exception) {
this.$store.dispatch('setDisplayName', previousName)
this.$store.dispatch('forceGuestName', {
this.guestNameStore.forceGuestName({
token: this.token,
actorId: this.$store.getters.getActorId(),
actorDisplayName: previousName,

8
src/mixins/getParticipants.js
View file

@ -33,11 +33,17 @@ import { EventBus } from '../services/EventBus.js'
import { fetchParticipants } from '../services/participantsService.js'
import CancelableRequest from '../utils/cancelableRequest.js'
import isInLobby from './isInLobby.js'
import { useGuestNameStore } from '../store/guestNameStore.js'
const getParticipants = {
mixins: [isInLobby],
setup() {
const guestNameStore = useGuestNameStore()
return guestNameStore
},
data() {
return {
participantsInitialised: false,
@ -137,7 +143,7 @@ const getParticipants = {
})
if (participant.participantType === PARTICIPANT.TYPE.GUEST
|| participant.participantType === PARTICIPANT.TYPE.GUEST_MODERATOR) {
this.$store.dispatch('forceGuestName', {
this.guestNameStore.forceGuestName({
token,
actorId: Hex.stringify(SHA1(participant.sessionIds[0])),
actorDisplayName: participant.displayName,

86
src/store/guestNameStore.js
View file

@ -20,86 +20,88 @@
*
*/
import Vue from 'vue'
import { defineStore } from 'pinia'
const state = {
guestNames: {
},
}
export const useGuestNameStore = defineStore('guestNameStore', {
state: () => ({
guestNames: {},
}),
const getters = {
getters : {
/**
* Gets the participants array
*
* @param {object} state the state object.
* @return {Array} the participants array (if there are participants in the store)
*/
getGuestName: (state) => (token, actorId) => {
if (state.guestNames[token] && state.guestNames[token][actorId]) {
return state.guestNames[token][actorId]
getGuestName(state) {
return (token, actorId) => {
if (state.guestNames[token] && state.guestNames[token][actorId]) {
return state.guestNames[token][actorId]
}
return t('spreed', 'Guest')
}
return t('spreed', 'Guest')
},
getGuestNameWithGuestSuffix(state, getters) {
return (token, actorId) => {
const displayName = getters.getGuestName(token, actorId)
if (displayName === t('spreed', 'Guest')) {
return displayName
}
return t('spreed', '{guest} (guest)', {
guest: displayName
})
}
}
},
getGuestNameWithGuestSuffix: (state, getters) => (token, actorId) => {
const displayName = getters.getGuestName(token, actorId)
if (displayName === t('spreed', 'Guest')) {
return displayName
}
return t('spreed', '{guest} (guest)', { guest: displayName })
},
}
actions : {
const mutations = {
/**
* Adds a guest name to the store
*
* @param {object} state current store state
* @param {object} data the wrapping object;
* @param {boolean} data.noUpdate Only set the guest name if it was not set before
* @param {string} data.token the token of the conversation
* @param {string} data.actorId the guest
* @param {string} data.actorDisplayName the display name to set
*/
addGuestName(state, { noUpdate, token, actorId, actorDisplayName }) {
if (!state.guestNames[token]) {
Vue.set(state.guestNames, token, [])
}
if (!state.guestNames[token][actorId]) {
Vue.set(state.guestNames[token], actorId, t('spreed', 'Guest'))
} else if (noUpdate) {
return
}
state.guestNames[token][actorId] = actorDisplayName
},
}
const actions = {
addGuestName({ noUpdate, token, actorId, actorDisplayName }) {
if (!this.guestNames[token]) {
Vue.set(this.guestNames, token, [])
}
if (!this.guestNames[token][actorId]) {
Vue.set(this.guestNames[token], actorId, t('spreed', 'Guest'))
} else if (noUpdate) {
return
}
this.guestNames[token][actorId] = actorDisplayName
},
/**
* Add guest name of a chat message to the store
*
* @param {object} context default store context
* @param {object} data the wrapping object;
* @param {string} data.token the token of the conversation
* @param {string} data.actorId the guest
* @param {string} data.actorDisplayName the display name to set
*/
setGuestNameIfEmpty(context, { token, actorId, actorDisplayName }) {
context.commit('addGuestName', { noUpdate: true, token, actorId, actorDisplayName })
setGuestNameIfEmpty({ token, actorId, actorDisplayName }) {
this.addGuestName({ noUpdate: true, token, actorId, actorDisplayName })
},
/**
* Add guest name of a chat message to the store
*
* @param {object} context default store context
* @param {object} data the wrapping object;
* @param {string} data.token the token of the conversation
* @param {string} data.actorId the guest
* @param {string} data.actorDisplayName the display name to set
*/
forceGuestName(context, { token, actorId, actorDisplayName }) {
context.commit('addGuestName', { noUpdate: false, token, actorId, actorDisplayName })
forceGuestName({ token, actorId, actorDisplayName }) {
this.addGuestName({ noUpdate: false, token, actorId, actorDisplayName })
},
},
}
export default { state, mutations, getters, actions }
})

9
src/store/messagesStore.js
View file

@ -41,6 +41,7 @@ import {
removeReactionFromMessage,
} from '../services/messagesService.js'
import CancelableRequest from '../utils/cancelableRequest.js'
import { useGuestNameStore } from './guestNameStore.js'
/**
* Returns whether the given message contains a mention to self, directly
@ -79,6 +80,8 @@ function hasMentionToSelf(context, message) {
return false
}
const guestNameStore = useGuestNameStore()
const state = {
/**
* Map of conversation token to message list
@ -819,7 +822,7 @@ const actions = {
response.data.ocs.data.forEach(message => {
if (message.actorType === ATTENDEE.ACTOR_TYPE.GUESTS) {
// update guest display names cache
context.dispatch('setGuestNameIfEmpty', message)
guestNameStore.setGuestNameIfEmpty(message)
}
context.dispatch('processMessage', message)
newestKnownMessageId = Math.max(newestKnownMessageId, message.id)
@ -909,7 +912,7 @@ const actions = {
response.data.ocs.data.forEach(message => {
if (message.actorType === ATTENDEE.ACTOR_TYPE.GUESTS) {
// update guest display names cache
context.dispatch('setGuestNameIfEmpty', message)
guestNameStore.setGuestNameIfEmpty(message)
}
context.dispatch('processMessage', message)
newestKnownMessageId = Math.max(newestKnownMessageId, message.id)
@ -1034,7 +1037,7 @@ const actions = {
// update guest display names cache,
// force in case the display name has changed since
// the last fetch
context.dispatch('forceGuestName', message)
this.guestNameStore.forceGuestName(message)
}
context.dispatch('processMessage', message)
if (!lastMessage || message.id > lastMessage.id) {