mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
extract nowplayingbar into standalone widget to work with any player
This commit is contained in:
Luke Pulverenti
parent
ad3f285ded
commit
bd697d36fc
15 changed files with 879 additions and 715 deletions
|
|
@ -13,12 +13,6 @@
|
|||
var currentPlaylistIndex = 0;
|
||||
|
||||
self.currentDurationTicks = null;
|
||||
self.currentTimeElement = null;
|
||||
self.unmuteButton = null;
|
||||
self.muteButton = null;
|
||||
self.positionSlider = null;
|
||||
self.isPositionSliderActive = null;
|
||||
self.volumeSlider = null;
|
||||
self.startTimeTicksOffset = null;
|
||||
|
||||
self.playlist = [];
|
||||
|
|
@ -45,22 +39,11 @@
|
|||
canClientSeek = duration && !isNaN(duration) && duration != Number.POSITIVE_INFINITY && duration != Number.NEGATIVE_INFINITY;
|
||||
};
|
||||
|
||||
self.updateVolumeButtons = function (vol) {
|
||||
|
||||
if (vol) {
|
||||
self.muteButton.show().prop("disabled", false);
|
||||
self.unmuteButton.hide().prop("disabled", true);
|
||||
} else {
|
||||
self.muteButton.hide().prop("disabled", true);
|
||||
self.unmuteButton.show().prop("disabled", false);
|
||||
}
|
||||
};
|
||||
|
||||
self.getCurrentTicks = function (mediaElement) {
|
||||
return Math.floor(10000000 * (mediaElement || currentMediaElement).currentTime) + self.startTimeTicksOffset;
|
||||
};
|
||||
|
||||
self.clearPauseStop = function() {
|
||||
self.clearPauseStop = function () {
|
||||
|
||||
if (self.pauseStop) {
|
||||
console.log('clearing pause stop timer');
|
||||
|
|
@ -69,31 +52,6 @@
|
|||
}
|
||||
};
|
||||
|
||||
self.onPlaybackStopped = function () {
|
||||
|
||||
self.clearPauseStop();
|
||||
|
||||
$(this).off('ended.playbackstopped');
|
||||
|
||||
self.currentTimeElement.empty();
|
||||
|
||||
var endTime = this.currentTime;
|
||||
|
||||
clearProgressInterval();
|
||||
|
||||
var position = Math.floor(10000000 * endTime) + self.startTimeTicksOffset;
|
||||
|
||||
ApiClient.reportPlaybackStopped(Dashboard.getCurrentUserId(), currentItem.Id, currentMediaSource.Id, position);
|
||||
|
||||
if (currentItem.MediaType == "Video") {
|
||||
ApiClient.stopActiveEncodings();
|
||||
if (self.isFullScreen()) {
|
||||
self.exitFullScreen();
|
||||
}
|
||||
self.resetEnhancements();
|
||||
}
|
||||
};
|
||||
|
||||
self.playNextAfterEnded = function () {
|
||||
|
||||
$(this).off('ended.playnext');
|
||||
|
|
@ -210,7 +168,7 @@
|
|||
}
|
||||
};
|
||||
|
||||
self.setCurrentTime = function (ticks, item, updateSlider) {
|
||||
self.setCurrentTime = function (ticks, positionSlider, currentTimeElement) {
|
||||
|
||||
// Convert to ticks
|
||||
ticks = Math.floor(ticks);
|
||||
|
|
@ -221,17 +179,28 @@
|
|||
|
||||
timeText += " / " + Dashboard.getDisplayTime(self.currentDurationTicks);
|
||||
|
||||
if (updateSlider) {
|
||||
if (positionSlider) {
|
||||
|
||||
var percent = ticks / self.currentDurationTicks;
|
||||
percent *= 100;
|
||||
|
||||
self.positionSlider.val(percent).slider('enable').slider('refresh');
|
||||
positionSlider.val(percent).slider('enable').slider('refresh');
|
||||
}
|
||||
} else {
|
||||
self.positionSlider.slider('disable').slider('refresh');
|
||||
|
||||
if (positionSlider) {
|
||||
|
||||
positionSlider.slider('disable').slider('refresh');
|
||||
}
|
||||
}
|
||||
|
||||
self.currentTimeElement.html(timeText);
|
||||
if (currentTimeElement) {
|
||||
currentTimeElement.html(timeText);
|
||||
}
|
||||
|
||||
var state = self.getPlayerState(currentMediaElement, currentItem, currentMediaSource);
|
||||
|
||||
$(self).trigger('positionchange', [state]);
|
||||
};
|
||||
|
||||
self.canPlayVideoDirect = function (mediaSource, videoStream, audioStream, subtitleStream, maxWidth, bitrate) {
|
||||
|
|
@ -459,8 +428,6 @@
|
|||
|
||||
var mediaElement;
|
||||
|
||||
var mediaControls = $('#nowPlayingBar');
|
||||
|
||||
if (item.MediaType === "Video") {
|
||||
|
||||
currentItem = item;
|
||||
|
|
@ -470,15 +437,12 @@
|
|||
mediaElement = self.initVideoPlayer();
|
||||
self.currentDurationTicks = currentMediaSource.RunTimeTicks;
|
||||
|
||||
mediaControls = $("#videoControls");
|
||||
|
||||
} else if (item.MediaType === "Audio") {
|
||||
|
||||
currentItem = item;
|
||||
currentMediaSource = getOptimalMediaSource(item.MediaType, item.MediaSources);
|
||||
|
||||
mediaElement = playAudio(item, currentMediaSource, startPosition);
|
||||
mediaControls.show();
|
||||
|
||||
self.currentDurationTicks = currentMediaSource.RunTimeTicks;
|
||||
|
||||
|
|
@ -488,36 +452,50 @@
|
|||
|
||||
currentMediaElement = mediaElement;
|
||||
|
||||
//display image and title
|
||||
var imageTags = item.ImageTags || {};
|
||||
var html = '';
|
||||
if (item.MediaType === "Video") {
|
||||
|
||||
self.updateNowPlayingInfo(item);
|
||||
}
|
||||
};
|
||||
|
||||
self.updateNowPlayingInfo = function (item) {
|
||||
|
||||
if (!item) {
|
||||
throw new Error('item cannot be null');
|
||||
}
|
||||
|
||||
var mediaControls = $("#videoControls");
|
||||
|
||||
var state = self.getPlayerState(currentMediaElement, item, currentMediaSource);
|
||||
|
||||
var url = "";
|
||||
|
||||
if (imageTags.Primary) {
|
||||
if (state.primaryImageTag) {
|
||||
|
||||
url = ApiClient.getImageUrl(item.Id, {
|
||||
url = ApiClient.getImageUrl(state.primaryImageItemId, {
|
||||
type: "Primary",
|
||||
height: 80,
|
||||
tag: item.ImageTags.Primary
|
||||
tag: state.primaryImageTag
|
||||
});
|
||||
}
|
||||
else if (item.BackdropImageTags && item.BackdropImageTags.length) {
|
||||
else if (state.backdropImageTag) {
|
||||
|
||||
url = ApiClient.getImageUrl(item.Id, {
|
||||
url = ApiClient.getImageUrl(state.backdropItemId, {
|
||||
type: "Backdrop",
|
||||
height: 80,
|
||||
tag: item.BackdropImageTags[0]
|
||||
tag: state.backdropImageTag,
|
||||
index: 0
|
||||
});
|
||||
} else if (imageTags.Thumb) {
|
||||
|
||||
url = ApiClient.getImageUrl(item.Id, {
|
||||
} else if (state.thumbImageTag) {
|
||||
|
||||
url = ApiClient.getImageUrl(state.thumbImageItemId, {
|
||||
type: "Thumb",
|
||||
height: 80,
|
||||
tag: item.ImageTags.Thumb
|
||||
tag: state.thumbImageTag
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
else if (item.Type == "TvChannel" || item.Type == "Recording") {
|
||||
url = "css/images/items/detail/tv.png";
|
||||
}
|
||||
|
|
@ -528,40 +506,19 @@
|
|||
url = "css/images/items/detail/video.png";
|
||||
}
|
||||
|
||||
var name = item.Name;
|
||||
var seriesName = '';
|
||||
var name = state.itemName;
|
||||
|
||||
// Channel number
|
||||
if (item.Number) {
|
||||
name = item.Number + ' ' + name;
|
||||
}
|
||||
if (item.IndexNumber != null) {
|
||||
name = item.IndexNumber + " - " + name;
|
||||
}
|
||||
if (item.ParentIndexNumber != null) {
|
||||
name = item.ParentIndexNumber + "." + name;
|
||||
}
|
||||
if (item.SeriesName || item.Album || item.ProductionYear) {
|
||||
seriesName = item.SeriesName || item.Album || item.ProductionYear;
|
||||
}
|
||||
if (item.CurrentProgram) {
|
||||
seriesName = item.CurrentProgram.Name;
|
||||
var nowPlayingTextElement = $('.nowPlayingText', mediaControls);
|
||||
|
||||
if (state.itemSubName) {
|
||||
name += '<br/>' + state.itemSubName;
|
||||
nowPlayingTextElement.addClass('nowPlayingDoubleText');
|
||||
} else {
|
||||
nowPlayingTextElement.removeClass('nowPlayingDoubleText');
|
||||
}
|
||||
|
||||
var href = LibraryBrowser.getHref(item.CurrentProgram || item);
|
||||
|
||||
var nowPlayingText = (name ? name + "\n" : "") + (seriesName || "---");
|
||||
if (item.SeriesName || item.Album || item.CurrentProgram) {
|
||||
nowPlayingText = (seriesName ? seriesName : "") + "\n" + (name || "---");
|
||||
}
|
||||
|
||||
// Fix for apostrophes and quotes
|
||||
var htmlTitle = trimTitle(nowPlayingText).replace(/'/g, ''').replace(/"/g, '"');
|
||||
html += "<div><a href='" + href + "'><img class='nowPlayingBarImage' alt='" + htmlTitle +
|
||||
"' title='" + htmlTitle + "' src='" + url + "' style='height:40px;display:inline-block;' /></a></div>";
|
||||
html += "<div class='nowPlayingText' title='" + htmlTitle + "'>" + titleHtml(nowPlayingText) + "</div>";
|
||||
|
||||
$('.nowPlayingMediaInfo', mediaControls).html(html);
|
||||
$('.nowPlayingImage', mediaControls).html('<img src="' + url + '" />');
|
||||
nowPlayingTextElement.html(name);
|
||||
};
|
||||
|
||||
self.getItemsForPlayback = function (query) {
|
||||
|
|
@ -727,51 +684,65 @@
|
|||
|
||||
self.mute = function () {
|
||||
|
||||
if (currentMediaElement) {
|
||||
currentMediaElement.volume = 0;
|
||||
currentMediaElement.muted = true;
|
||||
self.volumeSlider.val(0).slider('refresh');
|
||||
}
|
||||
self.setVolume(0);
|
||||
};
|
||||
|
||||
self.unmute = function () {
|
||||
self.unMute = function () {
|
||||
|
||||
if (currentMediaElement) {
|
||||
var volume = localStorage.getItem("volume") || self.volumeSlider.val();
|
||||
currentMediaElement.volume = volume;
|
||||
currentMediaElement.muted = false;
|
||||
self.volumeSlider.val(volume).slider('refresh');
|
||||
}
|
||||
self.setVolume(self.getSavedVolume() * 100);
|
||||
};
|
||||
|
||||
self.toggleMute = function () {
|
||||
|
||||
if (currentMediaElement) {
|
||||
var volume = localStorage.getItem("volume") || self.volumeSlider.val();
|
||||
currentMediaElement.volume = currentMediaElement.volume ? 0 : volume;
|
||||
currentMediaElement.muted = currentMediaElement.volume == 0;
|
||||
self.volumeSlider.val(volume).slider('refresh');
|
||||
|
||||
if (currentMediaElement.volume) {
|
||||
self.mute();
|
||||
} else {
|
||||
self.unMute();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
self.volumeDown = function () {
|
||||
|
||||
if (currentMediaElement) {
|
||||
currentMediaElement.volume = Math.max(currentMediaElement.volume - .02, 0);
|
||||
localStorage.setItem("volume", currentMediaElement.volume);
|
||||
self.volumeSlider.val(currentMediaElement.volume).slider('refresh');
|
||||
self.setVolume(Math.max(currentMediaElement.volume - .02, 0) * 100);
|
||||
}
|
||||
};
|
||||
|
||||
self.volumeUp = function () {
|
||||
|
||||
if (currentMediaElement) {
|
||||
currentMediaElement.volume = Math.min(currentMediaElement.volume + .02, 1);
|
||||
localStorage.setItem("volume", currentMediaElement.volume);
|
||||
self.volumeSlider.val(currentMediaElement.volume).slider('refresh');
|
||||
self.setVolume(Math.min(currentMediaElement.volume + .02, 1) * 100);
|
||||
}
|
||||
};
|
||||
|
||||
// Sets volume using a 0-100 scale
|
||||
self.setVolume = function (val) {
|
||||
|
||||
if (currentMediaElement) {
|
||||
|
||||
currentMediaElement.volume = val / 100;
|
||||
|
||||
self.onVolumeChanged(currentMediaElement);
|
||||
|
||||
self.saveVolume();
|
||||
}
|
||||
};
|
||||
|
||||
self.saveVolume = function (val) {
|
||||
|
||||
if (val) {
|
||||
localStorage.setItem("volume", val);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
self.getSavedVolume = function () {
|
||||
return localStorage.getItem("volume") || 0.5;
|
||||
};
|
||||
|
||||
self.shuffle = function (id) {
|
||||
|
||||
var userId = Dashboard.getCurrentUserId();
|
||||
|
|
@ -882,7 +853,12 @@
|
|||
|
||||
$(elem).off("ended.playnext").on("ended", function () {
|
||||
|
||||
$(this).remove();
|
||||
$(this).off();
|
||||
|
||||
if (this.tagName.toLowerCase() != 'audio') {
|
||||
$(this).remove();
|
||||
}
|
||||
|
||||
elem.src = "";
|
||||
currentMediaElement = null;
|
||||
|
||||
|
|
@ -893,8 +869,6 @@
|
|||
self.exitFullScreen();
|
||||
}
|
||||
self.resetEnhancements();
|
||||
} else {
|
||||
$('#nowPlayingBar').hide();
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -902,55 +876,150 @@
|
|||
return currentMediaElement;
|
||||
};
|
||||
|
||||
self.bindPositionSlider = function () {
|
||||
self.positionSlider.on('slidestart', function (e) {
|
||||
self.getPlayerState = function (playerElement, item, mediaSource) {
|
||||
|
||||
self.isPositionSliderActive = true;
|
||||
var itemName = '';
|
||||
var itemSubName = '';
|
||||
|
||||
}).on('slidestop', onPositionSliderChange);
|
||||
if (item) {
|
||||
|
||||
var name = item.Name;
|
||||
var seriesName = '';
|
||||
|
||||
// Channel number
|
||||
if (item.Number) {
|
||||
name = item.Number + ' ' + name;
|
||||
}
|
||||
if (item.IndexNumber != null) {
|
||||
name = item.IndexNumber + " - " + name;
|
||||
}
|
||||
if (item.ParentIndexNumber != null) {
|
||||
name = item.ParentIndexNumber + "." + name;
|
||||
}
|
||||
|
||||
if (item.CurrentProgram) {
|
||||
seriesName = item.CurrentProgram.Name;
|
||||
}
|
||||
else if (item.SeriesName || item.Album || item.ProductionYear) {
|
||||
seriesName = item.SeriesName || item.Album || item.ProductionYear;
|
||||
}
|
||||
|
||||
if (seriesName) {
|
||||
itemName = item.SeriesName || item.Album || item.CurrentProgram;
|
||||
itemSubName = name;
|
||||
} else {
|
||||
itemName = name;
|
||||
}
|
||||
}
|
||||
|
||||
var state = {
|
||||
itemId: item.Id,
|
||||
mediaSourceId: mediaSource.Id,
|
||||
volumeLevel: playerElement.volume * 100,
|
||||
isMuted: playerElement.volume == 0,
|
||||
isPaused: playerElement.paused,
|
||||
runtimeTicks: mediaSource.RunTimeTicks,
|
||||
positionTicks: self.getCurrentTicks(playerElement),
|
||||
canSeek: mediaSource.RunTimeTicks && mediaSource.RunTimeTicks > 0,
|
||||
mediaType: item.MediaType,
|
||||
itemName: itemName,
|
||||
itemSubName: itemSubName,
|
||||
itemType: item.Type
|
||||
};
|
||||
|
||||
var imageTags = item.ImageTags || {};
|
||||
|
||||
if (imageTags.Primary) {
|
||||
|
||||
state.primaryImageItemId = item.Id;
|
||||
state.primaryImageTag = imageTags.Primary;
|
||||
}
|
||||
|
||||
if (item.BackdropImageTags && item.BackdropImageTags.length) {
|
||||
|
||||
state.backdropItemId = item.Id;
|
||||
state.backdropImageTag = item.BackdropImageTags[0];
|
||||
}
|
||||
|
||||
if (imageTags.Thumb) {
|
||||
|
||||
state.thumbItemId = item.Id;
|
||||
state.thumbImageTag = imageTags.Thumb;
|
||||
}
|
||||
|
||||
return state;
|
||||
};
|
||||
|
||||
self.bindVolumeSlider = function () {
|
||||
self.volumeSlider.on('slidestop', function () {
|
||||
self.onPlaybackStart = function (playerElement, item, mediaSource) {
|
||||
|
||||
var vol = this.value;
|
||||
self.updateCanClientSeek(playerElement);
|
||||
|
||||
self.updateVolumeButtons(vol);
|
||||
currentMediaElement.volume = vol;
|
||||
});
|
||||
ApiClient.reportPlaybackStart(Dashboard.getCurrentUserId(), item.Id, mediaSource.Id, true, item.MediaType);
|
||||
|
||||
self.startProgressInterval(item.Id, mediaSource.Id);
|
||||
|
||||
var state = self.getPlayerState(playerElement, item, mediaSource);
|
||||
|
||||
$(self).trigger('playbackstart', [state]);
|
||||
};
|
||||
|
||||
self.onVolumeChanged = function (playerElement) {
|
||||
|
||||
self.saveVolume(playerElement.volume);
|
||||
|
||||
var state = self.getPlayerState(playerElement, currentItem, currentMediaSource);
|
||||
|
||||
$(self).trigger('volumechange', [state]);
|
||||
};
|
||||
|
||||
self.onPlaybackStopped = function () {
|
||||
|
||||
self.clearPauseStop();
|
||||
|
||||
var playerElement = this;
|
||||
|
||||
$(playerElement).off('ended.playbackstopped');
|
||||
|
||||
var endTime = playerElement.currentTime;
|
||||
|
||||
clearProgressInterval();
|
||||
|
||||
var position = Math.floor(10000000 * endTime) + self.startTimeTicksOffset;
|
||||
|
||||
var item = currentItem;
|
||||
var mediaSource = currentMediaSource;
|
||||
|
||||
ApiClient.reportPlaybackStopped(Dashboard.getCurrentUserId(), item.Id, mediaSource.Id, position);
|
||||
|
||||
if (item.MediaType == "Video") {
|
||||
ApiClient.stopActiveEncodings();
|
||||
if (self.isFullScreen()) {
|
||||
self.exitFullScreen();
|
||||
}
|
||||
self.resetEnhancements();
|
||||
}
|
||||
|
||||
var state = self.getPlayerState(playerElement, item, mediaSource);
|
||||
|
||||
$(self).trigger('playbackstop', [state]);
|
||||
};
|
||||
|
||||
self.onPlaystateChange = function (playerElement) {
|
||||
|
||||
var state = self.getPlayerState(playerElement, currentItem, currentMediaSource);
|
||||
|
||||
$(self).trigger('playstatechange', [state]);
|
||||
};
|
||||
|
||||
$(window).on("beforeunload popstate", function () {
|
||||
|
||||
var item = currentItem;
|
||||
var media = currentMediaElement;
|
||||
|
||||
// Try to report playback stopped before the browser closes
|
||||
if (item && media && currentProgressInterval) {
|
||||
if (currentItem && currentMediaElement && currentProgressInterval) {
|
||||
|
||||
var endTime = currentMediaElement.currentTime;
|
||||
|
||||
var position = Math.floor(10000000 * endTime) + self.startTimeTicksOffset;
|
||||
|
||||
ApiClient.reportPlaybackStopped(Dashboard.getCurrentUserId(), currentItem.Id, currentMediaSource.Id, position);
|
||||
self.onPlaybackStopped.call(currentMediaElement);
|
||||
}
|
||||
});
|
||||
|
||||
$(function () {
|
||||
initPlayer();
|
||||
});
|
||||
|
||||
function initPlayer() {
|
||||
self.muteButton = $('.muteButton');
|
||||
self.unmuteButton = $('.unmuteButton');
|
||||
self.currentTimeElement = $('.currentTime');
|
||||
self.volumeSlider = $('.volumeSlider');
|
||||
self.positionSlider = $(".positionSlider");
|
||||
|
||||
self.bindVolumeSlider();
|
||||
self.bindPositionSlider();
|
||||
}
|
||||
|
||||
function replaceQueryString(url, param, value) {
|
||||
var re = new RegExp("([?|&])" + param + "=.*?(&|$)", "i");
|
||||
if (url.match(re))
|
||||
|
|
@ -977,15 +1046,30 @@
|
|||
return testableVideoElement.canPlayType('video/webm').replace(/no/, '');
|
||||
}
|
||||
|
||||
function onPositionSliderChange() {
|
||||
function getAudioElement() {
|
||||
|
||||
self.isPositionSliderActive = false;
|
||||
var elem = $('.mediaPlayerAudio');
|
||||
|
||||
var newPercent = parseInt(this.value);
|
||||
if (elem.length) {
|
||||
return elem;
|
||||
}
|
||||
|
||||
var newPositionTicks = (newPercent / 100) * currentMediaSource.RunTimeTicks;
|
||||
var html = '';
|
||||
|
||||
self.changeStream(Math.floor(newPositionTicks));
|
||||
var requiresControls = $.browser.android || ($.browser.webkit && !$.browser.chrome);
|
||||
|
||||
if (requiresControls) {
|
||||
html += '<div class="mediaPlayerAudioContainer"><div class="mediaPlayerAudioContainerInner">';;
|
||||
} else {
|
||||
html += '<div class="mediaPlayerAudioContainer" style="display:none;"><div class="mediaPlayerAudioContainerInner">';;
|
||||
}
|
||||
|
||||
html += '<audio class="mediaPlayerAudio" preload="auto" controls>';
|
||||
html += '</audio></div></div>';
|
||||
|
||||
$(document.body).append(html);
|
||||
|
||||
return $('.mediaPlayerAudio');
|
||||
}
|
||||
|
||||
function playAudio(item, mediaSource, startPositionTicks) {
|
||||
|
|
@ -1003,18 +1087,10 @@
|
|||
audioCodec: 'mp3'
|
||||
}));
|
||||
|
||||
var aacUrl = ApiClient.getUrl('Audio/' + item.Id + '/stream.aac', $.extend({}, baseParams, {
|
||||
audioCodec: 'aac'
|
||||
}));
|
||||
|
||||
var webmUrl = ApiClient.getUrl('Audio/' + item.Id + '/stream.webm', $.extend({}, baseParams, {
|
||||
audioCodec: 'Vorbis'
|
||||
}));
|
||||
|
||||
var mediaStreams = mediaSource.MediaStreams;
|
||||
|
||||
var isStatic = false;
|
||||
var seekParam = isStatic && startPositionTicks ? '#t=' + (startPositionTicks / 10000000) : '';
|
||||
var seekParam = startPositionTicks ? '#t=' + (startPositionTicks / 10000000) : '';
|
||||
|
||||
for (var i = 0, length = mediaStreams.length; i < length; i++) {
|
||||
|
||||
|
|
@ -1024,11 +1100,7 @@
|
|||
|
||||
var container = (mediaSource.Container || '').toLowerCase();
|
||||
// Stream statically when possible
|
||||
if (container == 'aac' && stream.BitRate <= 256000) {
|
||||
aacUrl += "&static=true" + seekParam;
|
||||
isStatic = true;
|
||||
}
|
||||
else if (container == 'mp3' && stream.BitRate <= 256000) {
|
||||
if (container == 'mp3' && stream.BitRate <= 256000) {
|
||||
mp3Url += "&static=true" + seekParam;
|
||||
isStatic = true;
|
||||
}
|
||||
|
|
@ -1038,91 +1110,39 @@
|
|||
|
||||
self.startTimeTicksOffset = isStatic ? 0 : startPositionTicks;
|
||||
|
||||
var html = '';
|
||||
var initialVolume = self.getSavedVolume();
|
||||
|
||||
var requiresControls = $.browser.android || ($.browser.webkit && !$.browser.chrome);
|
||||
return getAudioElement().each(function () {
|
||||
|
||||
// Can't autoplay in these browsers so we need to use the full controls
|
||||
if (requiresControls) {
|
||||
html += '<audio preload="auto" autoplay controls>';
|
||||
} else {
|
||||
html += '<audio preload="auto" style="display:none;" autoplay>';
|
||||
}
|
||||
html += '<source type="audio/mpeg" src="' + mp3Url + '" />';
|
||||
html += '<source type="audio/aac" src="' + aacUrl + '" />';
|
||||
html += '<source type="audio/webm" src="' + webmUrl + '" />';
|
||||
html += '</audio>';
|
||||
|
||||
var nowPlayingBar = $('#nowPlayingBar').show();
|
||||
//show stop button
|
||||
$('#stopButton', nowPlayingBar).show();
|
||||
$('#playButton', nowPlayingBar).hide();
|
||||
$('#pauseButton', nowPlayingBar).show();
|
||||
$('#fullscreenButton', nowPlayingBar).hide();
|
||||
|
||||
$('#previousTrackButton', nowPlayingBar).show();
|
||||
$('#nextTrackButton', nowPlayingBar).show();
|
||||
$('#playlistButton', nowPlayingBar).show();
|
||||
|
||||
$('#qualityButton', nowPlayingBar).hide();
|
||||
$('#audioTracksButton', nowPlayingBar).hide();
|
||||
$('#subtitleButton', nowPlayingBar).hide();
|
||||
$('#chaptersButton', nowPlayingBar).hide();
|
||||
|
||||
var mediaElement = $('#mediaElement', nowPlayingBar).html(html);
|
||||
var audioElement = $("audio", mediaElement);
|
||||
|
||||
var initialVolume = localStorage.getItem("volume") || 0.5;
|
||||
|
||||
audioElement.each(function () {
|
||||
this.src = mp3Url;
|
||||
this.volume = initialVolume;
|
||||
});
|
||||
this.play();
|
||||
|
||||
self.volumeSlider.val(initialVolume).slider('refresh');
|
||||
self.updateVolumeButtons(initialVolume);
|
||||
}).on("volumechange", function () {
|
||||
|
||||
audioElement.on("volumechange", function () {
|
||||
self.onVolumeChanged(this);
|
||||
|
||||
var vol = this.volume;
|
||||
}).on("playing.once", function () {
|
||||
|
||||
localStorage.setItem("volume", vol);
|
||||
$('.mediaPlayerAudioContainer').hide();
|
||||
|
||||
self.updateVolumeButtons(vol);
|
||||
$(this).off("playing.once");
|
||||
|
||||
}).on("play.once", function () {
|
||||
|
||||
if (!requiresControls) {
|
||||
audioElement.hide();
|
||||
}
|
||||
|
||||
self.updateCanClientSeek(this);
|
||||
|
||||
audioElement.off("play.once");
|
||||
|
||||
ApiClient.reportPlaybackStart(Dashboard.getCurrentUserId(), item.Id, mediaSource.Id, true, item.MediaType);
|
||||
|
||||
self.startProgressInterval(item.Id, mediaSource.Id);
|
||||
self.onPlaybackStart(this, item, mediaSource);
|
||||
|
||||
}).on("pause", function () {
|
||||
|
||||
$('#playButton', nowPlayingBar).show();
|
||||
$('#pauseButton', nowPlayingBar).hide();
|
||||
self.onPlaystateChange(this);
|
||||
|
||||
}).on("playing", function () {
|
||||
|
||||
$('#playButton', nowPlayingBar).hide();
|
||||
$('#pauseButton', nowPlayingBar).show();
|
||||
self.onPlaystateChange(this);
|
||||
|
||||
}).on("timeupdate", function () {
|
||||
|
||||
if (!self.isPositionSliderActive) {
|
||||
self.setCurrentTime(self.getCurrentTicks(this));
|
||||
|
||||
self.setCurrentTime(self.getCurrentTicks(this), item, true);
|
||||
}
|
||||
|
||||
}).on("ended.playbackstopped", self.onPlaybackStopped).on('ended.playnext', self.playNextAfterEnded);
|
||||
|
||||
return audioElement[0];
|
||||
}).on("ended.playbackstopped", self.onPlaybackStopped).on('ended.playnext', self.playNextAfterEnded)[0];
|
||||
};
|
||||
|
||||
function canPlayAudioStreamDirect(audioStream) {
|
||||
|
|
@ -1146,27 +1166,7 @@
|
|||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
function trunc(string, len) {
|
||||
if (string.length > 0 && string.length < len) return string;
|
||||
var trimmed = $.trim(string).substring(0, len).split(" ").slice(0, -1).join(" ");
|
||||
if (trimmed) {
|
||||
trimmed += "...";
|
||||
} else {
|
||||
trimmed = "---"
|
||||
}
|
||||
return trimmed;
|
||||
};
|
||||
|
||||
function trimTitle(title) {
|
||||
return title.replace("\n---", "");
|
||||
};
|
||||
|
||||
function titleHtml(title) {
|
||||
var titles = title.split("\n");
|
||||
return (trunc(titles[0], 30) + "<br />" + trunc(titles[1], 30)).replace("---", " ");
|
||||
};
|
||||
}
|
||||
|
||||
var getItemFields = "MediaSources,Chapters";
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue