Make it work with recordjs

File is now encoded to Opus, like in other apps

Author: zhukov

app/index.html

@@ -78,6 +78,8 @@
   <script type="text/javascript" src="vendor/ogv.js/ogv-decoder-audio-vorbis.js"></script>
   <script type="text/javascript" src="vendor/ogv.js/ogv-support.js"></script>
 
+  <script type="text/javascript" src="vendor/recorderjs/recorder.js"></script>
+
   <script type="text/javascript" src="js/lib/utils.js"></script>
   <script type="text/javascript" src="js/lib/bin_utils.js"></script>
   <script type="text/javascript" src="js/lib/tl_utils.js"></script>

app/js/controllers.js

@@ -518,8 +518,6 @@ angular.module('myApp.controllers', ['myApp.i18n'])
       skipped: false
     }
 
-    $scope.voiceRecorder = { time : '', recording : null, processing : false };
-
     $scope.openSettings = function () {
       $modal.open({
         templateUrl: templateUrl('settings_modal'),

app/js/directives.js

@@ -1547,7 +1547,7 @@ angular.module('myApp.directives', ['myApp.filters'])
     }
   })
 
-  .directive('mySendForm', function (_, $q, $timeout, $compile, $modalStack, $http, $interpolate, Storage, AppStickersManager, AppDocsManager, ErrorService, AppInlineBotsManager, FileManager, shouldFocusOnInteraction) {
+  .directive('mySendForm', function (_, $q, $timeout, $interval, $window, $compile, $modalStack, $http, $interpolate, Storage, AppStickersManager, AppDocsManager, ErrorService, AppInlineBotsManager, FileManager, shouldFocusOnInteraction) {
     return {
       link: link,
       scope: {
@@ -1564,17 +1564,25 @@ angular.module('myApp.directives', ['myApp.filters'])
       var fileSelects = $('input', element)
       var dropbox = $('.im_send_dropbox_wrap', element)[0]
       var messageFieldWrap = $('.im_send_field_wrap', element)[0]
+      var sendFieldPanel = $('.im_send_field_panel', element)[0]
       var dragStarted
       var dragTimeout
       var submitBtn = $('.im_submit', element)[0]
-      var voiceRecord = $('.im_record', element);
+      var voiceRecordBtn = $('.im_record', element)[0]
 
       var stickerImageCompiled = $compile('<a class="composer_sticker_btn" data-sticker="{{::document.id}}" my-load-sticker document="document" thumb="true" img-class="composer_sticker_image"></a>')
       var cachedStickerImages = {}
 
-      var audioRecorder = null;
-      var audioPromise = null;
-      var audioStream = null;
+      var voiceRecorder = null
+      var voiceRecordSuccess = false
+      var voiceRecordSupported = Recorder.isRecordingSupported()
+      var voiceRecordDurationInterval = null
+      var voiceRecorderPromise = null
+      if (voiceRecordSupported) {
+        $(sendFieldPanel).addClass('im_record_supported')
+      }
+
+      $scope.voiceRecorder = {duration: 0, recording: false, processing: false}
 
       var emojiTooltip = new EmojiTooltip(emojiButton, {
         getStickers: function (callback) {
@@ -1688,82 +1696,82 @@ angular.module('myApp.directives', ['myApp.filters'])
         })
       })
 
-      navigator.getUserMedia = ( navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
-
-      voiceRecord.on('touchstart', function(e) {
-        if ($scope.$parent.$parent.voiceRecorder.processing) { return; }
+      $(voiceRecordBtn).on('contextmenu', cancelEvent)
 
-        navigator.getUserMedia({audio : true}, function(stream){
-          var start = Date.now();
-          var touch = null;
-
-          audioPromise = null;
-          audioStream = stream;
-          audioRecorder = new MediaRecorder(stream);
-
-          var interval = setInterval(function(){
-            var time = (new Date());
+      $(voiceRecordBtn).on('touchstart', function(e) {
+        if ($scope.voiceRecorder.processing) {
+          return
+        }
 
-            time.setTime(Date.now() - start);
+        voiceRecorderPromise = null
 
-            $scope.$apply(function(){
-              $scope.$parent.$parent.voiceRecorder.time = (time.getMinutes() < 10 ? '0' : '') + time.getMinutes() + ':' + (time.getSeconds() < 10 ? '0' : '') + time.getSeconds();
-            });
-          }, 1000);
+        voiceRecorder = new Recorder({
+          monitorGain: 0,
+          numberOfChannels: 1,
+          bitRate: 64000,
+          encoderSampleRate: 48000,
+          encoderPath: 'vendor/recorderjs/encoder_worker.js'
+        })
 
-          $scope.$apply(function(){
-            $scope.$parent.$parent.voiceRecorder.time = '00:00';
-            $scope.$parent.$parent.voiceRecorder.recording = interval;
-          });
+        voiceRecorder.addEventListener('start', function(e) {
+          var startTime = tsNow(true)
 
-          audioRecorder.start();
+          voiceRecordSuccess = false
 
-          console.log('recording now!');
+          voiceRecordDurationInterval = $interval(function() {
+            $scope.voiceRecorder.duration = tsNow(true) - startTime
+          }, 1000)
 
-        }, function(e){
-          console.error(e);
-        });
-      });
+          $scope.$apply(function() {
+            $scope.voiceRecorder.recording = true
+          })
 
-      voiceRecord.on('click', function(){
-        if (audioPromise) {
-          $scope.$parent.$parent.voiceRecorder.processing = true;
+          console.warn(dT(), 'recording now!')
+        })
 
-          audioPromise.then(function(e) {
-            var blob = e.data;
+        voiceRecorder.addEventListener('streamReady', function(e) {
+          voiceRecorder.start()
+        })
 
-            console.log(blob);
-            $scope.draftMessage.files = [blob];
-            $scope.draftMessage.isMedia = true;
+        voiceRecorder.initStream()
 
-            $scope.$parent.$parent.voiceRecorder.processing = false;
+        $($window).one('touchend', function() {
+          var deferred = $q.defer()
+          voiceRecorder.addEventListener('dataAvailable', function(e) {
+            var blob = blobConstruct([e.detail], 'audio/ogg')
+            deferred.resolve(blob)
+          })
+          voiceRecorderPromise = deferred.promise
+          voiceRecorder.stop()
 
-            audioPromise = null;
-          });
-        }
-      });
+          $interval.cancel(voiceRecordDurationInterval)
 
-      $($window).on('touchend', function(){
-        if (audioStream && audioRecorder) {
-          audioPromise = new Promise(function(resolve) {
-            audioRecorder.ondataavailable = resolve;
-          });
+          $scope.$apply(function() {
+            $scope.voiceRecorder.recording = false
+          })
+        })
+      })
 
-          audioRecorder.stop();
-          audioStream.stop();
+      $(voiceRecordBtn).on('touchend', function(e) {
+        voiceRecordSuccess = true
+        $timeout(function () {
+          if (voiceRecorderPromise) {
+            $scope.voiceRecorder.processing = true
 
-          audioRecorder = null;
-          audioStream   = null;
+            voiceRecorderPromise.then(function(blob) {
+              console.warn(dT(), 'got audio', blob)
+              $scope.draftMessage.files = [blob]
+              $scope.draftMessage.isMedia = true
 
-          clearInterval($scope.$parent.$parent.voiceRecorder.recording);
+              $scope.voiceRecorder.processing = false
 
-          $scope.$apply(function(){
-            $scope.$parent.$parent.voiceRecorder.recording = null;
-          });
-        }
-      });
+              voiceRecorderPromise = null
+            })
+          }
+        }, 100)
+      })
 
-      var sendOnEnter = true;
+      var sendOnEnter = true
       function updateSendSettings () {
         Storage.get('send_ctrlenter').then(function (sendOnCtrl) {
           sendOnEnter = !sendOnCtrl

app/less/mobile.less

@@ -1431,7 +1431,7 @@ a.im_message_fwd_author {
   background-position: -12px -285px;
 }
 
-.im_attach, .im_record {
+.im_attach {
   cursor: pointer;
   display: none;
   overflow: hidden;
@@ -1442,6 +1442,7 @@ a.im_message_fwd_author {
   width: 50px;
   height: 32px;
   padding: 3px 13px 4px 16px;
+  right: 0;
 
   &:active {
     .icon-paperclip {
@@ -1451,29 +1452,15 @@ a.im_message_fwd_author {
   }
 }
 
-.non_ffos {
-  .im_attach {
-    right: 0;
-  }
-}
-
 .im_record {
-    right: 0;
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-    -ms-user-select: none;
-}
-
-.ffos {
-  .im_send_form_empty {
-    .im_send_field_wrap {
-      margin-right: 85px;
-    }
+  right: 0;
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
 
-    .im_record {
-      display: block;
-    }
+  .im_record_supported .im_send_form_empty & {
+    display: block;
   }
 }
 

app/partials/mobile/im.html

@@ -163,7 +163,7 @@ <h5 my-i18n="im_messages"></h5>
 
                       <div class="im_voice_recorder_wrap">
                           <div class="im_recorder_indicator"><i></i></div>
-                          <div class="im_recorder_time">{{voiceRecorder.time}}</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>