TT#33307 Call: As a Customer I want to see the desktop sharing button only if device has the capability

Change-Id: I713cad9d0b90ce49d4654aad869ed4c7a824c1ba

src/components/CscCall.vue

@@ -59,12 +59,12 @@
                 <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" />
-                <q-btn v-if="isPreparing" round :small="!isFullscreenEnabled" color="primary" @click="call('audioScreen')" icon="computer" />
+                <q-btn v-if="isPreparing && !isMobile" round :small="!isFullscreenEnabled" color="primary" @click="call('audioScreen')" icon="computer" />
                 <q-btn v-if="isCalling" round :small="!isFullscreenEnabled" color="negative" @click="hangUp()" icon="call end" />
                 <q-btn v-if="isEnded" round :small="!isFullscreenEnabled" color="negative" @click="init()" icon="clear"/>
                 <q-btn v-if="isIncoming" round :small="!isFullscreenEnabled" color="primary" @click="accept('audioOnly')" icon="mic" />
                 <q-btn v-if="isIncoming" round :small="!isFullscreenEnabled" color="primary" @click="accept('audioVideo')" icon="videocam" />
-                <q-btn v-if="isIncoming" round :small="!isFullscreenEnabled" color="primary" @click="accept('audioScreen')" icon="computer" />
+                <q-btn v-if="isIncoming && !isMobile" round :small="!isFullscreenEnabled" color="primary" @click="accept('audioScreen')" icon="computer" />
                 <q-btn v-if="isIncoming" round :small="!isFullscreenEnabled" color="negative" @click="decline()" icon="call end" />
             </q-card-actions>
         </q-card>

src/components/pages/Home.vue

@@ -32,9 +32,9 @@
                 </div>
             </div>
             <div class="col-lg-4 col-md-6 col-sm-6 col-xs-6">
-                <div @click="call()">
+                <div @click="screenShare()">
-                    <q-card :class="{ 'home-card-inactive': !isCallAvailable,
+                    <q-card :class="{ 'home-card-inactive': !isCallAvailable || isMobile,
-                        'home-card-active': isCallAvailable }"
+                        'home-card-active': isCallAvailable && !isMobile }"
                         class="no-margin"
                         flat>
                         <q-card-main align="center">
@@ -100,7 +100,7 @@
     import CscPage from '../CscPage'
     import CscCall from '../CscCall'
     import { mapGetters } from 'vuex'
-    import { QCard, QCardMain, QCardActions, QIcon } from 'quasar-framework'
+    import { QCard, QCardMain, QCardActions, QIcon, Platform } from 'quasar-framework'
     import { showGlobalWarning } from '../../helpers/ui'
 
     export default {
@@ -119,7 +119,10 @@
         computed: {
             ...mapGetters('call', [
                 'isCallAvailable'
-            ])
+            ]),
+            isMobile() {
+                return Platform.is.mobile;
+            }
         },
         methods: {
             call() {
@@ -129,6 +132,13 @@
                     showGlobalWarning(this.$i18n.t('pages.home.featureNotAvailable'));
                 }
             },
+            screenShare() {
+                if(this.isCallAvailable && !this.isMobile) {
+                    this.$store.commit('layout/showRight');
+                } else {
+                    showGlobalWarning(this.$i18n.t('pages.home.featureNotAvailable'));
+                }
+            },
             buddyList() {
                 showGlobalWarning(this.$i18n.t('pages.home.featureNotAvailable'));
             }