add call join button

src/lib/components/index.ts

@@ -22,6 +22,7 @@ export { default as PopupButton } from "$lib/components/ui/PopupButton.svelte"
 export { default as Modal } from "$lib/components/ui/Modal.svelte"
 export { default as Titlebar } from "$lib/components/ui/Titlebar.svelte"
 export { default as ContextMenu } from "$lib/components/ui/ContextMenu.svelte"
+export { default as MessageText } from "$lib/components/messaging/message/MessageText.svelte"
 export { default as Message } from "$lib/components/messaging/message/Message.svelte"
 export { default as MessageReactions } from "$lib/components/messaging/message/MessageReactions.svelte"
 export { default as MessageGroup } from "$lib/components/messaging/MessageGroup.svelte"

src/lib/components/messaging/message/MessageText.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+    import { Button, Icon, Text } from "$lib/elements"
+    import { Appearance, Shape, Size } from "$lib/enums"
+    import { VoiceRTCInstance } from "$lib/media/Voice"
+    import { MessageType } from "$lib/types"
+    import { getValidPaymentRequest } from "$lib/utils/Wallet"
+    import { _ } from "svelte-i18n"
+
+    export let chat: string
+    export let texts: string[]
+    export let remote: boolean
+    export let type: MessageType
+</script>
+
+{#each texts as line}
+    {#if getValidPaymentRequest(line) != undefined}
+        <Button text={getValidPaymentRequest(line)?.toDisplayString()} on:click={async () => getValidPaymentRequest(line)?.execute()}></Button>
+    {:else if type === MessageType.CDN}
+        <div class="sticker">
+            <Text hook="text-chat-message" markdown={line} size={Size.Smallest} appearance={remote ? Appearance.Default : Appearance.Alt} />
+        </div>
+    {:else if type === MessageType.CALL_START}
+        <Text hook="text-chat-message" markdown={line} appearance={remote ? Appearance.Default : Appearance.Alt} />
+        <div class="call-control">
+            <Button
+                tooltip={$_("settings.calling.join")}
+                icon
+                appearance={Appearance.Alt}
+                on:click={async () => {
+                    VoiceRTCInstance.startToMakeACall([], chat, true)
+                    VoiceRTCInstance.makeCall(false)
+                }}>
+                <Icon icon={Shape.PhoneCall} /></Button>
+            <Button
+                tooltip={$_("settings.calling.join")}
+                icon
+                appearance={Appearance.Alt}
+                on:click={async () => {
+                    VoiceRTCInstance.startToMakeACall([], chat, false)
+                    VoiceRTCInstance.makeCall(false)
+                }}>
+                <Icon icon={Shape.VideoCamera} /></Button>
+        </div>
+    {:else}
+        <Text hook="text-chat-message" markdown={line} appearance={remote ? Appearance.Default : Appearance.Alt} />
+    {/if}
+{/each}
+
+<style lang="scss">
+    .sticker {
+        width: var(--sticker-width-rendered);
+    }
+    .call-control {
+        display: flex;
+        gap: var(--gap);
+        justify-content: center;
+    }
+</style>

src/lib/lang/en.json

@@ -353,7 +353,8 @@
             "everybodyDeniedTheCall": "Everybody Denied the call. Disconnecting...",
             "acceptedCall": "Joined, loading...",
             "connecting": "Connecting...",
-            "noResponse": "No response"
+            "noResponse": "No response",
+            "join": "Join"
         },
         "notifications": {
             "name": "Notifications",

src/lib/media/Voice.ts

@@ -443,7 +443,7 @@ export class VoiceRTC {
      * Actually making the call
      */
     async makeCall(call: boolean = true) {
-        if (!this.toCall) {
+        if (!this.toCall && !call) {
             log.error("Calling not setup")
             return
         }
@@ -457,7 +457,10 @@ export class VoiceRTC {
             // Create a new call room
             this.createAndSetRoom()
             if (call) {
-                this.inviteToCall(this.toCall)
+                this.inviteToCall(this.toCall!)
+                const formattedEndTime = new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: false })
+                const text = get(_)("settings.calling.startCallMessage", { values: { value: formattedEndTime } })
+                await RaygunStoreInstance.send(this.channel!, text.split("\n"), [])
             }
             const timeoutWhenCallIsNull = setTimeout(() => {
                 if (this.call === null || this.call.empty) {

src/lib/mock/messages.ts

@@ -1,5 +1,5 @@
 import { Appearance, MessageAttachmentKind, Shape } from "$lib/enums"
-import type { MessageGroup } from "$lib/types"
+import { MessageType, type MessageGroup } from "$lib/types"
 import { mock_users } from "./users"
 
 import { v4 as uuidv4 } from "uuid"
@@ -37,6 +37,7 @@ export let mock_messages: MessageGroup[] = [
                 },
                 attachments: [],
                 pinned: false,
+                type: MessageType.DEFAULT,
             },
             {
                 id: uuidv4(),
@@ -63,6 +64,7 @@ export let mock_messages: MessageGroup[] = [
                     },
                 ],
                 pinned: false,
+                type: MessageType.DEFAULT,
             },
             {
                 id: uuidv4(),
@@ -83,6 +85,7 @@ export let mock_messages: MessageGroup[] = [
                     },
                 ],
                 pinned: false,
+                type: MessageType.DEFAULT,
             },
             {
                 id: uuidv4(),
@@ -96,6 +99,7 @@ export let mock_messages: MessageGroup[] = [
                 reactions: {},
                 attachments: [],
                 pinned: false,
+                type: MessageType.DEFAULT,
             },
             {
                 id: uuidv4(),
@@ -109,6 +113,7 @@ export let mock_messages: MessageGroup[] = [
                 reactions: {},
                 attachments: [],
                 pinned: false,
+                type: MessageType.DEFAULT,
             },
         ],
     },
@@ -151,6 +156,7 @@ export let mock_messages: MessageGroup[] = [
                     },
                 ],
                 pinned: true,
+                type: MessageType.DEFAULT,
             },
             {
                 id: uuidv4(),
@@ -171,6 +177,7 @@ export let mock_messages: MessageGroup[] = [
                     },
                 ],
                 pinned: false,
+                type: MessageType.DEFAULT,
             },
             {
                 id: uuidv4(),
@@ -191,6 +198,7 @@ export let mock_messages: MessageGroup[] = [
                     },
                 ],
                 pinned: false,
+                type: MessageType.DEFAULT,
             },
             {
                 id: uuidv4(),
@@ -204,6 +212,7 @@ export let mock_messages: MessageGroup[] = [
                 reactions: {},
                 attachments: [],
                 pinned: false,
+                type: MessageType.DEFAULT,
             },
         ],
     },
