From f2ce52a3d59838ca2ff0285753cb366504f4b674 Mon Sep 17 00:00:00 2001 From: Vincent Date: Mon, 6 Apr 2020 15:34:35 +1000 Subject: [PATCH] Timer notifications rework --- stylesheets/_modules.scss | 16 +++++ stylesheets/_session_conversation.scss | 1 + .../conversation/TimerNotification.tsx | 20 +++--- .../conversation/SessionCompositionBox.tsx | 63 +++++++++++-------- .../conversation/SessionConversation.tsx | 20 +++--- ts/components/session/icon/Icons.tsx | 4 +- .../session/settings/SessionSettings.tsx | 2 +- 7 files changed, 74 insertions(+), 52 deletions(-) diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 3af867ec2..c16e47031 100644 --- a/stylesheets/_modules.scss +++ b/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 { diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss index 11b595914..d403be638 100644 --- a/stylesheets/_session_conversation.scss +++ b/stylesheets/_session_conversation.scss @@ -403,4 +403,5 @@ $composition-container-height: 60px; animation: pulseLight 4s infinite; } } + } diff --git a/ts/components/conversation/TimerNotification.tsx b/ts/components/conversation/TimerNotification.tsx index 14b8758e2..87f077669 100644 --- a/ts/components/conversation/TimerNotification.tsx +++ b/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 { } public render() { - const { timespan, disabled } = this.props; - return (
-
- {!disabled && ( +
+
- )} -
- {timespan}
-
-
- {this.renderContents()} + +
+ {this.renderContents()} +
); diff --git a/ts/components/session/conversation/SessionCompositionBox.tsx b/ts/components/session/conversation/SessionCompositionBox.tsx index d95e039e8..407a97980 100644 --- a/ts/components/session/conversation/SessionCompositionBox.tsx +++ b/ts/components/session/conversation/SessionCompositionBox.tsx @@ -36,8 +36,8 @@ interface State { } export class SessionCompositionBox extends React.Component { - private textarea: React.RefObject; - private fileInput: React.RefObject; + private readonly textarea: React.RefObject; + private readonly fileInput: React.RefObject; private emojiPanel: any; constructor(props: any) { @@ -73,10 +73,10 @@ export class SessionCompositionBox extends React.Component { // 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 { } 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 { 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 ( { const attachments: Array = []; 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 { 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 { } - 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 { 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 { } 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 { ); if (messageSuccess) { - alert('MESSAGE VOICE SUCCESS'); + // success! } console.log(`[compositionbox] Sending voice message:`, audioBlob); @@ -331,16 +339,17 @@ export class SessionCompositionBox extends React.Component { 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 { description: window.i18n('audioPermissionNeededDescription'), type: 'info', }); - + } private onExitVoiceNoteView() { @@ -359,7 +368,7 @@ export class SessionCompositionBox extends React.Component { 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 { 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 { 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; diff --git a/ts/components/session/conversation/SessionConversation.tsx b/ts/components/session/conversation/SessionConversation.tsx index 5b587ffa3..77f70f6d4 100644 --- a/ts/components/session/conversation/SessionConversation.tsx +++ b/ts/components/session/conversation/SessionConversation.tsx @@ -347,7 +347,7 @@ export class SessionConversation extends React.Component { // ~~~~~~~~~~~~~~ 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 { // 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 { 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 { 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 { } }, }; + + console.log(`[header] HeaderProps:`, headerProps); + console.log(`[header] Conv: `, conversation); + + + return headerProps; } public getGroupSettingsProps() { diff --git a/ts/components/session/icon/Icons.tsx b/ts/components/session/icon/Icons.tsx index 03518e968..12332d5b0 100644 --- a/ts/components/session/icon/Icons.tsx +++ b/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: diff --git a/ts/components/session/settings/SessionSettings.tsx b/ts/components/session/settings/SessionSettings.tsx index 57af9d633..0dfdc32de 100644 --- a/ts/components/session/settings/SessionSettings.tsx +++ b/ts/components/session/settings/SessionSettings.tsx @@ -79,7 +79,7 @@ export class SettingsView extends React.Component { } public async componentWillMount() { - const mediaSetting = await window.getMediaPermissions(); + const mediaSetting = await window.getSettingValue('media-permissions'); this.setState({ mediaSetting }); }