From 8cf6234e6360662c2bded86b6f1d46fb0324ce13 Mon Sep 17 00:00:00 2001 From: Carlo Venusino Date: Wed, 30 Oct 2019 14:35:20 +0100 Subject: [PATCH] TT#47718 Select participant in main content area - selected ParticipantItem's video in fullscreen (#67702) - placeholder icon for none existing video of the current selected participant (#67706) - current selected ParticipantItem's name as title (#67703) - local participant selected by default (#67704) Change-Id: I6e2e47609adc407363be0c1636ff0ae8bd30ad38 --- src/components/layouts/Conference.vue | 106 +++++++++++++++++- .../CscConferenceLocalParticipant.vue | 38 +++---- .../Conference/CscConferenceParticipants.vue | 8 +- .../CscConferenceRemoteParticipant.vue | 44 +++++--- src/statics/avatar.png | Bin 12320 -> 0 bytes src/store/conference.js | 18 ++- src/store/index.js | 1 + src/themes/app.common.styl | 35 +++++- src/themes/app.variables.styl | 3 + 9 files changed, 206 insertions(+), 47 deletions(-) delete mode 100644 src/statics/avatar.png diff --git a/src/components/layouts/Conference.vue b/src/components/layouts/Conference.vue index 57c36445..3e58970b 100644 --- a/src/components/layouts/Conference.vue +++ b/src/components/layouts/Conference.vue @@ -43,9 +43,37 @@ v-if="!isJoining && isJoined" /> + + + +
+ {{selectedParticipantName}} +
import { mapGetters, + mapState, mapActions } from 'vuex' import CscConferenceJoin from '../pages/Conference/CscConferenceJoin' @@ -109,12 +138,18 @@ import CscSpinner from "../CscSpinner"; import { QLayout, - QBtn + QBtn, + QCard, + QCardMedia, + QIcon } from 'quasar-framework' import CscConfirmDialog from "../CscConfirmationDialog"; export default { - data () { - return {} + data: function () { + return { + selectedMediaStream : null, + selectedParticipantName: null + } }, mounted() { this.$store.dispatch('user/initUser'); @@ -127,9 +162,15 @@ CscConferenceJoined, CscConferenceParticipants, QLayout, - QBtn + QBtn, + QCard, + QCardMedia, + QIcon }, computed: { + ...mapState('conference',[ + 'selectedParticipant' + ]), ...mapGetters('conference', [ 'conferenceId', 'conferenceUrl', @@ -141,10 +182,13 @@ 'isCameraEnabled', 'isScreenEnabled', 'isMediaEnabled', + 'localParticipant', 'localMediaStream', 'participantsList', + 'remoteParticipant', 'remoteMediaStream', - 'remoteMediaStreams' + 'remoteMediaStreams', + 'hasRemoteVideo' ]), microphoneButtonColor() { if(this.isMicrophoneEnabled) { @@ -169,6 +213,17 @@ else { return 'grey'; } + }, + selectedHasVideo(){ + const selectedParticipant = this.selectedParticipant; + switch(true){ + case !selectedParticipant: + return false; + case selectedParticipant == 'local': + return this.isMediaEnabled && (this.isCameraEnabled || this.isScreenEnabled); + default: + return this.hasRemoteVideo(selectedParticipant); + } } }, methods: { @@ -204,6 +259,24 @@ if(this.hasConferenceId) { await this.$store.dispatch('conference/join', conferenceId); } + }, + showSelectedParticipant: ( participant, scope )=>{ + if(scope.$refs.localMedia) { + switch(participant){ + case 'local': + if(scope.localParticipant){ + scope.selectedParticipantName = scope.localParticipant.displayName + scope.selectedMediaStream = scope.localMediaStream + scope.$refs.localMedia.assignStream(scope.selectedMediaStream); + } + break; + default: + scope.selectedMediaStream = scope.remoteMediaStream(participant); + scope.$refs.localMedia.assignStream(scope.selectedMediaStream); + scope.selectedParticipantName = scope.remoteParticipant(participant).displayName + break; + } + } } }, watch: { @@ -212,6 +285,14 @@ this.$store.commit('conference/disposeLocalMedia'); } }, + selectedParticipant:{ + handler: function(participant){ + if(participant){ + this.showSelectedParticipant(participant, this); + } + }, + deep: true + }, localMediaStream(stream) { if (this.$refs.localMedia && (stream === null || stream === undefined)) { this.$refs.localMedia.reset(); @@ -223,6 +304,19 @@