diff --git a/js/background.js b/js/background.js index b4752cbc2..fd9dd2629 100644 --- a/js/background.js +++ b/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 diff --git a/preload.js b/preload.js index 96c3c4625..8317ab2df 100644 --- a/preload.js +++ b/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 || {}; diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss index 2d2b1d0ad..dcc523d5c 100644 --- a/stylesheets/_session_conversation.scss +++ b/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%; diff --git a/ts/components/session/SessionProgress.tsx b/ts/components/session/SessionProgress.tsx index 35b0872a4..6e7a61a52 100644 --- a/ts/components/session/SessionProgress.tsx +++ b/ts/components/session/SessionProgress.tsx @@ -40,11 +40,9 @@ export class SessionProgress extends React.PureComponent { // 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 { 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 { this.setState({ startFade: true, }); + } } diff --git a/ts/components/session/conversation/SessionCompositionBox.tsx b/ts/components/session/conversation/SessionCompositionBox.tsx index ffdd947eb..d95e039e8 100644 --- a/ts/components/session/conversation/SessionCompositionBox.tsx +++ b/ts/components/session/conversation/SessionCompositionBox.tsx @@ -258,18 +258,19 @@ export class SessionCompositionBox extends React.Component { 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 diff --git a/ts/components/session/conversation/SessionConversation.tsx b/ts/components/session/conversation/SessionConversation.tsx index 787ffef1d..938553701 100644 --- a/ts/components/session/conversation/SessionConversation.tsx +++ b/ts/components/session/conversation/SessionConversation.tsx @@ -83,7 +83,7 @@ export class SessionConversation extends React.Component { // 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 { }); }, 100); }); + + this.updateReadMessages(); } public componentDidUpdate(){ @@ -573,9 +575,9 @@ export class SessionConversation extends React.Component { // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ // ~~~~~~~~~~~~~ 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 { } 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() {