sipwise
/
ngcp-csc-ui
mirror of https://github.com/sipwise/ngcp-csc-ui.git
1
0
Fork 0
Code Issues Releases Wiki Activity

MT#59231 let the user know when it has been put on hold

Browse Source 
Change-Id: I0625062f236b8b68ecdc39b67ffdf13ccd981ed6
mr12.3
Nouhaila Idrissi Zouggari 1 year ago
parent 03a494b9a1
commit dc1d714fa7
8 changed files with 127 additions and 21 deletions
Show Stats Download Patch File Download Diff File

27
src/api/ngcp-call.js
Unescape View File

@ -152,6 +152,12 @@ export function callRegister ({ instanceId }) {
$incomingRtcSession = null
})
callEvent.emit('incoming', $incomingRtcSession)
$incomingRtcSession.on('hold', (holdEvent) => {
callEvent.emit('incomingHold', holdEvent)
})
$incomingRtcSession.on('unhold', (unholdEvent) => {
callEvent.emit('incomingUnHold', unholdEvent)
})
}
}
})
@ -189,6 +195,20 @@ export async function callStart ({ number }) {
ended (event) {
callEvent.emit('outgoingEnded', event)
$outgoingRtcSession = null
},
hold (event) {
if (event.originator === 'local') {
callEvent.emit('outgoingHold', event)
} else {
callEvent.emit('outgoingHolded', event)
}
},
unhold (event) {
if (event.originator === 'local') {
callEvent.emit('outgoingUnHold', event)
} else {
callEvent.emit('outgoingUnHolded', event)
}
}
},
mediaStream: $localMediaStream
@ -413,15 +433,8 @@ export function callToggleHold () {
if (rtcSession) {
if (rtcSession.isOnHold().local) {
rtcSession.unhold()
callEvent.emit('callResumed')
} else {
rtcSession.hold()
callEvent.emit('callOnHold')
}
}
}
export function callIsOnHold () {
const rtcSession = callGetRtcSession()
return rtcSession ? rtcSession.isOnHold().local : false
}

31
src/boot/ngcp-call.js
Unescape View File

@ -78,4 +78,35 @@ export default async ({ app, store }) => {
hasRemoteVideo: callHasRemoteVideo()
})
})
callEvent.on('incomingHold', (event) => {
if (event.originator === 'remote') {
store.commit('call/toggleHold')
store.commit('call/setRemoteOnHold', true)
} else if (event.originator === 'local') {
callEvent.on('outgoingHold', (event) => {
store.commit('call/toggleHold')
store.commit('call/setLocalOnHold', true)
store.commit('call/setRemoteOnHold', false)
})
}
})
callEvent.on('incomingUnHold', (event) => {
if (event.originator === 'remote') {
store.commit('call/toggleHold')
store.commit('call/setRemoteOnHold', false)
} else if (event.originator === 'local') {
callEvent.on('outgoingUnHold', (event) => {
store.commit('call/toggleHold')
store.commit('call/setLocalOnHold', false)
})
}
})
callEvent.on('outgoingHolded', (event) => {
store.commit('call/toggleHold')
store.commit('call/setLocalOnHold', true)
})
callEvent.on('outgoingUnHolded', (event) => {
store.commit('call/toggleHold')
store.commit('call/setLocalOnHold', false)
})
}

53
src/components/call/CscCall.vue
Unescape View File

@ -67,7 +67,7 @@
</div>
</div>
<div
v-else-if="isEstablished"
v-else-if="isEstablished || isHolded"
class="csc-call-info-established"
>
<div
@ -137,7 +137,7 @@
class="csc-call-media-icon row justify-center items-center full-height"
>
<q-icon
name="person"
:name="isHolded ? 'pause_circle_filled' : 'person'"
size="128px"
color="white"
/>
@ -160,7 +160,7 @@
style="margin-top: -30px"
>
<q-btn
v-if="isEstablished && !(isMobile && minimized)"
v-if="isHolded || isEstablished && !(isMobile && minimized)"
:color="colorToggleMicrophone"
:icon="iconToggleMicrophone"
class="q-mr-sm"
@ -170,17 +170,18 @@
@click="toggleMicrophone()"
/>
<q-btn
v-if="isEstablished && !(isMobile && minimized)"
v-if="isHolded || isEstablished && !(isMobile && minimized)"
:color="colorToggleHold"
text-color="dark"
icon="pause_circle_filled"
class="q-mr-sm"
round
size="large"
:disable="islocalOnHold || isremoteOnHold"
@click="toggleHold()"
/>
<q-btn
v-if="isEstablished && !(isMobile && minimized)"
v-if="isHolded || isEstablished && !(isMobile && minimized)"
:color="colorToggleCamera"
:icon="iconToggleCamera"
class="q-mr-sm"
@ -190,7 +191,7 @@
@click="toggleCamera()"
/>
<q-btn
v-if="isEstablished && !(isMobile && minimized)"
v-if="isHolded || isEstablished && !(isMobile && minimized)"
:color="colorToggleScreen"
icon="screen_share"
class="q-mr-sm"
@ -200,7 +201,7 @@
@click="toggleScreen()"
/>
<q-btn
v-if="isEstablished && !(isMobile && minimized)"
v-if="isHolded || isEstablished && !(isMobile && minimized)"
:color="colorToggleRemoteVolume"
:icon="iconToggleRemoteVolume"
class="q-mr-sm"
@ -431,6 +432,14 @@ export default {
type: Boolean,
default: false
},
localOnHold: {
type: Boolean,
default: false
},
remoteOnHold: {
type: Boolean,
default: false
},
remoteVolumeEnabled: {
type: Boolean,
default: false
@ -485,7 +494,7 @@ export default {
return this.isInitiating || this.isRinging || this.isIncoming
},
isActive () {
return this.isCalling || this.isEstablished
return this.isCalling || this.isEstablished || this.isHolded
},
isInitiating () {
return this.callState === 'initiating'
@ -502,6 +511,9 @@ export default {
isEnded () {
return this.callState === 'ended'
},
isHolded () {
return this.callState === 'hold'
},
canStart () {
return this.callState === 'input' || this.callState === 'incoming'
},
@ -550,7 +562,7 @@ export default {
}
},
colorToggleHold () {
if (this.holdEnabled) {
if (this.holdEnabled && !this.remoteOnHold && !this.localOnHold) {
return 'primary'
} else {
return 'grey-1'
@ -575,6 +587,12 @@ export default {
},
isNumberInputDefined () {
return this.numberInput !== '' && this.numberInput !== null
},
islocalOnHold () {
return this.localOnHold
},
isremoteOnHold () {
return this.remoteOnHold
}
},
watch: {
@ -754,6 +772,19 @@ export default {
.csc-dialpad-button
vertical-align: center
margin-left: $flex-gutter-sm
.csc-call-info-hold
position: absolute
bottom: $call-footer-action-margin * 2
right: 0
left: 0
justify-items: center
z-index: 3
color: white
.csc-media-icon
margin-right: $flex-gutter-xs
.csc-dialpad-button
vertical-align: center
margin-left: $flex-gutter-sm
.csc-call-media-remote
position: absolute
top: 0
@ -834,6 +865,9 @@ export default {
.csc-call.csc-call-established
.csc-call-content
background-color: transparent
.csc-call.csc-call-hold
.csc-call-content
background-color: transparent
.csc-call.csc-call-minimized
opacity: 0
height: $call-footer-height-big
@ -865,6 +899,7 @@ export default {
.csc-call.csc-call-minimized.csc-call-initiating,
.csc-call.csc-call-minimized.csc-call-ringing,
.csc-call.csc-call-minimized.csc-call-established,
.csc-call.csc-call-minimized.csc-call-hold,
.csc-call.csc-call-minimized.csc-call-ended
bottom: 0
opacity: 1

10
src/layouts/CscLayoutMain.vue
Unescape View File

@ -179,6 +179,8 @@
:camera-enabled="cameraEnabled"
:screen-enabled="screenEnabled"
:hold-enabled="holdEnabled"
:local-on-hold="localOnHold"
:remote-on-hold="remoteOnHold"
:remote-volume-enabled="remoteAudioEnabled"
:dialpad-opened="dialpadOpened"
:menu-minimized="menuMinimized"
@ -295,7 +297,9 @@ export default {
'microphoneEnabled',
'remoteAudioEnabled',
'maximized',
'dialpadOpened'
'dialpadOpened',
'localOnHold',
'remoteOnHold'
]),
...mapGetters('user', [
'isLogged',
@ -395,7 +399,8 @@ export default {
this.callState === 'ringing' ||
this.callState === 'established' ||
this.callState === 'incoming' ||
this.callState === 'ended'
this.callState === 'ended' ||
this.callState === 'hold'
},
getLocalMediaStream () {
if (this.localMediaStream) {
@ -431,6 +436,7 @@ export default {
if (this.callState === CallState.initiating ||
this.callState === CallState.ringing ||
this.callState === CallState.incoming ||
this.callState === CallState.hold ||
this.callState === CallState.established) {
return this.callNumberFormatted
} else if (this.callState === CallState.ended) {

7
src/store/call/common.js
Unescape View File

@ -8,7 +8,9 @@ export const CallState = {
ringing: 'ringing',
incoming: 'incoming',
established: 'established',
ended: 'ended'
ended: 'ended',
hold: 'hold',
unhold: 'unhold'
}
export const CallStateTitle = {
get input () { return i18n.global.tc('Start new call') },
@ -16,7 +18,8 @@ export const CallStateTitle = {
get ringing () { return i18n.global.tc('Ringing at') },
get incoming () { return i18n.global.tc('Incoming call from') },
get established () { return i18n.global.tc('In call with') },
get ended () { return i18n.global.tc('Call ended') }
get ended () { return i18n.global.tc('Call ended') },
get hold () { return i18n.global.tc('Call holded') }
}
export const MediaType = {

1
src/store/call/getters.js
Unescape View File

@ -26,6 +26,7 @@ export default {
if (state.callState === CallState.initiating ||
state.callState === CallState.ringing ||
state.callState === CallState.incoming ||
state.callState === CallState.hold ||
state.callState === CallState.established) {
return getters.callNumberFormatted
} else if (state.callState === CallState.ended) {

15
src/store/call/mutations.js
Unescape View File

@ -58,6 +58,9 @@ export default {
endCall (state, reason) {
if (reason) {
state.callState = CallState.ended
state.holdEnabled = false
state.remoteOnHold = false
state.localOnHold = false
state.endedReason = reason
}
state.dialpadOpened = false
@ -107,7 +110,19 @@ export default {
toggleHold (state) {
state.holdEnabled = !state.holdEnabled
if (state.holdEnabled) {
state.callState = CallState.hold
state.holdEnabled = true
} else {
state.callState = CallState.established
state.holdEnabled = false
}
},
setLocalOnHold (state, value) {
state.localOnHold = value
},
setRemoteOnHold (state, value) {
state.remoteOnHold = value
}
}

4
src/store/call/state.js
Unescape View File

@ -21,5 +21,7 @@ export default {
remoteAudioEnabled: true,
remoteVideoEnabled: true,
maximized: false,
dialpadOpened: false
dialpadOpened: false,
localOnHold: false,
remoteOnHold: false
}

Write Preview
Loading…
Cancel
Save