organisation

js/background.js

@@ -1050,9 +1050,8 @@
 
     window.toggleMediaPermissions = () => {
       // eslint-disable-next-line more/no-then
-      window.getMediaPermissions().then(value => {
-        window.setMediaPermissions(!value);
-      });
+      const value = window.getMediaPermissions();
+      window.setMediaPermissions(!value);
     };
 
     // attempts a connection to an open group server

preload.js

@@ -238,6 +238,8 @@ window.getSettingValue = (settingID, comparisonValue = null) => {
 window.setSettingValue = (settingID, value) => {
   window.storage.put(settingID, value);
 
+  // FIXME - This should be called in the settings object in 
+  // SessionSettings
   if (settingID === 'zoom-factor-setting') {
     window.updateZoomFactor();
   }
@@ -245,7 +247,10 @@ window.setSettingValue = (settingID, value) => {
 
 // Get the message TTL setting
 window.getMessageTTL = () => window.storage.get('message-ttl', 24);
+
+// Media Permissions
 window.getMediaPermissions = () => ipc.sendSync('get-media-permissions');
+window.setMediaPermissions = value => ipc.send('set-media-permissions', !!value);
 
 ipc.on('get-ready-for-shutdown', async () => {
   const { shutdown } = window.Events || {};

stylesheets/_session_conversation.scss

@@ -289,7 +289,6 @@ $composition-container-height: 60px;
   z-index: 100;
 
   &__progress {
-    transition: opacity 0.25s;
     will-change: transform;
     
     width: 100%;

ts/components/session/SessionProgress.tsx

@@ -40,11 +40,9 @@ export class SessionProgress extends React.PureComponent<Props, State> {
     // Duration will be the decimal (in seconds) of
     // the percentage differnce, else 0.25s;
     // Minimum shift duration of 0.25s;
-    const shiftDuration = this.getShiftDuration(this.props.value, prevValue).toFixed(2);
 
     // 1. Width depends on progress.
-    // 2. Opacity is the inverse of fade.
-    // 3. Transition duration scales with the
+    // 2. Transition duration scales with the
     //    distance it needs to travel
     
     // FIXME VINCE - globalise all JS color references
@@ -52,13 +50,20 @@ export class SessionProgress extends React.PureComponent<Props, State> {
     const sessionDangerAlt = '#ff4538';
     const successColor = sessionBrandColor;
     const failureColor = sessionDangerAlt;
-    const backgroundColor = sendStatus === 2 ? failureColor : successColor;
+    const backgroundColor = sendStatus === -1 ? failureColor : successColor;
+
+    const shiftDurationMs = this.getShiftDuration(this.props.value, prevValue) * 1000;
+    const fadeDurationMs = 500;
+    const fadeOffsetMs = shiftDurationMs + 500;
 
     const style = {
-      'background-color': backgroundColor,
-      transform: `translateX(-${100 - value}%)`,
-      transition: `transform ${shiftDuration}s cubic-bezier(0.25, 0.46, 0.45, 0.94)`,
-    };
+      'background-color':         backgroundColor,
+      'transform':                `translateX(-${100 - value}%)`,
+      'transition-property':      'transform, opacity',
+      'transition-duration':      `${shiftDurationMs}ms, ${fadeDurationMs}ms`,
+      'transition-delay':         `0ms, ${fadeOffsetMs}ms`,
+      'transition-timing-funtion':'cubic-bezier(0.25, 0.46, 0.45, 0.94), linear',
+    }
 
     if (value >= 100) {
       this.onComplete();
@@ -84,6 +89,7 @@ export class SessionProgress extends React.PureComponent<Props, State> {
       this.setState({
         startFade: true,
       });
+      
     }
   }
 

ts/components/session/conversation/SessionCompositionBox.tsx

@@ -258,18 +258,19 @@ export class SessionCompositionBox extends React.Component<Props, State> {
     const messageInput = this.textarea.current;
     if (!messageInput) return;
     
+    // Verify message length
     const messagePlaintext = messageInput.value;
-    const {attachments} = this.state;
+    const msgLen = messagePlaintext.length;
+    if (msgLen === 0 || msgLen > window.CONSTANTS.MAX_MESSAGE_BODY_LENGTH) return;
 
-    // FIXME VINCE: Get emoiji, attachments, etc
+
+    // handle Attachments
+    const {attachments} = this.state;
 
     console.log(`[vince][msg] Message:`, messagePlaintext);
     console.log(`[vince][msg] fileAttachments:`, attachments);
 
 
-    // Verify message length
-
-
     // Handle emojis
 
 

ts/components/session/conversation/SessionConversation.tsx

@@ -83,7 +83,7 @@ export class SessionConversation extends React.Component<any, State> {
     // Messages
     this.selectMessage = this.selectMessage.bind(this);
     this.resetSelection = this.resetSelection.bind(this);
-    this.updateSendingProgres = this.updateSendingProgres.bind(this);
+    this.updateSendingProgress = this.updateSendingProgress.bind(this);
     this.onMessageSending = this.onMessageSending.bind(this);
     this.onMessageSuccess = this.onMessageSuccess.bind(this);
     this.onMessageFailure = this.onMessageFailure.bind(this);
@@ -112,6 +112,8 @@ export class SessionConversation extends React.Component<any, State> {
         });
       }, 100);
     });
+
+    this.updateReadMessages();
   }
 
   public componentDidUpdate(){
@@ -573,9 +575,9 @@ export class SessionConversation extends React.Component<any, State> {
   // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   // ~~~~~~~~~~~~~ MESSAGE HANDLING ~~~~~~~~~~~~~
   // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-  public updateSendingProgres(value: number, status: -1 | 0 | 1 | 2) {
+  public updateSendingProgress(value: number, status: -1 | 0 | 1 | 2) {
     // If you're sending a new message, reset previous value to zero
-    const prevSendingProgress = status === 1 ? 0 : this.state.sendingProgress;
+    const prevSendingProgress = 0//status === 1 ? 0 : this.state.sendingProgress;
 
     this.setState({
       sendingProgress: value,
@@ -585,23 +587,21 @@ export class SessionConversation extends React.Component<any, State> {
   }
 
   public onMessageSending() {
-    // Set sending state to random between 10% and 50% to show message sending
-    const minInitVal = 10;
-    const maxInitVal = 50;
-    const initialValue = minInitVal + (maxInitVal - minInitVal) * Math.random();
+    // Set sending state 5% to show message sending
+    const initialValue = 5;
 
     console.log(`[sending] Message Sending`);
-    this.updateSendingProgres(initialValue, 1);
+    this.updateSendingProgress(initialValue, 1);
   }
 
   public onMessageSuccess(){
     console.log(`[sending] Message Sent`);
-    this.updateSendingProgres(100, 2);
+    this.updateSendingProgress(100, 2);
   }
 
   public onMessageFailure(){
     console.log(`[sending] Message Failure`);
-    this.updateSendingProgres(100, -1);
+    this.updateSendingProgress(100, -1);
   }
   
   public updateReadMessages() {