Browse Source

Improved document player

Added download button for audio
master
Igor Zhukov 10 years ago
parent
commit
4c87b0e317
  1. 3
      app/css/app.css
  2. 23
      app/js/directives.js
  3. 11
      app/partials/desktop/audio_player.html

3
app/css/app.css

@ -1456,6 +1456,9 @@ img.im_message_document_thumb { @@ -1456,6 +1456,9 @@ img.im_message_document_thumb {
white-space: nowrap;
text-overflow: ellipsis;
}
.audio_player_title:hover {
color: #222;
}
.audio_player_meta {
overflow: hidden;
vertical-align: text-top;

23
app/js/directives.js

@ -1822,7 +1822,7 @@ angular.module('myApp.directives', ['myApp.filters']) @@ -1822,7 +1822,7 @@ angular.module('myApp.directives', ['myApp.filters'])
}
})
.directive('myAudioPlayer', function ($sce, $timeout, MtpApiFileManager) {
.directive('myAudioPlayer', function ($sce, $timeout, $q, FileManager, MtpApiFileManager) {
return {
link: link,
@ -1847,6 +1847,7 @@ angular.module('myApp.directives', ['myApp.filters']) @@ -1847,6 +1847,7 @@ angular.module('myApp.directives', ['myApp.filters'])
return downloadPromise.then(function (url) {
delete audio.progress;
audio.rawUrl = url;
audio.url = $sce.trustAsResourceUrl(url);
}, function (e) {
console.log('audio download failed', e);
@ -1861,6 +1862,14 @@ angular.module('myApp.directives', ['myApp.filters']) @@ -1861,6 +1862,14 @@ angular.module('myApp.directives', ['myApp.filters'])
function link($scope, element, attrs) {
$scope.mediaPlayer = {};
$scope.download = function () {
($scope.audio.rawUrl ? $q.when() : downloadAudio($scope.audio)).then(
function () {
FileManager.download($scope.audio.rawUrl, $scope.audio.mime_type || 'audio/ogg', $scope.audio.file_name || 'audio.ogg');
}
);
};
$scope.togglePlay = function () {
if ($scope.audio.url) {
$scope.mediaPlayer.player.playPause();
@ -1870,15 +1879,11 @@ angular.module('myApp.directives', ['myApp.filters']) @@ -1870,15 +1879,11 @@ angular.module('myApp.directives', ['myApp.filters'])
}
else {
downloadAudio($scope.audio).then(function () {
$timeout(function () {
var audioElement = $('audio', element)[0];
if (audioElement) {
audioElement.autoplay = false;
audioElement.removeAttribute('autoplay');
}
}, 1000);
onContentLoaded(function () {
$scope.mediaPlayer.player.play();
})
})
}
}
};
}
})

11
app/partials/desktop/audio_player.html

@ -3,12 +3,13 @@ @@ -3,12 +3,13 @@
<i class="icon audio_player_btn_icon" ng-class="{audio_player_btn_icon_pause: mediaPlayer.player.playing, audio_player_btn_icon_cancel: audio.progress.enabled}"></i>
</button>
<div class="audio_player_title_wrap clearfix">
<div class="audio_player_title" ng-switch="::audio.file_name.length > 0">
<a ng-click="download()" class="audio_player_title" ng-switch="::audio.file_name.length > 0">
<span ng-switch-when="true" ng-bind="::audio.file_name"></span>
<span ng-switch-default my-i18n="message_attach_audio_message"></span>
</div>
<div class="audio_player_meta" ng-switch="audio.progress.enabled || !mediaPlayer.player.duration &amp;&amp; !audio.duration">
<span ng-switch-when="true" class="audio_player_size" ng-bind="audio.progress | formatSizeProgress"></span>
</a>
<div class="audio_player_meta" ng-switch="audio.progress.enabled ? 'progress' : (!mediaPlayer.player.duration &amp;&amp; !audio.duration ? 'size' : '')">
<span ng-switch-when="progress" class="audio_player_size" ng-bind="audio.progress | formatSizeProgress"></span>
<span ng-switch-when="size" class="audio_player_size" ng-bind="audio.size | formatSize"></span>
<span ng-switch-default class="audio_player_duration" ng-bind="(mediaPlayer.player.playing || mediaPlayer.player.currentTime > 0) ? mediaPlayer.player.currentTime : (mediaPlayer.player.duration || audio.duration) | duration"></span>
</div>
</div>
@ -24,7 +25,7 @@ @@ -24,7 +25,7 @@
<div class="progress-bar progress-bar-success" ng-style="{width: mediaPlayer.player.currentTime / (mediaPlayer.player.duration || audio.duration) * 100 + '%'}"></div>
</div>
</div>
<audio ng-if="audio.url" media-player="mediaPlayer.player" autoplay="autoplay">
<audio ng-if="audio.url" media-player="mediaPlayer.player">
<source ng-src="{{::audio.url}}" type="audio/ogg" />
</audio>
</div>
Loading…
Cancel
Save