Igor Zhukov
10 years ago
22 changed files with 831 additions and 356 deletions
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 158 KiB |
@ -0,0 +1,31 @@ |
|||||||
|
<div class="audio_player_wrap clearfix"> |
||||||
|
<button class="btn btn-primary pull-left audio_player_button" ng-click="togglePlay()"> |
||||||
|
<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"> |
||||||
|
<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> |
||||||
|
</a> |
||||||
|
<div class="audio_player_meta" ng-switch="audio.progress.enabled ? 'progress' : (!mediaPlayer.player.duration && !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> |
||||||
|
<div class="audio_player_actions" ng-if="!audio.progress.enabled && !audio.url"> |
||||||
|
<a ng-click="togglePlay()" my-i18n="message_attach_audio_play"></a> |
||||||
|
<a ng-if="audio._ == 'document'" ng-click="download()" my-i18n="message_attach_document_download"></a> |
||||||
|
</div> |
||||||
|
<div class="audio_player_progress_wrap" ng-if="audio.progress.enabled || audio.url" ng-switch="audio.progress.enabled"> |
||||||
|
<div ng-switch-when="true" class="progress tg_down_progress"> |
||||||
|
<div class="progress-bar progress-bar-success" ng-style="{width: audio.progress.percent + '%'}"></div> |
||||||
|
</div> |
||||||
|
<div ng-switch-default class="progress tg_play_progress"> |
||||||
|
<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"> |
||||||
|
<source ng-src="{{::audio.url}}" type="audio/ogg" /> |
||||||
|
</audio> |
||||||
|
</div> |
||||||
@ -1,31 +1,3 @@ |
|||||||
<div class="im_message_document im_message_audio" ng-class="{im_message_audio_done: historyMessage.media.audio.url, im_message_audio_progress: historyMessage.media.audio.progress.enabled}"> |
<div class="im_message_audio"> |
||||||
<a href="" ng-click="openAudio(historyMessage.media.audio.id)" ng-if="!historyMessage.media.audio.progress.enabled && !historyMessage.media.audio.url"> |
<div my-audio-player audio="historyMessage.media.audio"></div> |
||||||
<i class="icon icon-audio"></i> |
|
||||||
</a> |
|
||||||
<i class="icon icon-audio" ng-if="historyMessage.media.audio.progress.enabled || historyMessage.media.audio.url"></i> |
|
||||||
|
|
||||||
<div class="im_message_audio_info"> |
|
||||||
<div class="im_message_audio_name_wrap" ng-if="!historyMessage.media.audio.url"> |
|
||||||
<span class="im_message_audio_name" my-i18n="message_attach_audio_message"></span> |
|
||||||
<span class="im_message_audio_duration" ng-if="!historyMessage.media.audio.progress.enabled" ng-bind="::historyMessage.media.audio.duration | duration"></span> |
|
||||||
<span class="im_message_audio_size" ng-if="historyMessage.media.audio.progress.enabled" ng-bind="historyMessage.media.audio.progress | formatSizeProgress"></span> |
|
||||||
</div> |
|
||||||
<div class="im_message_audio_actions" ng-if="!historyMessage.media.audio.progress.enabled && !historyMessage.media.audio.url"> |
|
||||||
<a href="" ng-click="openAudio(historyMessage.media.audio.id)" my-i18n="message_attach_audio_play"></a> |
|
||||||
</div> |
|
||||||
<div class="clearfix cancelable_progress_wrap" ng-if="historyMessage.media.audio.progress.enabled"> |
|
||||||
<a class="im_message_media_progress_cancel pull-right" ng-click="historyMessage.media.audio.progress.cancel()" my-i18n="modal_cancel"></a> |
|
||||||
<div class="im_message_download_progress_wrap"> |
|
||||||
<div class="progress tg_down_progress"> |
|
||||||
<div class="progress-bar progress-bar-success" ng-style="{width: historyMessage.media.audio.progress.percent + '%'}"></div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="im_message_audio_player_wrap" ng-if="historyMessage.media.audio.url"> |
|
||||||
<audio my-audio-autoplay audio="historyMessage.media.audio" controls="controls"> |
|
||||||
<source ng-src="{{::historyMessage.media.audio.url}}" type="audio/ogg" /> |
|
||||||
<embed ng-src="{{::historyMessage.media.audio.url}}" hidden="true" autostart="true" loop="false" /> |
|
||||||
</audio> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
</div> |
||||||
|
|||||||
@ -0,0 +1 @@ |
|||||||
|
../desktop/audio_player.html |
||||||
@ -1,30 +1,3 @@ |
|||||||
<div class="im_message_document im_message_audio" ng-class="{im_message_audio_done: historyMessage.media.audio.url, im_message_audio_progress: historyMessage.media.audio.progress.enabled}"> |
<div class="im_message_audio"> |
||||||
<a href="" ng-click="openAudio(historyMessage.media.audio.id)" ng-if="!historyMessage.media.audio.progress.enabled && !historyMessage.media.audio.url"> |
<div my-audio-player audio="historyMessage.media.audio"></div> |
||||||
<i class="icon icon-audio"></i> |
|
||||||
</a> |
|
||||||
<i class="icon icon-audio" ng-if="historyMessage.media.audio.progress.enabled || historyMessage.media.audio.url"></i> |
|
||||||
|
|
||||||
<div class="im_message_audio_info"> |
|
||||||
<div class="im_message_audio_name_wrap" ng-if="!historyMessage.media.audio.url"> |
|
||||||
<span class="im_message_audio_name"> |
|
||||||
Voice message |
|
||||||
</span> |
|
||||||
<span class="im_message_audio_duration" ng-if="!historyMessage.media.audio.progress.enabled" ng-bind="::historyMessage.media.audio.duration | duration"></span> |
|
||||||
<span class="im_message_audio_size" ng-if="historyMessage.media.audio.progress.enabled" ng-bind="historyMessage.media.audio.progress | formatSizeProgress"></span> |
|
||||||
</div> |
|
||||||
<div class="clearfix cancelable_progress_wrap" ng-if="historyMessage.media.audio.progress.enabled"> |
|
||||||
<a class="im_message_media_progress_cancel pull-right" ng-click="historyMessage.media.audio.progress.cancel()">Cancel</a> |
|
||||||
<div class="im_message_download_progress_wrap"> |
|
||||||
<div class="progress tg_down_progress"> |
|
||||||
<div class="progress-bar progress-bar-success" ng-style="{width: historyMessage.media.audio.progress.percent + '%'}"></div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="im_message_audio_player_wrap" ng-if="historyMessage.media.audio.url"> |
|
||||||
<audio my-audio-autoplay audio="historyMessage.media.audio" controls="controls"> |
|
||||||
<source ng-src="{{::historyMessage.media.audio.url}}" type="audio/ogg" /> |
|
||||||
<embed ng-src="{{::historyMessage.media.audio.url}}" hidden="true" autostart="true" loop="false" /> |
|
||||||
</audio> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
</div> |
||||||
@ -0,0 +1,510 @@ |
|||||||
|
/** |
||||||
|
* MDN references for hackers: |
||||||
|
* =========================== |
||||||
|
* Media events on <audio> and <video> tags: |
||||||
|
* https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events
|
||||||
|
* Properties and Methods: |
||||||
|
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
|
||||||
|
* Internet Exploder version: |
||||||
|
* http://msdn.microsoft.com/en-us/library/ff975061(v=vs.85).aspx
|
||||||
|
* |
||||||
|
* Understanding TimeRanges objects: |
||||||
|
* http://html5doctor.com/html5-audio-the-state-of-play/
|
||||||
|
*/ |
||||||
|
angular.module('mediaPlayer', ['mediaPlayer.helpers']) |
||||||
|
.constant('mp.playerDefaults', { |
||||||
|
// general properties
|
||||||
|
currentTrack: 0, |
||||||
|
ended: undefined, |
||||||
|
network: undefined, |
||||||
|
playing: false, |
||||||
|
seeking: false, |
||||||
|
tracks: 0, |
||||||
|
volume: 1, |
||||||
|
|
||||||
|
// formatted properties
|
||||||
|
formatDuration: '00:00', |
||||||
|
formatTime: '00:00', |
||||||
|
loadPercent: 0 |
||||||
|
}) |
||||||
|
|
||||||
|
.directive('mediaPlayer', ['$rootScope', '$interpolate', '$timeout', 'mp.throttle', 'mp.playerDefaults', |
||||||
|
function ($rootScope, $interpolate, $timeout, throttle, playerDefaults) { |
||||||
|
|
||||||
|
var playerMethods = { |
||||||
|
/** |
||||||
|
* @usage load([mediaElement], [autoplay]); |
||||||
|
* |
||||||
|
* @param {mediaElement Obj} mediaElement a single mediaElement, may contain multiple <source>(s) |
||||||
|
* @param {boolean} autoplay: flag to autostart loaded element |
||||||
|
*/ |
||||||
|
load: function (mediaElement, autoplay) { |
||||||
|
// method overloading
|
||||||
|
if (typeof mediaElement === 'boolean') { |
||||||
|
autoplay = mediaElement; |
||||||
|
mediaElement = null; |
||||||
|
} else if (typeof mediaElement === 'object') { |
||||||
|
this.$clearSourceList(); |
||||||
|
this.$addSourceList(mediaElement); |
||||||
|
} |
||||||
|
this.$domEl.load(); |
||||||
|
this.ended = undefined; |
||||||
|
if (autoplay) { |
||||||
|
this.$element.one('canplay', this.play.bind(this)); |
||||||
|
} |
||||||
|
}, |
||||||
|
/** |
||||||
|
* resets the player (clear the <source>s) and reloads the playlist |
||||||
|
* |
||||||
|
* @usage reset([autoplay]); |
||||||
|
* @param {boolean} autoplay: flag to autoplay once resetted |
||||||
|
*/ |
||||||
|
reset: function (autoplay) { |
||||||
|
angular.extend(this, playerDefaults); |
||||||
|
this.$clearSourceList(); |
||||||
|
this.load(this.$playlist, autoplay); |
||||||
|
}, |
||||||
|
/** |
||||||
|
* @usage play([index], [selectivePlay]) |
||||||
|
* @param {integer} index: playlist index (0...n), to start playing from |
||||||
|
* @param {boolean} selectivePlay: only correct value is `true`, in which case will only play the specified, |
||||||
|
* or current, track. The default is to continue playing the next one. |
||||||
|
*/ |
||||||
|
play: function (index, selectivePlay) { |
||||||
|
// method overloading
|
||||||
|
if (typeof index === 'boolean') { |
||||||
|
selectivePlay = index; |
||||||
|
index = undefined; |
||||||
|
} |
||||||
|
if (selectivePlay) { |
||||||
|
this.$selective = true; |
||||||
|
} |
||||||
|
|
||||||
|
if (this.$playlist.length > index) { |
||||||
|
this.currentTrack = index + 1; |
||||||
|
return this.load(this.$playlist[index], true); |
||||||
|
} |
||||||
|
// readyState = HAVE_NOTHING (0) means there's nothing into the <audio>/<video> tag
|
||||||
|
if (!this.currentTrack && this.$domEl.readyState) { this.currentTrack++; } |
||||||
|
|
||||||
|
// In case the stream is completed, reboot it with a load()
|
||||||
|
if (this.ended) { |
||||||
|
this.load(true); |
||||||
|
} else { |
||||||
|
this.$domEl.play(); |
||||||
|
} |
||||||
|
}, |
||||||
|
playPause: function (index, selectivePlay) { |
||||||
|
// method overloading
|
||||||
|
if (typeof index === 'boolean') { |
||||||
|
selectivePlay = index; |
||||||
|
index = undefined; |
||||||
|
} |
||||||
|
if (selectivePlay) { |
||||||
|
this.$selective = true; |
||||||
|
} |
||||||
|
|
||||||
|
if (typeof index === 'number' && index + 1 !== this.currentTrack) { |
||||||
|
this.play(index); |
||||||
|
} else if (this.playing) { |
||||||
|
this.pause(); |
||||||
|
} else { |
||||||
|
this.play(); |
||||||
|
} |
||||||
|
}, |
||||||
|
pause: function () { |
||||||
|
this.$domEl.pause(); |
||||||
|
}, |
||||||
|
stop: function () { |
||||||
|
this.reset(); |
||||||
|
}, |
||||||
|
toggleMute: function () { |
||||||
|
this.muted = this.$domEl.muted = !this.$domEl.muted; |
||||||
|
}, |
||||||
|
next: function (autoplay) { |
||||||
|
var self = this; |
||||||
|
if (self.currentTrack && self.currentTrack < self.tracks) { |
||||||
|
var wasPlaying = autoplay || self.playing; |
||||||
|
self.pause(); |
||||||
|
$timeout(function () { |
||||||
|
self.$clearSourceList(); |
||||||
|
self.$addSourceList(self.$playlist[self.currentTrack]); |
||||||
|
self.load(wasPlaying); // setup autoplay here.
|
||||||
|
self.currentTrack++; |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
prev: function (autoplay) { |
||||||
|
var self = this; |
||||||
|
if (self.currentTrack && self.currentTrack - 1) { |
||||||
|
var wasPlaying = autoplay || self.playing; |
||||||
|
self.pause(); |
||||||
|
$timeout(function () { |
||||||
|
self.$clearSourceList(); |
||||||
|
self.$addSourceList(self.$playlist[self.currentTrack - 2]); |
||||||
|
self.load(wasPlaying); // setup autoplay here.
|
||||||
|
self.currentTrack--; |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
setPlaybackRate: function (value) { |
||||||
|
this.$domEl.playbackRate = value; |
||||||
|
}, |
||||||
|
setVolume: function (value) { |
||||||
|
this.$domEl.volume = value; |
||||||
|
}, |
||||||
|
seek: function (value) { |
||||||
|
var doubleval = 0, valuesArr; |
||||||
|
if (typeof value === 'string') { |
||||||
|
valuesArr = value.split(':'); |
||||||
|
doubleval += parseInt(valuesArr.pop(), 10); |
||||||
|
if (valuesArr.length) { doubleval += parseInt(valuesArr.pop(), 10) * 60; } |
||||||
|
if (valuesArr.length) { doubleval += parseInt(valuesArr.pop(), 10) * 3600; } |
||||||
|
if (!isNaN(doubleval)) { |
||||||
|
return this.$domEl.currentTime = doubleval; |
||||||
|
} |
||||||
|
} else { |
||||||
|
return this.$domEl.currentTime = value; |
||||||
|
} |
||||||
|
}, |
||||||
|
/** |
||||||
|
* binds a specific event directly to the element |
||||||
|
* @param {string} type event name |
||||||
|
* @param {function} fn callback |
||||||
|
* @return {function} unbind function, call it in order to remove the listener |
||||||
|
*/ |
||||||
|
on: function (type, fn) { |
||||||
|
return this.$element.on(type, fn); |
||||||
|
}, |
||||||
|
off: function (type, fn) { |
||||||
|
return this.$element.off(type, fn); |
||||||
|
}, |
||||||
|
one: function (type, fn) { |
||||||
|
return this.$element.one(type, fn); |
||||||
|
}, |
||||||
|
$addSourceList: function (sourceList) { |
||||||
|
var self = this; |
||||||
|
if (angular.isArray(sourceList)) { |
||||||
|
angular.forEach(sourceList, function (singleElement, index) { |
||||||
|
var sourceElem = document.createElement('SOURCE'); |
||||||
|
['src', 'type', 'media'].forEach(function (key) { // use only a subset of the properties
|
||||||
|
if (singleElement[key] !== undefined) { // firefox is picky if you set undefined attributes
|
||||||
|
sourceElem.setAttribute(key, singleElement[key]); |
||||||
|
} |
||||||
|
}); |
||||||
|
self.$element.append(sourceElem); |
||||||
|
}); |
||||||
|
} else if (angular.isObject(sourceList)) { |
||||||
|
var sourceElem = document.createElement('SOURCE'); |
||||||
|
['src', 'type', 'media'].forEach(function (key) { |
||||||
|
if (sourceList[key] !== undefined) { |
||||||
|
sourceElem.setAttribute(key, sourceList[key]); |
||||||
|
} |
||||||
|
}); |
||||||
|
self.$element.append(sourceElem); |
||||||
|
} |
||||||
|
}, |
||||||
|
$clearSourceList: function () { |
||||||
|
this.$element.contents().remove(); |
||||||
|
}, |
||||||
|
$formatTime: function (seconds) { |
||||||
|
if (seconds === Infinity) { |
||||||
|
return '∞'; // If the data is streaming
|
||||||
|
} |
||||||
|
var hours = parseInt(seconds / 3600, 10) % 24, |
||||||
|
minutes = parseInt(seconds / 60, 10) % 60, |
||||||
|
secs = parseInt(seconds % 60, 10), |
||||||
|
result, |
||||||
|
fragment = (minutes < 10 ? '0' + minutes : minutes) + ':' + (secs < 10 ? '0' + secs : secs); |
||||||
|
if (hours > 0) { |
||||||
|
result = (hours < 10 ? '0' + hours : hours) + ':' + fragment; |
||||||
|
} else { |
||||||
|
result = fragment; |
||||||
|
} |
||||||
|
return result; |
||||||
|
}, |
||||||
|
$attachPlaylist: function (pl) { |
||||||
|
if (pl === undefined || pl === null) { |
||||||
|
this.playlist = []; |
||||||
|
} else { |
||||||
|
this.$playlist = pl; |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* Binding function that gives life to AngularJS scope |
||||||
|
* @param {Scope} au Player Scope |
||||||
|
* @param {HTMLMediaElement} HTML5 element |
||||||
|
* @param {jQlite} element <audio>/<video> element |
||||||
|
* @return {function} |
||||||
|
* |
||||||
|
* Returns an unbinding function |
||||||
|
*/ |
||||||
|
var bindListeners = function (au, al, element) { |
||||||
|
var listeners = { |
||||||
|
playing: function () { |
||||||
|
au.$apply(function (scope) { |
||||||
|
scope.playing = true; |
||||||
|
scope.ended = false; |
||||||
|
}); |
||||||
|
}, |
||||||
|
pause: function () { |
||||||
|
au.$apply(function (scope) { |
||||||
|
scope.playing = false; |
||||||
|
}); |
||||||
|
}, |
||||||
|
ended: function () { |
||||||
|
if (!au.$selective && au.currentTrack < au.tracks) { |
||||||
|
au.next(true); |
||||||
|
} else { |
||||||
|
au.$apply(function (scope) { |
||||||
|
scope.ended = true; |
||||||
|
scope.playing = false; // IE9 does not throw 'pause' when file ends
|
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
timeupdate: throttle(1000, false, function () { |
||||||
|
au.$apply(function (scope) { |
||||||
|
scope.currentTime = al.currentTime; |
||||||
|
scope.formatTime = scope.$formatTime(scope.currentTime); |
||||||
|
}); |
||||||
|
}), |
||||||
|
loadedmetadata: function () { |
||||||
|
au.$apply(function (scope) { |
||||||
|
if (!scope.currentTrack) { scope.currentTrack++; } // This is triggered *ONLY* the first time a <source> gets loaded.
|
||||||
|
scope.duration = al.duration; |
||||||
|
scope.formatDuration = scope.$formatTime(scope.duration); |
||||||
|
if (al.buffered.length) { |
||||||
|
scope.loadPercent = Math.round((al.buffered.end(al.buffered.length - 1) / scope.duration) * 100); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
progress: function () { |
||||||
|
if (au.$domEl.buffered.length) { |
||||||
|
au.$apply(function (scope) { |
||||||
|
scope.loadPercent = Math.round((al.buffered.end(al.buffered.length - 1) / scope.duration) * 100); |
||||||
|
scope.network = 'progress'; |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
volumechange: function () { // Sent when volume changes (both when the volume is set and when the muted attribute is changed).
|
||||||
|
au.$apply(function (scope) { |
||||||
|
// scope.volume = Math.floor(al.volume * 100);
|
||||||
|
scope.volume = al.volume; |
||||||
|
scope.muted = al.muted; |
||||||
|
}); |
||||||
|
}, |
||||||
|
seeked: function () { |
||||||
|
au.$apply(function (scope) { |
||||||
|
scope.seeking = false; |
||||||
|
}); |
||||||
|
}, |
||||||
|
seeking: function () { |
||||||
|
au.$apply(function (scope) { |
||||||
|
scope.seeking = true; |
||||||
|
}); |
||||||
|
}, |
||||||
|
ratechange: function () { |
||||||
|
au.$apply(function (scope) { |
||||||
|
// scope.playbackRate = Math.floor(al.playbackRate * 100);
|
||||||
|
scope.playbackRate = al.playbackRate; |
||||||
|
}); |
||||||
|
}, |
||||||
|
stalled: function () { |
||||||
|
au.$apply(function (scope) { |
||||||
|
scope.network = 'stalled'; |
||||||
|
}); |
||||||
|
}, |
||||||
|
suspend: function () { |
||||||
|
au.$apply(function (scope) { |
||||||
|
scope.network = 'suspend'; |
||||||
|
}); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
angular.forEach(listeners, function (f, listener) { |
||||||
|
element.on(listener, f); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
var MediaPlayer = function (element) { |
||||||
|
var mediaScope = angular.extend($rootScope.$new(true), { |
||||||
|
$element: element, |
||||||
|
$domEl: element[0], |
||||||
|
$playlist: undefined, |
||||||
|
|
||||||
|
// bind TimeRanges structures to actual MediaElement
|
||||||
|
buffered: element[0].buffered, |
||||||
|
played: element[0].played, |
||||||
|
seekable: element[0].seekable, |
||||||
|
}, playerDefaults, playerMethods); |
||||||
|
bindListeners(mediaScope, element[0], element); |
||||||
|
return mediaScope; |
||||||
|
}; |
||||||
|
|
||||||
|
// creates a watch function bound to the specific player
|
||||||
|
// optimizable: closures eats ram
|
||||||
|
function playlistWatch(player) { |
||||||
|
return function (playlistNew, playlistOld, watchScope) { |
||||||
|
var currentTrack, |
||||||
|
newTrackNum = null; |
||||||
|
|
||||||
|
// on every playlist change, it refreshes the reference, safer/shorter approach
|
||||||
|
// than using multiple ifs and refresh only if it changed; there's no benefit in that
|
||||||
|
player.$attachPlaylist(playlistNew); |
||||||
|
if (playlistNew === undefined && playlistOld !== undefined) { |
||||||
|
return player.pause(); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Playlist update logic: |
||||||
|
* If the player has started -> |
||||||
|
* Check if the playing track is in the new Playlist [EXAMPLE BELOW] |
||||||
|
* If it is -> |
||||||
|
* Assign to it the new tracknumber |
||||||
|
* Else -> |
||||||
|
* If the new Playlist has some song -> |
||||||
|
* Pause the player, and get the new Playlist |
||||||
|
* Else -> |
||||||
|
* Reset the player, and await for orders |
||||||
|
* |
||||||
|
* Else (if the player hasn't started yet) |
||||||
|
* Just replace the <src> tags |
||||||
|
* |
||||||
|
* Example |
||||||
|
* playlist: [a,b,c], playing: c, trackNum: 2 |
||||||
|
* ----delay 5 sec----- |
||||||
|
* playlist: [f,a,b,c], playing: c, trackNum: 3 |
||||||
|
* |
||||||
|
*/ |
||||||
|
if (player.currentTrack) { |
||||||
|
currentTrack = playlistOld ? playlistOld[player.currentTrack - 1] : -1; |
||||||
|
for (var i = 0; i < playlistNew.length; i++) { |
||||||
|
if (angular.equals(playlistNew[i], currentTrack)) { newTrackNum = i; break; } |
||||||
|
} |
||||||
|
if (newTrackNum !== null) { // currentTrack it's still in the new playlist, update trackNumber
|
||||||
|
player.currentTrack = newTrackNum + 1; |
||||||
|
player.tracks = playlistNew.length; |
||||||
|
} else { // currentTrack has been removed.
|
||||||
|
player.pause(); |
||||||
|
if (playlistNew.length) { // if the new playlist has some elements, replace actual.
|
||||||
|
$timeout(function () { // need $timeout because the mediaTag needs a little time to launch the 'pause' event
|
||||||
|
player.$clearSourceList(); |
||||||
|
player.$addSourceList(playlistNew[0]); |
||||||
|
player.load(); |
||||||
|
player.tracks = playlistNew.length; |
||||||
|
}); |
||||||
|
} else { // the new playlist has no elements, clear actual
|
||||||
|
player.reset(); |
||||||
|
} |
||||||
|
} |
||||||
|
} else if (playlistNew.length) { // new playlist has elements, load them
|
||||||
|
player.$clearSourceList(); |
||||||
|
player.$addSourceList(playlistNew[0]); |
||||||
|
player.load(); |
||||||
|
player.tracks = playlistNew.length; |
||||||
|
} else { // new playlist has no elements, clear actual
|
||||||
|
player.reset(); |
||||||
|
} |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
/** |
||||||
|
* The directive uses the Scope in which gets declared, |
||||||
|
* so it can read/write it with ease. |
||||||
|
* The only isolated Scope here gets created for the MediaPlayer. |
||||||
|
*/ |
||||||
|
scope: false, |
||||||
|
link: function (scope, element, attrs, ctrl) { |
||||||
|
var playlistName = attrs.playlist, |
||||||
|
mediaName = attrs.mediaPlayer || attrs.playerControl; |
||||||
|
|
||||||
|
var player = new MediaPlayer(element), playlist = scope[playlistName]; |
||||||
|
// create data-structures in the father Scope
|
||||||
|
if (playlistName === undefined) { |
||||||
|
playlist = []; // local playlist gets defined as new
|
||||||
|
} else if (scope[playlistName] === undefined) { |
||||||
|
playlist = scope[playlistName] = []; // define playlist on father scope
|
||||||
|
} else { |
||||||
|
playlist = scope[playlistName]; |
||||||
|
} |
||||||
|
if (mediaName !== undefined) { |
||||||
|
scope.$eval(mediaName + ' = player', {player: player}); |
||||||
|
} |
||||||
|
|
||||||
|
if (element[0].tagName !== 'AUDIO' && element[0].tagName !== 'VIDEO') { |
||||||
|
return new Error('player directive works only when attached to an <audio>/<video> type tag'); |
||||||
|
} |
||||||
|
var mediaElement = [], |
||||||
|
sourceElements = element.find('source'); |
||||||
|
|
||||||
|
// create a single playlist element from <source> tag(s).
|
||||||
|
// if the <source> tag is one, use object notation...
|
||||||
|
if (sourceElements.length === 1) { |
||||||
|
playlist.unshift({ src: sourceElements[0].src, type: sourceElements[0].type, media: sourceElements[0].media }); |
||||||
|
} else if (sourceElements.length > 1) { // otherwise use array notation
|
||||||
|
angular.forEach(sourceElements, function (sourceElement) { |
||||||
|
mediaElement.push({ src: sourceElement.src, type: sourceElement.type, media: sourceElement.media }); |
||||||
|
}); |
||||||
|
// put mediaElement as first element in the playlist
|
||||||
|
playlist.unshift(mediaElement); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* If the user wants to keep track of the playlist changes |
||||||
|
* has to use data-playlist="variableName" in the <audio>/<video> tag |
||||||
|
* |
||||||
|
* Otherwise: it will be created an empty playlist and attached to the player. |
||||||
|
*/ |
||||||
|
if (playlistName === undefined) { |
||||||
|
player.$attachPlaylist(playlist); // empty playlist case
|
||||||
|
} else if (playlist.length) { |
||||||
|
playlistWatch(player)(playlist, undefined, scope); // playlist already populated gets bootstrapped
|
||||||
|
scope.$watch(playlistName, playlistWatch(player), true); // then watch gets applied
|
||||||
|
} else { |
||||||
|
scope.$watch(playlistName, playlistWatch(player), true); // playlist empty, only watch
|
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
}] |
||||||
|
); |
||||||
|
|
||||||
|
angular.module('mediaPlayer.helpers', []) |
||||||
|
.factory('mp.throttle', ['$timeout', function ($timeout) { |
||||||
|
return function (delay, no_trailing, callback, debounce_mode) { |
||||||
|
var timeout_id, |
||||||
|
last_exec = 0; |
||||||
|
|
||||||
|
if (typeof no_trailing !== 'boolean') { |
||||||
|
debounce_mode = callback; |
||||||
|
callback = no_trailing; |
||||||
|
no_trailing = undefined; |
||||||
|
} |
||||||
|
|
||||||
|
var wrapper = function () { |
||||||
|
var that = this, |
||||||
|
elapsed = +new Date() - last_exec, |
||||||
|
args = arguments, |
||||||
|
exec = function () { |
||||||
|
last_exec = +new Date(); |
||||||
|
callback.apply(that, args); |
||||||
|
}, |
||||||
|
clear = function () { |
||||||
|
timeout_id = undefined; |
||||||
|
}; |
||||||
|
|
||||||
|
if (debounce_mode && !timeout_id) { exec(); } |
||||||
|
if (timeout_id) { $timeout.cancel(timeout_id); } |
||||||
|
if (debounce_mode === undefined && elapsed > delay) { |
||||||
|
exec(); |
||||||
|
} else if (no_trailing !== true) { |
||||||
|
timeout_id = $timeout(debounce_mode ? clear : exec, debounce_mode === undefined ? delay - elapsed : delay); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
return wrapper; |
||||||
|
}; |
||||||
|
}]); |
||||||
Loading…
Reference in new issue