Skip to content

Commit a10ef45

Browse files
ramzini22ramzini22
committed
feat: add delete recording
1 parent bf991e2 commit a10ef45

File tree

5 files changed

+71
-26
lines changed

5 files changed

+71
-26
lines changed

‎src/components/input-message/hooks/use-enter.hook.ts

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,7 @@ export const useEnterHook = (): UseEnterHookType => {
121121
const buttonStartRecover = document.getElementById(styles.microphone)!;
122122
const sendMessageButton = document.getElementById(styles.button_input_block)!;
123123
const microphoneButton = document.getElementById(styles.button_microphone_block);
124+
const buttonMicrophoneDelete = document.getElementById(styles.button_microphone_delete);
124125
const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
125126

126127
const preventDefault = (event: KeyboardEvent) => {
@@ -174,6 +175,10 @@ export const useEnterHook = (): UseEnterHookType => {
174175
background.style.paddingBottom = 'env(safe-area-inset-bottom, 32px)';
175176
};
176177

178+
const stopRecover = async () => {
179+
if (mediaRecorder) mediaRecorder.stop();
180+
};
181+
177182
const startRecover = async () => {
178183
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
179184

@@ -184,7 +189,7 @@ export const useEnterHook = (): UseEnterHookType => {
184189
return;
185190
}
186191

187-
buttonStartRecover.style.background = 'red';
192+
buttonStartRecover.classList.add(styles.recover_color);
188193
setIsRecovering(true);
189194
mediaRecorder = new MediaRecorder(stream);
190195

@@ -194,7 +199,7 @@ export const useEnterHook = (): UseEnterHookType => {
194199

195200
mediaRecorder.onstop = () => {
196201
if (stream) stream.getTracks().forEach((track) => track.stop());
197-
buttonStartRecover.style.background = '#0098ea';
202+
buttonStartRecover.classList.remove(styles.recover_color);
198203
setIsRecovering(false);
199204

200205
// todo
@@ -221,6 +226,7 @@ export const useEnterHook = (): UseEnterHookType => {
221226
element.addEventListener('input', onInput);
222227
sendMessageButton.addEventListener('click', sendMessage);
223228
microphoneButton?.addEventListener('mousedown', startRecover);
229+
buttonMicrophoneDelete?.addEventListener('mousedown', stopRecover);
224230
if (isStandalone && isPhone) {
225231
element.addEventListener('focus', mobileFocus);
226232
element.addEventListener('focusout', mobileFocusOut);
@@ -233,6 +239,7 @@ export const useEnterHook = (): UseEnterHookType => {
233239
element.removeEventListener('input', onInput);
234240
sendMessageButton.removeEventListener('click', sendMessage);
235241
microphoneButton?.removeEventListener('mousedown', startRecover);
242+
buttonMicrophoneDelete?.removeEventListener('mousedown', stopRecover);
236243

237244
if (isStandalone && isPhone) {
238245
element.removeEventListener('focus', mobileFocus);
@@ -283,5 +290,5 @@ export const useEnterHook = (): UseEnterHookType => {
283290
[chatOnPage?.id, isPhone, isOpenMobileKeyboard, isRecovering],
284291
);
285292

286-
return [textExist, setEmoji, placeholder, isShowPlaceholder];
293+
return [textExist, recoveringTime, setEmoji, placeholder, isShowPlaceholder];
287294
};

‎src/components/input-message/index.module.css

Lines changed: 33 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
align-items: end;
5656
}
5757

58-
#button_emoji_block, #button_input_block, #button_microphone_block{
58+
#button_emoji_block, #button_input_block, #button_microphone_block, #button_microphone_delete{
5959
display: grid;
6060
justify-content: center;
6161
align-items: center;
@@ -69,7 +69,7 @@
6969
}
7070
}
7171

72-
#button_input_block, #button_microphone_block{
72+
#button_input_block, #button_microphone_block, #button_microphone_delete{
7373
padding: 4px;
7474
}
7575

@@ -78,28 +78,28 @@
7878
align-items: end;
7979
}
8080

81-
#button_input_block, #button_microphone_block{
81+
#button_input_block, #button_microphone_block, #button_microphone_delete{
8282
@media(width < 600px) {
8383
border-radius: 15px 0 0 15px;
8484
}
8585
}
8686

87-
#button_microphone_block{
88-
/*background-color: #0098ea;*/
89-
}
90-
91-
#button_input_block:hover, #button_microphone_block:hover{
87+
#button_input_block:hover, #button_microphone_block:hover, #button_microphone_delete:hover{
9288
@media(width >= 600px) {
9389
background-color: #d0e7fb;
9490
}
9591
}
9692

97-
#button_microphone_block{
93+
#button_microphone_block, #button_microphone_delete{
9894
position: absolute;
9995
user-select: none;
10096
-webkit-user-select: none;
10197
}
10298

