r4sas/webogram-i2p
1
0
Fork 0
Code Issues Releases Wiki Activity

Improved document player

Browse Source 
Added download button for audio
This commit is contained in:
Igor Zhukov 2014-09-23 21:29:51 +04:00
parent adeea1a4fa
commit 4c87b0e317
3 changed files with 23 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/css/app.css
View File

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

23
app/js/directives.js
View File

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

11
app/partials/desktop/audio_player.html
View File

@ -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> <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> </button>
<div class="audio_player_title_wrap clearfix"> <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-when="true" ng-bind="::audio.file_name"></span>
<span ng-switch-default my-i18n="message_attach_audio_message"></span> <span ng-switch-default my-i18n="message_attach_audio_message"></span>
</div> </a>
<div class="audio_player_meta" ng-switch="audio.progress.enabled || !mediaPlayer.player.duration &amp;&amp; !audio.duration"> <div class="audio_player_meta" ng-switch="audio.progress.enabled ? 'progress' : (!mediaPlayer.player.duration &amp;&amp; !audio.duration ? 'size' : '')">
<span ng-switch-when="true" class="audio_player_size" ng-bind="audio.progress | formatSizeProgress"></span> <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> <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>
</div> </div>
@ -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 class="progress-bar progress-bar-success" ng-style="{width: mediaPlayer.player.currentTime / (mediaPlayer.player.duration || audio.duration) * 100 + '%'}"></div>
</div> </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" /> <source ng-src="{{::audio.url}}" type="audio/ogg" />
</audio> </audio>
</div> </div>