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

context for ibn items

This commit is contained in:
Luke Pulverenti 2013-04-23 10:46:27 -04:00
parent 03a19ef190
commit 8252b6c0bd
24 changed files with 250 additions and 63 deletions

View file

@ -191,7 +191,7 @@
.tileItem {
background: #333;
padding: 10px 10px 3px;
padding: 10px 7px 5px;
margin: 3px 0;
text-shadow: none;
font-weight: normal!important;
@ -224,7 +224,7 @@
}
.tileItem p {
margin: .35em 0;
margin: .35em 0 0;
}
.tileItem .imgUserItemRating {
@ -244,6 +244,9 @@
.tileName {
font-weight: bold;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.tileItem .userDataIcons img {
@ -270,7 +273,7 @@
}
}
@media all and (min-width: 850px) {
@media all and (min-width: 750px) {
.tileItem {
width: 46%;
display: inline-block;
@ -279,7 +282,14 @@
}
.tileImage {
height: 140px;
height: 88px;
}
}
@media all and (min-width: 850px) {
.tileImage {
height: 105px;
}
.tileItem .userDataIcons img {
@ -288,7 +298,7 @@
}
.tileItem p {
margin: .75em 0;
margin: .75em 0 0;
}
.tileItem .itemProgress {
@ -297,6 +307,10 @@
}
@media all and (min-width: 1200px) {
.tileImage {
height: 100px;
}
.tileItem {
width: 31%;
}
@ -307,9 +321,6 @@
}
@media all and (min-width: 1440px) {
.tileImage {
height: 170px;
}
}
@ -317,10 +328,6 @@
.tileItem {
width: 31.5%;
}
.tileImage {
height: 200px;
}
}
@media all and (min-width: 2000px) {
@ -345,6 +352,7 @@
.centeredDetailTable {
margin: auto;
}
.stretchedDetailTable {
width: 100%;
}
@ -369,6 +377,7 @@
width: 18px;
height: 18px;
}
.userDataCell {
width: 140px;
}

View file

@ -4,9 +4,84 @@
<title></title>
</head>
<body>
<div id="itemByNameDetailPage" data-role="page" class="page libraryPage" data-theme="a">
<div id="itemByNameDetailPage" data-role="page" class="page libraryPage noLogoPage" data-theme="a">
<div id="genericHeader" class="header">
<a class="logo" href="index.html" id="standardLogo" style="display: none;">
<img class="imgLogoIcon" src="css/images/mblogoicon.png"><img class="imgLogoText" src="css/images/mblogotextwhite.png"></a>
</div>
<h1 class="libraryPageHeader" style="display: none;"><a href="index.html" class="imageLink">
<img src="css/images/mblogoicon.png"></a><span></span></h1>
<div data-role="content">
<div id="movieGenreTabs" class="itemTabs" style="display: none;">
<div data-role="controlgroup" data-type="horizontal" class="libraryViewNav" data-mini="true">
<a href="moviesrecommended.html" data-role="button">Suggested</a>
<a href="movies.html" data-role="button">Movies</a>
<a href="boxsets.html" data-role="button">Box Sets</a>
<a href="movietrailers.html" data-role="button">Trailers</a>
<a href="moviegenres.html" data-role="button" class="ui-btn-active">Genres</a>
<a href="moviepeople.html" data-role="button">People</a>
<a href="moviestudios.html" data-role="button">Studios</a>
</div>
</div>
<div id="moviePeopleTabs" class="itemTabs" style="display: none;">
<div data-role="controlgroup" data-type="horizontal" class="libraryViewNav" data-mini="true">
<a href="moviesrecommended.html" data-role="button">Suggested</a>
<a href="movies.html" data-role="button">Movies</a>
<a href="boxsets.html" data-role="button">Box Sets</a>
<a href="movietrailers.html" data-role="button">Trailers</a>
<a href="moviegenres.html" data-role="button">Genres</a>
<a href="moviepeople.html" data-role="button" class="ui-btn-active">People</a>
<a href="moviestudios.html" data-role="button">Studios</a>
</div>
</div>
<div id="movieStudioTabs" class="itemTabs" style="display: none;">
<div data-role="controlgroup" data-type="horizontal" class="libraryViewNav" data-mini="true">
<a href="moviesrecommended.html" data-role="button">Suggested</a>
<a href="movies.html" data-role="button">Movies</a>
<a href="boxsets.html" data-role="button">Box Sets</a>
<a href="movietrailers.html" data-role="button">Trailers</a>
<a href="moviegenres.html" data-role="button">Genres</a>
<a href="moviepeople.html" data-role="button">People</a>
<a href="moviestudios.html" data-role="button" class="ui-btn-active">Studios</a>
</div>
</div>
<div id="tvGenreTabs" class="itemTabs" style="display: none;">
<div data-role="controlgroup" data-type="horizontal" class="libraryViewNav" data-mini="true">
<a href="tvrecommended.html" data-role="button">Suggested</a>
<a href="tvshows.html" data-role="button">Shows</a>
<a href="tvgenres.html" data-role="button" class="ui-btn-active">Genres</a>
<a href="tvpeople.html" data-role="button">Actors</a>
<a href="tvstudios.html" data-role="button">Networks</a>
</div>
</div>
<div id="tvPeopleTabs" class="itemTabs" style="display: none;">
<div data-role="controlgroup" data-type="horizontal" class="libraryViewNav" data-mini="true">
<a href="tvrecommended.html" data-role="button">Suggested</a>
<a href="tvshows.html" data-role="button">Shows</a>
<a href="tvgenres.html" data-role="button">Genres</a>
<a href="tvpeople.html" data-role="button" class="ui-btn-active">Actors</a>
<a href="tvstudios.html" data-role="button">Networks</a>
</div>
</div>
<div id="tvStudioTabs" class="itemTabs" style="display: none;">
<div data-role="controlgroup" data-type="horizontal" class="libraryViewNav" data-mini="true">
<a href="tvrecommended.html" data-role="button">Suggested</a>
<a href="tvshows.html" data-role="button">Shows</a>
<a href="tvgenres.html" data-role="button">Genres</a>
<a href="tvpeople.html" data-role="button">Actors</a>
<a href="tvstudios.html" data-role="button" class="ui-btn-active">Networks</a>
</div>
</div>
<div id="musicGenreTabs" class="itemTabs" style="display: none;">
<div data-role="controlgroup" data-type="horizontal" class="libraryViewNav" data-mini="true">
<a href="musicrecommended.html" data-role="button">Suggested</a>
<a href="songs.html" data-role="button">Songs</a>
<a href="musicalbums.html" data-role="button">Albums</a>
<a href="musicartists.html" data-role="button">Artists</a>
<a href="musicgenres.html" data-role="button" class="ui-btn-active">Genres</a>
</div>
</div>
<div class="detailPagePrimaryInfo">
<div class="itemImageBlock">
<div id="itemMedia" style="position: relative;">

View file

@ -45,8 +45,9 @@
$('#seriesName', page).hide();
}
setInitialCollapsibleState(page, item);
renderDetails(page, item);
var context = getContext(item);
setInitialCollapsibleState(page, item, context);
renderDetails(page, item, context);
if (MediaPlayer.canPlay(item)) {
$('#btnPlayMenu', page).show();
@ -65,6 +66,25 @@
});
}
function getContext(item) {
// should return either movies, tv, music or games
if (item.Type == "Episode" || item.Type == "Series" || item.Type == "Season") {
return "tv";
}
if (item.Type == "Movie" || item.Type == "Trailer" || item.Type == "BoxSet") {
return "movies";
}
if (item.Type == "Audio" || item.Type == "MusicAlbum" || item.Type == "MusicArtist" || item.Type == "Artist") {
return "music";
}
if (item.MediaType == "Game") {
return "games";
}
return "";
}
function enableCustomHeader(page, text) {
var elem = $('.libraryPageHeader', page).show();
@ -125,7 +145,7 @@
}
}
function setInitialCollapsibleState(page, item) {
function setInitialCollapsibleState(page, item, context) {
if (item.ChildCount && item.Type == "MusicAlbum") {
$('#itemSongs', page).show();
@ -176,11 +196,11 @@
$('#castCollapsible', page).hide();
} else {
$('#castCollapsible', page).show();
renderCast(page, item);
renderCast(page, item, context);
}
}
function renderDetails(page, item) {
function renderDetails(page, item, context) {
if (item.Taglines && item.Taglines.length) {
$('#itemTagline', page).html(item.Taglines[0]).show();
@ -202,8 +222,8 @@
$('#itemMiscInfo', page).html(LibraryBrowser.getMiscInfoHtml(item));
LibraryBrowser.renderGenres($('#itemGenres', page), item);
LibraryBrowser.renderStudios($('#itemStudios', page), item);
LibraryBrowser.renderGenres($('#itemGenres', page), item, context);
LibraryBrowser.renderStudios($('#itemStudios', page), item, context);
renderUserDataIcons(page, item);
LibraryBrowser.renderLinks($('#itemLinks', page), item);
}
@ -485,7 +505,7 @@
});
}
function renderCast(page, item) {
function renderCast(page, item, context) {
var html = '';
var casts = item.People || [];
@ -494,7 +514,7 @@
var cast = casts[i];
html += LibraryBrowser.createCastImage(cast);
html += LibraryBrowser.createCastImage(cast, context);
}
$('#castContent', page).html(html);

View file

@ -25,7 +25,8 @@
html += LibraryBrowser.getPosterDetailViewHtml({
items: result.Items,
useAverageAspectRatio: true
useAverageAspectRatio: true,
context: "movies"
});
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);

