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

added movie and tv genre pages

This commit is contained in:
Luke Pulverenti 2013-04-11 15:36:50 -04:00
parent ceb6dffddb
commit 6f3b88353e
17 changed files with 294 additions and 90 deletions

View file

@ -1498,7 +1498,7 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout) {
}; };
/** /**
* Gets items based on a query, typicall for children of a folder * Gets items based on a query, typically for children of a folder
* @param {String} userId * @param {String} userId
* @param {Object} options * @param {Object} options
* Options accepts the following properties: * Options accepts the following properties:
@ -1529,6 +1529,52 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout) {
}); });
}; };
/**
Gets genres from an item
*/
self.getGenres = function (userId, options) {
if (!userId) {
throw new Error("null userId");
}
var parentId = options.parentId || "root";
// Don't put these on the query string
delete options.parentId;
var url = self.getUrl("Users/" + userId + "/Items/" + parentId + "/Genres", options);
return self.ajax({
type: "GET",
url: url,
dataType: "json"
});
};
/**
Gets studios from an item
*/
self.getStudios = function (userId, options) {
if (!userId) {
throw new Error("null userId");
}
var parentId = options.parentId || "root";
// Don't put these on the query string
delete options.parentId;
var url = self.getUrl("Users/" + userId + "/Items/" + parentId + "/Studios", options);
return self.ajax({
type: "GET",
url: url,
dataType: "json"
});
};
/** /**
* Gets local trailers for an item * Gets local trailers for an item
*/ */

View file

@ -13,7 +13,7 @@
<a href="moviesrecommended.html" data-role="button">Suggested</a> <a href="moviesrecommended.html" data-role="button">Suggested</a>
<a href="movies.html" data-role="button">Movies</a> <a href="movies.html" data-role="button">Movies</a>
<a href="boxsets.html" data-role="button" class="ui-btn-active">Box Sets</a> <a href="boxsets.html" data-role="button" class="ui-btn-active">Box Sets</a>
<a href="#" data-role="button">Genres</a> <a href="moviegenres.html" data-role="button">Genres</a>
<a href="#" data-role="button">Actors</a> <a href="#" data-role="button">Actors</a>
<a href="#" data-role="button">Directors</a> <a href="#" data-role="button">Directors</a>
</div> </div>

View file

@ -12,7 +12,7 @@
<a href="moviesrecommended.html" data-role="button">Suggested</a> <a href="moviesrecommended.html" data-role="button">Suggested</a>
<a href="movies.html" data-role="button">Movies</a> <a href="movies.html" data-role="button">Movies</a>
<a href="boxsets.html" data-role="button" class="ui-btn-active">Box Sets</a> <a href="boxsets.html" data-role="button" class="ui-btn-active">Box Sets</a>
<a href="#" data-role="button">Genres</a> <a href="moviegenres.html" data-role="button">Genres</a>
<a href="#" data-role="button">Actors</a> <a href="#" data-role="button">Actors</a>
<a href="#" data-role="button">Directors</a> <a href="#" data-role="button">Directors</a>
</div> </div>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>Media Browser</title>
</head>
<body>
<div id="movieGenresPage" data-role="page" class="page libraryPage noLogoPage listPage" data-theme="a">
<h1 class="libraryPageHeader"><a href="index.html" class="imageLink">
<img src="css/images/home.png"></a>Movies</h1>
<div data-role="content">
<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="moviegenres.html" data-role="button" class="ui-btn-active">Genres</a>
<a href="#" data-role="button">Actors</a>
<a href="#" data-role="button">Directors</a>
</div>
<div class="viewSettings">
</div>
<div id="items"></div>
</div>
</div>
</body>
</html>

View file

