Improved document player

Added download button for audio

app/css/app.css

@@ -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;

app/js/directives.js

@@ -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'])
 
       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'])
     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'])
         }
         else {
           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);
           })
         }
-      }
+      };
     }
   })

app/partials/desktop/audio_player.html

@@ -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>
+		</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>
 		</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>
 	</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>