Added read receipt checkbox to the settings window which enables or disables the sending and receiving of read receipts

_locales/en/messages.json

@@ -1050,6 +1050,10 @@
     "message": "Notifications",
     "description": "Header for notification settings"
   },
+  "readReceiptSettingDescription": {
+    "message": "Enable the sending and receiving of read receipts",
+    "description": "Description of the read receipts setting"
+  },
   "notificationSettingsDialog": {
     "message": "When messages arrive, display notifications that reveal:",
     "description": "Explain the purpose of the notification settings"

js/background.js

@@ -236,6 +236,10 @@
         window.setMenuBarVisibility(!value);
       },
 
+      getReadReceiptSetting: () =>
+        storage.get('read-receipt-setting'),
+      setReadReceiptSetting: value =>
+        storage.put('read-receipt-setting', value),
       getNotificationSetting: () =>
         storage.get('notification-setting', 'message'),
       setNotificationSetting: value =>

js/settings_start.js

@@ -18,6 +18,7 @@ const getInitialData = async () => ({
   themeSetting: await window.getThemeSetting(),
   hideMenuBar: await window.getHideMenuBar(),
 
+  readReceiptSetting: await window.getReadReceiptSetting(),
   notificationSetting: await window.getNotificationSetting(),
   audioNotification: await window.getAudioNotification(),
 

js/views/settings_view.js

@@ -50,6 +50,25 @@
     },
   });
 
+  const ReadReceiptSettingView = Whisper.View.extend({
+    initialize(options) {
+      this.value = options.value;
+      this.setFn = options.setFn;
+      this.populate();
+    },
+    events: {
+      change: 'change',
+    },
+    change(e) {
+      this.value = e.target.checked;
+      this.setFn(this.value);
+      window.log.info('read-receipt-setting changed to', this.value);
+    },
+    populate() {
+      this.$('input').prop('checked', Boolean(this.value));
+    },
+  });
+
   const RadioButtonGroupView = Whisper.View.extend({
     initialize(options) {
       this.name = options.name;
@@ -117,7 +136,11 @@
         value: window.initialData.mediaPermissions,
         setFn: window.setMediaPermissions,
       });
-
+      new ReadReceiptSettingView({
+        el: this.$('.read-receipt-setting'),
+        value: window.initialData.readReceiptSetting,
+        setFn: window.setReadReceiptSetting,
+      });
       const blockedNumberView = new Whisper.BlockedNumberView().render();
       this.$('.blocked-user-setting').append(blockedNumberView.el);
 
@@ -152,6 +175,7 @@
         clearDataExplanation: i18n('clearDataExplanation'),
         permissions: i18n('permissions'),
         mediaPermissionsDescription: i18n('mediaPermissionsDescription'),
+        readReceiptSettingDescription: i18n('readReceiptSettingDescription'),
         spellCheckHeader: i18n('spellCheck'),
         spellCheckDescription: i18n('spellCheckDescription'),
         blockedHeader: 'Blocked Users',

main.js

@@ -905,6 +905,8 @@ installSettingsSetter('theme-setting');
 installSettingsGetter('hide-menu-bar');
 installSettingsSetter('hide-menu-bar');
 
+installSettingsGetter('read-receipt-setting');
+installSettingsSetter('read-receipt-setting');
 installSettingsGetter('notification-setting');
 installSettingsSetter('notification-setting');
 installSettingsGetter('audio-notification');

preload.js

@@ -141,6 +141,8 @@ installSetter('theme-setting', 'setThemeSetting');
 installGetter('hide-menu-bar', 'getHideMenuBar');
 installSetter('hide-menu-bar', 'setHideMenuBar');
 
+installGetter('read-receipt-setting', 'getReadReceiptSetting');
+installSetter('read-receipt-setting', 'setReadReceiptSetting');
 installGetter('notification-setting', 'getNotificationSetting');
 installSetter('notification-setting', 'setNotificationSetting');
 installGetter('audio-notification', 'getAudioNotification');

settings.html

@@ -105,6 +105,10 @@
         <input type='checkbox' name='media-permissions' id='media-permissions' />
         <label for='media-permissions'>{{ mediaPermissionsDescription }}</label>
       </div>
+      <div class='read-receipt-setting'>
+        <input type='checkbox' name='read-receipt-setting' id='read-receipt-setting' />
+        <label for='read-receipt-setting'>{{ readReceiptSettingDescription }}</label>
+      </div>
     </div>
     <div class='sync-setting'></div>
     <hr>

settings_preload.js

@@ -41,6 +41,8 @@ window.setHideMenuBar = makeSetter('hide-menu-bar');
 window.getSpellCheck = makeGetter('spell-check');
 window.setSpellCheck = makeSetter('spell-check');
 
+window.getReadReceiptSetting = makeGetter('read-receipt-setting');
+window.setReadReceiptSetting = makeSetter('read-receipt-setting');
 window.getNotificationSetting = makeGetter('notification-setting');
 window.setNotificationSetting = makeSetter('notification-setting');
 window.getAudioNotification = makeGetter('audio-notification');