@ -12,7 +12,7 @@
<a href="moviesrecommended.html" data-role="button">Suggested</a> <a href="moviesrecommended.html" data-role="button">Suggested</a>
<a href="movies.html" data-role="button" class="ui-btn-active">Movies</a> <a href="movies.html" data-role="button" class="ui-btn-active">Movies</a>
<a href="boxsets.html" data-role="button">Box Sets</a> <a href="boxsets.html" data-role="button">Box Sets</a>
<a href="#" data-role="button">Genres</a> <a href="moviegenres.html" data-role="button">Genres</a>
<a href="#" data-role="button">Actors</a> <a href="#" data-role="button">Actors</a>
<a href="#" data-role="button">Directors</a> <a href="#" data-role="button">Directors</a>
</div> </div>
@ -31,7 +31,6 @@
<div data-role="panel" id="sortPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true"> <div data-role="panel" id="sortPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true">
<form> <form>
<div id="sortpanel">
<fieldset data-role="controlgroup"> <fieldset data-role="controlgroup">
<legend> <legend>
<strong>Sort By:</strong> <strong>Sort By:</strong>
@ -73,7 +72,6 @@
<input class="radioSortOrder" data-theme="c" type="radio" name="radioSortOrder" id="radioDescending" value="off" data-sortorder="Descending" data-mini="true"> <input class="radioSortOrder" data-theme="c" type="radio" name="radioSortOrder" id="radioDescending" value="off" data-sortorder="Descending" data-mini="true">
<label for="radioDescending">Descending</label> <label for="radioDescending">Descending</label>
</fieldset> </fieldset>
</div>
</form> </form>
</div> </div>
<div data-role="panel" id="filterPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true"> <div data-role="panel" id="filterPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true">

View file

@ -12,7 +12,7 @@
<a href="moviesrecommended.html" data-role="button" class="ui-btn-active">Suggested</a> <a href="moviesrecommended.html" data-role="button" class="ui-btn-active">Suggested</a>
<a href="movies.html" data-role="button">Movies</a> <a href="movies.html" data-role="button">Movies</a>
<a href="boxsets.html" data-role="button">Box Sets</a> <a href="boxsets.html" data-role="button">Box Sets</a>
<a href="#" data-role="button">Genres</a> <a href="moviegenres.html" data-role="button">Genres</a>
<a href="#" data-role="button">Actors</a> <a href="#" data-role="button">Actors</a>
<a href="#" data-role="button">Directors</a> <a href="#" data-role="button">Directors</a>
</div> </div>

View file

