From 2af9d9e15d1538fd87db970f4152747024e4bc52 Mon Sep 17 00:00:00 2001
From: Brice-W <brice@loki.network>
Date: Mon, 12 Jul 2021 14:35:43 +1000
Subject: [PATCH] use of a custom hook to detect focus

---
 js/focus_listener.js                          |  3 ---
 ts/components/conversation/Message.tsx        | 21 ++++++++-----------
 .../conversation/SessionMessagesList.tsx      |  1 -
 ts/window.d.ts                                |  3 +--
 4 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/js/focus_listener.js b/js/focus_listener.js
index 29b027598..c9a728233 100644
--- a/js/focus_listener.js
+++ b/js/focus_listener.js
@@ -3,15 +3,12 @@
   'use strict';
 
   let windowFocused = false;
-  let windowFocusedListener = function() {}
   window.addEventListener('blur', () => {
     windowFocused = false;
   });
   window.addEventListener('focus', () => {
     windowFocused = true;
-    windowFocusedListener();
   });
 
   window.isFocused = () => windowFocused;
-  window.setFocusListener = (listener) => windowFocusedListener = listener;
 })();
diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx
index 6a4ba4c98..c3010a3d9 100644
--- a/ts/components/conversation/Message.tsx
+++ b/ts/components/conversation/Message.tsx
@@ -42,6 +42,7 @@ import { MessageInteraction } from '../../interactions';
 import autoBind from 'auto-bind';
 import { AudioPlayerWithEncryptedFile } from './H5AudioPlayer';
 import { ClickToTrustSender } from './message/ClickToTrustSender';
+import { ReadableMessage } from './ReadableMessage';
 
 // Same as MIN_WIDTH in ImageGrid.tsx
 const MINIMUM_LINK_PREVIEW_IMAGE_WIDTH = 200;
@@ -713,7 +714,7 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
     const isShowingImage = this.isShowingImage();
 
     const isIncoming = direction === 'incoming';
-    const shouldMarkReadWhenVisible = isIncoming && isUnread && window.isFocused();
+    const shouldMarkReadWhenVisible = isIncoming && isUnread;
     const divClasses = ['session-message-wrapper'];
 
     if (selected) {
@@ -729,7 +730,7 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
     }
 
     const onVisible = (inView: boolean) => {
-      if (inView && shouldMarkReadWhenVisible) {
+      if (inView && shouldMarkReadWhenVisible && window.isFocused()) {
         // mark the message as read.
         // this will trigger the expire timer.
         void markRead(Date.now());
@@ -737,15 +738,11 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
     };
 
     return (
-      <InView
-        id={id}
-        as="div"
-        className={classNames(divClasses)}
-        onChange={onVisible}
-        threshold={1}
-        delay={200}
-        triggerOnce={true}
-        onContextMenu={this.handleContextMenu}
+      <ReadableMessage
+      id={id}
+      className={classNames(divClasses)}
+      onChange={onVisible}
+      onContextMenu={this.handleContextMenu}
       >
         {this.renderAvatar()}
         <div
@@ -815,7 +812,7 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
           {this.renderError(!isIncoming)}
           {this.renderContextMenu()}
         </div>
-      </InView>
+      </ReadableMessage>
     );
   }
 
diff --git a/ts/components/session/conversation/SessionMessagesList.tsx b/ts/components/session/conversation/SessionMessagesList.tsx
index 20c7dc350..922a40d31 100644
--- a/ts/components/session/conversation/SessionMessagesList.tsx
+++ b/ts/components/session/conversation/SessionMessagesList.tsx
@@ -75,7 +75,6 @@ export class SessionMessagesList extends React.Component<Props, State> {
 
     this.messageContainerRef = this.props.messageContainerRef;
     this.ignoreScrollEvents = true;
-    window.setFocusListener(() => this.updateReadMessages());
   }
 
   // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
diff --git a/ts/window.d.ts b/ts/window.d.ts
index 70c74c782..5a7b1e7d5 100644
--- a/ts/window.d.ts
+++ b/ts/window.d.ts
@@ -40,8 +40,7 @@ declare global {
     getFriendsFromContacts: any;
     getSettingValue: any;
     i18n: LocalizerType;
-    isFocused: any;
-    setFocusListener: (listener: any) => any;
+    isFocused: () => boolean;
     libloki: Libloki;
     libsignal: LibsignalProtocol;
     log: any;