99+
#button_microphone_delete{
100+
margin-left: -46px;
101+
}
102+
103103
.button_block_active, #button_emoji_block:hover {
104104
background-color: #d0e7fb;
105105
}
@@ -177,6 +177,15 @@
177177
transition: background .3s ease;
178178
}
179179

180+
#microphone_stop{
181+
font-size: 18px;
182+
color: white;
183+
background-color: red;
184+
padding: 10px;
185+
border-radius: 50px;
186+
transition: background .3s ease;
187+
}
188+
180189
#bottom_button_background{
181190
display: grid;
182191
justify-content: center;
@@ -240,6 +249,10 @@
240249
animation: hide_recover_button .2s linear forwards;
241250
}
242251

252+
.recover_color{
253+
animation: recover_color 1s linear alternate infinite;
254+
}
255+
243256
@keyframes show_slowly{
244257
from {
245258
visibility: hidden;
@@ -306,6 +319,7 @@
306319
opacity: 0.2;
307320
}
308321
}
322+
309323
@keyframes hide_recover_button{
310324
from {
311325
visibility: hidden;
@@ -318,3 +332,13 @@
318332
opacity: 1;
319333
}
320334
}
335+
336+
337+
@keyframes recover_color{
338+
from {
339+
background-color: var(--menu-color);
340+
}
341+
to {
342+
background-color: red;
343+
}
344+
}

‎src/components/input-message/index.tsx

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,14 @@ import { useEnterHook } from './hooks/use-enter.hook.ts';
1111
import { PropsType } from './types/props.type.ts';
1212
import useVisibility from '../../common/hooks/use-visibility.ts';
1313
import { FaMicrophone } from 'react-icons/fa';
14+
import { MdDelete } from 'react-icons/md';
1415

1516
export const InputMessage: FC<PropsType> = ({ showLastMessages, isVisibleBottomButton }) => {
1617
const visibility = useVisibility;
1718
const { chatOnPage } = useAppSelector((state) => state.chats);
1819
const { update, setChatOnPage } = useAppAction();
1920
const [isVisibleEmoji, setIsVisibleEmoji] = useState<boolean>();
20-
const [textExist, setEmoji, placeholder, isShowPlaceholder] = useEnterHook();
21+
const [textExist, recoveringTime, setEmoji, placeholder, isShowPlaceholder] = useEnterHook();
2122

2223
const cancelAnswerMessage = useCallback(() => {
2324
if (!chatOnPage?.id) return;
@@ -90,16 +91,28 @@ export const InputMessage: FC<PropsType> = ({ showLastMessages, isVisibleBottomB
9091
<BsFillArrowUpCircleFill id={styles.button} />
9192
</div>
9293
{navigator.mediaDevices && (
93-
<div
94-
id={styles.button_microphone_block}
95-
className={visibility(
96-
styles.show_recover_button,
97-
styles.hide_recover_button,
98-
textExist,
99-
)}
100-
>
101-
<FaMicrophone id={styles.microphone} />
102-
</div>
94+
<>
95+
<div
96+
id={styles.button_microphone_delete}
97+
className={visibility(
98+
styles.show_recover_button,
99+
styles.hide_recover_button,
100+
!recoveringTime,
101+
)}
102+
>
103+
<MdDelete id={styles.microphone_stop} />
104+
</div>
105+
<div
106+
id={styles.button_microphone_block}
107+
className={visibility(
108+
styles.show_recover_button,
109+
styles.hide_recover_button,
110+
textExist,
111+
)}
112+
>
113+
<FaMicrophone id={styles.microphone} />
114+
</div>
115+
</>
103116
)}
104117
</div>
105118
</div>

‎src/components/input-message/types/use-enter-hook.type.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export type UseEnterHookType = [boolean, (emoji: string) => void, string, boolean];
1+
export type UseEnterHookType = [boolean, string | undefined, (emoji: string) => void, string, boolean];

‎src/pages/chat/hooks/use-listen-scroll.hook.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,8 @@ export const useListenScroll = (messages: MessageType[]): [boolean | undefined]
3434
scrollTimeout = setTimeout(() => {
3535
const scrollTop = el.scrollTop;
3636
if (chatOnPage?.id !== messages[0]?.chatId) return;
37-
updateChatIndexDb({ ...chatOnPage, messages, scrollTop });
37+
update({ id: chatOnPage.id, scrollTop });
38+
updateChatIndexDb({ ...chatOnPage, scrollTop });
3839
}, 150);
3940
};
4041

@@ -43,7 +44,7 @@ export const useListenScroll = (messages: MessageType[]): [boolean | undefined]
4344
const scrollTop = el.scrollTop;
4445
clearTimeout(scrollTimeout);
4546
el.removeEventListener('scroll', scroll);
46-
update({ id: chatOnPage.id, messages, scrollTop });
47+
update({ id: chatOnPage.id, scrollTop });
4748
};
4849
}, [chatOnPage?.id, messages, isVisibleBottomButton]);
4950

0 commit comments

Comments
 (0)