web client backdrops

This commit is contained in:
Luke Pulverenti 2014-05-11 01:11:53 -04:00
parent c93de38f39
commit 76d39e1345
29 changed files with 385 additions and 150 deletions

View File

@ -4,7 +4,11 @@
<title>${TitleMediaBrowser}</title> <title>${TitleMediaBrowser}</title>
</head> </head>
<body> <body>
<div id="channelItemsPage" data-role="page" class="page libraryPage noSecondaryNavPage channelsPage" data-theme="b" data-view="channels"> <div id="channelItemsPage" data-role="page" class="page libraryPage channelsPage" data-theme="b" data-view="channels">
<div class="libraryViewNav scopedLibraryViewNav">
<a href="channels.html" class="ui-btn-active">${TabChannels}</a>
</div>
<div data-role="content"> <div data-role="content">
<div class="viewSettings"> <div class="viewSettings">

View File

@ -4,12 +4,14 @@
<title>${TitleMediaBrowser}</title> <title>${TitleMediaBrowser}</title>
</head> </head>
<body> <body>
<div id="channelsPage" data-role="page" class="page libraryPage noSecondaryNavPage channelsPage" data-theme="b" data-view="channels"> <div id="channelsPage" data-role="page" class="page libraryPage channelsPage" data-theme="b" data-view="channels">
<div class="libraryViewNav scopedLibraryViewNav">
<a href="#" class="ui-btn-active">${TabChannels}</a>
</div>
<div data-role="content"> <div data-role="content">
<div class="viewSettings"> <div class="viewSettings">
<h1 style="margin: 0 1em 0 0; display: inline-block; vertical-align: middle;">${HeaderChannels}</h1>
</div> </div>
<div id="items" class="itemsContainer"></div> <div id="items" class="itemsContainer"></div>
</div> </div>

View File

@ -4,15 +4,17 @@
<title>${TitleMediaBrowser}</title> <title>${TitleMediaBrowser}</title>
</head> </head>
<body> <body>
<div id="boxsetsPage" data-role="page" class="page libraryPage noSecondaryNavPage" data-theme="b" data-view="boxsets"> <div id="boxsetsPage" data-role="page" class="page libraryPage backdropPage" data-backdroptype="movie,boxset" data-theme="b" data-view="boxsets">
<div class="libraryViewNav scopedLibraryViewNav">
<a href="#" class="ui-btn-active">${TabCollections}</a>
</div>
<div class="alphabetPicker"> <div class="alphabetPicker">
</div> </div>
<div data-role="content"> <div data-role="content">
<div class="viewSettings"> <div class="viewSettings">
<h1 style="margin: 0 1em 0 0; display: inline-block; vertical-align: middle;">${HeaderCollections}</h1>
<div class="viewControls" data-role="controlgroup" data-type="horizontal"> <div class="viewControls" data-role="controlgroup" data-type="horizontal">
<button data-mini="true" data-icon="sort" data-inline="true" data-iconpos="notext" title="${ButtonSort}" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">${ButtonSort}</button> <button data-mini="true" data-icon="sort" data-inline="true" data-iconpos="notext" title="${ButtonSort}" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">${ButtonSort}</button>
<button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="${ButtonFilter}" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">${ButtonFilter}</button> <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="${ButtonFilter}" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">${ButtonFilter}</button>

View File

