From e9144e5703d392cd8c84cd34290deb8dc537c3ae Mon Sep 17 00:00:00 2001 From: Jovan Gerodetti Date: Tue, 30 Jun 2015 19:52:16 +0200 Subject: [PATCH] voice recorder proposal for #190 --- app/js/controllers.js | 2 + app/js/directives.js | 66 +++++++++++++++++++++++++ app/js/init.js | 3 +- app/js/locales/en-us.json | 1 + app/less/mobile.less | 99 +++++++++++++++++++++++++++++++++++-- app/manifest.webapp | 3 ++ app/partials/mobile/im.html | 17 ++++++- 7 files changed, 184 insertions(+), 7 deletions(-) diff --git a/app/js/controllers.js b/app/js/controllers.js index 65fd936d..c1cea6bd 100644 --- a/app/js/controllers.js +++ b/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'), diff --git a/app/js/directives.js b/app/js/directives.js index 114f7d95..70ffd24c 100755 --- a/app/js/directives.js +++ b/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(''); 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) { diff --git a/app/js/init.js b/app/js/init.js index 4cc3b4be..8cd74586 100644 --- a/app/js/init.js +++ b/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'); diff --git a/app/js/locales/en-us.json b/app/js/locales/en-us.json index eca49eb8..208a72d5 100644 --- a/app/js/locales/en-us.json +++ b/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.", diff --git a/app/less/mobile.less b/app/less/mobile.less index b554febb..9b1b6f10 100644 --- a/app/less/mobile.less +++ b/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; -} \ No newline at end of file +} diff --git a/app/manifest.webapp b/app/manifest.webapp index 697a9f82..333ce733 100644 --- 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": { diff --git a/app/partials/mobile/im.html b/app/partials/mobile/im.html index e15bf62b..8d01c015 100644 --- a/app/partials/mobile/im.html +++ b/app/partials/mobile/im.html @@ -130,7 +130,7 @@ -
+
@@ -156,11 +156,24 @@
+
+
+
{{voiceRecorder.time}}
+
+ + +
+
+
+
+ +
+ @@ -187,4 +200,4 @@
-
\ No newline at end of file +