signal-desktop/js/views/conversation_view.js

/* global
  $,
  _,
  ConversationController,
  extension,
  i18n,
  loadImage,
  MessageController,
  Signal,
  storage,
  textsecure,
  Whisper,
*/

// eslint-disable-next-line func-names
(function() {
  'use strict';

  window.Whisper = window.Whisper || {};
  const { Message, MIME, VisualAttachment } = window.Signal.Types;
  const {
    upgradeMessageSchema,
    getAbsoluteAttachmentPath,
    getAbsoluteDraftPath,
    copyIntoTempDirectory,
    getAbsoluteTempPath,
    deleteDraftFile,
    deleteTempFile,
    readDraftData,
    writeNewDraftData,
  } = window.Signal.Migrations;
  const {
    getOlderMessagesByConversation,
    getMessageMetricsForConversation,
    getMessageById,
    getMessagesBySentAt,
    getNewerMessagesByConversation,
  } = window.Signal.Data;

  Whisper.ExpiredToast = Whisper.ToastView.extend({
    render_attributes() {
      return { toastMessage: i18n('expiredWarning') };
    },
  });
  Whisper.BlockedToast = Whisper.ToastView.extend({
    render_attributes() {
      return { toastMessage: i18n('unblockToSend') };
    },
  });
  Whisper.BlockedGroupToast = Whisper.ToastView.extend({
    render_attributes() {
      return { toastMessage: i18n('unblockGroupToSend') };
    },
  });
  Whisper.LeftGroupToast = Whisper.ToastView.extend({
    render_attributes() {
      return { toastMessage: i18n('youLeftTheGroup') };
    },
  });
  Whisper.OriginalNotFoundToast = Whisper.ToastView.extend({
    render_attributes() {
      return { toastMessage: i18n('originalMessageNotFound') };
    },
  });
  Whisper.OriginalNoLongerAvailableToast = Whisper.ToastView.extend({
    render_attributes() {
      return { toastMessage: i18n('originalMessageNotAvailable') };
    },
  });
  Whisper.FoundButNotLoadedToast = Whisper.ToastView.extend({
    render_attributes() {
      return { toastMessage: i18n('messageFoundButNotLoaded') };
    },
  });
  Whisper.VoiceNoteMustBeOnlyAttachmentToast = Whisper.ToastView.extend({
    render_attributes() {
      return { toastMessage: i18n('voiceNoteMustBeOnlyAttachment') };
    },
  });

  const MAX_MESSAGE_BODY_LENGTH = 64 * 1024;
  Whisper.MessageBodyTooLongToast = Whisper.ToastView.extend({
    render_attributes() {
      return { toastMessage: i18n('messageBodyTooLong') };
    },
  });

  Whisper.FileSizeToast = Whisper.ToastView.extend({
    templateName: 'file-size-modal',
    render_attributes() {
      return {
        'file-size-warning': i18n('fileSizeWarning'),
        limit: this.model.limit,
        units: this.model.units,
      };
    },
  });
  Whisper.UnableToLoadToast = Whisper.ToastView.extend({
    render_attributes() {
      return { toastMessage: i18n('unableToLoadAttachment') };
    },
  });

  Whisper.DangerousFileTypeToast = Whisper.ToastView.extend({
    template: i18n('dangerousFileType'),
  });
  Whisper.OneNonImageAtATimeToast = Whisper.ToastView.extend({
    template: i18n('oneNonImageAtATimeToast'),
  });
  Whisper.CannotMixImageAndNonImageAttachmentsToast = Whisper.ToastView.extend({
    template: i18n('cannotMixImageAdnNonImageAttachments'),
  });
  Whisper.MaxAttachmentsToast = Whisper.ToastView.extend({
    template: i18n('maximumAttachments'),
  });

  Whisper.ConversationLoadingScreen = Whisper.View.extend({
    templateName: 'conversation-loading-screen',
    className: 'conversation-loading-screen',
  });

  Whisper.ConversationView = Whisper.View.extend({
    className() {
      return ['conversation', this.model.get('type')].join(' ');
    },
    id() {
      return `conversation-${this.model.cid}`;
    },
    template: $('#conversation').html(),
    render_attributes() {
      return {
        'send-message': i18n('sendMessage'),
      };
    },
    initialize(options) {
      // Events on Conversation model
      this.listenTo(this.model, 'destroy', this.stopListening);
      this.listenTo(this.model, 'change:verified', this.onVerifiedChange);
      this.listenTo(this.model, 'newmessage', this.addMessage);
      this.listenTo(this.model, 'opened', this.onOpened);
      this.listenTo(this.model, 'backgrounded', this.resetEmojiResults);
      this.listenTo(this.model, 'scroll-to-message', this.scrollToMessage);
      this.listenTo(this.model, 'unload', reason =>
        this.unload(`model trigger - ${reason}`)
      );

      // Events on Message models - we still listen to these here because they
      //   can be emitted by the non-reduxified MessageDetail pane
      this.listenTo(
        this.model.messageCollection,
        'show-identity',
        this.showSafetyNumber
      );
      this.listenTo(this.model.messageCollection, 'force-send', this.forceSend);
      this.listenTo(this.model.messageCollection, 'delete', this.deleteMessage);
      this.listenTo(
        this.model.messageCollection,
        'show-visual-attachment',
        this.showLightbox
      );
      this.listenTo(
        this.model.messageCollection,
        'display-tap-to-view-message',
        this.displayTapToViewMessage
      );
      this.listenTo(
        this.model.messageCollection,
        'navigate-to',
        this.navigateTo
      );
      this.listenTo(
        this.model.messageCollection,
        'download-new-version',
        this.downloadNewVersion
      );

      this.lazyUpdateVerified = _.debounce(
        this.model.updateVerified.bind(this.model),
        1000 // one second
      );
      this.model.throttledGetProfiles =
        this.model.throttledGetProfiles ||
        _.throttle(
          this.model.getProfiles.bind(this.model),
          1000 * 60 * 5 // five minutes
        );
      this.debouncedMaybeGrabLinkPreview = _.debounce(
        this.maybeGrabLinkPreview.bind(this),
        200
      );
      this.debouncedSaveDraft = _.debounce(this.saveDraft.bind(this), 200);

      this.render();

      this.loadingScreen = new Whisper.ConversationLoadingScreen();
      this.loadingScreen.render();
      this.loadingScreen.$el.prependTo(this.$('.discussion-container'));

      this.window = options.window;
      const attachmentListEl = $(
        '<div class="module-composition-area__attachment-list"></div>'
      );

      this.attachmentListView = new Whisper.ReactWrapperView({
        el: attachmentListEl,
        Component: window.Signal.Components.AttachmentList,
        props: this.getPropsForAttachmentList(),
      });

      extension.windows.onClosed(() => {
        this.unload('windows closed');
      });

      this.setupHeader();
      this.setupTimeline();
      this.setupCompositionArea({ attachmentListEl: attachmentListEl[0] });
    },

    events: {
      'click .composition-area-placeholder': 'onClickPlaceholder',
      'click .bottom-bar': 'focusMessageField',
      'click .capture-audio .microphone': 'captureAudio',
      'change input.file-input': 'onChoseAttachment',

      dragover: 'onDragOver',
      dragleave: 'onDragLeave',
      drop: 'onDrop',
      paste: 'onPaste',
    },

    setupHeader() {
      const getHeaderProps = () => {
        const expireTimer = this.model.get('expireTimer');
        const expirationSettingName = expireTimer
          ? Whisper.ExpirationTimerOptions.getName(expireTimer || 0)
          : null;

        return {
          id: this.model.id,
          name: this.model.getName(),
          phoneNumber: this.model.getNumber(),
          profileName: this.model.getProfileName(),
          color: this.model.getColor(),
          avatarPath: this.model.getAvatarPath(),

          isVerified: this.model.isVerified(),
          isMe: this.model.isMe(),
          isGroup: !this.model.isPrivate(),
          isArchived: this.model.get('isArchived'),

          expirationSettingName,
          showBackButton: Boolean(this.panels && this.panels.length),
          timerOptions: Whisper.ExpirationTimerOptions.map(item => ({
            name: item.getName(),
            value: item.get('seconds'),
          })),

          onSetDisappearingMessages: seconds =>
            this.setDisappearingMessages(seconds),
          onDeleteMessages: () => this.destroyMessages(),
          onResetSession: () => this.endSession(),
          onSearchInConversation: () => {
            const { searchInConversation } = window.reduxActions.search;
            const name = this.model.isMe()
              ? i18n('noteToSelf')
              : this.model.getTitle();
            searchInConversation(this.model.id, name);
          },

          // These are view only and don't update the Conversation model, so they
          //   need a manual update call.
          onShowSafetyNumber: () => {
            this.showSafetyNumber();
          },
          onShowAllMedia: async () => {
            await this.showAllMedia();
            this.updateHeader();
          },
          onShowGroupMembers: async () => {
            await this.showMembers();
            this.updateHeader();
          },
          onGoBack: () => {
            this.resetPanel();
            this.updateHeader();
          },

          onArchive: () => {
            this.unload('archive');
            this.model.setArchived(true);
          },
          onMoveToInbox: () => {
            this.model.setArchived(false);
          },
        };
      };
      this.titleView = new Whisper.ReactWrapperView({
        className: 'title-wrapper',
        Component: window.Signal.Components.ConversationHeader,
        props: getHeaderProps(this.model),
      });
      this.updateHeader = () => this.titleView.update(getHeaderProps());
      this.listenTo(this.model, 'change', this.updateHeader);
      this.$('.conversation-header').append(this.titleView.el);
    },

    setupCompositionArea({ attachmentListEl }) {
      const compositionApi = { current: null };
      this.compositionApi = compositionApi;

      const micCellEl = $(`
        <div class="capture-audio">
          <button class="microphone"></button>
        </div>
      `)[0];

      const props = {
        id: this.model.id,
        compositionApi,
        onClickAddPack: () => this.showStickerManager(),
        onPickSticker: (packId, stickerId) =>
          this.sendStickerMessage({ packId, stickerId }),
        onSubmit: message => this.sendMessage(message),
        onEditorStateChange: (msg, caretLocation) =>
          this.onEditorStateChange(msg, caretLocation),
        onTextTooLong: () => this.showToast(Whisper.MessageBodyTooLongToast),
        onChooseAttachment: this.onChooseAttachment.bind(this),
        micCellEl,
        attachmentListEl,
      };

      this.compositionAreaView = new Whisper.ReactWrapperView({
        className: 'composition-area-wrapper',
        JSX: Signal.State.Roots.createCompositionArea(window.reduxStore, props),
      });

      // Finally, add it to the DOM
      this.$('.composition-area-placeholder').append(
        this.compositionAreaView.el
      );
    },

    setupTimeline() {
      const { id } = this.model;

      const replyToMessage = messageId => {
        this.setQuoteMessage(messageId);
      };
      const retrySend = messageId => {
        this.retrySend(messageId);
      };
      const deleteMessage = messageId => {
        this.deleteMessage(messageId);
      };
      const showMessageDetail = messageId => {
        this.showMessageDetail(messageId);
      };
      const openConversation = (conversationId, messageId) => {
        this.openConversation(conversationId, messageId);
      };
      const showContactDetail = options => {
        this.showContactDetail(options);
      };
      const showVisualAttachment = options => {
        this.showLightbox(options);
      };
      const downloadAttachment = options => {
        this.downloadAttachment(options);
      };
      const displayTapToViewMessage = messageId =>
        this.displayTapToViewMessage(messageId);
      const showIdentity = conversationId => {
        this.showSafetyNumber(conversationId);
      };
      const openLink = url => {
        this.navigateTo(url);
      };
      const downloadNewVersion = () => {
        this.downloadNewVersion();
      };

      const scrollToQuotedMessage = async options => {
        const { author, sentAt } = options;

        const conversationId = this.model.id;
        const messages = await getMessagesBySentAt(sentAt, {
          MessageCollection: Whisper.MessageCollection,
        });
        const message = messages.find(
          item =>
            item.get('conversationId') === conversationId &&
            item.getSource() === author
        );

        if (!message) {
          this.showToast(Whisper.OriginalNotFoundToast);
          return;
        }

        this.scrollToMessage(message.id);
      };

      const loadOlderMessages = async oldestMessageId => {
        const {
          messagesAdded,
          setMessagesLoading,
        } = window.reduxActions.conversations;
        const conversationId = this.model.id;

        setMessagesLoading(conversationId, true);
        const finish = this.setInProgressFetch();

        try {
          const message = await getMessageById(oldestMessageId, {
            Message: Whisper.Message,
          });
          if (!message) {
            throw new Error(
              `loadOlderMessages: failed to load message ${oldestMessageId}`
            );
          }

          const receivedAt = message.get('received_at');
          const models = await getOlderMessagesByConversation(conversationId, {
            receivedAt,
            limit: 500,
            MessageCollection: Whisper.MessageCollection,
          });

          if (models.length < 1) {
            window.log.warn(
              'loadOlderMessages: requested, but loaded no messages'
            );
            return;
          }

          const cleaned = await this.cleanModels(models);
          this.model.messageCollection.add(cleaned);

          const isNewMessage = false;
          messagesAdded(
            id,
            models.map(model => model.getReduxData()),
            isNewMessage,
            document.hasFocus()
          );
        } catch (error) {
          setMessagesLoading(conversationId, true);
          throw error;
        } finally {
          finish();
        }
      };
      const loadNewerMessages = async newestMessageId => {
        const {
          messagesAdded,
          setMessagesLoading,
        } = window.reduxActions.conversations;
        const conversationId = this.model.id;

        setMessagesLoading(conversationId, true);
        const finish = this.setInProgressFetch();

        try {
          const message = await getMessageById(newestMessageId, {
            Message: Whisper.Message,
          });
          if (!message) {
            throw new Error(
              `loadNewerMessages: failed to load message ${newestMessageId}`
            );
          }

          const receivedAt = message.get('received_at');
          const models = await getNewerMessagesByConversation(this.model.id, {
            receivedAt,
            limit: 500,
            MessageCollection: Whisper.MessageCollection,
          });

          if (models.length < 1) {
            window.log.warn(
              'loadNewerMessages: requested, but loaded no messages'
            );
            return;
          }

          const cleaned = await this.cleanModels(models);
          this.model.messageCollection.add(cleaned);

          const isNewMessage = false;
          messagesAdded(
            id,
            models.map(model => model.getReduxData()),
            isNewMessage,
            document.hasFocus()
          );
        } catch (error) {
          setMessagesLoading(conversationId, false);
          throw error;
        } finally {
          finish();
        }
      };
      const markMessageRead = async (messageId, forceFocus) => {
        // We need a forceFocus parameter because the BrowserWindow focus event fires
        //   before the document realizes that it has focus.
        if (!document.hasFocus() && !forceFocus) {
          return;
        }

        const message = await getMessageById(messageId, {
          Message: Whisper.Message,
        });
        if (!message) {
          throw new Error(
            `markMessageRead: failed to load message ${messageId}`
          );
        }

        await this.model.markRead(message.get('received_at'));
      };

      this.timelineView = new Whisper.ReactWrapperView({
        className: 'timeline-wrapper',
        JSX: Signal.State.Roots.createTimeline(window.reduxStore, {
          id,

          deleteMessage,
          displayTapToViewMessage,
          downloadAttachment,
          downloadNewVersion,
          loadNewerMessages,
          loadNewestMessages: this.loadNewestMessages.bind(this),
          loadAndScroll: this.loadAndScroll.bind(this),
          loadOlderMessages,
          markMessageRead,
          openConversation,
          openLink,
          replyToMessage,
          retrySend,
          scrollToQuotedMessage,
          showContactDetail,
          showIdentity,
          showMessageDetail,
          showVisualAttachment,
        }),
      });

      this.$('.timeline-placeholder').append(this.timelineView.el);
    },

    showToast(ToastView) {
      const toast = new ToastView();
      toast.$el.appendTo(this.$el);
      toast.render();
    },

    async cleanModels(collection) {
      const result = collection
        .filter(message => Boolean(message.id))
        .map(message => MessageController.register(message.id, message));

      const eliminated = collection.length - result.length;
      if (eliminated > 0) {
        window.log.warn(
          `cleanModels: Eliminated ${eliminated} messages without an id`
        );
      }

      for (let max = result.length, i = 0; i < max; i += 1) {
        const message = result[i];
        const { attributes } = message;
        const { schemaVersion } = attributes;

        if (schemaVersion < Message.VERSION_NEEDED_FOR_DISPLAY) {
          // Yep, we really do want to wait for each of these
          // eslint-disable-next-line no-await-in-loop
          const upgradedMessage = await upgradeMessageSchema(attributes);
          message.set(upgradedMessage);
          // eslint-disable-next-line no-await-in-loop
          await window.Signal.Data.saveMessage(upgradedMessage, {
            Message: Whisper.Message,
          });
        }
      }

      return result;
    },

    async scrollToMessage(messageId) {
      const message = await getMessageById(messageId, {
        Message: Whisper.Message,
      });
      if (!message) {
        throw new Error(`scrollToMessage: failed to load message ${messageId}`);
      }

      if (this.model.messageCollection.get(messageId)) {
        const { scrollToMessage } = window.reduxActions.conversations;
        scrollToMessage(this.model.id, messageId);
        return;
      }

      this.loadAndScroll(messageId);
    },

    setInProgressFetch() {
      let resolvePromise;
      this.model.inProgressFetch = new Promise(resolve => {
        resolvePromise = resolve;
      });

      const finish = () => {
        resolvePromise();
        this.model.inProgressFinish = null;
      };

      return finish;
    },

    async loadAndScroll(messageId, options) {
      const { disableScroll } = options || {};
      const {
        messagesReset,
        setMessagesLoading,
      } = window.reduxActions.conversations;
      const conversationId = this.model.id;

      setMessagesLoading(conversationId, true);
      const finish = this.setInProgressFetch();

      try {
        const message = await getMessageById(messageId, {
          Message: Whisper.Message,
        });
        if (!message) {
          throw new Error(
            `loadMoreAndScroll: failed to load message ${messageId}`
          );
        }

        const receivedAt = message.get('received_at');
        const older = await getOlderMessagesByConversation(conversationId, {
          limit: 250,
          receivedAt,
          MessageCollection: Whisper.MessageCollection,
        });
        const newer = await getNewerMessagesByConversation(conversationId, {
          limit: 250,
          receivedAt,
          MessageCollection: Whisper.MessageCollection,
        });
        const metrics = await getMessageMetricsForConversation(conversationId);

        const all = [...older.models, message, ...newer.models];

        const cleaned = await this.cleanModels(all);
        this.model.messageCollection.reset(cleaned);

        messagesReset(
          conversationId,
          cleaned.map(model => model.getReduxData()),
          metrics,
          disableScroll ? undefined : messageId
        );
      } catch (error) {
        setMessagesLoading(conversationId, false);
        throw error;
      } finally {
        finish();
      }
    },

    async loadNewestMessages(newestMessageId) {
      const {
        messagesReset,
        setMessagesLoading,
      } = window.reduxActions.conversations;
      const conversationId = this.model.id;

      setMessagesLoading(conversationId, true);
      const finish = this.setInProgressFetch();

      try {
        let scrollToLatestUnread = true;

        if (newestMessageId) {
          const message = await getMessageById(newestMessageId, {
            Message: Whisper.Message,
          });
          if (!message) {
            window.log.warn(
              `loadNewestMessages: did not find message ${newestMessageId}`
            );
          }

          // If newest in-memory message is unread, scrolling down would mean going to
          //   the very bottom, not the oldest unread.
          scrollToLatestUnread = !message.isUnread();
        }

        const metrics = await getMessageMetricsForConversation(conversationId);

        if (scrollToLatestUnread && metrics.oldestUnread) {
          this.loadAndScroll(metrics.oldestUnread.id, { disableScroll: true });
          return;
        }

        const messages = await getOlderMessagesByConversation(conversationId, {
          limit: 500,
          MessageCollection: Whisper.MessageCollection,
        });

        const cleaned = await this.cleanModels(messages);
        this.model.messageCollection.reset(cleaned);

        messagesReset(
          conversationId,
          cleaned.map(model => model.getReduxData()),
          metrics
        );
      } catch (error) {
        setMessagesLoading(conversationId, false);
        throw error;
      } finally {
        finish();
      }
    },

    // We need this, or clicking the reactified buttons will submit the form and send any
    //   mid-composition message content.
    onClickPlaceholder(e) {
      e.preventDefault();
    },

    onChooseAttachment() {
      this.$('input.file-input').click();
    },
    async onChoseAttachment() {
      const fileField = this.$('input.file-input');
      const files = fileField.prop('files');

      for (let i = 0, max = files.length; i < max; i += 1) {
        const file = files[i];
        // eslint-disable-next-line no-await-in-loop
        await this.maybeAddAttachment(file);
        this.toggleMicrophone();
      }

      fileField.val(null);
    },

    unload(reason) {
      window.log.info(
        'unloading conversation',
        this.model.idForLogging(),
        'due to:',
        reason
      );

      const { conversationUnloaded } = window.reduxActions.conversations;
      if (conversationUnloaded) {
        conversationUnloaded(this.model.id);
      }

      if (this.model.get('draftChanged')) {
        if (this.model.hasDraft()) {
          this.model.set({
            draftChanged: false,
            draftTimestamp: Date.now(),
            timestamp: Date.now(),
          });
        } else {
          this.model.set({
            draftChanged: false,
            draftTimestamp: null,
          });
        }

        // We don't wait here; we need to take down the view
        this.saveModel();

        this.model.updateLastMessage();
      }

      this.titleView.remove();
      this.timelineView.remove();

      if (this.attachmentListView) {
        this.attachmentListView.remove();
      }
      if (this.captionEditorView) {
        this.captionEditorView.remove();
      }
      if (this.stickerButtonView) {
        this.stickerButtonView.remove();
      }
      if (this.stickerPreviewModalView) {
        this.stickerPreviewModalView.remove();
      }
      if (this.captureAudioView) {
        this.captureAudioView.remove();
      }
      if (this.banner) {
        this.banner.remove();
      }
      if (this.lastSeenIndicator) {
        this.lastSeenIndicator.remove();
      }
      if (this.scrollDownButton) {
        this.scrollDownButton.remove();
      }
      if (this.quoteView) {
        this.quoteView.remove();
      }
      if (this.lightboxView) {
        this.lightboxView.remove();
      }
      if (this.lightboxGalleryView) {
        this.lightboxGalleryView.remove();
      }
      if (this.panels && this.panels.length) {
        for (let i = 0, max = this.panels.length; i < max; i += 1) {
          const panel = this.panels[i];
          panel.remove();
        }
      }

      this.remove();

      this.model.messageCollection.reset([]);
    },

    navigateTo(url) {
      window.location = url;
    },

    downloadNewVersion() {
      window.location = 'https://signal.org/download';
    },

    onDragOver(e) {
      if (e.originalEvent.dataTransfer.types[0] !== 'Files') {
        return;
      }

      e.stopPropagation();
      e.preventDefault();
      this.$el.addClass('dropoff');
    },

    onDragLeave(e) {
      if (e.originalEvent.dataTransfer.types[0] !== 'Files') {
        return;
      }

      e.stopPropagation();
      e.preventDefault();
    },

    async onDrop(e) {
      if (e.originalEvent.dataTransfer.types[0] !== 'Files') {
        return;
      }

      e.stopPropagation();
      e.preventDefault();

      const { files } = e.originalEvent.dataTransfer;
      for (let i = 0, max = files.length; i < max; i += 1) {
        const file = files[i];
        // eslint-disable-next-line no-await-in-loop
        await this.maybeAddAttachment(file);
      }
    },

    onPaste(e) {
      const { items } = e.originalEvent.clipboardData;
      let imgBlob = null;
      for (let i = 0; i < items.length; i += 1) {
        if (items[i].type.split('/')[0] === 'image') {
          imgBlob = items[i].getAsFile();
        }
      }
      if (imgBlob !== null) {
        const file = imgBlob;
        this.maybeAddAttachment(file);

        e.stopPropagation();
        e.preventDefault();
      }
    },

    getPropsForAttachmentList() {
      const draftAttachments = this.model.get('draftAttachments') || [];

      return {
        // In conversation model/redux
        attachments: draftAttachments.map(attachment => ({
          ...attachment,
          url: attachment.screenshotPath
            ? getAbsoluteDraftPath(attachment.screenshotPath)
            : getAbsoluteDraftPath(attachment.path),
        })),
        // Passed in from ConversationView
        onAddAttachment: this.onChooseAttachment.bind(this),
        onClickAttachment: this.onClickAttachment.bind(this),
        onCloseAttachment: this.onCloseAttachment.bind(this),
        onClose: this.clearAttachments.bind(this),
      };
    },

    onClickAttachment(attachment) {
      const getProps = () => ({
        url: attachment.url,
        caption: attachment.caption,
        attachment,
        onSave,
      });

      const onSave = caption => {
        // eslint-disable-next-line no-param-reassign
        attachment.caption = caption;
        this.captionEditorView.remove();
        Signal.Backbone.Views.Lightbox.hide();
        this.attachmentListView.update(this.getPropsForAttachmentList());
      };

      this.captionEditorView = new Whisper.ReactWrapperView({
        className: 'attachment-list-wrapper',
        Component: window.Signal.Components.CaptionEditor,
        props: getProps(),
        onClose: () => Signal.Backbone.Views.Lightbox.hide(),
      });
      Signal.Backbone.Views.Lightbox.show(this.captionEditorView.el);
    },

    async deleteDraftAttachment(attachment) {
      if (attachment.screenshotPath) {
        await deleteDraftFile(attachment.screenshotPath);
      }
      if (attachment.path) {
        await deleteDraftFile(attachment.path);
      }
    },

    async saveModel() {
      await window.Signal.Data.updateConversation(
        this.model.id,
        this.model.attributes,
        {
          Conversation: Whisper.Conversation,
        }
      );
    },

    async addAttachment(attachment) {
      const onDisk = await this.writeDraftAttachment(attachment);

      const draftAttachments = this.model.get('draftAttachments') || [];
      this.model.set({
        draftAttachments: [...draftAttachments, onDisk],
        draftChanged: true,
      });
      await this.saveModel();

      this.updateAttachmentsView();
    },

    async onCloseAttachment(attachment) {
      const draftAttachments = this.model.get('draftAttachments') || [];

      this.model.set({
        draftAttachments: _.reject(
          draftAttachments,
          item => item.path === attachment.path
        ),
        draftChanged: true,
      });

      this.updateAttachmentsView();

      await this.saveModel();
      await this.deleteDraftAttachment(attachment);
    },

    async clearAttachments() {
      this.voiceNoteAttachment = null;

      const draftAttachments = this.model.get('draftAttachments') || [];
      this.model.set({
        draftAttachments: [],
        draftChanged: true,
      });

      this.updateAttachmentsView();

      // We're fine doing this all at once; at most it should be 32 attachments
      await Promise.all([
        this.saveModel(),
        Promise.all(
          draftAttachments.map(attachment =>
            this.deleteDraftAttachment(attachment)
          )
        ),
      ]);
    },

    hasFiles() {
      const draftAttachments = this.model.get('draftAttachments') || [];
      return draftAttachments.length > 0;
    },

    async getFiles() {
      if (this.voiceNoteAttachment) {
        // We don't need to pull these off disk; we return them as-is
        return [this.voiceNoteAttachment];
      }

      const draftAttachments = this.model.get('draftAttachments') || [];
      const files = _.compact(
        await Promise.all(
          draftAttachments.map(attachment => this.getFile(attachment))
        )
      );
      return files;
    },

    async getFile(attachment) {
      if (!attachment) {
        return Promise.resolve();
      }

      const data = await readDraftData(attachment.path);
      if (data.byteLength !== attachment.size) {
        window.log.error(
          `Attachment size from disk ${
            data.byteLength
          } did not match attachment size ${attachment.size}`
        );
        return null;
      }

      return {
        ..._.pick(attachment, ['contentType', 'fileName', 'size']),
        data,
      };
    },

    arrayBufferFromFile(file) {
      return new Promise((resolve, reject) => {
        const FR = new FileReader();
        FR.onload = e => {
          resolve(e.target.result);
        };
        FR.onerror = reject;
        FR.onabort = reject;
        FR.readAsArrayBuffer(file);
      });
    },

    showFileSizeError({ limit, units, u }) {
      const toast = new Whisper.FileSizeToast({
        model: { limit, units: units[u] },
      });
      toast.$el.insertAfter(this.$el);
      toast.render();
    },

    updateAttachmentsView() {
      this.attachmentListView.update(this.getPropsForAttachmentList());
      this.toggleMicrophone();
      if (this.hasFiles()) {
        this.removeLinkPreview();
      }
    },

    async writeDraftAttachment(attachment) {
      let toWrite = attachment;

      if (toWrite.data) {
        const path = await writeNewDraftData(toWrite.data);
        toWrite = {
          ..._.omit(toWrite, ['data']),
          path,
        };
      }
      if (toWrite.screenshotData) {
        const screenshotPath = await writeNewDraftData(toWrite.screenshotData);
        toWrite = {
          ..._.omit(toWrite, ['screenshotData']),
          screenshotPath,
        };
      }

      return toWrite;
    },

    async maybeAddAttachment(file) {
      if (!file) {
        return;
      }

      const MB = 1000 * 1024;
      if (file.size > 100 * MB) {
        this.showFileSizeError({ limit: 100, units: ['MB'], u: 0 });
        return;
      }

      if (window.Signal.Util.isFileDangerous(file.name)) {
        this.showToast(Whisper.DangerousFileTypeToast);
        return;
      }

      const draftAttachments = this.model.get('draftAttachments') || [];
      if (draftAttachments.length >= 32) {
        this.showToast(Whisper.MaxAttachmentsToast);
        return;
      }

      const haveNonImage = _.any(
        draftAttachments,
        attachment => !MIME.isImage(attachment.contentType)
      );
      // You can't add another attachment if you already have a non-image staged
      if (haveNonImage) {
        this.showToast(Whisper.OneNonImageAtATimeToast);
        return;
      }

      // You can't add a non-image attachment if you already have attachments staged
      if (!MIME.isImage(file.type) && draftAttachments.length > 0) {
        this.showToast(Whisper.CannotMixImageAndNonImageAttachmentsToast);
        return;
      }

      let attachment;

      try {
        if (Signal.Util.GoogleChrome.isImageTypeSupported(file.type)) {
          attachment = await this.handleImageAttachment(file);
        } else if (Signal.Util.GoogleChrome.isVideoTypeSupported(file.type)) {
          attachment = await this.handleVideoAttachment(file);
        } else {
          const data = await this.arrayBufferFromFile(file);
          attachment = {
            data,
            size: data.byteLength,
            contentType: file.type,
            fileName: file.name,
          };
        }
      } catch (e) {
        window.log.error(
          `Was unable to generate thumbnail for file type ${file.type}`,
          e && e.stack ? e.stack : e
        );
        const data = await this.arrayBufferFromFile(file);
        attachment = {
          data,
          size: data.byteLength,
          contentType: file.type,
          fileName: file.name,
        };
      }

      try {
        if (!this.isSizeOkay(attachment)) {
          return;
        }
      } catch (error) {
        window.log.error(
          'Error ensuring that image is properly sized:',
          error && error.stack ? error.stack : error
        );

        this.showToast(Whisper.UnableToLoadToast);
        return;
      }

      this.addAttachment(attachment);
    },

    isSizeOkay(attachment) {
      let limitKb = 1000000;
      const type =
        attachment.contentType === 'image/gif'
          ? 'gif'
          : attachment.contentType.split('/')[0];

      switch (type) {
        case 'image':
          limitKb = 6000;
          break;
        case 'gif':
          limitKb = 25000;
          break;
        case 'audio':
          limitKb = 100000;
          break;
        case 'video':
          limitKb = 100000;
          break;
        default:
          limitKb = 100000;
          break;
      }
      if ((attachment.data.byteLength / 1024).toFixed(4) >= limitKb) {
        const units = ['kB', 'MB', 'GB'];
        let u = -1;
        let limit = limitKb * 1000;
        do {
          limit /= 1000;
          u += 1;
        } while (limit >= 1000 && u < units.length - 1);
        this.showFileSizeError({ limit, units, u });
        return false;
      }

      return true;
    },

    async handleVideoAttachment(file) {
      const objectUrl = URL.createObjectURL(file);
      if (!objectUrl) {
        throw new Error('Failed to create object url for video!');
      }
      try {
        const screenshotContentType = 'image/png';
        const screenshotBlob = await VisualAttachment.makeVideoScreenshot({
          objectUrl,
          contentType: screenshotContentType,
          logger: window.log,
        });
        const screenshotData = await VisualAttachment.blobToArrayBuffer(
          screenshotBlob
        );
        const data = await this.arrayBufferFromFile(file);

        return {
          fileName: file.name,
          screenshotContentType,
          screenshotData,
          screenshotSize: screenshotData.byteLength,
          contentType: file.type,
          data,
          size: data.byteLength,
        };
      } finally {
        URL.revokeObjectURL(objectUrl);
      }
    },

    async handleImageAttachment(file) {
      if (MIME.isJPEG(file.type)) {
        const rotatedDataUrl = await window.autoOrientImage(file);
        const rotatedBlob = VisualAttachment.dataURLToBlobSync(rotatedDataUrl);
        const { contentType, file: resizedBlob } = await this.autoScale({
          contentType: file.type,
          rotatedBlob,
        });
        const data = await await VisualAttachment.blobToArrayBuffer(
          resizedBlob
        );

        return {
          fileName: file.name,
          contentType,
          data,
          size: data.byteLength,
        };
      }

      const { contentType, file: resizedBlob } = await this.autoScale({
        contentType: file.type,
        file,
      });
      const data = await await VisualAttachment.blobToArrayBuffer(resizedBlob);
      return {
        fileName: file.name,
        contentType,
        data,
        size: data.byteLength,
      };
    },

    autoScale(attachment) {
      const { contentType, file } = attachment;
      if (
        contentType.split('/')[0] !== 'image' ||
        contentType === 'image/tiff'
      ) {
        // nothing to do
        return Promise.resolve(attachment);
      }

      return new Promise((resolve, reject) => {
        const url = URL.createObjectURL(file);
        const img = document.createElement('img');
        img.onerror = reject;
        img.onload = () => {
          URL.revokeObjectURL(url);

          const maxSize = 6000 * 1024;
          const maxHeight = 4096;
          const maxWidth = 4096;
          if (
            img.naturalWidth <= maxWidth &&
            img.naturalHeight <= maxHeight &&
            file.size <= maxSize
          ) {
            resolve(attachment);
            return;
          }

          const gifMaxSize = 25000 * 1024;
          if (file.type === 'image/gif' && file.size <= gifMaxSize) {
            resolve(attachment);
            return;
          }

          if (file.type === 'image/gif') {
            reject(new Error('GIF is too large'));
            return;
          }

          const targetContentType = 'image/jpeg';
          const canvas = loadImage.scale(img, {
            canvas: true,
            maxWidth,
            maxHeight,
          });

          let quality = 0.95;
          let i = 4;
          let blob;
          do {
            i -= 1;
            blob = window.dataURLToBlobSync(
              canvas.toDataURL(targetContentType, quality)
            );
            quality = quality * maxSize / blob.size;
            // NOTE: During testing with a large image, we observed the
            // `quality` value being > 1. Should we clamp it to [0.5, 1.0]?
            // See: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#Syntax
            if (quality < 0.5) {
              quality = 0.5;
            }
          } while (i > 0 && blob.size > maxSize);

          resolve({
            ...attachment,
            fileName: this.fixExtension(attachment.fileName, targetContentType),
            contentType: targetContentType,
            file: blob,
          });
        };
        img.src = url;
      });
    },

    getFileName(fileName) {
      if (!fileName) {
        return '';
      }

      if (!fileName.includes('.')) {
        return fileName;
      }

      return fileName
        .split('.')
        .slice(0, -1)
        .join('.');
    },

    getType(contentType) {
      if (!contentType) {
        return '';
      }

      if (!contentType.includes('/')) {
        return contentType;
      }

      return contentType.split('/')[1];
    },

    fixExtension(fileName, contentType) {
      const extension = this.getType(contentType);
      const name = this.getFileName(fileName);
      return `${name}.${extension}`;
    },

    markAllAsVerifiedDefault(unverified) {
      return Promise.all(
        unverified.map(contact => {
          if (contact.isUnverified()) {
            return contact.setVerifiedDefault();
          }

          return null;
        })
      );
    },

    markAllAsApproved(untrusted) {
      return Promise.all(untrusted.map(contact => contact.setApproved()));
    },

    openSafetyNumberScreens(unverified) {
      if (unverified.length === 1) {
        this.showSafetyNumber(unverified.at(0).id);
        return;
      }

      this.showMembers(null, unverified, { needVerify: true });
    },

    onVerifiedChange() {
      if (this.model.isUnverified()) {
        const unverified = this.model.getUnverified();
        let message;
        if (!unverified.length) {
          return;
        }
        if (unverified.length > 1) {
          message = i18n('multipleNoLongerVerified');
        } else {
          message = i18n('noLongerVerified', unverified.at(0).getTitle());
        }

        // Need to re-add, since unverified set may have changed
        if (this.banner) {
          this.banner.remove();
          this.banner = null;
        }

        this.banner = new Whisper.BannerView({
          message,
          onDismiss: () => {
            this.markAllAsVerifiedDefault(unverified);
          },
          onClick: () => {
            this.openSafetyNumberScreens(unverified);
          },
        });

        const container = this.$('.discussion-container');
        container.append(this.banner.el);
      } else if (this.banner) {
        this.banner.remove();
        this.banner = null;
      }
    },

    toggleMicrophone() {
      this.compositionApi.current.setShowMic(!this.hasFiles());
    },

    captureAudio(e) {
      e.preventDefault();

      if (this.hasFiles()) {
        this.showToast(Whisper.VoiceNoteMustBeOnlyAttachmentToast);
        return;
      }

      // Note - clicking anywhere will close the audio capture panel, due to
      //   the onClick handler in InboxView, which calls its closeRecording method.

      if (this.captureAudioView) {
        this.captureAudioView.remove();
        this.captureAudioView = null;
      }

      this.captureAudioView = new Whisper.RecorderView();

      const view = this.captureAudioView;
      view.render();
      view.on('send', this.handleAudioCapture.bind(this));
      view.on('closed', this.endCaptureAudio.bind(this));
      view.$el.appendTo(this.$('.capture-audio'));
      this.compositionApi.current.setMicActive(true);

      this.disableMessageField();
      this.$('.microphone').hide();
    },
    async handleAudioCapture(blob) {
      if (this.hasFiles()) {
        throw new Error('A voice note cannot be sent with other attachments');
      }

      const data = await this.arrayBufferFromFile(blob);

      // These aren't persisted to disk; they are meant to be sent immediately
      this.voiceNoteAttachment = {
        contentType: blob.type,
        data,
        size: data.byteLength,
        flags: textsecure.protobuf.AttachmentPointer.Flags.VOICE_MESSAGE,
      };

      this.sendMessage();
    },
    endCaptureAudio() {
      this.enableMessageField();
      this.$('.microphone').show();
      this.captureAudioView = null;
      this.compositionApi.current.setMicActive(false);
    },

    async onOpened(messageId) {
      if (messageId) {
        const message = await getMessageById(messageId, {
          Message: Whisper.Message,
        });

        if (message) {
          this.loadAndScroll(messageId);
          return;
        }

        window.log.warn(`onOpened: Did not find message ${messageId}`);
      }

      this.loadNewestMessages();

      this.focusMessageField();

      const quotedMessageId = this.model.get('quotedMessageId');
      if (quotedMessageId) {
        this.setQuoteMessage(quotedMessageId);
      }

      this.model.updateLastMessage();

      const statusPromise = this.model.throttledGetProfiles();
      // eslint-disable-next-line more/no-then
      this.statusFetch = statusPromise.then(() =>
        // eslint-disable-next-line more/no-then
        this.model.updateVerified().then(() => {
          this.onVerifiedChange();
          this.statusFetch = null;
        })
      );
    },

    async retrySend(messageId) {
      const message = this.model.messageCollection.get(messageId);
      if (!message) {
        throw new Error(`retrySend: Did not find message for id ${messageId}`);
      }
      await message.retrySend();
    },

    async showAllMedia() {
      // We fetch more documents than media as they don’t require to be loaded
      // into memory right away. Revisit this once we have infinite scrolling:
      const DEFAULT_MEDIA_FETCH_COUNT = 50;
      const DEFAULT_DOCUMENTS_FETCH_COUNT = 150;

      const conversationId = this.model.get('id');

      const getProps = async () => {
        const rawMedia = await Signal.Data.getMessagesWithVisualMediaAttachments(
          conversationId,
          {
            limit: DEFAULT_MEDIA_FETCH_COUNT,
            MessageCollection: Whisper.MessageCollection,
          }
        );
        const rawDocuments = await Signal.Data.getMessagesWithFileAttachments(
          conversationId,
          {
            limit: DEFAULT_DOCUMENTS_FETCH_COUNT,
            MessageCollection: Whisper.MessageCollection,
          }
        );

        // First we upgrade these messages to ensure that they have thumbnails
        for (let max = rawMedia.length, i = 0; i < max; i += 1) {
          const message = rawMedia[i];
          const { schemaVersion } = message;

          if (schemaVersion < Message.VERSION_NEEDED_FOR_DISPLAY) {
            // Yep, we really do want to wait for each of these
            // eslint-disable-next-line no-await-in-loop
            rawMedia[i] = await upgradeMessageSchema(message);
            // eslint-disable-next-line no-await-in-loop
            await window.Signal.Data.saveMessage(rawMedia[i], {
              Message: Whisper.Message,
            });
          }
        }

        const media = _.flatten(
          rawMedia.map(message => {
            const { attachments } = message;
            return (attachments || [])
              .filter(
                attachment =>
                  attachment.thumbnail &&
                  !attachment.pending &&
                  !attachment.error
              )
              .map((attachment, index) => {
                const { thumbnail } = attachment;

                return {
                  objectURL: getAbsoluteAttachmentPath(attachment.path),
                  thumbnailObjectUrl: thumbnail
                    ? getAbsoluteAttachmentPath(thumbnail.path)
                    : null,
                  contentType: attachment.contentType,
                  index,
                  attachment,
                  message,
                };
              });
          })
        );

        // Unlike visual media, only one non-image attachment is supported
        const documents = rawDocuments
          .filter(message =>
            Boolean(message.attachments && message.attachments.length)
          )
          .map(message => {
            const attachments = message.attachments || [];
            const attachment = attachments[0];
            return {
              contentType: attachment.contentType,
              index: 0,
              attachment,
              message,
            };
          });

        const saveAttachment = async ({ attachment, message } = {}) => {
          const timestamp = message.sent_at;
          Signal.Types.Attachment.save({
            attachment,
            document,
            getAbsolutePath: getAbsoluteAttachmentPath,
            timestamp,
          });
        };

        const onItemClick = async ({ message, attachment, type }) => {
          switch (type) {
            case 'documents': {
              saveAttachment({ message, attachment });
              break;
            }

            case 'media': {
              const selectedIndex = media.findIndex(
                mediaMessage => mediaMessage.attachment.path === attachment.path
              );
              this.lightboxGalleryView = new Whisper.ReactWrapperView({
                className: 'lightbox-wrapper',
                Component: Signal.Components.LightboxGallery,
                props: {
                  media,
                  onSave: saveAttachment,
                  selectedIndex,
                },
                onClose: () => Signal.Backbone.Views.Lightbox.hide(),
              });
              Signal.Backbone.Views.Lightbox.show(this.lightboxGalleryView.el);
              break;
            }

            default:
              throw new TypeError(`Unknown attachment type: '${type}'`);
          }
        };

        return {
          documents,
          media,
          onItemClick,
        };
      };

      const view = new Whisper.ReactWrapperView({
        className: 'panel',
        Component: Signal.Components.MediaGallery,
        props: await getProps(),
        onClose: () => {
          this.stopListening(this.model.messageCollection, 'remove', update);
          this.resetPanel();
        },
      });

      const update = async () => {
        view.update(await getProps());
      };

      this.listenTo(this.model.messageCollection, 'remove', update);

      this.listenBack(view);
    },

    focusMessageField() {
      if (this.panels && this.panels.length) {
        return;
      }

      const { compositionApi } = this;

      if (compositionApi && compositionApi.current) {
        compositionApi.current.focusInput();
      }
    },

    focusMessageFieldAndClearDisabled() {
      this.compositionApi.current.setDisabled(false);
      this.focusMessageField();
    },

    disableMessageField() {
      this.compositionApi.current.setDisabled(true);
    },

    enableMessageField() {
      this.compositionApi.current.setDisabled(false);
    },

    resetEmojiResults() {
      this.compositionApi.current.resetEmojiResults(false);
    },

    async addMessage(message) {
      // This is debounced, so it won't hit the database too often.
      this.lazyUpdateVerified();

      // We do this here because we don't want convo.messageCollection to have
      //   anything in it unless it has an associated view. This is so, when we
      //   fetch on open, it's clean.
      this.model.addSingleMessage(message);
    },

    async showMembers(e, providedMembers, options = {}) {
      _.defaults(options, { needVerify: false });

      const model = providedMembers || this.model.contactCollection;
      const view = new Whisper.GroupMemberList({
        model,
        // we pass this in to allow nested panels
        listenBack: this.listenBack.bind(this),
        needVerify: options.needVerify,
      });

      this.listenBack(view);
    },

    forceSend({ contactId, messageId }) {
      const contact = ConversationController.get(contactId);
      const message = this.model.messageCollection.get(messageId);
      if (!message) {
        throw new Error(
          `deleteMessage: Did not find message for id ${messageId}`
        );
      }

      const dialog = new Whisper.ConfirmationDialogView({
        message: i18n('identityKeyErrorOnSend', [
          contact.getTitle(),
          contact.getTitle(),
        ]),
        okText: i18n('sendAnyway'),
        resolve: async () => {
          await contact.updateVerified();

          if (contact.isUnverified()) {
            await contact.setVerifiedDefault();
          }

          const untrusted = await contact.isUntrusted();
          if (untrusted) {
            await contact.setApproved();
          }

          message.resend(contact.id);
        },
      });

      this.$el.prepend(dialog.el);
      dialog.focusCancel();
    },

    showSafetyNumber(id) {
      let conversation;

      if (!id && this.model.isPrivate()) {
        // eslint-disable-next-line prefer-destructuring
        conversation = this.model;
      } else {
        conversation = ConversationController.get(id);
      }
      if (conversation) {
        const view = new Whisper.KeyVerificationPanelView({
          model: conversation,
        });
        this.listenBack(view);
        this.updateHeader();
      }
    },

    downloadAttachment({ attachment, timestamp, isDangerous }) {
      if (isDangerous) {
        this.showToast(Whisper.DangerousFileTypeToast);
        return;
      }

      Signal.Types.Attachment.save({
        attachment,
        document,
        getAbsolutePath: getAbsoluteAttachmentPath,
        timestamp,
      });
    },

    async displayTapToViewMessage(messageId) {
      const message = this.model.messageCollection.get(messageId);
      if (!message) {
        throw new Error(
          `displayTapToViewMessage: Did not find message for id ${messageId}`
        );
      }

      if (!message.isTapToView()) {
        throw new Error(
          `displayTapToViewMessage: Message ${message.idForLogging()} is not a tap to view message`
        );
      }

      if (message.isErased()) {
        throw new Error(
          `displayTapToViewMessage: Message ${message.idForLogging()} is already erased`
        );
      }

      const firstAttachment = message.get('attachments')[0];
      if (!firstAttachment || !firstAttachment.path) {
        throw new Error(
          `displayTapToViewMessage: Message ${message.idForLogging()} had no first attachment with path`
        );
      }

      const absolutePath = getAbsoluteAttachmentPath(firstAttachment.path);
      const tempPath = await copyIntoTempDirectory(absolutePath);
      const tempAttachment = {
        ...firstAttachment,
        path: tempPath,
      };

      await message.markViewed();

      const closeLightbox = async () => {
        if (!this.lightboxView) {
          return;
        }

        const { lightboxView } = this;
        this.lightboxView = null;

        this.stopListening(message);
        Signal.Backbone.Views.Lightbox.hide();
        lightboxView.remove();

        await deleteTempFile(tempPath);
      };
      this.listenTo(message, 'expired', closeLightbox);
      this.listenTo(message, 'change', () => {
        if (this.lightBoxView) {
          this.lightBoxView.update(getProps());
        }
      });

      const getProps = () => {
        const { path, contentType } = tempAttachment;

        return {
          objectURL: getAbsoluteTempPath(path),
          contentType,
        };
      };
      this.lightboxView = new Whisper.ReactWrapperView({
        className: 'lightbox-wrapper',
        Component: Signal.Components.Lightbox,
        props: getProps(),
        onClose: closeLightbox,
      });

      Signal.Backbone.Views.Lightbox.show(this.lightboxView.el);
    },

    deleteMessage(messageId) {
      const message = this.model.messageCollection.get(messageId);
      if (!message) {
        throw new Error(
          `deleteMessage: Did not find message for id ${messageId}`
        );
      }

      const dialog = new Whisper.ConfirmationDialogView({
        message: i18n('deleteWarning'),
        okText: i18n('delete'),
        resolve: () => {
          window.Signal.Data.removeMessage(message.id, {
            Message: Whisper.Message,
          });
          message.trigger('unload');
          this.model.messageCollection.remove(message.id);
          this.resetPanel();
          this.updateHeader();
        },
      });

      this.$el.prepend(dialog.el);
      dialog.focusCancel();
    },

    showStickerPackPreview(packId, packKey) {
      if (!window.ENABLE_STICKER_SEND) {
        return;
      }

      window.Signal.Stickers.downloadEphemeralPack(packId, packKey);

      const props = {
        packId,
        onClose: async () => {
          this.stickerPreviewModalView.remove();
          this.stickerPreviewModalView = null;
          await window.Signal.Stickers.removeEphemeralPack(packId);
        },
      };

      this.stickerPreviewModalView = new Whisper.ReactWrapperView({
        className: 'sticker-preview-modal-wrapper',
        JSX: Signal.State.Roots.createStickerPreviewModal(
          window.reduxStore,
          props
        ),
      });
    },

    showLightbox({ attachment, messageId }) {
      const message = this.model.messageCollection.get(messageId);
      if (!message) {
        throw new Error(
          `showLightbox: did not find message for id ${messageId}`
        );
      }
      const sticker = message.get('sticker');
      if (sticker) {
        const { packId, packKey } = sticker;
        this.showStickerPackPreview(packId, packKey);
        return;
      }

      const { contentType, path } = attachment;

      if (
        !Signal.Util.GoogleChrome.isImageTypeSupported(contentType) &&
        !Signal.Util.GoogleChrome.isVideoTypeSupported(contentType)
      ) {
        this.downloadAttachment({ attachment, message });
        return;
      }

      const attachments = message.get('attachments') || [];

      const media = attachments
        .filter(item => item.thumbnail && !item.pending && !item.error)
        .map((item, index) => ({
          objectURL: getAbsoluteAttachmentPath(item.path),
          path: item.path,
          contentType: item.contentType,
          index,
          message,
          attachment: item,
        }));

      if (media.length === 1) {
        const props = {
          objectURL: getAbsoluteAttachmentPath(path),
          contentType,
          caption: attachment.caption,
          onSave: () => {
            const timestamp = message.get('sent_at');
            this.downloadAttachment({ attachment, timestamp, message });
          },
        };
        this.lightboxView = new Whisper.ReactWrapperView({
          className: 'lightbox-wrapper',
          Component: Signal.Components.Lightbox,
          props,
          onClose: () => {
            Signal.Backbone.Views.Lightbox.hide();
            this.stopListening(message);
          },
        });
        this.listenTo(message, 'expired', () => this.lightboxView.remove());
        Signal.Backbone.Views.Lightbox.show(this.lightboxView.el);
        return;
      }

      const selectedIndex = _.findIndex(
        media,
        item => attachment.path === item.path
      );

      const onSave = async (options = {}) => {
        Signal.Types.Attachment.save({
          attachment: options.attachment,
          document,
          index: options.index + 1,
          getAbsolutePath: getAbsoluteAttachmentPath,
          timestamp: options.message.get('sent_at'),
        });
      };

      const props = {
        media,
        selectedIndex: selectedIndex >= 0 ? selectedIndex : 0,
        onSave,
      };
      this.lightboxGalleryView = new Whisper.ReactWrapperView({
        className: 'lightbox-wrapper',
        Component: Signal.Components.LightboxGallery,
        props,
        onClose: () => {
          Signal.Backbone.Views.Lightbox.hide();
          this.stopListening(message);
        },
      });
      this.listenTo(message, 'expired', () =>
        this.lightboxGalleryView.remove()
      );
      Signal.Backbone.Views.Lightbox.show(this.lightboxGalleryView.el);
    },

    showMessageDetail(messageId) {
      const message = this.model.messageCollection.get(messageId);
      if (!message) {
        throw new Error(
          `showMessageDetail: Did not find message for id ${messageId}`
        );
      }

      const onClose = () => {
        this.stopListening(message, 'change', update);
        this.resetPanel();
        this.updateHeader();
      };

      const props = message.getPropsForMessageDetail();
      const view = new Whisper.ReactWrapperView({
        className: 'panel message-detail-wrapper',
        Component: Signal.Components.MessageDetail,
        props,
        onClose,
      });

      const update = () => view.update(message.getPropsForMessageDetail());
      this.listenTo(message, 'change', update);
      this.listenTo(message, 'expired', onClose);
      // We could listen to all involved contacts, but we'll call that overkill

      this.listenBack(view);
      this.updateHeader();
      view.render();
    },

    showStickerManager() {
      const view = new Whisper.ReactWrapperView({
        className: ['sticker-manager-wrapper', 'panel'].join(' '),
        JSX: Signal.State.Roots.createStickerManager(window.reduxStore),
        onClose: () => {
          this.resetPanel();
          this.updateHeader();
        },
      });

      this.listenBack(view);
      this.updateHeader();
      view.render();
    },

    showContactDetail({ contact, signalAccount }) {
      const view = new Whisper.ReactWrapperView({
        Component: Signal.Components.ContactDetail,
        className: 'contact-detail-pane panel',
        props: {
          contact,
          signalAccount,
          onSendMessage: () => {
            if (signalAccount) {
              this.openConversation(signalAccount);
            }
          },
        },
        onClose: () => {
          this.resetPanel();
          this.updateHeader();
        },
      });

      this.listenBack(view);
      this.updateHeader();
    },

    async openConversation(number) {
      window.Whisper.events.trigger('showConversation', number);
    },

    listenBack(view) {
      this.panels = this.panels || [];
      this.panels.unshift(view);
      view.$el.insertAfter(this.$('.panel').last());
      view.$el.one('animationend', () => {
        view.$el.addClass('panel--static');
      });
    },
    resetPanel() {
      if (!this.panels || !this.panels.length) {
        return;
      }

      const view = this.panels.shift();

      if (this.panels.length > 0) {
        this.panels[0].$el.fadeIn(250);
      }
      view.$el.addClass('panel--remove').one('transitionend', () => {
        view.remove();
        if (this.panels.length === 0) {
          // Make sure poppers are positioned properly
          window.dispatchEvent(new Event('resize'));
        }
      });
    },

    endSession() {
      this.model.endSession();
    },

    setDisappearingMessages(seconds) {
      if (seconds > 0) {
        this.model.updateExpirationTimer(seconds);
      } else {
        this.model.updateExpirationTimer(null);
      }
    },

    async destroyMessages() {
      try {
        await this.confirm(i18n('deleteConversationConfirmation'));
        try {
          this.unload('delete messages');
          await this.model.destroyMessages();
          Whisper.events.trigger('unloadConversation', this.model.id);
          this.model.updateLastMessage();
        } catch (error) {
          window.log.error(
            'destroyMessages: Failed to successfully delete conversation',
            error && error.stack ? error.stack : error
          );
        }
      } catch (error) {
        // nothing to see here, user canceled out of dialog
      }
    },

    showSendAnywayDialog(contacts) {
      return new Promise(resolve => {
        let message;
        const isUnverified = this.model.isUnverified();

        if (contacts.length > 1) {
          if (isUnverified) {
            message = i18n('changedSinceVerifiedMultiple');
          } else {
            message = i18n('changedRecentlyMultiple');
          }
        } else {
          const contactName = contacts.at(0).getTitle();
          if (isUnverified) {
            message = i18n('changedSinceVerified', [contactName, contactName]);
          } else {
            message = i18n('changedRecently', [contactName, contactName]);
          }
        }

        const dialog = new Whisper.ConfirmationDialogView({
          message,
          okText: i18n('sendAnyway'),
          resolve: () => resolve(true),
          reject: () => resolve(false),
        });

        this.$el.prepend(dialog.el);
        dialog.focusCancel();
      });
    },

    async sendStickerMessage(options = {}) {
      try {
        const contacts = await this.getUntrustedContacts(options);

        if (contacts && contacts.length) {
          const sendAnyway = await this.showSendAnywayDialog(contacts);
          if (sendAnyway) {
            this.sendStickerMessage({ ...options, force: true });
          }

          return;
        }

        const { packId, stickerId } = options;
        this.model.sendStickerMessage(packId, stickerId);
      } catch (error) {
        window.log.error(
          'clickSend error:',
          error && error.stack ? error.stack : error
        );
      }
    },

    async getUntrustedContacts(options = {}) {
      // This will go to the trust store for the latest identity key information,
      //   and may result in the display of a new banner for this conversation.
      await this.model.updateVerified();
      const unverifiedContacts = this.model.getUnverified();

      if (options.force) {
        if (unverifiedContacts.length) {
          await this.markAllAsVerifiedDefault(unverifiedContacts);
          // We only want force to break us through one layer of checks
          // eslint-disable-next-line no-param-reassign
          options.force = false;
        }
      } else if (unverifiedContacts.length) {
        return unverifiedContacts;
      }

      const untrustedContacts = await this.model.getUntrusted();

      if (options.force) {
        if (untrustedContacts.length) {
          await this.markAllAsApproved(untrustedContacts);
        }
      } else if (untrustedContacts.length) {
        return untrustedContacts;
      }

      return null;
    },

    async setQuoteMessage(messageId) {
      this.quote = null;
      this.quotedMessage = null;

      const existing = this.model.get('quotedMessageId');
      if (existing !== messageId) {
        this.model.set({
          quotedMessageId: messageId,
          draftChanged: true,
        });

        await this.saveModel();
      }

      if (this.quoteHolder) {
        this.quoteHolder.unload();
        this.quoteHolder = null;
      }

      if (messageId) {
        const model = await getMessageById(messageId, {
          Message: Whisper.Message,
        });
        if (model) {
          const message = MessageController.register(model.id, model);
          this.quotedMessage = message;

          if (message) {
            const quote = await this.model.makeQuote(this.quotedMessage);
            this.quote = quote;

            this.focusMessageFieldAndClearDisabled();
          }
        }
      }

      this.renderQuotedMessage();
    },

    renderQuotedMessage() {
      if (this.quoteView) {
        this.quoteView.remove();
        this.quoteView = null;
      }
      if (!this.quotedMessage) {
        return;
      }

      const message = new Whisper.Message({
        conversationId: this.model.id,
        quote: this.quote,
      });
      message.quotedMessage = this.quotedMessage;
      this.quoteHolder = message;

      const props = message.getPropsForQuote();

      this.listenTo(message, 'scroll-to-message', () => {
        this.scrollToMessage(message.quotedMessage.id);
      });

      const contact = this.quotedMessage.getContact();
      if (contact) {
        this.listenTo(contact, 'change', this.renderQuotedMesage);
      }

      this.quoteView = new Whisper.ReactWrapperView({
        className: 'quote-wrapper',
        Component: window.Signal.Components.Quote,
        elCallback: el =>
          this.$(this.compositionApi.current.attSlotRef.current).prepend(el),
        props: Object.assign({}, props, {
          withContentAbove: true,
          onClose: () => {
            this.setQuoteMessage(null);
          },
        }),
      });
    },

    async sendMessage(message = '', options = {}) {
      this.sendStart = Date.now();

      try {
        const contacts = await this.getUntrustedContacts(options);
        this.disableMessageField();

        if (contacts && contacts.length) {
          const sendAnyway = await this.showSendAnywayDialog(contacts);
          if (sendAnyway) {
            this.sendMessage(message, { force: true });
            return;
          }

          this.focusMessageFieldAndClearDisabled();
          return;
        }
      } catch (error) {
        this.focusMessageFieldAndClearDisabled();
        window.log.error(
          'sendMessage error:',
          error && error.stack ? error.stack : error
        );
        return;
      }

      this.model.clearTypingTimers();

      let ToastView;
      if (extension.expired()) {
        ToastView = Whisper.ExpiredToast;
      }
      if (this.model.isPrivate() && storage.isBlocked(this.model.id)) {
        ToastView = Whisper.BlockedToast;
      }
      if (!this.model.isPrivate() && storage.isGroupBlocked(this.model.id)) {
        ToastView = Whisper.BlockedGroupToast;
      }
      if (!this.model.isPrivate() && this.model.get('left')) {
        ToastView = Whisper.LeftGroupToast;
      }
      if (message.length > MAX_MESSAGE_BODY_LENGTH) {
        ToastView = Whisper.MessageBodyTooLongToast;
      }

      if (ToastView) {
        this.showToast(ToastView);
        this.focusMessageFieldAndClearDisabled();
        return;
      }

      try {
        if (!message.length && !this.hasFiles() && !this.voiceNoteAttachment) {
          return;
        }

        const attachments = await this.getFiles();
        const sendDelta = Date.now() - this.sendStart;
        window.log.info('Send pre-checks took', sendDelta, 'milliseconds');

        this.model.sendMessage(
          message,
          attachments,
          this.quote,
          this.getLinkPreview()
        );

        this.compositionApi.current.reset();
        this.setQuoteMessage(null);
        this.resetLinkPreview();
        this.clearAttachments();
      } catch (error) {
        window.log.error(
          'Error pulling attached files before send',
          error && error.stack ? error.stack : error
        );
      } finally {
        this.focusMessageFieldAndClearDisabled();
      }
    },

    onEditorStateChange(messageText, caretLocation) {
      this.maybeBumpTyping(messageText);
      this.debouncedSaveDraft(messageText);
      this.debouncedMaybeGrabLinkPreview(messageText, caretLocation);
    },

    async saveDraft(messageText) {
      const trimmed =
        messageText && messageText.length > 0 ? messageText.trim() : '';

      if (this.model.get('draft') && (!messageText || trimmed.length === 0)) {
        this.model.set({
          draft: null,
          draftChanged: true,
        });
        await this.saveModel();

        return;
      }

      if (messageText !== this.model.get('draft')) {
        this.model.set({
          draft: messageText,
          draftChanged: true,
        });
        await this.saveModel();
      }
    },

    maybeGrabLinkPreview(message, caretLocation) {
      // Don't generate link previews if user has turned them off
      if (!storage.get('linkPreviews', false)) {
        return;
      }
      // Do nothing if we're offline
      if (!textsecure.messaging) {
        return;
      }
      // If we have attachments, don't add link preview
      if (this.hasFiles()) {
        return;
      }
      // If we're behind a user-configured proxy, we don't support link previews
      if (window.isBehindProxy()) {
        return;
      }

      if (!message) {
        this.resetLinkPreview();
        return;
      }
      if (this.disableLinkPreviews) {
        return;
      }

      const links = window.Signal.LinkPreviews.findLinks(
        message,
        caretLocation
      );
      const { currentlyMatchedLink } = this;
      if (links.includes(currentlyMatchedLink)) {
        return;
      }

      this.currentlyMatchedLink = null;
      this.excludedPreviewUrls = this.excludedPreviewUrls || [];

      const link = links.find(
        item =>
          window.Signal.LinkPreviews.isLinkInWhitelist(item) &&
          !this.excludedPreviewUrls.includes(item)
      );
      if (!link) {
        this.removeLinkPreview();
        return;
      }

      this.currentlyMatchedLink = link;
      this.addLinkPreview(link);
    },

    resetLinkPreview() {
      this.disableLinkPreviews = false;
      this.excludedPreviewUrls = [];
      this.removeLinkPreview();
    },

    removeLinkPreview() {
      (this.preview || []).forEach(item => {
        if (item.url) {
          URL.revokeObjectURL(item.url);
        }
      });
      this.preview = null;
      this.previewLoading = null;
      this.currentlyMatchedLink = false;
      this.renderLinkPreview();
    },

    async makeChunkedRequest(url) {
      const PARALLELISM = 3;
      const first = await textsecure.messaging.makeProxiedRequest(url, {
        start: 0,
        end: Signal.Crypto.getRandomValue(1023, 2047),
        returnArrayBuffer: true,
      });
      const { totalSize, result } = first;
      const initialOffset = result.data.byteLength;
      const firstChunk = {
        start: 0,
        end: initialOffset,
        ...result,
      };

      const chunks = await Signal.LinkPreviews.getChunkPattern(
        totalSize,
        initialOffset
      );

      let results = [];
      const jobs = chunks.map(chunk => async () => {
        const { start, end } = chunk;

        const jobResult = await textsecure.messaging.makeProxiedRequest(url, {
          start,
          end,
          returnArrayBuffer: true,
        });

        return {
          ...chunk,
          ...jobResult.result,
        };
      });

      while (jobs.length > 0) {
        const activeJobs = [];
        for (let i = 0, max = PARALLELISM; i < max; i += 1) {
          if (!jobs.length) {
            break;
          }

          const job = jobs.shift();
          activeJobs.push(job());
        }

        // eslint-disable-next-line no-await-in-loop
        results = results.concat(await Promise.all(activeJobs));
      }

      if (!results.length) {
        throw new Error('No responses received');
      }

      const { contentType } = results[0];
      const data = Signal.LinkPreviews.assembleChunks(
        [firstChunk].concat(results)
      );

      return {
        contentType,
        data,
      };
    },

    async getStickerPackPreview(url) {
      const isPackDownloaded = pack =>
        pack && (pack.status === 'downloaded' || pack.status === 'installed');
      const isPackValid = pack =>
        pack &&
        (pack.status === 'ephemeral' ||
          pack.status === 'downloaded' ||
          pack.status === 'installed');

      let id;
      let key;

      try {
        ({ id, key } = window.Signal.Stickers.getDataFromLink(url));
        const keyBytes = window.Signal.Crypto.bytesFromHexString(key);
        const keyBase64 = window.Signal.Crypto.arrayBufferToBase64(keyBytes);

        const existing = window.Signal.Stickers.getStickerPack(id);
        if (!isPackDownloaded(existing)) {
          await window.Signal.Stickers.downloadEphemeralPack(id, keyBase64);
        }

        const pack = window.Signal.Stickers.getStickerPack(id);
        if (!isPackValid(pack)) {
          return null;
        }
        if (pack.key !== keyBase64) {
          return null;
        }

        const { title, coverStickerId } = pack;
        const sticker = pack.stickers[coverStickerId];
        const data =
          pack.status === 'ephemeral'
            ? await window.Signal.Migrations.readTempData(sticker.path)
            : await window.Signal.Migrations.readStickerData(sticker.path);

        return {
          title,
          url,
          image: {
            ...sticker,
            data,
            size: data.byteLength,
            contentType: 'image/webp',
          },
        };
      } catch (error) {
        window.log.error(
          'getStickerPackPreview error:',
          error && error.stack ? error.stack : error
        );
        return null;
      } finally {
        if (id) {
          await window.Signal.Stickers.removeEphemeralPack(id);
        }
      }
    },

    async getPreview(url) {
      if (window.Signal.LinkPreviews.isStickerPack(url)) {
        return this.getStickerPackPreview(url);
      }

      let html;
      try {
        html = await textsecure.messaging.makeProxiedRequest(url);
      } catch (error) {
        if (error.code >= 300) {
          return null;
        }
      }

      const title = window.Signal.LinkPreviews.getTitleMetaTag(html);
      const imageUrl = window.Signal.LinkPreviews.getImageMetaTag(html);

      let image;
      let objectUrl;
      try {
        if (imageUrl) {
          if (!Signal.LinkPreviews.isMediaLinkInWhitelist(imageUrl)) {
            const primaryDomain = Signal.LinkPreviews.getDomain(url);
            const imageDomain = Signal.LinkPreviews.getDomain(imageUrl);
            throw new Error(
              `imageUrl for domain ${primaryDomain} did not match media whitelist. Domain: ${imageDomain}`
            );
          }

          const chunked = await this.makeChunkedRequest(imageUrl);

          // Ensure that this file is either small enough or is resized to meet our
          //   requirements for attachments
          const withBlob = await this.autoScale({
            contentType: chunked.contentType,
            file: new Blob([chunked.data], {
              type: chunked.contentType,
            }),
          });

          const data = await this.arrayBufferFromFile(withBlob.file);
          objectUrl = URL.createObjectURL(withBlob.file);

          const dimensions = await Signal.Types.VisualAttachment.getImageDimensions(
            {
              objectUrl,
              logger: window.log,
            }
          );

          image = {
            data,
            size: data.byteLength,
            ...dimensions,
            contentType: withBlob.file.type,
          };
        }
      } catch (error) {
        // We still want to show the preview if we failed to get an image
        window.log.error(
          'getPreview failed to get image for link preview:',
          error.message
        );
      } finally {
        if (objectUrl) {
          URL.revokeObjectURL(objectUrl);
        }
      }

      return {
        title,
        url,
        image,
      };
    },

    async addLinkPreview(url) {
      (this.preview || []).forEach(item => {
        if (item.url) {
          URL.revokeObjectURL(item.url);
        }
      });
      this.preview = null;

      this.currentlyMatchedLink = url;
      this.previewLoading = this.getPreview(url);
      const promise = this.previewLoading;
      this.renderLinkPreview();

      try {
        const result = await promise;

        if (
          url !== this.currentlyMatchedLink ||
          promise !== this.previewLoading
        ) {
          // another request was started, or this was canceled
          return;
        }

        // If we couldn't pull down the initial URL
        if (!result) {
          this.excludedPreviewUrls.push(url);
          this.removeLinkPreview();
          return;
        }

        if (result.image) {
          const blob = new Blob([result.image.data], {
            type: result.image.contentType,
          });
          result.image.url = URL.createObjectURL(blob);
        } else if (!result.title) {
          // A link preview isn't worth showing unless we have either a title or an image
          this.removeLinkPreview();
          return;
        }

        this.preview = [result];
        this.renderLinkPreview();
      } catch (error) {
        window.log.error(
          'Problem loading link preview, disabling.',
          error && error.stack ? error.stack : error
        );
        this.disableLinkPreviews = true;
        this.removeLinkPreview();
      }
    },

    renderLinkPreview() {
      if (this.previewView) {
        this.previewView.remove();
        this.previewView = null;
      }
      if (!this.currentlyMatchedLink) {
        return;
      }

      const first = (this.preview && this.preview[0]) || null;
      const props = {
        ...first,
        domain: first && window.Signal.LinkPreviews.getDomain(first.url),
        isLoaded: Boolean(first),
        onClose: () => {
          this.disableLinkPreviews = true;
          this.removeLinkPreview();
        },
      };

      this.previewView = new Whisper.ReactWrapperView({
        className: 'preview-wrapper',
        Component: window.Signal.Components.StagedLinkPreview,
        elCallback: el =>
          this.$(this.compositionApi.current.attSlotRef.current).prepend(el),
        props,
      });
    },

    getLinkPreview() {
      // Don't generate link previews if user has turned them off
      if (!storage.get('linkPreviews', false)) {
        return [];
      }

      if (!this.preview) {
        return [];
      }

      return this.preview.map(item => {
        if (item.image) {
          // We eliminate the ObjectURL here, unneeded for send or save
          return {
            ...item,
            image: _.omit(item.image, 'url'),
          };
        }

        return item;
      });
    },

    // Called whenever the user changes the message composition field. But only
    //   fires if there's content in the message field after the change.
    maybeBumpTyping(messageText) {
      if (messageText.length) {
        this.model.throttledBumpTyping();
      }
    },
  });
})();