@ -1,35 +1,22 @@
.btnCast { .btnCastImage {
width: 28px;
height: 28px;
padding: 0;
background-color: transparent; background-color: transparent;
border: 0; background-size: contain;
background-size: 100%; background-repeat: no-repeat;
vertical-align: middle; background-position: center center;
margin: 0 .6em; width: 28px;
cursor: pointer; height: 100%;
border: 0 !important; position: relative;
top: 1px;
} }
.btnCast:hover { .btnDefaultCast .btnCastImage {
opacity: .5;
}
.btnDefaultCast {
background-image: url(images/chromecast/ic_media_route_off_holo_dark.png); background-image: url(images/chromecast/ic_media_route_off_holo_dark.png);
} }
.btnActiveCast { .btnActiveCast .btnCastImage {
background-image: url(images/chromecast/ic_media_route_on_holo_dark.png); background-image: url(images/chromecast/ic_media_route_on_holo_dark.png);
} }
.btnDisabledCast { .btnDisabledCast .btnCastImage {
background-image: url(images/chromecast/ic_media_route_disabled_holo_dark.png); background-image: url(images/chromecast/ic_media_route_disabled_holo_dark.png);
} }
.ui-icon-ccast {
background-image: url(images/chromecast/ic_media_route_off_holo_dark.png);
background-position: 5px 5px;
background-repeat: no-repeat;
background-size: 18px 18px;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 199 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

View File

@ -12,6 +12,26 @@
margin-left: .5em; margin-left: .5em;
} }
.libraryPage {
background-color: #202020;
}
.backdropPage {
background-color: rgba(0, 0, 0, .86);
}
.backdropContainer {
position: fixed;
top: 50px;
right: 0;
left: 0;
bottom: 0;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.libraryPage .header { .libraryPage .header {
padding-bottom: 0; padding-bottom: 0;
} }
@ -26,8 +46,8 @@
} }
.listHeader { .listHeader {
margin-top: .5em; margin-top: .7em;
margin-bottom: .2em; margin-bottom: 0;
padding-left: 4px; padding-left: 4px;
} }
@ -465,6 +485,7 @@ a.itemTag:hover {
.libraryPanelHeader { .libraryPanelHeader {
margin: 5px 0 15px 0; margin: 5px 0 15px 0;
font-size: 15px;
} }
.libraryPanelHeader a { .libraryPanelHeader a {
@ -1073,7 +1094,7 @@ a.itemTag:hover {
.spotlight { .spotlight {
position: absolute; position: absolute;
left: -220px; left: 0;
right: 0; right: 0;
background-size: cover; background-size: cover;
background-position: center 25%; background-position: center 25%;
@ -1103,7 +1124,7 @@ a.itemTag:hover {
bottom: 55px; bottom: 55px;
left: 210px; left: 210px;
width: 600px; width: 600px;
background: rgba(0,0,0,.6); background: rgba(0,0,0,.8);
border-radius: 5px; border-radius: 5px;
} }

View File

@ -1,9 +1,9 @@
.libraryPage { .libraryPage {
padding-top: 53px !important; padding-top: 50px !important;
} }
.libraryPage:not(.metadataEditorPage):not(.noSecondaryNavPage) { .libraryPage:not(.metadataEditorPage):not(.noSecondaryNavPage) {
padding-top: 102px !important; padding-top: 100px !important;
} }
.libraryMenuDivider { .libraryMenuDivider {
@ -12,6 +12,73 @@
margin: .5em 0; margin: .5em 0;
} }
.viewMenuBar, .headerButton {
height: 50px;
}
.headerButton {
line-height: 50px;
}
.headerButton {
margin: 0;
padding: 0;
background-color: transparent;
top: 0;
bottom: 0;
vertical-align: middle;
text-align: center;
border: 1px solid #1b1b1b!important;
cursor: pointer;
outline: none;
padding: 0 20px;
}
.headerButton img {
height: 18px;
vertical-align: middle;
}
.headerSearchButton img {
height: 16px;
}
.headerButtonLeft {
border-width: 0 1px 0 0 !important;
float: left;
padding: 0 15px;
}
.headerButtonRight {
border-width: 0 !important;
float: left;
border-width: 0 0 0 1px !important;
}
.headerButtonRight:first-child {
border-width: 0 !important;
}
.headerButtonRight:last-child {
}
.desktopHomeLink {
color: #ddd !important;
text-decoration: none;
font-weight: 400!important;
font-size: 15px;
border-right: 0 !important;
}
.desktopHomeLink span {
vertical-align: middle;
}
.libraryMenuButton {
left: 0;
opacity: .8;
}
.viewMenuBar { .viewMenuBar {
font-weight: bold; font-weight: bold;
position: fixed; position: fixed;
@ -20,13 +87,54 @@
z-index: 1000; z-index: 1000;
top: 0; top: 0;
background: #000; background: #000;
padding: 3px .25em 3px 1em;
border-bottom: 1px solid #101010; border-bottom: 1px solid #101010;
border-top: 0; border-top: 0;
border-left: 0; border-left: 0;
border-right: 0; border-right: 0;
} }
.libraryViewNav {
height: 48px;
overflow: hidden;
border-bottom: 1px solid #222;
position: fixed;
right: 0;
left: 0;
top: 51px;
z-index: 1000;
background-color: #181818;
}
@media all and (max-width: 460px) {
.viewMenuBar, .headerButton {
height: 46px;
}
.headerButton {
line-height: 46px;
}
.libraryPage {
padding-top: 46px !important;
}
.libraryPage:not(.metadataEditorPage):not(.noSecondaryNavPage) {
padding-top: 96px !important;
}
.libraryViewNav {
top: 47px;
}
.headerButtonLeft img {
height: 15px;
}
.btnCastImage {
width: 26px !important;
}
}
.viewMenuLink { .viewMenuLink {
text-decoration: none; text-decoration: none;
color: #ccc!important; color: #ccc!important;
@ -35,13 +143,14 @@
vertical-align: middle; vertical-align: middle;
} }
.viewMenuLink:hover { .viewMenuTextLink:hover, .libraryMenuButton:hover {
background-color: #52B54B; background-color: #38c;
color: #fff!important; color: #fff!important;
} opacity: 1;
}
.viewMenuBar .btnCurrentUser { .headerButtonRight:hover {
padding: 7px 1em 6px; opacity: .5;
} }
.viewMenuLink:hover { .viewMenuLink:hover {
@ -59,23 +168,23 @@
.viewMenuTextLink { .viewMenuTextLink {
display: block; display: block;
padding: .6em .5em .6em 41px!important; padding: .6em .5em .6em 43px!important;
font-size: 15px; font-size: 15px;
font-weight: 300!important; font-weight: 300!important;
font-family: Roboto; font-family: Roboto;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 18px 18px; background-size: 18px 18px;
background-position: 14px center; background-position: 16px center;
} }
.musicViewMenu { .musicViewMenu {
background-image: url(images/items/folders/music.png); background-image: url(images/items/folders/music.png);
background-position: 14px 8px; background-position: 16px 8px;
} }
.tvshowsViewMenu { .tvshowsViewMenu {
background-image: url(images/items/folders/tv.png); background-image: url(images/items/folders/tv.png);
background-position: 14px 8px; background-position: 16px 8px;
} }
.moviesViewMenu { .moviesViewMenu {
@ -84,12 +193,12 @@
.gamesViewMenu { .gamesViewMenu {
background-image: url(images/items/folders/games.png); background-image: url(images/items/folders/games.png);
background-position: 14px 8px; background-position: 16px 8px;
} }
.channelsViewMenu { .channelsViewMenu {
background-image: url(images/items/folders/channels.png); background-image: url(images/items/folders/channels.png);
background-position: 14px 9px; background-position: 16px 9px;
} }
.booksViewMenu { .booksViewMenu {
@ -98,12 +207,12 @@
.musicvideosViewMenu { .musicvideosViewMenu {
background-image: url(images/items/folders/musicvideos.png); background-image: url(images/items/folders/musicvideos.png);
background-position: 14px 8px; background-position: 16px 8px;
} }
.photosViewMenu { .photosViewMenu {
background-image: url(images/items/folders/photos.png); background-image: url(images/items/folders/photos.png);
background-position: 14px 8px; background-position: 16px 8px;
} }
.homeVideosViewMenu { .homeVideosViewMenu {
@ -114,12 +223,25 @@
background-image: url(images/items/folders/folder.png); background-image: url(images/items/folders/folder.png);
} }
.editorViewMenu {
background-image: url(images/items/folders/edit.png);
background-position: 16px 8px;
}
.dashboardViewMenu {
background-image: url(images/items/folders/settings.png);
background-position: 16px 8px;
}
.viewMenuSecondary { .viewMenuSecondary {
float: right; position: absolute;
top: 0;
bottom: 0;
right: 0;
} }
.selectedMediaFolder { .selectedMediaFolder {
background-color: #38c!important; background-color: #52B54B!important;
color: #fff!important; color: #fff!important;
} }
@ -127,18 +249,6 @@
background-color: rgba(51,136,204,.8)!important; background-color: rgba(51,136,204,.8)!important;
} }
.libraryViewNav {
height: 48px;
overflow: hidden;
border-bottom: 1px solid #222;
position: fixed;
right: 0;
left: 0;
top: 53px;
z-index: 1000;
background-color: #181818;
}
.ui-panel.ui-body-b { .ui-panel.ui-body-b {
background-color: #181818; background-color: #181818;
} }
@ -178,40 +288,13 @@
color: #ddd; color: #ddd;
} }
.desktopHomeLink { @media all and (max-width: 600px) {
color: #ddd !important;
margin-right: 2em;
text-decoration: none;
font-weight: 400!important;
}
.desktopHomeLink span {
vertical-align: middle;
}
@media all and (min-width: 1099px) {
/*.type-home {
left: 215px !important;
width: auto !important;
right: 0 !important;
}*/
.viewSettings {
padding-left: .4em;
}
}
@media all and (max-width: 459px) {
.desktopHomeLink { .desktopHomeLink {
display: none; display: none;
} }
}
@media all and (min-width: 750px) { .headerSettingsButton {
display: none;
.viewMenuBar .btnCurrentUser {
padding-right: 1.5em;
} }
} }

View File

@ -4,7 +4,7 @@
<title>${TitleMediaBrowser}</title> <title>${TitleMediaBrowser}</title>
</head> </head>
<body> <body>
<div id="gamesRecommendedPage" data-role="page" class="page libraryPage" data-theme="b" data-view="games"> <div id="gamesRecommendedPage" data-role="page" class="page libraryPage backdropPage" data-backdroptype="game" data-theme="b" data-view="games">
<div class="libraryViewNav scopedLibraryViewNav"> <div class="libraryViewNav scopedLibraryViewNav">
<a href="#" class="ui-btn-active">${TabSuggested}</a> <a href="#" class="ui-btn-active">${TabSuggested}</a>
<a href="games.html">${TabGames}</a> <a href="games.html">${TabGames}</a>

View File

@ -4,7 +4,7 @@
<title>${TitleMediaBrowser}</title> <title>${TitleMediaBrowser}</title>
</head> </head>
<body> <body>
<div id="gamesystemsPage" data-role="page" class="page libraryPage" data-theme="b" data-view="games"> <div id="gamesystemsPage" data-role="page" class="page libraryPage backdropPage" data-backdroptype="gamesystem" data-theme="b" data-view="games">
<div class="libraryViewNav scopedLibraryViewNav"> <div class="libraryViewNav scopedLibraryViewNav">
<a href="gamesrecommended.html">${TabSuggested}</a> <a href="gamesrecommended.html">${TabSuggested}</a>
<a href="games.html">${TabGames}</a> <a href="games.html">${TabGames}</a>

View File

@ -4,7 +4,14 @@
<title>${TitleMediaBrowser}</title> <title>${TitleMediaBrowser}</title>
</head> </head>
<body> <body>
<div id="indexPage" data-role="page" class="page type-home libraryPage allLibraryPage noSecondaryNavPage" data-theme="b"> <div id="indexPage" data-role="page" class="page type-home libraryPage allLibraryPage noSecondaryNavPage backdropPage" data-theme="b" data-backdroptype="movie,series,game,book">
<!-- <div class="libraryViewNav scopedLibraryViewNav">
<a href="#" class="ui-btn-active">${TabHome}</a>
<a href="#">${TabMyLibrary}</a>
<a href="#">${TabFavorites}</a>
</div>-->
<div data-role="content"> <div data-role="content">
<table class="ehsContent"> <table class="ehsContent">

View File

@ -5,6 +5,19 @@
</head> </head>
<body> <body>
<div id="itemDetailPage" data-role="page" class="page libraryPage itemDetailPage" data-theme="b"> <div id="itemDetailPage" data-role="page" class="page libraryPage itemDetailPage" data-theme="b">
<div id="channelTabs" class="itemTabs" style="display: none;">
<div class="libraryViewNav scopedLibraryViewNav">
<a href="#" class="ui-btn-active">${TabChannels}</a>
</div>
</div>
<div id="boxsetTabs" class="itemTabs" style="display: none;">
<div class="libraryViewNav scopedLibraryViewNav">
<a href="#" class="ui-btn-active">${TabCollections}</a>
</div>
</div>
<div id="movieTabs" class="itemTabs" style="display: none;"> <div id="movieTabs" class="itemTabs" style="display: none;">
<div class="libraryViewNav scopedLibraryViewNav"> <div class="libraryViewNav scopedLibraryViewNav">
<a href="movieslatest.html">${TabLatest}</a> <a href="movieslatest.html">${TabLatest}</a>

View File

@ -4,7 +4,7 @@
<title>${TitleMediaBrowser}</title> <title>${TitleMediaBrowser}</title>
</head> </head>
<body> <body>
<div id="moviesLatestPage" data-role="page" class="page libraryPage" data-theme="b" data-view="movies"> <div id="moviesLatestPage" data-role="page" class="page libraryPage backdropPage" data-backdroptype="movie" data-theme="b" data-view="movies">
<div class="libraryViewNav scopedLibraryViewNav"> <div class="libraryViewNav scopedLibraryViewNav">
<a href="#" class="ui-btn-active">${TabLatest}</a> <a href="#" class="ui-btn-active">${TabLatest}</a>

View File

@ -4,7 +4,7 @@
<title>${TitleMediaBrowser}</title> <title>${TitleMediaBrowser}</title>
</head> </head>
<body> <body>
<div id="moviesRecommendedPage" data-role="page" class="page libraryPage" data-theme="b" data-view="movies"> <div id="moviesRecommendedPage" data-role="page" class="page libraryPage backdropPage" data-backdroptype="movie" data-theme="b" data-view="movies">
<div class="libraryViewNav scopedLibraryViewNav"> <div class="libraryViewNav scopedLibraryViewNav">
<a href="movieslatest.html">${TabLatest}</a> <a href="movieslatest.html">${TabLatest}</a>
@ -14,7 +14,6 @@
<a href="moviepeople.html">${TabPeople}</a> <a href="moviepeople.html">${TabPeople}</a>
<a href="moviestudios.html">${TabStudios}</a> <a href="moviestudios.html">${TabStudios}</a>
</div> </div>
<div data-role="content"> <div data-role="content">
<table class="ehsContent"> <table class="ehsContent">

View File

@ -4,7 +4,7 @@
<title>${TitleMediaBrowser}</title> <title>${TitleMediaBrowser}</title>
</head> </head>
<body> <body>
<div id="musicRecommendedPage" data-role="page" class="page libraryPage" data-theme="b" data-view="music"> <div id="musicRecommendedPage" data-role="page" class="page libraryPage backdropPage" data-backdroptype="musicartist" data-theme="b" data-view="music">
<div class="libraryViewNav scopedLibraryViewNav"> <div class="libraryViewNav scopedLibraryViewNav">
<a href="#" class="ui-btn-active">${TabSuggested}</a> <a href="#" class="ui-btn-active">${TabSuggested}</a>
<a href="songs.html">${TabSongs}</a> <a href="songs.html">${TabSongs}</a>

View 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);

View File

@ -184,6 +184,14 @@
$('#movieTabs', page).show(); $('#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") { if (item.MediaType == "Game") {
$('#gameTabs', page).show(); $('#gameTabs', page).show();
} }

View File

@ -704,7 +704,7 @@
html += '<a data-itemid="' + item.Id + '" class="' + cssClass + '" data-mediasourcecount="' + mediaSourceCount + '" href="' + href + '">'; html += '<a data-itemid="' + item.Id + '" class="' + cssClass + '" data-mediasourcecount="' + mediaSourceCount + '" href="' + href + '">';
var style = ""; var style = "";
options.lazy = false;
if (imgUrl && !options.lazy) { if (imgUrl && !options.lazy) {
style += 'background-image:url(\'' + imgUrl + '\');'; style += 'background-image:url(\'' + imgUrl + '\');';
} }

View File

@ -18,22 +18,30 @@
var html = '<div class="viewMenuBar ui-bar-b">'; 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 += '<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) { if (user.PrimaryImageTag) {
var url = ApiClient.getUserImageUrl(user.Id, { var url = ApiClient.getUserImageUrl(user.Id, {
height: 24, height: 18,
tag: user.PrimaryImageTag, tag: user.PrimaryImageTag,
type: "Primary" type: "Primary"
}); });
@ -45,12 +53,6 @@
html += '</a>'; 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>';
html += '</div>'; html += '</div>';
@ -98,7 +100,8 @@
if (user.Configuration.IsAdministrator) { if (user.Configuration.IsAdministrator) {
html += '<div class="libraryMenuDivider"></div>'; 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; return html;
@ -178,7 +181,7 @@
} }
} }
function updateLibraryNavLinks(page) { function updateLibraryNavLinks(page, updateElements) {
page = $(page); page = $(page);
@ -236,22 +239,22 @@
}); });
}).on('pagebeforeshow', ".page", function () { }).on('pagebeforeshow', ".libraryPage", function () {
var page = this; 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); renderHeader(page, user);
updateLibraryNavLinks(page); updateCastIcon();
});
}
updateLibraryNavLinks(page);
});
} }
}).on('pageshow', ".libraryPage", function () { }).on('pageshow', ".libraryPage", function () {

View File

@ -84,7 +84,7 @@
ParentId: parentId ParentId: parentId
}); });
$.getJSON(url).done(function(recommendations) { $.getJSON(url).done(function (recommendations) {
if (!recommendations.length) { if (!recommendations.length) {
@ -96,6 +96,7 @@
$('.recommendations', page).html(html).createPosterItemMenus(); $('.recommendations', page).html(html).createPosterItemMenus();
}); });
}); });

View File

@ -13,7 +13,7 @@
SortBy: "DateCreated", SortBy: "DateCreated",
SortOrder: "Descending", SortOrder: "Descending",
IncludeItemTypes: "MusicAlbum", IncludeItemTypes: "MusicAlbum",
Limit: screenWidth >= 1920 ? 7 : (screenWidth >= 1440 ? 7 : 5), Limit: screenWidth >= 1920 ? 8 : (screenWidth >= 1440 ? 8 : 5),
Recursive: true, Recursive: true,
Fields: "PrimaryImageAspectRatio", Fields: "PrimaryImageAspectRatio",
ParentId: parentId ParentId: parentId
@ -36,7 +36,7 @@
SortBy: "DateCreated", SortBy: "DateCreated",
SortOrder: "Descending", SortOrder: "Descending",
IncludeItemTypes: "Audio", IncludeItemTypes: "Audio",
Limit: screenWidth >= 1920 ? 7 : (screenWidth >= 1440 ? 7 : 5), Limit: screenWidth >= 1920 ? 8 : (screenWidth >= 1440 ? 8 : 5),
Recursive: true, Recursive: true,
Fields: "PrimaryImageAspectRatio,AudioInfo", Fields: "PrimaryImageAspectRatio,AudioInfo",
ParentId: parentId ParentId: parentId
@ -59,7 +59,7 @@
SortBy: "DatePlayed", SortBy: "DatePlayed",
SortOrder: "Descending", SortOrder: "Descending",
IncludeItemTypes: "Audio", IncludeItemTypes: "Audio",
Limit: screenWidth >= 1920 ? 7 : (screenWidth >= 1440 ? 7 : 5), Limit: screenWidth >= 1920 ? 8 : (screenWidth >= 1440 ? 8 : 5),
Recursive: true, Recursive: true,
Fields: "PrimaryImageAspectRatio,AudioInfo", Fields: "PrimaryImageAspectRatio,AudioInfo",
Filters: "IsPlayed", Filters: "IsPlayed",

