mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Merge pull request #694 from grafixeyehero/item-detail-page-

Browse source 
Item detail page layout improvements continued form #611
This commit is contained in:
dkanada 2020-02-01 20:43:44 +09:00 • committed by GitHub
commit 254c69b2f1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 171 additions and 162 deletions
Download patch file Download diff file Expand all files Collapse all files

156
src/assets/css/librarybrowser.css
View file

@ -4,7 +4,7 @@
vertical-align: middle; vertical-align: middle;
} }
.detailButton-mobile, .detailButton,
.itemLinks, .itemLinks,
.listPaging, .listPaging,
.sectionTabs, .sectionTabs,
@ -130,7 +130,7 @@
display: -webkit-flex; display: -webkit-flex;
} }
.detailButton-mobile, .detailButton,
.skinHeader { .skinHeader {
flex-direction: column; flex-direction: column;
-webkit-flex-direction: column; -webkit-flex-direction: column;
@ -273,25 +273,6 @@
} }
@media all and (min-width:84em) { @media all and (min-width:84em) {
.headerTop {
padding: 1.489em 0;
}
.headerTabs {
-webkit-align-self: center;
align-self: center;
width: auto;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
margin-top: -3.34em;
position: relative;
top: -1.05em;
}
.libraryPage:not(.noSecondaryNavPage) { .libraryPage:not(.noSecondaryNavPage) {
padding-top: 4.6em !important; padding-top: 4.6em !important;
} }
@ -432,6 +413,10 @@
position: relative; position: relative;
} }
.personBackdrop {
background-size: contain;
}
.itemBackdropProgressBar { .itemBackdropProgressBar {
position: absolute !important; position: absolute !important;
bottom: 0; bottom: 0;
@ -441,17 +426,7 @@
.desktopMiscInfoContainer { .desktopMiscInfoContainer {
position: absolute; position: absolute;
bottom: 0.75em; bottom: .75em
}
.detailPagePrimaryContainer {
display: flex;
align-items: center;
align-content: center;
position: sticky;
background-color: #101010;
top: 0;
z-index: 2;
} }
.layout-mobile .detailPagePrimaryContainer { .layout-mobile .detailPagePrimaryContainer {
@ -459,10 +434,36 @@
position: relative; position: relative;
} }
.layout-mobile .parentName,
.layout-mobile .itemName,
.layout-mobile .itemMiscInfo,
.layout-mobile .mainDetailButtons {
display: flex;
align-items: center;
justify-content: center;
}
.layout-mobile .infoText {
white-space: normal;
}
.layout-tv .detailPagePrimaryContainer { .layout-tv .detailPagePrimaryContainer {
position: relative; position: relative;
} }
.detailPagePrimaryContainer {
display: flex;
align-items: center;
align-content: center;
position: sticky;
top: 8%;
z-index: 2;
}
.detailSticky {
background-color: #101010;
}
.infoWrapper { .infoWrapper {
flex: 1 0 0; flex: 1 0 0;
} }
@ -476,6 +477,9 @@
.detailPageSecondaryContainer { .detailPageSecondaryContainer {
margin: 1.25em 0; margin: 1.25em 0;
}
.detailPageContent {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-left: 2%; padding-left: 2%;
@ -483,9 +487,8 @@
} }
.detailImageContainer { .detailImageContainer {
margin: 1.25em 0;
position: sticky; position: sticky;
top: 15%; top: 25%;
float: left; float: left;
width: 22.786458333333332vw; width: 22.786458333333332vw;
} }
@ -497,9 +500,6 @@
.detailPagePrimaryContent { .detailPagePrimaryContent {
position: relative; position: relative;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
} }
.detailLogo { .detailLogo {
@ -543,8 +543,8 @@
} }
@media all and (max-width:62.5em) { @media all and (max-width:62.5em) {
.detailPageContent { .detailPageWrapperContainer {
position: relative; position: relative
} }
.btnPlaySimple { .btnPlaySimple {
@ -613,7 +613,7 @@
} }
} }
.detailButton-mobile, .detailButton,
.mainDetailButtons { .mainDetailButtons {
display: flex; display: flex;
display: -webkit-box; display: -webkit-box;
@ -657,7 +657,7 @@
margin-top: 1.5em !important; margin-top: 1.5em !important;
} }
.detailButton-mobile { .detailButton {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
-webkit-box-pack: center; -webkit-box-pack: center;
@ -670,32 +670,28 @@
padding: 0.5em 0.7em !important; padding: 0.5em 0.7em !important;
} }
.detailButton {
margin: 0 0.5em 0 0 !important;
}
@media all and (min-width:29em) { @media all and (min-width:29em) {
.detailButton-mobile { .detailButton {
padding-left: 0.75em !important; padding-left: .75em !important;
padding-right: 0.75em !important; padding-right: .75em !important
} }
} }
@media all and (min-width:32em) { @media all and (min-width:32em) {
.detailButton-mobile { .detailButton {
padding-left: 0.8em !important; padding-left: .8em !important;
padding-right: 0.8em !important; padding-right: .8em !important
} }
} }
@media all and (min-width:35em) { @media all and (min-width:35em) {
.detailButton-mobile { .detailButton {
padding-left: 0.85em !important; padding-left: .85em !important;
padding-right: 0.85em !important; padding-right: .85em !important
} }
} }
.detailButton-mobile-content { .detailButton-content {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
@ -711,19 +707,20 @@
align-items: center; align-items: center;
} }
.detailButton-mobile-icon { .detailButton-icon {
font-size: 1.6em !important; font-size: 1.6em !important;
width: 1em; width: 1em;
height: 1em; height: 1em;
} }
.detailImageProgressContainer { .detailImageProgressContainer {
margin-left: 6px; position: absolute;
width: 21.886458333333332vw; bottom: 0;
width: 22.786458333333332vw;
} }
.detailButton-mobile-text { .detailButton-text {
margin-top: 0.7em; margin-top: .7em;
font-size: 80%; font-size: 80%;
font-weight: 400; font-weight: 400;
} }
@ -733,16 +730,33 @@
margin-left: -0.5em; margin-left: -0.5em;
} }
.detailButton { .detailButtonHideonMobile {
display: none !important; display: none !important
} }
} }
@media all and (min-width:62.5em) { @media all and (min-width:62.5em) {
.headerTop {
padding: 0.8em 0
}
.headerTabs {
align-self: center;
width: auto;
align-items: center;
justify-content: center;
margin-top: -3.34em;
position: relative;
}
.detailFloatingButton { .detailFloatingButton {
display: none !important; display: none !important;
} }
.personBackdrop {
display: none !important
}
.mainDetailButtons { .mainDetailButtons {
font-size: 108%; font-size: 108%;
margin: 1.25em 0; margin: 1.25em 0;
@ -783,17 +797,11 @@
margin-bottom: 3.4em !important; margin-bottom: 3.4em !important;
} }
.detailPageContent { .detailPageWrapperContainer {
border-spacing: 0; border-spacing: 0;
border-collapse: collapse; border-collapse: collapse;
} }
@media all and (max-width: 62.5em) {
.detailPageContent-nodetailimg {
padding-top: 0;
}
}
.mediaInfoStream { .mediaInfoStream {
margin: 0 3em 0 0; margin: 0 3em 0 0;
display: inline-block; display: inline-block;
@ -845,13 +853,9 @@
@media all and (max-width: 75em) { @media all and (max-width: 75em) {
.listViewUserDataButtons { .listViewUserDataButtons {
display: none !important; display: flex;
} align-items: center;
} font-size: 65%;
@media all and (max-width: 62.5em) {
.detailsHiddenOnMobile {
display: none;
} }
} }

4
src/components/emby-tabs/emby-tabs.css
View file

@ -31,6 +31,10 @@
overflow: hidden; overflow: hidden;
} }
.layout-mobile .emby-tabs-slider {
overflow: auto;
}
.tabContent:not(.is-active) { .tabContent:not(.is-active) {
display: none; display: none;
} }

7
src/components/listview/listview.css
View file

@ -162,13 +162,14 @@
@media all and (max-width: 64em) { @media all and (max-width: 64em) {
.listItemImage-large { .listItemImage-large {
width: 33.75vw; width: 22vw;
height: 22.5vw; height: 16vw;
margin-right: 0 !important; margin-right: 0 !important;
} }
.listItemIndicators,
.listItemImageButton { .listItemImageButton {
font-size: 1em !important; font-size: 0.6em !important;
} }
.listItemBody { .listItemBody {

7
src/components/listview/listview.js
View file

@ -471,6 +471,8 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
html += indicators.getTimerIndicator(item).replace('indicatorIcon', 'indicatorIcon listItemAside'); html += indicators.getTimerIndicator(item).replace('indicatorIcon', 'indicatorIcon listItemAside');
} }
html += '<div class="listViewUserDataButtons">';
if (!clickEntireItem) { if (!clickEntireItem) {
if (options.addToListButton) { if (options.addToListButton) {
@ -491,8 +493,6 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
if (options.enableUserDataButtons !== false) { if (options.enableUserDataButtons !== false) {
html += '<span class="listViewUserDataButtons flex align-items-center">';
var userData = item.UserData || {}; var userData = item.UserData || {};
var likes = userData.Likes == null ? '' : userData.Likes; var likes = userData.Likes == null ? '' : userData.Likes;
@ -503,10 +503,9 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
if (itemHelper.canRate(item)) { if (itemHelper.canRate(item)) {
html += '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="material-icons">favorite</i></button>'; html += '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="material-icons">favorite</i></button>';
} }
html += '</span>';
} }
} }
html += '</div>';
if (enableContentWrapper) { if (enableContentWrapper) {
html += '</div>'; html += '</div>';

23
src/controllers/itemdetailpage.js
View file

@ -461,7 +461,8 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
var usePrimaryImage = item.MediaType === "Video" && item.Type !== "Movie" && item.Type !== "Trailer" || var usePrimaryImage = item.MediaType === "Video" && item.Type !== "Movie" && item.Type !== "Trailer" ||
item.MediaType && item.MediaType !== "Video" || item.MediaType && item.MediaType !== "Video" ||
item.Type === "MusicAlbum" || item.Type === "MusicAlbum" ||
item.Type === "MusicArtist"; item.Type === "MusicArtist" ||
item.Type === "Person";
if ("Program" === item.Type && item.ImageTags && item.ImageTags.Thumb) { if ("Program" === item.Type && item.ImageTags && item.ImageTags.Thumb) {
imgUrl = apiClient.getScaledImageUrl(item.Id, { imgUrl = apiClient.getScaledImageUrl(item.Id, {
@ -513,11 +514,18 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
itemBackdropElement.style.backgroundImage = ""; itemBackdropElement.style.backgroundImage = "";
} }
if ("Person" === item.Type) {
itemBackdropElement.classList.add("personBackdrop");
} else {
itemBackdropElement.classList.remove("personBackdrop");
}
return hasbackdrop; return hasbackdrop;
} }
function reloadFromItem(instance, page, params, item, user) { function reloadFromItem(instance, page, params, item, user) {
var context = params.context; var context = params.context;
page.querySelector(".detailPagePrimaryContainer").classList.add("detailSticky");
renderName(item, page.querySelector(".nameContainer"), false, context); renderName(item, page.querySelector(".nameContainer"), false, context);
var apiClient = connectionManager.getApiClient(item.ServerId); var apiClient = connectionManager.getApiClient(item.ServerId);
renderSeriesTimerEditor(page, item, apiClient, user); renderSeriesTimerEditor(page, item, apiClient, user);
@ -735,12 +743,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
editable = false; editable = false;
} }
if ("Person" !== item.Type) {
elem.classList.add("detailimg-hidemobile"); elem.classList.add("detailimg-hidemobile");
page.querySelector(".detailPageContent").classList.add("detailPageContent-nodetailimg");
} else {
page.querySelector(".detailPageContent").classList.remove("detailPageContent-nodetailimg");
}
var imageTags = item.ImageTags || {}; var imageTags = item.ImageTags || {};
@ -1050,11 +1053,6 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
var overview = page.querySelector(".overview"); var overview = page.querySelector(".overview");
var externalLinksElem = page.querySelector(".itemExternalLinks"); var externalLinksElem = page.querySelector(".itemExternalLinks");
if ("Season" !== item.Type && "MusicAlbum" !== item.Type && "MusicArtist" !== item.Type) {
overview.classList.add("detailsHiddenOnMobile");
externalLinksElem.classList.add("detailsHiddenOnMobile");
}
renderOverview([overview], item); renderOverview([overview], item);
var i; var i;
var itemMiscInfo; var itemMiscInfo;
@ -2093,7 +2091,10 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
}); });
view.addEventListener("viewshow", function (e) { view.addEventListener("viewshow", function (e) {
var page = this; var page = this;
if (layoutManager.mobile) {
libraryMenu.setTransparentMenu(true); libraryMenu.setTransparentMenu(true);
}
if (e.detail.isRestored) { if (e.detail.isRestored) {
if (currentItem) { if (currentItem) {

104
src/itemdetails.html
View file

@ -15,100 +15,100 @@
</div> </div>
<div class="mainDetailButtons"> <div class="mainDetailButtons">
<button is="emby-button" type="button" class="button-flat btnResume hide detailButton" data-mode="resume"> <button is="emby-button" type="button" class="button-flat btnResume hide detailButton detailButtonHideonMobile" data-mode="resume">
<div class="detailButton-mobile-content"> <div class="detailButton-content">
<i class="material-icons detailButton-mobile-icon">play_arrow</i> <i class="material-icons detailButton-icon">play_arrow</i>
<div class="detailButton-mobile-text">${ButtonResume}</div> <div class="detailButton-text">${ButtonResume}</div>
</div> </div>
</button> </button>
<button is="emby-button" type="button" class="button-flat btnPlay hide detailButton" data-mode="play"> <button is="emby-button" type="button" class="button-flat btnPlay hide detailButton detailButtonHideonMobile" data-mode="play">
<div class="detailButton-mobile-content"> <div class="detailButton-content">
<i class="material-icons detailButton-mobile-icon">play_arrow</i> <i class="material-icons detailButton-icon">play_arrow</i>
<div class="detailButton-mobile-text">${ButtonPlay}</div> <div class="detailButton-text">${ButtonPlay}</div>
</div> </div>
</button> </button>
<button is="emby-button" type="button" class="button-flat btnDownload hide detailButton-mobile"> <button is="emby-button" type="button" class="button-flat btnDownload hide detailButton">
<div class="detailButton-mobile-content"> <div class="detailButton-content">
<i class="material-icons detailButton-mobile-icon">get_app</i> <i class="material-icons detailButton-icon">get_app</i>
<div class="detailButton-mobile-text">${ButtonDownload}</div> <div class="detailButton-text">${ButtonDownload}</div>
</div> </div>
</button> </button>
<button is="emby-button" type="button" class="button-flat btnPlayTrailer hide detailButton-mobile"> <button is="emby-button" type="button" class="button-flat btnPlayTrailer hide detailButton">
<div class="detailButton-mobile-content"> <div class="detailButton-content">
<i class="material-icons detailButton-mobile-icon">theaters</i> <i class="material-icons detailButton-icon">theaters</i>
<div class="detailButton-mobile-text">${ButtonTrailer}</div> <div class="detailButton-text">${ButtonTrailer}</div>
</div> </div>
</button> </button>
<button is="emby-button" type="button" class="button-flat btnInstantMix hide detailButton-mobile"> <button is="emby-button" type="button" class="button-flat btnInstantMix hide detailButton">
<div class="detailButton-mobile-content"> <div class="detailButton-content">
<i class="material-icons detailButton-mobile-icon">explore</i> <i class="material-icons detailButton-icon">explore</i>
<div class="detailButton-mobile-text">${HeaderInstantMix}</div> <div class="detailButton-text">${HeaderInstantMix}</div>
</div> </div>
</button> </button>
<button is="emby-button" type="button" class="button-flat btnShuffle hide detailButton-mobile"> <button is="emby-button" type="button" class="button-flat btnShuffle hide detailButton">
<div class="detailButton-mobile-content"> <div class="detailButton-content">
<i class="material-icons detailButton-mobile-icon">shuffle</i> <i class="material-icons detailButton-icon">shuffle</i>
<div class="detailButton-mobile-text">${ButtonShuffle}</div> <div class="detailButton-text">${ButtonShuffle}</div>
</div> </div>
</button> </button>
<button is="emby-button" type="button" class="button-flat btnCancelSeriesTimer hide detailButton-mobile"> <button is="emby-button" type="button" class="button-flat btnCancelSeriesTimer hide detailButton">
<div class="detailButton-mobile-content"> <div class="detailButton-content">
<i class="material-icons detailButton-mobile-icon">delete</i> <i class="material-icons detailButton-icon">delete</i>
<div class="detailButton-mobile-text">${CancelSeries}</div> <div class="detailButton-text">${CancelSeries}</div>
</div> </div>
</button> </button>
<button is="emby-button" type="button" class="button-flat btnCancelTimer hide detailButton-mobile"> <button is="emby-button" type="button" class="button-flat btnCancelTimer hide detailButton">
<div class="detailButton-mobile-content"> <div class="detailButton-content">
<i class="material-icons detailButton-mobile-icon">stop</i> <i class="material-icons detailButton-icon">stop</i>
<div class="detailButton-mobile-text">${StopRecording}</div> <div class="detailButton-text">${StopRecording}</div>
</div> </div>
</button> </button>
<button is="emby-button" type="button" class="button-flat btnDeleteItem hide detailButton-mobile"> <button is="emby-button" type="button" class="button-flat btnDeleteItem hide detailButton">
<div class="detailButton-mobile-content"> <div class="detailButton-content">
<i class="material-icons detailButton-mobile-icon">delete</i> <i class="material-icons detailButton-icon">delete</i>
<div class="detailButton-mobile-text">${Delete}</div> <div class="detailButton-text">${Delete}</div>
</div> </div>
</button> </button>
<button is="emby-playstatebutton" type="button" class="button-flat btnPlaystate hide detailButton-mobile"> <button is="emby-playstatebutton" type="button" class="button-flat btnPlaystate hide detailButton">
<div class="detailButton-mobile-content"> <div class="detailButton-content">
<i class="material-icons detailButton-mobile-icon">check</i> <i class="material-icons detailButton-icon">check</i>
<div class="detailButton-mobile-text button-text"></div> <div class="detailButton-text button-text"></div>
</div> </div>
</button> </button>
<button is="emby-ratingbutton" type="button" class="button-flat btnUserRating hide detailButton-mobile"> <button is="emby-ratingbutton" type="button" class="button-flat btnUserRating hide detailButton">
<div class="detailButton-mobile-content"> <div class="detailButton-content">
<i class="material-icons detailButton-mobile-icon">favorite</i> <i class="material-icons detailButton-icon">favorite</i>
<div class="detailButton-mobile-text button-text">${Rate}</div> <div class="detailButton-text button-text">${Rate}</div>
</div> </div>
</button> </button>
<button is="emby-button" type="button" class="button-flat btnSplitVersions hide detailButton"> <button is="emby-button" type="button" class="button-flat btnSplitVersions hide detailButton">
<div class="detailButton-mobile-content"> <div class="detailButton-content">
<i class="material-icons detailButton-mobile-icon">call_split</i> <i class="material-icons detailButton-icon">call_split</i>
<div class="detailButton-mobile-text">${ButtonSplit}</div> <div class="detailButton-text">${ButtonSplit}</div>
</div> </div>
</button> </button>
<button is="emby-button" type="button" class="button-flat btnMoreCommands hide detailButton-mobile"> <button is="emby-button" type="button" class="button-flat btnMoreCommands hide detailButton">
<div class="detailButton-mobile-content"> <div class="detailButton-content">
<i class="material-icons detailButton-mobile-icon"></i> <i class="material-icons detailButton-icon"></i>
<div class="detailButton-mobile-text">${ButtonMore}</div> <div class="detailButton-text">${ButtonMore}</div>
</div> </div>
</button> </button>
</div> </div>
</div> </div>
<div class="detailImageContainer verticalSection-extrabottompadding padded-left"></div>
<div class="detailPageSecondaryContainer"> <div class="detailPageSecondaryContainer">
<div class="detailImageContainer padded-left"></div>
<div class="detailPageContent"> <div class="detailPageContent">
<div class="detailPagePrimaryContent padded-left padded-right"> <div class="detailPagePrimaryContent padded-left padded-right">
<div class="detailSection" style="margin-bottom: 0;"> <div class="detailSection" style="margin-bottom: 0;">

16
src/scripts/itembynamedetailpage.js
View file

@ -99,7 +99,7 @@ define(["connectionManager", "listView", "cardBuilder", "imageLoader", "libraryB
Limit: 10, Limit: 10,
SortBy: "StartDate" SortBy: "StartDate"
}, { }, {
shape: "backdrop", shape: "overflowBackdrop",
showTitle: true, showTitle: true,
centerText: true, centerText: true,
overlayMoreButton: true, overlayMoreButton: true,
@ -121,7 +121,7 @@ define(["connectionManager", "listView", "cardBuilder", "imageLoader", "libraryB
Limit: 10, Limit: 10,
SortBy: "SortName" SortBy: "SortName"
}, { }, {
shape: "portrait", shape: "overflowPortrait",
showTitle: true, showTitle: true,
centerText: true, centerText: true,
overlayMoreButton: true, overlayMoreButton: true,
@ -140,7 +140,7 @@ define(["connectionManager", "listView", "cardBuilder", "imageLoader", "libraryB
Limit: 10, Limit: 10,
SortBy: "SortName" SortBy: "SortName"
}, { }, {
shape: "portrait", shape: "overflowPortrait",
showTitle: true, showTitle: true,
centerText: true, centerText: true,
overlayPlayButton: true overlayPlayButton: true
@ -157,7 +157,7 @@ define(["connectionManager", "listView", "cardBuilder", "imageLoader", "libraryB
Limit: 10, Limit: 10,
SortBy: "SortName" SortBy: "SortName"
}, { }, {
shape: "portrait", shape: "overflowPortrait",
showTitle: true, showTitle: true,
centerText: true, centerText: true,
overlayPlayButton: true overlayPlayButton: true
@ -174,7 +174,7 @@ define(["connectionManager", "listView", "cardBuilder", "imageLoader", "libraryB
Limit: 10, Limit: 10,
SortBy: "SortName" SortBy: "SortName"
}, { }, {
shape: "portrait", shape: "overflowPortrait",
showTitle: true, showTitle: true,
centerText: true, centerText: true,
overlayMoreButton: true overlayMoreButton: true
@ -191,7 +191,7 @@ define(["connectionManager", "listView", "cardBuilder", "imageLoader", "libraryB
SortOrder: "Descending", SortOrder: "Descending",
SortBy: "ProductionYear,Sortname" SortBy: "ProductionYear,Sortname"
}, { }, {
shape: "square", shape: "overflowSquare",
playFromHere: true, playFromHere: true,
showTitle: true, showTitle: true,
showYear: true, showYear: true,
@ -211,7 +211,7 @@ define(["connectionManager", "listView", "cardBuilder", "imageLoader", "libraryB
Limit: 8, Limit: 8,
SortBy: "SortName" SortBy: "SortName"
}, { }, {
shape: "square", shape: "overflowSquare",
playFromHere: true, playFromHere: true,
showTitle: true, showTitle: true,
showParentTitle: true, showParentTitle: true,
@ -231,7 +231,7 @@ define(["connectionManager", "listView", "cardBuilder", "imageLoader", "libraryB
Limit: 6, Limit: 6,
SortBy: "SortName" SortBy: "SortName"
}, { }, {
shape: "backdrop", shape: "overflowBackdrop",
showTitle: true, showTitle: true,
showParentTitle: true, showParentTitle: true,
centerText: true, centerText: true,