merged conflicts

8 years ago · b6fa42d8ae
6 changed files with 208 additions and 10 deletions
--- a/app/js/controllers.js
+++ b/app/js/controllers.js
@ -518,6 +518,8 @@ angular.module('myApp.controllers', ['myApp.i18n'])
      skipped: false
    }

+    $scope.voiceRecorder = { time : '', recording : null, processing : false };
+
    $scope.openSettings = function () {
      $modal.open({
        templateUrl: templateUrl('settings_modal'),
--- a/app/js/directives.js
+++ b/app/js/directives.js
@ -1567,10 +1567,15 @@ angular.module('myApp.directives', ['myApp.filters'])
      var dragStarted
      var 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 audioPromise = null;
+      var audioStream = null;
+
      var emojiTooltip = new EmojiTooltip(emojiButton, {
        getStickers: function (callback) {
          AppStickersManager.getStickers().then(callback)
@ -1683,7 +1688,82 @@ angular.module('myApp.directives', ['myApp.filters'])
        })
      })

-      var sendOnEnter = true
+      navigator.getUserMedia = ( navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
+
+      voiceRecord.on('touchstart', function(e) {
+        if ($scope.$parent.$parent.voiceRecorder.processing) { return; }
+
+        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());
+
+            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 (audioPromise) {
+          $scope.$parent.$parent.voiceRecorder.processing = true;
+
+          audioPromise.then(function(e) {
+            var blob = e.data;
+
+            console.log(blob);
+            $scope.draftMessage.files = [blob];
+            $scope.draftMessage.isMedia = true;
+
+            $scope.$parent.$parent.voiceRecorder.processing = false;
+
+            audioPromise = null;
+          });
+        }
+      });
+
+      $($window).on('touchend', function(){
+        if (audioStream && audioRecorder) {
+          audioPromise = new Promise(function(resolve) {
+            audioRecorder.ondataavailable = resolve;
+          });
+
+          audioRecorder.stop();
+          audioStream.stop();
+
+          audioRecorder = null;
+          audioStream   = null;
+
+          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) {
          sendOnEnter = !sendOnCtrl
@ -3900,4 +3980,4 @@ angular.module('myApp.directives', ['myApp.filters'])
    return {
      link: link
    }
-  })
+  })
--- a/app/js/locales/en-us.json
+++ b/app/js/locales/en-us.json
@ -528,7 +528,7 @@
 	"im_submit_message": "Send",
 	"im_submit_edit_message": "Save",
 	"im_edit_message_title": "Edit message",
-
+  "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.",
 	"login_incorrect_number": "Incorrect phone number",
--- a/app/less/mobile.less
+++ b/app/less/mobile.less
@ -1416,7 +1416,7 @@ a.im_message_fwd_author {
  }
 }

-.icon-paperclip {
+.icon-paperclip, .icon-mic {
  display: inline-block;
  width: 19px;
  height: 23px;
@ -1427,12 +1427,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;
@ -1447,6 +1451,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;
@ -1457,6 +1487,38 @@ a.im_message_fwd_author {
  }
 }

+.im_voice_recording, .im_processing_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;
+  }
+
+}
+
+.im_processing_recording {
+  .im_recorder_indicator i {
+    background-color: green;
+  }
+
+  .im_record {
+    display: none;
+  }
+}
+
 .icon-emoji {
  display: inline-block;
  width: 22px;
@ -1497,6 +1559,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;
@ -1876,8 +1977,7 @@ a.media_modal_date:hover {
 .im_send_keyboard_wrap {
  padding: 0 5px;
 }
-
 .composer_progress_icon_wrap {
  right: 6px;
  top: 4px;
-}
+}
--- a/app/manifest.webapp
+++ b/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": {
--- a/app/partials/mobile/im.html
+++ b/app/partials/mobile/im.html
@ -131,7 +131,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, im_processing_recording: voiceRecorder.processing}">

              <div class="im_send_form_wrap1">

@ -161,11 +161,24 @@
                        <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">{{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>
@ -194,4 +207,4 @@

 </div>

-<toaster-container toaster-options="{'position-class': 'toast-bottom-center'}"></toaster-container>
+<toaster-container toaster-options="{'position-class': 'toast-bottom-center'}"></toaster-container>