Merge pull request #58 from Passimx/test-input

Feat: add recover

Author: ramzini22

index.html

@@ -7,8 +7,7 @@
         <meta name="robots" content="index, follow"/>
         <meta name="description" content="Open platform for messaging"/>
         <meta name="keywords" content="passimx, messaging, chat, anonymously"/>
-        <meta name="viewport" content="width=device-width, user-scalable=no" />
-
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
         <meta property="og:site_name" content="PassimX">
         <meta property="og:url" content="https://tons-chat.ru">
         <meta property="og:image:width" content="250">

public/languages/ar/translation.json

@@ -4,6 +4,8 @@
   "search": "بحث",
   "search_chats": "بحث عن الدردشات",
   "chats_enter_message": "...رسالة",
+  "messages": "الرسائل",
+  "delete_chats": "حذف الدردشات",
   "chats_message_unavailable": "إرسال الرسائل غير متاح",
   "create_open_chat": "دردشة مفتوحة",
   "no_chats": "لم يتم العثور على دردشات",
@@ -19,6 +21,7 @@
   "reply": "الرد",
   "copy_text": "نسخ النص",
   "copy_message_link":"نسخ رابط الرسالة",
+  "recording": "تسجيل",
 
   "description_open_chat": "الفكرة الرئيسية للدردشة المفتوحة هي إنشاء قناة اتصال متاحة للجميع، يمكن ربطها باسم نطاق موقع ويب أو رابط ملف تعريف على وسائل التواصل الاجتماعي أو كلمات رئيسية أخرى. هذا النوع من الدردشة هو الحل الأفضل للتواصل مع جمهور واسع.",
   "description_shared_chat": "تتيح دردشة البث لمجموعة معينة من الأشخاص التواصل بينما يمكن للعالم كله المشاهدة. هذا النوع من الدردشة هو الحل الأفضل لنقل الرسائل إلى الجماهير.",

public/languages/ch/translation.json

@@ -4,6 +4,8 @@
   "search": "搜索",
   "search_chats": "搜索聊天",
   "chats_enter_message": "消息...",
+  "messages": "消息",
+  "delete_chats": "删除聊天",
   "chats_message_unavailable": "无法发送消息 ",
   "create_open_chat": "公开聊天",
   "no_chats": "未找到聊天",
@@ -19,6 +21,7 @@
   "reply": "回复",
   "copy_text": "复制文本",
   "copy_message_link":"复制消息链接",
+  "recording": "录音",
 
   "description_open_chat": "公开聊天的主要目的是创建一个任何人都可以访问的交流渠道，可以绑定到网站域名、社交媒体个人资料链接或其他关键词。这种聊天模式是与更广泛的人群进行交流的最佳方式。",
   "description_shared_chat": "广播聊天允许特定人群进行交流，同时所有人都可以观看。这种聊天模式是将信息传播给大众的最佳解决方案。",

public/languages/en/translation.json

@@ -4,6 +4,8 @@
   "search": "Search",
   "search_chats": "Search chats",
   "chats_enter_message": "Message...",
+  "messages": "Messages",
+  "delete_chats": "Delete chats",
   "chats_message_unavailable": "Message sending is unavailable",
   "create_open_chat": "Open chat",
   "no_chats": "No chats found",
@@ -19,6 +21,7 @@
   "reply": "Reply",
   "copy_text": "Copy text",
   "copy_message_link":"Copy message link",
+  "recording": "Recording",
 
   "description_open_chat": "The main idea of an open chat is to create a communication channel accessible to everyone, which can be linked to a website domain name, a social media profile link, or other keywords. This type of chat is the best solution for communicating with a wide audience.",
   "description_shared_chat": "A broadcast chat allows a specific group of people to communicate while the whole world can observe. This type of chat is the best solution for broadcasting messages to a large audience.",

public/languages/es/translation.json

@@ -4,8 +4,10 @@
   "search": "Buscar",
   "search_chats": "Buscar chats",
   "chats_enter_message": "Mensaje...",
