keanu-weblite/src/components/Chat.vue

<template>
  <div class="chat-root fill-height d-flex flex-column">
    <div class="chat-room-invitations clickable" v-if="invitationCount > 0" @click.stop="onInvitationsClick">
      {{ $tc("room.invitations", invitationCount) }}
    </div>
    <ChatHeader class="chat-header flex-grow-0 flex-shrink-0" v-on:header-click="onHeaderClick" />
    <div
      class="chat-content flex-grow-1 flex-shrink-1"
      ref="chatContainer"
      v-on:scroll="onScroll"
      @click="closeContextMenusIfOpen"
    >
      <div ref="messageOperationsStrut" class="message-operations-strut">
        <message-operations
          ref="messageOperations"
          :style="opStyle"
          :emojis="recentEmojis"
          v-on:close="
            showContextMenu = false;
            showContextMenuAnchor = null;
          "
          v-if="showMessageOperations"
          v-on:addreaction="addReaction"
          v-on:addquickreaction="addQuickReaction"
          v-on:addreply="addReply(selectedEvent)"
          v-on:edit="edit(selectedEvent)"
          v-on:redact="redact(selectedEvent)"
          v-on:download="download(selectedEvent)"
          v-on:more="showMoreMessageOperations"
          :event="selectedEvent"
        />
      </div>

      <div ref="avatarOperationsStrut" class="avatar-operations-strut">
        <avatar-operations
          ref="avatarOperations"
          :style="avatarOpStyle"
          v-on:close="
            showAvatarMenu = false;
            showAvatarMenuAnchor = null;
          "
          v-on:start-private-chat="startPrivateChat($event)"
          v-if="selectedEvent && showAvatarMenu"
          :room="room"
          :event="selectedEvent"
        />
      </div>

      <!-- Handle resizes, e.g. when soft keyboard is shown/hidden -->
      <resize-observer ref="chatContainerResizer" @notify="handleChatContainerResize" />

      <CreatedRoomWelcomeHeader v-if="showCreatedRoomWelcomeHeader" v-on:close="closeCreateRoomWelcomeHeader" />

      <div v-for="(event, index) in events" :key="event.getId()" :eventId="event.getId()">
        <!-- DAY Marker, shown for every new day in the timeline -->
        <div v-if="showDayMarkerBeforeEvent(event)" class="day-marker" :title="dayForEvent(event)" />

        <div v-if="!event.isRelation() && !event.isRedacted() && !event.isRedaction()" :ref="event.getId()">
          <div
            class="message-wrapper"
            v-on:touchstart="
              (e) => {
                touchStart(e, event);
              }
            "
            v-on:touchend="touchEnd"
            v-on:touchcancel="touchCancel"
            v-on:touchmove="touchMove"
          >
            <component
              :is="componentForEvent(event)"
              :room="room"
              :event="event"
              :nextEvent="events[index + 1]"
              :timelineSet="timelineSet"
              v-on:send-quick-reaction="sendQuickReaction"
              v-on:context-menu="showContextMenuForEvent($event)"
              v-on:own-avatar-clicked="viewProfile"
              v-on:other-avatar-clicked="showAvatarMenuForEvent($event)"
              v-on:download="download(event)"
            />
            <!-- <div v-if="debugging" style="user-select:text">EventID: {{ event.getId() }}</div> -->
            <!-- <div v-if="debugging" style="user-select:text">Event: {{ JSON.stringify(event) }}</div> -->
            <div
              v-if="event.getId() == readMarker && index < events.length - 1"
              class="read-marker"
              :title="$t('message.unread_messages')"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- Input area -->
    <v-container v-if="room" fluid :class="['input-area-outer', replyToEvent ? 'reply-to' : '']">
      <div :class="[replyToEvent ? 'iput-area-inner-box' : '']">
        <!-- "Scroll to end"-button -->
        <v-btn
          class="scroll-to-end"
          v-show="showScrollToEnd"
          fab
          x-small
          elevation="0"
          color="black"
          @click.stop="scrollToEndOfTimeline"
        >
          <v-icon color="white">arrow_downward</v-icon>
        </v-btn>

        <v-row class="ma-0 pa-0">
          <div v-if="replyToEvent" class="row">
            <div class="col">
              <div class="font-weight-medium">{{ $t("message.replying_to", { user: replyToEvent.sender.name }) }}</div>
              <div v-if="replyToContentType === 'm.text'" class="reply-text" :title="replyToEvent.getContent().body">
                {{ replyToEvent.getContent().body | latestReply }}
              </div>
              <div v-if="replyToContentType === 'm.image'">{{ $t("message.reply_image") }}</div>
              <div v-if="replyToContentType === 'm.audio'">{{ $t("message.reply_audio_message") }}</div>
              <div v-if="replyToContentType === 'm.video'">{{ $t("message.reply_video") }}</div>
            </div>
            <div class="col col-auto" v-if="replyToContentType !== 'm.text'">
              <img v-if="replyToContentType === 'm.image'" width="150px" :src="replyToImg" class="rounded" />
              <v-img v-if="replyToContentType === 'm.audio'" src="@/assets/icons/audio_message.svg" />
              <v-img v-if="replyToContentType === 'm.video'" src="@/assets/icons/video_message.svg" />
            </div>
            <div class="col col-auto">
              <v-btn fab x-small elevation="0" color="black" @click.stop="cancelEditReply">
                <v-icon color="white">cancel</v-icon>
              </v-btn>
            </div>
          </div>

          <!-- CONTACT IS TYPING -->
          <div class="typing">
            {{ typingMembersString }}
          </div>
        </v-row>
        <v-row class="input-area-inner align-center">
          <v-col class="flex-grow-1 flex-shrink-1 ma-0 pa-0">
            <v-textarea
              height="undefined"
              ref="messageInput"
              full-width
              auto-grow
              rows="1"
              v-model="currentInput"
              no-resize
              class="input-area-text"
              :placeholder="$t('message.your_message')"
              hide-details
              background-color="white"
              v-on:keydown.enter.prevent="
                () => {
                  sendCurrentTextMessage();
                }
              "
            />
          </v-col>

          <v-col class="input-area-button text-center flex-grow-0 flex-shrink-1" v-if="editedEvent">
            <v-btn fab small elevation="0" color="black" @click.stop="cancelEditReply">
              <v-icon color="white">cancel</v-icon>
            </v-btn>
          </v-col>

          <v-col
            class="input-area-button text-center flex-grow-0 flex-shrink-1"
            v-if="!currentInput || currentInput.length == 0 || showRecorder"
          >
            <v-btn
              v-if="canRecordAudio"
              class="mic-button"
              ref="mic_button"
              fab
              small
              elevation="0"
              v-blur
              v-longTap:250="[showRecordingUI, startRecording]"
            >
              <v-icon :color="showRecorder ? 'white' : 'black'">mic</v-icon>
            </v-btn>
            <v-btn
              v-else
              class="mic-button"
              ref="mic_button"
              fab
              small
              elevation="0"
              v-blur
              @click.stop="showNoRecordingAvailableDialog = true"
            >
              <v-icon :color="showRecorder ? 'white' : 'black'">mic</v-icon>
            </v-btn>
          </v-col>

          <v-col class="input-area-button text-center flex-grow-0 flex-shrink-1" v-else>
            <v-btn
              fab
              small
              elevation="0"
              color="black"
              @click.stop="sendCurrentTextMessage"
              :disabled="sendButtonDisabled"
            >
              <v-icon color="white">{{ editedEvent ? "save" : "arrow_upward" }}</v-icon>
            </v-btn>
          </v-col>

          <v-col v-if="$config.shortCodeStickers" class="input-area-button text-center flex-grow-0 flex-shrink-1">
            <v-btn
              v-if="!showRecorder"
              id="btn-attach"
              icon
              large
              color="black"
              @click="showStickerPicker"
              :disabled="attachButtonDisabled"
            >
              <v-icon large>face</v-icon>
            </v-btn>
          </v-col>

          <v-col class="input-area-button text-center flex-grow-0 flex-shrink-1">
            <label icon flat ref="attachmentLabel">
              <v-btn
                v-if="!showRecorder"
                icon
                large
                color="black"
                @click="showAttachmentPicker"
                :disabled="attachButtonDisabled"
              >
                <v-icon x-large>add_circle_outline</v-icon>
              </v-btn>
              <input
                ref="attachment"
                type="file"
                name="attachment"
                @change="handlePickedAttachment($event)"
                accept="image/*|audio/*|video/*|application/pdf"
                class="d-none"
              />
            </label>
          </v-col>

          <v-col
            v-if="!showRecorder && canCreatePoll"
            ref="sendOptions"
            class="input-area-button text-center flex-grow-0 flex-shrink-1 send-options"
          >
            <v-menu close-on-click>
              <template v-slot:activator="{ on, attrs }">
                <v-btn icon v-bind="attrs" v-on="on">
                  <v-icon>more_vert</v-icon>
                </v-btn>
              </template>
              <v-list>
                <v-list-item @click="showCreatePollDialog = true">
                  <v-list-item-icon>
                    <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path
                        d="M3.31462 16.4718C3.31462 16.9496 3.70026 17.3368 4.17609 17.3368L16.1385 17.3368C16.6144 17.3368 17 16.9496 17 16.4718L16.9998 13.6229C16.9998 13.1452 16.6142 12.7579 16.1383 12.7579L4.1764 12.7579C3.70056 12.7579 3.31492 13.1452 3.31492 13.6229L3.31512 16.4718L3.31462 16.4718Z"
                        fill="currentColor"
                      />
                      <path
                        d="M3.31462 10.4557C3.31462 10.9335 3.70026 11.3208 4.17609 11.3208L11.3428 11.3208C11.8186 11.3208 12.2043 10.9335 12.2043 10.4557L12.2043 7.60711C12.2043 7.12931 11.8186 6.74208 11.3428 6.74208L4.17609 6.74208C3.70026 6.74208 3.31462 7.12932 3.31462 7.60711L3.31462 10.4557Z"
                        fill="currentColor"
                      />
                      <path
                        d="M3.31451 1.59127L3.31451 4.44011C3.31451 4.91791 3.70016 5.30514 4.17598 5.30514L6.99509 5.30514C7.47093 5.30514 7.85657 4.91791 7.85657 4.44011L7.85637 1.59127C7.85637 1.11347 7.47073 0.726242 6.9949 0.726242L4.17599 0.726242C3.70035 0.726242 3.31452 1.11348 3.31452 1.59127L3.31451 1.59127Z"
                        fill="currentColor"
                      />
                      <path
                        d="M-2.00529e-05 0.587841L-2.0791e-05 17.4747C-2.08052e-05 17.7995 0.262306 18.0625 0.585404 18.0625L1.38198 18.0625C1.70528 18.0625 1.96741 17.7995 1.96741 17.4747L1.96741 0.587841C1.96741 0.263208 1.70508 -1.14667e-08 1.38198 -2.55897e-08L0.585405 -6.04092e-08C0.261911 -7.45496e-08 -2.00387e-05 0.263213 -2.00529e-05 0.587841Z"
                        fill="currentColor"
                      />
                    </svg>
                  </v-list-item-icon>
                  <v-list-item-title>{{ $t("poll_create.create_poll_menu_option") }}</v-list-item-title></v-list-item
                >
              </v-list>
            </v-menu>
          </v-col>
        </v-row>
        <VoiceRecorder
          :micButtonRef="$refs.mic_button"
          :ptt="showRecorderPTT"
          :show="showRecorder"
          v-on:close="showRecorder = false"
          v-on:file="onVoiceRecording"
        />
      </div>
    </v-container>

    <div v-if="currentImageInputPath">
      <v-dialog v-model="currentImageInputPath" class="ma-0 pa-0" :width="$vuetify.breakpoint.smAndUp ? '50%' : '85%'">
        <v-card class="ma-0 pa-0">
          <v-card-text class="ma-0 pa-2">
            <v-img
              v-if="currentImageInput && currentImageInput.image"
              :aspect-ratio="1"
              :src="currentImageInput.image"
              contain
              class="current-image-input-path"
            />
            <div>
              file: {{ currentImageInputPath.name }}
              <span v-if="currentImageInput && currentImageInput.scaled && currentImageInput.useScaled">
                {{ currentImageInput.scaledDimensions.width }} x {{ currentImageInput.scaledDimensions.height }}</span
              >
              <span v-else-if="currentImageInput && currentImageInput.dimensions">
                {{ currentImageInput.dimensions.width }} x {{ currentImageInput.dimensions.height }}</span
              >
              <span v-if="currentImageInput && currentImageInput.scaled && currentImageInput.useScaled">
                ({{ formatBytes(currentImageInput.scaledSize) }})</span
              >
              <span v-else> ({{ formatBytes(currentImageInputPath.size) }})</span>
              <v-switch
                v-if="currentImageInput && currentImageInput.scaled"
                :label="$t('message.scale_image')"
                v-model="currentImageInput.useScaled"
              />
            </div>
            <div v-if="currentSendError">{{ currentSendError }}</div>
            <div v-else>{{ currentSendProgress }}</div>
          </v-card-text>
          <v-divider></v-divider>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="primary" text @click="cancelSendAttachment" id="btn-attachment-cancel">{{
              $t("menu.cancel")
            }}</v-btn>
            <v-btn
              id="btn-attachment-send"
              color="primary"
              text
              @click="sendAttachment"
              v-if="currentSendShowSendButton"
              :disabled="currentSendOperation != null"
              >{{ $t("menu.send") }}</v-btn
            >
          </v-card-actions>
        </v-card>
      </v-dialog>
    </div>

    <MessageOperationsBottomSheet ref="messageOperationsSheet">
      <VEmojiPicker ref="emojiPicker" @select="emojiSelected" />
    </MessageOperationsBottomSheet>

    <StickerPickerBottomSheet ref="stickerPickerSheet" v-on:selectSticker="sendSticker" />

    <!-- Loading indicator -->
    <v-container fluid class="loading-indicator" fill-height v-if="!initialLoadDone || loading">
      <v-row align="center" justify="center">
        <v-col class="text-center">
          <v-progress-circular indeterminate color="primary"></v-progress-circular>
        </v-col>
      </v-row>
    </v-container>

    <RoomInfoBottomSheet ref="roomInfoSheet" />

    <!-- Dialog for audio recording not supported! -->
    <v-dialog v-model="showNoRecordingAvailableDialog" class="ma-0 pa-0" width="80%">
      <v-card>
        <v-card-title>{{ $t("voice_recorder.not_supported_title") }}</v-card-title>
        <v-card-text>{{ $t("voice_recorder.not_supported_text") }} </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn id="btn-ok" color="primary" text @click="showNoRecordingAvailableDialog = false">{{
            $t("menu.ok")
          }}</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <CreatePollDialog :show="showCreatePollDialog" @close="showCreatePollDialog = false" />
  </div>