View file

@ -70,8 +70,8 @@
$('#itemMiscInfo', page).html(LibraryBrowser.getMiscInfoHtml(item));
LibraryBrowser.renderGenres($('#itemGenres', page), item);
LibraryBrowser.renderStudios($('#itemStudios', page), item);
LibraryBrowser.renderGenres($('#itemGenres', page), item, "games");
LibraryBrowser.renderStudios($('#itemStudios', page), item, "games");
renderUserDataIcons(page, item);
LibraryBrowser.renderLinks($('#itemLinks', page), item);
}

View file

@ -26,7 +26,8 @@
items: result.Items,
useAverageAspectRatio: true,
countNameSingular: "Game",
countNamePlural: "Games"
countNamePlural: "Games",
context: "games"
});
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);

View file

@ -32,8 +32,8 @@
html += '<td><a href="gamedetail.html?id='+item.Id+'">' + item.Name + '</a></td>';
html += '<td>' + item.DisplayMediaType + '</td>';
html += '<td>' + item.ReleaseYear + '</td>';
html += '<td>' + /*LibraryBrowser.renderGenres('', item)*/ + '</td>';
html += '<td>' + /*LibraryBrowser.renderStudios('', item)*/ + '</td>';
html += '<td>' + /*LibraryBrowser.renderGenres('', item, "games")*/ + '</td>';
html += '<td>' + /*LibraryBrowser.renderStudios('', item, "games")*/ + '</td>';
html += '<td>' + /* */ + '</td>';
html += '</tr>';

