TT#33129 Call: Changed icons in call dialog

- Add hash to app, manifest and vendor file to avoid cache issues

Change-Id: Ia6d31b9bc65a6450773c781a8e2bbef8ed1ee538

build/webpack.base.conf.js

@@ -22,7 +22,7 @@ module.exports = {
   output: {
     path: path.resolve(__dirname, '../dist'),
     publicPath: config[env.prod ? 'build' : 'dev'].publicPath,
-    filename: 'js/[name].js',
+    filename: 'js/[name].[hash].js',
     chunkFilename: 'js/[id].[chunkhash].js'
   },
   resolve: {

src/components/CscCall.vue

@@ -3,9 +3,14 @@
         <audio ref="incomingSound" loop preload="auto" src="statics/ring.mp3"></audio>
         <q-card flat color="secondary">
             <q-card-title>
+
                 <span v-if="isRinging || isInitiating || isIncoming">
                     <q-spinner-rings color="primary" :size="50" />
                 </span>
+
+                <q-icon v-if="isPreparing" name="call" color="primary" size="26px"/>
+                <q-icon v-if="isEstablished && isCaller" name="call made" color="primary" size="26px"/>
+                <q-icon v-if="isEstablished && isCallee" name="call received" color="primary" size="26px"/>
                 <q-icon v-if="isEnded" name="error" color="primary" size="26px"/>
 
                 <span v-if="isPreparing" class="text">{{ $t('call.startNew') }}</span>
@@ -31,8 +36,10 @@
                                  dark clearable max="64" @blur="phoneNumberBlur()" @focus="phoneNumberFocus()"/>
                     </q-field>
                     <div v-if="!isPreparing" class="phone-number">
-                        <q-icon v-if="isCalling && getMediaType == 'audioOnly'" name="mic" color="primary" size="26px"/>
-                        <q-icon v-else-if="isCalling && getMediaType == 'audioVideo'" name="videocam" color="primary" size="26px"/>
+                        <q-icon v-if="isCalling && (localMediaType == 'audioVideo' || remoteMediaType == 'audioVideo')"
+                                name="videocam" color="primary" size="26px"/>
+                        <q-icon v-else-if="isCalling && (localMediaType == 'audioOnly' || remoteMediaType == 'audioVideo')"
+                                name="mic" color="primary" size="26px"/>
                         {{ getNumber | numberFormat }}
                     </div>
                     <div v-if="isEnded" class="ended-reason">{{ getEndedReason }}</div>
@@ -48,7 +55,7 @@
             </q-card-main>
             <q-card-actions align="center">
                 <q-btn v-if="isEstablished" round :small="!isFullscreenEnabled" color="primary" @click="toggleAudio()" :icon="toggleAudioIcon" />
-                <q-btn v-if="isEstablished" round :small="!isFullscreenEnabled" color="primary" @click="toggleVideo()" :icon="toggleVideoIcon" />
+                <q-btn v-if="isEstablished && localMediaType == 'audioVideo'" round :small="!isFullscreenEnabled" color="primary" @click="toggleVideo()" :icon="toggleVideoIcon" />
                 <q-btn v-if="isEstablished" round :small="!isFullscreenEnabled" color="primary" @click="toggleMute()" :icon="toggleMuteIcon" />
                 <q-btn v-if="isPreparing" round :small="!isFullscreenEnabled" color="primary" @click="call('audioOnly')" icon="mic" />
                 <q-btn v-if="isPreparing" round :small="!isFullscreenEnabled" color="primary" @click="call('audioVideo')" icon="videocam" />
@@ -262,18 +269,17 @@
                 'isIncoming',
                 'isEstablished',
                 'getNumber',
-                'getMediaType',
-                'getLocalMediaType',
                 'getEndedReason',
                 'hasRemoteVideo',
                 'hasVideo',
                 'isAudioEnabled',
                 'isVideoEnabled',
-                'isMuted'
+                'isMuted',
+                'localMediaType',
+                'remoteMediaType',
+                'isCaller',
+                'isCallee'
             ]),
-            hasLocalVideo() {
-                return this.getLocalMediaType !== null && this.getLocalMediaType.match(/(v|V)ideo/) !== null;
-            },
             isMobile() {
                 return Platform.is.mobile;
             }

src/filters/number-format.js

