TT#44291 Conferencing: As a Customer, I want to leave the conference gracefully

Change-Id: Ib8ccc18c910a86f06666f7dd94f67ead23a4031c

src/components/CscConfirmationDialog.vue

@@ -0,0 +1,66 @@
+<template>
+    <csc-dialog
+        ref="dialogComp"
+        :title="title"
+        :titleIcon="titleIcon"
+        :opened="opened"
+    >
+        <div
+            slot="content"
+        >
+            {{ message }}
+        </div>
+        <q-btn
+            slot="actions"
+            icon="exit_to_app"
+            color="primary"
+            flat
+            @click="confirm"
+        >
+            {{ $t('buttons.exit') }}
+        </q-btn>
+    </csc-dialog>
+</template>
+
+<script>
+    import {
+        QBtn
+    } from 'quasar-framework'
+    import CscDialog from './CscDialog'
+    export default {
+        name: 'csc-confirm-dialog',
+        data () {
+            return {
+            }
+        },
+        props: [
+            'title',
+            'titleIcon',
+            'message',
+            'opened'
+        ],
+        components: {
+            QBtn,
+            CscDialog
+        },
+        methods: {
+            open() {
+                this.$refs.dialogComp.open();
+            },
+            close() {
+                this.$refs.dialogComp.close();
+            },
+            cancel() {
+                this.close();
+                this.$emit('cancel');
+            },
+            confirm() {
+                this.close();
+                this.$emit('confirm');
+            }
+        }
+    }
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus">
+</style>

src/components/layouts/Conference.vue

@@ -83,8 +83,13 @@
                     :disable="!hasConferenceId || isJoining"
                 />
             </div>
-
         </div>
+        <csc-confirm-dialog
+            ref="confirmDialog"
+            title-icon="exit_to_app"
+            title="Exit conference"
+            @confirm="leave"
+        />
     </q-layout>
 </template>
 
@@ -100,6 +105,7 @@
         QLayout,
         QBtn
     } from 'quasar-framework'
+    import CscConfirmDialog from "../CscConfirmationDialog";
     export default {
         data () {
             return {}
@@ -108,6 +114,7 @@
             this.$store.dispatch('user/initUser');
         },
         components: {
+            CscConfirmDialog,
             CscSpinner,
             CscMedia,
             CscConferenceJoin,
@@ -156,8 +163,14 @@
         },
         methods: {
             close() {
+                if(!this.isJoined) {
                     this.$router.push({path: '/user/home'});
                     this.$store.commit('conference/disposeLocalMedia');
+                }
+                else {
+                    this.$refs.confirmDialog.open();
+                }
+
             },
             toggleMicrophone() {
                 if(this.hasConferenceId) {
@@ -178,6 +191,11 @@
                 if(this.hasConferenceId) {
                     this.$store.dispatch('conference/join', conferenceId);
                 }
+            },
+            leave() {
+                if(this.isJoined) {
+                    this.$store.dispatch('conference/leave');
+                }
             }
         },
         watch: {

src/locales/en.json

@@ -28,7 +28,9 @@
         "resetDefaults": "Reset to defaults",
         "install": "Install",
         "addNew": "Add new",
-        "removeFile": "Remove file"
+        "removeFile": "Remove file",
+        "confirm": "Confirm",
+        "exit": "Exit"
     },
     "form": {
         "destinationLabel": "Destination"

src/plugins/conference.js

@@ -66,6 +66,10 @@ export class ConferencePlugin {
         });
     }
 
+    leaveConference() {
+        return this.getNetwork().leaveConference();
+    }
+
     onLeft(listener) {
         this.events.on('left', listener);
         return this;

src/store/conference.js

@@ -23,6 +23,8 @@ export default {
         localMediaError: null,
         joinState: RequestState.initiated,
         joinError: null,
+        leaveState: RequestState.initiated,
+        leaveError: null,
         participants: []
     },
     getters: {
@@ -44,6 +46,12 @@ export default {
         isJoining(state) {
             return state.joinState === RequestState.requesting;
         },
+        isLeft(state) {
+            return state.leaveState === RequestState.succeeded;
+        },
+        isLeaving(state) {
+            return state.leaveState === RequestState.requesting;
+        },
         isConferencingEnabled(state) {
             return state.conferencingEnabled;
         },
@@ -130,6 +138,20 @@ export default {
             state.joinState = RequestState.failed;
             state.joinError = error;
         },
+        leaveRequesting(state) {
+            state.leaveState = RequestState.requesting;
+            state.leaveError = null;
+        },
+        leaveSucceeded(state) {
+            state.leaveState = RequestState.succeeded;
+            state.leaveError = null;
+            state.joinState = RequestState.initiated;
+            state.joinError = null;
+        },
+        leaveFailed(state, error) {
+            state.leaveState = RequestState.failed;
+            state.leaveError = error;
+        },
         participantJoined(state, participant) {
             state.participants.push(participant.getId());
 
@@ -313,6 +335,17 @@ export default {
                     context.commit('joinFailed', err.message);
                 });
             }
+        },
+        leave(context) {
+            if(context.getters.isJoined) {
+                context.commit('leaveRequesting');
+                Vue.$conference.leaveConference().then(()=>{
+                    context.commit('leaveSucceeded');
+                    context.commit('disposeLocalMedia');
+                }).catch((err)=>{
+                    context.commit('leaveFailed', err.message);
+                });
+            }
         }
     }
 }