use of a custom hook to detect focus

pull/1778/head
Brice-W 4 years ago
parent 936f9a3efc
commit 2af9d9e15d

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

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

@ -75,7 +75,6 @@ export class SessionMessagesList extends React.Component<Props, State> {
this.messageContainerRef = this.props.messageContainerRef;
this.ignoreScrollEvents = true;
window.setFocusListener(() => this.updateReadMessages());
}
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

3
ts/window.d.ts vendored

@ -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;

Loading…
Cancel
Save