Browse Source

Fixed voice recorder

master
Igor Zhukov 7 years ago
parent
commit
4d6447ed51
  1. 66
      app/js/directives.js
  2. 3
      app/less/desktop.less

66
app/js/directives.js

@ -1581,7 +1581,6 @@ angular.module('myApp.directives', ['myApp.filters'])
var voiceRecorder = null var voiceRecorder = null
var voiceRecordSupported = Recorder.isRecordingSupported() var voiceRecordSupported = Recorder.isRecordingSupported()
var voiceRecordDurationInterval = null var voiceRecordDurationInterval = null
var voiceRecorderPromise = null
if (voiceRecordSupported) { if (voiceRecordSupported) {
element.addClass('im_record_supported') element.addClass('im_record_supported')
} }
@ -1706,15 +1705,15 @@ angular.module('myApp.directives', ['myApp.filters'])
var voiceRecordEvents = { var voiceRecordEvents = {
start: voiceRecordTouch ? 'touchstart' : 'mousedown', start: voiceRecordTouch ? 'touchstart' : 'mousedown',
move: voiceRecordTouch ? 'touchmove' : 'mousemove', move: voiceRecordTouch ? 'touchmove' : 'mousemove',
stop: voiceRecordTouch ? 'touchend' : 'mouseup' stop: voiceRecordTouch ? 'touchend blur' : 'mouseup blur'
} }
var onRecordStart, onRecordStreamReady, onRecordStop
$(voiceRecordBtn).on(voiceRecordEvents.start, function(event) { $(voiceRecordBtn).on(voiceRecordEvents.start, function(event) {
if ($scope.voiceRecorder.processing) { if ($scope.voiceRecorder.processing) {
return return
} }
voiceRecorderPromise = null
voiceRecorder = new Recorder({ voiceRecorder = new Recorder({
monitorGain: 0, monitorGain: 0,
numberOfChannels: 1, numberOfChannels: 1,
@ -1723,7 +1722,7 @@ angular.module('myApp.directives', ['myApp.filters'])
encoderPath: 'vendor/recorderjs/encoder_worker.js' encoderPath: 'vendor/recorderjs/encoder_worker.js'
}) })
voiceRecorder.addEventListener('start', function(e) { onRecordStart = function(e) {
var startTime = tsNow(true) var startTime = tsNow(true)
voiceRecordDurationInterval = $interval(function() { voiceRecordDurationInterval = $interval(function() {
@ -1733,13 +1732,13 @@ angular.module('myApp.directives', ['myApp.filters'])
$scope.$apply(function() { $scope.$apply(function() {
$scope.voiceRecorder.recording = true $scope.voiceRecorder.recording = true
}) })
}
voiceRecorder.addEventListener('start', onRecordStart)
console.warn(dT(), 'recording now!') onRecordStreamReady = function(e) {
})
voiceRecorder.addEventListener('streamReady', function(e) {
voiceRecorder.start() voiceRecorder.start()
}) }
voiceRecorder.addEventListener('streamReady', onRecordStreamReady)
voiceRecorder.initStream() voiceRecorder.initStream()
@ -1748,7 +1747,6 @@ angular.module('myApp.directives', ['myApp.filters'])
var updateVoiceHoverBoundaries = function () { var updateVoiceHoverBoundaries = function () {
var boundElement = $('.im_bottom_panel_wrap') var boundElement = $('.im_bottom_panel_wrap')
// console.warn(dT(), 'bound', boundElement[0])
var offset = boundElement.offset() var offset = boundElement.offset()
curBoundaries = { curBoundaries = {
top: offset.top, top: offset.top,
@ -1763,7 +1761,6 @@ angular.module('myApp.directives', ['myApp.filters'])
var touch = voiceRecordTouch var touch = voiceRecordTouch
? originalEvent.changedTouches && originalEvent.changedTouches[0] ? originalEvent.changedTouches && originalEvent.changedTouches[0]
: originalEvent : originalEvent
// console.log('event', voiceRecordTouch, originalEvent)
var isHover = touch && var isHover = touch &&
touch.pageX >= curBoundaries.left && touch.pageX >= curBoundaries.left &&
touch.pageX <= curBoundaries.left + curBoundaries.width && touch.pageX <= curBoundaries.left + curBoundaries.width &&
@ -1771,7 +1768,6 @@ angular.module('myApp.directives', ['myApp.filters'])
touch.pageY <= curBoundaries.top + curBoundaries.height touch.pageY <= curBoundaries.top + curBoundaries.height
if (curHover != isHover) { if (curHover != isHover) {
// console.warn(dT(), 'change hover', isHover)
element.toggleClass('im_send_form_hover', isHover) element.toggleClass('im_send_form_hover', isHover)
curHover = isHover curHover = isHover
} }
@ -1781,19 +1777,11 @@ angular.module('myApp.directives', ['myApp.filters'])
updateVoiceHoverBoundaries() updateVoiceHoverBoundaries()
updateVoiceHoveredClass(event) updateVoiceHoveredClass(event)
if (!Config.Mobile) { onRecordStop = function(event) {
$(voiceRecorderWrap).css({
height: messageFieldWrap.offsetHeight,
width: messageFieldWrap.offsetWidth
})
}
$($window).on(voiceRecordEvents.move, updateVoiceHoveredClass)
$($window).one(voiceRecordEvents.stop, function(event) {
$($window).off(voiceRecordEvents.move, updateVoiceHoveredClass) $($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) { if ($scope.voiceRecorder.duration > 0 && isHover) {
$scope.voiceRecorder.processing = true $scope.voiceRecorder.processing = true
@ -1801,23 +1789,47 @@ angular.module('myApp.directives', ['myApp.filters'])
var blob = blobConstruct([e.detail], 'audio/ogg') var blob = blobConstruct([e.detail], 'audio/ogg')
console.warn(dT(), 'got audio', blob) console.warn(dT(), 'got audio', blob)
$scope.$apply(function () {
if (blob.size !== undefined &&
blob.size > 1024) {
$scope.draftMessage.files = [blob] $scope.draftMessage.files = [blob]
$scope.draftMessage.isMedia = true $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() voiceRecorder.stop()
console.warn(dT(), 'stop audio') voiceRecorder.removeEventListener('streamReady', onRecordStreamReady)
voiceRecorder.removeEventListener('start', onRecordStart)
}
if ($scope.voiceRecorder.recording) {
$interval.cancel(voiceRecordDurationInterval) $interval.cancel(voiceRecordDurationInterval)
$scope.$apply(function() { $scope.$apply(function() {
$scope.voiceRecorder.recording = false $scope.voiceRecorder.recording = false
$scope.voiceRecorder.duration = 0 $scope.voiceRecorder.duration = 0
}) })
}) }
}) }
var sendOnEnter = true var sendOnEnter = true
function updateSendSettings () { function updateSendSettings () {

3
app/less/desktop.less

@ -1294,7 +1294,7 @@ a.im_panel_peer_photo .peer_initials {
display: none; display: none;
width: 50px; width: 50px;
height: 50px; height: 50px;
margin: -8px 0 0 -18px; margin: -10px 0 0 -18px;
user-select: none; user-select: none;
-moz-user-select: none; -moz-user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
@ -1491,6 +1491,7 @@ a.im_panel_peer_photo .peer_initials {
position: absolute; position: absolute;
top: -4px; top: -4px;
right: -56px; right: -56px;
margin-top: -8px;
.im_record_supported .im_send_form_empty & { .im_record_supported .im_send_form_empty & {
display: block; display: block;

Loading…
Cancel
Save