mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
web client backdrops
This commit is contained in:
Luke Pulverenti
parent
c93de38f39
commit
76d39e1345
29 changed files with 385 additions and 150 deletions
106
dashboard-ui/scripts/backdrops.js
Normal file
106
dashboard-ui/scripts/backdrops.js
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
(function ($, document) {
|
||||
|
||||
function getElement() {
|
||||
|
||||
var elem = $('.backdropContainer');
|
||||
|
||||
if (!elem.length) {
|
||||
|
||||
elem = $('<div class="backdropContainer"></div>').prependTo(document.body);
|
||||
}
|
||||
|
||||
return elem;
|
||||
}
|
||||
|
||||
function getRandom(min, max) {
|
||||
return Math.floor(Math.random() * (max - min) + min);
|
||||
}
|
||||
|
||||
function getBackdropItemIds(userId, types, parentId) {
|
||||
|
||||
var key = 'backdrops_' + userId + (types || '') + (parentId || '');
|
||||
|
||||
var deferred = $.Deferred();
|
||||
|
||||
var data = localStorage.getItem(key);
|
||||
|
||||
if (data) {
|
||||
|
||||
console.log('Found backdrop id list in cache. Key: ' + key)
|
||||
data = JSON.parse(data);
|
||||
deferred.resolveWith(null, [data]);
|
||||
} else {
|
||||
|
||||
var options = {
|
||||
|
||||
SortBy: "Random",
|
||||
Limit: 50,
|
||||
Recursive: true,
|
||||
IncludeItemTypes: types,
|
||||
ImageTypes: "Backdrop",
|
||||
//Ids: "8114409aa00a2722456c08e298f90bed",
|
||||
ParentId: parentId
|
||||
};
|
||||
|
||||
ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
|
||||
|
||||
var images = result.Items.map(function (i) {
|
||||
return {
|
||||
id: i.Id,
|
||||
tag: i.BackdropImageTags[0]
|
||||
};
|
||||
});
|
||||
|
||||
localStorage.setItem(key, JSON.stringify(images));
|
||||
deferred.resolveWith(null, [images]);
|
||||
});
|
||||
}
|
||||
|
||||
return deferred.promise();
|
||||
}
|
||||
|
||||
function showBackdrop(type) {
|
||||
|
||||
getBackdropItemIds(Dashboard.getCurrentUserId(), type, LibraryMenu.getTopParentId()).done(function (images) {
|
||||
|
||||
if (images.length) {
|
||||
|
||||
var index = getRandom(0, images.length - 1);
|
||||
var item = images[index];
|
||||
|
||||
var imgUrl = ApiClient.getImageUrl(item.id, {
|
||||
type: "Backdrop",
|
||||
tag: item.tag
|
||||
});
|
||||
|
||||
getElement().css('backgroundImage', 'url(\'' + imgUrl + '\')');
|
||||
|
||||
} else {
|
||||
|
||||
clearBackdrop();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function clearBackdrop() {
|
||||
|
||||
$('.backdropContainer').css('backgroundImage', '');
|
||||
}
|
||||
|
||||
$(document).on('pagebeforeshow', ".backdropPage", function () {
|
||||
|
||||
var page = this;
|
||||
|
||||
// Gets real messy and jumps around the page when scrolling
|
||||
// Can be reviewed later.
|
||||
if ($.browser.msie) {
|
||||
$(page).removeClass('backdropPage');
|
||||
} else {
|
||||
var type = page.getAttribute('data-backdroptype');
|
||||
|
||||
showBackdrop(type);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
})(jQuery, document);
|
||||
|
|
@ -184,6 +184,14 @@
|
|||
$('#movieTabs', page).show();
|
||||
}
|
||||
|
||||
if (item.Type == "ChannelVideoItem" || item.Type == "ChannelAudioItem" || item.Type == "ChannelCategoryItem") {
|
||||
$('#channelTabs', page).show();
|
||||
}
|
||||
|
||||
if (item.Type == "BoxSet") {
|
||||
$('#boxsetTabs', page).show();
|
||||
}
|
||||
|
||||
if (item.MediaType == "Game") {
|
||||
$('#gameTabs', page).show();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -704,7 +704,7 @@
|
|||
html += '<a data-itemid="' + item.Id + '" class="' + cssClass + '" data-mediasourcecount="' + mediaSourceCount + '" href="' + href + '">';
|
||||
|
||||
var style = "";
|
||||
options.lazy = false;
|
||||
|
||||
if (imgUrl && !options.lazy) {
|
||||
style += 'background-image:url(\'' + imgUrl + '\');';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,22 +18,30 @@
|
|||
|
||||
var html = '<div class="viewMenuBar ui-bar-b">';
|
||||
|
||||
html += '<button type="button" data-icon="bars" data-iconpos="notext" data-inline="true" title="Menu" class="libraryMenuButton" onclick="LibraryMenu.showLibraryMenu();" data-corners="false">Menu</button>';
|
||||
html += '<button type="button" data-role="none" title="Menu" onclick="LibraryMenu.showLibraryMenu();" class="headerButton libraryMenuButton headerButtonLeft"><img src="css/images/menu.png" /></button>';
|
||||
|
||||
html += '<a class="desktopHomeLink" href="index.html"><span>MEDIA</span><span class="mediaBrowserAccent">BROWSER</span></a>';
|
||||
html += '<a class="desktopHomeLink headerButton headerButtonLeft" href="index.html"><span>MEDIA</span><span class="mediaBrowserAccent">BROWSER</span></a>';
|
||||
|
||||
html += '<a class="viewMenuRemoteControlButton" href="nowplaying.html" data-role="button" data-icon="play" data-inline="true" data-iconpos="notext" title="Now Playing">Remote Control</a>';
|
||||
//html += '<a class="viewMenuRemoteControlButton" href="nowplaying.html" data-role="button" data-icon="play" data-inline="true" data-iconpos="notext" title="Now Playing">Remote Control</a>';
|
||||
|
||||
html += '<div class="viewMenuSecondary">';
|
||||
|
||||
html += '<button id="btnCast" class="btnCast btnDefaultCast" type="button" data-role="none"></button>';
|
||||
html += '<a href="nowplaying.html" class="headerButton headerButtonRight headerRemoteButton"><img src="css/images/remote.png" /></a>';
|
||||
|
||||
html += '<a class="viewMenuLink btnCurrentUser" href="#" onclick="Dashboard.showUserFlyout(this);">';
|
||||
html += '<button id="btnCast" class="btnCast btnDefaultCast headerButton headerButtonRight" type="button" data-role="none"><div class="btnCastImage"></div></button>';
|
||||
|
||||
html += '<button onclick="Search.showSearchPanel($.mobile.activePage);" type="button" data-role="none" class="headerButton headerButtonRight headerSearchButton"><img src="css/images/headersearch.png" /></button>';
|
||||
|
||||
if (user.Configuration.IsAdministrator) {
|
||||
html += '<a href="dashboard.html" class="headerButton headerButtonRight headerSettingsButton"><img src="css/images/items/folders/settings.png" /></a>';
|
||||
}
|
||||
|
||||
html += '<a class="headerButton headerButtonRight" href="#" onclick="Dashboard.showUserFlyout(this);">';
|
||||
|
||||
if (user.PrimaryImageTag) {
|
||||
|
||||
var url = ApiClient.getUserImageUrl(user.Id, {
|
||||
height: 24,
|
||||
height: 18,
|
||||
tag: user.PrimaryImageTag,
|
||||
type: "Primary"
|
||||
});
|
||||
|
|
@ -45,12 +53,6 @@
|
|||
|
||||
html += '</a>';
|
||||
|
||||
html += '<button onclick="Search.showSearchPanel($.mobile.activePage);" type="button" data-icon="search" data-inline="true" data-iconpos="notext">Search</button>';
|
||||
|
||||
if (user.Configuration.IsAdministrator) {
|
||||
html += '<a href="dashboard.html" data-role="button" data-icon="gear" data-inline="true" data-iconpos="notext">Dashboard</a>';
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
|
||||
html += '</div>';
|
||||
|
|
@ -68,9 +70,9 @@
|
|||
|
||||
return LibraryBrowser.getHref(item);
|
||||
}
|
||||
|
||||
|
||||
function getViewsHtml(user, counts, items, liveTvInfo) {
|
||||
|
||||
|
||||
var html = '';
|
||||
|
||||
html += items.map(function (i) {
|
||||
|
|
@ -98,7 +100,8 @@
|
|||
|
||||
if (user.Configuration.IsAdministrator) {
|
||||
html += '<div class="libraryMenuDivider"></div>';
|
||||
html += '<a class="viewMenuLink viewMenuTextLink lnkMediaFolder tvshowsViewMenu" data-itemid="editor" href="edititemmetadata.html">Metadata Manager</a>';
|
||||
html += '<a class="viewMenuLink viewMenuTextLink lnkMediaFolder dashboardViewMenu" data-itemid="editor" href="dashboard.html">Dashboard</a>';
|
||||
html += '<a class="viewMenuLink viewMenuTextLink lnkMediaFolder editorViewMenu" data-itemid="editor" href="edititemmetadata.html">Metadata Manager</a>';
|
||||
}
|
||||
|
||||
return html;
|
||||
|
|
@ -149,7 +152,7 @@
|
|||
}
|
||||
|
||||
updateLibraryNavLinks(page);
|
||||
|
||||
|
||||
return panel;
|
||||
}
|
||||
|
||||
|
|
@ -178,7 +181,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
function updateLibraryNavLinks(page) {
|
||||
function updateLibraryNavLinks(page, updateElements) {
|
||||
|
||||
page = $(page);
|
||||
|
||||
|
|
@ -236,22 +239,22 @@
|
|||
|
||||
});
|
||||
|
||||
}).on('pagebeforeshow', ".page", function () {
|
||||
}).on('pagebeforeshow', ".libraryPage", function () {
|
||||
|
||||
var page = this;
|
||||
|
||||
if ($(page).hasClass('libraryPage')) {
|
||||
updateLibraryNavLinks(page);
|
||||
|
||||
if (!$('.viewMenuBar', page).length) {
|
||||
if (!$('.viewMenuBar', page).length) {
|
||||
|
||||
Dashboard.getCurrentUser().done(function (user) {
|
||||
Dashboard.getCurrentUser().done(function (user) {
|
||||
|
||||
renderHeader(page, user);
|
||||
|
||||
updateLibraryNavLinks(page);
|
||||
});
|
||||
}
|
||||
renderHeader(page, user);
|
||||
|
||||
updateCastIcon();
|
||||
|
||||
updateLibraryNavLinks(page);
|
||||
});
|
||||
}
|
||||
|
||||
}).on('pageshow', ".libraryPage", function () {
|
||||
|
|
|
|||
|
|
@ -5,9 +5,9 @@
|
|||
var html = '';
|
||||
|
||||
var title = '';
|
||||
|
||||
|
||||
switch (recommendation.RecommendationType) {
|
||||
|
||||
|
||||
case 'SimilarToRecentlyPlayed':
|
||||
title = 'Because you watched ' + recommendation.BaselineItemName;
|
||||
break;
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
title = 'Starring ' + recommendation.BaselineItemName;
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
html += '<h1 class="listHeader">' + title + '</h1>';
|
||||
|
||||
html += '<div>';
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
|
||||
return html;
|
||||
}
|
||||
|
||||
|
||||
$(document).on('pagebeforeshow', "#moviesRecommendedPage", function () {
|
||||
|
||||
var parentId = LibraryMenu.getTopParentId();
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
var screenWidth = $(window).width();
|
||||
|
||||
var page = this;
|
||||
|
||||
|
||||
var options = {
|
||||
|
||||
SortBy: "DatePlayed",
|
||||
|
|
@ -63,20 +63,20 @@
|
|||
} else {
|
||||
$('#resumableSection', page).hide();
|
||||
}
|
||||
|
||||
|
||||
$('#resumableItems', page).html(LibraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
preferBackdrop: true,
|
||||
shape: 'backdrop',
|
||||
overlayText: screenWidth >= 600,
|
||||
showTitle: true
|
||||
|
||||
|
||||
})).createPosterItemMenus();
|
||||
|
||||
});
|
||||
|
||||
var url = ApiClient.getUrl("Movies/Recommendations", {
|
||||
|
||||
|
||||
userId: Dashboard.getCurrentUserId(),
|
||||
categoryLimit: screenWidth >= 1200 ? 6 : 3,
|
||||
itemLimit: screenWidth >= 1920 ? 10 : (screenWidth >= 1440 ? 8 : 6),
|
||||
|
|
@ -84,7 +84,7 @@
|
|||
ParentId: parentId
|
||||
});
|
||||
|
||||
$.getJSON(url).done(function(recommendations) {
|
||||
$.getJSON(url).done(function (recommendations) {
|
||||
|
||||
if (!recommendations.length) {
|
||||
|
||||
|
|
@ -96,6 +96,7 @@
|
|||
|
||||
$('.recommendations', page).html(html).createPosterItemMenus();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
SortBy: "DateCreated",
|
||||
SortOrder: "Descending",
|
||||
IncludeItemTypes: "MusicAlbum",
|
||||
Limit: screenWidth >= 1920 ? 7 : (screenWidth >= 1440 ? 7 : 5),
|
||||
Limit: screenWidth >= 1920 ? 8 : (screenWidth >= 1440 ? 8 : 5),
|
||||
Recursive: true,
|
||||
Fields: "PrimaryImageAspectRatio",
|
||||
ParentId: parentId
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
SortBy: "DateCreated",
|
||||
SortOrder: "Descending",
|
||||
IncludeItemTypes: "Audio",
|
||||
Limit: screenWidth >= 1920 ? 7 : (screenWidth >= 1440 ? 7 : 5),
|
||||
Limit: screenWidth >= 1920 ? 8 : (screenWidth >= 1440 ? 8 : 5),
|
||||
Recursive: true,
|
||||
Fields: "PrimaryImageAspectRatio,AudioInfo",
|
||||
ParentId: parentId
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
SortBy: "DatePlayed",
|
||||
SortOrder: "Descending",
|
||||
IncludeItemTypes: "Audio",
|
||||
Limit: screenWidth >= 1920 ? 7 : (screenWidth >= 1440 ? 7 : 5),
|
||||
Limit: screenWidth >= 1920 ? 8 : (screenWidth >= 1440 ? 8 : 5),
|
||||
Recursive: true,
|
||||
Fields: "PrimaryImageAspectRatio,AudioInfo",
|
||||
Filters: "IsPlayed",
|
||||
|
|
|
|||
|
|
@ -1175,6 +1175,8 @@ var Dashboard = {
|
|||
getDisplayTime: function (ticks) {
|
||||
|
||||
var ticksPerHour = 36000000000;
|
||||
var ticksPerMinute = 600000000;
|
||||
var ticksPerSecond = 10000000;
|
||||
|
||||
var parts = [];
|
||||
|
||||
|
|
@ -1187,8 +1189,6 @@ var Dashboard = {
|
|||
|
||||
ticks -= (hours * ticksPerHour);
|
||||
|
||||
var ticksPerMinute = 600000000;
|
||||
|
||||
var minutes = ticks / ticksPerMinute;
|
||||
minutes = Math.floor(minutes);
|
||||
|
||||
|
|
@ -1199,10 +1199,8 @@ var Dashboard = {
|
|||
}
|
||||
parts.push(minutes);
|
||||
|
||||
var ticksPerSecond = 10000000;
|
||||
|
||||
var seconds = ticks / ticksPerSecond;
|
||||
seconds = Math.round(seconds);
|
||||
seconds = Math.floor(seconds);
|
||||
|
||||
if (seconds < 10) {
|
||||
seconds = '0' + seconds;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue