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

TT#94601 CSC: Migrate conferencing to latest Quasar

Browse Source 
Change-Id: I131f6ff348b1b1f62d84b841ff3ef426adc42cdf
mr9.1.1
Carlo Venusino 6 years ago
parent 9639b3484a
commit 497a17d22b
6 changed files with 99 additions and 126 deletions
Show Stats Download Patch File Download Diff File

17
src/components/pages/Conference/CscConferenceLocalParticipant.vue
Unescape View File

@ -3,18 +3,15 @@
class="bg-transparent" class="bg-transparent"
flat flat
> >
<q-btn
class="absolute-top-right"
icon="clear"
size="xs"
label="sdfsdf"
/>
<q-card-section <q-card-section
v-if="!localMediaStream || localMediaStream && (!isCameraEnabled && !isScreenEnabled)" v-if="!localMediaStream || localMediaStream && (!isCameraEnabled && !isScreenEnabled)"
class="bg-black text-center" class="bg-black text-center"
style="height: 100px" style="height: 100px"
> >
<q-avatar> <q-avatar
class="absolute-center"
style="top: 40px"
>
<q-icon <q-icon
name="person" name="person"
size="32px" size="32px"
@ -56,7 +53,11 @@ export default {
props: { props: {
localParticipant: { localParticipant: {
type: Object, type: Object,
default: null default: () => {
return {
displayName: ''
}
}
}, },
localMediaStream: { localMediaStream: {
type: MediaStream, type: MediaStream,

22
src/components/pages/Conference/CscConferenceParticipants.vue
Unescape View File

@ -81,17 +81,13 @@ export default {
</script> </script>
<style lang="stylus" rel="stylesheet/stylus"> <style lang="stylus" rel="stylesheet/stylus">
#csc-conf-participants-cont #csc-conf-participants-cont
float right padding 0px 20px 10px 20px
padding 10px display list-item
display inline-block height calc(100vh - 150px)
height calc(100vh - 150px) overflow hidden
overflow hidden @media (max-width: $breakpoint-sm)
@media (max-width: $breakpoint-sm) font-size 73px
font-size 73px left -18px
left: -18px; top -2px
top: -2px;
#csc-conf-remote-participants-cont
overflow auto
height 100%
</style> </style>

151
src/components/pages/Conference/CscConferenceRemoteParticipant.vue
Unescape View File

@ -1,65 +1,72 @@
<template> <template>
<q-card <q-card
v-touch-hold="showMenu" class="bg-transparent"
class="csc-conf-participant-cont" flat
> >
<div class="csc-conf-audio-icons-cont"> <q-card-section
class="relative-position bg-black text-center full-width no-padding"
style="height: 100px"
>
<q-icon <q-icon
v-ripple
name="more_vert" name="more_vert"
class="csc-conf-toggle-audio-menu-icon" class="absolute-left"
style="z-index: 1; padding-top: 3px;"
> >
<q-popover <csc-popup-menu>
ref="popover" <csc-popup-menu-item
class="csc-conf-toggle-audio-popover" color="primary"
> dense
<q-list :label="audioLabel()"
link @click="toggleAudio()"
class="no-border csc-conf-toggle-audio-menu-item" />
> </csc-popup-menu>
<q-item
@click="toggleAudio"
>
<q-item-main
:label="audioLabel()"
/>
</q-item>
</q-list>
</q-popover>
</q-icon> </q-icon>
<q-icon <q-icon
v-if="isAudioMuted" v-show="isAudioMuted"
class="csc-conf-toggle-audio-icon" v-ripple
name="volume_off" name="volume_off"
class="absolute-right"
:style="audioIconStyle"
/> />
<q-icon <q-icon
v-if="!isAudioMuted" v-show="!isAudioMuted"
class="csc-conf-toggle-audio-icon" v-ripple
name="volume_up" name="volume_up"
class="absolute-right"
:style="audioIconStyle"
/> />
</div> <q-avatar
<q-icon v-show="!hasRemoteVideo"
v-if="!hasRemoteVideo" class="absolute-center"
name="person" style="top: 40px"
class="csc-conf-avatar" >
/> <q-icon
<csc-media name="person"
v-show="hasRemoteVideo" size="32px"
ref="cscMedia" />
class="csc-media-cont" </q-avatar>
:muted="false" <csc-media
:preview="true" v-show="hasRemoteVideo"
/> ref="cscMedia"
<q-card-title class="csc-media-cont"
class="csc-conf-participants-item-title" :preview="false"
:muted="true"
/>
</q-card-section>
<div
class="absolute-bottom text-center bg-main-menu q-pa-xs"
> >
{{ remoteParticipant.displayName }} {{ remoteParticipant.displayName }}
</q-card-title> </div>
</q-card> </q-card>
</template> </template>
<script> <script>
import _ from 'lodash' import _ from 'lodash'
import CscMedia from '../../CscMedia' import CscMedia from '../../CscMedia'
import CscPopupMenu from 'components/CscPopupMenu'
import CscPopupMenuItem from 'components/CscPopupMenuItem'
import { import {
TouchHold TouchHold
} from 'quasar' } from 'quasar'
@ -73,19 +80,25 @@ export default {
TouchHold TouchHold
}, },
components: { components: {
CscMedia CscMedia,
CscPopupMenu,
CscPopupMenuItem
}, },
props: { props: {
remoteParticipant: { remoteParticipant: {
type: Object, type: Object,
default: null default: () => {
return {
displayName: ''
}
}
}, },
remoteMediaStream: { remoteMediaStream: {
type: Object, type: Function,
default: null default: null
}, },
remoteMediaStreams: { remoteMediaStreams: {
type: Array, type: Object,
default () { default () {
return [] return []
} }
@ -108,7 +121,10 @@ export default {
...mapGetters('conference', [ ...mapGetters('conference', [
'selectedParticipant', 'selectedParticipant',
'mutedState' 'mutedState'
]) ]),
audioIconStyle () {
return 'z-index: 1; padding-top: 3px; padding-right: 3px;'
}
}, },
watch: { watch: {
remoteMediaStreams () { remoteMediaStreams () {
@ -121,7 +137,7 @@ export default {
}, },
mounted () { mounted () {
this.assignStream() this.assignStream()
if (!this.manualSelection) { if (!this.manualSelection && this.remoteParticipant) {
this.$store.commit('conference/setSelectedParticipant', this.remoteParticipant.id) this.$store.commit('conference/setSelectedParticipant', this.remoteParticipant.id)
} }
}, },
@ -139,11 +155,9 @@ export default {
} }
}, },
toggleAudio () { toggleAudio () {
this.$refs.popover.close(() => { this.isAudioMuted
this.isAudioMuted ? this.$store.commit('conference/removeMutedState', this.remoteParticipant.id)
? this.$store.commit('conference/removeMutedState', this.remoteParticipant.id) : this.$store.commit('conference/addMutedState', this.remoteParticipant.id)
: this.$store.commit('conference/addMutedState', this.remoteParticipant.id)
})
}, },
audioLabel () { audioLabel () {
return this.isAudioMuted return this.isAudioMuted
@ -156,36 +170,3 @@ export default {
} }
} }
</script> </script>
<style lang="stylus" rel="stylesheet/stylus">
.csc-conf-audio-icons-cont
position relative
width 100%
.csc-conf-toggle-audio-menu-icon
position absolute
padding-top 5px
z-index 10
@media (max-width: $breakpoint-sm)
font-size 0px
.csc-conf-toggle-audio-icon
@extend .csc-conf-toggle-audio-menu-icon
right 5px
cursor default
@media (max-width: $breakpoint-sm)
font-size 10px
right 2px
top -3px
.csc-conf-toggle-audio-popover
width 115px
@media (max-width: $breakpoint-sm)
width 90px
.csc-conf-toggle-audio-menu-item
@media (max-width: $breakpoint-sm)
height: 32px !important;
padding-top: 0px !important;
.q-item
font-size 14px
@media (max-width: $breakpoint-sm)
font-size 12px
padding-top 0px
</style>

1
src/css/app.styl
Unescape View File

@ -16,6 +16,7 @@ body.body--dark
.csc-item-even .csc-item-even
background-color alpha($main-menu-background, 0.2) background-color alpha($main-menu-background, 0.2)
.q-drawer .q-drawer
.bg-footer
background-color transparent background-color transparent
.csc-main-menu .csc-main-menu

30
src/layouts/CscLayoutConference.vue
Unescape View File

@ -1,6 +1,6 @@
<template> <template>
<q-layout <q-layout
view="hHr lpR fFr" view="lHh lpR lFf"
> >
<q-header <q-header
class="bg-transparent" class="bg-transparent"
@ -89,23 +89,14 @@
:value="isJoined" :value="isJoined"
:width="150" :width="150"
:mini-width="50" :mini-width="50"
content-class="bg-main-menu"
> >
<csc-conference-local-participant <csc-conference-participants
ref="localParticipant" ref="confParticipants"
class="no-margin q-mb-lg" class="no-margin q-mb-lg"
:local-participant="localParticipant"
:local-media-stream="localMediaStream"
:is-microphone-enabled="isMicrophoneEnabled"
:is-camera-enabled="isCameraEnabled"
:is-screen-enabled="isScreenEnabled"
/> />
<!-- <csc-conference-participants-->
<!-- ref="confParticipants"-->
<!-- />-->
</q-drawer> </q-drawer>
<q-footer <q-footer
class="bg-main-menu" class="bg-footer"
> >
<q-toolbar> <q-toolbar>
<q-space /> <q-space />
@ -150,6 +141,7 @@
> >
<q-menu <q-menu
ref="popover" ref="popover"
:auto-close="true"
:disable="conferenceHasParticipants" :disable="conferenceHasParticipants"
> >
<q-list <q-list
@ -157,10 +149,11 @@
class="no-border" class="no-border"
> >
<q-item <q-item
@click="toggleMuteAll" class="cursor-pointer"
> >
<q-item-main <q-item-main
:label="muteLabel()" :label="muteLabel()"
@click="toggleMuteAll()"
/> />
</q-item> </q-item>
</q-list> </q-list>
@ -183,12 +176,14 @@ import CscConferenceJoin from 'components/pages/Conference/CscConferenceJoin'
import CscConferenceJoined from 'components/pages/Conference/CscConferenceJoined' import CscConferenceJoined from 'components/pages/Conference/CscConferenceJoined'
import CscMedia from 'components/CscMedia' import CscMedia from 'components/CscMedia'
import CscConfirmDialog from 'components/CscConfirmationDialog' import CscConfirmDialog from 'components/CscConfirmationDialog'
import CscConferenceLocalParticipant from 'components/pages/Conference/CscConferenceLocalParticipant' // import CscConferenceLocalParticipant from 'components/pages/Conference/CscConferenceLocalParticipant'
import CscConferenceParticipants from 'components/pages/Conference/CscConferenceParticipants'
export default { export default {
name: 'CscConferenceLayout', name: 'CscConferenceLayout',
components: { components: {
CscConferenceLocalParticipant, // CscConferenceLocalParticipant,
CscConferenceParticipants,
CscConfirmDialog, CscConfirmDialog,
CscMedia, CscMedia,
CscConferenceJoin, CscConferenceJoin,
@ -319,7 +314,6 @@ export default {
} }
}, },
toggleMuteAll () { toggleMuteAll () {
this.$refs.popover.close()
if (_.isEmpty(this.mutedState)) { if (_.isEmpty(this.mutedState)) {
this.$store.dispatch('conference/muteAll') this.$store.dispatch('conference/muteAll')
} else { } else {
@ -349,7 +343,7 @@ export default {
default: default:
this.selectedMediaStream = this.remoteMediaStream(participant) this.selectedMediaStream = this.remoteMediaStream(participant)
this.$refs.localMedia.assignStream(this.selectedMediaStream) this.$refs.localMedia.assignStream(this.selectedMediaStream)
this.selectedParticipantName = this.remoteParticipant(participant).displayName this.selectedParticipantName = this.remoteParticipant(participant) ? this.remoteParticipant(participant).displayName : ''
break break
} }
} }

4
src/store/conference.js
Unescape View File

@ -92,7 +92,7 @@ export default {
}, },
remoteMediaStream: () => (participantId) => { remoteMediaStream: () => (participantId) => {
const participant = Vue.$conference.getRemoteParticipant(participantId) const participant = Vue.$conference.getRemoteParticipant(participantId)
if (participant !== null) { if (participant) {
return participant.mediaStream ? participant.mediaStream.getStream() : null return participant.mediaStream ? participant.mediaStream.getStream() : null
} }
return null return null
@ -108,7 +108,7 @@ export default {
}, },
hasRemoteVideo: () => (participantId) => { hasRemoteVideo: () => (participantId) => {
const participant = Vue.$conference.getRemoteParticipant(participantId) const participant = Vue.$conference.getRemoteParticipant(participantId)
if (participant !== null) { if (participant) {
return participant.mediaStream ? participant.mediaStream.hasVideo() : false return participant.mediaStream ? participant.mediaStream.hasVideo() : false
} }
return false return false

Write Preview
Loading…
Cancel
Save