(refacto) remove RoomAudio component

advanced-chat · Feb 17, 2021 · d1b7656 · d1b7656
1 parent d499741
commit d1b7656
Show file tree

Hide file tree

Showing 4 changed files with 171 additions and 29 deletions.
diff --git a/src/ChatWindow/Room/Room.vue b/src/ChatWindow/Room/Room.vue
@@ -137,14 +137,45 @@
 				class="vac-box-footer"
 				:class="{ 'vac-app-box-shadow': filteredUsersTag.length }"
 			>
-				<room-audio
+				<div
 					v-if="showAudio && !imageFile && !videoFile"
-					@update-file="file = $event"
+					class="vac-icon-textarea-left"
 				>
-					<template v-for="(index, name) in $scopedSlots" #[name]="data">
-						<slot :name="name" v-bind="data" />
+					<template v-if="recorder.isRecording">
+						<div
+							class="vac-svg-button vac-svg-border vac-icon-audio-stop"
+							@click="stopRecorder"
+						>
+							<slot name="audio-stop-icon">
+								<svg-icon
+									name="close-outline"
+									class="vac-icon-audio-stop-svg"
+								/>
+							</slot>
+						</div>
+
+						<div class="vac-dot-audio-record" />
+
+						<div class="vac-dot-audio-record-time">
+							{{ recordedTime }}
+						</div>
+
+						<div
+							class="vac-svg-button vac-svg-border vac-icon-audio-confirm"
+							@click="toggleRecorder"
+						>
+							<slot name="audio-stop-icon">
+								<svg-icon name="checkmark" />
+							</slot>
+						</div>
 					</template>
-				</room-audio>
+
+					<div v-else class="vac-svg-button" @click="toggleRecorder">
+						<slot name="microphone-icon">
+							<svg-icon name="microphone" class="vac-icon-microphone" />
+						</slot>
+					</div>
+				</div>
 
 				<div v-if="imageFile" class="vac-media-container">
 					<div class="vac-svg-button vac-icon-media" @click="resetMediaFile">
@@ -298,10 +329,10 @@ import EmojiPicker from '../../components/EmojiPicker'
 import RoomHeader from './RoomHeader'
 import RoomMessageReply from './RoomMessageReply'
 import RoomUsersTag from './RoomUsersTag'
-import RoomAudio from './RoomAudio'
 import Message from '../Message/Message'
 
 import filteredUsers from '../../utils/filter-items'
+import Recorder from '../../utils/recorder'
 const { messagesValid } = require('../../utils/room-validation')
 const { detectMobile, iOSDevice } = require('../../utils/mobile-detection')
 const { isImageFile, isVideoFile } = require('../../utils/media-file')
@@ -316,7 +347,6 @@ export default {
 		RoomHeader,
 		RoomMessageReply,
 		RoomUsersTag,
-		RoomAudio,
 		Message
 	},
 
@@ -373,7 +403,15 @@ export default {
 			keepKeyboardOpen: false,
 			filteredUsersTag: [],
 			selectedUsersTag: [],
-			textareaCursorPosition: null
+			textareaCursorPosition: null,
+			recorder: this.initRecorder(),
+			bitRate: 128,
+			sampleRate: 44100,
+			format: 'mp3',
+			micFailed: null,
+			beforeRecording: null,
+			pauseRecording: null,
+			afterRecording: null
 		}
 	},
 
@@ -398,6 +436,9 @@ export default {
 		},
 		isMessageEmpty() {
 			return !this.file && !this.message.trim()
+		},
+		recordedTime() {
+			return new Date(this.recorder.duration * 1000).toISOString().substr(14, 5)
 		}
 	},
 
@@ -509,6 +550,10 @@ export default {
 		})
 	},
 
