diff --git a/app/js/directives.js b/app/js/directives.js index 7e172a5a..56ddc963 100755 --- a/app/js/directives.js +++ b/app/js/directives.js @@ -1581,7 +1581,6 @@ angular.module('myApp.directives', ['myApp.filters']) var voiceRecorder = null var voiceRecordSupported = Recorder.isRecordingSupported() var voiceRecordDurationInterval = null - var voiceRecorderPromise = null if (voiceRecordSupported) { element.addClass('im_record_supported') } @@ -1706,15 +1705,15 @@ angular.module('myApp.directives', ['myApp.filters']) var voiceRecordEvents = { start: voiceRecordTouch ? 'touchstart' : 'mousedown', move: voiceRecordTouch ? 'touchmove' : 'mousemove', - stop: voiceRecordTouch ? 'touchend' : 'mouseup' + stop: voiceRecordTouch ? 'touchend blur' : 'mouseup blur' } + var onRecordStart, onRecordStreamReady, onRecordStop + $(voiceRecordBtn).on(voiceRecordEvents.start, function(event) { if ($scope.voiceRecorder.processing) { return } - voiceRecorderPromise = null - voiceRecorder = new Recorder({ monitorGain: 0, numberOfChannels: 1, @@ -1723,7 +1722,7 @@ angular.module('myApp.directives', ['myApp.filters']) encoderPath: 'vendor/recorderjs/encoder_worker.js' }) - voiceRecorder.addEventListener('start', function(e) { + onRecordStart = function(e) { var startTime = tsNow(true) voiceRecordDurationInterval = $interval(function() { @@ -1733,13 +1732,13 @@ angular.module('myApp.directives', ['myApp.filters']) $scope.$apply(function() { $scope.voiceRecorder.recording = true }) + } + voiceRecorder.addEventListener('start', onRecordStart) - console.warn(dT(), 'recording now!') - }) - - voiceRecorder.addEventListener('streamReady', function(e) { + onRecordStreamReady = function(e) { voiceRecorder.start() - }) + } + voiceRecorder.addEventListener('streamReady', onRecordStreamReady) voiceRecorder.initStream() @@ -1748,7 +1747,6 @@ angular.module('myApp.directives', ['myApp.filters']) var updateVoiceHoverBoundaries = function () { var boundElement = $('.im_bottom_panel_wrap') - // console.warn(dT(), 'bound', boundElement[0]) var offset = boundElement.offset() curBoundaries = { top: offset.top, @@ -1763,7 +1761,6 @@ angular.module('myApp.directives', ['myApp.filters']) var touch = voiceRecordTouch ? originalEvent.changedTouches && originalEvent.changedTouches[0] : originalEvent - // console.log('event', voiceRecordTouch, originalEvent) var isHover = touch && touch.pageX >= curBoundaries.left && touch.pageX <= curBoundaries.left + curBoundaries.width && @@ -1771,7 +1768,6 @@ angular.module('myApp.directives', ['myApp.filters']) touch.pageY <= curBoundaries.top + curBoundaries.height if (curHover != isHover) { - // console.warn(dT(), 'change hover', isHover) element.toggleClass('im_send_form_hover', isHover) curHover = isHover } @@ -1781,19 +1777,11 @@ angular.module('myApp.directives', ['myApp.filters']) updateVoiceHoverBoundaries() updateVoiceHoveredClass(event) - if (!Config.Mobile) { - $(voiceRecorderWrap).css({ - height: messageFieldWrap.offsetHeight, - width: messageFieldWrap.offsetWidth - }) - } - - $($window).on(voiceRecordEvents.move, updateVoiceHoveredClass) - - $($window).one(voiceRecordEvents.stop, function(event) { + onRecordStop = function(event) { $($window).off(voiceRecordEvents.move, updateVoiceHoveredClass) + $($window).off(voiceRecordEvents.stop, onRecordStop) - var isHover = updateVoiceHoveredClass(event, true) + var isHover = event == 'blur' ? false : updateVoiceHoveredClass(event, true) if ($scope.voiceRecorder.duration > 0 && isHover) { $scope.voiceRecorder.processing = true @@ -1801,23 +1789,47 @@ angular.module('myApp.directives', ['myApp.filters']) var blob = blobConstruct([e.detail], 'audio/ogg') console.warn(dT(), 'got audio', blob) - $scope.draftMessage.files = [blob] - $scope.draftMessage.isMedia = true + $scope.$apply(function () { + if (blob.size !== undefined && + blob.size > 1024) { + $scope.draftMessage.files = [blob] + $scope.draftMessage.isMedia = true + } - $scope.voiceRecorder.processing = false + $scope.voiceRecorder.processing = false + }) }) } + cancelRecord() + } + + if (!Config.Mobile) { + $(voiceRecorderWrap).css({ + height: messageFieldWrap.offsetHeight, + width: messageFieldWrap.offsetWidth + }) + } + + $($window).on(voiceRecordEvents.move, updateVoiceHoveredClass) + $($window).one(voiceRecordEvents.stop, onRecordStop) + }) + + function cancelRecord() { + if (voiceRecorder) { voiceRecorder.stop() - console.warn(dT(), 'stop audio') + voiceRecorder.removeEventListener('streamReady', onRecordStreamReady) + voiceRecorder.removeEventListener('start', onRecordStart) + } + if ($scope.voiceRecorder.recording) { $interval.cancel(voiceRecordDurationInterval) $scope.$apply(function() { $scope.voiceRecorder.recording = false $scope.voiceRecorder.duration = 0 }) - }) - }) + } + } var sendOnEnter = true function updateSendSettings () { diff --git a/app/less/desktop.less b/app/less/desktop.less index d810f928..bc5ac39a 100644 --- a/app/less/desktop.less +++ b/app/less/desktop.less @@ -1294,7 +1294,7 @@ a.im_panel_peer_photo .peer_initials { display: none; width: 50px; height: 50px; - margin: -8px 0 0 -18px; + margin: -10px 0 0 -18px; user-select: none; -moz-user-select: none; -webkit-user-select: none; @@ -1491,6 +1491,7 @@ a.im_panel_peer_photo .peer_initials { position: absolute; top: -4px; right: -56px; + margin-top: -8px; .im_record_supported .im_send_form_empty & { display: block;