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

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

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

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

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

30
src/layouts/CscLayoutConference.vue
Unescape View File

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

4
src/store/conference.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save