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

Improved audio player for documents

Browse Source
This commit is contained in:
Igor Zhukov 2014-11-07 21:16:29 +03:00
parent a09191b65f
commit bb96da0ee7
2 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
app/js/directives.js
View File

@ -1968,6 +1968,7 @@ angular.module('myApp.directives', ['myApp.filters'])
AppDocsManager.updateDocDownloaded($scope.audio.id); AppDocsManager.updateDocDownloaded($scope.audio.id);
} }
$scope.volume = audioVolume;
$scope.mediaPlayer = {}; $scope.mediaPlayer = {};
$scope.download = function () { $scope.download = function () {
@ -2035,11 +2036,22 @@ angular.module('myApp.directives', ['myApp.filters'])
var thumbWidth = Math.ceil(thumb.width()); var thumbWidth = Math.ceil(thumb.width());
var model = attrs.sliderModel; var model = attrs.sliderModel;
var sliderCallback = attrs.sliderOnchange; var sliderCallback = attrs.sliderOnchange;
var minValue = $scope.$eval(attrs.sliderMin) || 0.0; var minValue = 0.0;
var maxValue = $scope.$eval(attrs.sliderMax) || 1.0; var maxValue = 1.0;
var lastUpdValue = false; var lastUpdValue = false;
var lastMinPageX = false; var lastMinPageX = false;
if (attrs.sliderMin) {
$scope.$watch(attrs.sliderMin, function (newMinValue) {
minValue = newMinValue || 0.0;
});
}
if (attrs.sliderMax) {
$scope.$watch(attrs.sliderMax, function (newMaxValue) {
maxValue = newMaxValue || 1.0;
});
}
var onMouseMove = function (e) { var onMouseMove = function (e) {
var offsetX = e.pageX - lastMinPageX; var offsetX = e.pageX - lastMinPageX;
offsetX = Math.min(width, Math.max(0 , offsetX)); offsetX = Math.min(width, Math.max(0 , offsetX));
@ -2062,10 +2074,10 @@ angular.module('myApp.directives', ['myApp.filters'])
}; };
$scope.$watch(model, function (newVal) { $scope.$watch(model, function (newVal) {
if (newVal != lastUpdValue) { if (newVal != lastUpdValue && newVal !== undefined) {
var percent = Math.max(0, (newVal - minValue) / (maxValue - minValue)); var percent = Math.max(0, (newVal - minValue) / (maxValue - minValue));
if (width) { if (width) {
var offsetX = width * percent; var offsetX = Math.ceil(width * percent);
offsetX = Math.min(width, Math.max(0 , offsetX)); offsetX = Math.min(width, Math.max(0 , offsetX));
thumb.css('left', Math.max(0, offsetX - thumbWidth)); thumb.css('left', Math.max(0, offsetX - thumbWidth));
fill.css('width', offsetX); fill.css('width', offsetX);
@ -2098,7 +2110,7 @@ angular.module('myApp.directives', ['myApp.filters'])
$scope.$eval(model + '=' + lastUpdValue); $scope.$eval(model + '=' + lastUpdValue);
} }
thumb.css('left', e.offsetX); thumb.css('left', Math.max(0, e.offsetX - thumbWidth));
fill.css('width', e.offsetX); fill.css('width', e.offsetX);
$($window).on('mousemove', onMouseMove); $($window).on('mousemove', onMouseMove);

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

@ -30,11 +30,10 @@
</div> </div>
</div> </div>
<div ng-switch-default class="im_message_playback_progress_wrap"> <div ng-switch-default class="im_message_playback_progress_wrap">
<div class="audio_player_seek_slider" my-slider slider-model="mediaPlayer.player.currentTime" slider-min="0" slider-max="mediaPlayer.player.duration || audio.duration" slider-onchange="seek(value)"></div> <div class="audio_player_seek_slider" my-slider slider-model="mediaPlayer.player.currentTime" slider-max="mediaPlayer.player.duration || audio.duration" slider-onchange="seek(value)"></div>
<div class="audio_player_volume_slider" my-slider slider-model="mediaPlayer.player.volume" slider-min="0" slider-max="1" slider-onchange="setVolume(value)"></div>
</div> </div>
</div> </div>
<audio ng-if="audio.url" media-player="mediaPlayer.player"> <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" volume="{{::volume}}" />
</audio> </audio>
</div> </div>