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

improved games display

This commit is contained in:
Luke Pulverenti 2013-04-24 16:28:42 -04:00
parent 9ffcf2bba9
commit 097653775a
21 changed files with 87 additions and 269 deletions

View file

@ -1,48 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="gameDetailPage" data-role="page" class="page libraryPage" data-theme="a">
<div data-role="content">
<div class="detailPagePrimaryInfo">
<div class="itemImageBlock">
<div id="itemMedia" style="position: relative;">
<div id="itemImage"></div>
</div>
</div>
<div class="itemDetailBlock">
<h1 id="seriesName" class="detailPageName hide"></h1>
<h1 id="itemName" class="detailPageName"></h1>
<p id="itemMiscInfo" class="itemMiscInfo"></p>
<p id="itemTagline" style="font-style: italic;"></p>
<p id="itemOverview"></p>
<p id="itemRatings"></p>
<p id="itemCommunityRating"></p>
<p id="itemBudget"></p>
<p id="itemGenres"></p>
<p id="itemStudios"></p>
<p id="itemLinks"></p>
</div>
</div>
<div data-role="collapsible" id="trailersCollapsible" class="hide" data-mini="true">
<h3>Trailers</h3>
<div id="trailersContent"></div>
</div>
<div data-role="collapsible" id="galleryCollapsible" data-mini="true">
<h3>Gallery</h3>
<div id="galleryContent"></div>
</div>
</div>
</div>
</body>
</html>

View file

@ -72,6 +72,15 @@
<a href="musicgenres.html" data-role="button">Genres</a> <a href="musicgenres.html" data-role="button">Genres</a>
</div> </div>
</div> </div>
<div id="gameTabs" style="display: none;">
<div data-role="controlgroup" data-type="horizontal" class="libraryViewNav" data-mini="true">
<a href="gamesrecommended.html" data-role="button">Suggested</a>
<a href="games.html" data-role="button" class="ui-btn-active">Games</a>
<a href="gamesystems.html" data-role="button">Game Systems</a>
<a href="gamegenres.html" data-role="button">Genres</a>
<a href="gamestudios.html" data-role="button">Studios</a>
</div>
</div>
<div class="detailPageContent"> <div class="detailPageContent">
<div class="detailPagePrimaryInfo"> <div class="detailPagePrimaryInfo">
<div class="itemImageBlock"> <div class="itemImageBlock">
@ -136,25 +145,25 @@
<div id="specialsContent"></div> <div id="specialsContent"></div>
</div> </div>
</div> </div>
<div style="display: inline-block; vertical-align: top;"> <div>
<div data-role="collapsible" id="galleryCollapsible" style="display: none;" data-mini="true" data-collapsed="false" data-corners="false"> <div data-role="collapsible" id="galleryCollapsible" style="display: none;" data-mini="true" data-collapsed="false" data-corners="false">
<h3>Gallery</h3> <h3>Gallery</h3>
<div id="galleryContent"></div> <div id="galleryContent"></div>
</div> </div>
</div> </div>
<div style="display: inline-block; vertical-align: top;"> <div>
<div data-role="collapsible" id="themeSongsCollapsible" style="display: none;" data-mini="true" data-collapsed="false" data-corners="false"> <div data-role="collapsible" id="themeSongsCollapsible" style="display: none;" data-mini="true" data-collapsed="false" data-corners="false">
<h3>Theme Songs</h3> <h3>Theme Songs</h3>
<div id="themeSongsContent"></div> <div id="themeSongsContent"></div>
</div> </div>
</div> </div>
<div style="display: inline-block; vertical-align: top;"> <div>
<div data-role="collapsible" id="castCollapsible" style="display: none;" data-mini="true" data-collapsed="false" data-corners="false"> <div data-role="collapsible" id="castCollapsible" style="display: none;" data-mini="true" data-collapsed="false" data-corners="false">
<h3>Cast & Crew</h3> <h3>Cast & Crew</h3>
<div id="castContent"></div> <div id="castContent"></div>
</div> </div>
</div> </div>
<div style="display: inline-block; vertical-align: top;"> <div>
<div data-role="collapsible" id="scenesCollapsible" style="display: none;" data-mini="true" data-collapsed="false" data-corners="false"> <div data-role="collapsible" id="scenesCollapsible" style="display: none;" data-mini="true" data-collapsed="false" data-corners="false">
<h3>Scenes</h3> <h3>Scenes</h3>
<div id="scenesContent"></div> <div id="scenesContent"></div>

View file

@ -71,10 +71,10 @@
<strong>Filters:</strong> <strong>Filters:</strong>
</legend> </legend>
<input class="chkStandardFilter" type="checkbox" name="chkPlayed" id="chkPlayed" data-theme="c" data-filter="IsPlayed" data-mini="true"> <input class="chkStandardFilter" type="checkbox" name="chkPlayed" id="chkPlayed" data-theme="c" data-filter="IsPlayed" data-mini="true">
<label for="chkPlayed">Watched</label> <label for="chkPlayed">Played</label>
<input class="chkStandardFilter" type="checkbox" name="chkUnplayed" id="chkUnplayed" data-theme="c" data-filter="IsUnPlayed" data-mini="true"> <input class="chkStandardFilter" type="checkbox" name="chkUnplayed" id="chkUnplayed" data-theme="c" data-filter="IsUnPlayed" data-mini="true">
<label for="chkUnplayed">Unwatched</label> <label for="chkUnplayed">Unplayed</label>
<input class="chkStandardFilter" type="checkbox" name="chkResumable" id="chkResumable" data-theme="c" data-filter="IsResumable" data-mini="true"> <input class="chkStandardFilter" type="checkbox" name="chkResumable" id="chkResumable" data-theme="c" data-filter="IsResumable" data-mini="true">
<label for="chkResumable">Resumable</label> <label for="chkResumable">Resumable</label>

View file

