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

fix detail page

Browse source
This commit is contained in:
Luke Pulverenti 2016-07-30 15:17:09 -04:00
parent 7570243d42
commit 75e4bd0cc5
5 changed files with 68 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

19
dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js vendored
View file

@ -620,6 +620,23 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
return Math.floor(Math.random() * (max - min + 1)) + min; return Math.floor(Math.random() * (max - min + 1)) + min;
} }
var numRandomColors = 5;
function getDefaultColorIndex(str) {
if (str) {
var character = String(str.substr(str.length - 1).charCodeAt());
var sum = 0;
for (var i = 0; i < character.length; i++) {
sum += parseInt(character.charAt(i));
}
var index = String(sum).substr(-1);
return index % numRandomColors;
} else {
return getRandomInt(1, numRandomColors);
}
}
function getCardTextLines(lines, cssClass, forceLines) { function getCardTextLines(lines, cssClass, forceLines) {
var html = ''; var html = '';
@ -977,7 +994,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
} }
if (!imgUrl) { if (!imgUrl) {
cardImageContainerClass += ' defaultCardColor' + getRandomInt(1, 5); cardImageContainerClass += ' defaultCardColor' + getDefaultColorIndex(item.Name);
} }
var separateCardBox = scalable; var separateCardBox = scalable;

12
dashboard-ui/itemdetails.html
View file

@ -74,7 +74,7 @@
<h1> <h1>
${HeaderNextUp} ${HeaderNextUp}
</h1> </h1>
<div is="emby-itemscontainer" class="smallItemsContainer nextUpItems" is="emby-itemscontainer"></div> <div is="emby-itemscontainer" class="nextUpItems vertical-wrap"></div>
</div> </div>
<div id="childrenCollapsible" class="hide detailSection"> <div id="childrenCollapsible" class="hide detailSection">
<h1 class="childrenSectionHeader"> <h1 class="childrenSectionHeader">
@ -88,7 +88,7 @@
<h1> <h1>
${HeaderAdditionalParts} ${HeaderAdditionalParts}
</h1> </h1>
<div id="additionalPartsContent" class="smallItemsContainer" is="emby-itemscontainer"></div> <div id="additionalPartsContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap"></div>
</div> </div>
<div id="castCollapsible" class="detailSection hide"> <div id="castCollapsible" class="detailSection hide">
<h1 id="peopleHeader"> <h1 id="peopleHeader">
@ -110,13 +110,13 @@
<h1> <h1>
${HeaderSpecialFeatures} ${HeaderSpecialFeatures}
</h1> </h1>
<div id="specialsContent" class="smallItemsContainer" is="emby-itemscontainer"></div> <div id="specialsContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap"></div>
</div> </div>
<div id="musicVideosCollapsible" class="detailSection hide"> <div id="musicVideosCollapsible" class="detailSection hide">
<h1> <h1>
${HeaderMusicVideos} ${HeaderMusicVideos}
</h1> </h1>
<div id="musicVideosContent" class="smallItemsContainer" is="emby-itemscontainer"></div> <div id="musicVideosContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap"></div>
</div> </div>
<div id="moreFromSection" class="detailSection hide"> <div id="moreFromSection" class="detailSection hide">
<h1 class="moreFromHeader"></h1> <h1 class="moreFromHeader"></h1>
@ -153,7 +153,7 @@
<button is="paper-icon-button-light" class="autoSize"><i class="md-icon">settings</i></button> <button is="paper-icon-button-light" class="autoSize"><i class="md-icon">settings</i></button>
</a> </a>
</h1> </h1>
<div id="scenesContent" class="smallItemsContainer"></div> <div id="scenesContent"></div>
</div> </div>
<div id="themeSongsCollapsible" class="detailSection hide"> <div id="themeSongsCollapsible" class="detailSection hide">
<h1> <h1>
@ -180,7 +180,7 @@
<h1> <h1>
${HeaderThemeVideos} ${HeaderThemeVideos}
</h1> </h1>
<div id="themeVideosContent" class="smallItemsContainer" is="emby-itemscontainer"></div> <div id="themeVideosContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap"></div>
</div> </div>
<div class="detailSection audioVideoMediaInfo hide"> <div class="detailSection audioVideoMediaInfo hide">

