some changes

public/index_template.html

@@ -542,9 +542,13 @@
                 <div class="btn-menu-item menu-poll tgico-poll rp">Poll</div>
               </div>
             </button>
+            <div class="record-time">
+              0:02,43
+            </div>
             <input type="file" id="input-file" style="display: none;" multiple />
           </div>
         </div>
+        <button class="btn-circle z-depth-1 btn-icon tgico-delete danger" id="btn-record-cancel"></button>
         <button class="btn-circle z-depth-1 btn-icon tgico-microphone2" id="btn-send"></button>
       </div>
     </div>

public/waveWorker.min.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.WaveWorker=t():e.WaveWorker=t()}("undefined"!=typeof self?self:this,(function(){return function(e){var t={};function r(n){if(t[n])return t[n].exports;var s=t[n]={i:n,l:!1,exports:{}};return e[n].call(s.exports,s,s.exports,r),s.l=!0,s.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var s in e)r.d(n,s,function(t){return e[t]}.bind(null,s));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,r){"use strict";(function(t){var r;t.onmessage=function(e){switch(e.data.command){case"encode":r&&r.record(e.data.buffers);break;case"done":r&&(r.requestData(),r=null);break;case"close":t.close();break;case"init":r=new n(e.data),t.postMessage({message:"ready"})}};var n=function(e){if(!(e=Object.assign({wavBitDepth:16},e)).wavSampleRate)throw new Error("wavSampleRate value is required to record. NOTE: Audio is not resampled!");if(-1===[8,16,24,32].indexOf(e.wavBitDepth))throw new Error("Only 8, 16, 24 and 32 bits per sample are supported");this.bitDepth=e.wavBitDepth,this.sampleRate=e.wavSampleRate,this.recordedBuffers=[],this.bytesPerSample=this.bitDepth/8};n.prototype.record=function(e){this.numberOfChannels=this.numberOfChannels||e.length;for(var t=e[0].length,r=new Uint8Array(t*this.numberOfChannels*this.bytesPerSample),n=0;n<t;n++)for(var s=0;s<this.numberOfChannels;s++){var a=(n*this.numberOfChannels+s)*this.bytesPerSample,i=Math.max(-1,Math.min(1,e[s][n]));switch(this.bytesPerSample){case 4:i=2147483647.5*i-.5,r[a]=i,r[a+1]=i>>8,r[a+2]=i>>16,r[a+3]=i>>24;break;case 3:i=8388607.5*i-.5,r[a]=i,r[a+1]=i>>8,r[a+2]=i>>16;break;case 2:i=32767.5*i-.5,r[a]=i,r[a+1]=i>>8;break;case 1:r[a]=127.5*(i+1);break;default:throw new Error("Only 8, 16, 24 and 32 bits per sample are supported")}}this.recordedBuffers.push(r)},n.prototype.requestData=function(){var e=this.recordedBuffers[0].length,r=this.recordedBuffers.length*e,n=new Uint8Array(44+r),s=new DataView(n.buffer);s.setUint32(0,1380533830,!1),s.setUint32(4,36+r,!0),s.setUint32(8,1463899717,!1),s.setUint32(12,1718449184,!1),s.setUint32(16,16,!0),s.setUint16(20,1,!0),s.setUint16(22,this.numberOfChannels,!0),s.setUint32(24,this.sampleRate,!0),s.setUint32(28,this.sampleRate*this.bytesPerSample*this.numberOfChannels,!0),s.setUint16(32,this.bytesPerSample*this.numberOfChannels,!0),s.setUint16(34,this.bitDepth,!0),s.setUint32(36,1684108385,!1),s.setUint32(40,r,!0);for(var a=0;a<this.recordedBuffers.length;a++)n.set(this.recordedBuffers[a],a*e+44);t.postMessage({message:"page",page:n},[n.buffer]),t.postMessage({message:"done"})},e.exports=n}).call(this,r(1))},function(e,t){var r;r=function(){return this}();try{r=r||new Function("return this")()}catch(e){"object"==typeof window&&(r=window)}e.exports=r}])}));

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')) {
-        this.sendMessage();
+        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

@@ -101,22 +101,83 @@ $time-background: rgba(0, 0, 0, .35);
 		color: #a2acb4;
 		display: block; /* For Firefox By Ariel Flesler */
 	}
+
+	#btn-record-cancel {
+		visibility: hidden;
+		opacity: 0;
+		transition: width .1s .1s, margin-right .1s .1s, visibility 0s .1s, opacity .1s 0s;
+		padding: 0;
+	}
 	
-	.btn-circle {
+	#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 {
 			color: $color-blue;
 		}
 	}
+
+	#btn-record-cancel, #btn-send {
+		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;
+		}
+	}
 	
-	.os-scrollbar-handle {
-		background: rgba(0, 0, 0, 0.2);
+	&.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) {