Merge pull request #1757 from Brice-W/link-preview-popup

Display link preview popup only once

js/background.js

@@ -340,11 +340,6 @@
       window.libsession.Utils.ToastUtils.pushSpellCheckDirty();
     };
 
-    window.toggleLinkPreview = () => {
-      const newValue = !window.getSettingValue('link-preview-setting');
-      window.setSettingValue('link-preview-setting', newValue);
-    };
-
     window.toggleMediaPermissions = () => {
       const value = window.getMediaPermissions();
       window.setMediaPermissions(!value);

ts/components/session/conversation/SessionCompositionBox.tsx

@@ -37,6 +37,11 @@ import { getMentionsInput } from '../../../state/selectors/mentionsInput';
 import { updateConfirmModal } from '../../../state/ducks/modalDialog';
 import { SessionButtonColor } from '../SessionButton';
 import { SessionConfirmDialogProps } from '../SessionConfirm';
+import {
+  createOrUpdateItem,
+  getItemById,
+  hasLinkPreviewPopupBeenDisplayed,
+} from '../../../data/data';
 
 export interface ReplyingToMessageProps {
   convoId: string;
@@ -218,7 +223,7 @@ export class SessionCompositionBox extends React.Component<Props, State> {
           imgBlob = item.getAsFile();
           break;
         case 'text':
-          this.showLinkSharingConfirmationModalDialog(e);
+          void this.showLinkSharingConfirmationModalDialog(e);
           break;
         default:
       }
@@ -237,18 +242,24 @@ export class SessionCompositionBox extends React.Component<Props, State> {
    * Check if what is pasted is a URL and prompt confirmation for a setting change
    * @param e paste event
    */
-  private showLinkSharingConfirmationModalDialog(e: any) {
+  private async showLinkSharingConfirmationModalDialog(e: any) {
     const pastedText = e.clipboardData.getData('text');
     if (this.isURL(pastedText)) {
+      const alreadyDisplayedPopup =
+        (await getItemById(hasLinkPreviewPopupBeenDisplayed))?.value || false;
       window.inboxStore?.dispatch(
         updateConfirmModal({
-          shouldShowConfirm: () => !window.getSettingValue('link-preview-setting'),
+          shouldShowConfirm: () =>
+            !window.getSettingValue('link-preview-setting') && !alreadyDisplayedPopup,
           title: window.i18n('linkPreviewsTitle'),
           message: window.i18n('linkPreviewsConfirmMessage'),
           okTheme: SessionButtonColor.Danger,
           onClickOk: () => {
             window.setSettingValue('link-preview-setting', true);
           },
+          onClickClose: async () => {
+            await createOrUpdateItem({ id: hasLinkPreviewPopupBeenDisplayed, value: true });
+          },
         })
       );
     }

ts/components/session/settings/SessionSettings.tsx

@@ -9,7 +9,11 @@ import { StateType } from '../../../state/reducer';
 import { getConversationController } from '../../../session/conversations';
 import { getConversationLookup } from '../../../state/selectors/conversations';
 import { connect, useSelector } from 'react-redux';
-import { getPasswordHash } from '../../../../ts/data/data';
+import {
+  createOrUpdateItem,
+  getPasswordHash,
+  hasLinkPreviewPopupBeenDisplayed,
+} from '../../../../ts/data/data';
 import { SpacerLG, SpacerXS } from '../../basic/Text';
 import { shell } from 'electron';
 import { SessionConfirmDialogProps } from '../SessionConfirm';
@@ -339,7 +343,13 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
         hidden: false,
         type: SessionSettingType.Toggle,
         category: SessionSettingCategory.Appearance,
-        setFn: window.toggleLinkPreview,
+        setFn: async () => {
+          const newValue = !window.getSettingValue('link-preview-setting');
+          window.setSettingValue('link-preview-setting', newValue);
+          if (!newValue) {
+            await createOrUpdateItem({ id: hasLinkPreviewPopupBeenDisplayed, value: false });
+          }
+        },
         content: undefined,
         comparisonValue: undefined,
         onClick: undefined,

ts/data/data.ts

@@ -64,6 +64,7 @@ export type ServerToken = {
 
 export const hasSyncedInitialConfigurationItem = 'hasSyncedInitialConfigurationItem';
 export const lastAvatarUploadTimestamp = 'lastAvatarUploadTimestamp';
+export const hasLinkPreviewPopupBeenDisplayed = 'hasLinkPreviewPopupBeenDisplayed';
 
 const channelsToMake = {
   shutdown,

ts/window.d.ts

@@ -59,7 +59,6 @@ declare global {
     showResetSessionIdDialog: any;
     storage: any;
     textsecure: LibTextsecure;
-    toggleLinkPreview: any;
     toggleMediaPermissions: any;
     toggleMenuBar: any;
     toggleSpellCheck: any;