fix(call): show avatar in incoming call

Satellite-im · Jun 9, 2022 · 3a11d04 · 3a11d04
1 parent e342716
commit 3a11d04
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 31 deletions.
diff --git a/components/views/media/incomingCall/IncomingCall.html b/components/views/media/incomingCall/IncomingCall.html
@@ -1,25 +1,18 @@
 <div>
   <div class="content">
     <div class="gradient-cover" data-cy="incoming-call"></div>
-    <div v-if="callType === 'friend' && friend" class="caller--user">
+    <div
+      class="caller"
+      :class="callType === 'friend' ? 'caller--user' : 'caller--group'"
+    >
       <div
         class="user-profile-picture"
-        v-bind:style="`background:url(${friend.profilePicture})`"
+        v-bind:style="`background:url(${callerAvatar})`"
       />
       <div class="user-info">
-        <p class="user-name">{{friend.name}}</p>
-        <p class="user-status">{{friend.status}}</p>
-      </div>
-    </div>
-    <div v-else-if="callType === 'group' && group" class="caller--group">
-      <div class="user-info">
-        <p class="user-name">{{group.name}}</p>
-        <p class="user-status">{{group.status}}</p>
+        <p class="user-name">{{caller.name}}</p>
+        <p class="user-status">{{caller.status}}</p>
       </div>
-      <div
-        class="user-profile-picture"
-        v-bind:style="`background:url(${group.profilePicture})`"
-      />
     </div>
   </div>
   <footer class="modal-card-foot">

diff --git a/components/views/media/incomingCall/IncomingCall.less b/components/views/media/incomingCall/IncomingCall.less
@@ -7,6 +7,10 @@
   height: 400px;
 }
 
+.caller {
+  height: 100%;
+}
+
 .user-profile-picture {
   background-size: cover !important;
   background-position: center !important;

diff --git a/components/views/media/incomingCall/IncomingCall.vue b/components/views/media/incomingCall/IncomingCall.vue
@@ -35,23 +35,6 @@ export default Vue.extend({
   },
   computed: {
     ...mapState(['conversation', 'groups', 'friends']),
-    group() {
-      return (
-        this.callType === 'group' &&
-        this.$store.state.groups.all.find(
-          (g: any) => g.id === this.$store.state.webrtc.incomingCall?.callId,
-        )
-      )
-    },
-    friend() {
-      return (
-        this.callType === 'friend' &&
-        this.$store.state.friends.all.find(
-          (f: any) =>
-            f.peerId === this.$store.state.webrtc.incomingCall?.callId,
-        )
-      )
-    },
     callType() {
       return this.$store.state.webrtc.incomingCall?.callId &&
         RegExp(this.$Config.regex.uuidv4).test(
@@ -60,6 +43,24 @@ export default Vue.extend({
         ? 'group'
         : 'friend'
     },
+    caller() {
+      if (!this.callType) {
+        return
+      }
+      if (this.callType === 'friend') {
+        return this.$store.state.friends.all.find(
+          (f: any) =>
+            f.peerId === this.$store.state.webrtc.incomingCall?.callId,
+        )
+      }
+      return this.$store.state.groups.all.find(
+        (g: any) => g.id === this.$store.state.webrtc.incomingCall?.callId,
+      )
+    },
+    callerAvatar(): string {
+      const hash = this.caller?.profilePicture
+      return hash ? `${this.$Config.textile.browser}/ipfs/${hash}` : ''
+    },
   },
   watch: {
     '$store.state.webrtc.incomingCall': {