View file

@ -26,7 +26,8 @@
items: result.Items,
useAverageAspectRatio: true,
countNameSingular: "Game",
countNamePlural: "Games"
countNamePlural: "Games",
context: "games"
});
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);

View file

@ -35,8 +35,8 @@
$('#itemMiscInfo', page).html(LibraryBrowser.getMiscInfoHtml(item));
LibraryBrowser.renderGenres($('#itemGenres', page), item);
LibraryBrowser.renderStudios($('#itemStudios', page), item);
LibraryBrowser.renderGenres($('#itemGenres', page), item, "games");
LibraryBrowser.renderStudios($('#itemStudios', page), item, "games");
renderUserDataIcons(page, item);
LibraryBrowser.renderLinks($('#itemLinks', page), item);
}

View file

@ -26,7 +26,8 @@
html += LibraryBrowser.getPosterDetailViewHtml({
items: result.Items,
useAverageAspectRatio: true
useAverageAspectRatio: true,
context: "games"
});
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);

View file

@ -45,6 +45,8 @@
currentItem = item;
renderHeader(page, item);
name = item.Name;
$('#itemImage', page).html(LibraryBrowser.getDetailImageHtml(item));
@ -60,6 +62,68 @@
});
}
function enableCustomHeader(page, text) {
var elem = $('.libraryPageHeader', page).show();
$('span', elem).html(text);
}
function renderHeader(page, item) {
var context = getParameterByName('context');
if (context == "movies") {
enableCustomHeader(page, "Movies");
$('#standardLogo', page).hide();
}
else if (context == "music") {
enableCustomHeader(page, "Music");
$('#standardLogo', page).hide();
}
else if (context == "tv") {
enableCustomHeader(page, "TV Shows");
$('#standardLogo', page).hide();
}
else if (context == "games") {
enableCustomHeader(page, "Games");
$('#standardLogo', page).hide();
}
else {
$('.libraryPageHeader', page).hide();
$('#standardLogo', page).show();
}
$('.itemTabs', page).hide();
if (context == "movies" && item.Type == "Genre") {
$('#movieGenreTabs', page).show();
}
if (context == "movies" && item.Type == "Person") {
$('#moviePeopleTabs', page).show();
}
if (context == "movies" && item.Type == "Studio") {
$('#movieStudioTabs', page).show();
}
if (context == "tv" && item.Type == "Studio") {
$('#tvStudioTabs', page).show();
}
if (context == "tv" && item.Type == "Genre") {
$('#tvGenreTabs', page).show();
}
if (context == "tv" && item.Type == "Person") {
$('#tvPeopleTabs', page).show();
}
if (context == "music" && item.Type == "Genre") {
$('#musicGenreTabs', page).show();
}
}
function renderTabs(page, item) {
var promise;

View file

@ -27,7 +27,7 @@
var imgUrl;
var isDefault = false;
html += '<a class="tileItem" href="' + LibraryBrowser.getHref(item) + '">';
html += '<a class="tileItem" href="' + LibraryBrowser.getHref(item, options.context) + '">';
if (options.preferBackdrop && item.BackdropImageTags && item.BackdropImageTags.length) {
@ -208,7 +208,7 @@
}
html += '<td>' + (num || "") + '</td>';
html += '<td><a href="' + LibraryBrowser.getHref(item) + '">' + (item.Name || "") + '</a></td>';
html += '<td><a href="' + LibraryBrowser.getHref(item, "music") + '">' + (item.Name || "") + '</a></td>';
if (options.showAlbum) {
html += '<td><a href="itemdetails.html?id=' + item.ParentId + '">' + item.Album + '</a></td>';
@ -234,7 +234,7 @@
return html;
},
getHref: function (item) {
getHref: function (item, itemByNameContext) {
if (item.url) {
return item.url;
@ -253,16 +253,16 @@
return "itemdetails.html?id=" + item.Id;
}
if (item.Type == "Genre") {
return "itembynamedetails.html?genre=" + item.Name;
return "itembynamedetails.html?genre=" + item.Name + "&context=" + itemByNameContext;
}
if (item.Type == "Studio") {
return "itembynamedetails.html?studio=" + item.Name;
return "itembynamedetails.html?studio=" + item.Name + "&context=" + itemByNameContext;
}
if (item.Type == "Person") {
return "itembynamedetails.html?person=" + item.Name;
return "itembynamedetails.html?person=" + item.Name + "&context=" + itemByNameContext;
}
if (item.Type == "Artist") {
return "itembynamedetails.html?artist=" + item.Name;
return "itembynamedetails.html?artist=" + item.Name + "&context=" + itemByNameContext;
}
return item.IsFolder ? (item.Id ? "itemList.html?parentId=" + item.Id : "#") : "itemdetails.html?id=" + item.Id;
@ -397,7 +397,7 @@
var cssClass = showText ? "posterViewItem posterViewItemWithDualText" : "posterViewItem posterViewItemWithNoText";
html += "<div class='" + cssClass + "'><a href='" + LibraryBrowser.getHref(item) + "'>";
html += "<div class='" + cssClass + "'><a href='" + LibraryBrowser.getHref(item, "tv") + "'>";
if (options.preferBackdrop && item.BackdropImageTags && item.BackdropImageTags.length) {
html += "<img src='" + ApiClient.getImageUrl(item.Id, {
@ -1121,7 +1121,7 @@
},
renderStudios: function (elem, item) {
renderStudios: function (elem, item, context) {
if (item.Studios && item.Studios.length) {
@ -1133,7 +1133,7 @@
html += '&nbsp;&nbsp;/&nbsp;&nbsp;';
}
html += '<a href="itembynamedetails.html?studio=' + item.Studios[i] + '">' + item.Studios[i] + '</a>';
html += '<a href="itembynamedetails.html?context=' + context + '&studio=' + item.Studios[i] + '">' + item.Studios[i] + '</a>';
}
elem.show().html(html).trigger('create');
@ -1144,7 +1144,7 @@
}
},
renderGenres: function (elem, item) {
renderGenres: function (elem, item, context) {
if (item.Genres && item.Genres.length) {
var html = 'Genres:&nbsp;&nbsp;';
@ -1155,7 +1155,7 @@
html += '&nbsp;&nbsp;/&nbsp;&nbsp;';
}
html += '<a href="itembynamedetails.html?genre=' + item.Genres[i] + '">' + item.Genres[i] + '</a>';
html += '<a href="itembynamedetails.html?context=' + context + '&genre=' + item.Genres[i] + '">' + item.Genres[i] + '</a>';
}
elem.show().html(html).trigger('create');
@ -1211,7 +1211,7 @@
var cssClass = showText ? "posterViewItem" : "posterViewItem posterViewItemWithNoText";
html += "<div class='" + cssClass + "'><a href='" + LibraryBrowser.getHref(item) + "'>";
html += "<div class='" + cssClass + "'><a href='" + LibraryBrowser.getHref(item, "games") + "'>";
if (options.preferBackdrop && item.BackdropImageTags && item.BackdropImageTags.length) {
html += "<img src='" + ApiClient.getImageUrl(item.Id, {
@ -1399,13 +1399,13 @@
return html;
},
createCastImage: function (cast) {
createCastImage: function (cast, context) {
var html = '';
var role = cast.Role || cast.Type;
html += '<a href="itembynamedetails.html?person=' + cast.Name + '">';
html += '<a href="itembynamedetails.html?context=' + context + '&person=' + cast.Name + '">';
html += '<div class="posterViewItem posterViewItemWithDualText">';
if (cast.PrimaryImageTag) {

View file

@ -26,7 +26,8 @@
items: result.Items,
useAverageAspectRatio: true,
countNameSingular: "Movie",
countNamePlural: "Movies"
countNamePlural: "Movies",
context: "movies"
});
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);

View file

@ -27,7 +27,8 @@
items: result.Items,
useAverageAspectRatio: true,
countNameSingular: "Movie",
countNamePlural: "Movies"
countNamePlural: "Movies",
context: "movies"
});
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);

View file

@ -28,13 +28,15 @@
html += LibraryBrowser.getPosterDetailViewHtml({
items: result.Items,
useAverageAspectRatio: true,
preferBackdrop: true
preferBackdrop: true,
context: "movies"
});
}
else if (view == "Poster") {
html += LibraryBrowser.getPosterDetailViewHtml({
items: result.Items,
useAverageAspectRatio: true
useAverageAspectRatio: true,
context: "movies"
});
}

View file

@ -26,7 +26,8 @@
items: result.Items,
useAverageAspectRatio: true,
countNameSingular: "Movie",
countNamePlural: "Movies"
countNamePlural: "Movies",
context: "movies"
});
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);

