Timer notifications rework

stylesheets/_modules.scss

@@ -1379,9 +1379,25 @@
 }
 
 .module-timer-notification__message {
+  display: grid;
+  grid-template-columns: 20px auto 20px;
   font-size: 14px;
   line-height: 20px;
   letter-spacing: 0.3px;
+
+  & > div{
+    align-self: center;
+    justify-self: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .module-contact-name__profile-name {
+    text-align: center;
+  }
+
 }
 
 .module-notification--with-click-handler {

stylesheets/_session_conversation.scss

@@ -403,4 +403,5 @@ $composition-container-height: 60px;
       animation: pulseLight 4s infinite;
     }
   }
+
 }

ts/components/conversation/TimerNotification.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import classNames from 'classnames';
 
 import { ContactName } from './ContactName';
 import { Intl } from '../Intl';
@@ -65,23 +64,20 @@ export class TimerNotification extends React.Component<Props> {
   }
 
   public render() {
-    const { timespan, disabled } = this.props;
-
     return (
       <div className="module-timer-notification">
-        <div className="module-timer-notification__icon-container">
-          {!disabled && (
+        <div className="module-timer-notification__message">
+          <div>
             <SessionIcon
               iconType={SessionIconType.Stopwatch}
-              iconSize={SessionIconSize.Large}
+              iconSize={SessionIconSize.Small}
+              iconColor={'#ABABAB'}
             />
-          )}
-          <div className="module-timer-notification__icon-label">
-            {timespan}
           </div>
-        </div>
-        <div className="module-timer-notification__message">
-          {this.renderContents()}
+
+          <div>
+            {this.renderContents()}
+          </div>
         </div>
       </div>
     );

ts/components/session/conversation/SessionCompositionBox.tsx

@@ -36,8 +36,8 @@ interface State {
 }
 
 export class SessionCompositionBox extends React.Component<Props, State> {
-  private textarea: React.RefObject<HTMLTextAreaElement>;
-  private fileInput: React.RefObject<HTMLInputElement>;
+  private readonly textarea: React.RefObject<HTMLTextAreaElement>;
+  private readonly fileInput: React.RefObject<HTMLInputElement>;
   private emojiPanel: any;
 
   constructor(props: any) {
@@ -73,10 +73,10 @@ export class SessionCompositionBox extends React.Component<Props, State> {
     // Attachments
     this.onChoseAttachment = this.onChoseAttachment.bind(this);
     this.onChooseAttachment = this.onChooseAttachment.bind(this);
-    
+
     this.onKeyDown = this.onKeyDown.bind(this);
     this.onChange = this.onChange.bind(this);
-    
+
   }
 
   public componentWillReceiveProps(){
@@ -84,7 +84,7 @@ export class SessionCompositionBox extends React.Component<Props, State> {
   }
 
   public async componentWillMount(){
-    const mediaSetting = await window.getMediaPermissions();
+    const mediaSetting = await window.getSettingValue('media-permissions');
     this.setState({mediaSetting});
   }
 
@@ -120,20 +120,20 @@ export class SessionCompositionBox extends React.Component<Props, State> {
 
   private hideEmojiPanel() {
     document.removeEventListener('mousedown', this.handleClick, false);
-    
+
     this.setState({
       showEmojiPanel: false,
     });
   }
 
-  public toggleEmojiPanel() {
+  private toggleEmojiPanel() {
     if (this.state.showEmojiPanel) {
       this.hideEmojiPanel();
     } else {
       this.showEmojiPanel();
     }
   }
-  
+
   private renderRecordingView() {
     return (
       <SessionRecording
@@ -223,7 +223,7 @@ export class SessionCompositionBox extends React.Component<Props, State> {
 
     const attachments: Array<Attachment> = [];
     Array.from(attachmentsFileList).forEach(async (file: File) => {
-      
+
       const fileBlob = new Blob([file]);
       const fileBuffer = await new Response(fileBlob).arrayBuffer();
 
@@ -234,10 +234,12 @@ export class SessionCompositionBox extends React.Component<Props, State> {
         contentType: MIME.AUDIO_WEBM,
         size: file.size,
         data: fileBuffer,
-      }
+      };
 
       // Push if size is nonzero
-      attachment.data.byteLength && attachments.push(attachment);
+      if (attachment.data.byteLength) {
+        attachments.push(attachment);
+      }
     });
 
     this.setState({attachments});
@@ -254,14 +256,18 @@ export class SessionCompositionBox extends React.Component<Props, State> {
   }
 
 
-  private onSendMessage(){  
+  private onSendMessage() {
     const messageInput = this.textarea.current;
-    if (!messageInput) return;
-    
+    if (!messageInput) {
+      return;
+    }
+
     // Verify message length
     const messagePlaintext = messageInput.value;
     const msgLen = messagePlaintext.length;
-    if (msgLen === 0 || msgLen > window.CONSTANTS.MAX_MESSAGE_BODY_LENGTH) return;
+    if (msgLen === 0 || msgLen > window.CONSTANTS.MAX_MESSAGE_BODY_LENGTH) {
+      return;
+    }
 
 
     // handle Attachments
@@ -283,11 +289,11 @@ export class SessionCompositionBox extends React.Component<Props, State> {
       undefined,
       undefined,
       null,
-      {},
+      {}
     ).then(() => {
       // Message sending sucess
       this.props.onMessageSuccess();
-      
+
       // Empty attachments
       // Empty composition box
       this.setState({
@@ -302,7 +308,9 @@ export class SessionCompositionBox extends React.Component<Props, State> {
   }
 
   private async sendVoiceMessage(audioBlob: Blob) {
-    if (!this.state.showRecordingView) return;
+    if (!this.state.showRecordingView) {
+      return;
+    }
 
     const fileBuffer = await new Response(audioBlob).arrayBuffer();
 
@@ -322,7 +330,7 @@ export class SessionCompositionBox extends React.Component<Props, State> {
     );
 
     if (messageSuccess) {
-      alert('MESSAGE VOICE SUCCESS');
+      // success!
     }
 
     console.log(`[compositionbox] Sending voice message:`, audioBlob);
@@ -331,16 +339,17 @@ export class SessionCompositionBox extends React.Component<Props, State> {
     this.onExitVoiceNoteView();
   }
 
-  private onLoadVoiceNoteView(){
+  private onLoadVoiceNoteView() {
     // Do stuff for component, then run callback to SessionConversation
     const {mediaSetting} = this.state;
 
-    if (mediaSetting){
-      this.setState({ 
+    if (mediaSetting) {
+      this.setState({
         showRecordingView: true,
         showEmojiPanel: false,
       });
       this.props.onLoadVoiceNoteView();
+
       return;
     }
 
@@ -350,7 +359,7 @@ export class SessionCompositionBox extends React.Component<Props, State> {
       description: window.i18n('audioPermissionNeededDescription'),
       type: 'info',
     });
-    
+
   }
 
   private onExitVoiceNoteView() {
@@ -359,7 +368,7 @@ export class SessionCompositionBox extends React.Component<Props, State> {
     this.props.onExitVoiceNoteView();
   }
 
-  private onDrop(){
+  private onDrop() {
     // On drop attachments!
     // this.textarea.current?.ondrop;
     // Look into react-dropzone
@@ -371,7 +380,9 @@ export class SessionCompositionBox extends React.Component<Props, State> {
 
   private onEmojiClick({native}: any) {
     const messageBox = this.textarea.current;
-    if (!messageBox) return;
+    if (!messageBox) {
+      return;
+    }
 
     const { message } = this.state;
     const currentSelectionStart = Number(messageBox.selectionStart);
@@ -386,7 +397,7 @@ export class SessionCompositionBox extends React.Component<Props, State> {
       const selectionStart = currentSelectionStart + Number(native.length);
       messageBox.selectionStart = selectionStart;
       messageBox.selectionEnd = selectionStart;
-      
+
       // Sometimes, we have to repeat the set of the selection position with a timeout to be effective
       setTimeout(() => {
         messageBox.selectionStart = selectionStart;

ts/components/session/conversation/SessionConversation.tsx

@@ -347,7 +347,7 @@ export class SessionConversation extends React.Component<any, State> {
   // ~~~~~~~~~~~~~~ GETTER METHODS ~~~~~~~~~~~~~~
   // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
-  public async getMessages(numMessages?: number, fetchInterval = window.CONSTANTS.MESSAGE_FETCH_INTERVAL, loopback = false){
+  public async getMessages(numMessages?: number, fetchInterval = window.CONSTANTS.MESSAGE_FETCH_INTERVAL) {
     const { conversationKey, messageFetchTimestamp } = this.state;
     const timestamp = getTimestamp();
 
@@ -355,14 +355,6 @@ export class SessionConversation extends React.Component<any, State> {
     // This avoids getting messages on every re-render.
     const timeBuffer = timestamp - messageFetchTimestamp;
     if (timeBuffer < fetchInterval) {
-      // Loopback gets messages after time has elapsed,
-      // rather than completely cancelling the fetch.
-      // if (loopback) {
-      //   setTimeout(() => {
-      //     this.getMessages(numMessages, fetchInterval, false);
-      //   }, timeBuffer * 1000);
-      // }      
-
       return { newTopMessage: undefined, previousTopMessage: undefined };
     }
 
@@ -415,7 +407,7 @@ export class SessionConversation extends React.Component<any, State> {
 
     const members = conversation.get('members') || [];
 
-    return {
+    const headerProps = {
       id: conversation.id,
       name: conversation.getName(),
       phoneNumber: conversation.getNumber(),
@@ -448,7 +440,7 @@ export class SessionConversation extends React.Component<any, State> {
       hasNickname: !!conversation.getNickname(),
 
       onSetDisappearingMessages: (seconds: any) =>
-      conversation.setDisappearingMessages(seconds),
+      conversation.updateExpirationTimer(seconds),
       onDeleteMessages: () => conversation.destroyMessages(),
       onDeleteSelectedMessages: () => conversation.deleteSelectedMessages(),
       onCloseOverlay: () => conversation.resetMessageSelection(),
@@ -525,6 +517,12 @@ export class SessionConversation extends React.Component<any, State> {
         }
       },
     };
+
+    console.log(`[header] HeaderProps:`, headerProps);
+    console.log(`[header] Conv: `, conversation);
+
+
+    return headerProps;
   }
 
   public getGroupSettingsProps() {

ts/components/session/icon/Icons.tsx

@@ -195,8 +195,8 @@ export const icons = {
   },
   [SessionIconType.Stopwatch]: {
     path:
-      'M11.74 4.64L12.96 5.22L14.06 6L14.56 6.49L14.5 6.21L14.57 5.83L14.79 5.5L15.5 4.79L15.83 4.57L16.21 4.5L16.58 4.57L16.91 4.79L17.13 5.12L17.21 5.5L17.13 5.88L16.91 6.21L16.21 6.91L15.88 7.13L15.5 7.21L15.14 7.14L15.78 8.04L16.36 9.26L16.72 10.59L16.85 12L16.72 13.41L16.36 14.74L15.78 15.96L15 17.06L14.06 18L12.96 18.78L11.74 19.36L10.41 19.72L9 19.85L7.59 19.72L6.26 19.36L5.04 18.78L3.94 18L3 17.06L2.22 15.96L1.64 14.74L1.28 13.41L1.15 12L1.28 10.59L1.64 9.26L2.22 8.04L3 6.94L3.94 6L5.04 5.22L6.26 4.64L7.59 4.28L9 4.15L10.41 4.28L11.74 4.64ZM11.75 0.47L11.94 0.73L12 1L11.92 1.39L11.71 1.71L11.39 1.92L11 2L10 2L10 4L8 4L8 2L7 2L6.61 1.92L6.29 1.71L6.08 1.39L6 1L6.08 0.61L6.29 0.29L6.61 0.08L7 0L11 0L11.44 0.23L11.75 0.47Z M10 13C10 13.55 9.55 14 9 14C9 14 9 14 9 14C8.45 14 8 13.55 8 13C8 12.8 8 11.2 8 11C8 10.45 8.45 10 9 10C9 10 9 10 9 10C9.55 10 10 10.45 10 11C10 11.4 10 12.8 10 13Z',
-    viewBox: '0 0 21 21',
+      'm282.523438 1.34375c-8.800782-.886719-17.640626-1.328125-26.484376-1.3242188h-.265624c-14.636719.2421878-26.339844 12.2421878-26.214844 26.8828128v105.53125c-.035156 3.554687.6875 7.074218 2.117187 10.328125 4.582031 10.90625 15.863281 17.429687 27.597657 15.964843 13.554687-2.03125 23.5-13.792968 23.25-27.492187v-76.484375c98.890624 12.980469 173.726562 95.839844 176.59375 195.539062 2.867187 99.699219-67.078126 186.726563-165.058594 205.367188-97.980469 18.644531-195-36.613281-228.945313-130.398438-33.945312-93.785156 5.226563-198.339843 92.441407-246.730468 11.59375-6.566406 16.445312-20.769532 11.289062-33.054688l-.03125-.074218c-2.890625-6.988282-8.625-12.40625-15.765625-14.902344-7.136719-2.492188-15-1.820313-21.613281 1.84375-110.347656 61.484375-159.351563 194.269531-115.402344 312.695312 43.945312 118.429688 167.710938 187.097656 291.453125 161.710938 123.742187-25.386719 210.472656-137.238282 204.238281-263.40625-6.230468-126.164063-103.558594-228.925782-229.199218-241.996094zm0 0 M159.300781 170.949219c10.652344 28.050781 45.503907 94.28125 71.574219 122.480469 16.027344 18.09375 43.394531 20.515624 62.351562 5.523437 9.484376-7.957031 15.191407-19.527344 15.738282-31.894531.542968-12.363282-4.132813-24.390625-12.878906-33.148438-27.265626-27.261718-96.464844-63.382812-125.480469-74.398437-3.25-1.222657-6.917969-.417969-9.363281 2.050781-2.441407 2.472656-3.203126 6.148438-1.941407 9.386719zm0 0',
+    viewBox: '0 0 512 512',
   },
   [SessionIconType.QR]: {
     path:

ts/components/session/settings/SessionSettings.tsx

@@ -79,7 +79,7 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
   }
 
   public async componentWillMount() {
-    const mediaSetting = await window.getMediaPermissions();
+    const mediaSetting = await window.getSettingValue('media-permissions');
     this.setState({ mediaSetting });
   }