tweb/src/components/appMediaViewer.ts

/*
 * https://github.com/morethanwords/tweb
 * Copyright (C) 2019-2021 Eduard Kuzmenko
 * https://github.com/morethanwords/tweb/blob/master/LICENSE
 */

import MEDIA_MIME_TYPES_SUPPORTED from "../environment/mediaMimeTypesSupport";
import { cancelEvent } from "../helpers/dom/cancelEvent";
import { attachClickEvent } from "../helpers/dom/clickEvent";
import setInnerHTML from "../helpers/dom/setInnerHTML";
import mediaSizes from "../helpers/mediaSizes";
import SearchListLoader from "../helpers/searchListLoader";
import { Message } from "../layer";
import appDocsManager, { MyDocument } from "../lib/appManagers/appDocsManager";
import appImManager from "../lib/appManagers/appImManager";
import appMessagesManager from "../lib/appManagers/appMessagesManager";
import appPhotosManager, { MyPhoto } from "../lib/appManagers/appPhotosManager";
import RichTextProcessor from "../lib/richtextprocessor";
import { MediaSearchContext } from "./appMediaPlaybackController";
import AppMediaViewerBase, { MEDIA_VIEWER_CLASSNAME } from "./appMediaViewerBase";
import { ButtonMenuItemOptions } from "./buttonMenu";
import PopupDeleteMessages from "./popups/deleteMessages";
import PopupForward from "./popups/forward";
import Scrollable from "./scrollable";
import appSidebarRight from "./sidebarRight";
import AppSharedMediaTab from "./sidebarRight/tabs/sharedMedia";

type AppMediaViewerTargetType = {
  element: HTMLElement,
  mid: number,
  peerId: PeerId
};
export default class AppMediaViewer extends AppMediaViewerBase<'caption', 'delete' | 'forward', AppMediaViewerTargetType> {
  protected btnMenuDelete: HTMLElement;
  protected listLoader: SearchListLoader<AppMediaViewerTargetType>;

  get searchContext() {
    return this.listLoader.searchContext;
  }

  constructor() {
    super(new SearchListLoader({
      processItem: (item) => {
        const isForDocument = this.searchContext.inputFilter._ === 'inputMessagesFilterDocument';
        const {mid, peerId} = item;
        const media: MyPhoto | MyDocument = appMessagesManager.getMediaFromMessage(item);

        if(!media) return;
        
        if(isForDocument && !AppMediaViewer.isMediaCompatibleForDocumentViewer(media)) {
          return;
        }

        return {element: null as HTMLElement, mid, peerId};
      }
    }), ['delete', 'forward']);

    this.listLoader.onEmptied = () => {
      this.close();
    };

    /* const stub = document.createElement('div');
    stub.classList.add(MEDIA_VIEWER_CLASSNAME + '-stub');
    this.content.main.prepend(stub); */

    this.content.caption = document.createElement('div');
    this.content.caption.classList.add(MEDIA_VIEWER_CLASSNAME + '-caption'/* , 'media-viewer-stub' */);

    let captionTimeout: number;
    const setCaptionTimeout = () => {
      if(captionTimeout) {
        clearTimeout(captionTimeout);
      }

      captionTimeout = window.setTimeout(() => {
        captionTimeout = undefined;
        this.content.caption.classList.remove('is-focused');
      }, 800);
    };
    this.content.caption.addEventListener('touchstart', () => {
      if(!mediaSizes.isMobile) return;

      this.content.caption.classList.add('is-focused');
      
      if(captionTimeout) {
        clearTimeout(captionTimeout);
        captionTimeout = undefined;
      }
      
      document.addEventListener('touchend', setCaptionTimeout, {once: true});
    });

    const captionScrollable = new Scrollable(this.content.caption);
    captionScrollable.onAdditionalScroll = setCaptionTimeout;

    //this.content.main.append(this.content.caption);
    this.wholeDiv.append(this.content.caption);

    attachClickEvent(this.buttons.delete, this.onDeleteClick);

    const buttons: ButtonMenuItemOptions[] = [{
      icon: 'forward',
      text: 'Forward',
      onClick: this.onForwardClick
    }, {
      icon: 'download',
      text: 'MediaViewer.Context.Download',
      onClick: this.onDownloadClick
    }, {
      icon: 'delete danger',
      text: 'Delete',
      onClick: this.onDeleteClick
    }];

    this.setBtnMenuToggle(buttons);
    this.btnMenuDelete = buttons[buttons.length - 1].element;

    // * constructing html end
    
    this.setListeners();
  }