@@ -14,7 +14,7 @@ export default function numberFormat(number) {
         if(normalizedNumber !== extractedNumber) {
             return normalizedNumber;
         } else {
-            return number;
+            return extractedNumber;
         }
     } catch(err) {
         return normalizeNumber(number);

src/store/call.js

@@ -12,7 +12,7 @@ export var CallState = {
 };
 
 export var MediaType = {
-    audio: 'audio',
+    audioOnly: 'audioOnly',
     audioVideo: 'audioVideo',
     audioScreen: 'audioScreen'
 };
@@ -26,23 +26,35 @@ export default {
         endedReason: null,
         callState: CallState.input,
         number: null,
-        mediaType: null,
-        localMediaType: null,
         localMediaStream: null,
         remoteMediaStream: null,
         audioEnabled: true,
         videoEnabled: true,
-        muted: false
+        muted: false,
+        caller: false,
+        callee: false
     },
     getters: {
         getNumber(state, getters) {
             return state.number;
         },
-        getMediaType(state, getters) {
-            return state.mediaType;
+        localMediaType(state) {
+            if(state.localMediaStream !== null && state.localMediaStream.hasAudio() && state.localMediaStream.hasVideo()) {
+                return MediaType.audioVideo;
+            } else if (state.localMediaStream !== null && state.localMediaStream.hasAudio()) {
+                return MediaType.audioOnly;
+            } else {
+                return null;
+            }
         },
-        getLocalMediaType(state, getters) {
-            return state.localMediaType
+        remoteMediaType(state) {
+            if(state.remoteMediaStream !== null && state.remoteMediaStream.hasAudio() && state.remoteMediaStream.hasVideo()) {
+                return MediaType.audioVideo;
+            } else if (state.remoteMediaStream !== null && state.remoteMediaStream.hasAudio()) {
+                return MediaType.audioOnly;
+            } else {
+                return null;
+            }
         },
         getEndedReason(state, getters) {
             return state.endedReason;
@@ -106,6 +118,12 @@ export default {
         },
         isMuted(state, getters) {
             return state.muted;
+        },
+        isCaller(state) {
+            return state.caller;
+        },
+        isCallee(state) {
+            return state.callee;
         }
     },
     mutations: {
@@ -125,9 +143,9 @@ export default {
         },
         startCalling(state, options) {
             state.number = options.number;
-            state.mediaType = options.mediaType;
-            state.localMediaType = state.mediaType;
             state.callState = CallState.initiating;
+            state.caller = true;
+            state.callee = false;
         },
         localMediaSuccess(state, localMediaStream) {
             state.localMediaStream = localMediaStream;
@@ -138,11 +156,15 @@ export default {
         establishCall(state, remoteMediaStream) {
             state.remoteMediaStream = remoteMediaStream;
             state.callState = CallState.established;
+            state.audioEnabled = true;
+            state.videoEnabled = true;
+            state.muted = false;
         },
         incomingCall(state, options) {
             state.callState = CallState.incoming;
             state.number = options.number;
-            state.mediaType = options.mediaType;
+            state.callee = true;
+            state.caller = false;
         },
         hangUpCall(state) {
             state.callState = CallState.input;
@@ -190,17 +212,9 @@ export default {
         initialize(context) {
             return new Promise((resolve, reject)=>{
                 Vue.call.onIncoming(()=>{
-                    let mediaType;
-                    if(Vue.call.isRemoteSendingAudio()) {
-                        mediaType = MediaType.audio;
-                    }
-                    if(Vue.call.isRemoteSendingVideo()) {
-                        mediaType = MediaType.audioVideo;
-                    }
                     context.commit('layout/showRight', null, { root: true });
                     context.commit('incomingCall', {
-                        number: Vue.call.getNumber(),
-                        mediaType: mediaType
+                        number: Vue.call.getNumber()
                     });
                 }).onRemoteMedia((remoteMediaStream)=>{
                     context.commit('establishCall', remoteMediaStream);
@@ -226,9 +240,7 @@ export default {
         },
         start(context, options) {
             context.commit('layout/showRight', null, { root: true });
-            context.commit('startCalling', {
-                number: options.number,
-                mediaType: options.localMedia });
+            context.commit('startCalling', { number: options.number });
             Promise.resolve().then(()=>{
                 return Vue.call.createLocalMedia(options.localMedia);
             }).then((localMediaStream)=>{

t/unit/number-format.js

@@ -53,7 +53,7 @@ describe('NumberFormatFilter', function() {
 
     it('should format a number or sip uri', function(){
         assert.equal(numberFormat(sipUris.valid1), numbers.valid1);
-        assert.equal(numberFormat(sipUris.invalid1), sipUris.invalid1);
+        assert.equal(numberFormat(sipUris.invalid1), numbers.invalid3);
     });
 
     it('should format a call forward destination', function(){