@@ -235,10 +244,12 @@ export let mock_messages: MessageGroup[] = [
                     reactions: {},
                     attachments: [],
                     pinned: false,
+                    type: MessageType.DEFAULT,
                 },
                 reactions: {},
                 attachments: [],
                 pinned: true,
+                type: MessageType.DEFAULT,
             },
         ],
     },

src/lib/types/index.ts

@@ -15,7 +15,9 @@ import {
     CommunitySettingsRoute,
 } from "$lib/enums"
 import type { Cancellable } from "$lib/utils/CancellablePromise"
-import type { Writable } from "svelte/store"
+import { tempCDN } from "$lib/utils/CommonVariables"
+import { get, type Writable } from "svelte/store"
+import { _ } from "svelte-i18n"
 
 export interface Serialize {
     serialize(): any
@@ -359,6 +361,28 @@ export type MessageDetails = {
     remote: boolean
 }
 
+export enum MessageType {
+    DEFAULT,
+    SYSTEM, // Until warp supports some built in system message method its client sided
+    CALL_START,
+    CDN,
+}
+
+export function messageTypeFromTexts(texts: string[]): MessageType {
+    if (texts.some(text => text.includes(tempCDN))) {
+        return MessageType.CDN
+    }
+    const endCallReg = new RegExp(get(_)("settings.calling.endCallMessage", { values: { formattedEndTime: "(.*)", duration: "(.*)" } }))
+    if (texts.some(text => text.includes("giphy.com")) || texts.some(text => text.includes(get(_)("settings.calling.callMissed"))) || texts.some(text => text.match(endCallReg))) {
+        return MessageType.SYSTEM
+    }
+    const startCallReg = new RegExp(get(_)("settings.calling.startCallMessage", { values: { value: "(.*)" } }))
+    if (texts.some(text => text.match(startCallReg))) {
+        return MessageType.CALL_START
+    }
+    return MessageType.DEFAULT
+}
+
 export type Message = {
     id: string
     details: MessageDetails
@@ -367,6 +391,7 @@ export type Message = {
     attachments: Attachment[]
     text: string[]
     pinned: boolean
+    type: MessageType
 }
 
 export function mentions_user(message: Message, user: string): boolean {

src/lib/wasm/RaygunStore.ts

@@ -6,7 +6,7 @@ import { UIStore } from "../state/ui"
 import { ConversationStore } from "../state/conversation"
 import { MessageOptions } from "warp-wasm"
 import { ChatType, MessageAttachmentKind, Route } from "$lib/enums"
-import { type User, type Chat, defaultChat, type Message, mentions_user, type Attachment } from "$lib/types"
+import { type User, type Chat, defaultChat, type Message, mentions_user, type Attachment, messageTypeFromTexts } from "$lib/types"
 import { WarpError, handleErrors } from "./HandleWarpErrors"
 import { failure, success, type Result } from "$lib/utils/Result"
 import { create_cancellable_handler, type Cancellable } from "$lib/utils/CancellablePromise"
@@ -769,6 +769,7 @@ class RaygunStore {
             reactions: message.reactions(),
             attachments: attachments.map(f => this.convertWarpAttachment(f)),
             pinned: message.pinned(),
+            type: messageTypeFromTexts(message.lines()),
         }
     }