</template>

<script>
import Vue from "vue";
import { TimelineWindow, EventTimeline } from "matrix-js-sdk";
import util from "../plugins/utils";
import MessageOperations from "./messages/MessageOperations.vue";
import AvatarOperations from "./messages/AvatarOperations.vue";
import ChatHeader from "./ChatHeader";
import VoiceRecorder from "./VoiceRecorder";
import RoomInfoBottomSheet from "./RoomInfoBottomSheet";
import CreatedRoomWelcomeHeader from "./CreatedRoomWelcomeHeader";
import MessageOperationsBottomSheet from "./MessageOperationsBottomSheet";
import StickerPickerBottomSheet from "./StickerPickerBottomSheet";
import BottomSheet from "./BottomSheet.vue";
import ImageResize from "image-resize";
import CreatePollDialog from "./CreatePollDialog.vue";
import chatMixin from "./chatMixin";

const sizeOf = require("image-size");
const dataUriToBuffer = require("data-uri-to-buffer");
const prettyBytes = require("pretty-bytes");

const READ_RECEIPT_TIMEOUT = 5000; /* How long a message must have been visible before the read marker is updated */
const WINDOW_BUFFER_SIZE = 0.3; /** Relative window height of when we start paginating. Always keep this much loaded before and after our scroll position!  */

