From b3b020a253e691d3d397874d35e37089e23497e3 Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Mon, 2 Aug 2021 14:36:19 +1000 Subject: [PATCH 01/12] added styled component and conditional button for sending pausing recording. --- .../conversation/ModeratorsAddDialog.tsx | 1 - .../session/conversation/SessionRecording.tsx | 58 +++++++++++++++---- 2 files changed, 48 insertions(+), 11 deletions(-) diff --git a/ts/components/conversation/ModeratorsAddDialog.tsx b/ts/components/conversation/ModeratorsAddDialog.tsx index 07d6aac5b..9a3e209f8 100644 --- a/ts/components/conversation/ModeratorsAddDialog.tsx +++ b/ts/components/conversation/ModeratorsAddDialog.tsx @@ -2,7 +2,6 @@ import React, { useState } from 'react'; import { SessionButton, SessionButtonColor, SessionButtonType } from '../session/SessionButton'; import { PubKey } from '../../session/types'; import { ToastUtils } from '../../session/utils'; -import { useTheme } from 'styled-components'; import { SessionSpinner } from '../session/SessionSpinner'; import { Flex } from '../basic/Flex'; import { ApiV2 } from '../../opengroup/opengroupV2'; diff --git a/ts/components/session/conversation/SessionRecording.tsx b/ts/components/session/conversation/SessionRecording.tsx index 34136dd1a..a7f2cd812 100644 --- a/ts/components/session/conversation/SessionRecording.tsx +++ b/ts/components/session/conversation/SessionRecording.tsx @@ -8,6 +8,7 @@ import { Constants } from '../../../session'; import { ToastUtils } from '../../../session/utils'; import autoBind from 'auto-bind'; import MicRecorder from 'mic-recorder-to-mp3'; +import styled, { useTheme } from 'styled-components'; interface Props { onExitVoiceNoteView: any; @@ -33,6 +34,23 @@ function getTimestamp(asInt = false) { return asInt ? Math.floor(timestamp) : timestamp; } +export interface StyledFlexWrapperProps { + flexDirection: 'row' | 'column'; + marginHorizontal: string; +} + +/** + * Generic wrapper for quickly passing in theme constant values. + */ +export const StyledFlexWrapper = styled.div` + display: flex; + flex-direction: ${(props: StyledFlexWrapperProps) => props.flexDirection}; + + .session-button { + margin: ${(props: StyledFlexWrapperProps) => props.marginHorizontal}; + } +`; + class SessionRecordingInner extends React.Component { private recorder: any; private audioBlobMp3?: Blob; @@ -99,13 +117,14 @@ class SessionRecordingInner extends React.Component { const displayTimeMs = isRecording ? (nowTimestamp - startTimestamp) * 1000 : (this.audioElement && - (this.audioElement?.currentTime * 1000 || this.audioElement?.duration)) || - 0; + (this.audioElement?.currentTime * 1000 || this.audioElement?.duration)) || + 0; const displayTimeString = moment.utc(displayTimeMs).format('m:ss'); - const actionPauseFn = isPlaying ? this.pauseAudio : this.stopRecordingStream; + const themeToUse = useTheme(); + return (
{
{isRecording ? ( ) : ( - + + + + )}
@@ -272,6 +304,9 @@ class SessionRecordingInner extends React.Component { this.props.onExitVoiceNoteView(); } + /** + * Sends the recorded voice message + */ private async onSendVoiceMessage() { if (!this.audioBlobMp3 || !this.audioBlobMp3.size) { window?.log?.info('Empty audio blob'); @@ -306,6 +341,9 @@ class SessionRecordingInner extends React.Component { }); } + /** + * Stops recording audio, sets recording state to stopped. + */ private async stopRecordingStream() { if (!this.recorder) { return; From 123a60483ef8088a3277a88f1304e790bf33d4ad Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Tue, 3 Aug 2021 15:45:44 +1000 Subject: [PATCH 02/12] Adding fraction timer display, exaggerating recording animation, moving delete button to toolbar, display full recording duration immediately after stop recording. --- stylesheets/_session_constants.scss | 39 ++++++ stylesheets/_session_conversation.scss | 18 ++- .../session/conversation/SessionRecording.tsx | 126 +++++++++++------- 3 files changed, 134 insertions(+), 49 deletions(-) diff --git a/stylesheets/_session_constants.scss b/stylesheets/_session_constants.scss index 364edc36e..2bae44ea0 100644 --- a/stylesheets/_session_constants.scss +++ b/stylesheets/_session_constants.scss @@ -153,6 +153,28 @@ $session-font-h4: 16px; color: subtle($color); } +@mixin pulse-color($color) { + + animation: pulseColor 2s infinite; + + @keyframes pulseColor { + 0% { + transform: scale(0.95); + box-shadow: 0 0 0 0 rgba($color, 0.7); + } + + 70% { + transform: scale(1); + box-shadow: 0 0 0 10px rgba($color, 0); + } + + 100% { + transform: scale(0.95); + box-shadow: 0 0 0 0 rgba($color, 0); + } + } +} + $session-subtle-factor: 0.6; @function subtle($color) { @@ -195,6 +217,23 @@ $session-fadein-duration: 0.1s; } } +@keyframes pulse-shadow { + 0% { + transform: scale(0.95); + box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7); + } + + 70% { + transform: scale(1); + box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); + } + + 100% { + transform: scale(0.95); + box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); + } +} + // ////////////////////////////////////////////// // ///////////////// Various //////////////////// // ////////////////////////////////////////////// diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss index 75011e6c3..7119ea5f8 100644 --- a/stylesheets/_session_conversation.scss +++ b/stylesheets/_session_conversation.scss @@ -329,6 +329,10 @@ } } +.send-message-button { + animation: fadein $session-transition-duration; +} + .session-recording { height: $composition-container-height; display: flex; @@ -342,11 +346,14 @@ &--actions { display: flex; align-items: center; - justify-content: center; width: $actions-element-size; height: $actions-element-size; border-radius: 50%; + .session-button { + animation: fadein $session-transition-duration; + } + .session-icon-button { animation: fadein $session-transition-duration; opacity: 1; @@ -415,6 +422,11 @@ &.playback-timer { margin-right: $session-margin-sm; + animation: fadein $session-transition-duration; + + @media (-webkit-min-device-pixel-ratio: 1.6) { + margin-left: auto; + } } &-light { @@ -422,9 +434,9 @@ width: $session-margin-sm; border-radius: 50%; background-color: $session-color-danger-alt; - margin-left: $session-margin-sm; + margin: 0 $session-margin-sm; - animation: pulseLight 4s infinite; + @include pulse-color($session-color-danger-alt); } } } diff --git a/ts/components/session/conversation/SessionRecording.tsx b/ts/components/session/conversation/SessionRecording.tsx index a7f2cd812..64f5f81be 100644 --- a/ts/components/session/conversation/SessionRecording.tsx +++ b/ts/components/session/conversation/SessionRecording.tsx @@ -45,6 +45,7 @@ export interface StyledFlexWrapperProps { export const StyledFlexWrapper = styled.div` display: flex; flex-direction: ${(props: StyledFlexWrapperProps) => props.flexDirection}; + align-items: center; .session-button { margin: ${(props: StyledFlexWrapperProps) => props.marginHorizontal}; @@ -105,10 +106,11 @@ class SessionRecordingInner extends React.Component { nowTimestamp, } = this.state; - const actionStopRecording = actionHover && isRecording; - const actionPlayAudio = !isRecording && !isPlaying; + const hasRecordingAndPaused = !isRecording && !isPlaying; const actionPauseAudio = !isRecording && !isPaused && isPlaying; - const actionDefault = !actionStopRecording && !actionPlayAudio && !actionPauseAudio; + + // const actionDefault = !actionStopRecording && !actionPlayAudio && !actionPauseAudio; + const actionDefault = !isRecording && !hasRecordingAndPaused && !actionPauseAudio; // if we are recording, we base the time recording on our state values // if we are playing ( audioElement?.currentTime is !== 0, use that instead) @@ -119,11 +121,19 @@ class SessionRecordingInner extends React.Component { : (this.audioElement && (this.audioElement?.currentTime * 1000 || this.audioElement?.duration)) || 0; + let displayTimeString = moment.utc(displayTimeMs).format('m:ss'); - const displayTimeString = moment.utc(displayTimeMs).format('m:ss'); - const actionPauseFn = isPlaying ? this.pauseAudio : this.stopRecordingStream; + const recordingLengthMs = this.audioElement?.duration ? this.audioElement?.duration * 1000 : undefined; - const themeToUse = useTheme(); + let remainingTimeString; + if (recordingLengthMs !== undefined) { + console.log({ recordingLengthMs }); + console.log({ displayTimeMs }); + remainingTimeString = ` / ${moment.utc(recordingLengthMs).format('m:ss')}`; + displayTimeString += remainingTimeString; + } + + const actionPauseFn = isPlaying ? this.pauseAudio : this.stopRecordingStream; return (
@@ -132,7 +142,7 @@ class SessionRecordingInner extends React.Component { onMouseEnter={this.handleHoverActions} onMouseLeave={this.handleUnhoverActions} > - {actionStopRecording && ( + {isRecording && ( { onClick={actionPauseFn} /> )} - {actionPlayAudio && ( - + {hasRecordingAndPaused && ( + + + + )} {actionDefault && ( @@ -163,10 +184,14 @@ class SessionRecordingInner extends React.Component { )}
-
- {displayTimeString} - {isRecording &&
} -
+ {isRecording || (!isRecording && remainingTimeString) ? +
+ {displayTimeString} + {isRecording &&
} +
+ : + null + } {!isRecording && (
@@ -179,35 +204,6 @@ class SessionRecordingInner extends React.Component {
)} -
- {isRecording ? ( - - ) : ( - - - - - )} -
); } @@ -352,10 +348,48 @@ class SessionRecordingInner extends React.Component { this.recorder = undefined; this.audioBlobMp3 = blob; + this.updateAudioElementAndDuration(); + // Stop recording this.stopRecordingState(); } + private async onStopRecordingClick() { + this.stopRecordingStream(); + this.updateAudioElementAndDuration(); + this.stopRecordingState(); + } + + + + /** + * Creates an audio element using the recorded audio blob. + * Updates the duration for displaying audio duration. + */ + private updateAudioElementAndDuration() { + // init audio element + const audioURL = window.URL.createObjectURL(this.audioBlobMp3); + this.audioElement = new Audio(audioURL); + + // ww adding record duration + this.setState({ + recordDuration: this.audioElement.duration + }) + + this.audioElement.loop = false; + this.audioElement.onended = () => { + this.pauseAudio(); + }; + + this.audioElement.oncanplaythrough = async () => { + const duration = this.state.recordDuration; + + if (duration && this.audioElement && this.audioElement.currentTime < duration) { + await this.audioElement?.play(); + } + }; + } + private async onKeyDown(event: any) { if (event.key === 'Escape') { await this.onDeleteVoiceMessage(); From 91eafd389a5647a40baa37c8c9a6a7aebec830ad Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Tue, 3 Aug 2021 16:18:38 +1000 Subject: [PATCH 03/12] Adding small hover effect to message composition icon buttons. Removing extra method call. --- stylesheets/_session_constants.scss | 21 ++----------------- stylesheets/_session_conversation.scss | 10 +++++++-- .../session/conversation/SessionRecording.tsx | 9 ++++---- 3 files changed, 14 insertions(+), 26 deletions(-) diff --git a/stylesheets/_session_constants.scss b/stylesheets/_session_constants.scss index 2bae44ea0..f4c199274 100644 --- a/stylesheets/_session_constants.scss +++ b/stylesheets/_session_constants.scss @@ -153,9 +153,9 @@ $session-font-h4: 16px; color: subtle($color); } -@mixin pulse-color($color) { +@mixin pulse-color($color, $repetition) { - animation: pulseColor 2s infinite; + animation: pulseColor 2s $repetition; @keyframes pulseColor { 0% { @@ -217,23 +217,6 @@ $session-fadein-duration: 0.1s; } } -@keyframes pulse-shadow { - 0% { - transform: scale(0.95); - box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7); - } - - 70% { - transform: scale(1); - box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); - } - - 100% { - transform: scale(0.95); - box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); - } -} - // ////////////////////////////////////////////// // ///////////////// Various //////////////////// // ////////////////////////////////////////////// diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss index 7119ea5f8..4435bd6dc 100644 --- a/stylesheets/_session_conversation.scss +++ b/stylesheets/_session_conversation.scss @@ -187,7 +187,13 @@ display: flex; justify-content: center; align-items: center; - opacity: 0.8; + opacity: 0.7; + + &:hover { + opacity: 1; + transform: scale(0.95); + transition: $session-transition-duration; + } .send { padding: $session-margin-xs; @@ -436,7 +442,7 @@ background-color: $session-color-danger-alt; margin: 0 $session-margin-sm; - @include pulse-color($session-color-danger-alt); + @include pulse-color($session-color-danger-alt, infinite); } } } diff --git a/ts/components/session/conversation/SessionRecording.tsx b/ts/components/session/conversation/SessionRecording.tsx index 64f5f81be..f1122c0e8 100644 --- a/ts/components/session/conversation/SessionRecording.tsx +++ b/ts/components/session/conversation/SessionRecording.tsx @@ -133,7 +133,7 @@ class SessionRecordingInner extends React.Component { displayTimeString += remainingTimeString; } - const actionPauseFn = isPlaying ? this.pauseAudio : this.stopRecordingStream; + const actionPauseFn = isPlaying ? this.pauseAudio : this.onStopRecordingClick; return (
@@ -348,20 +348,19 @@ class SessionRecordingInner extends React.Component { this.recorder = undefined; this.audioBlobMp3 = blob; - this.updateAudioElementAndDuration(); // Stop recording this.stopRecordingState(); } + /** + * Stops recording and sets up audio element, updates recording state. + */ private async onStopRecordingClick() { this.stopRecordingStream(); this.updateAudioElementAndDuration(); - this.stopRecordingState(); } - - /** * Creates an audio element using the recorded audio blob. * Updates the duration for displaying audio duration. From e51f7b8a7ac1077d6f17c05d463e9ee679e3fb65 Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Tue, 3 Aug 2021 17:07:44 +1000 Subject: [PATCH 04/12] WIP removing NaN dsiaply timer text. --- stylesheets/_session_conversation.scss | 3 +- .../session/conversation/SessionRecording.tsx | 38 ++++++++++--------- ts/components/session/icon/Icons.tsx | 21 ++++++++++ 3 files changed, 43 insertions(+), 19 deletions(-) diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss index 4435bd6dc..8a8e97b37 100644 --- a/stylesheets/_session_conversation.scss +++ b/stylesheets/_session_conversation.scss @@ -180,7 +180,8 @@ border-top: themed('sessionBorder'); } - & > .session-icon-button { + .session-icon-button { + // & > .session-icon-button { margin-right: $session-margin-sm; } .session-icon-button { diff --git a/ts/components/session/conversation/SessionRecording.tsx b/ts/components/session/conversation/SessionRecording.tsx index f1122c0e8..28463298a 100644 --- a/ts/components/session/conversation/SessionRecording.tsx +++ b/ts/components/session/conversation/SessionRecording.tsx @@ -107,6 +107,7 @@ class SessionRecordingInner extends React.Component { } = this.state; const hasRecordingAndPaused = !isRecording && !isPlaying; + const hasRecording = this.audioElement?.duration && this.audioElement?.duration > 0; const actionPauseAudio = !isRecording && !isPaused && isPlaying; // const actionDefault = !actionStopRecording && !actionPlayAudio && !actionPauseAudio; @@ -123,17 +124,16 @@ class SessionRecordingInner extends React.Component { 0; let displayTimeString = moment.utc(displayTimeMs).format('m:ss'); - const recordingLengthMs = this.audioElement?.duration ? this.audioElement?.duration * 1000 : undefined; + const recordingDurationMs = this.audioElement?.duration ? this.audioElement?.duration * 1000 : undefined; let remainingTimeString; - if (recordingLengthMs !== undefined) { - console.log({ recordingLengthMs }); - console.log({ displayTimeMs }); - remainingTimeString = ` / ${moment.utc(recordingLengthMs).format('m:ss')}`; + if (recordingDurationMs !== undefined) { + remainingTimeString = ` / ${moment.utc(recordingDurationMs).format('m:ss')}`; displayTimeString += remainingTimeString; } - const actionPauseFn = isPlaying ? this.pauseAudio : this.onStopRecordingClick; + const actionPauseFn = isPlaying ? this.pauseAudio : this.stopRecordingStream; + // const actionPauseFn = isPlaying ? this.pauseAudio : this.onStopRecordingClick; return (
@@ -157,24 +157,25 @@ class SessionRecordingInner extends React.Component { onClick={actionPauseFn} /> )} - {hasRecordingAndPaused && ( - + + {hasRecordingAndPaused && ( - - - )} + )} + {actionDefault && ( { )}
- {isRecording || (!isRecording && remainingTimeString) ? + {isRecording || (!isRecording && hasRecording) ?
{displayTimeString} {isRecording &&
} @@ -348,6 +349,7 @@ class SessionRecordingInner extends React.Component { this.recorder = undefined; this.audioBlobMp3 = blob; + this.updateAudioElementAndDuration(); // Stop recording this.stopRecordingState(); diff --git a/ts/components/session/icon/Icons.tsx b/ts/components/session/icon/Icons.tsx index 266181d3d..253d4a5dd 100644 --- a/ts/components/session/icon/Icons.tsx +++ b/ts/components/session/icon/Icons.tsx @@ -11,6 +11,9 @@ export enum SessionIconType { CirclePlus = 'circlePlus', CircleElipses = 'circleElipses', Contacts = 'contacts', + Delete = 'delete', + Delete2 = 'delete2', + Delete3 = 'delete3', Ellipses = 'ellipses', Emoji = 'emoji', Error = 'error', @@ -118,6 +121,24 @@ export const icons = { viewBox: '4 4 7 7', ratio: 1, }, + [SessionIconType.Delete]: { + path: + 'M1.63 97.99l36.55-36.55L1.63 24.89c-2.17-2.17-2.17-5.73 0-7.9L16.99 1.63c2.17-2.17 5.73-2.17 7.9 0l36.55 36.55L97.99 1.63c2.17-2.17 5.73-2.17 7.9 0l15.36 15.36c2.17 2.17 2.17 5.73 0 7.9L84.7 61.44l36.55 36.55c2.17 2.17 2.17 5.73 0 7.9l-15.36 15.36c-2.17 2.17-5.73 2.17-7.9 0L61.44 84.7l-36.55 36.55c-2.17 2.17-5.73 2.17-7.9 0L1.63 105.89c-2.17-2.17-2.17-5.73 0-7.9z', + viewBox: '0 0 122.88 122.88', + ratio: 1, + }, + [SessionIconType.Delete2]: { + path: + 'M11.17 37.16h83.48a8.4 8.4 0 012 .16 5.93 5.93 0 012.88 1.56 5.43 5.43 0 011.64 3.34 7.65 7.65 0 01-.06 1.44L94 117.31V117.72a7.06 7.06 0 01-.2.9v.06a5.89 5.89 0 01-5.47 4.07H17.32a6.17 6.17 0 01-1.25-.19 6.17 6.17 0 01-1.16-.48 6.18 6.18 0 01-3.08-4.88l-7-73.49a7.69 7.69 0 01-.06-1.66 5.37 5.37 0 011.63-3.29 6 6 0 013-1.58 8.94 8.94 0 011.79-.13zM5.65 8.8h31.47V6a2.44 2.44 0 010-.27 6 6 0 011.76-4A6 6 0 0143.09 0h19.67a6 6 0 015.7 6v2.8h32.39a4.7 4.7 0 014.31 4.43v10.36a2.59 2.59 0 01-2.59 2.59H2.59A2.59 2.59 0 010 23.62V13.53a1.56 1.56 0 010-.31 4.72 4.72 0 013.88-4.34 10.4 10.4 0 011.77-.08zm42.1 52.7a4.77 4.77 0 019.49 0v37a4.77 4.77 0 01-9.49 0v-37zm23.73-.2a4.58 4.58 0 015-4.06 4.47 4.47 0 014.51 4.46l-2 37a4.57 4.57 0 01-5 4.06 4.47 4.47 0 01-4.51-4.46l2-37zM25 61.7a4.46 4.46 0 014.5-4.46 4.58 4.58 0 015 4.06l2 37a4.47 4.47 0 01-4.51 4.46 4.57 4.57 0 01-5-4.06l-2-37z', + viewBox: '0 0 105.16 122.88', + ratio: 1, + }, + [SessionIconType.Delete3]: { + path: + 'M4.873 9.058h33.35V6.187c0-.095.002-.186.014-.279.075-1.592.762-3.037 1.816-4.086l-.007-.007C41.15.711 42.683.025 44.371.009l.023.002V0H64.325c.106 0 .207.009.309.022 1.583.084 3.019.76 4.064 1.81 1.102 1.104 1.786 2.635 1.803 4.315l-.003.021h.014V9.057h32.926c.138 0 .268.014.401.034 1.182.106 2.254.625 3.034 1.41l.004.007.005-.007c.851.857 1.386 2.048 1.401 3.368l-.002.032h.014v10.861c0 1.472-1.195 2.665-2.667 2.665H2.667C1.195 27.426 0 26.233 0 24.762V13.919c0-.106.004-.211.018-.315v-.021c.089-1.207.624-2.304 1.422-3.098l-.007-.002c.862-.861 2.057-1.396 3.377-1.414l.032.002v-.013h.031zM77.79 49.097h-5.945v56.093h5.945V49.097zm-19.33 0h-5.948v56.093h5.948V49.097zm-19.33 0h-5.946v56.093h5.946V49.097zM10.837 31.569h87.385l.279.018.127.007.134.011h.009l.163.023c1.363.163 2.638.789 3.572 1.708 1.04 1.025 1.705 2.415 1.705 3.964 0 .098-.009.193-.019.286l-.002.068-.014.154-7.393 79.335-.007.043h.007l-.016.139-.051.283-.002.005-.002.018c-.055.331-.12.646-.209.928l-.007.022-.002.005-.009.018-.023.062-.004.021c-.118.354-.264.698-.432 1.009-1.009 1.88-2.879 3.187-5.204 3.187H18.13l-.247-.014v.003l-.011-.003-.032-.004c-.46-.023-.889-.091-1.288-.202-.415-.116-.818-.286-1.197-.495l-.009-.002-.002.002c-1.785-.977-2.975-2.882-3.17-5.022L4.88 37.79l-.011-.125-.011-.247-.004-.116h-.005c0-1.553.664-2.946 1.707-3.971.976-.955 2.32-1.599 3.756-1.726l.122-.004v-.007l.3-.013.104.002v-.014h-.001zm87.386 5.334H10.837v-.007l-.116.004c-.163.022-.322.106-.438.222-.063.063-.104.132-.104.179h-.007l.007.118 7.282 79.244h-.002l.002.012c.032.376.202.691.447.825l-.002.004.084.032.063.012H90.825c.207 0 .399-.157.518-.377l.084-.197.054-.216.014-.138h.005l7.384-79.21-.003-.11c0-.045-.041-.111-.103-.172-.12-.118-.286-.202-.451-.227l-.104.002zm.111-.002h-.016.016zm.549.512v-.004.004zm5.297.377l-.002.018.002-.018zM40.887 14.389H5.332v7.706h97.63v-7.706H67.844c-1.472 0-2.664-1.192-2.664-2.664V6.168h.007c-.007-.22-.106-.433-.259-.585-.137-.141-.324-.229-.521-.252H44.394v-.006c-.213.007-.422.104-.576.259l-.004-.004-.007.004c-.131.134-.231.313-.259.501l.007.102v5.537c-.001 1.472-1.196 2.665-2.668 2.665z', + viewBox: '0 0 108.294 122.88', + ratio: 1, + }, [SessionIconType.DoubleCheckCircleFilled]: { path: 'M7.91731278,0.313257194 C6.15053376,1.58392424 5,3.65760134 5,6 C5,6.343797 5.0247846,6.68180525 5.07266453,7.01233547 L5,7.085 L3.205,5.295 L2.5,6 L5,8.5 L5.33970233,8.16029767 C5.80439817,9.59399486 6.71914823,10.8250231 7.91731278,11.6867428 C7.31518343,11.8898758 6.67037399,12 6,12 C2.688,12 0,9.312 0,6 C0,2.688 2.688,0 6,0 C6.67037399,0 7.31518343,0.110124239 7.91731278,0.313257194 Z M12,0 C15.312,0 18,2.688 18,6 C18,9.312 15.312,12 12,12 C8.688,12 6,9.312 6,6 C6,2.688 8.688,0 12,0 Z M11,8.5 L15.5,4 L14.795,3.29 L11,7.085 L9.205,5.295 L8.5,6 L11,8.5 Z', From b5bd352ec2991fcb56b45870e2a19a9729dd3356 Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Thu, 5 Aug 2021 09:41:50 +1000 Subject: [PATCH 05/12] Fixing delete button JSX evaluating to NaN --- stylesheets/_session_conversation.scss | 1 - .../session/conversation/SessionRecording.tsx | 47 +++++++++++-------- 2 files changed, 27 insertions(+), 21 deletions(-) diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss index 8a8e97b37..c0224777b 100644 --- a/stylesheets/_session_conversation.scss +++ b/stylesheets/_session_conversation.scss @@ -428,7 +428,6 @@ flex-shrink: 0; &.playback-timer { - margin-right: $session-margin-sm; animation: fadein $session-transition-duration; @media (-webkit-min-device-pixel-ratio: 1.6) { diff --git a/ts/components/session/conversation/SessionRecording.tsx b/ts/components/session/conversation/SessionRecording.tsx index 28463298a..d18a1d996 100644 --- a/ts/components/session/conversation/SessionRecording.tsx +++ b/ts/components/session/conversation/SessionRecording.tsx @@ -107,7 +107,7 @@ class SessionRecordingInner extends React.Component { } = this.state; const hasRecordingAndPaused = !isRecording && !isPlaying; - const hasRecording = this.audioElement?.duration && this.audioElement?.duration > 0; + const hasRecording = !!this.audioElement?.duration && this.audioElement?.duration > 0; const actionPauseAudio = !isRecording && !isPaused && isPlaying; // const actionDefault = !actionStopRecording && !actionPlayAudio && !actionPauseAudio; @@ -124,16 +124,14 @@ class SessionRecordingInner extends React.Component { 0; let displayTimeString = moment.utc(displayTimeMs).format('m:ss'); - const recordingDurationMs = this.audioElement?.duration ? this.audioElement?.duration * 1000 : undefined; + const recordingDurationMs = this.audioElement?.duration ? this.audioElement?.duration * 1000 : 1; - let remainingTimeString; + let remainingTimeString = ''; if (recordingDurationMs !== undefined) { remainingTimeString = ` / ${moment.utc(recordingDurationMs).format('m:ss')}`; - displayTimeString += remainingTimeString; } const actionPauseFn = isPlaying ? this.pauseAudio : this.stopRecordingStream; - // const actionPauseFn = isPlaying ? this.pauseAudio : this.onStopRecordingClick; return (
@@ -142,7 +140,10 @@ class SessionRecordingInner extends React.Component { onMouseEnter={this.handleHoverActions} onMouseLeave={this.handleUnhoverActions} > - {isRecording && ( + {isRecording && ( { onClick={actionPauseFn} /> )} - {actionPauseAudio && ( - - )} - + {actionPauseAudio && ( + + )} {hasRecordingAndPaused && ( { onClick={this.playAudio} /> )} - {hasRecording && ( + { hasRecording && ( { )}
- {isRecording || (!isRecording && hasRecording) ? + { hasRecording && !isRecording ?
+ { + displayTimeString + remainingTimeString + } +
+ : + null + } + + {isRecording ? +
{displayTimeString} - {isRecording &&
} +
: null From e699312f1af7772f7e2c61e949a7bb58f22ef626 Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Thu, 5 Aug 2021 10:47:35 +1000 Subject: [PATCH 06/12] adjusting alignment of buttons. increasing pulse for recording light, increasing hover over effect. --- stylesheets/_session_constants.scss | 4 ++-- stylesheets/_session_conversation.scss | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/stylesheets/_session_constants.scss b/stylesheets/_session_constants.scss index f4c199274..0867f186c 100644 --- a/stylesheets/_session_constants.scss +++ b/stylesheets/_session_constants.scss @@ -153,9 +153,9 @@ $session-font-h4: 16px; color: subtle($color); } -@mixin pulse-color($color, $repetition) { +@mixin pulse-color($color,$duration, $repetition) { - animation: pulseColor 2s $repetition; + animation: pulseColor $duration $repetition; @keyframes pulseColor { 0% { diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss index c0224777b..fd242ddb7 100644 --- a/stylesheets/_session_conversation.scss +++ b/stylesheets/_session_conversation.scss @@ -192,7 +192,7 @@ &:hover { opacity: 1; - transform: scale(0.95); + transform: scale(0.93); transition: $session-transition-duration; } @@ -348,7 +348,7 @@ flex-grow: 1; outline: none; - $actions-element-size: 45px; + $actions-element-size: 30px; &--actions { display: flex; @@ -442,7 +442,7 @@ background-color: $session-color-danger-alt; margin: 0 $session-margin-sm; - @include pulse-color($session-color-danger-alt, infinite); + @include pulse-color($session-color-danger-alt, 1s, infinite); } } } From be687062d67b37de7faeb9adb06f026998cd4291 Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Thu, 5 Aug 2021 10:47:53 +1000 Subject: [PATCH 07/12] testing shake addition to send button on finished recording. --- stylesheets/_session_constants.scss | 23 +++++++++++++++++++ stylesheets/_session_conversation.scss | 5 +++- .../session/conversation/SessionRecording.tsx | 7 ++++-- 3 files changed, 32 insertions(+), 3 deletions(-) diff --git a/stylesheets/_session_constants.scss b/stylesheets/_session_constants.scss index 0867f186c..0526845cf 100644 --- a/stylesheets/_session_constants.scss +++ b/stylesheets/_session_constants.scss @@ -175,6 +175,29 @@ $session-font-h4: 16px; } } +@mixin subtle-shake() { + animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; + transform: translate3d(0, 0, 0); + + @keyframes shake { + 10%, 90% { + transform: translate3d(-1px, 0, 0); + } + + 20%, 80% { + transform: translate3d(2px, 0, 0); + } + + 30%, 50%, 70% { + transform: translate3d(-4px, 0, 0); + } + + 40%, 60% { + transform: translate3d(4px, 0, 0); + } + } +} + $session-subtle-factor: 0.6; @function subtle($color) { diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss index fd242ddb7..eae7d8cfe 100644 --- a/stylesheets/_session_conversation.scss +++ b/stylesheets/_session_conversation.scss @@ -338,6 +338,10 @@ .send-message-button { animation: fadein $session-transition-duration; + + &---shake { + @include subtle-shake(); + } } .session-recording { @@ -363,7 +367,6 @@ .session-icon-button { animation: fadein $session-transition-duration; - opacity: 1; border-radius: 50%; width: $actions-element-size; height: $actions-element-size; diff --git a/ts/components/session/conversation/SessionRecording.tsx b/ts/components/session/conversation/SessionRecording.tsx index d18a1d996..865d83a55 100644 --- a/ts/components/session/conversation/SessionRecording.tsx +++ b/ts/components/session/conversation/SessionRecording.tsx @@ -201,8 +201,11 @@ class SessionRecordingInner extends React.Component { null } - {!isRecording && ( -
+ {!isRecording && ( +
Date: Thu, 5 Aug 2021 11:18:18 +1000 Subject: [PATCH 08/12] Adding animation to briefly scale up send button after recording is made. --- stylesheets/_session_constants.scss | 22 ------------------- stylesheets/_session_conversation.scss | 17 ++++++++++++-- .../session/conversation/SessionRecording.tsx | 2 +- 3 files changed, 16 insertions(+), 25 deletions(-) diff --git a/stylesheets/_session_constants.scss b/stylesheets/_session_constants.scss index 0526845cf..30d0350de 100644 --- a/stylesheets/_session_constants.scss +++ b/stylesheets/_session_constants.scss @@ -175,28 +175,6 @@ $session-font-h4: 16px; } } -@mixin subtle-shake() { - animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; - transform: translate3d(0, 0, 0); - - @keyframes shake { - 10%, 90% { - transform: translate3d(-1px, 0, 0); - } - - 20%, 80% { - transform: translate3d(2px, 0, 0); - } - - 30%, 50%, 70% { - transform: translate3d(-4px, 0, 0); - } - - 40%, 60% { - transform: translate3d(4px, 0, 0); - } - } -} $session-subtle-factor: 0.6; diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss index eae7d8cfe..6144fccf8 100644 --- a/stylesheets/_session_conversation.scss +++ b/stylesheets/_session_conversation.scss @@ -339,9 +339,22 @@ .send-message-button { animation: fadein $session-transition-duration; - &---shake { - @include subtle-shake(); + &---scale { + animation: scaling 2s ease-in-out; + + @keyframes scaling { + 0% { + transform: scale(1); + } + 80% { + transform: scale(1.3); + } + 100% { + transform: scale(1); + } + } } + } .session-recording { diff --git a/ts/components/session/conversation/SessionRecording.tsx b/ts/components/session/conversation/SessionRecording.tsx index 865d83a55..6cd7d33f7 100644 --- a/ts/components/session/conversation/SessionRecording.tsx +++ b/ts/components/session/conversation/SessionRecording.tsx @@ -204,7 +204,7 @@ class SessionRecordingInner extends React.Component { {!isRecording && (
Date: Thu, 5 Aug 2021 11:32:55 +1000 Subject: [PATCH 09/12] applying linting and formatting. --- stylesheets/_session_constants.scss | 8 +- stylesheets/_session_conversation.scss | 5 +- .../session/conversation/SessionRecording.tsx | 75 ++++++++----------- .../session/settings/SessionSettings.tsx | 12 +-- 4 files changed, 43 insertions(+), 57 deletions(-) diff --git a/stylesheets/_session_constants.scss b/stylesheets/_session_constants.scss index 30d0350de..725ed6ce5 100644 --- a/stylesheets/_session_constants.scss +++ b/stylesheets/_session_constants.scss @@ -153,8 +153,7 @@ $session-font-h4: 16px; color: subtle($color); } -@mixin pulse-color($color,$duration, $repetition) { - +@mixin pulse-color($color, $duration, $repetition) { animation: pulseColor $duration $repetition; @keyframes pulseColor { @@ -162,12 +161,12 @@ $session-font-h4: 16px; transform: scale(0.95); box-shadow: 0 0 0 0 rgba($color, 0.7); } - + 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba($color, 0); } - + 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba($color, 0); @@ -175,7 +174,6 @@ $session-font-h4: 16px; } } - $session-subtle-factor: 0.6; @function subtle($color) { diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss index 6144fccf8..bb388b03e 100644 --- a/stylesheets/_session_conversation.scss +++ b/stylesheets/_session_conversation.scss @@ -180,8 +180,8 @@ border-top: themed('sessionBorder'); } - .session-icon-button { - // & > .session-icon-button { + .session-icon-button { + // & > .session-icon-button { margin-right: $session-margin-sm; } .session-icon-button { @@ -354,7 +354,6 @@ } } } - } .session-recording { diff --git a/ts/components/session/conversation/SessionRecording.tsx b/ts/components/session/conversation/SessionRecording.tsx index 6cd7d33f7..54d820efa 100644 --- a/ts/components/session/conversation/SessionRecording.tsx +++ b/ts/components/session/conversation/SessionRecording.tsx @@ -120,11 +120,13 @@ class SessionRecordingInner extends React.Component { const displayTimeMs = isRecording ? (nowTimestamp - startTimestamp) * 1000 : (this.audioElement && - (this.audioElement?.currentTime * 1000 || this.audioElement?.duration)) || - 0; - let displayTimeString = moment.utc(displayTimeMs).format('m:ss'); + (this.audioElement?.currentTime * 1000 || this.audioElement?.duration)) || + 0; - const recordingDurationMs = this.audioElement?.duration ? this.audioElement?.duration * 1000 : 1; + const displayTimeString = moment.utc(displayTimeMs).format('m:ss'); + const recordingDurationMs = this.audioElement?.duration + ? this.audioElement?.duration * 1000 + : 1; let remainingTimeString = ''; if (recordingDurationMs !== undefined) { @@ -140,17 +142,15 @@ class SessionRecordingInner extends React.Component { onMouseEnter={this.handleHoverActions} onMouseLeave={this.handleUnhoverActions} > - {isRecording && ( - - )} + + {isRecording && ( + + )} {actionPauseAudio && ( { onClick={this.playAudio} /> )} - { hasRecording && ( + {hasRecording && ( { )}
- { hasRecording && !isRecording ? + {hasRecording && !isRecording ? (
- { - displayTimeString + remainingTimeString - } + {displayTimeString + remainingTimeString}
- : - null - } + ) : null} - {isRecording ? + {isRecording ? (
{displayTimeString}
- : - null - } + ) : null} - {!isRecording && ( -
+ {!isRecording && ( +
{ />
)} -
); } @@ -366,15 +361,7 @@ class SessionRecordingInner extends React.Component { } /** - * Stops recording and sets up audio element, updates recording state. - */ - private async onStopRecordingClick() { - this.stopRecordingStream(); - this.updateAudioElementAndDuration(); - } - - /** - * Creates an audio element using the recorded audio blob. + * Creates an audio element using the recorded audio blob. * Updates the duration for displaying audio duration. */ private updateAudioElementAndDuration() { @@ -384,8 +371,8 @@ class SessionRecordingInner extends React.Component { // ww adding record duration this.setState({ - recordDuration: this.audioElement.duration - }) + recordDuration: this.audioElement.duration, + }); this.audioElement.loop = false; this.audioElement.onended = () => { diff --git a/ts/components/session/settings/SessionSettings.tsx b/ts/components/session/settings/SessionSettings.tsx index 8b5d07e29..029a1d294 100644 --- a/ts/components/session/settings/SessionSettings.tsx +++ b/ts/components/session/settings/SessionSettings.tsx @@ -253,11 +253,13 @@ class SettingsViewInner extends React.Component { return (
v{window.versionInfo.version} - + + + {window.versionInfo.commitHash}
); From 13be7a4c4a37316f74601763fcde8712c06a9819 Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Thu, 5 Aug 2021 11:37:18 +1000 Subject: [PATCH 10/12] removing comments --- stylesheets/_session.scss | 2 -- stylesheets/_session_conversation.scss | 10 ---------- .../session/conversation/SessionRecording.tsx | 2 -- 3 files changed, 14 deletions(-) diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 62c373306..22c9adb68 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -222,7 +222,6 @@ textarea { border-radius: 2px; height: 33px; padding: 0px 18px; - // line-height: 33px; font-size: $session-font-sm; } @@ -1246,7 +1245,6 @@ input { margin: 15px calc(100% / 2 - 1px); width: 1px; - // z-index: -1; } } diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss index bb388b03e..0a85590c0 100644 --- a/stylesheets/_session_conversation.scss +++ b/stylesheets/_session_conversation.scss @@ -462,16 +462,6 @@ } } -// box-sizing: border-box; -// position: absolute; -// z-index: 3; -// width: 4px; -// height: 5px; -// margin-left: 0px; -// top: 0px; -// background: #00f782; -// border-radius: 50px; - /* ************ */ /* AUDIO PLAYER */ /* ************ */ diff --git a/ts/components/session/conversation/SessionRecording.tsx b/ts/components/session/conversation/SessionRecording.tsx index 54d820efa..aca9fa412 100644 --- a/ts/components/session/conversation/SessionRecording.tsx +++ b/ts/components/session/conversation/SessionRecording.tsx @@ -109,8 +109,6 @@ class SessionRecordingInner extends React.Component { const hasRecordingAndPaused = !isRecording && !isPlaying; const hasRecording = !!this.audioElement?.duration && this.audioElement?.duration > 0; const actionPauseAudio = !isRecording && !isPaused && isPlaying; - - // const actionDefault = !actionStopRecording && !actionPlayAudio && !actionPauseAudio; const actionDefault = !isRecording && !hasRecordingAndPaused && !actionPauseAudio; // if we are recording, we base the time recording on our state values From b98b876ea761f6ff72609a11ec478a7aa587d35b Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Thu, 5 Aug 2021 13:15:03 +1000 Subject: [PATCH 11/12] Removing extra delete icons. --- .../session/conversation/SessionRecording.tsx | 6 ++---- ts/components/session/icon/Icons.tsx | 14 -------------- 2 files changed, 2 insertions(+), 18 deletions(-) diff --git a/ts/components/session/conversation/SessionRecording.tsx b/ts/components/session/conversation/SessionRecording.tsx index aca9fa412..4301fb241 100644 --- a/ts/components/session/conversation/SessionRecording.tsx +++ b/ts/components/session/conversation/SessionRecording.tsx @@ -3,12 +3,11 @@ import classNames from 'classnames'; import moment from 'moment'; import { SessionIconButton, SessionIconSize, SessionIconType } from '../icon'; -import { SessionButton, SessionButtonColor, SessionButtonType } from '../SessionButton'; import { Constants } from '../../../session'; import { ToastUtils } from '../../../session/utils'; import autoBind from 'auto-bind'; import MicRecorder from 'mic-recorder-to-mp3'; -import styled, { useTheme } from 'styled-components'; +import styled from 'styled-components'; interface Props { onExitVoiceNoteView: any; @@ -165,7 +164,7 @@ class SessionRecordingInner extends React.Component { )} {hasRecording && ( @@ -367,7 +366,6 @@ class SessionRecordingInner extends React.Component { const audioURL = window.URL.createObjectURL(this.audioBlobMp3); this.audioElement = new Audio(audioURL); - // ww adding record duration this.setState({ recordDuration: this.audioElement.duration, }); diff --git a/ts/components/session/icon/Icons.tsx b/ts/components/session/icon/Icons.tsx index 253d4a5dd..e2898fa8c 100644 --- a/ts/components/session/icon/Icons.tsx +++ b/ts/components/session/icon/Icons.tsx @@ -12,8 +12,6 @@ export enum SessionIconType { CircleElipses = 'circleElipses', Contacts = 'contacts', Delete = 'delete', - Delete2 = 'delete2', - Delete3 = 'delete3', Ellipses = 'ellipses', Emoji = 'emoji', Error = 'error', @@ -122,23 +120,11 @@ export const icons = { ratio: 1, }, [SessionIconType.Delete]: { - path: - 'M1.63 97.99l36.55-36.55L1.63 24.89c-2.17-2.17-2.17-5.73 0-7.9L16.99 1.63c2.17-2.17 5.73-2.17 7.9 0l36.55 36.55L97.99 1.63c2.17-2.17 5.73-2.17 7.9 0l15.36 15.36c2.17 2.17 2.17 5.73 0 7.9L84.7 61.44l36.55 36.55c2.17 2.17 2.17 5.73 0 7.9l-15.36 15.36c-2.17 2.17-5.73 2.17-7.9 0L61.44 84.7l-36.55 36.55c-2.17 2.17-5.73 2.17-7.9 0L1.63 105.89c-2.17-2.17-2.17-5.73 0-7.9z', - viewBox: '0 0 122.88 122.88', - ratio: 1, - }, - [SessionIconType.Delete2]: { path: 'M11.17 37.16h83.48a8.4 8.4 0 012 .16 5.93 5.93 0 012.88 1.56 5.43 5.43 0 011.64 3.34 7.65 7.65 0 01-.06 1.44L94 117.31V117.72a7.06 7.06 0 01-.2.9v.06a5.89 5.89 0 01-5.47 4.07H17.32a6.17 6.17 0 01-1.25-.19 6.17 6.17 0 01-1.16-.48 6.18 6.18 0 01-3.08-4.88l-7-73.49a7.69 7.69 0 01-.06-1.66 5.37 5.37 0 011.63-3.29 6 6 0 013-1.58 8.94 8.94 0 011.79-.13zM5.65 8.8h31.47V6a2.44 2.44 0 010-.27 6 6 0 011.76-4A6 6 0 0143.09 0h19.67a6 6 0 015.7 6v2.8h32.39a4.7 4.7 0 014.31 4.43v10.36a2.59 2.59 0 01-2.59 2.59H2.59A2.59 2.59 0 010 23.62V13.53a1.56 1.56 0 010-.31 4.72 4.72 0 013.88-4.34 10.4 10.4 0 011.77-.08zm42.1 52.7a4.77 4.77 0 019.49 0v37a4.77 4.77 0 01-9.49 0v-37zm23.73-.2a4.58 4.58 0 015-4.06 4.47 4.47 0 014.51 4.46l-2 37a4.57 4.57 0 01-5 4.06 4.47 4.47 0 01-4.51-4.46l2-37zM25 61.7a4.46 4.46 0 014.5-4.46 4.58 4.58 0 015 4.06l2 37a4.47 4.47 0 01-4.51 4.46 4.57 4.57 0 01-5-4.06l-2-37z', viewBox: '0 0 105.16 122.88', ratio: 1, }, - [SessionIconType.Delete3]: { - path: - 'M4.873 9.058h33.35V6.187c0-.095.002-.186.014-.279.075-1.592.762-3.037 1.816-4.086l-.007-.007C41.15.711 42.683.025 44.371.009l.023.002V0H64.325c.106 0 .207.009.309.022 1.583.084 3.019.76 4.064 1.81 1.102 1.104 1.786 2.635 1.803 4.315l-.003.021h.014V9.057h32.926c.138 0 .268.014.401.034 1.182.106 2.254.625 3.034 1.41l.004.007.005-.007c.851.857 1.386 2.048 1.401 3.368l-.002.032h.014v10.861c0 1.472-1.195 2.665-2.667 2.665H2.667C1.195 27.426 0 26.233 0 24.762V13.919c0-.106.004-.211.018-.315v-.021c.089-1.207.624-2.304 1.422-3.098l-.007-.002c.862-.861 2.057-1.396 3.377-1.414l.032.002v-.013h.031zM77.79 49.097h-5.945v56.093h5.945V49.097zm-19.33 0h-5.948v56.093h5.948V49.097zm-19.33 0h-5.946v56.093h5.946V49.097zM10.837 31.569h87.385l.279.018.127.007.134.011h.009l.163.023c1.363.163 2.638.789 3.572 1.708 1.04 1.025 1.705 2.415 1.705 3.964 0 .098-.009.193-.019.286l-.002.068-.014.154-7.393 79.335-.007.043h.007l-.016.139-.051.283-.002.005-.002.018c-.055.331-.12.646-.209.928l-.007.022-.002.005-.009.018-.023.062-.004.021c-.118.354-.264.698-.432 1.009-1.009 1.88-2.879 3.187-5.204 3.187H18.13l-.247-.014v.003l-.011-.003-.032-.004c-.46-.023-.889-.091-1.288-.202-.415-.116-.818-.286-1.197-.495l-.009-.002-.002.002c-1.785-.977-2.975-2.882-3.17-5.022L4.88 37.79l-.011-.125-.011-.247-.004-.116h-.005c0-1.553.664-2.946 1.707-3.971.976-.955 2.32-1.599 3.756-1.726l.122-.004v-.007l.3-.013.104.002v-.014h-.001zm87.386 5.334H10.837v-.007l-.116.004c-.163.022-.322.106-.438.222-.063.063-.104.132-.104.179h-.007l.007.118 7.282 79.244h-.002l.002.012c.032.376.202.691.447.825l-.002.004.084.032.063.012H90.825c.207 0 .399-.157.518-.377l.084-.197.054-.216.014-.138h.005l7.384-79.21-.003-.11c0-.045-.041-.111-.103-.172-.12-.118-.286-.202-.451-.227l-.104.002zm.111-.002h-.016.016zm.549.512v-.004.004zm5.297.377l-.002.018.002-.018zM40.887 14.389H5.332v7.706h97.63v-7.706H67.844c-1.472 0-2.664-1.192-2.664-2.664V6.168h.007c-.007-.22-.106-.433-.259-.585-.137-.141-.324-.229-.521-.252H44.394v-.006c-.213.007-.422.104-.576.259l-.004-.004-.007.004c-.131.134-.231.313-.259.501l.007.102v5.537c-.001 1.472-1.196 2.665-2.668 2.665z', - viewBox: '0 0 108.294 122.88', - ratio: 1, - }, [SessionIconType.DoubleCheckCircleFilled]: { path: 'M7.91731278,0.313257194 C6.15053376,1.58392424 5,3.65760134 5,6 C5,6.343797 5.0247846,6.68180525 5.07266453,7.01233547 L5,7.085 L3.205,5.295 L2.5,6 L5,8.5 L5.33970233,8.16029767 C5.80439817,9.59399486 6.71914823,10.8250231 7.91731278,11.6867428 C7.31518343,11.8898758 6.67037399,12 6,12 C2.688,12 0,9.312 0,6 C0,2.688 2.688,0 6,0 C6.67037399,0 7.31518343,0.110124239 7.91731278,0.313257194 Z M12,0 C15.312,0 18,2.688 18,6 C18,9.312 15.312,12 12,12 C8.688,12 6,9.312 6,6 C6,2.688 8.688,0 12,0 Z M11,8.5 L15.5,4 L14.795,3.29 L11,7.085 L9.205,5.295 L8.5,6 L11,8.5 Z', From 46917a0546eb0d16aba5756a8bd148c6bfa6986d Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Fri, 13 Aug 2021 16:05:34 +1000 Subject: [PATCH 12/12] Adding PR changes, passing yarn ready --- .../session/conversation/SessionRecording.tsx | 42 ++++--------------- 1 file changed, 7 insertions(+), 35 deletions(-) diff --git a/ts/components/session/conversation/SessionRecording.tsx b/ts/components/session/conversation/SessionRecording.tsx index 4301fb241..99290ca45 100644 --- a/ts/components/session/conversation/SessionRecording.tsx +++ b/ts/components/session/conversation/SessionRecording.tsx @@ -33,21 +33,20 @@ function getTimestamp(asInt = false) { return asInt ? Math.floor(timestamp) : timestamp; } -export interface StyledFlexWrapperProps { - flexDirection: 'row' | 'column'; +interface StyledFlexWrapperProps { marginHorizontal: string; } /** * Generic wrapper for quickly passing in theme constant values. */ -export const StyledFlexWrapper = styled.div` +const StyledFlexWrapper = styled.div` display: flex; - flex-direction: ${(props: StyledFlexWrapperProps) => props.flexDirection}; + flex-direction: row; align-items: center; .session-button { - margin: ${(props: StyledFlexWrapperProps) => props.marginHorizontal}; + margin: ${props => props.marginHorizontal}; } `; @@ -96,14 +95,7 @@ class SessionRecordingInner extends React.Component { // tslint:disable-next-line: cyclomatic-complexity public render() { - const { - actionHover, - isPlaying, - isPaused, - isRecording, - startTimestamp, - nowTimestamp, - } = this.state; + const { isPlaying, isPaused, isRecording, startTimestamp, nowTimestamp } = this.state; const hasRecordingAndPaused = !isRecording && !isPlaying; const hasRecording = !!this.audioElement?.duration && this.audioElement?.duration > 0; @@ -134,12 +126,8 @@ class SessionRecordingInner extends React.Component { return (
-
- +
+ {isRecording && ( { ); } - private handleHoverActions() { - if (this.state.isRecording && !this.state.actionHover) { - this.setState({ - actionHover: true, - }); - } - } - private async timerUpdate() { const { nowTimestamp, startTimestamp } = this.state; const elapsedTime = nowTimestamp - startTimestamp; @@ -233,14 +213,6 @@ class SessionRecordingInner extends React.Component { }); } - private handleUnhoverActions() { - if (this.state.isRecording && this.state.actionHover) { - this.setState({ - actionHover: false, - }); - } - } - private stopRecordingState() { this.setState({ isRecording: false,