keanu-weblite/src/components/ChatHeader.vue

<template>
  <v-container fluid v-if="room">
    <v-row class="chat-header-row flex-nowrap">
      <v-col
        cols="auto"
        class="chat-header-members text-start ma-0 pa-0"
        @click.stop="onHeaderClicked"
      >
        <v-avatar size="40" class="me-2">
          <v-img v-if="room.avatar || memberAvatar" :src="room.avatar || memberAvatar" />
        </v-avatar>
      </v-col>

      <v-col
        class="chat-header-name ma-0 pa-0 flex-shrink-1 flex-nowrap"
        @click.stop="onHeaderClicked"
      >
        <div class="room-name-inline text-truncate" :title="room.name">
          {{ room.name }}<v-icon class="icon-dropdown" size="11">$vuetify.icons.ic_dropdown</v-icon><div class="notification-alert" v-if="notifications"></div>

          <!--<v-icon>expand_more</v-icon>-->
        </div>
        <div class="num-members">{{ $tc("room.members", memberCount) }}</div>
      </v-col>
      <v-col cols="auto" class="text-end ma-0 pa-0">
        <v-btn
          id="btn-purge-room"
          v-if="userCanPurgeRoom"
          class="mx-2 box-shadow-none"
          fab
          dark
          small
          color="red"
          @click.stop="showPurgeConfirmation = true"
        >
         <v-icon light>$vuetify.icons.ic_moderator-delete</v-icon>
        </v-btn>
        <v-btn
          id="btn-leave-room"
          class="mx-2 box-shadow-none"
          fab
          dark
          small
          color="red"
          @click.stop="leaveRoom"
          v-else
        >
        <v-icon>$vuetify.icons.ic_member-leave</v-icon>
        </v-btn>
      </v-col>
      <v-col cols="auto" class="text-end ma-0 pa-0 ms-2">
        <v-avatar
          class="avatar-32 clickable"
          size="40"
          color="#e0e0e0"
          @click.stop="showProfileInfo = true"
        >
          <img v-if="userAvatar" :src="userAvatar" />
          <span v-else class="white--text">{{ userAvatarLetter }}</span>
        </v-avatar>
      </v-col>
    </v-row>

    <!-- "REALLY LEAVE?" dialog -->
    <LeaveRoomDialog
      :show="showLeaveConfirmation"
      :room="room"
      @close="showLeaveConfirmation = false"
    />

    <!-- PROFILE INFO POPUP -->
    <ProfileInfoPopup
      :show="showProfileInfo"
      @close="showProfileInfo = false"
    />
    <!-- PURGE ROOM POPUP -->
    <PurgeRoomDialog
      :show="showPurgeConfirmation"
      :room="room"
      @close="showPurgeConfirmation = false"
    />
  </v-container>
</template>

<script>
import LeaveRoomDialog from "../components/LeaveRoomDialog";
import ProfileInfoPopup from "../components/ProfileInfoPopup";
import profileInfoMixin from "../components/profileInfoMixin";
import PurgeRoomDialog from "../components/PurgeRoomDialog";

import roomInfoMixin from "./roomInfoMixin";

export default {
  name: "ChatHeader",
  mixins: [profileInfoMixin, roomInfoMixin],
  components: {
    LeaveRoomDialog,
    ProfileInfoPopup,
    PurgeRoomDialog
  },
  data() {
    return {
      memberCount: null,
      showLeaveConfirmation: false,
      showProfileInfo: false,
      showPurgeConfirmation: false
    };
  },
  mounted() {
    this.$matrix.on("Room.timeline", this.onEvent);
    this.updateMemberCount();
  },

  destroyed() {
    this.$matrix.off("Room.timeline", this.onEvent);
  },

  computed: {
    room() {
      return this.$matrix.currentRoom;
    },
    memberAvatar() {
      let roomMember;
      if (this.room) {
        this.room.getMembers().forEach(member => {
          if(this.room.name === member.name) {
            roomMember =  member;
          }
        });
        if (roomMember) {
          return roomMember.getAvatarUrl(
            this.$matrix.matrixClient.getHomeserverUrl(),
            40,
            40,
            "scale",
            true
          );
        }
      }
      return null;
    },
    notifications() {
      return this.$matrix.joinedRooms.some(room => room.roomId !== this.$matrix.currentRoomId && room.getUnreadNotificationCount("total") > 0);
    }
  },
  watch: {
    room: {
      handler(newVal, ignoredOldVal) {
        if (newVal) {
          this.memberCount = newVal.getJoinedMemberCount();
        } else {
          this.memberCount = null;
        }
      },
    },
  },

  methods: {
    onEvent(event) {
      if (!this.room || event.getRoomId() !== this.room.roomId) {
        return; // Not for this room
      }
      if (event.getType() == "m.room.member") {
        this.updateMemberCount();
      }
    },

    onHeaderClicked() {
      this.$emit("header-click", { event: this.event });
    },

    updateMemberCount() {
      if (!this.room) {
        this.memberCount = 0;
      } else {
        this.memberCount = this.room.getJoinedMemberCount();
      }
    },

    leaveRoom() {
      this.showLeaveConfirmation = true;
    },
  },
};
</script>

<style lang="scss">
@import "@/assets/css/chat.scss";
</style>