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 f9e83d6e7..7d932621f 100644 --- a/ts/components/session/conversation/SessionRecording.tsx +++ b/ts/components/session/conversation/SessionRecording.tsx @@ -119,11 +119,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) { @@ -139,17 +141,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 && ( +
{ />
)} -
); } @@ -365,15 +360,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() { @@ -383,8 +370,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 = () => {