View File

@ -1175,6 +1175,8 @@ var Dashboard = {
getDisplayTime: function (ticks) { getDisplayTime: function (ticks) {
var ticksPerHour = 36000000000; var ticksPerHour = 36000000000;
var ticksPerMinute = 600000000;
var ticksPerSecond = 10000000;
var parts = []; var parts = [];
@ -1187,8 +1189,6 @@ var Dashboard = {
ticks -= (hours * ticksPerHour); ticks -= (hours * ticksPerHour);
var ticksPerMinute = 600000000;
var minutes = ticks / ticksPerMinute; var minutes = ticks / ticksPerMinute;
minutes = Math.floor(minutes); minutes = Math.floor(minutes);
@ -1199,10 +1199,8 @@ var Dashboard = {
} }
parts.push(minutes); parts.push(minutes);
var ticksPerSecond = 10000000;
var seconds = ticks / ticksPerSecond; var seconds = ticks / ticksPerSecond;
seconds = Math.round(seconds); seconds = Math.floor(seconds);
if (seconds < 10) { if (seconds < 10) {
seconds = '0' + seconds; seconds = '0' + seconds;

View File

@ -29,6 +29,7 @@
} else { } else {
this.setAttribute("src", source); this.setAttribute("src", source);
} }
this.setAttribute("data-src", '');
if (typeof callback === "function") callback.call(this); if (typeof callback === "function") callback.call(this);
} }
}); });