// from https://kirbysayshi.com/2013/08/19/maintaining-scroll-position-knockoutjs-list.html
function ScrollPosition(node) {
  this.node = node;
  this.previousScrollHeightMinusTop = 0;
  this.previousScrollTop = 0;
  this.readyFor = "up";
}

ScrollPosition.prototype.restore = function() {
  if (this.readyFor === "up") {
    this.node.scrollTop = this.node.scrollHeight - this.previousScrollHeightMinusTop;
  } else {
    this.node.scrollTop = this.previousScrollTop;
  }
};

ScrollPosition.prototype.prepareFor = function(direction) {
  this.readyFor = direction || "up";
  if (this.readyFor === "up") {
    this.previousScrollHeightMinusTop = this.node.scrollHeight - this.node.scrollTop;
  } else {
    this.previousScrollTop = this.node.scrollTop;
  }
};

export default {
  name: "Chat",
  mixins: [chatMixin],
  components: {
    ChatHeader,
    MessageOperations,
    VoiceRecorder,
    RoomInfoBottomSheet,
    CreatedRoomWelcomeHeader,
    MessageOperationsBottomSheet,
    StickerPickerBottomSheet,
    BottomSheet,
    AvatarOperations,
    CreatePollDialog,
  },

  data() {
    return {
      events: [],
      currentInput: "",
      typingMembers: [],
      timelineSet: null,
      timelineWindow: null,

      /** true if we are currently paginating */
      timelineWindowPaginating: false,

      scrollPosition: null,
      currentImageInput: null,
      currentImageInputPath: null,
      currentSendOperation: null,
      currentSendProgress: null,
      currentSendShowSendButton: true,
      currentSendError: null,
      showEmojiPicker: false,
      selectedEvent: null,
      editedEvent: null,
      replyToEvent: null,
      replyToImg: null,
      replyToContentType: null,
      showCreatePollDialog: false,
      showNoRecordingAvailableDialog: false,
      showContextMenu: false,
      showContextMenuAnchor: null,
      showAvatarMenu: false,
      showAvatarMenuAnchor: null,
      initialLoadDone: false,
      loading: false, // Set this to true during long operations to show a "spinner" overlay
      showRecorder: false,
      showRecorderPTT: false, // True to open the voice recorder in push-to-talk mode.

      /**
       * Current chat container size. We need to keep track of this so that if and when
       * a soft keyboard is shown/hidden we can restore the scroll position correctly.
       * If we don't, the keyboard will simply overflow the message we are answering to etc.
       */
      chatContainerSize: 0,

      /**
       * True if we should show the "scroll to end" marker in the chat. For now at least, we use a simple
       * method here, basically just "if we can scroll, show it".
       */
      showScrollToEnd: false,

      /** A timer for read receipts. */
      rrTimer: null,

      /** Last event we sent a Read Receipt/Read Marker for */
      lastRR: null,

      /** If we just created this room, show a small welcome header with info */
      showCreatedRoomWelcomeHeader: false,

      /** An array of recent emojis. Used in the "message operations" popup. */
      recentEmojis: [],

      /** Calculated style for message operations. We position the "popup" at the selected message. */
      opStyle: "",
    };
  },

  filters: {
    latestReply(contents) {
      const contentArr = contents.split("\n").reverse();
      if (contentArr[0] === "") {
        contentArr.shift();
      }
      return contentArr[0].replace(/^> (<.*> )?/g, "");
    },
  },

  mounted() {
    const container = this.$refs.chatContainer;
    this.scrollPosition = new ScrollPosition(container);
    this.chatContainerSize = this.$refs.chatContainerResizer.$el.clientHeight;
  },

  beforeDestroy() {
    this.stopRRTimer();
  },

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

  computed: {
    currentUser() {
      return this.$store.state.auth.user;
    },
    room() {
      return this.$matrix.currentRoom;
    },
    roomId() {
      if (!this.$matrix.ready && this.currentUser) {
        // If we have a user already, wait for ready state. If not, we
        // dont want to return here, because we want to redirect to "join".
        return null; // Not ready yet...
      }
      if (this.room) {
        return this.room.roomId;
      }
      return this.$matrix.currentRoomId;
    },
    roomAliasOrId() {
      if (this.room) {
        return this.room.getCanonicalAlias() || this.room.roomId;
      }
      return this.$matrix.currentRoomId;
    },
    readMarker() {
      if (this.lastRR) {
        // If we have sent a RR, use that as read marker (so we don't have to wait for server round trip)
        return this.lastRR.getId();
      }
      return this.fullyReadMarker || this.room.getEventReadUpTo(this.$matrix.currentUserId, false);
    },
    fullyReadMarker() {
      const readEvent = this.room.getAccountData("m.fully_read");
      if (readEvent) {
        return readEvent.getContent().event_id;
      }
      return null;
    },
    attachButtonDisabled() {
      return this.editedEvent != null || this.replyToEvent != null || this.currentInput.length > 0;
    },
    sendButtonDisabled() {
      return this.currentInput.length == 0;
    },
    typingMembersString() {
      const count = this.typingMembers.length;
      if (count > 1) {
        return this.$t("message.users_are_typing", { count: count });
      } else if (count > 0) {
        return this.$t("message.user_is_typing", {
          user: this.typingMembers[0].name,
        });
      } else {
        return "";
      }
    },
    showMessageOperations() {
      return this.selectedEvent && this.showContextMenu;
    },
    avatarOpStyle() {
      // Calculate where to show the context menu.
      //
      const ref = this.selectedEvent && this.$refs[this.selectedEvent.getId()];
      var top = 0;
      var left = 0;
      if (ref && ref[0]) {
        if (this.showAvatarMenuAnchor) {
          var rectAnchor = this.showAvatarMenuAnchor.getBoundingClientRect();
          var rectChat = this.$refs.avatarOperationsStrut.getBoundingClientRect();
          top = rectAnchor.top - rectChat.top;
          left = rectAnchor.left - rectChat.left;
          // if (left + 250 > rectChat.right) {
          //   left = rectChat.right - 250; // Pretty ugly, but we want to make sure it does not escape the screen, and we don't have the exakt width of it (yet)!
          // }
        }
      }
      return "top:" + top + "px;left:" + left + "px";
    },
    canRecordAudio() {
      return util.browserCanRecordAudio();
    },
    debugging() {
      return (window.location.host || "").startsWith("localhost");
    },
    invitationCount() {
      return this.$matrix.invites.length;
    },
    canCreatePoll() {
      // We say that if you can redact events, you are allowed to create polls.
      const me = this.room && this.room.getMember(this.$matrix.currentUserId);
      let isAdmin =
        me && this.room.currentState && this.room.currentState.hasSufficientPowerLevelFor("redact", me.powerLevel);
      return isAdmin;
    },
  },

  watch: {
    roomId: {
      immediate: true,
      handler(value, oldValue) {
        if (value && value == oldValue) {
          return; // No change.
        }
        console.log("Chat: Current room changed to " + (value ? value : "null"));

        // Clear old events
        this.$matrix.off("Room.timeline", this.onEvent);
        this.$matrix.off("RoomMember.typing", this.onUserTyping);

        this.events = [];
        this.timelineWindow = null;
        this.typingMembers = [];
        this.initialLoadDone = false;
        this.showCreatedRoomWelcomeHeader = false;

        // Stop RR timer
        this.stopRRTimer();
        this.lastRR = null;

        if (!this.room) {
          // Public room?
          if (this.roomId && this.roomId.startsWith("#")) {
            this.onRoomNotJoined();
          } else if (this.roomId) {
            this.onRoomNotJoined(); // Private room we are not joined to. What to do? We redirect to join
            // screen, maybe the user has an invite already?
          }
          this.initialLoadDone = true;
          return; // no room
        }

        // Joined?
        if (this.room.hasMembershipState(this.currentUser.user_id, "join")) {
          // Yes, load everything
          this.onRoomJoined(this.readMarker);
        } else {
          this.onRoomNotJoined();
        }
      },
    },
    showMessageOperations() {
      if (this.showMessageOperations) {
        this.$nextTick(() => {
          // Calculate where to show the context menu.
          //
          const ref = this.selectedEvent && this.$refs[this.selectedEvent.getId()];
          var top = 0;
          var left = 0;
          if (ref && ref[0]) {
            if (this.showContextMenuAnchor) {
              var rectAnchor = this.showContextMenuAnchor.getBoundingClientRect();
              var rectChat = this.$refs.messageOperationsStrut.getBoundingClientRect();
              var rectOps = this.$refs.messageOperations.$el.getBoundingClientRect();
              top = rectAnchor.top - rectChat.top - 50;
              left = rectAnchor.left - rectChat.left - 50;
              if (left + rectOps.width >= rectChat.right) {
                left = rectChat.right - rectOps.width - 10; // No overflow
              }
            }
          }
          this.opStyle = "top:" + top + "px;left:" + left + "px";
        });
      }
    },
  },

  methods: {
    onRoomJoined(initialEventId) {
      // Was this room just created (by you)? Show a small info header in
      // that case!
      const createEvent = this.room.currentState.getStateEvents("m.room.create", "");
      if (createEvent) {
        const creatorId = createEvent.getContent().creator;
        if (creatorId == this.$matrix.currentUserId && createEvent.getLocalAge() < 5 * 60000 /* 5 minutes */) {
          this.showCreatedRoomWelcomeHeader = true;
        }
      }

      // Listen to events
      this.$matrix.on("Room.timeline", this.onEvent);
      this.$matrix.on("RoomMember.typing", this.onUserTyping);

      console.log("Read up to " + initialEventId);

      //initialEventId = null;
      this.timelineSet = this.room.getUnfilteredTimelineSet();
      this.timelineWindow = new TimelineWindow(this.$matrix.matrixClient, this.timelineSet, {});
      const self = this;
      this.timelineWindow
        .load(initialEventId, 20)
        .then(() => {
          self.events = self.timelineWindow.getEvents();

          const getMoreIfNeeded = function _getMoreIfNeeded() {
            const container = self.$refs.chatContainer;
            if (
              container.scrollHeight <= (1 + 2 * WINDOW_BUFFER_SIZE) * container.clientHeight &&
              self.timelineWindow &&
              self.timelineWindow.canPaginate(EventTimeline.BACKWARDS)
            ) {
              return self.timelineWindow.paginate(EventTimeline.BACKWARDS, 10, true, 5).then((success) => {
                self.events = self.timelineWindow.getEvents();
                if (success) {
                  return _getMoreIfNeeded.call(self);
                } else {
                  return Promise.reject("Failed to paginate");
                }
              });
            } else {
              return Promise.resolve("Done");
            }
          }.bind(self);

          getMoreIfNeeded()
            .catch((err) => {
              console.log("ERROR " + err);
            })
            .finally(() => {
              self.initialLoadDone = true;
              if (initialEventId && !this.showCreatedRoomWelcomeHeader) {
                self.scrollToEvent(initialEventId);
              } else if (this.showCreatedRoomWelcomeHeader) {
                self.onScroll();
              }
              self.restartRRTimer();
            });
        })
        .catch((err) => {
          console.log("Error fetching events!", err, this);
          if (err.errcode == "M_UNKNOWN" && initialEventId) {
            // Try again without initial event!
            this.onRoomJoined(null);
          } else {
            // Error. Done loading.
            this.events = this.timelineWindow.getEvents();
            this.initialLoadDone = true;
          }
        })
        .finally(() => {
          for (var event of this.events) {
            this.$matrix.matrixClient.decryptEventIfNeeded(event, {});
          }
        });
    },

    onRoomNotJoined() {
      this.$navigation.push(
        {
          name: "Join",
          params: { roomId: util.sanitizeRoomId(this.roomAliasOrId) },
        },
        0
      );
    },

    scrollToEndOfTimeline() {
      if (this.timelineWindow && this.timelineWindow.canPaginate(EventTimeline.FORWARDS)) {
        this.loading = true;
        // Instead of paging though ALL history, just reload a timeline at the live marker...
        var timelineSet = this.room.getUnfilteredTimelineSet();
        var timelineWindow = new TimelineWindow(this.$matrix.matrixClient, timelineSet, {});
        const self = this;
        timelineWindow
          .load(null, 20)
          .then(() => {
            self.timelineSet = timelineSet;
            self.timelineWindow = timelineWindow;
            self.events = self.timelineWindow.getEvents();
          })
          .finally(() => {
            this.loading = false;
          });
      } else {
        // Can't paginate, just scroll to bottom of window!
        this.smoothScrollToEnd();
      }
    },

    touchX(event) {
      if (event.type.indexOf("mouse") !== -1) {
        return event.clientX;
      }
      return event.touches[0].clientX;
    },
    touchY(event) {
      if (event.type.indexOf("mouse") !== -1) {
        return event.clientY;
      }
      return event.touches[0].clientY;
    },
    touchStart(e, event) {
      if (this.selectedEvent != event) {
        this.showContextMenu = false;
      }
      this.selectedEvent = event;
      this.touchStartX = this.touchX(e);
      this.touchStartY = this.touchY(e);
      this.touchTimer = setTimeout(this.touchTimerElapsed, 500);
    },
    touchEnd() {
      this.touchTimer && clearTimeout(this.touchTimer);
    },
    touchCancel() {
      this.touchTimer && clearTimeout(this.touchTimer);
    },
    touchMove(e) {
      this.touchCurrentX = this.touchX(e);
      this.touchCurrentY = this.touchY(e);
      var tapTolerance = 4;
      var touchMoved =
        Math.abs(this.touchStartX - this.touchCurrentX) > tapTolerance ||
        Math.abs(this.touchStartY - this.touchCurrentY) > tapTolerance;
      if (touchMoved) {
        this.touchTimer && clearTimeout(this.touchTimer);
      }
    },

    /**
     * Triggered when our "long tap" timer hits.
     */
    touchTimerElapsed() {
      this.updateRecentEmojis();
      this.showContextMenu = true;
    },

    /**
     * If chat container is shrunk (probably because soft keyboard is shown) adjust
     * the scroll position so that e.g. if we were looking at the last message when
     * moving focus to the input field, we would still see the last message. Otherwise
     * if would be hidden behind the keyboard.
     */
    handleChatContainerResize({ ignoredWidth, height }) {
      const delta = height - this.chatContainerSize;
      this.chatContainerSize = height;
      const container = this.$refs.chatContainer;
      if (delta < 0) {
        container.scrollTop -= delta;
      }
    },

    paginateBackIfNeeded() {
      this.$nextTick(() => {
        const container = this.$refs.chatContainer;
        if (container.scrollHeight <= container.clientHeight) {
          this.handleScrolledToTop();
        }
      });
    },
    onScroll(ignoredevent) {
      const container = this.$refs.chatContainer;
      if (!container) {
        return;
      }
      const bufferHeight = container.clientHeight * WINDOW_BUFFER_SIZE;
      if (container.scrollTop <= bufferHeight) {
        // Scrolled to top
        this.handleScrolledToTop();
      } else if (container.scrollHeight - container.scrollTop.toFixed(0) - container.clientHeight <= bufferHeight) {
        this.handleScrolledToBottom(false);
      }

      this.showScrollToEnd = container.scrollHeight === container.clientHeight ? false : container.scrollHeight - container.scrollTop.toFixed(0) > container.clientHeight || (this.timelineWindow && this.timelineWindow.canPaginate(EventTimeline.FORWARDS));

      this.restartRRTimer();
    },
    onEvent(event) {
      //console.log("OnEvent", JSON.stringify(event));
      if (event.getRoomId() !== this.roomId) {
        return; // Not for this room
      }

      this.$matrix.matrixClient.decryptEventIfNeeded(event, {});

      if (this.initialLoadDone) {
        this.paginateBackIfNeeded();
      }

      // If we are at bottom, scroll to see new events...
      const container = this.$refs.chatContainer;
      var scrollToSeeNew = event.getSender() == this.$matrix.currentUserId; // When we sent, scroll
      if (container.scrollHeight - container.scrollTop.toFixed(0) == container.clientHeight) {
        scrollToSeeNew = true;
      }
      if (this.initialLoadDone && event.forwardLooking && !event.isRelation()) {
        this.handleScrolledToBottom(scrollToSeeNew);
      }
    },

    onUserTyping(event, member) {
      if (member.roomId !== this.roomId) {
        return; // Not for this room
      }
      if (member.typing) {
        if (!this.typingMembers.includes(member)) {
          this.typingMembers.push(member);
        }
      } else {
        const index = this.typingMembers.indexOf(member);
        if (index > -1) {
          this.typingMembers.splice(index, 1);
        }
      }
      //console.log("Typing: ", this.typingMembers);
    },

    sendCurrentTextMessage() {
      // DOn't have "enter" send messages while in recorder.
      if (this.currentInput.length > 0 && !this.showRecorder) {
        this.sendMessage(this.currentInput);
        this.currentInput = "";
        this.editedEvent = null; //TODO - Is this a good place to reset this?
        this.replyToEvent = null;
      }
    },

    sendMessage(text) {
      if (text && text.length > 0) {
        util
          .sendTextMessage(this.$matrix.matrixClient, this.roomId, text, this.editedEvent, this.replyToEvent)
          .then(() => {
            console.log("Sent message");
          })
          .catch((err) => {
            console.log("Failed to send:", err);
          });
      }
    },

    /**
     * Show attachment picker to select file
     */
    showAttachmentPicker() {
      this.$refs.attachment.click();
    },

    /**
     * Handle picked attachment
     */
    handlePickedAttachment(event) {
      if (event.target.files && event.target.files[0]) {
        var reader = new FileReader();
        reader.onload = (e) => {
          const file = event.target.files[0];
          this.currentSendShowSendButton = true;
          if (file.type.startsWith("image/")) {
            this.currentImageInput = {
              image: e.target.result,
              dimensions: null,
            };
            try {
              this.currentImageInput.dimensions = sizeOf(dataUriToBuffer(e.target.result));

              // Need to resize?
              const w = this.currentImageInput.dimensions.width;
              const h = this.currentImageInput.dimensions.height;
              if (w > 640 || h > 640) {
                var aspect = w / h;
                var newWidth = parseInt((w > h ? 640 : 640 * aspect).toFixed());
                var newHeight = parseInt((w > h ? 640 / aspect : 640).toFixed());
                var imageResize = new ImageResize({
                  format: "png",
                  width: newWidth,
                  height: newHeight,
                  outputType: "blob",
                });
                imageResize
                  .play(event.target)
                  .then((img) => {
                    Vue.set(
                      this.currentImageInput,
                      "scaled",
                      new File([img], file.name, {
                        type: img.type,
                        lastModified: Date.now(),
                      })
                    );
                    Vue.set(this.currentImageInput, "useScaled", true);
                    Vue.set(this.currentImageInput, "scaledSize", img.size);
                    Vue.set(this.currentImageInput, "scaledDimensions", {
                      width: newWidth,
                      height: newHeight,
                    });
                  })
                  .catch((err) => {
                    console.error("Resize failed:", err);
                  });
              }
            } catch (error) {
              console.error("Failed to get image dimensions: " + error);
            }
          }
          console.log(this.currentImageInput);
          this.currentImageInputPath = file;
        };
        reader.readAsDataURL(event.target.files[0]);
      }
    },

    showStickerPicker() {
      this.$refs.stickerPickerSheet.open();
    },

    onUploadProgress(p) {
      if (p.total) {
        this.currentSendProgress = this.$t("message.upload_progress_with_total", {
          count: p.loaded || 0,
          total: p.total,
        });
      } else {
        this.currentSendProgress = this.$t("message.upload_progress", {
          count: p.loaded || 0,
        });
      }
    },

    sendAttachment(withText) {
      this.$refs.attachment.value = null;
      if (this.currentImageInputPath) {
        var inputFile = this.currentImageInputPath;
        if (this.currentImageInput && this.currentImageInput.scaled && this.currentImageInput.useScaled) {
          // Send scaled version of image instead!
          inputFile = this.currentImageInput.scaled;
        }
        this.currentSendProgress = null;
        this.currentSendOperation = util.sendImage(
          this.$matrix.matrixClient,
          this.roomId,
          inputFile,
          this.onUploadProgress
        );
        this.currentSendOperation
          .then(() => {
            this.currentSendOperation = null;
            this.currentImageInput = null;
            this.currentImageInputPath = null;
            this.currentSendProgress = null;
            if (withText) {
              this.sendMessage(withText);
            }
          })
          .catch((err) => {
            this.currentSendError = err.toLocaleString();
            this.currentSendOperation = null;
            this.currentSendProgress = null;
          });
      }
    },

    cancelSendAttachment() {
      this.$refs.attachment.value = null;
      if (this.currentSendOperation) {
        this.currentSendOperation.reject("Canceled");
      }
      this.currentSendOperation = null;
      this.currentImageInput = null;
      this.currentImageInputPath = null;
      this.currentSendProgress = null;
      this.currentSendError = null;
    },

    handleScrolledToTop() {
      console.log("@top");
      if (
        this.timelineWindow &&
        this.timelineWindow.canPaginate(EventTimeline.BACKWARDS) &&
        !this.timelineWindowPaginating
      ) {
        this.timelineWindowPaginating = true;
        this.timelineWindow
          .paginate(EventTimeline.BACKWARDS, 10, true)
          .then((success) => {
            if (success) {
              this.scrollPosition.prepareFor("up");
              this.events = this.timelineWindow.getEvents();
              this.$nextTick(() => {
                // restore scroll position!
                console.log("Restore scroll!");
                this.scrollPosition.restore();
              });
            }
          })
          .finally(() => {
            this.timelineWindowPaginating = false;
          });
      }
    },

    handleScrolledToBottom(scrollToEnd) {
      console.log("@bottom");
      if (
        this.timelineWindow &&
        this.timelineWindow.canPaginate(EventTimeline.FORWARDS) &&
        !this.timelineWindowPaginating
      ) {
        this.timelineWindowPaginating = true;
        this.timelineWindow
          .paginate(EventTimeline.FORWARDS, 10, true)
          .then((success) => {
            if (success) {
              this.scrollPosition.prepareFor("down");
              this.events = this.timelineWindow.getEvents();
              this.$nextTick(() => {
                // restore scroll position!
                console.log("Restore scroll!");
                this.scrollPosition.restore();
                if (scrollToEnd) {
                  this.smoothScrollToEnd();
                }
              });
            }
          })
          .finally(() => {
            this.timelineWindowPaginating = false;
          });
      }
    },

    /**
     * Scroll so that the given event is at the middle of the chat view (if more events) or else at the bottom.
     */
    scrollToEvent(eventId) {
      const container = this.$refs.chatContainer;
      const ref = this.$refs[eventId];
      if (container && ref) {
        const targetY = container.clientHeight / 2;
        const sourceY = ref[0].offsetTop;
        container.scrollTo(0, sourceY - targetY);
      }
    },

    smoothScrollToEnd() {
      this.$nextTick(function() {
        const container = this.$refs.chatContainer;
        if (container.children.length > 0) {
          const lastChild = container.children[container.children.length - 1];
          console.log("Scroll into view", lastChild);
          window.requestAnimationFrame(() => {
            lastChild.scrollIntoView({
              behavior: "smooth",
              block: "start",
              inline: "nearest",
            });
          });
        }
      });
    },

    showMoreMessageOperations(e) {
      this.addReaction(e);
    },

    addReaction(e) {
      const event = e.event;
      // Store the event we are reacting to, so that we know where to
      // send when the picker closes.
      this.selectedEvent = event;
      this.$refs.messageOperationsSheet.open();
      this.showEmojiPicker = true;
    },

    addQuickReaction(e) {
      this.sendQuickReaction({ reaction: e.emoji, event: e.event });
    },

    setReplyToImage(event) {
      util
        .getThumbnail(this.$matrix.matrixClient, event)
        .then((url) => {
          this.replyToImg = url;
        })
        .catch((err) => {
          console.log("Failed to fetch thumbnail: ", err);
        });
    },

    addReply(event) {
      this.replyToEvent = event;
      this.$refs.messageInput.focus();
      this.replyToContentType = event.getContent().msgtype;
      this.setReplyToImage(event);
    },

    edit(event) {
      this.editedEvent = event;
      this.currentInput = event.getContent().body;
      this.$refs.messageInput.focus();
    },

    redact(event) {
      this.$matrix.matrixClient
        .redactEvent(event.getRoomId(), event.getId())
        .then(() => {
          console.log("Message redacted");
        })
        .catch((err) => {
          console.log("Redaction failed: ", err);
        });
    },

    download(event) {
      util
        .getAttachment(this.$matrix.matrixClient, event)
        .then((url) => {
          const link = document.createElement("a");
          link.href = url;
          link.target = "_blank";
          link.download = event.getContent().body || this.$t("fallbacks.download_name");
          document.body.appendChild(link);
          link.click();

          setTimeout(function() {
            document.body.removeChild(link);
            URL.revokeObjectURL(url);
          }, 200);
        })
        .catch((err) => {
          console.log("Failed to fetch attachment: ", err);
        });
    },

    cancelEditReply() {
      this.currentInput = "";
      this.editedEvent = null;
      this.replyToEvent = null;
    },

    emojiSelected(e) {
      this.showEmojiPicker = false;
      this.$refs.messageOperationsSheet.close();
      if (this.selectedEvent) {
        const event = this.selectedEvent;
        this.selectedEvent = null;
        this.sendQuickReaction({ reaction: e.data, event: event });
      }
    },

    sendQuickReaction(e) {
      util
        .sendQuickReaction(this.$matrix.matrixClient, this.roomId, e.reaction, e.event)
        .then(() => {
          console.log("Quick reaction message");
        })
        .catch((err) => {
          console.log("Failed to send quick reaction:", err);
        });
    },

    sendSticker(stickerShortCode) {
      this.sendMessage(stickerShortCode);
    },

    showContextMenuForEvent(e) {
      const event = e.event;
      this.selectedEvent = event;
      this.updateRecentEmojis();
      this.showContextMenu = !this.showContextMenu;
      this.showContextMenuAnchor = e.anchor;
    },

    showAvatarMenuForEvent(e) {
      const event = e.event;
      this.selectedEvent = event;
      this.showAvatarMenu = true;
      this.showAvatarMenuAnchor = e.anchor;
    },

    viewProfile() {
      this.$navigation.push({ name: "Profile" }, 1);
    },

    startPrivateChat(e) {
      this.loading = true;
      this.$matrix
        .getOrCreatePrivateChat(e.event.getSender())
        .then((room) => {
          this.$nextTick(() => {
            this.$navigation.push(
              {
                name: "Chat",
                params: {
                  roomId: util.sanitizeRoomId(room.getCanonicalAlias() || room.roomId),
                },
              },
              -1
            );
          });
        })
        .catch((err) => {
          console.error(err);
        })
        .finally(() => {
          this.loading = false;
        });
    },

    closeContextMenusIfOpen(e) {
      if (this.showContextMenu) {
        this.showContextMenu = false;
        this.showContextMenuAnchor = null;
        e.preventDefault();
      }
      if (this.showAvatarMenu) {
        this.showAvatarMenu = false;
        this.showAvatarMenuAnchor = null;
        e.preventDefault();
      }
    },

    /** Stop Read Receipt timer */
    stopRRTimer() {
      if (this.rrTimer) {
        clearTimeout(this.rrTimer);
        this.rrTimer = null;
      }
    },

    /**
     * Start/restart the timer to Read Receipts.
     */
    restartRRTimer() {
      this.stopRRTimer();
      this.rrTimer = setTimeout(this.rrTimerElapsed, READ_RECEIPT_TIMEOUT);
    },

    rrTimerElapsed() {
      this.rrTimer = null;

      const container = this.$refs.chatContainer;
      const elFirst = util.getFirstVisibleElement(container);
      const elLast = util.getLastVisibleElement(container);
      if (elFirst && elLast) {
        const eventIdFirst = elFirst.getAttribute("eventId");
        const eventIdLast = elLast.getAttribute("eventId");
        if (eventIdLast && this.room) {
          var event = this.room.findEventById(eventIdLast);
          const index = this.events.indexOf(event);

          // Walk backwards through visible events to the first one that is incoming
          //
          var lastTimestamp = 0;
          if (this.lastRR) {
            lastTimestamp = this.lastRR.getTs();
          }

          for (var i = index; i >= 0; i--) {
            event = this.events[i];
            if (event == this.lastRR || event.getTs() <= lastTimestamp) {
              // Already sent this or too old...
              break;
            }
            // Make sure it's not a local echo event...
            if (!event.getId().startsWith("~")) {
              // Send read receipt
              this.$matrix.matrixClient
                .sendReadReceipt(event)
                .then(() => {
                  this.$matrix.matrixClient.setRoomReadMarkers(this.room.roomId, event.getId());
                })
                .then(() => {
                  console.log("RR sent for event: " + event.getId());
                  this.lastRR = event;
                })
                .catch((err) => {
                  console.log("Failed to update read marker: ", err);
                })
                .finally(() => {
                  this.restartRRTimer();
                });
              return; // Bail out here
            }

            // Stop iterating at first visible
            if (event.getId() == eventIdFirst) {
              break;
            }
          }
        }
      }
      this.restartRRTimer();
    },

    showRecordingUI() {
      this.showRecorderPTT = false;
      this.showRecorder = true;
    },

    startRecording() {
      this.showRecorderPTT = true;
      this.showRecorder = true;
    },

    onVoiceRecording(event) {
      this.currentSendShowSendButton = false;
      this.currentImageInputPath = event.file;
      var text = undefined;
      if (this.currentInput && this.currentInput.length > 0) {
        text = this.currentInput;
        this.currentInput = "";
      }
      this.sendAttachment(text);
      this.showRecorder = false;

      // Log event to Clean Insights
      this.$ci.event("Audio", "Voice message sent");
    },

    closeCreateRoomWelcomeHeader() {
      this.showCreatedRoomWelcomeHeader = false;
      this.$nextTick(() => {
        // We change the layout when removing the welcome header, so call
        // onScroll here to handle updates (e.g. remove the "scroll to last" if we now
        // can see all messages).
        this.onScroll();
      });
    },

    updateRecentEmojis() {
      if (this.$refs.emojiPicker) {
        this.recentEmojis = this.$refs.emojiPicker.mapEmojis["Frequently"];
        if (this.recentEmojis.length < 20) {
          let peoples = this.$refs.emojiPicker.mapEmojis["Peoples"];
          for (var p of peoples) {
            this.recentEmojis.push(p);
          }
        }
        return;
      }
      this.recentEmojis = [];
    },

    formatBytes(bytes) {
      return prettyBytes(bytes);
    },

    onHeaderClick() {
      const joinedRooms = this.$matrix.joinedRooms;
      if (joinedRooms && joinedRooms.length == 1 && joinedRooms[0].roomId == this.room.roomId) {
        // Only joined to this room, go directly to room details!
        this.$navigation.push({ name: "RoomInfo" });
        return;
      }
      this.$refs.roomInfoSheet.open();
    },
    onInvitationsClick() {
      this.$navigation.push({ name: "Home" }, -1);
    },
  },
};
</script>

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