View file

@ -28,13 +28,15 @@
html += LibraryBrowser.getPosterDetailViewHtml({
items: result.Items,
useAverageAspectRatio: true,
preferBackdrop: true
preferBackdrop: true,
context: "movies"
});
}
else if (view == "Poster") {
html += LibraryBrowser.getPosterDetailViewHtml({
items: result.Items,
useAverageAspectRatio: true
useAverageAspectRatio: true,
context: "movies"
});
}

View file

@ -24,7 +24,8 @@
html += LibraryBrowser.getPosterDetailViewHtml({
items: result.Items,
useAverageAspectRatio: true
useAverageAspectRatio: true,
context: "music"
});
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);

View file

@ -27,7 +27,8 @@
useAverageAspectRatio: true,
countNameSingular: "Song",
countNamePlural: "Songs",
preferBackdrop: true
preferBackdrop: true,
context: "music"
});
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);

View file

@ -26,7 +26,8 @@
items: result.Items,
useAverageAspectRatio: true,
countNameSingular: "Song",
countNamePlural: "Songs"
countNamePlural: "Songs",
context: "music"
});
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);

View file

@ -26,7 +26,8 @@
items: result.Items,
useAverageAspectRatio: true,
countNameSingular: "Show",
countNamePlural: "Shows"
countNamePlural: "Shows",
context: "tv"
});
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);

View file

@ -27,7 +27,8 @@
items: result.Items,
useAverageAspectRatio: true,
countNameSingular: "Show",
countNamePlural: "Shows"
countNamePlural: "Shows",
context: "tv"
});
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);

View file

@ -28,13 +28,15 @@
html += LibraryBrowser.getPosterDetailViewHtml({
items: result.Items,
useAverageAspectRatio: true,
preferBackdrop: true
preferBackdrop: true,
context: "tv"
});
}
else if (view == "Poster") {
html += LibraryBrowser.getPosterDetailViewHtml({
items: result.Items,
useAverageAspectRatio: true
useAverageAspectRatio: true,
context: "tv"
});
}

View file

@ -26,7 +26,8 @@
items: result.Items,
useAverageAspectRatio: true,
countNameSingular: "Show",
countNamePlural: "Shows"
countNamePlural: "Shows",
context: "tv"
});
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);