@ -65,11 +65,11 @@
Dashboard.hideLoadingMsg(); Dashboard.hideLoadingMsg();
}); });
} }
function getContext(item) { function getContext(item) {
// should return either movies, tv, music or games // should return either movies, tv, music or games
if (item.Type == "Episode" || item.Type == "Series" || item.Type == "Season") { if (item.Type == "Episode" || item.Type == "Series" || item.Type == "Season") {
return "tv"; return "tv";
} }
@ -105,6 +105,10 @@
enableCustomHeader(page, "Music"); enableCustomHeader(page, "Music");
$('#standardLogo', page).hide(); $('#standardLogo', page).hide();
} }
else if (item.MediaType == "Game") {
enableCustomHeader(page, "Games");
$('#standardLogo', page).hide();
}
else { else {
$('.libraryPageHeader', page).hide(); $('.libraryPageHeader', page).hide();
$('#standardLogo', page).show(); $('#standardLogo', page).show();
@ -128,6 +132,12 @@
$('#movieTabs', page).hide(); $('#movieTabs', page).hide();
} }
if (item.MediaType == "Game") {
$('#gameTabs', page).show();
} else {
$('#gameTabs', page).hide();
}
if (item.Type == "BoxSet") { if (item.Type == "BoxSet") {
$('#boxsetTabs', page).show(); $('#boxsetTabs', page).show();
} else { } else {
@ -278,14 +288,14 @@
function renderUserDataIcons(page, item) { function renderUserDataIcons(page, item) {
$('#itemRatings', page).html(LibraryBrowser.getUserDataIconsHtml(item)); $('#itemRatings', page).html(LibraryBrowser.getUserDataIconsHtml(item));
} }
function renderThemeSongs(page, item, result) { function renderThemeSongs(page, item, result) {
if (result.Items.length) { if (result.Items.length) {
$('#themeSongsCollapsible', page).show(); $('#themeSongsCollapsible', page).show();
$('#themeSongsContent', page).html(LibraryBrowser.getSongTableHtml(result.Items, {})).trigger('create'); $('#themeSongsContent', page).html(LibraryBrowser.getSongTableHtml(result.Items, { showArtist: true, showAlbum: true })).trigger('create');
} }
} }

View file

@ -1,184 +0,0 @@
(function ($, document, LibraryBrowser, window) {
var currentItem;
function reload(page) {
var id = getParameterByName('id');
Dashboard.showLoadingMsg();
ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(function (item) {
currentItem = item;
var name = item.Name;
if (item.IndexNumber != null) {
name = item.IndexNumber + " - " + name;
}
if (item.ParentIndexNumber != null) {
name = item.ParentIndexNumber + "." + name;
}
$('#itemImage', page).html(LibraryBrowser.getDetailImageHtml(item));
Dashboard.setPageTitle(name);
$('#itemName', page).html(name);
setInitialCollapsibleState(page, item);
renderDetails(page, item);
if (LibraryBrowser.shouldDisplayGallery(item)) {
$('#galleryCollapsible', page).show();
} else {
$('#galleryCollapsible', page).hide();
}
Dashboard.hideLoadingMsg();
});
}
function setInitialCollapsibleState(page, item) {
if (!item.LocalTrailerCount || item.LocalTrailerCount == 0) {
$('#trailersCollapsible', page).hide();
} else {
$('#trailersCollapsible', page).show();
}
}
function renderDetails(page, item) {
if (item.Taglines && item.Taglines.length) {
$('#itemTagline', page).html(item.Taglines[0]).show();
} else {
$('#itemTagline', page).hide();
}
LibraryBrowser.renderOverview($('#itemOverview', page), item);
if (item.CommunityRating) {
$('#itemCommunityRating', page).html(LibraryBrowser.getStarRatingHtml(item)).show().attr('title', item.CommunityRating);
} else {
$('#itemCommunityRating', page).hide();
}
LibraryBrowser.renderBudget($('#itemBudget', page), item);
$('#itemMiscInfo', page).html(LibraryBrowser.getMiscInfoHtml(item));
LibraryBrowser.renderGenres($('#itemGenres', page), item, "games");
LibraryBrowser.renderStudios($('#itemStudios', page), item, "games");
renderUserDataIcons(page, item);
LibraryBrowser.renderLinks($('#itemLinks', page), item);
}
function renderUserDataIcons(page, item) {
$('#itemRatings', page).html(LibraryBrowser.getUserDataIconsHtml(item));
}
function renderGallery(page, item) {
var html = LibraryBrowser.getGalleryHtml(item);
$('#galleryContent', page).html(html).trigger('create');
}
function renderTrailers(page, item) {
var html = '';
ApiClient.getLocalTrailers(Dashboard.getCurrentUserId(), item.Id).done(function (trailers) {
for (var i = 0, length = trailers.length; i < length; i++) {
var trailer = trailers[i];
html += '<div class="posterViewItem posterViewItemWithDualText">';
html += '<a href="#play-Trailer-' + i + '" onclick="ItemDetailPage.playTrailer(' + i + ');">';
var imageTags = trailer.ImageTags || {};
if (imageTags.Primary) {
var imgUrl = ApiClient.getImageUrl(trailer.Id, {
maxwidth: 500,
tag: imageTags.Primary,
type: "primary"
});
html += '<img src="' + imgUrl + '" />';
} else {
html += '<img src="css/images/items/detail/video.png"/>';
}
html += '<div class="posterViewItemText posterViewItemPrimaryText">' + trailer.Name + '</div>';
html += '<div class="posterViewItemText">';
if (trailer.RunTimeTicks != "") {
html += ticks_to_human(trailer.RunTimeTicks);
}
else {
html += "&nbsp;";
}
html += '</div>';
html += '</a>';
html += '</div>';
}
$('#trailersContent', page).html(html);
});
}
$(document).on('pageinit', "#gameDetailPage", function () {
var page = this;
}).on('pageshow', "#gameDetailPage", function () {
var page = this;
reload(page);
$('#trailersCollapsible', page).on('expand.lazyload', function () {
renderTrailers(page, currentItem);
$(this).off('expand.lazyload');
});
$('#galleryCollapsible', page).on('expand.lazyload', function () {
renderGallery(page, currentItem);
$(this).off('expand.lazyload');
});
}).on('pagehide', "#gameDetailPage", function () {
currentItem = null;
var page = this;
$('#trailersCollapsible', page).off('expand.lazyload');
$('#galleryCollapsible', page).off('expand.lazyload');
});
function gameDetailPage() {
var self = this;
self.playTrailer = function (index) {
ApiClient.getLocalTrailers(Dashboard.getCurrentUserId(), currentItem.Id).done(function (trailers) {
MediaPlayer.play([trailers[index]]);
});
};
}
window.GameDetailPage = new gameDetailPage();
})(jQuery, document, LibraryBrowser, window);

View file

@ -24,7 +24,6 @@
html += LibraryBrowser.getPosterDetailViewHtml({ html += LibraryBrowser.getPosterDetailViewHtml({
items: result.Items, items: result.Items,
useAverageAspectRatio: true,
countNameSingular: "Game", countNameSingular: "Game",
countNamePlural: "Games", countNamePlural: "Games",
context: "games" context: "games"

View file

@ -29,7 +29,7 @@
var item = result.Items[i]; var item = result.Items[i];
//console.log(item); //console.log(item);
html += '<tr>'; html += '<tr>';
html += '<td><a href="gamedetail.html?id='+item.Id+'">' + item.Name + '</a></td>'; html += '<td><a href="itemdetails.html?id='+item.Id+'">' + item.Name + '</a></td>';
html += '<td>' + item.DisplayMediaType + '</td>'; html += '<td>' + item.DisplayMediaType + '</td>';
html += '<td>' + item.ReleaseYear + '</td>'; html += '<td>' + item.ReleaseYear + '</td>';
html += '<td>' + /*LibraryBrowser.renderGenres('', item, "games")*/ + '</td>'; html += '<td>' + /*LibraryBrowser.renderGenres('', item, "games")*/ + '</td>';

View file

@ -24,7 +24,6 @@
html += LibraryBrowser.getPosterDetailViewHtml({ html += LibraryBrowser.getPosterDetailViewHtml({
items: result.Items, items: result.Items,
useAverageAspectRatio: true,
countNameSingular: "Game", countNameSingular: "Game",
countNamePlural: "Games", countNamePlural: "Games",
context: "games" context: "games"

View file

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

View file

@ -181,7 +181,7 @@
if (result.GameCount) { if (result.GameCount) {
html += '<input type="radio" name="ibnItems" id="radioGames" value="on" data-mini="true">'; html += '<input type="radio" name="ibnItems" id="radioGames" value="on" data-mini="true">';
html += '<label for="radioGames">Games (' + result.SeriesCount + ')</label>'; html += '<label for="radioGames">Games (' + result.GameCount + ')</label>';
} }
if (result.AlbumCount) { if (result.AlbumCount) {
@ -212,6 +212,7 @@
shape = "backdrop"; shape = "backdrop";
loadItems(page, { loadItems(page, {
MediaTypes: "",
IncludeItemTypes: "Movie", IncludeItemTypes: "Movie",
PersonTypes: "", PersonTypes: "",
Artists: "" Artists: ""
@ -223,6 +224,7 @@
shape = "backdrop"; shape = "backdrop";
loadItems(page, { loadItems(page, {
MediaTypes: "",
IncludeItemTypes: "Series", IncludeItemTypes: "Series",
PersonTypes: "", PersonTypes: "",
Artists: "" Artists: ""
@ -233,6 +235,7 @@
shape = "poster"; shape = "poster";
loadItems(page, { loadItems(page, {
MediaTypes: "",
IncludeItemTypes: "Trailer", IncludeItemTypes: "Trailer",
PersonTypes: "", PersonTypes: "",
Artists: "" Artists: ""
@ -243,7 +246,8 @@
shape = "poster"; shape = "poster";
loadItems(page, { loadItems(page, {
IncludeItemTypes: "Game", IncludeItemTypes: "",
MediaTypes: "Game",
PersonTypes: "", PersonTypes: "",
Artists: "" Artists: ""
}); });
@ -253,6 +257,7 @@
shape = "backdrop"; shape = "backdrop";
loadItems(page, { loadItems(page, {
MediaTypes: "",
IncludeItemTypes: "Episode", IncludeItemTypes: "Episode",
PersonTypes: "GuestStar", PersonTypes: "GuestStar",
Artists: "" Artists: ""
@ -263,6 +268,7 @@
shape = "cd"; shape = "cd";
loadItems(page, { loadItems(page, {
MediaTypes: "",
IncludeItemTypes: "MusicAlbum", IncludeItemTypes: "MusicAlbum",
PersonTypes: "Artist", PersonTypes: "Artist",
Artists: "" Artists: ""
@ -272,6 +278,7 @@
$("#radioSongs", page).on("click", function () { $("#radioSongs", page).on("click", function () {
loadItems(page, { loadItems(page, {
MediaTypes: "",
IncludeItemTypes: "Audio", IncludeItemTypes: "Audio",
PersonTypes: "Artist", PersonTypes: "Artist",
Artists: "" Artists: ""
@ -351,7 +358,7 @@
SortBy: "SortName", SortBy: "SortName",
SortOrder: "Ascending", SortOrder: "Ascending",
IncludeItemTypes: "Movie", IncludeItemTypes: "",
Recursive: true, Recursive: true,
Fields: "PrimaryImageAspectRatio,UserData,DisplayMediaType,ItemCounts,DateCreated,AudioInfo,SeriesInfo", Fields: "PrimaryImageAspectRatio,UserData,DisplayMediaType,ItemCounts,DateCreated,AudioInfo,SeriesInfo",
Limit: LibraryBrowser.getDetaultPageSize(), Limit: LibraryBrowser.getDetaultPageSize(),
@ -375,8 +382,7 @@
html += LibraryBrowser.getPosterDetailViewHtml({ html += LibraryBrowser.getPosterDetailViewHtml({
items: result.Items, items: result.Items,
useAverageAspectRatio: true, preferBackdrop: shape == "backdrop",
preferBackdrop: true,
shape: shape shape: shape
}); });

View file

@ -20,7 +20,7 @@
getPosterDetailViewHtml: function (options) { getPosterDetailViewHtml: function (options) {
var items = options.items; var items = options.items;
if (!options.shape) { if (!options.shape) {
options.shape = options.preferBackdrop ? "backdrop" : "poster"; options.shape = options.preferBackdrop ? "backdrop" : "poster";
} }
@ -253,7 +253,7 @@
} }
if (options.showArtist) { if (options.showArtist) {
if (item.Artist) { if (item.Artist) {
html += '<td><a href="itembynamedetails.html?context=music&artist=' + item.Artist + '">' + item.Artist + '</a></td>'; html += '<td><a href="itembynamedetails.html?context=music&artist=' + item.Artist + '">' + item.Artist + '</a></td>';
} else { } else {
@ -1109,14 +1109,47 @@
getMiscInfoHtml: function (item) { getMiscInfoHtml: function (item) {
var miscInfo = []; var miscInfo = [];
var text;
if (item.ProductionYear && item.Type != "Episode") {
if (item.ProductionYear && item.Type == "Series") {
if (item.Status == "Continuing") { if (item.Status == "Continuing") {
miscInfo.push(item.ProductionYear + "-Present"); miscInfo.push(item.ProductionYear + "-Present");
} else {
} else if (item.ProductionYear) {
text = item.ProductionYear;
if (item.EndDate) {
try {
text += "-" + parseISO8601Date(item.EndDate, { toLocal: true }).getFullYear();
}
catch (e) {
console.log("Error parsing date: " + item.EndDate);
}
}
miscInfo.push(text);
}
}
if (item.Type != "Series" && item.Type != "Episode") {
if (item.ProductionYear) {
miscInfo.push(item.ProductionYear); miscInfo.push(item.ProductionYear);
} }
else if (item.PremiereDate) {
try {
text = "-" + parseISO8601Date(item.PremiereDate, { toLocal: true }).getFullYear();
miscInfo.push(text);
}
catch (e) {
console.log("Error parsing date: " + item.PremiereDate);
}
}
} }
if (item.OfficialRating) { if (item.OfficialRating) {
@ -1212,7 +1245,12 @@
renderPremiereDate: function (elem, item) { renderPremiereDate: function (elem, item) {
if (item.PremiereDate) { if (item.PremiereDate) {
try { try {
elem.show().html('Premiered&nbsp;&nbsp;' + parseISO8601Date(item.PremiereDate, { toLocal: true }).toDateString());
var date = parseISO8601Date(item.PremiereDate, { toLocal: true });
var text = new Date().getTime() > date.getTime() ? "Premiered" : "Premieres";
elem.show().html(text + '&nbsp;&nbsp;' + date.toDateString());
} catch (err) { } catch (err) {
elem.hide(); elem.hide();
} }

View file

@ -24,7 +24,6 @@
html += LibraryBrowser.getPosterDetailViewHtml({ html += LibraryBrowser.getPosterDetailViewHtml({
items: result.Items, items: result.Items,
useAverageAspectRatio: true,
countNameSingular: "Movie", countNameSingular: "Movie",
countNamePlural: "Movies", countNamePlural: "Movies",
context: "movies" context: "movies"

View file

@ -25,7 +25,6 @@
html += LibraryBrowser.getPosterDetailViewHtml({ html += LibraryBrowser.getPosterDetailViewHtml({
items: result.Items, items: result.Items,
useAverageAspectRatio: true,
countNameSingular: "Movie", countNameSingular: "Movie",
countNamePlural: "Movies", countNamePlural: "Movies",
context: "movies" context: "movies"

View file

@ -27,7 +27,6 @@
if (view == "Backdrop") { if (view == "Backdrop") {
html += LibraryBrowser.getPosterDetailViewHtml({ html += LibraryBrowser.getPosterDetailViewHtml({
items: result.Items, items: result.Items,
useAverageAspectRatio: true,
preferBackdrop: true, preferBackdrop: true,
context: "movies", context: "movies",
shape: "backdrop" shape: "backdrop"

View file

@ -24,7 +24,6 @@
html += LibraryBrowser.getPosterDetailViewHtml({ html += LibraryBrowser.getPosterDetailViewHtml({
items: result.Items, items: result.Items,
useAverageAspectRatio: true,
countNameSingular: "Movie", countNameSingular: "Movie",
countNamePlural: "Movies", countNamePlural: "Movies",
context: "movies" context: "movies"

View file

@ -27,7 +27,6 @@
if (view == "Backdrop") { if (view == "Backdrop") {
html += LibraryBrowser.getPosterDetailViewHtml({ html += LibraryBrowser.getPosterDetailViewHtml({
items: result.Items, items: result.Items,
useAverageAspectRatio: true,
preferBackdrop: true, preferBackdrop: true,
context: "movies" context: "movies"
}); });

View file

@ -24,7 +24,6 @@
html += LibraryBrowser.getPosterDetailViewHtml({ html += LibraryBrowser.getPosterDetailViewHtml({
items: result.Items, items: result.Items,
useAverageAspectRatio: true,
countNameSingular: "Song", countNameSingular: "Song",
countNamePlural: "Songs", countNamePlural: "Songs",
preferBackdrop: true, preferBackdrop: true,

View file

@ -24,7 +24,6 @@
html += LibraryBrowser.getPosterDetailViewHtml({ html += LibraryBrowser.getPosterDetailViewHtml({
items: result.Items, items: result.Items,
useAverageAspectRatio: true,
countNameSingular: "Song", countNameSingular: "Song",
countNamePlural: "Songs", countNamePlural: "Songs",
context: "music" context: "music"

View file

@ -24,7 +24,6 @@
html += LibraryBrowser.getPosterDetailViewHtml({ html += LibraryBrowser.getPosterDetailViewHtml({
items: result.Items, items: result.Items,
useAverageAspectRatio: true,
countNameSingular: "Show", countNameSingular: "Show",
countNamePlural: "Shows", countNamePlural: "Shows",
context: "tv" context: "tv"

View file

@ -25,7 +25,6 @@
html += LibraryBrowser.getPosterDetailViewHtml({ html += LibraryBrowser.getPosterDetailViewHtml({
items: result.Items, items: result.Items,
useAverageAspectRatio: true,
countNameSingular: "Show", countNameSingular: "Show",
countNamePlural: "Shows", countNamePlural: "Shows",
context: "tv" context: "tv"

View file

@ -24,7 +24,6 @@
html += LibraryBrowser.getPosterDetailViewHtml({ html += LibraryBrowser.getPosterDetailViewHtml({
items: result.Items, items: result.Items,
useAverageAspectRatio: true,
countNameSingular: "Show", countNameSingular: "Show",
countNamePlural: "Shows", countNamePlural: "Shows",
context: "tv" context: "tv"