Warp/apps/web/src/views/RoomView.vue

<script setup lang="ts">
import { KnownMembership } from 'matrix-js-sdk'
import { computed, onBeforeUnmount, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { WBanner, WButton, WComposer, WIcon, WIconButton, WSpinner } from '@warp/ui'
import MxcAvatar from '@/components/MxcAvatar.vue'
import RoomInfoPane from '@/components/RoomInfoPane.vue'
import RoomTimeline from '@/components/RoomTimeline.vue'
import { drafts } from '@/lib/drafts'
import { errorMessage, formatBytes } from '@/lib/format'
import { client, cryptoError } from '@/matrix/client'
import { sendFile, sendText } from '@/matrix/send'
import { useChat } from '@/stores/chat'
import { useToasts } from '@/stores/toasts'

const props = defineProps<{ roomId: string }>()

const chat = useChat()
const toasts = useToasts()
const router = useRouter()
const me = client().getUserId() ?? ''

const room = computed(() => {
  void chat.version
  return client().getRoom(props.roomId)
})
const membership = computed(() => {
  void chat.version
  return room.value?.getMyMembership()
})
const summary = computed(() => chat.rooms.find((r) => r.roomId === props.roomId))
const invite = computed(() => chat.invites.find((r) => r.roomId === props.roomId))
const topic = computed(() => {
  void chat.version
  return String(room.value?.currentState.getStateEvents('m.room.topic', '')?.getContent().topic ?? '')
})
const encrypted = computed(() => summary.value?.encrypted ?? false)
// An encrypted room can't be written to without the crypto stack.
const cryptoMissing = computed(() => encrypted.value && !chat.canEncrypt)
const memberCount = computed(() => {
  void chat.version
  return room.value?.getJoinedMemberCount() ?? 0
})
const canSend = computed(() => {
  void chat.version
  const r = room.value
  return r ? r.currentState.maySendMessage(me) : false
})

const infoOpen = ref(false)

const text = ref(drafts.get(props.roomId) ?? '')
watch(text, (v) => (v ? drafts.set(props.roomId, v) : drafts.delete(props.roomId)))

// Typing notifications: on while there is text, renewed every few seconds,
// off when it's sent or cleared.
let typingUntil = 0
function setTyping(on: boolean) {
  const now = Date.now()
  if (on && now < typingUntil) return
  if (!on && typingUntil === 0) return
  typingUntil = on ? now + 4000 : 0
  client()
    .sendTyping(props.roomId, on, on ? 6000 : 0)
    .catch(() => undefined)
}
watch(text, (v) => setTyping(Boolean(v.trim())))
onBeforeUnmount(() => setTyping(false))

const typingNames = computed(() => {
  void chat.version
  return (room.value?.getMembers() ?? []).filter((m) => m.typing && m.userId !== me).map((m) => m.name)
})
const typingText = computed(() => {
  const n = typingNames.value
  if (!n.length) return ''
  if (n.length === 1) return `${n[0]} is typing…`
  if (n.length === 2) return `${n[0]} and ${n[1]} are typing…`
  return `${n.length} people are typing…`
})

function send(body: string) {
  setTyping(false)
  sendText(client(), props.roomId, body).catch((e) => {
    // A failed send stays in the timeline with Retry; say why once.
    toasts.error(errorMessage(e))
  })
}

// Uploads.
const uploads = ref<{ id: number; name: string; loaded: number; total: number }[]>([])
let uploadId = 0
let maxUpload: number | null | undefined

async function sendFiles(list: FileList | File[]) {
  // Copied first: the composer clears its file input (and so the live
  // FileList) as soon as it has handed the files over.
  const files = Array.from(list)
  const r = room.value
  if (!r) return
  if (maxUpload === undefined) {
    maxUpload = await client()
      .getMediaConfig(true)
      .then((c) => c['m.upload.size'] ?? null)
      .catch(() => null)
  }
  for (const file of Array.from(files)) {
    if (maxUpload && file.size > maxUpload) {
      toasts.error(`${file.name} is ${formatBytes(file.size)}; this homeserver takes files up to ${formatBytes(maxUpload)}.`)
      continue
    }
    const id = ++uploadId
    uploads.value.push({ id, name: file.name, loaded: 0, total: file.size })
    sendFile(client(), r, file, (p) => {
      const u = uploads.value.find((x) => x.id === id)
      if (u) Object.assign(u, { loaded: p.loaded, total: p.total })
    })
      .catch((e) => toasts.error(`Can’t send ${file.name}: ${errorMessage(e)}`))
      .finally(() => (uploads.value = uploads.value.filter((x) => x.id !== id)))
  }
}

function onPaste(e: ClipboardEvent) {
  const files = e.clipboardData?.files
  if (files && files.length) {
    e.preventDefault()
    sendFiles(files)
  }
}

const dragging = ref(false)
function onDrop(e: DragEvent) {
  dragging.value = false
  const files = e.dataTransfer?.files
  if (files && files.length && canSend.value && !cryptoMissing.value) sendFiles(files)
}

// Invites and rooms you're not in.
const joining = ref(false)
const joinError = ref('')
async function accept() {
  joining.value = true
  joinError.value = ''
  try {
    await chat.acceptInvite(props.roomId)
  } catch (e) {
    joinError.value = errorMessage(e)
  } finally {
    joining.value = false
  }
}
async function decline() {
  joining.value = true
  try {
    await chat.leave(props.roomId)
    router.replace('/')
  } catch (e) {
    joinError.value = errorMessage(e)
  } finally {
    joining.value = false
  }
}
async function joinHere() {
  joining.value = true
  joinError.value = ''
  try {
    await chat.join(props.roomId)
  } catch (e) {
    joinError.value = errorMessage(e)
  } finally {
    joining.value = false
  }
}

const placeholder = computed(() => `Message ${summary.value?.name ?? 'this room'}`)
</script>

<template>
  <!-- Invited -->
  <div v-if="membership === KnownMembership.Invite && invite" class="flex flex-1 items-center justify-center px-4">
    <div class="wp-card flex w-full max-w-[420px] flex-col items-center gap-4 p-6 text-center shadow-raised">
      <MxcAvatar :name="invite.name" :mxc="invite.avatarMxc" :size="64" />
      <div>
        <h1 class="heading m-0">{{ invite.name }}</h1>
        <p class="body mt-1 text-ink-muted">
          <template v-if="invite.inviter">
            <span class="body-strong text-ink">{{ invite.inviterName }}</span>
            <span v-if="invite.inviterName !== invite.inviter" class="mxid"> ({{ invite.inviter }})</span>
            invited you {{ invite.isDirect ? 'to chat' : 'to this room' }}.
          </template>
          <template v-else>You’re invited to this room.</template>
        </p>
      </div>
      <WBanner v-if="joinError" tone="danger" class="w-full text-left">{{ joinError }}</WBanner>
      <div class="flex gap-2">
        <WButton :disabled="joining" @click="decline">Decline</WButton>
        <WButton variant="primary" :loading="joining" @click="accept">Accept</WButton>
      </div>
    </div>
  </div>

  <!-- Not in the room -->
  <div v-else-if="!room || membership !== KnownMembership.Join" class="flex flex-1 items-center justify-center px-4">
    <div class="flex w-full max-w-[420px] flex-col items-center gap-4 text-center">
      <WIcon name="room" :size="40" class="text-ink-muted" />
      <h1 class="heading m-0">You’re not in this room</h1>
      <p class="mxid text-ink-muted">{{ roomId }}</p>
      <WBanner v-if="joinError" tone="danger" class="w-full text-left">{{ joinError }}</WBanner>
      <div class="flex gap-2">
        <WButton variant="ghost" @click="router.replace('/')">Back</WButton>
        <WButton variant="primary" :loading="joining" @click="joinHere">Join room</WButton>
      </div>
    </div>
  </div>

  <div v-else class="flex min-h-0 flex-1">
    <div
      class="relative flex min-w-0 flex-1 flex-col"
      @dragover.prevent="dragging = canSend && !cryptoMissing"
      @dragleave.self="dragging = false"
      @drop.prevent="onDrop"
    >
      <header class="flex h-16 shrink-0 items-center gap-3 border-b border-line bg-surface px-2 md:px-4">
        <WIconButton class="md:hidden" icon="chevron-left" label="Back to rooms" @click="router.push('/')" />
        <MxcAvatar :name="summary?.name ?? room.name" :mxc="summary?.avatarMxc" :size="36" :presence="summary?.presence" />
        <button type="button" class="min-w-0 flex-1 cursor-pointer border-0 bg-transparent p-0 text-left" @click="infoOpen = !infoOpen">
          <span class="flex items-center gap-2">
            <h1 class="heading m-0 truncate">{{ summary?.name ?? room.name }}</h1>
            <WIcon v-if="encrypted" name="lock" :size="16" class="shrink-0 text-teal-text" label="End-to-end encrypted" />
          </span>
          <span class="small block truncate text-ink-muted">
            <template v-if="topic">{{ topic }}</template>
            <template v-else>{{ memberCount }} {{ memberCount === 1 ? 'member' : 'members' }}</template>
          </span>
        </button>
        <span v-if="!encrypted" class="caption hidden items-center gap-1 text-ink-muted sm:flex">
          <WIcon name="shield-alert" :size="14" /> Not encrypted
        </span>
        <WIconButton icon="users" :label="infoOpen ? 'Hide room info' : 'Room info'" :aria-pressed="infoOpen" @click="infoOpen = !infoOpen" />
      </header>

      <RoomTimeline :room="room" :is-direct="summary?.isDirect ?? false" />

      <div class="shrink-0 bg-surface-sunken px-4 pt-2 pb-4">
        <div class="mx-auto flex max-w-4xl flex-col gap-2">
          <p class="caption m-0 h-4 text-ink-muted" aria-live="polite">{{ typingText }}</p>

          <div v-for="u in uploads" :key="u.id" class="flex items-center gap-3 rounded-md bg-surface-raised px-3 py-2">
            <WSpinner :size="16" />
            <span class="small min-w-0 flex-1 truncate">Uploading {{ u.name }}</span>
            <span class="caption text-ink-muted tabular-nums">{{ u.total ? Math.round((u.loaded / u.total) * 100) : 0 }}%</span>
          </div>

          <WBanner v-if="cryptoMissing" tone="warning" title="End-to-end encryption didn’t start">
            This browser can’t read or send messages in this room. Reload the page to try again{{ cryptoError() ? ` (${cryptoError()})` : '' }}.
          </WBanner>
          <WBanner v-else-if="!canSend" tone="info">You don’t have permission to post in this room.</WBanner>
          <div v-else @paste="onPaste">
            <WComposer v-model="text" :placeholder="placeholder" :encrypted="encrypted" @send="send" @attach="sendFiles" />
          </div>
        </div>
      </div>

      <div
        v-if="dragging"
        class="pointer-events-none absolute inset-2 z-20 flex items-center justify-center rounded-lg border-2 border-dashed border-teal-strong bg-surface/80"
      >
        <p class="heading flex items-center gap-2 text-teal-text"><WIcon name="attach" /> Drop to send</p>
      </div>
    </div>

    <RoomInfoPane v-if="infoOpen" :room="room" :is-direct="summary?.isDirect ?? false" @close="infoOpen = false" />
  </div>
</template>