TT#45671 Call: Improved error handling

Change-Id: Ia337ed761c9e58ebbafb0e73e03b918d14508a47

src/components/Login.vue

@@ -21,8 +21,18 @@
                         </form>
                     </q-card-main>
                     <q-card-actions class="pull-right">
-                        <q-btn flat icon="fa-arrow-right"
-                               color="primary" @click="login()">{{ $t('pages.login.button') }}</q-btn>
+                        <q-spinner-dots
+                            v-if="loginRequesting"
+                            color="primary"
+                            size="32px"
+                        />
+                        <q-btn
+                            v-if="!loginRequesting"
+                            flat
+                            icon="fa-arrow-right"
+                            color="primary"
+                            @click="login()"
+                        >{{ $t('pages.login.button') }}</q-btn>
                     </q-card-actions>
                 </q-card>
             </div>
@@ -33,10 +43,28 @@
 
 <script>
 
-    import { mapGetters } from 'vuex'
-    import { startLoading, stopLoading, showGlobalError } from '../helpers/ui'
-    import { QLayout, QCard, QCardTitle, QCardSeparator, QCardMain, QField, QInput,
-        QCardActions, QBtn, QIcon, Platform } from 'quasar-framework'
+    import {
+        mapGetters
+    } from 'vuex'
+    import {
+        // startLoading,
+        // stopLoading,
+        showGlobalError
+    } from '../helpers/ui'
+    import {
+        QLayout,
+        QCard,
+        QCardTitle,
+        QCardSeparator,
+        QCardMain,
+        QField,
+        QInput,
+        QCardActions,
+        QBtn,
+        QIcon,
+        Platform,
+        QSpinnerDots
+    } from 'quasar-framework'
 
     export default {
         name: 'login',
@@ -50,7 +78,8 @@
             QInput,
             QCardActions,
             QBtn,
-            QIcon
+            QIcon,
+            QSpinnerDots
         },
         data () {
             return {
@@ -84,11 +113,11 @@
             }
         },
         watch: {
-            loginRequesting(logging) {
-                if(logging) {
-                    startLoading();
-                }
-            },
+            // loginRequesting(logging) {
+            //     if(logging) {
+            //         startLoading();
+            //     }
+            // },
             loginSucceeded(loggedIn) {
                 if(loggedIn) {
                     this.$router.push({path : '/'});
@@ -96,7 +125,6 @@
             },
             loginError(error) {
                 if(error) {
-                    stopLoading();
                     showGlobalError(this.$i18n.t('pages.login.error'));
                 }
             }

src/components/call/CscCall.vue

@@ -671,6 +671,7 @@
         .csc-call-content
             background-color transparent
     .csc-call.csc-call-minimized
+        opacity 0
         height $call-footer-height-big
         top auto
         bottom ($call-footer-height-big + $call-footer-action-margin) * -1

src/components/layouts/Default.vue

@@ -149,7 +149,7 @@
             </q-collapsible>
             <q-collapsible
                 :opened="isCallBlocking"
-                intend icon="fa-ban"
+                intend icon="block"
                 :label="$t('navigation.callBlocking.title')"
                 :sublabel="$t('navigation.callBlocking.subTitle')"
             >
@@ -312,9 +312,6 @@
                 mobileMenu: null
             }
         },
-        mounted: function() {
-            this.$store.dispatch('user/initUser');
-        },
         mixins: [
             platformMixin
         ],
@@ -499,14 +496,8 @@
                     this.setCallStateTitle();
                 }
             },
