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;