some changes

src/components/chatInput.ts

@@ -11,6 +11,7 @@ import appMessagesManager from "../lib/appManagers/appMessagesManager";
 import initEmoticonsDropdown, { EMOTICONSSTICKERGROUP } from "./emoticonsDropdown";
 import lottieLoader from "../lib/lottieLoader";
 import { Layouter, RectPart } from "./groupedLayout";
+import Recorder from '../opus-recorder/dist/recorder.min';
 
 export class ChatInput {
   public pageEl = document.getElementById('page-chats') as HTMLDivElement;
@@ -19,6 +20,7 @@ export class ChatInput {
   public inputMessageContainer = document.getElementsByClassName('input-message-container')[0] as HTMLDivElement;
   public inputScroll = new Scrollable(this.inputMessageContainer);
   public btnSend = document.getElementById('btn-send') as HTMLButtonElement;
+  public btnCancelRecord = this.btnSend.previousElementSibling as HTMLButtonElement;
   public emoticonsDropdown: HTMLDivElement = null;
   public emoticonsTimeout: number = 0;
   public toggleEmoticons: HTMLButtonElement;
@@ -26,6 +28,8 @@ export class ChatInput {
   public lastUrl = '';
   public lastTimeType = 0;
 
+  private inputContainer = this.btnSend.parentElement as HTMLDivElement;
+
   public attachMenu: {
     container?: HTMLButtonElement,
     media?: HTMLDivElement,
@@ -53,6 +57,18 @@ export class ChatInput {
   public editMsgID = 0;
   public noWebPage = false;
 
+  private recorder = new Recorder({
+    //encoderBitRate: 32,
+    //encoderPath: "../dist/encoderWorker.min.js",
+    encoderSampleRate: 48000,
+    monitorGain: 0,
+    numberOfChannels: 1,
+    recordingGain: 1
+  });
+  private recording = false;
+  private recordCanceled = false;
+  private recordTimeEl = this.inputContainer.querySelector('.record-time') as HTMLDivElement;
+
   constructor() {
     this.toggleEmoticons = this.pageEl.querySelector('.toggle-emoticons') as HTMLButtonElement;
 
@@ -443,10 +459,101 @@ export class ChatInput {
 
     this.btnSend.addEventListener('click', () => {
       if(this.btnSend.classList.contains('tgico-send')) {
+        if(this.recording) {
+          this.recorder.stop();
+        } else {
           this.sendMessage();
         }
+      } else {
+        this.recorder.start().then(() => {
+          this.recordCanceled = false;
+          this.btnSend.classList.add('tgico-send');
+          this.inputContainer.classList.add('is-recording');
+          this.recording = true;
+
+          let startTime = Date.now();
+          let r = () => {
+            if(!this.recording) return;
+
+            let diff = Date.now() - startTime;
+            let ms = diff % 1000;
+
+            let formatted = ('' + (diff / 1000)).toHHMMSS() + ',' + ('00' + Math.round(ms / 10)).slice(-2);
+
+            this.recordTimeEl.innerText = formatted;
+
+            window.requestAnimationFrame(r);
+          };
+
+          r();
+        }).catch((e: Error) => {
+          console.error('Recorder start error:', e);
+        });
+      }
     });
 
+    this.btnCancelRecord.addEventListener('click', () => {
+      this.recordCanceled = true;
+      this.recorder.stop();
+    });
+
+    this.recorder.onstop = () => {
+      this.recording = false;
+      this.inputContainer.classList.remove('is-recording');
+      this.btnSend.classList.remove('tgico-send');
+    };
+
+    this.recorder.ondataavailable = (typedArray: Uint8Array) => {
+      if(this.recordCanceled) return;
+
+      const dataBlob = new Blob([typedArray], {type: 'audio/ogg'});
+      const fileName = new Date().toISOString() + ".opus";
+      console.log('Recorder data received', typedArray, dataBlob);
+
+      /* var url = URL.createObjectURL( dataBlob );
+
+      var audio = document.createElement('audio');
+      audio.controls = true;
+      audio.src = url;
+
+      var link = document.createElement('a');
+      link.href = url;
+      link.download = fileName;
+      link.innerHTML = link.download;
+
+      var li = document.createElement('li');
+      li.appendChild(link);
+      li.appendChild(audio);
+
+      document.body.append(li);
+
+      return; */
+
+      let peerID = appImManager.peerID;
+      appMessagesManager.sendFile(peerID, dataBlob, {
+        isVoiceMessage: true,
+        duration: 0,
+        isMedia: true
+      });
+
+      /* const url = URL.createObjectURL(dataBlob);
+      
+      var audio = document.createElement('audio');
+      audio.controls = true;
+      audio.src = url;
+
+      var link = document.createElement('a');
+      link.href = url;
+      link.download = fileName;
+      link.innerHTML = link.download;
+
+      var li = document.createElement('li');
+      li.appendChild(link);
+      li.appendChild(audio);
+
+      recordingslist.appendChild(li); */
+    };
+
     let emoticonsDisplayTimeout = 0;
     this.toggleEmoticons.onmouseover = (e) => {
       clearTimeout(this.emoticonsTimeout);

src/lib/appManagers/appMessagesManager.ts

@@ -597,6 +597,7 @@ export class AppMessagesManager {
     height: number,
     objectURL: string,
     isRoundMessage: boolean,
+    isVoiceMessage: boolean,
     duration: number,
     background: boolean
   }> = {}) {
@@ -661,6 +662,25 @@ export class AppMessagesManager {
       attachType = 'audio';
       apiFileName = 'audio.' + (fileType.split('/')[1] == 'ogg' ? 'ogg' : 'mp3');
       actionName = 'sendMessageUploadAudioAction';
+
+      let flags = 0;
+      if(options.isVoiceMessage) {
+        flags |= 1 << 10;
+        flags |= 1 << 2;
+      }
+
+      let attribute = {
+        _: 'documentAttributeAudio',
+        flags: flags,
+        pFlags: { // that's only for client, not going to telegram
+          voice: options.isVoiceMessage
+        }, 
+        waveform: new Uint8Array([0, 0, 0, 0, 0, 0, 128, 35, 8, 25, 34, 132, 16, 66, 8, 0, 0, 0, 0, 0, 0, 0, 96, 60, 254, 255, 255, 79, 223, 255, 63, 183, 226, 107, 255, 255, 255, 255, 191, 188, 255, 255, 246, 255, 255, 255, 255, 63, 155, 117, 135, 24, 249, 191, 167, 51, 149, 0, 0, 0, 0, 0, 0]),
+        voice: options.isVoiceMessage,
+        duration: options.duration || 0,
+      };
+
+      attributes.push(attribute);
     } else if(fileType.indexOf('video/') === 0) {
       attachType = 'video';
       apiFileName = 'video.mp4';

src/lib/opusProcessor.ts

@@ -0,0 +1,5 @@
+export class OpusProcessor {
+  
+}
+
+export default new OpusProcessor();

src/scss/partials/_chat.scss

@@ -102,12 +102,16 @@ $time-background: rgba(0, 0, 0, .35);
 		display: block; /* For Firefox By Ariel Flesler */
 	}
 
-	.btn-circle {
+	#btn-record-cancel {
+		visibility: hidden;
+		opacity: 0;
+		transition: width .1s .1s, margin-right .1s .1s, visibility 0s .1s, opacity .1s 0s;
+		padding: 0;
+	}
+	
+	#btn-send {
 		flex: 0 0 auto;
-		font-size: 1.5rem;
-		line-height: 1.5rem;
 		color: #9e9e9e;
-		background-color: #fff;
 		align-self: flex-end;
 
 		&.tgico-send {
@@ -115,8 +119,65 @@ $time-background: rgba(0, 0, 0, .35);
 		}
 	}
 
-	.os-scrollbar-handle {
+	#btn-record-cancel, #btn-send {
-		background: rgba(0, 0, 0, 0.2);
+		font-size: 1.5rem;
+		line-height: 1.5rem;
+		background-color: #fff;
+	}
+
+	.record-time {
+		height: 44px;
+		line-height: 44px;
+		display: none;
+
+		&:after {
+			content: " ";
+			width: 10px;
+			height: 10px;
+			background-color: #e53935;
+			border-radius: 50%;
+			margin: 0 .5rem;
+			display: inline-block;
+			animation: recordBlink 1.25s infinite;
+		}
+	}
+	
+	&.is-recording {
+		#btn-record-cancel {
+			opacity: 1;
+			visibility: visible;
+			margin-right: .5rem;
+			transition: width .1s, margin-right .1s, visibility 0s .1s, opacity .1s .1s;
+		}
+
+		#attach-file {
+			display: none;
+		}
+
+		.record-time {
+			display: block;
+		}
+	}
+
+	&:not(.is-recording) {
+		#btn-record-cancel {
+			margin-right: 0;
+			width: 0px;
+		}
+	}
+}
+
+@keyframes recordBlink {
+	0% {
+		opacity: 1;
+	}
+
+	50% {
+		opacity: .2;
+	}
+
+	100% {
+		opacity: 1;
 	}
 }
 

src/scss/partials/_chatBubble.scss

@@ -722,7 +722,7 @@
     //}
 
     .tgico-largeplay:before {
-      content: "\e929";
+      content: $tgico-largeplay;
       margin-right: -2px;
     }
 

src/scss/partials/_fonts.scss

@@ -204,7 +204,7 @@
   content: "\e938";
 }
 .tgico-largeplay:before {
-  content: "\e939";
+  content: $tgico-largeplay;
 }
 .tgico-livelocation:before {
   content: "\e93a";

src/scss/partials/_ico.scss

@@ -6,3 +6,4 @@ $tgico-checks: "\e901";
 $tgico-sending: "\e95f";
 $tgico-close: "\e91b";
 $tgico-next: "\e94a";
+$tgico-largeplay: "\e939";

webpack.prod.js

@@ -65,7 +65,8 @@ module.exports = merge(common, {
             || file.includes('.webmanifest') 
             || file.includes('.wasm')
             || file.includes('rlottie')
-            || file.includes('pako')) return;
+            || file.includes('pako')
+            || file.includes('Worker.min.js')) return;
 
           let p = path.resolve(buildDir + file);
           if(!newlyCreatedAssets[file] && ['.gz', '.js'].find(ext => file.endsWith(ext)) !== undefined) {