Working on mobile

Broken desktop

app/js/controllers.js

@@ -2321,6 +2321,8 @@ angular.module('myApp.controllers', ['myApp.i18n'])
       send: submitMessage,
       replyClear: replyClear,
       fwdsClear: fwdsClear,
+      toggleSlash: toggleSlash,
+      replyKeyboardToggle: replyKeyboardToggle,
       type: 'new'
     }
     $scope.mentions = {}
@@ -2347,9 +2349,6 @@ angular.module('myApp.controllers', ['myApp.i18n'])
 
     $scope.$on('last_message_edit', setEditLastMessage)
 
-    $scope.replyKeyboardToggle = replyKeyboardToggle
-    $scope.toggleSlash = toggleSlash
-
     $rootScope.$watch('idle.isIDLE', function (newVal) {
       if ($rootScope.idle.initial) {
         return

app/js/directives.js

@@ -1548,8 +1548,11 @@ angular.module('myApp.directives', ['myApp.filters'])
   })
 
   .directive('mySendForm', function (_, $q, $timeout, $interval, $window, $compile, $modalStack, $http, $interpolate, Storage, AppStickersManager, AppDocsManager, ErrorService, AppInlineBotsManager, FileManager, shouldFocusOnInteraction) {
+
     return {
       link: link,
+      templateUrl: templateUrl('send_form'),
+      replace: true,
       scope: {
         draftMessage: '=',
         mentions: '=',
@@ -1574,7 +1577,6 @@ angular.module('myApp.directives', ['myApp.filters'])
       var cachedStickerImages = {}
 
       var voiceRecorder = null
-      var voiceRecordSuccess = false
       var voiceRecordSupported = Recorder.isRecordingSupported()
       var voiceRecordDurationInterval = null
       var voiceRecorderPromise = null
@@ -1698,7 +1700,7 @@ angular.module('myApp.directives', ['myApp.filters'])
 
       $(voiceRecordBtn).on('contextmenu', cancelEvent)
 
-      $(voiceRecordBtn).on('touchstart', function(e) {
+      $(voiceRecordBtn).on('touchstart', function(event) {
         if ($scope.voiceRecorder.processing) {
           return
         }
@@ -1716,8 +1718,6 @@ angular.module('myApp.directives', ['myApp.filters'])
         voiceRecorder.addEventListener('start', function(e) {
           var startTime = tsNow(true)
 
-          voiceRecordSuccess = false
-
           voiceRecordDurationInterval = $interval(function() {
             $scope.voiceRecorder.duration = tsNow(true) - startTime
           }, 1000)
@@ -1735,40 +1735,67 @@ angular.module('myApp.directives', ['myApp.filters'])
 
         voiceRecorder.initStream()
 
-        $($window).one('touchend', function() {
+        var curHover = false
-          var deferred = $q.defer()
+        var curBoundaries = {}
-          voiceRecorder.addEventListener('dataAvailable', function(e) {
-            var blob = blobConstruct([e.detail], 'audio/ogg')
-            deferred.resolve(blob)
-          })
-          voiceRecorderPromise = deferred.promise
-          voiceRecorder.stop()
 
-          $interval.cancel(voiceRecordDurationInterval)
+        var updateVoiceHoverBoundaries = function () {
+          var offset = element.offset()
+          curBoundaries = {
+            top: offset.top,
+            left: offset.left,
+            width: element.outerWidth(),
+            height: element.outerHeight(),
+          }
+        }
 
-          $scope.$apply(function() {
+        var updateVoiceHoveredClass = function (event, returnHover) {
-            $scope.voiceRecorder.recording = false
+          var originalEvent = event.originalEvent || event
-          })
+          var touch = originalEvent.changedTouches && originalEvent.changedTouches[0]
-        })
+          var isHover = touch &&
-      })
+                        touch.pageX >= curBoundaries.left &&
+                        touch.pageX <= curBoundaries.left + curBoundaries.width &&
+                        touch.pageY >= curBoundaries.top &&
+                        touch.pageY <= curBoundaries.top + curBoundaries.height
 
-      $(voiceRecordBtn).on('touchend', function(e) {
+          if (curHover != isHover) {
-        voiceRecordSuccess = true
+            element.toggleClass('im_send_form_hover', isHover)
-        $timeout(function () {
+            curHover = isHover
-          if (voiceRecorderPromise) {
+          }
-            $scope.voiceRecorder.processing = true
+          return returnHover && isHover
+        }
 
-            voiceRecorderPromise.then(function(blob) {
+        updateVoiceHoverBoundaries()
+        updateVoiceHoveredClass(event)
+
+        $($window).on('touchmove', updateVoiceHoveredClass)
+
+        $($window).one('touchend', function(event) {
+          $($window).off('touchmove', updateVoiceHoveredClass)
+
+          var isHover = updateVoiceHoveredClass(event, true)
+
+          if ($scope.voiceRecorder.duration > 0 && isHover) {
+            $scope.voiceRecorder.processing = true
+            voiceRecorder.addEventListener('dataAvailable', function(e) {
+              var blob = blobConstruct([e.detail], 'audio/ogg')
               console.warn(dT(), 'got audio', blob)
+
               $scope.draftMessage.files = [blob]
               $scope.draftMessage.isMedia = true
 
               $scope.voiceRecorder.processing = false
-
-              voiceRecorderPromise = null
             })
           }
-        }, 100)
+          voiceRecorder.stop()
+          console.warn(dT(), 'stop audio')
+
+          $interval.cancel(voiceRecordDurationInterval)
+
+          $scope.$apply(function() {
+            $scope.voiceRecorder.recording = false
+            $scope.voiceRecorder.duration = 0
+          })
+        })
       })
 
       var sendOnEnter = true

app/js/locales/en-us.json

@@ -530,7 +530,8 @@
 	"im_submit_message": "Send",
 	"im_submit_edit_message": "Save",
 	"im_edit_message_title": "Edit message",
-  "im_voice_recorder_label": "Swipe left to abort",
+  "im_voice_recording_label": "Release outside this field to cancel",
+  "im_voice_processing_label": "Processing{dots}",
 	"login_sign_in": "Sign in",
 	"login_enter_number_description": "Please choose your country and enter your full phone number.",
 	"login_incorrect_number": "Incorrect phone number",

app/less/mobile.less

@@ -577,6 +577,13 @@ html {
 .audio_player_volume_slider .tg_slider_wrap {
   display: none;
 }
+.audio_player_seek_slider {
+  width: 100%;
+}
+
+.audio_player_seek_slider .tg_slider_track {
+  background: rgba(200, 200, 200, 0.6);
+}
 
 .im_message_body_media {
   .im_message_document,
@@ -1426,7 +1433,7 @@ a.im_message_fwd_author {
 
 .icon-paperclip, .icon-mic {
   display: inline-block;
-  width: 19px;
+  width: 18px;
   height: 23px;
   vertical-align: text-top;
   opacity: 0.8;
@@ -1438,19 +1445,22 @@ a.im_message_fwd_author {
 .icon-mic {
   background-position: -12px -285px;
 }
+.im_voice_recording .icon-mic {
+  background-position: -12px -705px;
+}
 
 .im_attach {
   cursor: pointer;
-  display: none;
+  display: block;
   overflow: hidden;
   position: absolute;
-  right: 34px;
+  left: 0;
   top: 0;
   margin: 0;
   width: 50px;
   height: 32px;
   padding: 3px 13px 4px 16px;
-  right: 0;
+  right: auto;
 
   &:active {
     .icon-paperclip {
@@ -1461,47 +1471,51 @@ a.im_message_fwd_author {
 }
 
 .im_record {
+  display: none;
   right: 0;
+  top: -9px;
+  width: 50px;
+  height: 50px;
+  position: absolute;
   user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
+  padding: 13px 16px 13px 16px;
 
-  .im_record_supported .im_send_form_empty & {
+  border-radius: 50px;
+  overflow: hidden;
+  background: #fff;
+  transition: background-color linear 0.2s;
+
+  .im_send_form_empty .im_record_supported & {
     display: block;
   }
 }
+.im_send_form_hover .im_voice_recording .im_record {
+  background: #bfd9ed;
+}
 
-.im_send_form_empty {
+.im_send_form_empty .im_submit {
-  .im_submit {
+  opacity: 0.4;
-    display: none;
+}
-  }
+.im_send_form_empty .im_record_supported .im_submit {
-
+  display: none;
-  .im_attach {
-    display: block;
-  }
 }
 
-.im_voice_recording, .im_processing_recording {
-  background-color: rgb(23, 23, 23);
-  color: white;
 
-  .im_voice_recorder_wrap {
+.im_voice_recording,
-    display: block;
+.im_processing_recording {
-  }
+  color: #AAA;
 
-  .im_send_field_wrap {
+  .im_voice_recorder_wrap {
-    display: none;
+    display: block;
   }
-
+  .im_send_field_wrap,
+  .im_submit,
   .im_attach {
     display: none;
   }
-
-  .composer_emoji_insert_btn {
-    display: none;
-  }
-
 }
 
 .im_processing_recording {
@@ -1527,17 +1541,12 @@ a.im_message_fwd_author {
 }
 
 .composer_emoji_insert_btn {
-  position: absolute;
+  top: 3px;
-  left: 0;
+  right: 5px;
-  top: 0;
-  margin: 0;
-  padding: 3px 13px 4px 13px;
-  width: 48px;
-  height: 32px;
 
-  &.on,
+  &.composer_emoji_insert_btn_on,
   &:active,
-  .is_1x &.on,
+  .is_1x &.composer_emoji_insert_btn_on,
   .is_1x &:active {
     .icon-emoji {
       background-position: -10px -803px;
@@ -1555,34 +1564,46 @@ a.im_message_fwd_author {
 }
 
 .im_voice_recorder_wrap {
-  margin-left: 0px;
+  height: 32px;
-  padding-left: 10px;
-  height: 38px;
   display: none;
-  line-height: 38px;
+  line-height: 32px;
-  color: white;
+  right: 50px;
+  left: 0;
+  z-index: 100;
+  padding: 0 0 0 20px;
 }
 
 .im_recorder_indicator, .im_recorder_time {
   float: left;
   vertical-align: middle;
+  color: #333;
 }
 
 .im_recorder_indicator i {
-  background-color: #F00;
+  background-color: #ff1010;
   height: 10px;
   width: 10px;
   border-radius: 50%;
   margin-right: 5px;
-  vertical-align: middle;
+  vertical-align: baseline;
   display: inline-block;
+  animation: blinker 0.5s cubic-bezier(.5, 0, 1, 1) infinite alternate;  
+}
+
+@keyframes blinker {  
+  from { opacity: 1; }
+  to { opacity: 0; }
 }
 
 .im_recorder_label {
   overflow: auto;
-  font-size: 17px;
+  font-size: 12px;
   text-align: center;
-  margin-right: 50px;
+  vertical-align: middle;
+  padding-right: 48px;
+  color: #3a6d99;
+
+  transition: color linear 0.2s;
 
   i, span {
     vertical-align: middle;
@@ -1591,6 +1612,10 @@ a.im_message_fwd_author {
   i {
     margin-right: 5px;
   }
+
+  .im_send_form_hover & {
+    color: #CCC;
+  }
 }
 
 .composer_rich_textarea {
@@ -1620,8 +1645,8 @@ a.im_message_fwd_author {
 }
 
 .composer_emoji_tooltip {
-  margin-left: 6px;
+  margin-left: -246px;
-  margin-top: -176px;
+  margin-top: -181px;
   z-index: 10000;
 }
 .composer_emoji_tooltip_tab {
@@ -1940,6 +1965,8 @@ a.media_modal_date:hover {
 }
 .composer_rich_textarea,
 .composer_textarea {
+  padding-right: 28px;
+
   .im_send_field_wrap_2ndbtn & {
     padding-right: 35px;
   }
@@ -1962,11 +1989,11 @@ a.media_modal_date:hover {
   position: relative;
 }
 .composer_command_btn {
-  right: 10px;
+  right: 35px;
   top: 6px;
 }
 .composer_keyboard_btn {
-  right: 10px;
+  right: 35px;
   top: 6px;
 }
 .im_send_keyboard_wrap {

app/partials/desktop/im.html

@@ -211,56 +211,8 @@
                   </a>
                   <a class="pull-left im_panel_own_photo" my-peer-photolink="draftMessage.isBroadcast ? historyPeer.id : ownID" img-class="im_panel_own_photo" watch="true" ng-click="openSettings()" no-open="true"></a>
 
-                  <form my-send-form draft-message="draftMessage" mentions="mentions" commands="commands" class="im_send_form" ng-class="{im_send_form_empty: !draftMessage.text.length, composer_progress_enabled: draftMessage.inlineProgress}">
+                  <div my-send-form draft-message="draftMessage" mentions="mentions" commands="commands"></div>
 
-                    <div class="im_send_form_inline_results" my-inline-results="inlineResults"></div>
-
-                    <div class="im_send_reply_wrap" ng-if="draftMessage.replyToMsgID > 0">
-                      <a class="im_send_reply_cancel" ng-mousedown="draftMessage.replyClear(true)"><i class="icon icon-reply-bar"></i><i class="icon icon-reply-bar"></i></a>
-                      <a class="im_message_reply_wrap" my-reply-message="draftMessage.replyToMsgID" watch="true" edit="{{draftMessage.type == 'edit'}}"></a>
-                    </div>
-
-                    <div class="im_send_reply_wrap im_send_fwds_wrap" ng-if="draftMessage.fwdMessages.length > 0">
-                      <a class="im_send_reply_cancel" ng-mousedown="draftMessage.fwdsClear()"><i class="icon icon-reply-bar"></i><i class="icon icon-reply-bar"></i></a>
-                      <div class="im_message_reply_wrap" my-forwarded-messages="draftMessage.fwdMessages"></div>
-                    </div>
-
-                    <div class="im_send_field_wrap hasselect" ng-class="historyState.replyKeyboard._ == 'replyKeyboardMarkup' ? 'im_send_field_wrap_2ndbtn' : ''">
-                      <a class="composer_emoji_insert_btn"><i class="icon icon-emoji"></i></a>
-                      <div class="composer_progress_icon_wrap">
-                        <div class="composer_progress_icon" my-arc-progress width="22" stroke="2.5"></div>
-                      </div>
-                      <a class="composer_command_btn" ng-show="!historyState.replyKeyboard && commands.list.length > 0 && (!draftMessage.text.length || draftMessage.text == '/')" ng-mousedown="toggleSlash($event)" ng-class="draftMessage.text[0] == '/' ? 'active' : ''"><i class="icon icon-slash"></i></a>
-                      <a class="composer_keyboard_btn" ng-show="historyState.replyKeyboard._ == 'replyKeyboardMarkup'" ng-mousedown="replyKeyboardToggle($event)" ng-class="!historyState.replyKeyboard.pFlags.hidden ? 'active' : ''"><i class="icon icon-keyboard"></i></a>
-
-                      <div class="im_send_dropbox_wrap" my-i18n="im_photos_drop_text"></div>
-                      <textarea ng-model="draftMessage.text" class="form-control im_message_field no_outline" dir="auto" ng-trim="false"></textarea>
-                    </div>
-
-                    <div class="im_send_buttons_wrap clearfix">
-                      <button type="submit" class="btn btn-md im_submit" ng-class="draftMessage.type == 'edit' ? 'im_submit_edit' : 'im_submit_send'">
-                        <span class="im_submit_send_label nocopy" my-i18n="im_submit_message"></span>
-                        <span class="im_submit_edit_label nocopy" my-i18n="im_submit_edit_message"></span>
-                      </button>
-
-                      <div class="im_attach pull-left">
-                        <input type="file" class="im_attach_input" size="28" multiple="multiple" title="{{'im_attach_file_title' | i18n}}" />
-                        <i class="icon icon-paperclip"></i>
-                      </div>
-
-                      <div class="im_media_attach pull-left">
-                        <input type="file" class="im_media_attach_input" size="28" multiple="multiple" accept="image/*, video/*, audio/*" title="{{'im_media_attach_title' | i18n}}"/>
-                        <i class="icon icon-camera"></i>
-                      </div>
-
-                      <div class="composer_emoji_panel"></div>
-                    </div>
-
-                    <div class="im_send_keyboard_wrap" ng-if="historyState.replyKeyboard._ == 'replyKeyboardMarkup'" ng-show="!historyState.replyKeyboard.pFlags.hidden">
-                      <div my-reply-markup="historyState.replyKeyboard"></div>
-                    </div>
-
-                  </form>
                 </div>
 
               </div>

app/partials/desktop/send_form.html

@@ -0,0 +1,50 @@
+<form class="im_send_form" ng-class="{im_send_form_empty: !draftMessage.text.length, composer_progress_enabled: draftMessage.inlineProgress}">
+
+  <div class="im_send_form_inline_results" my-inline-results="inlineResults"></div>
+
+  <div class="im_send_reply_wrap" ng-if="draftMessage.replyToMsgID > 0">
+    <a class="im_send_reply_cancel" ng-mousedown="draftMessage.replyClear(true)"><i class="icon icon-reply-bar"></i><i class="icon icon-reply-bar"></i></a>
+    <a class="im_message_reply_wrap" my-reply-message="draftMessage.replyToMsgID" watch="true" edit="{{draftMessage.type == 'edit'}}"></a>
+  </div>
+
+  <div class="im_send_reply_wrap im_send_fwds_wrap" ng-if="draftMessage.fwdMessages.length > 0">
+    <a class="im_send_reply_cancel" ng-mousedown="draftMessage.fwdsClear()"><i class="icon icon-reply-bar"></i><i class="icon icon-reply-bar"></i></a>
+    <div class="im_message_reply_wrap" my-forwarded-messages="draftMessage.fwdMessages"></div>
+  </div>
+
+  <div class="im_send_field_wrap hasselect" ng-class="historyState.replyKeyboard._ == 'replyKeyboardMarkup' ? 'im_send_field_wrap_2ndbtn' : ''">
+    <a class="composer_emoji_insert_btn"><i class="icon icon-emoji"></i></a>
+    <div class="composer_progress_icon_wrap">
+      <div class="composer_progress_icon" my-arc-progress width="22" stroke="2.5"></div>
+    </div>
+    <a class="composer_command_btn" ng-show="!historyState.replyKeyboard && commands.list.length > 0 && (!draftMessage.text.length || draftMessage.text == '/')" ng-mousedown="draftMessage.toggleSlash($event)" ng-class="draftMessage.text[0] == '/' ? 'active' : ''"><i class="icon icon-slash"></i></a>
+    <a class="composer_keyboard_btn" ng-show="historyState.replyKeyboard._ == 'replyKeyboardMarkup'" ng-mousedown="draftMessage.replyKeyboardToggle($event)" ng-class="!historyState.replyKeyboard.pFlags.hidden ? 'active' : ''"><i class="icon icon-keyboard"></i></a>
+
+    <div class="im_send_dropbox_wrap" my-i18n="im_photos_drop_text"></div>
+    <textarea ng-model="draftMessage.text" class="form-control im_message_field no_outline" dir="auto" ng-trim="false"></textarea>
+  </div>
+
+  <div class="im_send_buttons_wrap clearfix">
+    <button type="submit" class="btn btn-md im_submit" ng-class="draftMessage.type == 'edit' ? 'im_submit_edit' : 'im_submit_send'">
+      <span class="im_submit_send_label nocopy" my-i18n="im_submit_message"></span>
+      <span class="im_submit_edit_label nocopy" my-i18n="im_submit_edit_message"></span>
+    </button>
+
+    <div class="im_attach pull-left">
+      <input type="file" class="im_attach_input" size="28" multiple="multiple" title="{{'im_attach_file_title' | i18n}}" />
+      <i class="icon icon-paperclip"></i>
+    </div>
+
+    <div class="im_media_attach pull-left">
+      <input type="file" class="im_media_attach_input" size="28" multiple="multiple" accept="image/*, video/*, audio/*" title="{{'im_media_attach_title' | i18n}}"/>
+      <i class="icon icon-camera"></i>
+    </div>
+
+    <div class="composer_emoji_panel"></div>
+  </div>
+
+  <div class="im_send_keyboard_wrap" ng-if="historyState.replyKeyboard._ == 'replyKeyboardMarkup'" ng-show="!historyState.replyKeyboard.pFlags.hidden">
+    <div my-reply-markup="historyState.replyKeyboard"></div>
+  </div>
+
+</form>

app/partials/mobile/im.html

@@ -131,65 +131,12 @@
               </div>
             </div>
 
-            <div class="im_send_panel_wrap" ng-show="!historyState.actions()" ng-class="{im_voice_recording: voiceRecorder.recording, im_processing_recording: voiceRecorder.processing}">
+            <div class="im_send_panel_wrap" ng-show="!historyState.actions()">
 
               <div class="im_send_form_wrap1">
 
                 <div class="im_send_form_wrap clearfix" ng-controller="AppImSendController">
-                  <form my-send-form draft-message="draftMessage" mentions="mentions" commands="commands" class="im_send_form" ng-class="{im_send_form_empty: !draftMessage.text.length && draftMessage.type != 'edit', composer_progress_enabled: draftMessage.inlineProgress}">
+                  <div my-send-form draft-message="draftMessage" mentions="mentions" commands="commands"></div>
-
-                    <div class="im_send_reply_wrap" ng-if="draftMessage.replyToMsgID > 0">
-                      <a class="im_send_reply_cancel" ng-mousedown="draftMessage.replyClear(true)"><i class="icon icon-reply-bar"></i><i class="icon icon-reply-bar"></i></a>
-                      <a class="im_message_reply_wrap" my-reply-message="draftMessage.replyToMsgID" watch="true" edit="{{draftMessage.type == 'edit'}}"></a>
-                    </div>
-
-                    <div class="im_send_reply_wrap im_send_fwds_wrap" ng-if="draftMessage.fwdMessages.length > 0">
-                      <a class="im_send_reply_cancel" ng-mousedown="draftMessage.fwdsClear()"><i class="icon icon-reply-bar"></i><i class="icon icon-reply-bar"></i></a>
-                      <div class="im_message_reply_wrap" my-forwarded-messages="draftMessage.fwdMessages"></div>
-                    </div>
-
-                    <div class="im_send_field_panel">
-                      <div class="im_send_field_wrap" ng-class="historyState.replyKeyboard._ == 'replyKeyboardMarkup' ? 'im_send_field_wrap_2ndbtn' : ''">
-                        <a class="composer_command_btn" ng-show="!historyState.replyKeyboard && commands.list.length > 0 && (!draftMessage.text.length || draftMessage.text[0] == '/')" ng-mousedown="toggleSlash($event)" ng-class="draftMessage.text[0] == '/' ? 'active' : ''"><i class="icon icon-slash"></i></a>
-                        <a class="composer_keyboard_btn" ng-show="historyState.replyKeyboard._ == 'replyKeyboardMarkup'" ng-mousedown="replyKeyboardToggle($event)" ng-class="!historyState.replyKeyboard.pFlags.hidden ? 'active' : ''"><i class="icon icon-keyboard"></i></a>
-
-                        <div class="composer_progress_icon_wrap">
-                          <div class="composer_progress_icon" my-arc-progress width="22" stroke="2.5"></div>
-                        </div>
-
-                        <div class="im_send_dropbox_wrap" my-i18n="im_photos_drop_text"></div>
-                        <textarea ng-model="draftMessage.text" class="form-control im_message_field no_outline" dir="auto" ng-trim="false"></textarea>
-                      </div>
-
-                      <div class="im_voice_recorder_wrap">
-                          <div class="im_recorder_indicator"><i></i></div>
-                          <div class="im_recorder_time" ng-bind="voiceRecorder.duration | duration"></div>
-                          <div class="im_recorder_label">
-                              <i class="icon icon-back"></i>
-                              <span my-i18n="im_voice_recorder_label"></span>
-                          </div>
-                      </div>
-
-                      <div class="im_attach pull-right">
-                        <input type="file" class="im_attach_input" size="28" multiple="true" title="{{'im_media_attach_title' | i18n}}" />
-                        <i class="icon icon-paperclip"></i>
-                      </div>
-
-                      <div class="im_record pull-right">
-                        <i class="icon icon-mic"></i>
-                      </div>
-
-                      <a class="composer_emoji_insert_btn pull-right"><i class="icon icon-emoji"></i></a>
-
-                      <button type="submit" class="btn btn-success im_submit"></button>
-                    </div>
-
-
-                    <div class="im_send_keyboard_wrap" ng-if="historyState.replyKeyboard._ == 'replyKeyboardMarkup'" ng-show="!historyState.replyKeyboard.pFlags.hidden">
-                      <div my-reply-markup="historyState.replyKeyboard"></div>
-                    </div>
-
-                  </form>
                 </div>
 
               </div>

app/partials/mobile/send_form.html

@@ -0,0 +1,55 @@
+<form class="im_send_form" ng-class="{im_send_form_empty: !draftMessage.text.length && draftMessage.type != 'edit', composer_progress_enabled: draftMessage.inlineProgress, im_voice_recording: voiceRecorder.recording, im_processing_recording: voiceRecorder.processing}">
+
+  <div class="im_send_reply_wrap" ng-if="draftMessage.replyToMsgID > 0">
+    <a class="im_send_reply_cancel" ng-mousedown="draftMessage.replyClear(true)"><i class="icon icon-reply-bar"></i><i class="icon icon-reply-bar"></i></a>
+    <a class="im_message_reply_wrap" my-reply-message="draftMessage.replyToMsgID" watch="true" edit="{{draftMessage.type == 'edit'}}"></a>
+  </div>
+
+  <div class="im_send_reply_wrap im_send_fwds_wrap" ng-if="draftMessage.fwdMessages.length > 0">
+    <a class="im_send_reply_cancel" ng-mousedown="draftMessage.fwdsClear()"><i class="icon icon-reply-bar"></i><i class="icon icon-reply-bar"></i></a>
+    <div class="im_message_reply_wrap" my-forwarded-messages="draftMessage.fwdMessages"></div>
+  </div>
+
+  <div class="im_send_field_panel">
+
+    <div class="im_voice_recorder_wrap">
+        <div class="im_recorder_indicator"><i></i></div>
+        <div class="im_recorder_time" ng-bind="voiceRecorder.duration | duration"></div>
+        <div class="im_recorder_label" ng-switch="voiceRecorder.processing" my-i18n>
+          <span ng-switch-when="true" my-i18n-format="im_voice_processing_label"></span>
+          <span ng-switch-default my-i18n-format="im_voice_recording_label"></span>
+          <my-i18n-param name="dots"></my-i18n-param>
+        </div>
+    </div>
+
+    <div class="im_send_field_wrap" ng-class="historyState.replyKeyboard._ == 'replyKeyboardMarkup' ? 'im_send_field_wrap_2ndbtn' : ''">
+      <a class="composer_emoji_insert_btn pull-right"><i class="icon icon-emoji"></i></a>
+      <a class="composer_command_btn" ng-show="!historyState.replyKeyboard && commands.list.length > 0 && (!draftMessage.text.length || draftMessage.text[0] == '/')" ng-mousedown="draftMessage.toggleSlash($event)" ng-class="draftMessage.text[0] == '/' ? 'active' : ''"><i class="icon icon-slash"></i></a>
+      <a class="composer_keyboard_btn" ng-show="historyState.replyKeyboard._ == 'replyKeyboardMarkup'" ng-mousedown="draftMessage.replyKeyboardToggle($event)" ng-class="!historyState.replyKeyboard.pFlags.hidden ? 'active' : ''"><i class="icon icon-keyboard"></i></a>
+
+      <div class="composer_progress_icon_wrap">
+        <div class="composer_progress_icon" my-arc-progress width="22" stroke="2.5"></div>
+      </div>
+
+      <div class="im_send_dropbox_wrap" my-i18n="im_photos_drop_text"></div>
+      <textarea ng-model="draftMessage.text" class="form-control im_message_field no_outline" dir="auto" ng-trim="false"></textarea>
+    </div>
+
+    <div class="im_attach pull-left">
+      <input type="file" class="im_attach_input" size="28" multiple="true" title="{{'im_media_attach_title' | i18n}}" />
+      <i class="icon icon-paperclip"></i>
+    </div>
+
+    <div class="im_record pull-right">
+      <i class="icon icon-mic"></i>
+    </div>
+
+    <button type="submit" class="btn btn-success im_submit"></button>
+  </div>
+
+
+  <div class="im_send_keyboard_wrap" ng-if="historyState.replyKeyboard._ == 'replyKeyboardMarkup'" ng-show="!historyState.replyKeyboard.pFlags.hidden">
+    <div my-reply-markup="historyState.replyKeyboard"></div>
+  </div>
+
+</form>

app/vendor/recorderjs/recorder.js

@@ -185,6 +185,9 @@ var root = (typeof self === 'object' && self.self === self && self) || (typeof g
         this.clearStream();
       }
 
+      this.audioContext.close();
+      this.audioContext = null;
+
       this.encoder.postMessage({ command: "done" });
     }
   };