feat(refactor): pre-launch cleanup, offline sync, reactivity & observable bugfixes, emitter & pubsub bugfixes

components/interactables/UserPicker/UserPicker.vue

@@ -20,11 +20,11 @@ export default Vue.extend({
   data: () => ({
     selected: [] as Friend[],
     filter: '',
-    friendDids: iridium.friends.state.friends,
+    fm: iridium.friends.state,
   }),
   computed: {
     friends() {
-      return Object.values(this.friendDids)
+      return Object.values(this.fm.friends)
         .filter((did) => !this.exclude.includes(did))
         .map((did) => {
           return iridium.users.getUser(did)

components/ui/BackgroundCall/BackgroundCall.vue

@@ -3,46 +3,27 @@
 <script lang="ts">
 import Vue from 'vue'
 import iridium from '~/libraries/Iridium/IridiumManager'
-import { useCallElapsedTime, useWebRTC } from '~/libraries/Iridium/webrtc/hooks'
 
 export default Vue.extend({
-  setup() {
-    const { remoteParticipants } = useWebRTC()
-    const { elapsedTime, startInterval, clearTimer } = useCallElapsedTime()
-
-    const remoteParticipant = computed(() => {
-      return remoteParticipants.value.length > 0
-        ? remoteParticipants.value[0]
-        : null
-    })
-
-    return {
-      remoteParticipant,
-      elapsedTime,
-      startInterval,
-      clearTimer,
-    }
-  },
   data() {
     return {
       webrtc: iridium.webRTC.state,
+      callTime: iridium.webRTC.callTime,
     }
   },
-  watch: {
-    'webrtc.createdAt': {
-      handler() {
-        this.startInterval()
-      },
-      immediate: true,
-    },
-  },
-  beforeDestroy() {
-    this.clearTimer()
-  },
   methods: {
     navigateToActiveConversation() {
+      if (!this.webrtc.activeCall) {
+        return
+      }
+
+      if (this.$device.isMobile) {
+        // mobile, show slide 1 which is chat slide, set showSidebar flag false as css related
+        this.$store.commit('ui/showSidebar', false)
+      }
+
       const id = iridium.chat?.directConversationIdFromDid(
-        this.remoteParticipant.did,
+        this.webrtc.activeCall.did,
       )
       if (
         !id ||

components/ui/Chat/TypingIndicator/TypingIndicator.vue

@@ -6,18 +6,26 @@ import iridium from '~/libraries/Iridium/IridiumManager'
 import { User } from '~/libraries/Iridium/users/types'
 
 export default Vue.extend({
+  data() {
+    return {
+      chat: iridium.chat.state,
+      typing: iridium.chat.ephemeral.typing,
+    }
+  },
   computed: {
     typingParticipants(): User[] {
       const conversationId = this.$route.params.id
       if (!conversationId) {
         return []
       }
+      const conversation = this.chat.conversations[conversationId]
+      if (!conversation) {
+        return []
+      }
+      const conversationTyping = this.typing[conversationId] || []
 
-      const convTypingStatus = iridium.chat.typingStatus[conversationId] || {}
-
-      return Object.keys(convTypingStatus)
-        .filter((k) => convTypingStatus?.[k])
-        .map((did) => iridium.users.getUser(did))
+      return conversationTyping
+        .map((did: string) => iridium.users.getUser(did))
         .filter(Boolean)
     },
     text(): string {

components/ui/Global/Global.html

@@ -27,8 +27,8 @@
         :set-close-timeout="5000"
       />
     </UiModal> -->
-    <UiModal v-if="webrtc.incomingCall">
-      <MediaIncomingCall />
+    <UiModal v-if="incomingCall">
+      <MediaIncomingCall :accept-call="acceptCall" :deny-call="denyCall" />
     </UiModal>
     <UiModal
       v-if="ui.modals.marketplace"

components/ui/Global/Global.vue

@@ -4,16 +4,15 @@ import Vue from 'vue'
 import { mapState } from 'vuex'
 import { ModalWindows } from '~/store/ui/types'
 import iridium from '~/libraries/Iridium/IridiumManager'
-import { useWebRTC } from '~/libraries/Iridium/webrtc/hooks'
-import { PropCommonEnum } from '~/libraries/Enums/enums'
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    toggleModal: (modalName: string) => void
+  }
+}
 
 export default Vue.extend({
   name: 'Global',
-  setup() {
-    const { isActiveCall, isBackgroundCall } = useWebRTC()
-
-    return { isActiveCall, isBackgroundCall }
-  },
   data() {
     return {
       webrtc: iridium.webRTC.state,
@@ -22,6 +21,21 @@ export default Vue.extend({
   computed: {
     ...mapState(['ui', 'media', 'conversation', 'files', 'settings']),
     ModalWindows: () => ModalWindows,
+    incomingCall() {
+      console.info('incomingCall', this.webrtc.incomingCall)
+      return this.webrtc.incomingCall
+    },
+    isBackgroundCall(): boolean {
+      return iridium.webRTC.isBackgroundCall(this.$route.params.id)
+    },
+    isActiveCall(): boolean {
+      return iridium.webRTC.isActiveCall(this.$route.params.id)
+    },
+    showBackgroundCall(): boolean {
+      if (!this.$device.isMobile) {
+        return this.isBackgroundCall
+      }
+      return this.isBackgroundCall || (this.isActiveCall && this.ui.showSidebar)
   },
   watch: {
     'settings.audioInput'(audioInput: string) {

components/ui/User/State/State.vue

@@ -43,24 +43,54 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { PropType, Ref } from 'vue'
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+import { SmartphoneIcon } from 'satellite-lucide-icons'
+import iridium from '~/libraries/Iridium/IridiumManager'
 import { User } from '~/libraries/Iridium/friends/types'
 import iridium from '~/libraries/Iridium/IridiumManager'
 import { UserStatus } from '~/libraries/Iridium/users/types'
 import { Config } from '~/config'
 
-const props = defineProps({
-  user: { type: Object as PropType<User>, required: true },
-  isTyping: {
-    type: Boolean,
-    default: false,
-    required: false,
+export default Vue.extend({
+  components: {
+    SmartphoneIcon,
+  },
+  props: {
+    userId: {
+      type: String as PropType<User['did']>,
+      required: true,
+    },
+    size: {
+      type: Number,
+      default: 36,
+    },
+  },
+  data() {
+    const conversationId = iridium.chat.directConversationIdFromDid(this.userId)
+    return {
+      users: iridium.users.state,
+      conversationId,
+      isTyping: conversationId
+        ? iridium.chat.ephemeral.typing[conversationId]
+        : false,
+    }
   },
-  size: {
-    type: Number,
-    default: 36,
-    required: false,
+  computed: {
+    user() {
+      return (
+        this.users?.[this.userId] || {
+          did: this.userId,
+          name: this.userId,
+          status: 'offline',
+        }
+      )
+    },
+    imageSource(): string {
+      return this.user?.photoHash
+        ? this.$Config.ipfs.gateway + this.user.photoHash
+        : ''
+    },
   },
 })
 

components/views/chat/chatbar/Chatbar.vue

@@ -114,7 +114,7 @@ const Chatbar = Vue.extend({
       )
     },
     isSubscribed(): boolean {
-      return iridium.chat.subscriptions[this.$route.params.id]?.connected
+      return iridium.chat.ready
     },
     text: {
       /**

components/views/chat/chatbar/footer/Footer.vue

@@ -17,21 +17,22 @@ export default Vue.extend({
       required: true,
     },
   },
+  data() {
+    return {
+      typing: iridium.chat.ephemeral.typing,
+    }
+  },
   computed: {
     ...mapState({
       ui: (state) => (state as RootState).ui,
     }),
     areTyping(): boolean {
       const conversationId = this.$route.params.id
       if (!conversationId) {
-        return false
+        return []
       }
-
-      const convTypingStatus = iridium.chat.typingStatus[conversationId] || {}
-
-      return !!Object.keys(convTypingStatus).filter(
-        (k) => convTypingStatus?.[k],
-      ).length
+      const typing = this.$data.typing[conversationId] || []
+      return typing
     },
     lengthCount() {
       return `${this.ui.chatbarContent.length}/${this.$Config.chat.maxChars}`

components/views/chat/conversation/Conversation.vue

@@ -3,7 +3,10 @@
 import Vue from 'vue'
 import { ChevronDownIcon } from 'satellite-lucide-icons'
 import iridium from '~/libraries/Iridium/IridiumManager'
-import { ConversationMessage } from '~/libraries/Iridium/chat/types'
+import {
+  Conversation,
+  ConversationMessage,
+} from '~/libraries/Iridium/chat/types'
 import { conversationMessageIsNotice } from '~/utilities/chat'
 
 interface ChatItem {
@@ -23,16 +26,19 @@ export default Vue.extend({
   },
   data() {
     return {
-      conversation:
-        iridium.chat.state.conversations?.[this.$route.params.id] ?? {},
+      chat: iridium.chat.state,
       numMessages: MESSAGE_PAGE_SIZE,
       isLoadingMore: false,
+      isBlurred: false,
     }
   },
   computed: {
     myDid(): string {
       return iridium.connector?.id ?? ''
     },
+    conversation(): Conversation {
+      return this.chat.conversations?.[this.$route.params.id] ?? {}
+    },
     messages(): ConversationMessage[] {
       if (!Object.keys(this.conversation).length) {
         return []
@@ -42,7 +48,8 @@ export default Vue.extend({
       )
     },
     chatItems(): ChatItem[] {
-      return this.messages
+      let maxTime = 0
+      const messages = this.messages
         .filter((message) => !message.replyToId)
         .slice(-this.numMessages)
         .map((message, index) => {
@@ -61,6 +68,7 @@ export default Vue.extend({
           const replies = this.messages.filter(
             (replyMessage) => replyMessage.replyToId === message.id,
           )
+          maxTime = Math.max(maxTime, message.at)
           const showHeader =
             !isSameAuthor ||
             (prevMessage && conversationMessageIsNotice(prevMessage)) ||
@@ -75,6 +83,10 @@ export default Vue.extend({
             replies,
           }
         })
+      if (maxTime > this.conversation.lastReadAt && !this.isBlurred) {
+        iridium.chat.updateConversationReadAt(this.conversation.id, maxTime)
+      }
+      return messages
     },
     noMore(): boolean {
       return (
@@ -83,6 +95,14 @@ export default Vue.extend({
       )
     },
   },
+  async mounted() {
+    window.addEventListener('blur', async () => {
+      this.isBlurred = true
+    })
+    window.addEventListener('focus', async () => {
+      this.isBlurred = false
+    })
+  },
   methods: {
     loadMore() {
       // TODO: we'll want to instead call iridium in this method once paginated

components/views/chat/message/Message.vue

@@ -62,7 +62,13 @@ export default Vue.extend({
       return this.$route.params.id
     },
     author(): User {
-      return iridium.users.getUser(this.message.from)
+      return this.message.from === iridium.connector?.id
+        ? (iridium.profile.state as User)
+        : iridium.users.getUser(this.message.from) || {
+            did: this.message.from,
+            name: this.message.from,
+            photoHash: '',
+          }
     },
     avatarSrc(): string | undefined {
       return (

components/views/chat/message/actions/Actions.vue

@@ -57,6 +57,7 @@ export default Vue.extend({
     return {
       hasMoreSettings: false,
       featureReadyToShow: false,
+      chat: iridium.chat.state,
     }
   },
   computed: {
@@ -71,7 +72,7 @@ export default Vue.extend({
       if (!this.conversationId) {
         return undefined
       }
-      return iridium.chat.state.conversations[this.conversationId]
+      return this.chat.conversations[this.conversationId]
     },
     isGroup(): boolean {
       return this.conversation?.type === 'group'

components/views/friends/friend/Friend.html

@@ -9,6 +9,7 @@
     >
       {{ user.name || user.did }}
     </TypographyText>
+    <TypographyText v-if="isPreview" size="sm">{{ user.did }}</TypographyText>
     <TypographyText v-if="user.status" size="sm">
       {{ user.status }}
     </TypographyText>