diff --git a/app/index.html b/app/index.html index 0d92c41c..d3a49705 100644 --- a/app/index.html +++ b/app/index.html @@ -72,6 +72,11 @@ + + + + + diff --git a/app/js/directives.js b/app/js/directives.js index 33716e7c..87b5718c 100755 --- a/app/js/directives.js +++ b/app/js/directives.js @@ -3120,8 +3120,31 @@ angular.module('myApp.directives', ['myApp.filters']) } }) + .directive('myOgvPlayer', function ($compile) { + return { + link: function ($scope, $element, $attrs) { + var audio = $scope.audio + var playerEl + if (audio.mime_type == 'audio/ogg' && + // false && + OGVCompat.hasWebAudio() && // we don't want to use Flash + OGVCompat.supported('OGVPlayer')) { + playerEl = new OGVPlayer({debug: false, worker: false}) + } else { + playerEl = document.createElement('audio') + } + + $(playerEl).attr('media-player', $attrs.myOgvPlayer) + $(playerEl).attr('src', '{{::' + $attrs.src + '}}') + + $compile(playerEl)($scope) + $($element).append(playerEl) + } + } + }) + .directive('myAudioPlayer', function ($timeout, $q, Storage, AppDocsManager, AppMessagesManager, ErrorService) { - var currentPlayer = false + var currentPlayerScope = false var audioVolume = 0.5 Storage.get('audio_volume').then(function (newAudioVolume) { @@ -3147,20 +3170,23 @@ angular.module('myApp.directives', ['myApp.filters']) return { link: link, scope: { - audio: '=', - message: '=' + audio: '=' }, templateUrl: templateUrl('audio_player') } - function checkPlayer (newPlayer) { - if (newPlayer === currentPlayer) { + function checkAudioPlayer (newPlayerScope) { + if (newPlayerScope === currentPlayerScope) { return false } - if (currentPlayer) { - currentPlayer.pause() + if (currentPlayerScope) { + ;(function ($scope) { + setZeroTimeout(function () { + $scope.mediaPlayer.player.pause() + }) + })(currentPlayerScope) } - currentPlayer = newPlayer + currentPlayerScope = newPlayerScope } function link ($scope, element, attrs) { @@ -3168,20 +3194,34 @@ angular.module('myApp.directives', ['myApp.filters']) $scope.volume = audioVolume $scope.mediaPlayer = {} + if ($scope.$parent.messageId) { + $scope.message = AppMessagesManager.wrapForHistory($scope.$parent.messageId) + } $scope.download = function () { AppDocsManager.saveDocFile($scope.audio.id) } + $scope.duration = function () { + if ($scope.mediaPlayer.player && + $scope.mediaPlayer.player.duration > 0 && + $scope.mediaPlayer.player.duration < Infinity) { + return $scope.mediaPlayer.player.duration + } + return $scope.audio && $scope.audio.duration || 0 + } + $scope.togglePlay = function () { if ($scope.audio.url) { - checkPlayer($scope.mediaPlayer.player) - $scope.mediaPlayer.player.playPause() + checkAudioPlayer($scope) + setZeroTimeout(function () { + $scope.mediaPlayer.player.playPause() + }) } else if ($scope.audio.progress && $scope.audio.progress.enabled) { } else { AppDocsManager.downloadDoc($scope.audio.id).then(function () { onContentLoaded(function () { - var errorListenerEl = $('audio', element)[0] || element[0] + var errorListenerEl = $('audio, ogvjs', element)[0] || element[0] if (errorListenerEl) { var errorAlready = false var onAudioError = function (event) { @@ -3209,13 +3249,13 @@ angular.module('myApp.directives', ['myApp.filters']) }) } setTimeout(function () { - checkPlayer($scope.mediaPlayer.player) + checkAudioPlayer($scope) $scope.mediaPlayer.player.setVolume(audioVolume) $scope.mediaPlayer.player.play() if ($scope.message && - !$scope.message.pFlags.out && - $scope.message.pFlags.media_unread) { + !$scope.message.pFlags.out && + $scope.message.pFlags.media_unread) { AppMessagesManager.readMessages([$scope.message.mid]) } }, 300) diff --git a/app/js/services.js b/app/js/services.js index 9ba007b7..e2498d1d 100755 --- a/app/js/services.js +++ b/app/js/services.js @@ -4869,7 +4869,6 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils']) // console.warn(dT(), 'server', draft) } else { // console.warn(dT(), 'local', draft) - console.warn(dT(), 'local', draft) } var replyToMsgID = draft && draft.replyToMsgID if (replyToMsgID) { diff --git a/app/less/app.less b/app/less/app.less index deee51e2..04187eaf 100644 --- a/app/less/app.less +++ b/app/less/app.less @@ -2042,6 +2042,15 @@ img.im_message_document_thumb { } } +.audio_player_media { + position: absolute; + visibility: hidden; + + canvas { + display: none; + } +} + .im_message_upload_progress_wrap, .im_message_download_progress_wrap { margin-top: 5px; diff --git a/app/partials/desktop/audio_player.html b/app/partials/desktop/audio_player.html index 17adc90a..21d28d4e 100755 --- a/app/partials/desktop/audio_player.html +++ b/app/partials/desktop/audio_player.html @@ -4,8 +4,8 @@
- - + +
[ @@ -18,7 +18,7 @@ ] -
+
@@ -37,11 +37,9 @@
-
+
- +
\ No newline at end of file diff --git a/app/partials/mobile/audio_player.html b/app/partials/mobile/audio_player.html index 58520719..21d28d4e 100644 --- a/app/partials/mobile/audio_player.html +++ b/app/partials/mobile/audio_player.html @@ -4,10 +4,11 @@
- - + +
- + [ + @@ -15,19 +16,20 @@ + ] -
+
-
- - +
+ +
- +
@@ -35,10 +37,9 @@
-
+
+
- +
\ No newline at end of file diff --git a/app/vendor/angular-media-player/angular-media-player.js b/app/vendor/angular-media-player/angular-media-player.js index a5d8893b..d2444ff6 100644 --- a/app/vendor/angular-media-player/angular-media-player.js +++ b/app/vendor/angular-media-player/angular-media-player.js @@ -50,7 +50,9 @@ angular.module('mediaPlayer', ['mediaPlayer.helpers']) this.$domEl.load(); this.ended = undefined; if (autoplay) { - this.$element.one('canplay', this.play.bind(this)); + // ogv.js doesn't have support for canplay event yet + var canPlayEvent = this.$domEl.tagName == 'OGVJS' ? 'loadeddata' : 'canplay' + this.$element.one(canPlayEvent, this.play.bind(this)); } }, /** @@ -242,6 +244,10 @@ angular.module('mediaPlayer', ['mediaPlayer.helpers']) * Returns an unbinding function */ var bindListeners = function (au, al, element) { + var updateTime = function (scope) { + scope.currentTime = al.currentTime; + scope.formatTime = scope.$formatTime(scope.currentTime); + } var listeners = { playing: function () { au.$apply(function (scope) { @@ -261,13 +267,13 @@ angular.module('mediaPlayer', ['mediaPlayer.helpers']) au.$apply(function (scope) { scope.ended = true; scope.playing = false; // IE9 does not throw 'pause' when file ends + updateTime(scope) }); } }, timeupdate: throttle(1000, false, function () { au.$apply(function (scope) { - scope.currentTime = al.currentTime; - scope.formatTime = scope.$formatTime(scope.currentTime); + updateTime(scope) }); }), loadedmetadata: function () { @@ -278,6 +284,7 @@ angular.module('mediaPlayer', ['mediaPlayer.helpers']) if (al.buffered.length) { scope.loadPercent = Math.round((al.buffered.end(al.buffered.length - 1) / scope.duration) * 100); } + updateTime(scope) }); }, progress: function () { @@ -434,7 +441,7 @@ angular.module('mediaPlayer', ['mediaPlayer.helpers']) scope.$eval(mediaName + ' = player', {player: player}); } - if (element[0].tagName !== 'AUDIO' && element[0].tagName !== 'VIDEO') { + if (element[0].tagName !== 'AUDIO' && element[0].tagName !== 'VIDEO' && element[0].tagName !== 'OGVJS') { return new Error('player directive works only when attached to an