display a message when the recipient screenshots an attachemnt

_locales/en/messages.json

@@ -1859,5 +1859,23 @@
   },
   "orJoinOneOfThese": {
     "message": "Or join one of these..."
+  },
+  "tookAScreenshot": {
+    "message": "$name$ took a screenshot",
+    "placeholders": {
+      "name": {
+        "content": "$1",
+        "example": "Alice"
+      }
+    }
+  },
+  "savedTheFile": {
+    "message": "Media saved by $name$",
+    "placeholders": {
+      "name": {
+        "content": "$1",
+        "example": "Alice"
+      }
+    }
   }
 }

protos/SignalService.proto

@@ -33,11 +33,11 @@ message TypingMessage {
 
 
 message Content {
-  optional DataMessage    dataMessage                   = 1;
-  optional ReceiptMessage receiptMessage                = 5;
-  optional TypingMessage  typingMessage                 = 6;
-  optional ConfigurationMessage  configurationMessage   = 7;
-  optional DataExtractionNotification dataExtractionNotification = 82;
+  optional DataMessage             dataMessage                   = 1;
+  optional ReceiptMessage          receiptMessage                = 5;
+  optional TypingMessage           typingMessage                 = 6;
+  optional ConfigurationMessage    configurationMessage          = 7;
+  optional DataExtractionNotification dataExtractionNotification = 8;
 
 }
 

ts/components/basic/Text.tsx

@@ -29,6 +29,41 @@ export const Text = (props: TextProps) => {
   return <StyledDefaultText {...props}>{props.text}</StyledDefaultText>;
 };
 
+type SpacerProps = {
+  size: 'lg' | 'md' | 'sm' | 'xs';
+  theme?: DefaultTheme;
+};
+
+const SpacerStyled = styled.div<SpacerProps>`
+  height: ${props =>
+    props.size === 'lg'
+      ? props.theme.common.margins.lg
+      : props.size === 'md'
+      ? props.theme.common.margins.md
+      : props.size === 'sm'
+      ? props.theme.common.margins.sm
+      : props.theme.common.margins.xs};
+`;
+
+const Spacer = (props: SpacerProps) => {
+  return <SpacerStyled {...props} />;
+};
+
+export const SpacerLG = () => {
+  return <Spacer size="lg" />;
+};
+
+export const SpacerMD = () => {
+  return <Spacer size="md" />;
+};
+export const SpacerSM = () => {
+  return <Spacer size="sm" />;
+};
+
+export const SpacerXS = () => {
+  return <Spacer size="xs" />;
+};
+
 type H3Props = {
   text: string;
   opposite?: boolean;

ts/components/conversation/DataExtractionNotification.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { useTheme } from 'styled-components';
+import { DataExtractionNotificationProps } from '../../models/messageType';
+import { SignalService } from '../../protobuf';
+import { Flex } from '../basic/Flex';
+import { SessionIcon, SessionIconSize, SessionIconType } from '../session/icon';
+import { SpacerXS, Text } from '../basic/Text';
+
+type Props = DataExtractionNotificationProps;
+
+export const DataExtractionNotification = (props: Props) => {
+  const theme = useTheme();
+  const { name, type, source } = props;
+
+  let contentText: string;
+  if (type === SignalService.DataExtractionNotification.Type.MEDIA_SAVED) {
+    contentText = window.i18n('savedTheFile', name || source);
+  } else {
+    contentText = window.i18n('tookAScreenshot', name || source);
+  }
+
+  return (
+    <Flex
+      container={true}
+      flexDirection="column"
+      alignItems="center"
+      margin={theme.common.margins.sm}
+    >
+      <SessionIcon
+        iconType={SessionIconType.Upload}
+        theme={theme}
+        iconSize={SessionIconSize.Small}
+        iconRotation={180}
+      />
+      <SpacerXS />
+      <Text text={contentText} subtle={true} />
+    </Flex>
+  );
+};

ts/components/session/SessionClosableOverlay.tsx

@@ -13,6 +13,7 @@ import { DefaultTheme } from 'styled-components';
 import { UserUtils } from '../../session/utils';
 import { ConversationTypeEnum } from '../../models/conversation';
 import { SessionJoinableRooms } from './SessionJoinableDefaultRooms';
+import { SpacerLG, SpacerMD } from '../basic/Text';
 
 export enum SessionClosableOverlayType {
   Message = 'message',
@@ -165,7 +166,7 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
           />
         </div>
 
-        <div className="spacer-md" />
+        <SpacerMD />
 
         <h2>{title}</h2>
 
@@ -201,7 +202,7 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
 
         {isClosedGroupView && (
           <>
-            <div className="spacer-lg" />
+            <SpacerLG />
             <div className="group-member-list__container">
               {noContactsForClosedGroup ? (
                 <div className="group-member-list__no-contacts">
@@ -214,7 +215,7 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
               )}
             </div>
 
-            <div className="spacer-lg" />
+            <SpacerLG />
           </>
         )}
 

ts/components/session/conversation/SessionMessagesList.tsx

@@ -20,6 +20,7 @@ import { MessageRegularProps } from '../../../models/messageType';
 import { getMessagesBySentAt } from '../../../data/data';
 import autoBind from 'auto-bind';
 import { ConversationTypeEnum } from '../../../models/conversation';
+import { DataExtractionNotification } from '../../conversation/DataExtractionNotification';
 
 interface State {
   showScrollButton: boolean;
@@ -204,6 +205,7 @@ export class SessionMessagesList extends React.Component<Props, State> {
 
           const timerProps = message.propsForTimerNotification;
           const propsForGroupInvitation = message.propsForGroupInvitation;
+          const propsForDataExtractionNotification = message.propsForDataExtractionNotification;
 
           const groupNotificationProps = message.propsForGroupNotification;
 
@@ -243,6 +245,18 @@ export class SessionMessagesList extends React.Component<Props, State> {
             );
           }
 
+          if (propsForDataExtractionNotification) {
+            return (
+              <>
+                <DataExtractionNotification
+                  {...propsForDataExtractionNotification}
+                  key={message.id}
+                />
+                {unreadIndicator}
+              </>
+            );
+          }
+
           if (timerProps) {
             return (
               <>

ts/components/session/conversation/SessionRightPanel.tsx

@@ -21,6 +21,7 @@ import { getDecryptedMediaUrl } from '../../../session/crypto/DecryptedAttachmen
 import { LightBoxOptions } from './SessionConversation';
 import { UserUtils } from '../../../session/utils';
 import { sendDataExtractionNotification } from '../../../session/messages/outgoing/controlMessage/DataExtractionNotificationMessage';
+import { SpacerLG } from '../../basic/Text';
 
 interface Props {
   id: string;
@@ -270,11 +271,11 @@ class SessionRightPanel extends React.Component<Props, State> {
         <h2>{name}</h2>
         {showMemberCount && (
           <>
-            <div className="spacer-lg" />
+            <SpacerLG />
             <div role="button" className="subtle">
               {window.i18n('members', memberCount)}
             </div>
-            <div className="spacer-lg" />
+            <SpacerLG />
           </>
         )}
         <input className="description" placeholder={window.i18n('description')} />

ts/components/session/registration/SignInTab.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { Flex } from '../../basic/Flex';
+import { SpacerLG } from '../../basic/Text';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../SessionButton';
 import { SessionSpinner } from '../SessionSpinner';
 import { signInWithLinking, signInWithRecovery, validatePassword } from './RegistrationTabs';
@@ -78,9 +79,9 @@ const SignInButtons = (props: {
   return (
     <div>
       <RestoreUsingRecoveryPhraseButton onRecoveryButtonClicked={props.onRecoveryButtonClicked} />
-      <div className="spacer-lg" />
+      <SpacerLG />
       <div className="or">{window.i18n('or')}</div>
-      <div className="spacer-lg" />
+      <SpacerLG />
       <LinkDeviceButton onLinkDeviceButtonClicked={props.onLinkDeviceButtonClicked} />
     </div>
   );

ts/components/session/settings/SessionSettings.tsx

@@ -11,6 +11,7 @@ import { ConversationController } from '../../../session/conversations';
 import { getConversationLookup, getConversations } from '../../../state/selectors/conversations';
 import { connect } from 'react-redux';
 import { getPasswordHash } from '../../../../ts/data/data';
+import { SpacerLG } from '../../basic/Text';
 
 export enum SessionSettingCategory {
   Appearance = 'appearance',
@@ -165,7 +166,7 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
           {this.state.pwdLockError && (
             <>
               <div className="session-label warning">{this.state.pwdLockError}</div>
-              <div className="spacer-lg" />
+              <SpacerLG />
             </>
           )}
 

ts/models/conversation.ts

@@ -902,6 +902,9 @@ export class ConversationModel extends Backbone.Model<ConversationAttributes> {
         messageModel: model,
       })
     );
+    const unreadCount = await this.getUnreadCount();
+    this.set({ unreadCount });
+    await this.commit();
 
     return model;
   }

ts/models/message.ts

@@ -11,6 +11,8 @@ import { ClosedGroupVisibleMessage } from '../session/messages/outgoing/visibleM
 import { PubKey } from '../../ts/session/types';
 import { UserUtils } from '../../ts/session/utils';
 import {
+  DataExtractionNotificationMsg,
+  DataExtractionNotificationProps,
   fillMessageAttributesWithDefaults,
   MessageAttributes,
   MessageAttributesOptionals,
@@ -37,6 +39,7 @@ export class MessageModel extends Backbone.Model<MessageAttributes> {
   public propsForTimerNotification: any;
   public propsForGroupNotification: any;
   public propsForGroupInvitation: any;
+  public propsForDataExtractionNotification?: DataExtractionNotificationProps;
   public propsForSearchResult: any;
   public propsForMessage: any;
 
@@ -75,6 +78,8 @@ export class MessageModel extends Backbone.Model<MessageAttributes> {
       this.propsForGroupNotification = this.getPropsForGroupNotification();
     } else if (this.isGroupInvitation()) {
       this.propsForGroupInvitation = this.getPropsForGroupInvitation();
+    } else if (this.isDataExtractionNotification()) {
+      this.propsForDataExtractionNotification = this.getPropsForDataExtractionNotification();
     } else {
       this.propsForSearchResult = this.getPropsForSearchResult();
       this.propsForMessage = this.getPropsForMessage();
@@ -193,6 +198,26 @@ export class MessageModel extends Backbone.Model<MessageAttributes> {
     if (this.isGroupInvitation()) {
       return `😎 ${window.i18n('openGroupInvitation')}`;
     }
+    if (this.isDataExtractionNotification()) {
+      const dataExtraction = this.get(
+        'dataExtractionNotification'
+      ) as DataExtractionNotificationMsg;
+      if (dataExtraction.type === SignalService.DataExtractionNotification.Type.SCREENSHOT) {
+        return window.i18n(
+          'tookAScreenshot',
+          ConversationController.getInstance().getContactProfileNameOrShortenedPubKey(
+            dataExtraction.source
+          )
+        );
+      }
+
+      return window.i18n(
+        'savedTheFile',
+        ConversationController.getInstance().getContactProfileNameOrShortenedPubKey(
+          dataExtraction.source
+        )
+      );
+    }
     return this.get('body');
   }
 
@@ -200,6 +225,10 @@ export class MessageModel extends Backbone.Model<MessageAttributes> {
     return !!this.get('groupInvitation');
   }
 
+  public isDataExtractionNotification() {
+    return !!this.get('dataExtractionNotification');
+  }
+
   public getNotificationText() {
     let description = this.getDescription();
     if (description) {
@@ -305,6 +334,22 @@ export class MessageModel extends Backbone.Model<MessageAttributes> {
     };
   }
 
+  public getPropsForDataExtractionNotification(): DataExtractionNotificationProps | undefined {
+    const dataExtractionNotification = this.get('dataExtractionNotification');
+
+    if (!dataExtractionNotification) {
+      window.log.warn('dataExtractionNotification should not happen');
+      return;
+    }
+
+    const contact = this.findAndFormatContact(dataExtractionNotification.source);
+
+    return {
+      ...dataExtractionNotification,
+      name: contact.profileName || contact.name || dataExtractionNotification.source,
+    };
+  }
+
   public findContact(pubkey: string) {
     return ConversationController.getInstance().get(pubkey);
   }
@@ -414,6 +459,10 @@ export class MessageModel extends Backbone.Model<MessageAttributes> {
       return null;
     }
 
+    if (this.isDataExtractionNotification()) {
+      return null;
+    }
+
     const readBy = this.get('read_by') || [];
     if (window.storage.get('read-receipt-setting') && readBy.length > 0) {
       return 'read';

ts/models/messageType.ts

@@ -98,8 +98,24 @@ export interface MessageAttributes {
    */
   snippet?: any;
   direction: any;
+
+  /**
+   * This is used for when a user screenshots or saves an attachment you sent.
+   * We display a small message just below the message referenced
+   */
+  dataExtractionNotification?: DataExtractionNotificationMsg;
+}
+
+export interface DataExtractionNotificationMsg {
+  type: number; // screenshot or saving event, based on SignalService.DataExtractionNotification.Type
+  source: string; // the guy who made a screenshot
+  referencedAttachmentTimestamp: number; // the attachment timestamp he screenshot
 }
 
+export type DataExtractionNotificationProps = DataExtractionNotificationMsg & {
+  name: string;
+};
+
 export interface MessageAttributesOptionals {
   id?: string;
   source?: string;
@@ -134,6 +150,11 @@ export interface MessageAttributesOptionals {
     source: string;
     fromSync?: boolean;
   };
+  dataExtractionNotification?: {
+    type: number;
+    source: string;
+    referencedAttachmentTimestamp: number;
+  };
   unread?: number;
   group?: any;
   timestamp?: number;

ts/receiver/contentMessage.ts

@@ -354,8 +354,7 @@ export async function innerHandleContentMessage(
       return;
     }
     if (content.dataExtractionNotification) {
-      window?.log?.warn('content.dataExtractionNotification', content.dataExtractionNotification);
-      void handleDataExtractionNotification(
+      await handleDataExtractionNotification(
         envelope,
         content.dataExtractionNotification as SignalService.DataExtractionNotification
       );
@@ -466,3 +465,52 @@ async function handleTypingMessage(
     });
   }
 }
+
+/**
+ * A DataExtractionNotification message can only come from a 1 o 1 conversation.
+ *
+ * We drop them if the convo is not a 1 o 1 conversation.
+ */
+export async function handleDataExtractionNotification(
+  envelope: EnvelopePlus,
+  dataNotificationMessage: SignalService.DataExtractionNotification
+): Promise<void> {
+  // we currently don't care about the timestamp included in the field itself, just the timestamp of the envelope
+  const { type, timestamp: referencedAttachment } = dataNotificationMessage;
+
+  const { source, timestamp } = envelope;
+  await removeFromCache(envelope);
+
+  const convo = ConversationController.getInstance().get(source);
+  if (!convo || !convo.isPrivate()) {
+    window?.log?.info('Got DataNotification for unknown or non private convo');
+    return;
+  }
+
+  if (!type || !source) {
+    window?.log?.info('DataNotification pre check failed');
+
+    return;
+  }
+
+  if (timestamp) {
+    const envelopeTimestamp = Lodash.toNumber(timestamp);
+    const referencedAttachmentTimestamp = Lodash.toNumber(referencedAttachment);
+    const now = Date.now();
+
+    await convo.addSingleMessage({
+      conversationId: convo.get('id'),
+      type: 'outgoing', // mark it as outgoing just so it appears below our sent attachment
+      sent_at: envelopeTimestamp,
+      received_at: now,
+      dataExtractionNotification: {
+        type,
+        referencedAttachmentTimestamp, // currently unused
+        source,
+      },
+      unread: 1, // 1 means unread
+      expireTimer: 0,
+    });
+    convo.updateLastMessage();
+  }
+}

ts/session/messages/outgoing/controlMessage/DataExtractionNotificationMessage.ts

@@ -33,11 +33,10 @@ export class DataExtractionNotificationMessage extends ContentMessage {
 
     const action = ACTION_ENUM.MEDIA_SAVED; // we cannot know when user screenshots, so it can only be a media saved
 
-    const dataExtraction = new SignalService.DataExtractionNotification();
-    dataExtraction.type = action;
-    dataExtraction.timestamp = this.referencedAttachmentTimestamp;
-
-    return dataExtraction;
+    return new SignalService.DataExtractionNotification({
+      type: action,
+      timestamp: this.referencedAttachmentTimestamp,
+    });
   }
 }
 

ts/session/snode_api/SNodeAPI.ts

@@ -413,7 +413,10 @@ export async function retrieveNextMessages(
       return [];
     }
   } catch (e) {
-    window?.log?.warn('Got an error while retrieving next messages:', e);
+    window?.log?.warn(
+      'Got an error while retrieving next messages. Not retrying as we trigger fetch often:',
+      e
+    );
     return [];
   }
 }

ts/session/snode_api/snodePool.ts

@@ -198,14 +198,18 @@ async function getSnodeListFromLokidSeednode(
     window?.log?.warn('loki_snode_api::getSnodeListFromLokidSeednode - error', e.code, e.message);
     // handle retries in case of temporary hiccups
     if (retries < SEED_NODE_RETRIES) {
-      setTimeout(() => {
+      setTimeout(async () => {
         window?.log?.info(
           'loki_snode_api::getSnodeListFromLokidSeednode - Retrying initialising random snode pool, try #',
           retries,
           'seed nodes total',
           seedNodes.length
         );
-        void getSnodeListFromLokidSeednode(seedNodes, retries + 1);
+        try {
+          await getSnodeListFromLokidSeednode(seedNodes, retries + 1);
+        } catch (e) {
+          window?.log?.warn('getSnodeListFromLokidSeednode failed retr y #', retries, e);
+        }
       }, retries * retries * 5000);
     } else {
       window?.log?.error('loki_snode_api::getSnodeListFromLokidSeednode - failing');

ts/state/ducks/conversations.ts

@@ -427,8 +427,8 @@ const toPickFromMessageModel = [
   'firstMessageOfSeries',
   'propsForGroupInvitation',
   'propsForTimerNotification',
-  'propsForVerificationNotification',
   'propsForGroupNotification',
+  'propsForDataExtractionNotification',
   // FIXME below are what is needed to fetch on the fly messageDetails. This is not the react way
   'getPropsForMessageDetail',
   'get',