76
dashboard-ui/scripts/itemdetailpage.js
View file

@ -1,4 +1,4 @@
define(['layoutManager', 'datetime', 'mediaInfo', 'backdrop', 'listView', 'itemContextMenu', 'itemHelper', 'userdataButtons', 'dom', 'scrollStyles', 'emby-itemscontainer'], function (layoutManager, datetime, mediaInfo, backdrop, listView, itemContextMenu, itemHelper, userdataButtons, dom) { define(['layoutManager', 'cardBuilder', 'datetime', 'mediaInfo', 'backdrop', 'listView', 'itemContextMenu', 'itemHelper', 'userdataButtons', 'dom', 'scrollStyles', 'emby-itemscontainer'], function (layoutManager, cardBuilder, datetime, mediaInfo, backdrop, listView, itemContextMenu, itemHelper, userdataButtons, dom) {
var currentItem; var currentItem;
@ -373,9 +373,9 @@
section.classList.add('hide'); section.classList.add('hide');
} }
var html = LibraryBrowser.getPosterViewHtml({ var html = cardBuilder.getCardsHtml({
items: result.Items, items: result.Items,
shape: "detailPage169", shape: getThumbShape(false),
showTitle: true, showTitle: true,
displayAsSpecial: item.Type == "Season" && item.IndexNumber, displayAsSpecial: item.Type == "Season" && item.IndexNumber,
overlayText: true, overlayText: true,
@ -775,16 +775,26 @@
return browserInfo.mobile && AppInfo.enableAppLayouts && screen.availWidth <= 1000; return browserInfo.mobile && AppInfo.enableAppLayouts && screen.availWidth <= 1000;
} }
function getPortraitShape() { function getPortraitShape(scrollX) {
return enableScrollX() ? 'overflowPortrait' : 'detailPagePortrait'; if (scrollX == null) {
scrollX = enableScrollX();
}
return scrollX ? 'overflowPortrait' : 'portrait';
} }
function getSquareShape() { function getSquareShape(scrollX) {
return enableScrollX() ? 'overflowSquare' : 'detailPageSquare'; if (scrollX == null) {
scrollX = enableScrollX();
}
return scrollX ? 'overflowSquare' : 'square';
} }
function getThumbShape() { function getThumbShape(scrollX) {
return enableScrollX() ? 'overflowBackdrop' : 'detailPage169';
if (scrollX == null) {
scrollX = enableScrollX();
}
return scrollX ? 'overflowBackdrop' : 'backdrop';
} }
function renderMoreFromItems(page, item) { function renderMoreFromItems(page, item) {
@ -822,12 +832,12 @@
if (enableScrollX()) { if (enableScrollX()) {
html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">'; html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">';
} else { } else {
html += '<div is="emby-itemscontainer" class="itemsContainer">'; html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap">';
} }
var shape = item.Type == "MusicAlbum" || item.Type == "MusicArtist" ? getSquareShape() : getPortraitShape(); var shape = item.Type == "MusicAlbum" || item.Type == "MusicArtist" ? getSquareShape() : getPortraitShape();
html += LibraryBrowser.getPosterViewHtml({ html += cardBuilder.getCardsHtml({
items: result.Items, items: result.Items,
shape: shape, shape: shape,
showParentTitle: item.Type == "MusicAlbum", showParentTitle: item.Type == "MusicAlbum",
@ -892,9 +902,9 @@
if (enableScrollX()) { if (enableScrollX()) {
html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">'; html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">';
} else { } else {
html += '<div is="emby-itemscontainer" class="itemsContainer">'; html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap">';
} }
html += LibraryBrowser.getPosterViewHtml({ html += cardBuilder.getCardsHtml({
items: result.Items, items: result.Items,
shape: shape, shape: shape,
showParentTitle: item.Type == "MusicAlbum", showParentTitle: item.Type == "MusicAlbum",
@ -1085,7 +1095,7 @@
scrollX = enableScrollX(); scrollX = enableScrollX();
html = LibraryBrowser.getPosterViewHtml({ html = cardBuilder.getCardsHtml({
items: result.Items, items: result.Items,
shape: getPortraitShape(), shape: getPortraitShape(),
showTitle: true, showTitle: true,
@ -1096,9 +1106,9 @@
} }
else if (item.Type == "Season") { else if (item.Type == "Season") {
html = LibraryBrowser.getPosterViewHtml({ html = cardBuilder.getCardsHtml({
items: result.Items, items: result.Items,
shape: "detailPage169", shape: getThumbShape(false),
showTitle: true, showTitle: true,
displayAsSpecial: item.Type == "Season" && item.IndexNumber, displayAsSpecial: item.Type == "Season" && item.IndexNumber,
playFromHere: true, playFromHere: true,
@ -1109,7 +1119,7 @@
}); });
} }
else if (item.Type == "GameSystem") { else if (item.Type == "GameSystem") {
html = LibraryBrowser.getPosterViewHtml({ html = cardBuilder.getCardsHtml({
items: result.Items, items: result.Items,
shape: "auto", shape: "auto",
showTitle: true, showTitle: true,
@ -1120,15 +1130,17 @@
} }
var elem = page.querySelector('.childrenItemsContainer'); var elem = page.querySelector('.childrenItemsContainer');
elem.innerHTML = html;
ImageLoader.lazyChildren(elem);
if (scrollX) { if (scrollX) {
elem.classList.add('hiddenScrollX'); elem.classList.add('hiddenScrollX');
elem.classList.remove('vertical-wrap');
} else { } else {
elem.classList.remove('hiddenScrollX'); elem.classList.remove('hiddenScrollX');
elem.classList.add('vertical-wrap');
} }
elem.innerHTML = html;
ImageLoader.lazyChildren(elem);
if (item.Type == "BoxSet") { if (item.Type == "BoxSet") {
var collectionItemTypes = [ var collectionItemTypes = [
@ -1321,11 +1333,11 @@
html += '<button class="btnAddToCollection autoSize" type="button" is="paper-icon-button-light" style="margin-left:1em;"><i class="md-icon" icon="add">add</i></button>'; html += '<button class="btnAddToCollection autoSize" type="button" is="paper-icon-button-light" style="margin-left:1em;"><i class="md-icon" icon="add">add</i></button>';
html += '</div>'; html += '</div>';
html += '<div is="emby-itemscontainer" class="detailSectionContent itemsContainer">'; html += '<div is="emby-itemscontainer" class="detailSectionContent itemsContainer vertical-wrap">';
var shape = type.type == 'MusicAlbum' ? 'detailPageSquare' : 'detailPagePortrait'; var shape = type.type == 'MusicAlbum' ? getSquareShape(false) : getPortraitShape(false);
html += LibraryBrowser.getPosterViewHtml({ html += cardBuilder.getCardsHtml({
items: items, items: items,
shape: shape, shape: shape,
showTitle: true, showTitle: true,
@ -1577,13 +1589,11 @@
var chapters = item.Chapters || []; var chapters = item.Chapters || [];
var maxWidth = LibraryBrowser.getPosterViewInfo().backdropWidth;
if (enableScrollX()) { if (enableScrollX()) {
html += '<div class="hiddenScrollX itemsContainer">'; html += '<div class="hiddenScrollX itemsContainer">';
limit = null; limit = null;
} else { } else {
html += '<div class="itemsContainer">'; html += '<div class="itemsContainer vertical-wrap">';
} }
for (var i = 0, length = chapters.length; i < length; i++) { for (var i = 0, length = chapters.length; i < length; i++) {
@ -1597,7 +1607,7 @@
var onclick = item.PlayAccess == 'Full' && !isStatic ? ' onclick="ItemDetailPage.play(' + chapter.StartPositionTicks + ');"' : ''; var onclick = item.PlayAccess == 'Full' && !isStatic ? ' onclick="ItemDetailPage.play(' + chapter.StartPositionTicks + ');"' : '';
html += '<a class="card ' + getThumbShape() + 'Card" href="#"' + onclick + '>'; html += '<a class="card ' + getThumbShape() + 'Card scalableCard" href="#"' + onclick + '>';
html += '<div class="cardBox">'; html += '<div class="cardBox">';
html += '<div class="cardScalable">'; html += '<div class="cardScalable">';
@ -1607,7 +1617,7 @@
if (chapter.ImageTag) { if (chapter.ImageTag) {
imgUrl = ApiClient.getScaledImageUrl(item.Id, { imgUrl = ApiClient.getScaledImageUrl(item.Id, {
maxWidth: maxWidth, maxWidth: 400,
tag: chapter.ImageTag, tag: chapter.ImageTag,
type: "Chapter", type: "Chapter",
index: i index: i
@ -1621,7 +1631,7 @@
html += '<div class="cardContent">'; html += '<div class="cardContent">';
html += '<div class="cardImage lazy" data-src="' + imgUrl + '"></div>'; html += '<div class="cardImage lazy" data-src="' + imgUrl + '"></div>';
html += '<div class="cardFooter">'; html += '<div class="innerCardFooter">';
html += '<div class="cardText">' + chapterName + '</div>'; html += '<div class="cardText">' + chapterName + '</div>';
html += '<div class="cardText">'; html += '<div class="cardText">';
html += datetime.getDisplayRunningTime(chapter.StartPositionTicks); html += datetime.getDisplayRunningTime(chapter.StartPositionTicks);
@ -1819,8 +1829,6 @@
var html = ''; var html = '';
var maxWidth = LibraryBrowser.getPosterViewInfo().backdropWidth;
for (var i = 0, length = items.length; i < length; i++) { for (var i = 0, length = items.length; i < length; i++) {
if (limit && i >= limit) { if (limit && i >= limit) {
@ -1829,7 +1837,7 @@
var item = items[i]; var item = items[i];
var cssClass = "card detailPage169Card"; var cssClass = "card backdropCard scalableCard";
var href = "itemdetails.html?id=" + item.Id; var href = "itemdetails.html?id=" + item.Id;
@ -1847,7 +1855,7 @@
if (imageTags.Primary) { if (imageTags.Primary) {
imgUrl = ApiClient.getScaledImageUrl(item.Id, { imgUrl = ApiClient.getScaledImageUrl(item.Id, {
maxWidth: maxWidth, maxWidth: 400,
tag: imageTags.Primary, tag: imageTags.Primary,
type: "primary" type: "primary"
}); });
@ -1861,7 +1869,7 @@
html += '<div class="cardContent">'; html += '<div class="cardContent">';
html += '<div class="cardImage lazy" data-src="' + imgUrl + '"></div>'; html += '<div class="cardImage lazy" data-src="' + imgUrl + '"></div>';
html += '<div class="cardFooter">'; html += '<div class="innerCardFooter">';
html += '<div class="cardText">' + item.Name + '</div>'; html += '<div class="cardText">' + item.Name + '</div>';
html += '<div class="cardText">'; html += '<div class="cardText">';
if (item.RunTimeTicks != "") { if (item.RunTimeTicks != "") {

2
dashboard-ui/scripts/librarybrowser.js
View file

@ -1,4 +1,4 @@
define(['viewManager', 'appSettings', 'appStorage', 'apphost', 'datetime', 'itemHelper', 'mediaInfo', 'scroller', 'indicators', 'dom', 'imageLoader', 'scrollStyles'], function (viewManager, appSettings, appStorage, appHost, datetime, itemHelper, mediaInfo, scroller, indicators, dom, imageLoader) { define(['viewManager', 'appSettings', 'appStorage', 'apphost', 'datetime', 'itemHelper', 'mediaInfo', 'scroller', 'indicators', 'dom', 'imageLoader', 'scrollStyles'], function (viewManager, appSettings, appStorage, appHost, datetime, itemHelper, mediaInfo, scroller, indicators, dom) {
function fadeInRight(elem) { function fadeInRight(elem) {

2
dashboard-ui/shared.html
View file

@ -110,7 +110,7 @@
<h1> <h1>
${HeaderScenes} ${HeaderScenes}
</h1> </h1>
<div id="scenesContent" class="smallItemsContainer"></div> <div id="scenesContent"></div>
</div> </div>
<div class="detailSection audioVideoMediaInfo hide"> <div class="detailSection audioVideoMediaInfo hide">