-            userDataRequesting(value) {
-                if(value) {
-                    startLoading();
-                }
-            },
-            userDataSucceeded(value) {
-                if(value) {
-                    stopLoading();
+            userDataSucceeded(userDataSucceeded) {
+                if(userDataSucceeded) {
                     enableIncomingCallNotifications();
                 }
             },

src/components/pages/CallBlocking/CscCallBlocking.vue

@@ -5,7 +5,7 @@
                 <q-item tag="label">
                     <q-item-side>
                         <q-radio v-model="enabled" val="blacklist" color="negative"
-                                 checked-icon="fa-ban" uncheck-icon="fa-ban"/>
+                                 checked-icon="block" uncheck-icon="block"/>
                     </q-item-side>
                     <q-item-main>
                         <q-item-tile label>{{ $t('pages.callBlocking' + suffix + '.toggleDisableLabel') }}</q-item-tile>
@@ -39,7 +39,7 @@
         <div>
             <q-card class="blocked-number" v-for="(number, index) in numbers" :key="index">
                 <q-card-title>
-                    <q-icon v-if="!(editing && editingIndex == index) && enabled == 'blacklist'" name="fa-ban" color="negative" size="22px"/>
+                    <q-icon v-if="!(editing && editingIndex == index) && enabled == 'blacklist'" name="block" color="negative" size="22px"/>
                     <q-icon v-if="!(editing && editingIndex == index) && enabled == 'whitelist'" name="check" color="primary" size="22px"/>
                     <span class="blocked-number-title" v-if="!(editing && editingIndex == index)"
                           @click="editNumber(index)">{{ number }}</span>

src/components/pages/Home.vue

@@ -9,7 +9,7 @@
                 class="csc-call-page-content"
             >
                 <q-alert
-                    v-if="desktopSharingInstall"
+                    v-if="!isCallInitializing && desktopSharingInstall"
                     v-model="desktopSharingInstall"
                     color="warning"
                     :actions="desktopSharingAlertActions"
@@ -17,20 +17,30 @@
                     {{ $t('call.desktopSharingNotInstalled') }}
                 </q-alert>
                 <q-alert
+                    v-if="!isCallInitializing && !hasRtcEngineCapabilityEnabled"
                     class="csc-inline-alert"
                     appear
                     icon="info"
                     color="info"
-                    v-if="!hasRtcEngineCapabilityEnabled"
                     :actions="rtcEngineInfoActions"
                 >
                     {{ $t('call.rtcEngineNotEnabled') }}
                 </q-alert>
+                <div
+                    v-if="isCallInitializing"
+                    class="csc-main-spinner"
+                >
+                    <q-spinner-dots
+                        size="32px"
+                        color="primary"
+                    />
+                </div>
                 <csc-phone-number-input
+                    v-if="!isCallInitializing"
                     class="csc-call-phone-number"
                     :dark="false"
                     :value="callNumberInput"
-                    :enabled="hasRtcEngineCapabilityEnabled"
+                    :enabled="isCallInitialized"
                     @number-changed="numberInputChanged"
                 />
             </div>
@@ -49,7 +59,8 @@
     import CscPhoneNumberInput from "../call/CscPhoneNumberInput";
     import {
         QIcon,
-        QAlert
+        QAlert,
+        QSpinnerDots
     } from 'quasar-framework'
     export default {
         data() {
@@ -60,7 +71,8 @@
             CscPhoneNumberInput,
             CscPage,
             QIcon,
-            QAlert
+            QAlert,
+            QSpinnerDots
         },
         methods: {
             numberInputChanged(number) {
@@ -72,7 +84,9 @@
                 'callNumberInput',
                 'hasCallInitError',
                 'hasRtcEngineCapabilityEnabled',
-                'desktopSharingInstall'
+                'desktopSharingInstall',
+                'isCallInitialized',
+                'isCallInitializing'
             ]),
             rtcEngineInfoActions() {
                 return [];

src/store/call.js

@@ -11,6 +11,9 @@ import {
 import {
     startCase
 } from '../filters/string'
+import {
+    RequestState
+} from './common'
 
 export var CallState = {
     input: 'input',
@@ -27,12 +30,32 @@ export var MediaType = {
     audioScreen: 'audioScreen'
 };
 
+export const errorVisibilityTimeout = 5000;
+export const reinitializeTimeout = 5000;
+
+function handleUserMediaError(context, err) {
+    let errName = _.get(err, 'name', null);
+    let errMessage = _.get(err, 'message', null);
+    if(errName === 'UserMediaError' && errMessage === 'Permission denied') {
+        context.commit('endCall', 'userMediaPermissionDenied');
+    }
+    if(errMessage === 'plugin not detected') {
+        context.commit('desktopSharingInstall');
+        context.commit('hangUpCall');
+    }
+    else if(errMessage === 'PermissionDenied') {
+        context.commit('endCall', 'desktopSharingPermissionDenied');
+    }
+    else {
+        context.commit('endCall', errName);
+    }
+}
+
 export default {
     namespaced: true,
     state: {
-        initialized: false,
-        initError: null,
-        disabled: false,
+        initializationState: RequestState.initiated,
+        initializationError: null,
         endedReason: null,
         callState: CallState.input,
         number: '',
@@ -64,11 +87,18 @@ export default {
         isCallAvailable(state, getters) {
             return getters.isNetworkConnected;
         },
+        isCallInitializing(state, getters, rootState, rootGetters) {
+            return state.initializationState === RequestState.requesting ||
+                rootGetters['user/userDataRequesting'];
+        },
+        isCallInitialized(state) {
+            return state.initializationState === RequestState.succeeded
+        },
         hasCallInitError(state) {
-            return state.initError !== null && state.disabled === false;
+            return state.initializationError !== null;
         },
         callInitError(state) {
-            return state.initError;
+            return state.initializationError;
         },
         isPreparing(state) {
             return state.callState === CallState.input;
@@ -184,19 +214,18 @@ export default {
         }
     },
     mutations: {
-        numberInputChanged(state, numberInput) {
-            state.numberInput = numberInput;
+        initRequesting(state) {
+            state.initializationState = RequestState.requesting;
         },
         initSucceeded(state) {
-            state.initialized = true;
-            state.initError = null;
+            state.initializationState = RequestState.succeeded;
         },
-        initFailed(state, err) {
-            state.initialized = false;
-            state.initError = err;
+        initFailed(state, error) {
+            state.initializationState = RequestState.failed;
+            state.initializationError = error;
         },
-        disable(state) {
-            state.disabled = true;
+        numberInputChanged(state, numberInput) {
+            state.numberInput = numberInput;
         },
         inputNumber(state) {
             state.callState = CallState.input;
@@ -294,7 +323,8 @@ export default {
     },
     actions: {
         initialize(context) {
-            return new Promise((resolve, reject)=>{
+            if(!context.getters.isCallInitialized) {
+                context.commit('initRequesting');
                 Vue.call.onIncoming(()=>{
                     context.commit('incomingCall', {
                         number: Vue.call.getNumber()
@@ -304,21 +334,16 @@ export default {
                 }).onEnded(()=>{
                     Vue.call.end();
                     context.commit('endCall', Vue.call.getEndedReason());
+                    setTimeout(()=>{
+                        context.commit('inputNumber');
+                    }, errorVisibilityTimeout);
                 });
-                if(context.getters.hasRtcEngineCapabilityEnabled) {
-                    Vue.call.initialize().then(()=>{
-                        context.commit('initSucceeded');
-                        resolve();
-                    }).catch((err)=>{
-                        context.commit('initFailed', err);
-                        reject(err);
-                    });
-                }
-                else {
-                    context.commit('disable');
-                    resolve();
-                }
-            });
+                Vue.call.initialize().then(()=>{
+                    context.commit('initSucceeded');
+                }).catch((err)=>{
+                    context.commit('initFailed', err);
+                });
+            }
         },
         start(context, localMedia) {
             let number = context.getters.callNumberInput;
@@ -335,13 +360,10 @@ export default {
                 }).start(number, localMediaStream);
             }).catch((err)=>{
                 Vue.call.end();
-                if(err.message === 'plugin not detected') {
-                    context.commit('desktopSharingInstall');
-                    context.commit('hangUpCall');
-                }
-                else {
-                    context.commit('endCall', err.name);
-                }
+                handleUserMediaError(context, err);
+                setTimeout(()=>{
+                    context.commit('inputNumber');
+                }, errorVisibilityTimeout);
             });
         },
         accept(context, localMedia) {
@@ -351,13 +373,10 @@ export default {
                 context.commit('localMediaSuccess', localMediaStream);
             }).catch((err)=>{
                 Vue.call.end();
-                if(err.message === 'plugin not detected') {
-                    context.commit('desktopSharingInstall');
-                    context.commit('hangUpCall');
-                }
-                else {
-                    context.commit('endCall', err.name);
-                }
+                handleUserMediaError(context, err);
+                setTimeout(()=>{
+                    context.commit('inputNumber');
+                }, errorVisibilityTimeout);
             });
         },
         end(context) {

src/store/user.js

@@ -1,7 +1,10 @@
 'use strict';
 
 import _ from 'lodash';
-import { login, getUserData} from '../api/user';
+import {
+    login,
+    getUserData
+} from '../api/user';
 
 export default {
     namespaced: true,
@@ -69,11 +72,11 @@ export default {
         getSubscriberId(state) {
             return state.subscriberId;
         },
-        loginRequesting(state) {
-            return state.loginRequesting;
+        loginRequesting(state, getters) {
+            return state.loginRequesting || getters.userDataRequesting;
         },
-        loginSucceeded(state) {
-            return state.loginSucceeded;
+        loginSucceeded(state, getters) {
+            return state.loginSucceeded && getters.userDataSucceeded;
         },
         loginError(state) {
             return state.loginError;
@@ -163,6 +166,7 @@ export default {
                     jwt: localStorage.getItem('jwt'),
                     subscriberId: localStorage.getItem('subscriberId')
                 });
+                context.dispatch('initUser');
             }).catch((err)=>{
                 context.commit('loginFailed', err.message);
             });
@@ -188,7 +192,9 @@ export default {
                         context.dispatch('logout');
                     }, context.getters.jwtTTL * 1000);
                 }
-                context.dispatch('call/initialize', null, { root: true });
+                if(context.getters.hasRtcEngineCapabilityEnabled) {
+                    context.dispatch('call/initialize', null, { root: true });
+                }
             }).catch((err)=>{
                 context.commit('userDataFailed', err.message);
                 context.dispatch('logout');

src/themes/app.common.styl

@@ -1,6 +1,9 @@
 
 @import 'quasar.variables'
 
+.csc-main-spinner
+    text-align center
+
 .csc-inline-alert
     box-shadow none
     .q-alert