  protected setListeners() {
    super.setListeners();
    this.buttons.forward.addEventListener('click', this.onForwardClick);
    this.author.container.addEventListener('click', this.onAuthorClick);

    const onCaptionClick = (e: MouseEvent) => {
      if(e.target instanceof HTMLAnchorElement) { // close viewer if it's t.me/ redirect
        const onclick = (e.target as HTMLElement).getAttribute('onclick');
        if(!onclick || onclick.includes('showMaskedAlert')) {
          return;
        }

        cancelEvent(e);

        this.close().then(() => {
          this.content.caption.removeEventListener('click', onCaptionClick, {capture: true});
          (e.target as HTMLAnchorElement).click();
        });

        return false;
      }
    };
    this.content.caption.addEventListener('click', onCaptionClick, {capture: true});
  }

  /* public close(e?: MouseEvent) {
    const good = !this.setMoverAnimationPromise;
    const promise = super.close(e);

    if(good) { // clear
      this.currentMessageId = 0;
      this.peerId = 0;
    }

    return promise;
  } */

  protected getMessageByPeer(peerId: PeerId, mid: number) {
    return this.searchContext.isScheduled ? appMessagesManager.getScheduledMessageByPeer(peerId, mid) : appMessagesManager.getMessageByPeer(peerId, mid);
  }

  onPrevClick = (target: AppMediaViewerTargetType) => {
    this.openMedia(this.getMessageByPeer(target.peerId, target.mid), target.element, -1);
  };

  onNextClick = (target: AppMediaViewerTargetType) => {
    this.openMedia(this.getMessageByPeer(target.peerId, target.mid), target.element, 1);
  };

  onDeleteClick = () => {
    const target = this.target;
    new PopupDeleteMessages(target.peerId, [target.mid], 'chat', () => {
      this.target = {element: this.content.media} as any;
      this.close();
    });
  };

  onForwardClick = () => {
    const target = this.target;
    if(target.mid) {
      //appSidebarRight.forwardTab.open([target.mid]);
      new PopupForward({
        [target.peerId]: [target.mid]
      }, () => {
        return this.close();
      });
    }
  };

  onAuthorClick = (e: MouseEvent) => {
    const {mid, peerId} = this.target;
    if(mid && mid !== Number.MAX_SAFE_INTEGER) {
      const threadId = this.searchContext.threadId;
      const message = this.getMessageByPeer(peerId, mid);
      this.close(e)
      //.then(() => mediaSizes.isMobile ? appSidebarRight.sharedMediaTab.closeBtn.click() : Promise.resolve())
      .then(() => {
        if(mediaSizes.isMobile) {
          const tab = appSidebarRight.getTab(AppSharedMediaTab);
          if(tab) {
            tab.close();
          }
        }

        appImManager.setInnerPeer(message.peerId, mid, threadId ? 'discussion' : undefined, threadId);
      });
    }
  };

  onDownloadClick = () => {
    const {peerId, mid} = this.target;
    const message = this.getMessageByPeer(peerId, mid);
    if(message.media.photo) {
      appPhotosManager.savePhotoFile(message.media.photo, appImManager.chat.bubbles.lazyLoadQueue.queueId);
    } else {
      let document: MyDocument = null;

      if(message.media.webpage) document = message.media.webpage.document;
      else document = message.media.document;

      if(document) {
        //console.log('will save document:', document);
        appDocsManager.saveDocFile(document, appImManager.chat.bubbles.lazyLoadQueue.queueId);
      }
    }
  };

  private setCaption(message: Message.message) {
    const caption = message.message;
    let html = '';
    if(caption) {
      html = RichTextProcessor.wrapRichText(caption, {
        entities: message.totalEntities
      });
    }
    
    // html = 'Dandelion are a family of flowering plants that grow in many parts of the world.';
    setInnerHTML(this.content.caption.firstElementChild, html);
    this.content.caption.classList.toggle('hide', !caption);
    // this.content.container.classList.toggle('with-caption', !!caption);
  }

  public setSearchContext(context: MediaSearchContext) {
    this.listLoader.setSearchContext(context);

    return this;
  }

  public async openMedia(message: any, target?: HTMLElement, fromRight = 0, reverse = false, 
    prevTargets: AppMediaViewerTargetType[] = [], nextTargets: AppMediaViewerTargetType[] = []/* , needLoadMore = true */) {
    if(this.setMoverPromise) return this.setMoverPromise;

    const mid = message.mid;
    const fromId = message.fromId;
    const media = appMessagesManager.getMediaFromMessage(message);

    this.buttons.forward.classList.toggle('hide', message._ === 'messageService');

    const canDeleteMessage = appMessagesManager.canDeleteMessage(message);
    [this.buttons.delete, this.btnMenuDelete].forEach(button => {
      button.classList.toggle('hide', !canDeleteMessage);
    });

    this.setCaption(message);
    const promise = super._openMedia(media, message.date, fromId, fromRight, target, reverse, prevTargets, nextTargets, message/* , needLoadMore */);
    this.target.mid = mid;
    this.target.peerId = message.peerId;

    return promise;
  }

  public static isMediaCompatibleForDocumentViewer(media: MyPhoto | MyDocument) {
    return media._ === 'photo' || MEDIA_MIME_TYPES_SUPPORTED.has(media.mime_type);
  }
}