Fix ripple for touchpads

Fix record audio bug

src/components/chat/input.ts

@@ -16,6 +16,8 @@ import emoticonsDropdown from "../emoticonsDropdown";
 import PopupCreatePoll from "../popupCreatePoll";
 import { toast } from "../toast";
 
+const RECORD_MIN_TIME = 500;
+
 export class ChatInput {
   public pageEl = document.getElementById('page-chats') as HTMLDivElement;
   public messageInput = document.getElementById('input-message') as HTMLDivElement/* HTMLInputElement */;
@@ -515,14 +517,20 @@ export class ChatInput {
       
       if(!this.recorder || this.recording || !this.isInputEmpty()) {
         if(this.recording) {
-          this.recorder.stop();
+          if((Date.now() - this.recordStartTime) < RECORD_MIN_TIME) {
+            this.btnCancelRecord.click();
+          } else {
+            this.recorder.stop();
+          }
         } else {
           this.sendMessage();
         }
       } else {
+        this.chatInput.classList.add('is-locked');
         this.recorder.start().then(() => {
           this.recordCanceled = false;
-          this.chatInput.classList.add('is-recording', 'is-locked');
+          
+          this.chatInput.classList.add('is-recording');
           this.recording = true;
           this.updateSendBtn();
           opusDecodeController.setKeepAlive(true);
@@ -583,6 +591,8 @@ export class ChatInput {
               toast(e.message);
               break;
           }
+
+          this.chatInput.classList.remove('is-recording', 'is-locked');
         });
       }
     };

src/components/ripple.ts

@@ -1,4 +1,3 @@
-import mediaSizes from "../helpers/mediaSizes";
 import { touchSupport } from "../lib/config";
 import { findUpClassName } from "../lib/utils";
 
@@ -19,7 +18,7 @@ export function ripple(elem: HTMLElement, callback: (id: number) => Promise<bool
   elem.append(r);
 
   let handler: () => void;
-  let animationEndPromise: Promise<any>;
+  //let animationEndPromise: Promise<number>;
   const drawRipple = (clientX: number, clientY: number) => {
     const startTime = Date.now();
     const span = document.createElement('span');
@@ -28,9 +27,13 @@ export function ripple(elem: HTMLElement, callback: (id: number) => Promise<bool
     
     //console.log('ripple drawRipple');
     
-    let duration: number;
+    const duration = +window.getComputedStyle(r).getPropertyValue('--ripple-duration').replace('s', '') * 1000;
+    //console.log('ripple duration', duration);
 
     handler = () => {
+    //handler = () => animationEndPromise.then((duration) => {
+      //console.log('ripple animation was:', duration);
+
       //const duration = isSquare || mediaSizes.isMobile ? 200 : 700;
       //return;
       let elapsedTime = Date.now() - startTime;
@@ -54,6 +57,7 @@ export function ripple(elem: HTMLElement, callback: (id: number) => Promise<bool
 
       handler = null;
     };
+    //});
 
     callback && callback(clickID);
 
@@ -100,15 +104,22 @@ export function ripple(elem: HTMLElement, callback: (id: number) => Promise<bool
         span.style.left = x + 'px';
         span.style.top = y + 'px';
 
+        // нижний код выполняется с задержкой
+        /* animationEndPromise = new Promise((resolve) => {
+          span.addEventListener('animationend', () => {
+            // 713 -> 700
+            resolve(((Date.now() - startTime) / 100 | 0) * 100);
+          }, {once: true});
+        }); */
         
-        animationEndPromise = new Promise((resolve) => {
-          span.addEventListener('animationend', resolve, {once: true});
-        });
+        // нижний код не всегда включает анимацию ПРИ КЛИКЕ НА ТАЧПАД БЕЗ ТАПТИК ЭНЖИНА
+        /* span.style.display = 'none';
+        r.append(span);
+        duration = +window.getComputedStyle(span).getPropertyValue('animation-duration').replace('s', '') * 1000;
+        span.style.display = ''; */
 
         r.append(span);
 
-        duration = +window.getComputedStyle(span).getPropertyValue('animation-duration').replace('s', '') * 1000;
-
         //r.classList.add('active');
         //handler();
       });

src/scss/partials/_chat.scss

@@ -362,6 +362,10 @@
 		.btn-icon {
 			color: #c6cbce;
 		}
+
+		&:not(.is-recording) #btn-send {
+			color: #c6cbce;
+		}
 	}
 	
 	&.is-recording {

src/scss/partials/_ripple.scss

@@ -21,6 +21,7 @@
  * --------------------------------------------------
  */
 .c-ripple {
+  --ripple-duration: .7s;
   //display: none !important;
   position: absolute;
   top: 0;
@@ -51,6 +52,7 @@
     //overflow: hidden;
 
     .btn-menu &, .c-ripple.is-square & {
+      animation-name: ripple-effect-handhelds;
       animation-duration: .2s;
       transition-duration: .1s;
       //border-radius: 15%;
@@ -63,15 +65,26 @@
     } */
   }
 
+  .btn-menu &, &.is-square {
+    --ripple-duration: .2s;
+  }
+
   &__circle.hiding, &__square.hiding {
     opacity: 0;
   }
 }
 
 @include respond-to(handhelds) {
-  .chats-container ul li > .rp .c-ripple__circle {
-    animation-duration: .2s;
-    transition-duration: .1s;
+  .chats-container ul li > .rp {
+    .c-ripple {
+      --ripple-duration: .2s;
+
+      &__circle {
+        animation-duration: .2s;
+        transition-duration: .1s;
+        animation-name: ripple-effect-handhelds;
+      }
+    }
   }
 }
 
@@ -84,3 +97,13 @@
     transform: scale(2);
   }
 }
+
+@keyframes ripple-effect-handhelds {
+  0% {
+    transform: scale(.85);
+  }
+
+  to {
+    transform: scale(2);
+  }
+}