View File

@ -4,7 +4,7 @@
<title>${TitleMediaBrowser}</title> <title>${TitleMediaBrowser}</title>
</head> </head>
<body> <body>
<div id="tvNextUpPage" data-role="page" class="page libraryPage" data-theme="b" data-view="tv"> <div id="tvNextUpPage" data-role="page" class="page libraryPage backdropPage" data-backdroptype="series" data-theme="b" data-view="tv">
<div class="libraryViewNav scopedLibraryViewNav"> <div class="libraryViewNav scopedLibraryViewNav">
<a href="tvrecommended.html">${TabSuggested}</a> <a href="tvrecommended.html">${TabSuggested}</a>
<a href="#" class="ui-btn-active">${TabLatest}</a> <a href="#" class="ui-btn-active">${TabLatest}</a>

View File

@ -4,7 +4,7 @@
<title>${TitleMediaBrowser}</title> <title>${TitleMediaBrowser}</title>
</head> </head>
<body> <body>
<div id="tvRecommendedPage" data-role="page" class="page libraryPage" data-theme="b" data-view="tv"> <div id="tvRecommendedPage" data-role="page" class="page libraryPage backdropPage" data-backdroptype="series" data-theme="b" data-view="tv">
<div class="libraryViewNav scopedLibraryViewNav"> <div class="libraryViewNav scopedLibraryViewNav">
<a href="#" class="ui-btn-active">${TabSuggested}</a> <a href="#" class="ui-btn-active">${TabSuggested}</a>
<a href="tvlatest.html">${TabLatest}</a> <a href="tvlatest.html">${TabLatest}</a>

View File

@ -4,7 +4,7 @@
<title>${TitleMediaBrowser}</title> <title>${TitleMediaBrowser}</title>
</head> </head>
<body> <body>
<div id="tvUpcomingPage" data-role="page" class="page libraryPage" data-theme="b" data-view="tv"> <div id="tvUpcomingPage" data-role="page" class="page libraryPage backdropPage" data-backdroptype="series" data-theme="b" data-view="tv">
<div class="libraryViewNav scopedLibraryViewNav"> <div class="libraryViewNav scopedLibraryViewNav">
<a href="tvrecommended.html">${TabSuggested}</a> <a href="tvrecommended.html">${TabSuggested}</a>
<a href="tvlatest.html">${TabLatest}</a> <a href="tvlatest.html">${TabLatest}</a>