use of a custom hook to detect focus

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;
 })();

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
+      <ReadableMessage
-        id={id}
+      id={id}
-        as="div"
+      className={classNames(divClasses)}
-        className={classNames(divClasses)}
+      onChange={onVisible}
-        onChange={onVisible}
+      onContextMenu={this.handleContextMenu}
-        threshold={1}
-        delay={200}
-        triggerOnce={true}
-        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>
     );
   }
 

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());
   }
 
   // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

ts/window.d.ts

@@ -40,8 +40,7 @@ declare global {
     getFriendsFromContacts: any;
     getSettingValue: any;
     i18n: LocalizerType;
-    isFocused: any;
+    isFocused: () => boolean;
-    setFocusListener: (listener: any) => any;
     libloki: Libloki;
     libsignal: LibsignalProtocol;
     log: any;