mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update video player layout
This commit is contained in:
Luke Pulverenti
parent
ae50805ba4
commit
eab5e1812e
20 changed files with 593 additions and 772 deletions
|
|
@ -93,7 +93,7 @@
|
|||
options.header = options.header || Globalize.translate('HeaderSelectMediaPath');
|
||||
options.instruction = options.instruction || "";
|
||||
|
||||
var html = '<div data-transition="fade" data-role="popup" id="popupDirectoryPicker" class="popup" style="min-width:65%;">';
|
||||
var html = '<div data-role="popup" id="popupDirectoryPicker" class="popup" style="min-width:65%;">';
|
||||
|
||||
html += '<div class="ui-bar-a" style="text-align: center; padding: 0 20px;">';
|
||||
html += '<h3>' + options.header + '</h3>';
|
||||
|
|
|
|||
|
|
@ -5,6 +5,12 @@
|
|||
|
||||
function getPromise() {
|
||||
|
||||
var id = getParameterByName('id');
|
||||
|
||||
if (id) {
|
||||
return ApiClient.getItem(Dashboard.getCurrentUserId(), id);
|
||||
}
|
||||
|
||||
var name = getParameterByName('person');
|
||||
|
||||
if (name) {
|
||||
|
|
@ -64,7 +70,7 @@
|
|||
|
||||
currentItem = item;
|
||||
|
||||
renderHeader(page, item);
|
||||
renderHeader(page, item, context);
|
||||
|
||||
var name = item.Name;
|
||||
|
||||
|
|
@ -72,8 +78,8 @@
|
|||
|
||||
$('.itemName', page).html(name);
|
||||
|
||||
renderDetails(page, item);
|
||||
renderTabs(page, item);
|
||||
renderDetails(page, item, context);
|
||||
renderTabs(page, item, context);
|
||||
|
||||
$(page).trigger('displayingitem', [{
|
||||
|
||||
|
|
@ -105,9 +111,7 @@
|
|||
});
|
||||
}
|
||||
|
||||
function renderHeader(page, item) {
|
||||
|
||||
var context = getParameterByName('context');
|
||||
function renderHeader(page, item, context) {
|
||||
|
||||
$('.itemTabs', page).hide();
|
||||
|
||||
|
|
@ -149,7 +153,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
function renderTabs(page, item) {
|
||||
function renderTabs(page, item, context) {
|
||||
|
||||
var html = '<fieldset data-role="controlgroup" data-type="horizontal" class="libraryTabs">';
|
||||
|
||||
|
|
@ -209,7 +213,6 @@
|
|||
|
||||
bindRadioEvents(page);
|
||||
|
||||
var context = getParameterByName('context');
|
||||
var selectedRadio = null;
|
||||
|
||||
if (context) {
|
||||
|
|
@ -316,7 +319,7 @@
|
|||
});
|
||||
}
|
||||
|
||||
function renderDetails(page, item) {
|
||||
function renderDetails(page, item, context) {
|
||||
|
||||
LibraryBrowser.renderDetailPageBackdrop(page, item);
|
||||
LibraryBrowser.renderOverview($('.itemOverview', page), item);
|
||||
|
|
@ -324,7 +327,7 @@
|
|||
renderUserDataIcons(page, item);
|
||||
LibraryBrowser.renderLinks($('#itemLinks', page), item);
|
||||
|
||||
LibraryBrowser.renderGenres($('.itemGenres', page), item, getParameterByName('context'));
|
||||
LibraryBrowser.renderGenres($('.itemGenres', page), item, context);
|
||||
|
||||
if (item.Type == "Person" && item.PremiereDate) {
|
||||
|
||||
|
|
|
|||
|
|
@ -1352,7 +1352,7 @@
|
|||
|
||||
var cast = casts[i];
|
||||
|
||||
html += '<a class="tileItem smallPosterTileItem" href="itembynamedetails.html?context=' + context + '&person=' + ApiClient.encodeName(cast.Name) + '">';
|
||||
html += '<a class="tileItem smallPosterTileItem" href="itembynamedetails.html?context=' + context + '&id=' + cast.Id + '">';
|
||||
|
||||
var imgUrl;
|
||||
|
||||
|
|
|
|||
|
|
@ -219,8 +219,7 @@
|
|||
html += '<tr>';
|
||||
|
||||
html += '<td class="detailTableButtonsCell">';
|
||||
html += '<button class="btnPlay" data-icon="play" type="button" data-iconpos="notext" onclick="LibraryBrowser.showPlayMenu(this, \'' + item.Id + '\', \'Audio\', \'Audio\');" data-inline="true" title="Play">Play</button>';
|
||||
html += '<button class="btnQueue" data-icon="plus" type="button" data-iconpos="notext" onclick="MediaController.queue(\'' + item.Id + '\');" data-inline="true" title="Queue">Queue</button>';
|
||||
html += '<button class="btnPlay" data-icon="play" type="button" data-iconpos="notext" onclick="LibraryBrowser.showPlayMenu(this, \'' + item.Id + '\', \'Audio\', false, \'Audio\');" data-inline="true" title="Play">Play</button>';
|
||||
html += '</td>';
|
||||
|
||||
html += '<td class="desktopColumn">' + (item.ParentIndexNumber || "") + '</td>';
|
||||
|
|
@ -301,21 +300,13 @@
|
|||
|
||||
$('.playFlyout').popup("close").remove();
|
||||
|
||||
var html = '<div data-role="popup" class="playFlyout" data-transition="fade" data-history="false">';
|
||||
var html = '<div data-role="popup" class="playFlyout" data-history="false">';
|
||||
|
||||
html += '<ul data-role="listview" style="min-width: 180px;">';
|
||||
html += '<li data-role="list-divider">Play Menu</li>';
|
||||
|
||||
html += '<li><a href="#" onclick="MediaController.play(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">Play</a></li>';
|
||||
|
||||
if (itemType == "Audio" || itemType == "MusicAlbum" || itemType == "MusicArtist" || itemType == "MusicGenre") {
|
||||
html += '<li><a href="#" onclick="MediaController.instantMix(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">Instant Mix</a></li>';
|
||||
}
|
||||
|
||||
if (isFolder || itemType == "MusicArtist" || itemType == "MusicGenre") {
|
||||
html += '<li><a href="#" onclick="MediaController.shuffle(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">Shuffle</a></li>';
|
||||
}
|
||||
|
||||
if (resumePositionTicks) {
|
||||
html += '<li><a href="#" onclick="MediaController.play({ids:[\'' + itemId + '\'],startPositionTicks:' + resumePositionTicks + '});LibraryBrowser.closePlayMenu();">Resume</a></li>';
|
||||
}
|
||||
|
|
@ -324,6 +315,14 @@
|
|||
html += '<li><a href="#" onclick="MediaController.queue(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">Queue</a></li>';
|
||||
}
|
||||
|
||||
if (itemType == "Audio" || itemType == "MusicAlbum" || itemType == "MusicArtist" || itemType == "MusicGenre") {
|
||||
html += '<li><a href="#" onclick="MediaController.instantMix(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">Instant Mix</a></li>';
|
||||
}
|
||||
|
||||
if (isFolder || itemType == "MusicArtist" || itemType == "MusicGenre") {
|
||||
html += '<li><a href="#" onclick="MediaController.shuffle(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">Shuffle</a></li>';
|
||||
}
|
||||
|
||||
html += '</ul>';
|
||||
|
||||
html += '</div>';
|
||||
|
|
@ -432,26 +431,26 @@
|
|||
return "itemdetails.html?id=" + id;
|
||||
}
|
||||
if (item.Type == "Genre") {
|
||||
return "itembynamedetails.html?genre=" + ApiClient.encodeName(item.Name);
|
||||
return "itembynamedetails.html?id=" + id;
|
||||
}
|
||||
if (item.Type == "MusicGenre") {
|
||||
return "itembynamedetails.html?musicgenre=" + ApiClient.encodeName(item.Name);
|
||||
return "itembynamedetails.html?id=" + id;
|
||||
}
|
||||
if (item.Type == "GameGenre") {
|
||||
return "itembynamedetails.html?gamegenre=" + ApiClient.encodeName(item.Name);
|
||||
return "itembynamedetails.html?id=" + id;
|
||||
}
|
||||
if (item.Type == "Studio") {
|
||||
return "itembynamedetails.html?studio=" + ApiClient.encodeName(item.Name);
|
||||
return "itembynamedetails.html?id=" + id;
|
||||
}
|
||||
if (item.Type == "Person") {
|
||||
return "itembynamedetails.html?person=" + ApiClient.encodeName(item.Name);
|
||||
return "itembynamedetails.html?id=" + id;
|
||||
}
|
||||
if (item.Type == "Recording") {
|
||||
return "livetvrecording.html?id=" + id;
|
||||
}
|
||||
|
||||
if (item.Type == "MusicArtist") {
|
||||
return "itembynamedetails.html?musicartist=" + ApiClient.encodeName(item.Name);
|
||||
return "itembynamedetails.html?id=" + id;
|
||||
}
|
||||
|
||||
if (item.IsFolder) {
|
||||
|
|
@ -1993,7 +1992,7 @@
|
|||
if (typeof (index) == "undefined") index = 0;
|
||||
|
||||
html += '<div class="galleryImageContainer">';
|
||||
html += '<a href="#pop_' + index + '_' + tag + '" data-transition="fade" data-rel="popup" data-position-to="window">';
|
||||
html += '<a href="#pop_' + index + '_' + tag + '" data-rel="popup" data-position-to="window">';
|
||||
|
||||
html += '<img class="galleryImage" src="' + LibraryBrowser.getImageUrl(item, type, index, {
|
||||
maxWidth: screenWidth,
|
||||
|
|
|
|||
|
|
@ -114,11 +114,6 @@
|
|||
|
||||
html += '<button type="button" data-mini="true" data-inline="true" data-icon="play" data-iconpos="notext" title="' + Globalize.translate('ButtonPlay') + '" onclick="' + onPlayClick + '" style="' + buttonMargin + '">' + Globalize.translate('ButtonPlay') + '</button>';
|
||||
buttonCount++;
|
||||
|
||||
if (item.MediaType == "Audio" || item.Type == "MusicAlbum") {
|
||||
html += '<button type="button" data-mini="true" data-inline="true" data-icon="plus" data-iconpos="notext" title="' + Globalize.translate('ButtonQueue') + '" onclick="MediaController.queue(\'' + item.Id + '\');return false;" style="' + buttonMargin + '">' + Globalize.translate('ButtonQueue') + '</button>';
|
||||
buttonCount++;
|
||||
}
|
||||
}
|
||||
|
||||
if (item.LocalTrailerCount && item.PlayAccess == 'Full') {
|
||||
|
|
|
|||
|
|
@ -29,14 +29,12 @@
|
|||
|
||||
self.remoteFullscreen = function () {
|
||||
|
||||
var videoControls = $("#videoControls");
|
||||
|
||||
if (remoteFullscreen) {
|
||||
exitFullScreenToWindow();
|
||||
videoControls.removeClass("inactive");
|
||||
$('.hiddenOnIdle').removeClass("inactive");
|
||||
} else {
|
||||
enterFullScreen();
|
||||
videoControls.addClass("inactive");
|
||||
$('.hiddenOnIdle').addClass("inactive");
|
||||
}
|
||||
|
||||
remoteFullscreen = !remoteFullscreen;
|
||||
|
|
@ -65,9 +63,8 @@
|
|||
self.resetEnhancements = function () {
|
||||
$("#mediaPlayer").hide();
|
||||
$('#videoPlayer').removeClass('fullscreenVideo');
|
||||
$("#videoControls").removeClass("inactive");
|
||||
$('.hiddenOnIdle').removeClass("inactive");
|
||||
$("video").remove();
|
||||
$("html").css("cursor", "default");
|
||||
};
|
||||
|
||||
self.exitFullScreen = function () {
|
||||
|
|
@ -90,53 +87,38 @@
|
|||
|
||||
self.showSubtitleMenu = function () {
|
||||
|
||||
var flyout = $('#video-subtitleFlyout');
|
||||
var elem = $('.videoSubtitlePopup').html(getSubtitleTracksHtml())
|
||||
.trigger('create')
|
||||
.popup("option", "positionTo", $('.videoSubtitleButton'));
|
||||
|
||||
if (!flyout.is(':visible')) {
|
||||
|
||||
flyout.html(getSubtitleTracksHtml()).trigger('create').scrollTop(0);
|
||||
toggleFlyout(flyout, '#video-subtitleButton');
|
||||
|
||||
} else {
|
||||
toggleFlyout(flyout, '#video-subtitleButton');
|
||||
}
|
||||
elem.popup("open").parents(".ui-popup-container").css("margin-top", 30);
|
||||
};
|
||||
|
||||
self.showQualityFlyout = function () {
|
||||
|
||||
var flyout = $('.video-qualityFlyout');
|
||||
var elem = $('.videoQualityPopup').html(getQualityFlyoutHtml())
|
||||
.trigger('create')
|
||||
.popup("option", "positionTo", $('.videoQualityButton'));
|
||||
|
||||
if (!flyout.is(':visible')) {
|
||||
flyout.html(getQualityFlyoutHtml()).scrollTop(0);
|
||||
}
|
||||
|
||||
toggleFlyout(flyout, '.video-qualityButton');
|
||||
|
||||
//$('.videoQualityPopup').html(getQualityFlyoutHtml()).trigger('create').popup('open');
|
||||
elem.popup("open").parents(".ui-popup-container").css("margin-top", 30);
|
||||
};
|
||||
|
||||
self.showChaptersFlyout = function () {
|
||||
|
||||
var flyout = $('#video-chaptersFlyout');
|
||||
var elem = $('.videoChaptersPopup').html(getChaptersFlyoutHtml())
|
||||
.trigger('create')
|
||||
.popup("option", "positionTo", $('.videoChaptersButton'));
|
||||
|
||||
if (!flyout.is(':visible')) {
|
||||
flyout.html(getChaptersFlyoutHtml()).scrollTop(0);
|
||||
}
|
||||
|
||||
toggleFlyout(flyout, '#video-chaptersButton');
|
||||
elem.popup("open").parents(".ui-popup-container").css("margin-top", 30);
|
||||
};
|
||||
|
||||
self.showAudioTracksFlyout = function () {
|
||||
|
||||
var flyout = $('#video-audioTracksFlyout');
|
||||
var elem = $('.videoAudioPopup').html(getAudioTracksHtml())
|
||||
.trigger('create')
|
||||
.popup("option", "positionTo", $('.videoAudioButton'));
|
||||
|
||||
if (!flyout.is(':visible')) {
|
||||
|
||||
flyout.html(getAudioTracksHtml()).trigger('create').scrollTop(0);
|
||||
toggleFlyout(flyout, '#video-audioTracksButton');
|
||||
} else {
|
||||
toggleFlyout(flyout, '#video-audioTracksButton');
|
||||
}
|
||||
elem.popup("open").parents(".ui-popup-container").css("margin-top", 30);
|
||||
};
|
||||
|
||||
self.setAudioStreamIndex = function (index) {
|
||||
|
|
@ -250,6 +232,84 @@
|
|||
});
|
||||
};
|
||||
|
||||
self.updateNowPlayingInfo = function (item) {
|
||||
|
||||
if (!item) {
|
||||
throw new Error('item cannot be null');
|
||||
}
|
||||
|
||||
var mediaControls = $("#videoPlayer");
|
||||
|
||||
var state = self.getPlayerStateInternal(self.currentMediaElement, item, self.currentMediaSource);
|
||||
|
||||
var url = "";
|
||||
|
||||
if (state.NowPlayingItem.PrimaryImageTag) {
|
||||
|
||||
url = ApiClient.getScaledImageUrl(state.NowPlayingItem.PrimaryImageItemId, {
|
||||
type: "Primary",
|
||||
width: 150,
|
||||
tag: state.NowPlayingItem.PrimaryImageTag
|
||||
});
|
||||
}
|
||||
else if (state.NowPlayingItem.PrimaryImageTag) {
|
||||
|
||||
url = ApiClient.getScaledImageUrl(state.NowPlayingItem.PrimaryImageItemId, {
|
||||
type: "Primary",
|
||||
width: 150,
|
||||
tag: state.NowPlayingItem.PrimaryImageTag
|
||||
});
|
||||
}
|
||||
else if (state.NowPlayingItem.BackdropImageTag) {
|
||||
|
||||
url = ApiClient.getScaledImageUrl(state.NowPlayingItem.BackdropItemId, {
|
||||
type: "Backdrop",
|
||||
height: 300,
|
||||
tag: state.NowPlayingItem.BackdropImageTag,
|
||||
index: 0
|
||||
});
|
||||
|
||||
}
|
||||
else if (state.NowPlayingItem.ThumbImageTag) {
|
||||
|
||||
url = ApiClient.getScaledImageUrl(state.NowPlayingItem.ThumbImageItemId, {
|
||||
type: "Thumb",
|
||||
height: 300,
|
||||
tag: state.NowPlayingItem.ThumbImageTag
|
||||
});
|
||||
}
|
||||
|
||||
var nowPlayingTextElement = $('.nowPlayingText', mediaControls);
|
||||
var nameHtml = self.getNowPlayingNameHtml(state);
|
||||
|
||||
if (nameHtml.indexOf('<br/>') != -1) {
|
||||
nowPlayingTextElement.addClass('nowPlayingDoubleText');
|
||||
} else {
|
||||
nowPlayingTextElement.removeClass('nowPlayingDoubleText');
|
||||
}
|
||||
|
||||
if (url) {
|
||||
$('.nowPlayingImage', mediaControls).html('<img src="' + url + '" />');
|
||||
} else {
|
||||
$('.nowPlayingImage', mediaControls).html('');
|
||||
}
|
||||
|
||||
if (state.NowPlayingItem.LogoItemId) {
|
||||
|
||||
url = ApiClient.getScaledImageUrl(state.NowPlayingItem.LogoItemId, {
|
||||
type: "Logo",
|
||||
height: 40,
|
||||
tag: state.NowPlayingItem.LogoImageTag
|
||||
});
|
||||
|
||||
$('.videoTopControlsLogo', mediaControls).html('<img src="' + url + '" />');
|
||||
} else {
|
||||
$('.videoTopControlsLogo', mediaControls).html('');
|
||||
}
|
||||
|
||||
nowPlayingTextElement.html(nameHtml);
|
||||
};
|
||||
|
||||
function onPositionSliderChange() {
|
||||
|
||||
isPositionSliderActive = false;
|
||||
|
|
@ -282,40 +342,40 @@
|
|||
self.setVolume(vol * 100);
|
||||
});
|
||||
|
||||
$('#video-chaptersFlyout').on('click', '.mediaFlyoutOption', function () {
|
||||
$('.videoChaptersPopup').on('click', '.mediaPopupOption', function () {
|
||||
|
||||
var ticks = parseInt(this.getAttribute('data-positionticks'));
|
||||
|
||||
self.changeStream(ticks);
|
||||
|
||||
hideFlyout($('#video-chaptersFlyout'));
|
||||
$('.videoChaptersPopup').popup('close');
|
||||
});
|
||||
|
||||
$('#video-audioTracksFlyout').on('click', '.mediaFlyoutOption', function () {
|
||||
$('.videoAudioPopup').on('click', '.mediaPopupOption', function () {
|
||||
|
||||
if (!$(this).hasClass('selectedMediaFlyoutOption')) {
|
||||
if (!$(this).hasClass('selectedMediaPopupOption')) {
|
||||
var index = parseInt(this.getAttribute('data-index'));
|
||||
|
||||
self.setAudioStreamIndex(index);
|
||||
}
|
||||
|
||||
hideFlyout($('#video-audioTracksFlyout'));
|
||||
$('.videoAudioPopup').popup('close');
|
||||
});
|
||||
|
||||
$('#video-subtitleFlyout').on('click', '.mediaFlyoutOption', function () {
|
||||
$('.videoSubtitlePopup').on('click', '.mediaPopupOption', function () {
|
||||
|
||||
if (!$(this).hasClass('selectedMediaFlyoutOption')) {
|
||||
if (!$(this).hasClass('selectedMediaPopupOption')) {
|
||||
var index = parseInt(this.getAttribute('data-index'));
|
||||
|
||||
self.setSubtitleStreamIndex(index);
|
||||
}
|
||||
|
||||
hideFlyout($('#video-subtitleFlyout'));
|
||||
$('.videoSubtitlePopup').popup('close');
|
||||
});
|
||||
|
||||
$('.video-qualityFlyout').on('click', '.mediaFlyoutOption', function () {
|
||||
$('.videoQualityPopup').on('click', '.mediaPopupOption', function () {
|
||||
|
||||
if (!$(this).hasClass('selectedMediaFlyoutOption')) {
|
||||
if (!$(this).hasClass('selectedMediaPopupOption')) {
|
||||
|
||||
var maxWidth = parseInt(this.getAttribute('data-maxwidth'));
|
||||
var bitrate = parseInt(this.getAttribute('data-bitrate'));
|
||||
|
|
@ -329,14 +389,14 @@
|
|||
});
|
||||
}
|
||||
|
||||
hideFlyout($('.video-qualityFlyout'));
|
||||
$('.videoQualityPopup').popup('close');
|
||||
});
|
||||
|
||||
var trackChange = false;
|
||||
|
||||
var tooltip = $('<div id="slider-tooltip"></div>');
|
||||
|
||||
$("#videoControls .positionSliderContainer .slider").on("change", function (e) {
|
||||
$(".videoControls .positionSliderContainer .slider").on("change", function (e) {
|
||||
if (!trackChange) return;
|
||||
|
||||
var pct = $(this).val();
|
||||
|
|
@ -352,7 +412,7 @@
|
|||
}).on("slidestart", function (e) {
|
||||
trackChange = true;
|
||||
|
||||
var handle = $("#videoControls .positionSliderContainer .ui-slider-handle");
|
||||
var handle = $(".videoControls .positionSliderContainer .ui-slider-handle");
|
||||
|
||||
handle.after(tooltip);
|
||||
}).on("slidestop", function (e) {
|
||||
|
|
@ -361,32 +421,42 @@
|
|||
tooltip.remove();
|
||||
});
|
||||
|
||||
$('.video-qualityButton').on('click', function () {
|
||||
$('.videoSubtitleButton').on('click', function () {
|
||||
|
||||
self.showSubtitleMenu();
|
||||
});
|
||||
|
||||
$('.videoQualityButton').on('click', function () {
|
||||
|
||||
self.showQualityFlyout();
|
||||
});
|
||||
|
||||
$('.videoAudioButton').on('click', function () {
|
||||
|
||||
self.showAudioTracksFlyout();
|
||||
});
|
||||
|
||||
$('.videoChaptersButton').on('click', function () {
|
||||
|
||||
self.showChaptersFlyout();
|
||||
});
|
||||
});
|
||||
|
||||
function idleHandler() {
|
||||
|
||||
var video = $(".itemVideo");
|
||||
var videoControls = $("#videoControls");
|
||||
|
||||
if (timeout) {
|
||||
window.clearTimeout(timeout);
|
||||
}
|
||||
|
||||
if (idleState == true) {
|
||||
video.removeClass("cursor-inactive");
|
||||
videoControls.removeClass("inactive").addClass("active");
|
||||
$('.hiddenOnIdle').removeClass("inactive");
|
||||
}
|
||||
|
||||
idleState = false;
|
||||
|
||||
timeout = window.setTimeout(function () {
|
||||
idleState = true;
|
||||
video.addClass("cursor-inactive");
|
||||
videoControls.removeClass("active").addClass("inactive");
|
||||
$('.hiddenOnIdle').addClass("inactive");
|
||||
}, 4000);
|
||||
}
|
||||
|
||||
|
|
@ -434,99 +504,76 @@
|
|||
|
||||
}
|
||||
|
||||
function toggleFlyout(flyout, button) {
|
||||
|
||||
$(document.body).off("mousedown.mediaflyout").on("mousedown.mediaflyout", function (e) {
|
||||
|
||||
var elem = $(e.target);
|
||||
|
||||
var flyoutId = flyout[0].id;
|
||||
var safeItems = button + ',#' + flyoutId;
|
||||
|
||||
if (!elem.is(safeItems) && !elem.parents(safeItems).length) {
|
||||
|
||||
hideFlyout(flyout);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
var visible = $(flyout).is(":visible");
|
||||
|
||||
if (!visible) {
|
||||
|
||||
flyout.slideDown();
|
||||
|
||||
} else {
|
||||
|
||||
$(button).blur();
|
||||
|
||||
hideFlyout(flyout);
|
||||
}
|
||||
}
|
||||
|
||||
function hideFlyout(flyout) {
|
||||
|
||||
flyout.slideUp().empty();
|
||||
|
||||
$(document.body).off("mousedown.hidesearchhints");
|
||||
}
|
||||
|
||||
|
||||
function getChaptersFlyoutHtml() {
|
||||
|
||||
var html = '';
|
||||
|
||||
var item = self.currentItem;
|
||||
var currentTicks = self.getCurrentTicks();
|
||||
var chapters = item.Chapters || [];
|
||||
|
||||
var chapters = self.currentItem.Chapters || [];
|
||||
var html = '';
|
||||
html += '<div class="videoPlayerPopupContent">';
|
||||
html += '<ul data-role="listview" data-inset="true"><li data-role="list-divider">Scenes</li>';
|
||||
html += '</ul>';
|
||||
|
||||
for (var i = 0, length = chapters.length; i < length; i++) {
|
||||
html += '<div class="videoPlayerPopupScroller">';
|
||||
html += '<ul data-role="listview" data-inset="true">';
|
||||
|
||||
var chapter = chapters[i];
|
||||
var index = 0;
|
||||
|
||||
var isSelected = false;
|
||||
html += chapters.map(function (chapter) {
|
||||
|
||||
var cssClass = "mediaPopupOption";
|
||||
|
||||
var selected = false;
|
||||
|
||||
if (currentTicks >= chapter.StartPositionTicks) {
|
||||
|
||||
var nextChapter = chapters[i + 1];
|
||||
|
||||
isSelected = !nextChapter || currentTicks < nextChapter.StartPositionTicks;
|
||||
var nextChapter = chapters[index + 1];
|
||||
selected = !nextChapter || currentTicks < nextChapter.StartPositionTicks;
|
||||
}
|
||||
|
||||
if (isSelected) {
|
||||
html += '<div data-positionticks="' + chapter.StartPositionTicks + '" class="mediaFlyoutOption selectedMediaFlyoutOption">';
|
||||
} else {
|
||||
html += '<div data-positionticks="' + chapter.StartPositionTicks + '" class="mediaFlyoutOption">';
|
||||
}
|
||||
var optionHtml = '<li><a data-positionticks="' + chapter.StartPositionTicks + '" class="' + cssClass + '" href="#" style="padding-top:0;padding-bottom:0;">';
|
||||
|
||||
var imgUrl;
|
||||
var imgUrl = "css/images/media/chapterflyout.png";
|
||||
|
||||
if (chapter.ImageTag) {
|
||||
|
||||
imgUrl = ApiClient.getScaledImageUrl(self.currentItem.Id, {
|
||||
maxWidth: 100,
|
||||
optionHtml += '<img src="' + imgUrl + '" style="visibility:hidden;" />';
|
||||
imgUrl = ApiClient.getScaledImageUrl(item.Id, {
|
||||
width: 160,
|
||||
tag: chapter.ImageTag,
|
||||
type: "Chapter",
|
||||
index: i
|
||||
index: index
|
||||
});
|
||||
optionHtml += '<div class="videoChapterPopupImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
|
||||
|
||||
} else {
|
||||
imgUrl = "css/images/media/chapterflyout.png";
|
||||
optionHtml += '<img src="' + imgUrl + '" />';
|
||||
}
|
||||
|
||||
html += '<img class="mediaFlyoutOptionImage" src="' + imgUrl + '" />';
|
||||
// TODO: Add some indicator if selected = true
|
||||
|
||||
html += '<div class="mediaFlyoutOptionContent">';
|
||||
optionHtml += '<p style="margin:12px 0 0;">';
|
||||
|
||||
var name = chapter.Name || "Chapter " + (i + 1);
|
||||
var textLines = [];
|
||||
textLines.push(chapter.Name);
|
||||
textLines.push(Dashboard.getDisplayTime(chapter.StartPositionTicks));
|
||||
|
||||
html += '<div class="mediaFlyoutOptionName">' + name + '</div>';
|
||||
html += '<div class="mediaFlyoutOptionSecondaryText">' + Dashboard.getDisplayTime(chapter.StartPositionTicks) + '</div>';
|
||||
optionHtml += textLines.join('<br/>');
|
||||
|
||||
html += '</div>';
|
||||
optionHtml += '</p>';
|
||||
|
||||
html += "</div>";
|
||||
}
|
||||
optionHtml += '</a></li>';
|
||||
|
||||
index++;
|
||||
|
||||
return optionHtml;
|
||||
|
||||
}).join('');
|
||||
|
||||
html += '</ul>';
|
||||
html += '</div>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
return html;
|
||||
}
|
||||
|
|
@ -540,61 +587,73 @@
|
|||
var currentIndex = getParameterByName('AudioStreamIndex', self.currentMediaElement.currentSrc);
|
||||
|
||||
var html = '';
|
||||
html += '<div class="videoPlayerPopupContent">';
|
||||
html += '<ul data-role="listview" data-inset="true"><li data-role="list-divider">Audio Tracks</li>';
|
||||
html += '</ul>';
|
||||
|
||||
for (var i = 0, length = streams.length; i < length; i++) {
|
||||
html += '<div class="videoPlayerPopupScroller">';
|
||||
html += '<ul data-role="listview" data-inset="true">';
|
||||
|
||||
var stream = streams[i];
|
||||
html += streams.map(function (stream) {
|
||||
|
||||
if (stream.Index == currentIndex) {
|
||||
html += '<div data-index="' + stream.Index + '" class="mediaFlyoutOption selectedMediaFlyoutOption">';
|
||||
} else {
|
||||
html += '<div data-index="' + stream.Index + '" class="mediaFlyoutOption">';
|
||||
var cssClass = "mediaPopupOption";
|
||||
|
||||
var selected = stream.Index == currentIndex;
|
||||
|
||||
if (selected) {
|
||||
cssClass += ' selectedMediaPopupOption';
|
||||
}
|
||||
|
||||
html += '<img class="mediaFlyoutOptionImage" src="css/images/media/audioflyout.png" />';
|
||||
var optionHtml = '<li><a data-index="' + stream.Index + '" class="' + cssClass + '" href="#">';
|
||||
|
||||
html += '<div class="mediaFlyoutOptionContent">';
|
||||
optionHtml += '<p style="margin:0;">';
|
||||
|
||||
html += '<div class="mediaFlyoutOptionName">' + (stream.Language || 'Unknown language') + '</div>';
|
||||
if (selected) {
|
||||
optionHtml += '<img src="css/images/checkmarkgreen.png" style="width:18px;border-radius:3px;margin-right:.5em;vertical-align:middle;" />';
|
||||
}
|
||||
|
||||
var options = [];
|
||||
var textLines = [];
|
||||
textLines.push(stream.Language || 'Unknown language');
|
||||
|
||||
var attributes = [];
|
||||
|
||||
if (stream.Codec) {
|
||||
options.push(stream.Codec);
|
||||
attributes.push(stream.Codec);
|
||||
}
|
||||
if (stream.Profile) {
|
||||
options.push(stream.Profile);
|
||||
attributes.push(stream.Profile);
|
||||
}
|
||||
|
||||
if (stream.BitRate) {
|
||||
options.push((Math.floor(stream.BitRate / 1000)) + ' kbps');
|
||||
attributes.push((Math.floor(stream.BitRate / 1000)) + ' kbps');
|
||||
}
|
||||
|
||||
if (stream.Channels) {
|
||||
options.push(stream.Channels + ' ch');
|
||||
attributes.push(stream.Channels + ' ch');
|
||||
}
|
||||
|
||||
if (options.length) {
|
||||
html += '<div class="mediaFlyoutOptionSecondaryText">' + options.join(' • ') + '</div>';
|
||||
}
|
||||
|
||||
options = [];
|
||||
|
||||
if (stream.IsDefault) {
|
||||
options.push('Default');
|
||||
}
|
||||
if (stream.IsForced) {
|
||||
options.push('Forced');
|
||||
attributes.push('(D)');
|
||||
}
|
||||
|
||||
if (options.length) {
|
||||
html += '<div class="mediaFlyoutOptionSecondaryText">' + options.join(' • ') + '</div>';
|
||||
if (attributes.length) {
|
||||
textLines.push(attributes.join(' • '));
|
||||
}
|
||||
|
||||
html += "</div>";
|
||||
optionHtml += textLines.join('<br/>');
|
||||
|
||||
html += "</div>";
|
||||
}
|
||||
optionHtml += '</p>';
|
||||
|
||||
optionHtml += '</a></li>';
|
||||
|
||||
return optionHtml;
|
||||
|
||||
}).join('');
|
||||
|
||||
html += '</ul>';
|
||||
html += '</div>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
return html;
|
||||
}
|
||||
|
|
@ -607,75 +666,80 @@
|
|||
|
||||
var currentIndex = self.currentSubtitleStreamIndex || -1;
|
||||
|
||||
var html = '';
|
||||
|
||||
streams.unshift({
|
||||
Index: -1,
|
||||
Language: "Off"
|
||||
});
|
||||
|
||||
for (var i = 0, length = streams.length; i < length; i++) {
|
||||
var html = '';
|
||||
html += '<div class="videoPlayerPopupContent">';
|
||||
html += '<ul data-role="listview" data-inset="true"><li data-role="list-divider">Subtitles</li>';
|
||||
html += '</ul>';
|
||||
|
||||
var stream = streams[i];
|
||||
html += '<div class="videoPlayerPopupScroller">';
|
||||
html += '<ul data-role="listview" data-inset="true">';
|
||||
|
||||
if (stream.Index == currentIndex) {
|
||||
html += '<div data-index="' + stream.Index + '" class="mediaFlyoutOption selectedMediaFlyoutOption">';
|
||||
} else {
|
||||
html += '<div data-index="' + stream.Index + '" class="mediaFlyoutOption">';
|
||||
html += streams.map(function (stream) {
|
||||
|
||||
var cssClass = "mediaPopupOption";
|
||||
|
||||
var selected = stream.Index == currentIndex;
|
||||
|
||||
if (selected) {
|
||||
cssClass += ' selectedMediaPopupOption';
|
||||
}
|
||||
|
||||
if (stream.Index != -1) {
|
||||
html += '<img class="mediaFlyoutOptionImage" src="css/images/media/subtitleflyout.png" />';
|
||||
} else {
|
||||
html += '<div class="mediaFlyoutOptionImage"></div>';
|
||||
var optionHtml = '<li><a data-index="' + stream.Index + '" class="' + cssClass + '" href="#">';
|
||||
|
||||
optionHtml += '<p style="margin:0;">';
|
||||
|
||||
if (selected) {
|
||||
optionHtml += '<img src="css/images/checkmarkgreen.png" style="width:18px;border-radius:3px;margin-right:.5em;vertical-align:middle;" />';
|
||||
}
|
||||
|
||||
html += '<div class="mediaFlyoutOptionContent">';
|
||||
|
||||
var options = [];
|
||||
|
||||
if (stream.Language == "Off") {
|
||||
options.push(' ');
|
||||
}
|
||||
|
||||
html += '<div class="mediaFlyoutOptionName">' + (stream.Language || 'Unknown language') + '</div>';
|
||||
var textLines = [];
|
||||
textLines.push(stream.Language || 'Unknown language');
|
||||
|
||||
if (stream.Codec) {
|
||||
options.push(stream.Codec);
|
||||
textLines.push(stream.Codec);
|
||||
}
|
||||
|
||||
if (options.length) {
|
||||
html += '<div class="mediaFlyoutOptionSecondaryText">' + options.join(' • ') + '</div>';
|
||||
}
|
||||
|
||||
options = [];
|
||||
var attributes = [];
|
||||
|
||||
if (stream.IsDefault) {
|
||||
options.push('Default');
|
||||
attributes.push('Default');
|
||||
}
|
||||
if (stream.IsForced) {
|
||||
options.push('Forced');
|
||||
attributes.push('Forced');
|
||||
}
|
||||
if (stream.IsExternal) {
|
||||
options.push('External');
|
||||
attributes.push('External');
|
||||
}
|
||||
|
||||
if (options.length) {
|
||||
html += '<div class="mediaFlyoutOptionSecondaryText">' + options.join(' • ') + '</div>';
|
||||
if (attributes.length) {
|
||||
textLines.push(attributes.join(' • '));
|
||||
}
|
||||
|
||||
html += "</div>";
|
||||
optionHtml += textLines.join('<br/>');
|
||||
|
||||
html += "</div>";
|
||||
}
|
||||
optionHtml += '</p>';
|
||||
|
||||
optionHtml += '</a></li>';
|
||||
|
||||
return optionHtml;
|
||||
|
||||
}).join('');
|
||||
|
||||
html += '</ul>';
|
||||
html += '</div>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
function getQualityFlyoutHtml() {
|
||||
|
||||
var html = '';
|
||||
|
||||
var currentSrc = self.currentMediaElement.currentSrc.toLowerCase();
|
||||
var isStatic = currentSrc.indexOf('static=true') != -1;
|
||||
|
||||
|
|
@ -689,26 +753,44 @@
|
|||
options[0].name = "Direct";
|
||||
}
|
||||
|
||||
for (var i = 0, length = options.length; i < length; i++) {
|
||||
var html = '';
|
||||
html += '<div class="videoPlayerPopupContent">';
|
||||
html += '<ul data-role="listview" data-inset="true"><li data-role="list-divider">Video Quality</li>';
|
||||
html += '</ul>';
|
||||
|
||||
var option = options[i];
|
||||
html += '<div class="videoPlayerPopupScroller">';
|
||||
html += '<ul data-role="listview" data-inset="true">';
|
||||
|
||||
var cssClass = "mediaFlyoutOption";
|
||||
html += options.map(function (option) {
|
||||
|
||||
var cssClass = "mediaPopupOption";
|
||||
|
||||
if (option.selected) {
|
||||
cssClass += " selectedMediaFlyoutOption";
|
||||
cssClass += ' selectedMediaPopupOption';
|
||||
}
|
||||
|
||||
html += '<div data-maxwidth="' + option.maxWidth + '" data-bitrate="' + option.bitrate + '" class="' + cssClass + '">';
|
||||
var optionHtml = '<li><a data-maxwidth="' + option.maxWidth + '" data-bitrate="' + option.bitrate + '" class="' + cssClass + '" href="#">';
|
||||
|
||||
html += '<div class="mediaFlyoutOptionContent">';
|
||||
optionHtml += '<p style="margin:0;">';
|
||||
|
||||
html += '<div class="mediaFlyoutOptionName" style="padding:.5em;">' + option.name + '</div>';
|
||||
if (option.selected) {
|
||||
optionHtml += '<img src="css/images/checkmarkgreen.png" style="width:18px;border-radius:3px;margin-right:.5em;vertical-align:middle;" />';
|
||||
}
|
||||
|
||||
html += "</div>";
|
||||
optionHtml += option.name;
|
||||
|
||||
html += "</div>";
|
||||
}
|
||||
optionHtml += '</p>';
|
||||
|
||||
optionHtml += '</a></li>';
|
||||
|
||||
return optionHtml;
|
||||
|
||||
}).join('');
|
||||
|
||||
html += '</ul>';
|
||||
html += '</div>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
return html;
|
||||
}
|
||||
|
|
@ -805,7 +887,8 @@
|
|||
$('.itemVideo').on('mousemove.videoplayer keydown.videoplayer scroll.videoplayer', idleHandler).trigger('mousemove');
|
||||
|
||||
} else {
|
||||
$('#videoControls').removeClass("active inactive");
|
||||
$('.hiddenOnIdle').removeClass("inactive");
|
||||
|
||||
exitFullScreenToWindow();
|
||||
}
|
||||
|
||||
|
|
@ -897,7 +980,7 @@
|
|||
|
||||
self.startTimeTicksOffset = isStatic ? 0 : startPosition || 0;
|
||||
|
||||
var seekParam = isStatic && startPosition ? '#t=' + (startPosition / 10000000) : '';
|
||||
var seekParam = startPosition ? '#t=' + (startPosition / 10000000) : '';
|
||||
|
||||
var mp4VideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.mp4', $.extend({}, baseParams, {
|
||||
Static: isStatic,
|
||||
|
|
@ -911,7 +994,9 @@
|
|||
|
||||
// None of the browsers seem to like this
|
||||
EnableAutoStreamCopy: false
|
||||
})) + seekParam;
|
||||
}));
|
||||
|
||||
if (isStatic) mp4VideoUrl += seekParam;
|
||||
|
||||
var webmVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.webm', $.extend({}, baseParams, {
|
||||
VideoCodec: 'vpx',
|
||||
|
|
@ -920,36 +1005,49 @@
|
|||
videoBitrate: webmQuality.videoBitrate,
|
||||
audioBitrate: webmQuality.audioBitrate,
|
||||
EnableAutoStreamCopy: false
|
||||
})) + seekParam;
|
||||
}));
|
||||
|
||||
var hlsVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.m3u8', $.extend({}, baseParams, {
|
||||
timeStampOffsetMs: 0,
|
||||
maxWidth: m3U8Quality.maxWidth,
|
||||
videoBitrate: m3U8Quality.videoBitrate,
|
||||
audioBitrate: m3U8Quality.audioBitrate,
|
||||
VideoCodec: m3U8Quality.videoCodec,
|
||||
AudioCodec: m3U8Quality.audioCodec,
|
||||
profile: 'baseline',
|
||||
level: '3'
|
||||
})) + seekParam;
|
||||
if (isStatic) webmVideoUrl += seekParam;
|
||||
|
||||
var hlsVideoUrl;
|
||||
|
||||
if (item.RunTimeTicks) {
|
||||
hlsVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/master.m3u8', $.extend({}, baseParams, {
|
||||
timeStampOffsetMs: 0,
|
||||
maxWidth: m3U8Quality.maxWidth,
|
||||
videoBitrate: m3U8Quality.videoBitrate,
|
||||
audioBitrate: m3U8Quality.audioBitrate,
|
||||
VideoCodec: m3U8Quality.videoCodec,
|
||||
AudioCodec: m3U8Quality.audioCodec,
|
||||
profile: 'baseline',
|
||||
level: '3',
|
||||
StartTimeTicks: 0
|
||||
|
||||
})) + seekParam;
|
||||
|
||||
} else {
|
||||
hlsVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.m3u8', $.extend({}, baseParams, {
|
||||
timeStampOffsetMs: 0,
|
||||
maxWidth: m3U8Quality.maxWidth,
|
||||
videoBitrate: m3U8Quality.videoBitrate,
|
||||
audioBitrate: m3U8Quality.audioBitrate,
|
||||
VideoCodec: m3U8Quality.videoCodec,
|
||||
AudioCodec: m3U8Quality.audioCodec,
|
||||
profile: 'baseline',
|
||||
level: '3'
|
||||
})) + seekParam;
|
||||
}
|
||||
|
||||
//======================================================================================>
|
||||
|
||||
// Show loading animation
|
||||
$("html").css("cursor", "wait");
|
||||
|
||||
// Create video player
|
||||
var html = '';
|
||||
|
||||
var requiresControls = $.browser.msie || $.browser.android || ($.browser.webkit && !$.browser.chrome);
|
||||
var requiresNativeControls = $.browser.msie || $.browser.mobile;
|
||||
|
||||
// Can't autoplay in these browsers so we need to use the full controls
|
||||
if (requiresControls) {
|
||||
if ($.browser.msie) {
|
||||
html += '<video class="itemVideo" id="itemVideo" preload="none" autoplay="autoplay" controls="controls">';
|
||||
} else {
|
||||
html += '<video class="itemVideo" id="itemVideo" preload="none" autoplay controls>';
|
||||
}
|
||||
if (requiresNativeControls) {
|
||||
html += '<video class="itemVideo" id="itemVideo" preload="none" autoplay="autoplay" controls="controls">';
|
||||
} else {
|
||||
|
||||
// Chrome 35 won't play with preload none
|
||||
|
|
@ -991,10 +1089,9 @@
|
|||
html += '</video>';
|
||||
|
||||
var mediaPlayerContainer = $("#mediaPlayer").show();
|
||||
var videoControls = $('#videoControls', mediaPlayerContainer);
|
||||
var videoControls = $('.videoControls', mediaPlayerContainer);
|
||||
|
||||
//show stop button
|
||||
$('#video-stopButton', videoControls).show();
|
||||
$('#video-playButton', videoControls).hide();
|
||||
$('#video-pauseButton', videoControls).show();
|
||||
$('#video-previousTrackButton', videoControls).hide();
|
||||
|
|
@ -1002,35 +1099,50 @@
|
|||
|
||||
var videoElement = $('#videoElement', mediaPlayerContainer).prepend(html);
|
||||
|
||||
$('.video-qualityButton', videoControls).show();
|
||||
$('.videoQualityButton', videoControls).show();
|
||||
|
||||
if (mediaStreams.filter(function (s) {
|
||||
return s.Type == "Audio";
|
||||
}).length) {
|
||||
$('#video-audioTracksButton', videoControls).show();
|
||||
$('.videoAudioButton').show();
|
||||
} else {
|
||||
$('#video-audioTracksButton', videoControls).hide();
|
||||
$('.videoAudioButton').hide();
|
||||
}
|
||||
|
||||
if (subtitleStreams.length) {
|
||||
$('#video-subtitleButton', videoControls).show().prop("disabled", false);
|
||||
$('.videoSubtitleButton').show();
|
||||
} else {
|
||||
$('#video-subtitleButton', videoControls).hide().prop("disabled", true);
|
||||
;
|
||||
$('.videoSubtitleButton').hide();
|
||||
}
|
||||
|
||||
if (item.Chapters && item.Chapters.length) {
|
||||
$('#video-chaptersButton', videoControls).show();
|
||||
$('.videoChaptersButton').show();
|
||||
} else {
|
||||
$('#video-chaptersButton', videoControls).hide();
|
||||
$('.videoChaptersButton').hide();
|
||||
}
|
||||
|
||||
if (requiresControls) {
|
||||
if (requiresNativeControls) {
|
||||
$('#video-fullscreenButton', videoControls).hide();
|
||||
} else {
|
||||
$('#video-fullscreenButton', videoControls).show();
|
||||
}
|
||||
|
||||
if ($.browser.mobile) {
|
||||
$('.volumeSliderContainer', videoControls).addClass('hide');
|
||||
$('.muteButton', videoControls).addClass('hide');
|
||||
$('.unmuteButton', videoControls).addClass('hide');
|
||||
} else {
|
||||
$('.volumeSliderContainer', videoControls).removeClass('hide');
|
||||
$('.muteButton', videoControls).removeClass('hide');
|
||||
$('.unmuteButton', videoControls).removeClass('hide');
|
||||
}
|
||||
|
||||
if (requiresNativeControls) {
|
||||
videoControls.addClass('hide');
|
||||
} else {
|
||||
videoControls.removeClass('hide');
|
||||
}
|
||||
|
||||
var video = $("video", videoElement);
|
||||
|
||||
initialVolume = self.getSavedVolume();
|
||||
|
|
@ -1089,7 +1201,6 @@
|
|||
|
||||
self.clearPauseStop();
|
||||
|
||||
$("html").css("cursor", "default");
|
||||
self.resetEnhancements();
|
||||
|
||||
var errorCode = this.error ? this.error.code : '';
|
||||
|
|
@ -1118,22 +1229,6 @@
|
|||
|
||||
self.toggleFullscreen();
|
||||
|
||||
}).on("seeking.mediaplayerevent", function (e) {
|
||||
|
||||
$("html").css("cursor", "wait");
|
||||
|
||||
}).on("seeked.mediaplayerevent", function (e) {
|
||||
|
||||
$("html").css("cursor", "default");
|
||||
|
||||
}).on("loadstart.mediaplayerevent", function () {
|
||||
|
||||
$("html").css("cursor", "progress");
|
||||
|
||||
}).on("canplay.mediaplayerevent", function () {
|
||||
|
||||
$("html").css("cursor", "default");
|
||||
|
||||
}).on("ended.playbackstopped", function () {
|
||||
|
||||
currentTimeElement.empty();
|
||||
|
|
@ -1152,6 +1247,8 @@
|
|||
|
||||
self.currentSubtitleStreamIndex = mediaSource.DefaultSubtitleStreamIndex;
|
||||
|
||||
$('body').addClass('bodyWithPopupOpen');
|
||||
|
||||
return video[0];
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -504,67 +504,6 @@
|
|||
}
|
||||
};
|
||||
|
||||
self.updateNowPlayingInfo = function (item) {
|
||||
|
||||
if (!item) {
|
||||
throw new Error('item cannot be null');
|
||||
}
|
||||
|
||||
var mediaControls = $("#videoControls");
|
||||
|
||||
var state = self.getPlayerStateInternal(self.currentMediaElement, item, self.currentMediaSource);
|
||||
|
||||
var url = "";
|
||||
|
||||
if (state.NowPlayingItem.PrimaryImageTag) {
|
||||
|
||||
url = ApiClient.getScaledImageUrl(state.NowPlayingItem.PrimaryImageItemId, {
|
||||
type: "Primary",
|
||||
height: 40,
|
||||
tag: state.NowPlayingItem.PrimaryImageTag
|
||||
});
|
||||
}
|
||||
else if (state.NowPlayingItem.BackdropImageTag) {
|
||||
|
||||
url = ApiClient.getScaledImageUrl(state.NowPlayingItem.BackdropItemId, {
|
||||
type: "Backdrop",
|
||||
height: 40,
|
||||
tag: state.NowPlayingItem.BackdropImageTag,
|
||||
index: 0
|
||||
});
|
||||
|
||||
} else if (state.NowPlayingItem.ThumbImageTag) {
|
||||
|
||||
url = ApiClient.getScaledImageUrl(state.NowPlayingItem.ThumbImageItemId, {
|
||||
type: "Thumb",
|
||||
height: 40,
|
||||
tag: state.NowPlayingItem.ThumbImageTag
|
||||
});
|
||||
}
|
||||
|
||||
else if (item.Type == "TvChannel" || item.Type == "Recording") {
|
||||
url = "css/images/items/detail/tv.png";
|
||||
}
|
||||
else if (item.MediaType == "Audio") {
|
||||
url = "css/images/items/detail/audio.png";
|
||||
}
|
||||
else {
|
||||
url = "css/images/items/detail/video.png";
|
||||
}
|
||||
|
||||
var nowPlayingTextElement = $('.nowPlayingText', mediaControls);
|
||||
var nameHtml = self.getNowPlayingNameHtml(state);
|
||||
|
||||
if (nameHtml.indexOf('<br/>') != -1) {
|
||||
nowPlayingTextElement.addClass('nowPlayingDoubleText');
|
||||
} else {
|
||||
nowPlayingTextElement.removeClass('nowPlayingDoubleText');
|
||||
}
|
||||
|
||||
$('.nowPlayingImage', mediaControls).html('<img src="' + url + '" />');
|
||||
nowPlayingTextElement.html(nameHtml);
|
||||
};
|
||||
|
||||
self.getNowPlayingNameHtml = function (playerState) {
|
||||
|
||||
var nowPlayingItem = playerState.NowPlayingItem;
|
||||
|
|
@ -1044,7 +983,12 @@
|
|||
|
||||
var imageTags = item.ImageTags || {};
|
||||
|
||||
if (imageTags.Primary) {
|
||||
if (item.SeriesPrimaryImageTag) {
|
||||
|
||||
nowPlayingItem.PrimaryImageItemId = item.SeriesId;
|
||||
nowPlayingItem.PrimaryImageTag = item.SeriesPrimaryImageTag;
|
||||
}
|
||||
else if (imageTags.Primary) {
|
||||
|
||||
nowPlayingItem.PrimaryImageItemId = item.Id;
|
||||
nowPlayingItem.PrimaryImageTag = imageTags.Primary;
|
||||
|
|
@ -1071,6 +1015,17 @@
|
|||
nowPlayingItem.ThumbItemId = item.Id;
|
||||
nowPlayingItem.ThumbImageTag = imageTags.Thumb;
|
||||
}
|
||||
|
||||
if (imageTags.Logo) {
|
||||
|
||||
nowPlayingItem.LogoItemId = item.Id;
|
||||
nowPlayingItem.LogoImageTag = imageTags.Logo;
|
||||
}
|
||||
else if (item.ParentLogoImageTag) {
|
||||
|
||||
nowPlayingItem.LogoItemId = item.ParentLogoItemId;
|
||||
nowPlayingItem.LogoImageTag = item.ParentLogoImageTag;
|
||||
}
|
||||
}
|
||||
|
||||
return state;
|
||||
|
|
@ -1106,6 +1061,8 @@
|
|||
|
||||
self.onPlaybackStopped = function () {
|
||||
|
||||
$('body').removeClass('bodyWithPopupOpen');
|
||||
|
||||
self.clearPauseStop();
|
||||
|
||||
var playerElement = this;
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ var Dashboard = {
|
|||
//$.mobile.listview.prototype.options.dividerTheme = "b";
|
||||
|
||||
//$.mobile.popup.prototype.options.theme = "c";
|
||||
//$.mobile.popup.prototype.options.transition = "none";
|
||||
$.mobile.popup.prototype.options.transition = "fade";
|
||||
$.mobile.defaultPageTransition = "none";
|
||||
//$.mobile.collapsible.prototype.options.contentTheme = "a";
|
||||
},
|
||||
|
|
@ -364,7 +364,7 @@ var Dashboard = {
|
|||
|
||||
$('.confirmFlyout').popup("close").remove();
|
||||
|
||||
var html = '<div data-role="popup" data-transition="slidefade" class="confirmFlyout" style="max-width:500px;" data-theme="a">';
|
||||
var html = '<div data-role="popup" class="confirmFlyout" style="max-width:500px;" data-theme="a">';
|
||||
|
||||
html += '<div class="ui-bar-a" style="text-align:center;">';
|
||||
html += '<h3>' + title + '</h3>';
|
||||
|
|
@ -1211,34 +1211,53 @@ $(function () {
|
|||
|
||||
var videoPlayerHtml = '<div id="mediaPlayer" data-theme="b" class="ui-bar-b" style="display: none;">';
|
||||
|
||||
videoPlayerHtml += '<div id="videoBackdrop">';
|
||||
videoPlayerHtml += '<div class="videoBackdrop">';
|
||||
videoPlayerHtml += '<div id="videoPlayer">';
|
||||
videoPlayerHtml += '<div id="videoElement">';
|
||||
|
||||
videoPlayerHtml += '<div id="videoElement">';
|
||||
videoPlayerHtml += '<div id="play" class="status"></div>';
|
||||
videoPlayerHtml += '<div id="pause" class="status"></div>';
|
||||
|
||||
videoPlayerHtml += '</div>';
|
||||
|
||||
videoPlayerHtml += '<div class="videoTopControls hiddenOnIdle">';
|
||||
videoPlayerHtml += '<div class="videoTopControlsLogo"></div>';
|
||||
videoPlayerHtml += '<div class="videoAdvancedControls">';
|
||||
|
||||
videoPlayerHtml += '<button class="imageButton mediaButton videoAudioButton" title="Audio tracks" type="button" data-icon="audiocd" data-iconpos="notext" data-inline="true">Audio Tracks</button>';
|
||||
videoPlayerHtml += '<div data-role="popup" class="videoAudioPopup videoPlayerPopup" data-history="false" data-theme="b" data-corners="false"></div>';
|
||||
|
||||
videoPlayerHtml += '<button class="imageButton mediaButton videoSubtitleButton" title="Subtitles" type="button" data-icon="subtitles" data-iconpos="notext" data-inline="true">Subtitles</button>';
|
||||
videoPlayerHtml += '<div data-role="popup" class="videoSubtitlePopup videoPlayerPopup" data-history="false" data-theme="b" data-corners="false"></div>';
|
||||
|
||||
videoPlayerHtml += '<button class="mediaButton videoChaptersButton" title="Scenes" type="button" data-icon="video" data-iconpos="notext" data-inline="true">Scenes</button>';
|
||||
videoPlayerHtml += '<div data-role="popup" class="videoChaptersPopup videoPlayerPopup" data-history="false" data-theme="b" data-corners="false"></div>';
|
||||
|
||||
videoPlayerHtml += '<button class="mediaButton videoQualityButton" title="Quality" type="button" data-icon="gear" data-iconpos="notext" data-inline="true">Quality</button>';
|
||||
videoPlayerHtml += '<div data-role="popup" class="videoQualityPopup videoPlayerPopup" data-history="false" data-theme="b" data-corners="false"></div>';
|
||||
|
||||
videoPlayerHtml += '<button class="mediaButton" title="Stop" type="button" onclick="MediaPlayer.stop();" data-icon="delete" data-iconpos="notext" data-inline="true">Stop</button>';
|
||||
|
||||
videoPlayerHtml += '</div>'; // videoAdvancedControls
|
||||
videoPlayerHtml += '</div>'; // videoTopControls
|
||||
|
||||
// Create controls
|
||||
videoPlayerHtml += '<div id="videoControls" class="videoControls">';
|
||||
videoPlayerHtml += '<div class="videoControls hiddenOnIdle">';
|
||||
|
||||
videoPlayerHtml += '<button id="video-previousTrackButton" class="mediaButton previousTrackButton" title="Previous Track" type="button" onclick="MediaPlayer.previousTrack();" data-icon="previous-track" data-iconpos="notext" data-inline="true">Previous Track</button>';
|
||||
videoPlayerHtml += '<button id="video-playButton" class="mediaButton" title="Play" type="button" onclick="MediaPlayer.unpause();" data-icon="play" data-iconpos="notext" data-inline="true">Play</button>';
|
||||
videoPlayerHtml += '<button id="video-pauseButton" class="mediaButton" title="Pause" type="button" onclick="MediaPlayer.pause();" data-icon="pause" data-iconpos="notext" data-inline="true">Pause</button>';
|
||||
videoPlayerHtml += '<button id="video-nextTrackButton" class="mediaButton nextTrackButton" title="Next Track" type="button" onclick="MediaPlayer.nextTrack();" data-icon="next-track" data-iconpos="notext" data-inline="true">Next Track</button>';
|
||||
|
||||
videoPlayerHtml += '<div class="positionSliderContainer sliderContainer">';
|
||||
videoPlayerHtml += '<input type="range" class="mediaSlider positionSlider slider" step=".001" min="0" max="100" value="0" style="display:none;" data-mini="true" data-theme="a" data-highlight="true" />';
|
||||
videoPlayerHtml += '</div>';
|
||||
|
||||
videoPlayerHtml += '<div id="video-basic-controls">';
|
||||
|
||||
videoPlayerHtml += '<button id="video-previousTrackButton" class="mediaButton previousTrackButton" title="Previous Track" type="button" onclick="MediaPlayer.previousTrack();" data-icon="previous-track" data-iconpos="notext" data-inline="true">Previous Track</button>';
|
||||
videoPlayerHtml += '<button id="video-playButton" class="mediaButton" title="Play" type="button" onclick="MediaPlayer.unpause();" data-icon="play" data-iconpos="notext" data-inline="true">Play</button>';
|
||||
videoPlayerHtml += '<button id="video-pauseButton" class="mediaButton" title="Pause" type="button" onclick="MediaPlayer.pause();" data-icon="pause" data-iconpos="notext" data-inline="true">Pause</button>';
|
||||
|
||||
videoPlayerHtml += '<button id="video-stopButton" class="mediaButton" title="Stop" type="button" onclick="MediaPlayer.stop();" data-icon="stop" data-iconpos="notext" data-inline="true">Stop</button>';
|
||||
videoPlayerHtml += '<button id="video-nextTrackButton" class="mediaButton nextTrackButton" title="Next Track" type="button" onclick="MediaPlayer.nextTrack();" data-icon="next-track" data-iconpos="notext" data-inline="true">Next Track</button>';
|
||||
|
||||
videoPlayerHtml += '<div class="currentTime"></div>';
|
||||
|
||||
videoPlayerHtml += '<div class="nowPlayingInfo hiddenOnIdle">';
|
||||
videoPlayerHtml += '<div class="nowPlayingImage"></div>';
|
||||
videoPlayerHtml += '<div class="nowPlayingText"></div>';
|
||||
videoPlayerHtml += '</div>'; // nowPlayingInfo
|
||||
|
||||
videoPlayerHtml += '<button id="video-muteButton" class="mediaButton muteButton" title="Mute" type="button" onclick="MediaPlayer.mute();" data-icon="audio" data-iconpos="notext" data-inline="true">Mute</button>';
|
||||
videoPlayerHtml += '<button id="video-unmuteButton" class="mediaButton unmuteButton" title="Unmute" type="button" onclick="MediaPlayer.unMute();" data-icon="volume-off" data-iconpos="notext" data-inline="true">Unmute</button>';
|
||||
|
|
@ -1247,26 +1266,8 @@ $(function () {
|
|||
videoPlayerHtml += '<input type="range" class="mediaSlider volumeSlider slider" step=".05" min="0" max="1" value="0" style="display:none;" data-mini="true" data-theme="a" data-highlight="true" />';
|
||||
videoPlayerHtml += '</div>';
|
||||
|
||||
videoPlayerHtml += '</div>'; // video-basic-controls
|
||||
videoPlayerHtml += '<div id="video-advanced-controls">';
|
||||
|
||||
videoPlayerHtml += '<button class="mediaButton video-qualityButton" title="Quality" type="button" data-icon="gear" data-iconpos="notext" data-inline="true">Quality</button>';
|
||||
//videoPlayerHtml += '<div data-role="popup" class="videoQualityPopup videoPlayerPopup" data-transition="flip"></div>';
|
||||
videoPlayerHtml += '<div style="display:none;" id="video-qualityFlyout" class="video-qualityFlyout mediaPlayerFlyout"></div>';
|
||||
|
||||
videoPlayerHtml += '<button onclick="MediaPlayer.showAudioTracksFlyout();" id="video-audioTracksButton" class="imageButton mediaButton audioTracksButton" title="Audio tracks" type="button" data-icon="audiocd" data-iconpos="notext" data-inline="true">Audio Tracks</button>';
|
||||
videoPlayerHtml += '<div id="video-audioTracksFlyout" style="display:none;" class="mediaPlayerFlyout audioTracksFlyout"></div>';
|
||||
|
||||
videoPlayerHtml += '<button onclick="MediaPlayer.showSubtitleMenu();" id="video-subtitleButton" class="imageButton mediaButton subtitleButton" title="Subtitles" type="button" data-icon="subtitles" data-iconpos="notext" data-inline="true">Subtitles</button>';
|
||||
videoPlayerHtml += '<div id="video-subtitleFlyout" style="display:none;" class="mediaPlayerFlyout subtitleFlyout"></div>';
|
||||
|
||||
videoPlayerHtml += '<button onclick="MediaPlayer.showChaptersFlyout();" id="video-chaptersButton" class="mediaButton chaptersButton" title="Scenes" type="button" data-icon="video" data-iconpos="notext" data-inline="true">Scenes</button>';
|
||||
videoPlayerHtml += '<div id="video-chaptersFlyout" style="display:none;" class="mediaPlayerFlyout chaptersFlyout"></div>';
|
||||
|
||||
videoPlayerHtml += '<button onclick="MediaPlayer.toggleFullscreen();" id="video-fullscreenButton" class="mediaButton fullscreenButton" title="Fullscreen" type="button" data-icon="expand" data-iconpos="notext" data-inline="true">Fullscreen</button>';
|
||||
|
||||
videoPlayerHtml += '</div>'; // video-advanced-controls
|
||||
|
||||
videoPlayerHtml += '</div>'; // videoControls
|
||||
|
||||
videoPlayerHtml += '</div>'; // videoPlayer
|
||||
|
|
@ -1299,6 +1300,22 @@ $(function () {
|
|||
});
|
||||
});
|
||||
|
||||
$.fn.openPopup = function () {
|
||||
|
||||
this.one('popupbeforeposition', function () {
|
||||
|
||||
//$("body").on("touchmove.popup", false);
|
||||
//$('body').addClass('bodyWithPopupOpen');
|
||||
|
||||
}).one('popupafterclose', function () {
|
||||
//$("body").off("touchmove.popup");
|
||||
|
||||
//$('body').removeClass('bodyWithPopupOpen');
|
||||
});
|
||||
|
||||
return this.popup('open');
|
||||
};
|
||||
|
||||
Dashboard.jQueryMobileInit();
|
||||
|
||||
$(document).on('pagebeforeshow', ".page", function () {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue