keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects Releases Wiki Activity

Timer notifications rework

Browse Source
pull/1102/head
Vincent 5 years ago
parent 214be7a298
commit f2ce52a3d5
7 changed files with 74 additions and 52 deletions
Show Stats Download Patch File Download Diff File

16
stylesheets/_modules.scss
Unescape Escape View File

@ -1379,9 +1379,25 @@
} }
.module-timer-notification__message { .module-timer-notification__message {
display: grid;
grid-template-columns: 20px auto 20px;
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
letter-spacing: 0.3px; 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 { .module-notification--with-click-handler {

1
stylesheets/_session_conversation.scss
Unescape Escape View File

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

20
ts/components/conversation/TimerNotification.tsx
Unescape Escape View File

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

63
ts/components/session/conversation/SessionCompositionBox.tsx
Unescape Escape View File

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

20
ts/components/session/conversation/SessionConversation.tsx
Unescape Escape View File

@ -347,7 +347,7 @@ export class SessionConversation extends React.Component<any, State> {
// ~~~~~~~~~~~~~~ GETTER METHODS ~~~~~~~~~~~~~~ // ~~~~~~~~~~~~~~ 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 { conversationKey, messageFetchTimestamp } = this.state;
const timestamp = getTimestamp(); const timestamp = getTimestamp();
@ -355,14 +355,6 @@ export class SessionConversation extends React.Component<any, State> {
// This avoids getting messages on every re-render. // This avoids getting messages on every re-render.
const timeBuffer = timestamp - messageFetchTimestamp; const timeBuffer = timestamp - messageFetchTimestamp;
if (timeBuffer < fetchInterval) { 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 }; return { newTopMessage: undefined, previousTopMessage: undefined };
} }
@ -415,7 +407,7 @@ export class SessionConversation extends React.Component<any, State> {
const members = conversation.get('members') || []; const members = conversation.get('members') || [];
return { const headerProps = {
id: conversation.id, id: conversation.id,
name: conversation.getName(), name: conversation.getName(),
phoneNumber: conversation.getNumber(), phoneNumber: conversation.getNumber(),
@ -448,7 +440,7 @@ export class SessionConversation extends React.Component<any, State> {
hasNickname: !!conversation.getNickname(), hasNickname: !!conversation.getNickname(),
onSetDisappearingMessages: (seconds: any) => onSetDisappearingMessages: (seconds: any) =>
conversation.setDisappearingMessages(seconds), conversation.updateExpirationTimer(seconds),
onDeleteMessages: () => conversation.destroyMessages(), onDeleteMessages: () => conversation.destroyMessages(),
onDeleteSelectedMessages: () => conversation.deleteSelectedMessages(), onDeleteSelectedMessages: () => conversation.deleteSelectedMessages(),
onCloseOverlay: () => conversation.resetMessageSelection(), 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() { public getGroupSettingsProps() {

4
ts/components/session/icon/Icons.tsx
Unescape Escape View File

@ -195,8 +195,8 @@ export const icons = {
}, },
[SessionIconType.Stopwatch]: { [SessionIconType.Stopwatch]: {
path: 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', '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 21 21', viewBox: '0 0 512 512',
}, },
[SessionIconType.QR]: { [SessionIconType.QR]: {
path: path:

2
ts/components/session/settings/SessionSettings.tsx
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save