voice recorder proposal for #190

app/js/controllers.js

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

app/js/directives.js

@@ -1449,9 +1449,12 @@ angular.module('myApp.directives', ['myApp.filters'])
       var messageFieldWrap = $('.im_send_field_wrap', element)[0];
       var dragStarted, dragTimeout;
       var submitBtn = $('.im_submit', element)[0];
+      var voiceRecord = $('.im_record', element);
 
       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 audioStream = null;
 
       var emojiTooltip = new EmojiTooltip(emojiButton, {
         getStickers: function (callback) {
@@ -1552,6 +1555,69 @@ angular.module('myApp.directives', ['myApp.filters'])
         });
       });
 
+      if (Config.Navigator.ffos) {
+
+        navigator.getUserMedia = ( navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
+
+        voiceRecord.on('touchstart', function(e) {
+          navigator.getUserMedia({audio : true}, function(stream){
+            var start = Date.now();
+            var touch = null;
+
+            audioStream = stream;
+            audioRecorder = new MediaRecorder(stream);
+
+            var interval = setInterval(function(){
+              var time = (new Date());
+
+              time.setTime(Date.now() - start);
+
+              $scope.$apply(function(){
+                $scope.$parent.$parent.voiceRecorder.time = (time.getMinutes() < 10 ? '0' : '') + time.getMinutes() + ':' + (time.getSeconds() < 10 ? '0' : '') + time.getSeconds();
+              });
+            }, 1000);
+
+            $scope.$apply(function(){
+              $scope.$parent.$parent.voiceRecorder.time = '00:00';
+              $scope.$parent.$parent.voiceRecorder.recording = interval;
+            });
+
+            audioRecorder.start();
+
+            console.log('recording now!');
+
+          }, function(e){
+            console.error(e);
+          });
+        });
+
+        voiceRecord.on('click', function(){
+          if (audioRecorder) {
+            audioRecorder.ondataavailable = function(e){
+              var blob = e.data;
+
+              console.log(blob);
+              $scope.draftMessage.files = [blob];
+              $scope.draftMessage.isMedia = true;
+            }
+          }
+        });
+
+        voiceRecord.on('touchend', function(){
+          if (audioRecorder) {
+            audioRecorder.stop();
+            audioStream.stop();
+
+            clearInterval($scope.$parent.$parent.voiceRecorder.recording);
+
+            $scope.$apply(function(){
+              $scope.$parent.$parent.voiceRecorder.recording = null;
+            });
+          }
+        });
+
+      }
+
       var sendOnEnter = true;
       function updateSendSettings () {
         Storage.get('send_ctrlenter').then(function (sendOnCtrl) {

app/js/init.js

@@ -65,7 +65,8 @@
 (function initApplication () {
   var classes = [
     Config.Navigator.osX ? 'osx' : 'non_osx',
-    Config.Navigator.retina ? 'is_2x' : 'is_1x'
+    Config.Navigator.retina ? 'is_2x' : 'is_1x',
+    Config.Navigator.ffos ? 'ffos' : 'non_ffos'
   ];
   if (Config.Modes.ios_standalone) {
     classes.push('ios_standalone');

app/js/locales/en-us.json

@@ -470,6 +470,7 @@
 	"im_attach_file_title": "Send file",
 	"im_emoji_btn_title": "Insert emoticon",
 	"im_submit_message": "Send",
+    "im_voice_recorder_label": "Swipe left to abort",
 
 	"login_sign_in": "Sign in",
 	"login_enter_number_description": "Please choose your country and enter your full phone number.",

app/less/mobile.less

@@ -1368,7 +1368,7 @@ a.im_message_fwd_author {
   }
 }
 
-.icon-paperclip {
+.icon-paperclip, .icon-mic {
   display: inline-block;
   width: 19px;
   height: 23px;
@@ -1379,12 +1379,16 @@ a.im_message_fwd_author {
   background-position: -12px -68px;
 }
 
-.im_attach {
+.icon-mic {
+  background-position: -12px -285px;
+}
+
+.im_attach, .im_record {
   cursor: pointer;
   display: none;
   overflow: hidden;
   position: absolute;
-  right: 0;
+  right: 34px;
   top: 0;
   margin: 0;
   width: 50px;
@@ -1399,6 +1403,32 @@ 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;
+    }
+
+    .im_record {
+      display: block;
+    }
+  }
+}
+
 .im_send_form_empty {
   .im_submit {
     display: none;
@@ -1409,6 +1439,28 @@ a.im_message_fwd_author {
   }
 }
 
+.im_voice_recording {
+  background-color: rgb(23, 23, 23);
+  color: white;
+
+  .im_voice_recorder_wrap {
+    display: block;
+  }
+
+  .im_send_field_wrap {
+    display: none;
+  }
+
+  .im_attach {
+    display: none;
+  }
+
+  .composer_emoji_insert_btn {
+    display: none;
+  }
+
+}
+
 .icon-emoji {
   display: inline-block;
   width: 22px;
@@ -1449,6 +1501,45 @@ a.im_message_fwd_author {
   }
 }
 
+.im_voice_recorder_wrap {
+  margin-left: 0px;
+  padding-left: 10px;
+  height: 38px;
+  display: none;
+  line-height: 38px;
+  color: white;
+}
+
+.im_recorder_indicator, .im_recorder_time {
+  float: left;
+  vertical-align: middle;
+}
+
+.im_recorder_indicator i {
+  background-color: #F00;
+  height: 10px;
+  width: 10px;
+  border-radius: 50%;
+  margin-right: 5px;
+  vertical-align: middle;
+  display: inline-block;
+}
+
+.im_recorder_label {
+  overflow: auto;
+  font-size: 17px;
+  text-align: center;
+  margin-right: 50px;
+
+  i, span {
+    vertical-align: middle;
+  }
+
+  i {
+    margin-right: 5px;
+  }
+}
+
 .composer_rich_textarea {
   min-height: 18px;
   max-height: 136px;
@@ -1810,4 +1901,4 @@ a.media_modal_date:hover {
 }
 .im_send_keyboard_wrap {
   padding: 0 5px;
-}
+}

app/manifest.webapp

@@ -44,6 +44,9 @@
     "device-storage:videos": {
     "description": "Required for videos download",
       "access": "createonly"
+    },
+    "audio-capture" : {
+    "description" : "Required to record voice messages"
     }
   },
   "activities": {

app/partials/mobile/im.html

@@ -130,7 +130,7 @@
               </div>
             </div>
 
-            <div class="im_send_panel_wrap" ng-show="!historyState.actions()">
+            <div class="im_send_panel_wrap" ng-show="!historyState.actions()" ng-class="{im_voice_recording: voiceRecorder.recording}">
 
               <div class="im_send_form_wrap1">
 
@@ -156,11 +156,24 @@
                         <textarea ng-model="draftMessage.text" class="form-control im_message_field no_outline" dir="auto"></textarea>
                       </div>
 
+                      <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_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>
@@ -187,4 +200,4 @@
 
   </div>
 
-</div>
+</div>