-  "create_open_chat": "Chat abierto",
+  "messages": "Mensajes",
+  "delete_chats": "Eliminar chats",
   "chats_message_unavailable": "Message sending is unavailable",
+  "create_open_chat": "Chat abierto",
   "no_chats": "No se encontraron chats",
   "create_shared_chat": "Chat de transmisión",
   "create_public_chat": "Chat público",
@@ -19,6 +21,7 @@
   "reply": "Responder",
   "copy_text": "Copiar texto",
   "copy_message_link":"Copiar enlace del mensaje",
+  "recording": "Grabación",
 
   "description_open_chat": "La idea principal de un chat abierto es crear un canal de comunicación accesible para todos, que se pueda vincular a un nombre de dominio de un sitio web, un perfil en redes sociales u otras palabras clave. Este tipo de chat es la mejor solución para comunicarse con un público amplio.",
   "description_shared_chat": "Un chat de transmisión permite que un grupo específico de personas se comunique mientras el resto del mundo puede observar. Este tipo de chat es la mejor solución para transmitir mensajes a las masas.",

public/languages/ru/translation.json

@@ -4,6 +4,8 @@
   "search": "Поиск",
   "search_chats": "Поиск чатов",
   "chats_enter_message": "Сообщение...",
+  "messages": "Сообщения",
+  "delete_chats": "Удалить чаты",
   "chats_message_unavailable": "Отправка сообщений недоступна",
   "create_open_chat": "Открытый чат",
   "no_chats": "Чаты не найдены",
@@ -19,6 +21,7 @@
   "reply": "Ответить",
   "copy_text": "Копировать текст",
   "copy_message_link":"Копировать ссылку сообщения",
+  "recording": "Запись",
 
   "description_open_chat": "Основной идеей открытого чата является возможность создавать доступный для каждого канал общения, который можно привязать к доменному имени сайта, ссылке на профиль из соц. сетей или же по другим ключевым словам. Этот вид чата является лучшим решением для общения с широкой публикой.",
   "description_shared_chat": "Трансляционный чат позволяет определенному кругу лиц вести коммуникацию, за которой может наблюдать весь мир. Этот вид чата является лучшим решением для трансляции сообщений в широкие массы.",

src/components/chat-item/index.module.css

