Merge pull request #131 from Mikunj/ttl-setting

Added TTL to settings.

_locales/en/messages.json

@@ -1079,6 +1079,18 @@
     "message": "Enable the sending and receiving of read receipts",
     "description": "Description of the read receipts setting"
   },
+  "messageTTL": {
+    "message": "Message TTL",
+    "description": "Title of the Message TTL setting"
+  },
+  "messageTTLSettingDescription": {
+    "message": "Time to live (how long the recipient will have to collect their messages)",
+    "description": "Description of the time to live setting"
+  },
+  "messageTTLSettingWarning": {
+    "message": "Warning! Lowering the TTL could result in messages being lost if the recipient doesn't collect them in time!",
+    "description": "Warning for the time to live setting"
+  },
   "notificationSettingsDialog": {
     "message": "When messages arrive, display notifications that reveal:",
     "description": "Explain the purpose of the notification settings"

js/background.js

@@ -236,6 +236,14 @@
         window.setMenuBarVisibility(!value);
       },
 
+      getMessageTTL: () => storage.get('message-ttl', 24),
+      setMessageTTL: value => {
+        // Make sure the ttl is between a given range and is valid
+        const intValue = parseInt(value, 10);
+        const ttl = Number.isNaN(intValue) ? 24 :  intValue;
+        storage.put('message-ttl', ttl);
+      },
+
       getReadReceiptSetting: () =>
         storage.get('read-receipt-setting'),
       setReadReceiptSetting: value =>

js/settings_start.js

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

js/views/settings_view.js

@@ -50,6 +50,30 @@
     },
   });
 
+  const MessageTTLSettingView = Whisper.View.extend({
+    initialize(options) {
+      this.value = options.value;
+      this.setFn = options.setFn;
+      this.populate();
+    },
+    events: {
+      change: 'change',
+      input: 'input',
+    },
+    change(e) {
+      this.value = e.target.value;
+      this.setFn(this.value);
+      window.log.info('message-ttl-setting changed to', this.value);
+    },
+    input(e) {
+      this.value = e.target.value;
+      this.$('label').html(`${this.value} Hours`);
+    },
+    populate() {
+      this.$('input').val(this.value);
+    },
+  });
+
   const ReadReceiptSettingView = Whisper.View.extend({
     initialize(options) {
       this.value = options.value;
@@ -141,6 +165,11 @@
         value: window.initialData.readReceiptSetting,
         setFn: window.setReadReceiptSetting,
       });
+      new MessageTTLSettingView({
+        el: this.$('.message-ttl-setting'),
+        value: window.initialData.messageTTL,
+        setFn: window.setMessageTTL,
+      });
       const blockedNumberView = new Whisper.BlockedNumberView().render();
       this.$('.blocked-user-setting').append(blockedNumberView.el);
 
@@ -176,6 +205,9 @@
         permissions: i18n('permissions'),
         mediaPermissionsDescription: i18n('mediaPermissionsDescription'),
         readReceiptSettingDescription: i18n('readReceiptSettingDescription'),
+        messageTTL: i18n('messageTTL'),
+        messageTTLSettingDescription: i18n('messageTTLSettingDescription'),
+        messageTTLSettingWarning: i18n('messageTTLSettingWarning'),
         spellCheckHeader: i18n('spellCheck'),
         spellCheckDescription: i18n('spellCheckDescription'),
         blockedHeader: 'Blocked Users',

libtextsecure/outgoing_message.js

@@ -345,11 +345,11 @@ OutgoingMessage.prototype = {
         const outgoingObject = outgoingObjects[0];
         const socketMessage = await this.wrapInWebsocketMessage(outgoingObject);
         let ttl;
-        // TODO: Allow user to set ttl manually
         if (outgoingObject.type === textsecure.protobuf.Envelope.Type.FRIEND_REQUEST) {
           ttl = 4 * 24 * 60 * 60; // 4 days for friend request message
         } else {
-          ttl = 24 * 60 * 60; // 1 day default for any other message
+          const hours = window.getMessageTTL() || 24; // 1 day default for any other message
+          ttl = hours * 60 * 60;
         }
         await this.transmitMessage(number, socketMessage, this.timestamp, ttl);
         this.successfulNumbers[this.successfulNumbers.length] = number;

main.js

@@ -1053,6 +1053,9 @@ installSettingsSetter('theme-setting');
 installSettingsGetter('hide-menu-bar');
 installSettingsSetter('hide-menu-bar');
 
+installSettingsGetter('message-ttl');
+installSettingsSetter('message-ttl');
+
 installSettingsGetter('read-receipt-setting');
 installSettingsSetter('read-receipt-setting');
 installSettingsGetter('notification-setting');

preload.js

@@ -154,6 +154,11 @@ installSetter('theme-setting', 'setThemeSetting');
 installGetter('hide-menu-bar', 'getHideMenuBar');
 installSetter('hide-menu-bar', 'setHideMenuBar');
 
+// Get the message TTL setting
+window.getMessageTTL = () => window.storage.get('message-ttl', 24)
+installGetter('message-ttl', 'getMessageTTL');
+installSetter('message-ttl', 'setMessageTTL');
+
 installGetter('read-receipt-setting', 'getReadReceiptSetting');
 installSetter('read-receipt-setting', 'setReadReceiptSetting');
 installGetter('notification-setting', 'getNotificationSetting');

settings.html

@@ -112,6 +112,42 @@
     </div>
     <div class='sync-setting'></div>
     <hr>
+    <div class='message-ttl-setting'>
+      <h3>{{ messageTTL }}</h3>
+      <div>{{ messageTTLSettingDescription }}</div>
+      <div id='warning'>{{ messageTTLSettingWarning }}</div>
+      <div class='inputs'>
+        <input
+          name='message-ttl-setting'
+          id='message-ttl-setting'
+          type='range'
+          list='tickmarks'
+          min='12'
+          max='96'
+          step='6'
+          value='24'
+        >
+        <label for='message-ttl-setting'>24 Hours</label>
+        <datalist id='tickmarks'>
+          <option value='12'>
+          <option value='18'>
+          <option value='24'>
+          <option value='30'>
+          <option value='36'>
+          <option value='42'>
+          <option value='48'>
+          <option value='54'>
+          <option value='60'>
+          <option value='66'>
+          <option value='72'>
+          <option value='78'>
+          <option value='84'>
+          <option value='90'>
+          <option value='96'>
+        </datalist>
+      </div>
+    </div>
+    <hr>
     <div class='clear-data-settings'>
       <h3>{{ clearDataHeader }}</h3>
       <div>

settings_preload.js

@@ -41,6 +41,9 @@ window.setHideMenuBar = makeSetter('hide-menu-bar');
 window.getSpellCheck = makeGetter('spell-check');
 window.setSpellCheck = makeSetter('spell-check');
 
+window.getMessageTTL = makeGetter('message-ttl');
+window.setMessageTTL = makeSetter('message-ttl');
+
 window.getReadReceiptSetting = makeGetter('read-receipt-setting');
 window.setReadReceiptSetting = makeSetter('read-receipt-setting');
 window.getNotificationSetting = makeGetter('notification-setting');

stylesheets/_settings.scss

@@ -90,4 +90,20 @@
       color: white;
     }
   }
+
+  .message-ttl-setting {
+    .inputs {
+      display: flex;
+      padding-top: 18px;
+    }
+
+    #warning {
+      padding-top: 12px;
+      font-weight: 300;
+      color: red;
+    }
+
+    input { flex: 1; }
+    label { padding-left: 12px; }
+  }
 }