diff --git a/components/views/media/Media.vue b/components/views/media/Media.vue index 789a1c9416..cee4c1456b 100644 --- a/components/views/media/Media.vue +++ b/components/views/media/Media.vue @@ -52,7 +52,7 @@ export default Vue.extend({ isActiveCall() { return ( this.webrtc.activeCall && - this.webrtc.activeCall.callId === this.conversation.id + this.webrtc.activeCall.peerId === this.conversation.id ) }, computedUsers() { diff --git a/components/views/user/User.vue b/components/views/user/User.vue index 0466dc760c..7228b08024 100644 --- a/components/views/user/User.vue +++ b/components/views/user/User.vue @@ -14,6 +14,7 @@ import { MessagingTypesEnum } from '~/libraries/Enums/enums' import { RootState } from '~/types/store/store' import { toHTML } from '~/libraries/ui/Markdown' import { ContextMenuItem } from '~/store/ui/types' +import { TrackKind } from '~/libraries/WebRTC/types' export default Vue.extend({ components: { @@ -51,15 +52,16 @@ export default Vue.extend({ textilePubkey: (state) => (state as RootState).accounts?.details?.textilePubkey ?? '', conversations: (state) => (state as RootState).textile?.conversations, + activeCall: (state) => (state as RootState).webrtc.activeCall, }), ...mapGetters('textile', ['getConversation']), ...mapGetters('settings', ['getTimestamp']), contextMenuValues(): ContextMenuItem[] { - return this.user.state === 'online' + return this.enableRTC ? [ { text: this.$t('context.send'), func: this.navigateToUser }, - { text: this.$t('context.voice'), func: this.testFunc }, - { text: this.$t('context.video'), func: this.testFunc }, + { text: this.$t('context.voice'), func: this.handleCall }, + // { text: this.$t('context.video'), func: this.testFunc }, // hide profile modal depend on this task AP-1717 (https://satellite-im.atlassian.net/browse/AP-1717) // { text: this.$t('context.profile'), func: this.handleShowProfile }, { text: this.$t('context.remove'), func: this.removeUser }, @@ -101,6 +103,9 @@ export default Vue.extend({ time: this.conversations[this.user.address]?.lastUpdate, }) }, + enableRTC(): boolean { + return this.user.state === 'online' + }, }, mounted() { Array.from( @@ -120,8 +125,20 @@ export default Vue.extend({ this.$store.commit('ui/toggleContextMenu', false) }, methods: { - testFunc() { - this.$Logger.log('User Context', 'Test func') + async call(kinds: TrackKind[]) { + if (!this.enableRTC) { + return + } + await this.$store.dispatch('webrtc/call', { + kinds, + }) + }, + handleCall() { + if (!this.enableRTC || this.activeCall) { + return + } + this.navigateToUser() + this.call(['audio']) }, async removeUser() { this.isLoading = true diff --git a/store/conversation/actions.ts b/store/conversation/actions.ts index 737c8c7c57..603bfcfbf7 100644 --- a/store/conversation/actions.ts +++ b/store/conversation/actions.ts @@ -11,8 +11,8 @@ const actions = { * @example * store.dispatch('conversation/initialize'); */ - initialize(state: ActionsArguments) { - state.commit('setConversation', { + initialize({ commit }: ActionsArguments) { + commit('setConversation', { id: '', type: 'friend', calling: false, @@ -26,7 +26,7 @@ const actions = { * store.dispatch('conversation/setConversation', conversation); */ setConversation( - state: ActionsArguments, + { commit }: ActionsArguments, payload: { id: string type: 'friend' | 'group' @@ -34,7 +34,7 @@ const actions = { participants: Array }, ) { - state.commit('setConversation', payload) + commit('setConversation', payload) }, /** * @method setCalling @@ -42,8 +42,11 @@ const actions = { * @example * store.dispatch('conversation/setCalling', true); */ - setCalling(state: ActionsArguments, calling: boolean) { - state.commit('setCalling', calling) + setCalling( + { commit }: ActionsArguments, + calling: boolean, + ) { + commit('setCalling', calling) }, /** * @method addParticipant diff --git a/store/conversation/mutations.ts b/store/conversation/mutations.ts index 93e1fb0f35..f97ff263ac 100644 --- a/store/conversation/mutations.ts +++ b/store/conversation/mutations.ts @@ -1,6 +1,6 @@ import { ConversationParticipant, ConversationState } from './types' -const actions = { +const mutations = { setConversation( state: ConversationState, payload: { @@ -60,4 +60,4 @@ const actions = { }) }, } -export default actions +export default mutations