@ -7,7 +7,7 @@
SortOrder: "Ascending", SortOrder: "Ascending",
IncludeItemTypes: "BoxSet", IncludeItemTypes: "BoxSet",
Recursive: true, Recursive: true,
Fields: "PrimaryImageAspectRatio,ItemCounts,ItemCounts,DateCreated", Fields: "PrimaryImageAspectRatio,ItemCounts,ItemCounts,DateCreated,UserData",
Limit: LibraryBrowser.getDetaultPageSize(), Limit: LibraryBrowser.getDetaultPageSize(),
StartIndex: 0 StartIndex: 0
}; };
@ -36,12 +36,7 @@
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount); html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
} }
var elem = $('#items', page); var elem = $('#items', page).html(html).trigger('create');
// cleanup existing event handlers
$('select', elem).off('change');
elem.html(html).trigger('create');
$('select', elem).on('change', function () { $('select', elem).on('change', function () {
query.StartIndex = (parseInt(this.value) - 1) * query.Limit; query.StartIndex = (parseInt(this.value) - 1) * query.Limit;

View file

@ -104,12 +104,21 @@
html += '<p>' + LibraryBrowser.getFiveStarRatingHtml(item) + '</p>'; html += '<p>' + LibraryBrowser.getFiveStarRatingHtml(item) + '</p>';
} }
var childText;
if (item.Type == "BoxSet") { if (item.Type == "BoxSet") {
var movies = item.ChildCount == 1 ? "1 Movie" : item.ChildCount + " Movies"; childText = item.ChildCount == 1 ? "1 Movie" : item.ChildCount + " Movies";
html += '<p class="itemMiscInfo">' + movies + '</p>'; html += '<p class="itemMiscInfo">' + childText + '</p>';
} else { }
else if (item.Type == "Genre" || item.Type == "Studio" || item.Type == "Person") {
childText = item.ChildCount == 1 ? "1 " + options.countNameSingular : item.ChildCount + " " + options.countNamePlural;
html += '<p class="itemMiscInfo">' + childText + '</p>';
}
else {
html += '<p class="itemMiscInfo">' + LibraryBrowser.getMiscInfoHtml(item, false) + '</p>'; html += '<p class="itemMiscInfo">' + LibraryBrowser.getMiscInfoHtml(item, false) + '</p>';
} }

View file

@ -0,0 +1,60 @@
(function ($, document) {
// The base query options
var query = {
SortBy: "SortName",
SortOrder: "Ascending",
IncludeItemTypes: "Movie",
Recursive: true,
Fields: "PrimaryImageAspectRatio,ItemCounts,DateCreated,UserData",
Limit: LibraryBrowser.getDetaultPageSize(),
StartIndex: 0
};
function reloadItems(page) {
Dashboard.showLoadingMsg();
ApiClient.getGenres(Dashboard.getCurrentUserId(), query).done(function (result) {
var html = '';
var showPaging = result.TotalRecordCount > query.Limit;
if (showPaging) {
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount, true);
}
html += LibraryBrowser.getPosterDetailViewHtml({
items: result.Items,
useAverageAspectRatio: true,
countNameSingular: "Movie",
countNamePlural: "Movies"
});
if (showPaging) {
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
}
var elem = $('#items', page).html(html).trigger('create');
$('select', elem).on('change', function () {
query.StartIndex = (parseInt(this.value) - 1) * query.Limit;
reloadItems(page);
});
Dashboard.hideLoadingMsg();
});
}
$(document).on('pagebeforeshow', "#movieGenresPage", function () {
reloadItems(this);
}).on('pageshow', "#movieGenresPage", function () {
});
})(jQuery, document);

View file

@ -46,12 +46,7 @@
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount); html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
} }
var elem = $('#items', page); var elem = $('#items', page).html(html).trigger('create');
// cleanup existing event handlers
$('select', elem).off('change');
elem.html(html).trigger('create');
$('select', elem).on('change', function () { $('select', elem).on('change', function () {
query.StartIndex = (parseInt(this.value) - 1) * query.Limit; query.StartIndex = (parseInt(this.value) - 1) * query.Limit;

View file

@ -0,0 +1,60 @@
(function ($, document) {
// The base query options
var query = {
SortBy: "SortName",
SortOrder: "Ascending",
IncludeItemTypes: "Series",
Recursive: true,
Fields: "PrimaryImageAspectRatio,ItemCounts,DateCreated,UserData",
Limit: LibraryBrowser.getDetaultPageSize(),
StartIndex: 0
};
function reloadItems(page) {
Dashboard.showLoadingMsg();
ApiClient.getGenres(Dashboard.getCurrentUserId(), query).done(function (result) {
var html = '';
var showPaging = result.TotalRecordCount > query.Limit;
if (showPaging) {
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount, true);
}
html += LibraryBrowser.getPosterDetailViewHtml({
items: result.Items,
useAverageAspectRatio: true,
countNameSingular: "Show",
countNamePlural: "Shows"
});
if (showPaging) {
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
}
var elem = $('#items', page).html(html).trigger('create');
$('select', elem).on('change', function () {
query.StartIndex = (parseInt(this.value) - 1) * query.Limit;
reloadItems(page);
});
Dashboard.hideLoadingMsg();
});
}
$(document).on('pagebeforeshow', "#tvGenresPage", function () {
reloadItems(this);
}).on('pageshow', "#tvGenresPage", function () {
});
})(jQuery, document);

View file

@ -9,7 +9,7 @@
SortOrder: "Ascending", SortOrder: "Ascending",
IncludeItemTypes: "Series", IncludeItemTypes: "Series",
Recursive: true, Recursive: true,
Fields: "PrimaryImageAspectRatio,SeriesInfo,ItemCounts,DateCreated", Fields: "PrimaryImageAspectRatio,SeriesInfo,ItemCounts,DateCreated,UserData",
Limit: LibraryBrowser.getDetaultPageSize(), Limit: LibraryBrowser.getDetaultPageSize(),
StartIndex: 0 StartIndex: 0
}; };
@ -46,12 +46,7 @@
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount); html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
} }
var elem = $('#items', page); var elem = $('#items', page).html(html).trigger('create');
// cleanup existing event handlers
$('select', elem).off('change');
elem.html(html).trigger('create');
$('select', elem).on('change', function () { $('select', elem).on('change', function () {
query.StartIndex = (parseInt(this.value) - 1) * query.Limit; query.StartIndex = (parseInt(this.value) - 1) * query.Limit;

View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<title>Media Browser</title>
</head>
<body>
<div id="tvGenresPage" data-role="page" class="page libraryPage noLogoPage listPage" data-theme="a">
<h1 class="libraryPageHeader"><a href="index.html" class="imageLink">
<img src="css/images/home.png"></a>TV Shows</h1>
<div data-role="content">
<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="#" data-role="button">Actors</a>
</div>
<div class="viewSettings">
</div>
<div id="items"></div>
</div>
</div>
</body>
</html>

View file

@ -11,7 +11,7 @@
<div data-role="controlgroup" data-type="horizontal" class="libraryViewNav" data-mini="true"> <div data-role="controlgroup" data-type="horizontal" class="libraryViewNav" data-mini="true">
<a href="tvrecommended.html" data-role="button" class="ui-btn-active">Suggested</a> <a href="tvrecommended.html" data-role="button" class="ui-btn-active">Suggested</a>
<a href="tvshows.html" data-role="button">Shows</a> <a href="tvshows.html" data-role="button">Shows</a>
<a href="#" data-role="button">Genres</a> <a href="tvgenres.html" data-role="button">Genres</a>
<a href="#" data-role="button">Actors</a> <a href="#" data-role="button">Actors</a>
</div> </div>
<div class="ehsContent"> <div class="ehsContent">

View file

@ -13,7 +13,7 @@
<div data-role="controlgroup" data-type="horizontal" class="libraryViewNav" data-mini="true"> <div data-role="controlgroup" data-type="horizontal" class="libraryViewNav" data-mini="true">
<a href="tvrecommended.html" data-role="button">Suggested</a> <a href="tvrecommended.html" data-role="button">Suggested</a>
<a href="tvshows.html" data-role="button" class="ui-btn-active">Shows</a> <a href="tvshows.html" data-role="button" class="ui-btn-active">Shows</a>
<a href="#" data-role="button">Genres</a> <a href="tvgenres.html" data-role="button">Genres</a>
<a href="#" data-role="button">Actors</a> <a href="#" data-role="button">Actors</a>
</div> </div>

View file

@ -11,7 +11,7 @@
<div data-role="controlgroup" data-type="horizontal" class="libraryViewNav" data-mini="true"> <div data-role="controlgroup" data-type="horizontal" class="libraryViewNav" data-mini="true">
<a href="tvrecommended.html" data-role="button">Suggested</a> <a href="tvrecommended.html" data-role="button">Suggested</a>
<a href="tvshows.html" data-role="button" class="ui-btn-active">Shows</a> <a href="tvshows.html" data-role="button" class="ui-btn-active">Shows</a>
<a href="#" data-role="button">Genres</a> <a href="tvgenres.html" data-role="button">Genres</a>
<a href="#" data-role="button">Actors</a> <a href="#" data-role="button">Actors</a>
</div> </div>
<div class="viewSettings"> <div class="viewSettings">
@ -29,7 +29,6 @@
<div data-role="panel" id="sortPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true"> <div data-role="panel" id="sortPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true">
<form> <form>
<div id="sortpanel">
<fieldset data-role="controlgroup"> <fieldset data-role="controlgroup">
<legend> <legend>
<strong>Sort By:</strong> <strong>Sort By:</strong>
@ -62,7 +61,6 @@
<input class="radioSortOrder" data-theme="c" type="radio" name="radioSortOrder" id="radioDescending" value="off" data-sortorder="Descending" data-mini="true"> <input class="radioSortOrder" data-theme="c" type="radio" name="radioSortOrder" id="radioDescending" value="off" data-sortorder="Descending" data-mini="true">
<label for="radioDescending">Descending</label> <label for="radioDescending">Descending</label>
</fieldset> </fieldset>
</div>
</form> </form>
</div> </div>
<div data-role="panel" id="filterPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true"> <div data-role="panel" id="filterPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true">

View file

@ -1,6 +1,6 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<packages> <packages>
<package id="MediaBrowser.ApiClient.Javascript" version="3.0.71" targetFramework="net45" /> <package id="MediaBrowser.ApiClient.Javascript" version="3.0.72" targetFramework="net45" />
<package id="ServiceStack.Common" version="3.9.43" targetFramework="net45" /> <package id="ServiceStack.Common" version="3.9.43" targetFramework="net45" />
<package id="ServiceStack.Text" version="3.9.43" targetFramework="net45" /> <package id="ServiceStack.Text" version="3.9.43" targetFramework="net45" />
</packages> </packages>