+	beforeDestroy() {
+		this.stopRecorder()
+	},
+
 	methods: {
 		updateShowUsersTag() {
 			if (!this.$refs['roomTextarea']) return
@@ -795,6 +840,44 @@ export default {
 
 			setTimeout(() => (this.fileDialog = false), 500)
 		},
+		initRecorder() {
+			return new Recorder({
+				beforeRecording: this.beforeRecording,
+				afterRecording: this.afterRecording,
+				pauseRecording: this.pauseRecording,
+				micFailed: this.micFailed,
+				bitRate: this.bitRate,
+				sampleRate: this.sampleRate,
+				format: this.format
+			})
+		},
+		toggleRecorder() {
+			if (!this.recorder.isRecording) {
+				this.recorder.start()
+			} else {
+				this.recorder.stop()
+
+				const record = this.recorder.records[0]
+
+				this.file = {
+					blob: record.blob,
+					name: `audio.${this.format}`,
+					size: record.blob.size,
+					duration: record.duration,
+					type: record.blob.type,
+					audio: true,
+					localUrl: URL.createObjectURL(record.blob)
+				}
+
+				this.recorder = this.initRecorder()
+			}
+		},
+		stopRecorder() {
+			if (this.recorder.isRecording) {
+				this.recorder.stop()
+				this.recorder = this.initRecorder()
+			}
+		},
 		openFile({ message, action }) {
 			this.$emit('open-file', { message, action })
 		},
@@ -935,14 +1018,59 @@ export default {
 	box-shadow: inset 0px 0px 0px 1px var(--chat-border-color-input-selected);
 }
 
+.vac-icon-textarea,
+.vac-icon-textarea-left {
+	display: flex;
+	align-items: center;
+
+	svg,
+	.vac-wrapper {
+		margin: 0 7px;
+	}
+}
+
 .vac-icon-textarea {
+	margin-left: 5px;
+}
+
+.vac-icon-textarea-left {
 	display: flex;
-	margin: 12px 0 0 5px;
+	align-items: center;
+	margin-right: 5px;
 
 	svg,
 	.vac-wrapper {
 		margin: 0 7px;
 	}
+
+	.vac-icon-microphone {
+		fill: var(--chat-icon-color-microphone);
+		margin: 0 7px;
+	}
+
+	.vac-dot-audio-record {
+		height: 15px;
+		width: 15px;
+		border-radius: 50%;
+		background-color: var(--chat-message-bg-color-audio-record);
+	}
+
+	.vac-dot-audio-record-time {
+		font-size: 16px;
+		color: var(--chat-color);
+		margin-left: 8px;
+	}
+
+	.vac-icon-audio-stop {
+		border-color: var(--chat-icon-color-audio-cancel);
+		margin: 0 20px 0 10px;
+	}
+
+	.vac-icon-audio-confirm {
+		fill: var(--chat-icon-color-audio-confirm);
+		border-color: var(--chat-icon-color-audio-confirm);
+		margin: 0 13px 0 20px;
+	}
 }
 
 .vac-media-container {
@@ -1071,12 +1199,11 @@ export default {
 		}
 	}
 
-	.vac-icon-textarea {
-		margin: 6px 0 0 5px;
-
+	.vac-icon-textarea,
+	.vac-icon-textarea-left {
 		svg,
-		.wrapper {
-			margin: 0 5px;
+		.vac-wrapper {
+			margin: 0 5px !important;
 		}
 	}
 

diff --git a/src/components/SvgIcon.vue b/src/components/SvgIcon.vue
@@ -94,11 +94,6 @@ export default {
 					path:
 						'M432.8,216.4v39.2c0,45.2-15.3,84.3-45.2,118.4c-29.8,33.2-67.3,52.8-111.6,57.9v40.9h78.4c5.1,0,10.2,1.7,13.6,6c4.3,4.3,6,8.5,6,13.6c0,5.1-1.7,10.2-6,13.6c-4.3,4.3-8.5,6-13.6,6H157.6c-5.1,0-10.2-1.7-13.6-6c-4.3-4.3-6-8.5-6-13.6c0-5.1,1.7-10.2,6-13.6c4.3-4.3,8.5-6,13.6-6H236v-40.9c-44.3-5.1-81.8-23.9-111.6-57.9s-45.2-73.3-45.2-118.4v-39.2c0-5.1,1.7-10.2,6-13.6c4.3-4.3,8.5-6,13.6-6s10.2,1.7,13.6,6c4.3,4.3,6,8.5,6,13.6v39.2c0,37.5,13.6,70.7,40,97.1s59.6,40,97.1,40s70.7-13.6,97.1-40c26.4-26.4,40-59.6,40-97.1v-39.2c0-5.1,1.7-10.2,6-13.6c4.3-4.3,8.5-6,13.6-6c5.1,0,10.2,1.7,13.6,6C430.2,206.2,432.8,211.3,432.8,216.4z M353.5,98v157.6c0,27.3-9.4,50.3-29,69c-19.6,19.6-42.6,29-69,29s-50.3-9.4-69-29c-19.6-19.6-29-42.6-29-69V98c0-27.3,9.4-50.3,29-69c19.6-19.6,42.6-29,69-29s50.3,9.4,69,29C344.2,47.7,353.5,71.6,353.5,98z'
 				},
-				'microphone-off': {
-					size: 'large',
-					path:
-						'M432.8,216.4v39.2c0,45.2-15.3,84.3-45.2,118.4c-29.8,33.2-67.3,52.8-111.6,57.9v40.9h78.4c5.1,0,10.2,1.7,13.6,6c4.3,4.3,6,8.5,6,13.6c0,5.1-1.7,10.2-6,13.6c-4.3,4.3-8.5,6-13.6,6H157.6c-5.1,0-10.2-1.7-13.6-6c-4.3-4.3-6-8.5-6-13.6c0-5.1,1.7-10.2,6-13.6c4.3-4.3,8.5-6,13.6-6H236v-40.9c-44.3-5.1-81.8-23.9-111.6-57.9s-45.2-73.3-45.2-118.4v-39.2c0-5.1,1.7-10.2,6-13.6c4.3-4.3,8.5-6,13.6-6s10.2,1.7,13.6,6c4.3,4.3,6,8.5,6,13.6v39.2c0,37.5,13.6,70.7,40,97.1s59.6,40,97.1,40s70.7-13.6,97.1-40c26.4-26.4,40-59.6,40-97.1v-39.2c0-5.1,1.7-10.2,6-13.6c4.3-4.3,8.5-6,13.6-6c5.1,0,10.2,1.7,13.6,6C430.2,206.2,432.8,211.3,432.8,216.4z M353.5,98v157.6c0,27.3-9.4,50.3-29,69c-19.6,19.6-42.6,29-69,29s-50.3-9.4-69-29c-19.6-19.6-29-42.6-29-69V98c0-27.3,9.4-50.3,29-69c19.6-19.6,42.6-29,69-29s50.3,9.4,69,29C344.2,47.7,353.5,71.6,353.5,98z'
-				},
 				'audio-play': {
 					size: 'medium',
 					path:
@@ -218,10 +213,6 @@ export default {
 	fill: var(--chat-icon-color-dropdown-scroll);
 }
 
-#vac-icon-microphone-off {
-	fill: var(--chat-icon-color-microphone-off);
-}
-
 #vac-icon-audio-play {
 	fill: var(--chat-icon-color-audio-play);
 }

diff --git a/src/styles/helper.scss b/src/styles/helper.scss
@@ -46,6 +46,24 @@
 	opacity: 0.7;
 }
 
+.vac-svg-border {
+	display: flex;
+	align-items: center;
+	height: 35px;
+	width: 35px;
+	border-radius: 50px;
+	border: 1px solid #000;
+
+	&.vac-svg-button {
+		min-height: 35px;
+		min-width: 35px;
+
+		svg {
+			margin-left: 5px;
+		}
+	}
+}
+
 .vac-room-avatar {
 	background-size: cover;
 	background-position: center center;

diff --git a/src/themes/index.js b/src/themes/index.js
@@ -80,6 +80,7 @@ export const defaultThemeStyles = {
 			backgroundReactionHoverMe: '#cfecf5',
 			borderStyleReactionHoverMe: '1px solid #3b98b8',
 			colorReactionCounterMe: '#0b59b3',
+			backgroundAudioRecord: '#eb4034',
 			backgroundAudioLine: 'rgba(0, 0, 0, 0.15)',
 			backgroundAudioProgress: '#455247',
 			backgroundAudioProgressSelector: '#455247'
@@ -130,9 +131,10 @@ export const defaultThemeStyles = {
 			dropdownRoom: '#9e9e9e',
 			dropdownScroll: '#0a0a0a',
 			microphone: '#1976d2',
-			microphoneOff: '#eb4034',
 			audioPlay: '#455247',
-			audioPause: '#455247'
+			audioPause: '#455247',
+			audioCancel: '#eb4034',
+			audioConfirm: '#1ba65b'
 		}
 	},
 	dark: {
@@ -216,6 +218,7 @@ export const defaultThemeStyles = {
 			backgroundReactionHoverMe: '#4e9ad1',
 			borderStyleReactionHoverMe: 'none',
 			colorReactionCounterMe: '#fff',
+			backgroundAudioRecord: '#eb4034',
 			backgroundAudioLine: 'rgba(255, 255, 255, 0.15)',
 			backgroundAudioProgress: '#b7d4d3',
 			backgroundAudioProgressSelector: '#b7d4d3'
@@ -266,9 +269,10 @@ export const defaultThemeStyles = {
 			dropdownRoom: '#fff',
 			dropdownScroll: '#0a0a0a',
 			microphone: '#fff',
-			microphoneOff: '#eb4034',
 			audioPlay: '#b7d4d3',
-			audioPause: '#b7d4d3'
+			audioPause: '#b7d4d3',
+			audioCancel: '#eb4034',
+			audioConfirm: '#1ba65b'
 		}
 	}
 }
@@ -363,6 +367,7 @@ export const cssThemeVars = ({
 		'--chat-message-border-style-reaction-hover-me':
 			message.borderStyleReactionHoverMe,
 		'--chat-message-color-reaction-counter-me': message.colorReactionCounterMe,
+		'--chat-message-bg-color-audio-record': message.backgroundAudioRecord,
 		'--chat-message-bg-color-audio-line': message.backgroundAudioLine,
 		'--chat-message-bg-color-audio-progress': message.backgroundAudioProgress,
 		'--chat-message-bg-color-audio-progress-selector':
@@ -410,8 +415,9 @@ export const cssThemeVars = ({
 		'--chat-icon-color-dropdown-room': icons.dropdownRoom,
 		'--chat-icon-color-dropdown-scroll': icons.dropdownScroll,
 		'--chat-icon-color-microphone': icons.microphone,
-		'--chat-icon-color-microphone-off': icons.microphoneOff,
 		'--chat-icon-color-audio-play': icons.audioPlay,
-		'--chat-icon-color-audio-pause': icons.audioPause
+		'--chat-icon-color-audio-pause': icons.audioPause,
+		'--chat-icon-color-audio-cancel': icons.audioCancel,
+		'--chat-icon-color-audio-confirm': icons.audioConfirm
 	}
 }