@@ -10,11 +10,12 @@
 }
 
 .chat_item:active {
-    @media(width <= 600px){
+    @media(width < 600px){
         background-color: #0c518d;
         border-radius: 10px;
     }
 }
+
 .selected_chat{
     @media(width > 600px){
         background-color: #0c518d;

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

@@ -3,23 +3,57 @@ import styles from '../index.module.css';
 import { useAppAction, useAppSelector } from '../../../root/store';
 import { ChatEnum } from '../../../root/types/chat/chat.enum.ts';
 import { useTranslation } from 'react-i18next';
-import { UseEnterHookType } from '../types/use-enter-hook.type.ts';
 import { createMessage } from '../../../root/api/messages';
 import { getRawChat } from '../../../root/store/chats/chats.raw.ts';
-import { focusToEnd } from '../common/focus-to-end.ts';
 import { getIsFocused } from './get-is-focused.hook.ts';
+import { UseEnterHookType } from '../types/use-enter-hook.type.ts';
+import { focusToEnd } from '../common/focus-to-end.ts';
+import moment from 'moment/min/moment-with-locales';
+
+let mediaRecorder: MediaRecorder | undefined;
+let chunks: Blob[] = [];
 
 export const useEnterHook = (): UseEnterHookType => {
     const { t } = useTranslation();
     const { update, setChatOnPage } = useAppAction();
     const [isShowPlaceholder, setIsShowPlaceholder] = useState<boolean>(true);
     const { chatOnPage } = useAppSelector((state) => state.chats);
     const { isPhone, isOpenMobileKeyboard } = useAppSelector((state) => state.app);
+    const [textExist, setTextExist] = useState<boolean>(true);
+    const [isRecovering, setIsRecovering] = useState<boolean>(false);
+    const [recoveringTime, setRecoveringTime] = useState<string>();
 
     const placeholder = useMemo((): string => {
         const text = chatOnPage?.type === ChatEnum.IS_SYSTEM ? 'chats_message_unavailable' : 'chats_enter_message';
+        if (isRecovering) return `${t('recording')}: ${recoveringTime}`;
         return t(text);
-    }, [chatOnPage?.type, t]);
+    }, [chatOnPage?.type, t, isRecovering, recoveringTime]);
+
+    useEffect(() => {
+        if (!isRecovering) return;
+        let handler: NodeJS.Timeout;
+        const startTime = Date.now();
+
+        const updateTime = () => {
+            const duration = moment.duration(Date.now() - startTime);
+
+            const minutes = Math.floor(duration.asMinutes()); // минуты
+            const seconds = duration.seconds(); // секунды (0-59)
+            const milliseconds = Math.floor(duration.milliseconds() / 10); // сотые доли (0-99)
+
+            setRecoveringTime(
+                `${minutes}:${seconds.toString().padStart(2, '0')},${milliseconds.toString().padStart(2, '0')}`,
+            );
+            handler = setTimeout(updateTime, 20);
+        };
+
+        updateTime();
+
+        return () => {
+            setRecoveringTime(undefined);
+            clearTimeout(handler);
+        };
+    }, [isRecovering]);
 
     const onInput = useCallback(() => {
         const el = document.getElementById(styles.new_message)!;
@@ -29,12 +63,14 @@ export const useEnterHook = (): UseEnterHookType => {
         setIsShowPlaceholder(isEmpty);
         if (chatOnPage?.id) {
             const isText = !!el.innerText.replace(/^\n+|\n+$/g, '').trim()?.length;
+            setTextExist(isText);
 
             update({ id: chatOnPage.id, inputMessage: isText ? el.innerText : undefined });
         }
-    }, [chatOnPage?.id]);
+    }, [chatOnPage?.id, textExist]);
 
     const sendMessage = useCallback(async () => {
+        alert(2);
         if (!chatOnPage?.id) return;
         const element = document.getElementById(styles.new_message)!;
         const isFocused = isPhone ? isOpenMobileKeyboard : getIsFocused();
@@ -45,6 +81,7 @@ export const useEnterHook = (): UseEnterHookType => {
         element.innerText = '';
         if (isFocused) element.focus();
         setIsShowPlaceholder(true);
+        setTextExist(false);
 
         if (getRawChat(chatOnPage.id)) update({ id: chatOnPage.id, inputMessage: undefined, answerMessage: undefined });
         else setChatOnPage({ answerMessage: undefined });
@@ -60,13 +97,33 @@ export const useEnterHook = (): UseEnterHookType => {
 
         element.innerText = text ?? '';
         setIsShowPlaceholder(!text);
+        setTextExist(!!text);
+
+        if (isRecovering && mediaRecorder) {
+            mediaRecorder.stop();
+        }
 
         // 300 - время анимации, иначе быстро отрабатывает анимация
         if (!isPhone) setTimeout(() => focusToEnd(element), 300);
     }, [chatOnPage?.id, isPhone]);
 
     useEffect(() => {
+        if (!chatOnPage) return;
         const element = document.getElementById(styles.new_message)!;
+        if (isRecovering) {
+            element.removeAttribute('contentEditable');
+        } else element.setAttribute('contentEditable', `${chatOnPage.type !== ChatEnum.IS_SYSTEM}`);
+    }, [isRecovering, chatOnPage]);
+
+    useEffect(() => {
+        if (chatOnPage?.type === ChatEnum.IS_SYSTEM) return;
+        const element = document.getElementById(styles.new_message)!;
+        const background = document.getElementById(styles.background)!;
+        const buttonStartRecover = document.getElementById(styles.microphone)!;
+        const sendMessageButton = document.getElementById(styles.button_input_block)!;
+        const microphoneButton = document.getElementById(styles.button_microphone_block);
+        const buttonMicrophoneDelete = document.getElementById(styles.button_microphone_delete);
+        const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
 
         const preventDefault = (event: KeyboardEvent) => {
             if (event.code === 'Enter' && !isPhone && !event.shiftKey) event.preventDefault();
@@ -105,26 +162,96 @@ export const useEnterHook = (): UseEnterHookType => {
 
             if (chatOnPage?.id) {
                 const isText = !!element.innerText.replace(/^\n+|\n+$/g, '').trim()?.length;
+                setTextExist(isText);
 
                 update({ id: chatOnPage.id, inputMessage: isText ? element.innerText : undefined });
             }
         };
 
+        const mobileFocus = () => {
+            background.style.paddingBottom = '0px';
+        };
+
+        const mobileFocusOut = () => {
+            background.style.paddingBottom = 'env(safe-area-inset-bottom, 32px)';
+        };
+
+        const stopRecover = async () => {
+            if (mediaRecorder) mediaRecorder.stop();
+        };
+
+        const startRecover = async () => {
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+
+            if (isRecovering && mediaRecorder) {
+                mediaRecorder.stop();
+
+                if (stream) stream.getTracks().forEach((track) => track.stop());
+                return;
+            }
+
+            buttonStartRecover.classList.add(styles.recover_color);
+            setIsRecovering(true);
+            mediaRecorder = new MediaRecorder(stream);
+
+            mediaRecorder.ondataavailable = (event) => {
+                chunks.push(event.data);
+            };
+
+            mediaRecorder.onstop = () => {
+                if (stream) stream.getTracks().forEach((track) => track.stop());
+                buttonStartRecover.classList.remove(styles.recover_color);
+                setIsRecovering(false);
+
+                // todo
+                // перенести в отправку на сервер
+                // // Создаем Blob из кусочков
+                // const audioBlob = new Blob(chunks, { type: 'audio/webm' });
+
+                // // Создаем URL для воспроизведения
+                // const audioUrl = URL.createObjectURL(audioBlob);
+
+                // // Воспроизведение
+                // const audio = new Audio(audioUrl);
+                // audio.play();
+                chunks = [];
+            };
+
+            // Запускаем запись
+            mediaRecorder.start();
+        };
+
         element.addEventListener('keypress', preventDefault);
         element.addEventListener('keyup', send);
         element.addEventListener('paste', paste);
         element.addEventListener('input', onInput);
+        sendMessageButton.addEventListener('click', sendMessage);
+        microphoneButton?.addEventListener('mousedown', startRecover);
+        buttonMicrophoneDelete?.addEventListener('mousedown', stopRecover);
+        if (isStandalone && isPhone) {
+            element.addEventListener('focus', mobileFocus);
+            element.addEventListener('focusout', mobileFocusOut);
+        }
 
         return () => {
             element.removeEventListener('keypress', preventDefault);
             element.removeEventListener('keyup', send);
             element.removeEventListener('paste', paste);
             element.removeEventListener('input', onInput);
+            sendMessageButton.removeEventListener('click', sendMessage);
+            microphoneButton?.removeEventListener('mousedown', startRecover);
+            buttonMicrophoneDelete?.removeEventListener('mousedown', stopRecover);
+
+            if (isStandalone && isPhone) {
+                element.removeEventListener('focus', mobileFocus);
+                element.removeEventListener('focusout', mobileFocusOut);
+            }
         };
-    }, [chatOnPage?.id, isPhone]);
+    }, [chatOnPage?.id, isPhone, sendMessage, isRecovering]);
 
     const setEmoji = useCallback(
         (emoji: string) => {
+            if (isRecovering) return;
             const chatInput = document.getElementById(styles.new_message)!;
             const isFocused = isPhone ? isOpenMobileKeyboard : getIsFocused();
 
@@ -161,8 +288,8 @@ export const useEnterHook = (): UseEnterHookType => {
             else chatInput.blur();
             onInput();
         },
-        [chatOnPage?.id, isPhone, isOpenMobileKeyboard],
+        [chatOnPage?.id, isPhone, isOpenMobileKeyboard, isRecovering],
     );
 
-    return [sendMessage, setEmoji, placeholder, isShowPlaceholder];
+    return [textExist, recoveringTime, setEmoji, placeholder, isShowPlaceholder];
 };