Fix clicking links hidden by spoiler

Spoiler revealing in media viewer
Close media viewer when going by link

src/components/appMediaViewer.ts

@@ -68,7 +68,7 @@ export default class AppMediaViewer extends AppMediaViewerBase<'caption', 'delet
     this.content.main.prepend(stub); */
 
     this.content.caption = document.createElement('div');
-    this.content.caption.classList.add(MEDIA_VIEWER_CLASSNAME + '-caption'/* , 'media-viewer-stub' */);
+    this.content.caption.classList.add(MEDIA_VIEWER_CLASSNAME + '-caption', 'message'/* , 'media-viewer-stub' */);
 
     let captionTimeout: number;
     const setCaptionTimeout = () => {

src/components/chat/bubbles.ts

@@ -1490,41 +1490,6 @@ export default class ChatBubbles {
       return;
     }
 
-    const spoiler: HTMLElement = findUpClassName(target, 'spoiler');
-    if(spoiler) {
-      const messageDiv = findUpClassName(spoiler, 'message');
-
-      const className = 'is-spoiler-visible';
-      const isVisible = messageDiv.classList.contains(className);
-      if(!isVisible) {
-        cancelEvent(e);
-      }
-
-      const duration = 400 / 2;
-      const showDuration = 5000;
-      const useRafs = !isVisible ? 2 : 0;
-      if(useRafs) {
-        messageDiv.classList.add('will-change');
-      }
-
-      const spoilerTimeout = messageDiv.dataset.spoilerTimeout;
-      if(spoilerTimeout !== null) {
-        clearTimeout(+spoilerTimeout);
-        delete messageDiv.dataset.spoilerTimeout;
-      }
-
-      SetTransition(messageDiv, className, true, duration, () => {
-        messageDiv.dataset.spoilerTimeout = '' + window.setTimeout(() => {
-          SetTransition(messageDiv, className, false, duration, () => {
-            messageDiv.classList.remove('will-change');
-            delete messageDiv.dataset.spoilerTimeout;
-          });
-        }, showDuration);
-      }, useRafs);
-
-      return;
-    }
-
     const reactionElement = findUpTag(target, 'REACTION-ELEMENT') as ReactionElement;
     if(reactionElement) {
       cancelEvent(e);

src/components/chat/chat.ts

@@ -7,6 +7,7 @@
 import type { ChatRights } from "../../lib/appManagers/appChatsManager";
 import type { AppImManager } from "../../lib/appManagers/appImManager";
 import type { MessagesStorageKey } from "../../lib/appManagers/appMessagesManager";
+import type AppMediaViewerBase from "../appMediaViewerBase";
 import EventListenerBase from "../../helpers/eventListenerBase";
 import { logger, LogTypes } from "../../lib/logger";
 import rootScope from "../../lib/rootScope";
@@ -438,6 +439,11 @@ export default class Chat extends EventListenerBase<{
       this.inited = true;
     }
 
+    const appMediaViewer = (window as any).appMediaViewer as AppMediaViewerBase<any, any, any>;
+    if(appMediaViewer) {
+      appMediaViewer.close();
+    }
+
     const samePeer = this.peerId === peerId;
     if(!samePeer) {
       this.appImManager.dispatchEvent('peer_changing', this);

src/lib/appManagers/appImManager.ts

@@ -88,6 +88,7 @@ import getFilesFromEvent from '../../helpers/files/getFilesFromEvent';
 import apiManagerProxy from '../mtproto/mtprotoworker';
 import appRuntimeManager from './appRuntimeManager';
 import paymentsWrapCurrencyAmount from '../../helpers/paymentsWrapCurrencyAmount';
+import findUpClassName from '../../helpers/dom/findUpClassName';
 
 export const CHAT_ANIMATION_GROUP = 'chat';
 
@@ -359,6 +360,39 @@ export class AppImManager extends EventListenerBase<{
       });
     });
 
+    (window as any).onSpoilerClick = (e: MouseEvent) => {
+      const spoiler = findUpClassName(e.target, 'spoiler');
+      const parentElement = findUpClassName(spoiler, 'message') || spoiler.parentElement;
+
+      const className = 'is-spoiler-visible';
+      const isVisible = parentElement.classList.contains(className);
+      if(!isVisible) {
+        cancelEvent(e);
+      }
+
+      const duration = 400 / 2;
+      const showDuration = 5000;
+      const useRafs = !isVisible ? 2 : 0;
+      if(useRafs) {
+        parentElement.classList.add('will-change');
+      }
+
+      const spoilerTimeout = parentElement.dataset.spoilerTimeout;
+      if(spoilerTimeout !== null) {
+        clearTimeout(+spoilerTimeout);
+        delete parentElement.dataset.spoilerTimeout;
+      }
+
+      SetTransition(parentElement, className, true, duration, () => {
+        parentElement.dataset.spoilerTimeout = '' + window.setTimeout(() => {
+          SetTransition(parentElement, className, false, duration, () => {
+            parentElement.classList.remove('will-change');
+            delete parentElement.dataset.spoilerTimeout;
+          });
+        }, showDuration);
+      }, useRafs);
+    };
+    
     apiManagerProxy.addEventListener('notificationBuild', (options) => {
       if(this.chat.peerId === options.message.peerId && !idleController.isIdle) {
         return;

src/lib/richTextProcessor/wrapRichText.ts

@@ -18,6 +18,7 @@ import parseEntities from "./parseEntities";
 import setBlankToAnchor from "./setBlankToAnchor";
 import wrapUrl from "./wrapUrl";
 import EMOJI_VERSIONS_SUPPORTED from "../../environment/emojiVersionsSupport";
+import { CLICK_EVENT_NAME } from "../../helpers/dom/clickEvent";
 
 /**
  * * Expecting correctly sorted nested entities (RichTextProcessor.sortEntities)
@@ -400,6 +401,8 @@ export default function wrapRichText(text: string, options: Partial<{
           usedText = true;
           container.append(element);
           fragment.append(container);
+
+          container[`on${CLICK_EVENT_NAME}`] = (window as any).onSpoilerClick;
         }
         
         break;