mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
rudimentary game view support
This commit is contained in:
Techywarrior
parent
421c559c2b
commit
d7c4b43899
16 changed files with 1372 additions and 2 deletions
48
dashboard-ui/gamedetail.html
Normal file
48
dashboard-ui/gamedetail.html
Normal file
|
|
@ -0,0 +1,48 @@
|
||||||
|
<!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">
|
||||||
|
<h1 id="seriesName" class="detailPageName hide"></h1>
|
||||||
|
<h1 id="itemName" class="detailPageName"></h1>
|
||||||
|
|
||||||
|
<div class="itemImageBlock">
|
||||||
|
<div id="itemMedia" style="position: relative;">
|
||||||
|
<div id="itemImage"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="itemDetailBlock">
|
||||||
|
|
||||||
|
<p id="itemTagline" style="font-style: italic;"></p>
|
||||||
|
<p id="itemOverview"></p>
|
||||||
|
<p id="itemRatings"></p>
|
||||||
|
<p id="itemCommunityRating"></p>
|
||||||
|
<p id="itemMiscInfo" class="itemMiscInfo"></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">
|
||||||
|
<h3>Trailers</h3>
|
||||||
|
<div id="trailersContent"></div>
|
||||||
|
</div>
|
||||||
|
<div data-role="collapsible" id="galleryCollapsible">
|
||||||
|
<h3>Gallery</h3>
|
||||||
|
<div id="galleryContent"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
76
dashboard-ui/gamegenres.html
Normal file
76
dashboard-ui/gamegenres.html
Normal file
|
|
@ -0,0 +1,76 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Media Browser</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="gameGenresPage" 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>Games</h1>
|
||||||
|
<div data-role="content">
|
||||||
|
<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">Games</a>
|
||||||
|
<a href="gamesystems.html" data-role="button">Game Systems</a>
|
||||||
|
<a href="gamegenres.html" data-role="button" class="ui-btn-active">Genres</a>
|
||||||
|
<a href="gamestudios.html" data-role="button">Studios</a>
|
||||||
|
</div>
|
||||||
|
<div class="viewSettings">
|
||||||
|
<button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $.mobile.activePage).panel( 'toggle' );">Sort</button>
|
||||||
|
<button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $.mobile.activePage).panel( 'toggle' );">Filter</button>
|
||||||
|
</div>
|
||||||
|
<div id="items"></div>
|
||||||
|
</div>
|
||||||
|
<div data-role="panel" id="sortPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true">
|
||||||
|
|
||||||
|
<form>
|
||||||
|
<fieldset data-role="controlgroup">
|
||||||
|
<legend>
|
||||||
|
<strong>Sort By:</strong>
|
||||||
|
</legend>
|
||||||
|
|
||||||
|
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioSortName" value="on" checked="checked" data-sortby="SortName" data-mini="true">
|
||||||
|
<label for="radioSortName">Name</label>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<fieldset data-role="controlgroup">
|
||||||
|
<legend>
|
||||||
|
<strong>Sort Order:</strong>
|
||||||
|
</legend>
|
||||||
|
|
||||||
|
<input class="radioSortOrder" data-theme="c" type="radio" name="radioSortOrder" id="radioAscending" value="on" checked="checked" data-sortorder="Ascending" data-mini="true">
|
||||||
|
<label for="radioAscending">Ascending</label>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div data-role="panel" id="filterPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true">
|
||||||
|
<form>
|
||||||
|
<fieldset data-role="controlgroup">
|
||||||
|
<legend>
|
||||||
|
<strong>Filters:</strong>
|
||||||
|
</legend>
|
||||||
|
<input class="chkStandardFilter" type="checkbox" name="chkIsFavorite" id="chkIsFavorite" data-theme="c" data-filter="IsFavorite" data-mini="true">
|
||||||
|
<label for="chkIsFavorite">Favorite</label>
|
||||||
|
|
||||||
|
<input class="chkStandardFilter" type="checkbox" name="chkLikes" id="chkLikes" data-theme="c" data-filter="Likes" data-mini="true">
|
||||||
|
<label for="chkLikes">Likes</label>
|
||||||
|
|
||||||
|
<input class="chkStandardFilter" type="checkbox" name="chkDislikes" id="chkDislikes" data-theme="c" data-filter="Dislikes" data-mini="true">
|
||||||
|
<label for="chkDislikes">Dislikes</label>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<fieldset data-role="controlgroup">
|
||||||
|
<legend>
|
||||||
|
<strong>Game System:</strong>
|
||||||
|
</legend>
|
||||||
|
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
116
dashboard-ui/games.html
Normal file
116
dashboard-ui/games.html
Normal file
|
|
@ -0,0 +1,116 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Media Browser</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="gamesPage" 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>Games</h1>
|
||||||
|
<div data-role="content">
|
||||||
|
<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 class="viewSettings">
|
||||||
|
<button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $.mobile.activePage).panel( 'toggle' );">Sort</button>
|
||||||
|
<button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $.mobile.activePage).panel( 'toggle' );">Filter</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Game System</th>
|
||||||
|
<th>Release Year</th>
|
||||||
|
<th>Genre</th>
|
||||||
|
<th>Studio</th>
|
||||||
|
<th>Rating</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<td colspan="6"></td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
<tbody id="items"></tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div data-role="panel" id="sortPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true">
|
||||||
|
|
||||||
|
<form>
|
||||||
|
<fieldset data-role="controlgroup">
|
||||||
|
<legend>
|
||||||
|
<strong>Sort By:</strong>
|
||||||
|
</legend>
|
||||||
|
|
||||||
|
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioSortName" value="on" checked="checked" data-sortby="SortName" data-mini="true">
|
||||||
|
<label for="radioSortName">Name</label>
|
||||||
|
|
||||||
|
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioCommunityRating" value="off" data-sortby="CommunityRating" data-mini="true">
|
||||||
|
<label for="radioCommunityRating">Community Rating</label>
|
||||||
|
|
||||||
|
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioDateCreated" value="off" data-sortby="DateCreated" data-mini="true">
|
||||||
|
<label for="radioDateCreated">Date Added</label>
|
||||||
|
|
||||||
|
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioDatePlayed" value="off" data-sortby="DatePlayed" data-mini="true">
|
||||||
|
<label for="radioDatePlayed">Date Played</label>
|
||||||
|
|
||||||
|
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioPremiereDate" value="off" data-sortby="PremiereDate" data-mini="true">
|
||||||
|
<label for="radioPremiereDate">Date Released</label>
|
||||||
|
|
||||||
|
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioRandom" value="off" data-sortby="Random" data-mini="true">
|
||||||
|
<label for="radioRandom">Random</label>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<fieldset data-role="controlgroup">
|
||||||
|
<legend>
|
||||||
|
<strong>Sort Order:</strong>
|
||||||
|
</legend>
|
||||||
|
|
||||||
|
<input class="radioSortOrder" data-theme="c" type="radio" name="radioSortOrder" id="radioAscending" value="on" checked="checked" data-sortorder="Ascending" data-mini="true">
|
||||||
|
<label for="radioAscending">Ascending</label>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div data-role="panel" id="filterPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true">
|
||||||
|
<form>
|
||||||
|
<fieldset data-role="controlgroup">
|
||||||
|
<legend>
|
||||||
|
<strong>Filters:</strong>
|
||||||
|
</legend>
|
||||||
|
<input class="chkStandardFilter" type="checkbox" name="chkPlayed" id="chkPlayed" data-theme="c" data-filter="IsPlayed" data-mini="true">
|
||||||
|
<label for="chkPlayed">Played</label>
|
||||||
|
|
||||||
|
<input class="chkStandardFilter" type="checkbox" name="chkUnplayed" id="chkUnplayed" data-theme="c" data-filter="IsUnPlayed" data-mini="true">
|
||||||
|
<label for="chkUnplayed">Unplayed</label>
|
||||||
|
|
||||||
|
<input class="chkStandardFilter" type="checkbox" name="chkIsFavorite" id="chkIsFavorite" data-theme="c" data-filter="IsFavorite" data-mini="true">
|
||||||
|
<label for="chkIsFavorite">Favorite</label>
|
||||||
|
|
||||||
|
<input class="chkStandardFilter" type="checkbox" name="chkLikes" id="chkLikes" data-theme="c" data-filter="Likes" data-mini="true">
|
||||||
|
<label for="chkLikes">Likes</label>
|
||||||
|
|
||||||
|
<input class="chkStandardFilter" type="checkbox" name="chkDislikes" id="chkDislikes" data-theme="c" data-filter="Dislikes" data-mini="true">
|
||||||
|
<label for="chkDislikes">Dislikes</label>
|
||||||
|
</fieldset>
|
||||||
|
<fieldset data-role="controlgroup">
|
||||||
|
<legend>
|
||||||
|
<strong>Game System:</strong>
|
||||||
|
</legend>
|
||||||
|
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
38
dashboard-ui/gamesrecommended.html
Normal file
38
dashboard-ui/gamesrecommended.html
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Media Browser</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="gamesRecommendedPage" data-role="page" class="page libraryPage noLogoPage" data-theme="a">
|
||||||
|
<h1 class="libraryPageHeader"><a href="index.html" class="imageLink">
|
||||||
|
<img src="css/images/home.png"></a>Games</h1>
|
||||||
|
<div data-role="content">
|
||||||
|
<div data-role="controlgroup" data-type="horizontal" class="libraryViewNav" data-mini="true">
|
||||||
|
<a href="gamesrecommended.html" data-role="button" class="ui-btn-active">Suggested</a>
|
||||||
|
<a href="games.html" data-role="button">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 class="ehsContent">
|
||||||
|
<h1 class="listHeader firstListHeader">Latest Unplayed Games</h1>
|
||||||
|
|
||||||
|
<div id="recentlyAddedItems">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="resumableSection" style="display: none;">
|
||||||
|
<h1 class="listHeader">Latest Played Games</h1>
|
||||||
|
|
||||||
|
<div id="resumableItems">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
75
dashboard-ui/gamestudios.html
Normal file
75
dashboard-ui/gamestudios.html
Normal file
|
|
@ -0,0 +1,75 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Media Browser</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="gameStudiosPage" 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>Games</h1>
|
||||||
|
<div data-role="content">
|
||||||
|
<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">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" class="ui-btn-active">Studios</a>
|
||||||
|
</div>
|
||||||
|
<div class="viewSettings">
|
||||||
|
<button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $.mobile.activePage).panel( 'toggle' );">Sort</button>
|
||||||
|
<button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $.mobile.activePage).panel( 'toggle' );">Filter</button>
|
||||||
|
</div>
|
||||||
|
<div id="items"></div>
|
||||||
|
</div>
|
||||||
|
<div data-role="panel" id="sortPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true">
|
||||||
|
|
||||||
|
<form>
|
||||||
|
<fieldset data-role="controlgroup">
|
||||||
|
<legend>
|
||||||
|
<strong>Sort By:</strong>
|
||||||
|
</legend>
|
||||||
|
|
||||||
|
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioSortName" value="on" checked="checked" data-sortby="SortName" data-mini="true">
|
||||||
|
<label for="radioSortName">Name</label>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<fieldset data-role="controlgroup">
|
||||||
|
<legend>
|
||||||
|
<strong>Sort Order:</strong>
|
||||||
|
</legend>
|
||||||
|
|
||||||
|
<input class="radioSortOrder" data-theme="c" type="radio" name="radioSortOrder" id="radioAscending" value="on" checked="checked" data-sortorder="Ascending" data-mini="true">
|
||||||
|
<label for="radioAscending">Ascending</label>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div data-role="panel" id="filterPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true">
|
||||||
|
<form>
|
||||||
|
<fieldset data-role="controlgroup">
|
||||||
|
<legend>
|
||||||
|
<strong>Filters:</strong>
|
||||||
|
</legend>
|
||||||
|
<input class="chkStandardFilter" type="checkbox" name="chkIsFavorite" id="chkIsFavorite" data-theme="c" data-filter="IsFavorite" data-mini="true">
|
||||||
|
<label for="chkIsFavorite">Favorite</label>
|
||||||
|
|
||||||
|
<input class="chkStandardFilter" type="checkbox" name="chkLikes" id="chkLikes" data-theme="c" data-filter="Likes" data-mini="true">
|
||||||
|
<label for="chkLikes">Likes</label>
|
||||||
|
|
||||||
|
<input class="chkStandardFilter" type="checkbox" name="chkDislikes" id="chkDislikes" data-theme="c" data-filter="Dislikes" data-mini="true">
|
||||||
|
<label for="chkDislikes">Dislikes</label>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<fieldset data-role="controlgroup">
|
||||||
|
<legend>
|
||||||
|
<strong>Game Systems:</strong>
|
||||||
|
</legend>
|
||||||
|
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
45
dashboard-ui/gamesystem.html
Normal file
45
dashboard-ui/gamesystem.html
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title></title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="gamesystemPage" data-role="page" class="page libraryPage noLogoPage" data-theme="a">
|
||||||
|
<h1 class="libraryPageHeader"><a href="index.html" class="imageLink">
|
||||||
|
<img src="css/images/home.png"></a>Games</h1>
|
||||||
|
<div data-role="content">
|
||||||
|
|
||||||
|
<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">Games</a>
|
||||||
|
<a href="gamesystems.html" data-role="button" class="ui-btn-active">Game Systems</a>
|
||||||
|
<a href="gamegenres.html" data-role="button">Genres</a>
|
||||||
|
<a href="gamestudios.html" data-role="button">Studios</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="detailPagePrimaryInfo">
|
||||||
|
<h1 id="itemName" class="detailPageName"></h1>
|
||||||
|
<div class="itemImageBlock">
|
||||||
|
<div id="itemMedia" style="position: relative;">
|
||||||
|
<div id="itemImage"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="itemDetailBlock">
|
||||||
|
|
||||||
|
<p id="itemTagline" style="font-style: italic;"></p>
|
||||||
|
<p id="itemOverview"></p>
|
||||||
|
<p id="itemRatings"></p>
|
||||||
|
<p id="itemCommunityRating"></p>
|
||||||
|
<p id="itemMiscInfo" class="itemMiscInfo"></p>
|
||||||
|
|
||||||
|
<p id="itemGenres"></p>
|
||||||
|
<p id="itemStudios"></p>
|
||||||
|
<p id="itemLinks"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
76
dashboard-ui/gamesystems.html
Normal file
76
dashboard-ui/gamesystems.html
Normal file
|
|
@ -0,0 +1,76 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Media Browser</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="gamesystemsPage" data-role="page" class="page libraryPage noLogoPage" data-theme="a">
|
||||||
|
<h1 class="libraryPageHeader"><a href="index.html" class="imageLink">
|
||||||
|
<img src="css/images/home.png"></a>Games</h1>
|
||||||
|
<div data-role="content">
|
||||||
|
<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">Games</a>
|
||||||
|
<a href="gamesystems.html" data-role="button" class="ui-btn-active">Game Systems</a>
|
||||||
|
<a href="gamegenres.html" data-role="button">Genres</a>
|
||||||
|
<a href="gamestudios.html" data-role="button">Studios</a>
|
||||||
|
</div>
|
||||||
|
<div class="viewSettings">
|
||||||
|
<button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $.mobile.activePage).panel( 'toggle' );">Sort</button>
|
||||||
|
<button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $.mobile.activePage).panel( 'toggle' );">Filter</button>
|
||||||
|
</div>
|
||||||
|
<div id="items"></div>
|
||||||
|
</div>
|
||||||
|
<div data-role="panel" id="sortPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true">
|
||||||
|
|
||||||
|
<form>
|
||||||
|
<div id="sortpanel">
|
||||||
|
<fieldset data-role="controlgroup">
|
||||||
|
<legend>
|
||||||
|
<h3>Sort By:</h3>
|
||||||
|
</legend>
|
||||||
|
|
||||||
|
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioSortName" value="on" checked="checked" data-sortby="SortName">
|
||||||
|
<label for="radioSortName">Name</label>
|
||||||
|
|
||||||
|
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioCommunityRating" value="off" data-sortby="CommunityRating">
|
||||||
|
<label for="radioCommunityRating">Community Rating</label>
|
||||||
|
|
||||||
|
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioDateCreated" value="off" data-sortby="DateCreated">
|
||||||
|
<label for="radioDateCreated">Date Added</label>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<fieldset data-role="controlgroup">
|
||||||
|
<legend>
|
||||||
|
<h3>Sort Order:</h3>
|
||||||
|
</legend>
|
||||||
|
|
||||||
|
<input class="radioSortOrder" data-theme="c" type="radio" name="radioSortOrder" id="radioAscending" value="on" checked="checked" data-sortorder="Ascending">
|
||||||
|
<label for="radioAscending">Ascending</label>
|
||||||
|
|
||||||
|
<input class="radioSortOrder" data-theme="c" type="radio" name="radioSortOrder" id="radioDescending" value="off" data-sortorder="Descending">
|
||||||
|
<label for="radioDescending">Descending</label>
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div data-role="panel" id="filterPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true">
|
||||||
|
<form>
|
||||||
|
<fieldset data-role="controlgroup">
|
||||||
|
<legend>
|
||||||
|
<h3>Filters:</h3>
|
||||||
|
</legend>
|
||||||
|
<input class="chkStandardFilter" type="checkbox" name="chkIsFavorite" id="chkIsFavorite" data-theme="c" data-filter="IsFavorite">
|
||||||
|
<label for="chkIsFavorite">Favorite</label>
|
||||||
|
|
||||||
|
<input class="chkStandardFilter" type="checkbox" name="chkLikes" id="chkLikes" data-theme="c" data-filter="Likes">
|
||||||
|
<label for="chkLikes">Likes</label>
|
||||||
|
|
||||||
|
<input class="chkStandardFilter" type="checkbox" name="chkDislikes" id="chkDislikes" data-theme="c" data-filter="Dislikes">
|
||||||
|
<label for="chkDislikes">Dislikes</label>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
254
dashboard-ui/scripts/gamedetailpage.js
Normal file
254
dashboard-ui/scripts/gamedetailpage.js
Normal file
|
|
@ -0,0 +1,254 @@
|
||||||
|
|
||||||
|
(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);
|
||||||
|
|
||||||
|
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();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (item.Overview || item.OverviewHtml) {
|
||||||
|
var overview = item.OverviewHtml || item.Overview;
|
||||||
|
|
||||||
|
$('#itemOverview', page).html(overview).show();
|
||||||
|
$('#itemOverview a').each(function () {
|
||||||
|
$(this).attr("target", "_blank");
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
$('#itemOverview', page).hide();
|
||||||
|
}
|
||||||
|
|
||||||
|
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);
|
||||||
|
LibraryBrowser.renderStudios($('#itemStudios', page), item);
|
||||||
|
renderUserDataIcons(page, item);
|
||||||
|
LibraryBrowser.renderLinks($('#itemLinks', page), item);
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderUserDataIcons(page, item) {
|
||||||
|
$('#itemRatings', page).html(LibraryBrowser.getUserDataIconsHtml(item));
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderGallery(page, item) {
|
||||||
|
|
||||||
|
var imageTags = item.ImageTags || {};
|
||||||
|
var html = '';
|
||||||
|
|
||||||
|
if (imageTags.Logo) {
|
||||||
|
|
||||||
|
html += createGalleryImage(item.Id, "Logo", item.ImageTags.Logo);
|
||||||
|
}
|
||||||
|
if (imageTags.Thumb) {
|
||||||
|
|
||||||
|
html += createGalleryImage(item.Id, "Thumb", item.ImageTags.Thumb);
|
||||||
|
}
|
||||||
|
if (imageTags.Art) {
|
||||||
|
|
||||||
|
html += createGalleryImage(item.Id, "Art", item.ImageTags.Art);
|
||||||
|
|
||||||
|
}
|
||||||
|
if (imageTags.Menu) {
|
||||||
|
|
||||||
|
html += createGalleryImage(item.Id, "Menu", item.ImageTags.Menu);
|
||||||
|
|
||||||
|
}
|
||||||
|
if (imageTags.Disc) {
|
||||||
|
|
||||||
|
html += createGalleryImage(item.Id, "Disc", item.ImageTags.Disc);
|
||||||
|
}
|
||||||
|
if (imageTags.Box) {
|
||||||
|
|
||||||
|
html += createGalleryImage(item.Id, "Box", item.ImageTags.Box);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (item.BackdropImageTags) {
|
||||||
|
|
||||||
|
for (var i = 0, length = item.BackdropImageTags.length; i < length; i++) {
|
||||||
|
html += createGalleryImage(item.Id, "Backdrop", item.BackdropImageTags[0], i);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
$('#galleryContent', page).html(html).trigger('create');
|
||||||
|
}
|
||||||
|
|
||||||
|
function createGalleryImage(itemId, type, tag, index) {
|
||||||
|
|
||||||
|
var downloadWidth = 400;
|
||||||
|
var lightboxWidth = 800;
|
||||||
|
var html = '';
|
||||||
|
|
||||||
|
if (typeof (index) == "undefined") index = 0;
|
||||||
|
|
||||||
|
html += '<div class="posterViewItem" style="padding-bottom:0px;">';
|
||||||
|
html += '<a href="#pop_' + index + '_' + tag + '" data-transition="fade" data-rel="popup" data-position-to="window">';
|
||||||
|
html += '<img class="galleryImage" src="' + ApiClient.getImageUrl(itemId, {
|
||||||
|
type: type,
|
||||||
|
maxwidth: downloadWidth,
|
||||||
|
tag: tag,
|
||||||
|
index: index
|
||||||
|
}) + '" />';
|
||||||
|
html += '</div>';
|
||||||
|
|
||||||
|
html += '<div class="galleryPopup" id="pop_' + index + '_' + tag + '" data-role="popup" data-theme="d" data-corners="false" data-overlay-theme="a">';
|
||||||
|
html += '<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>';
|
||||||
|
html += '<img class="" src="' + ApiClient.getImageUrl(itemId, {
|
||||||
|
type: type,
|
||||||
|
maxwidth: lightboxWidth,
|
||||||
|
tag: tag,
|
||||||
|
index: index
|
||||||
|
}) + '" />';
|
||||||
|
html += '</div>';
|
||||||
|
|
||||||
|
return html;
|
||||||
|
}
|
||||||
|
|
||||||
|
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 += " ";
|
||||||
|
}
|
||||||
|
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);
|
||||||
104
dashboard-ui/scripts/gamegenrepage.js
Normal file
104
dashboard-ui/scripts/gamegenrepage.js
Normal file
|
|
@ -0,0 +1,104 @@
|
||||||
|
(function ($, document) {
|
||||||
|
|
||||||
|
// The base query options
|
||||||
|
var query = {
|
||||||
|
|
||||||
|
SortBy: "SortName",
|
||||||
|
SortOrder: "Ascending",
|
||||||
|
MediaTypes: "Game",
|
||||||
|
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: "Game",
|
||||||
|
countNamePlural: "Games"
|
||||||
|
});
|
||||||
|
|
||||||
|
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('pageinit', "#gameGenresPage", function () {
|
||||||
|
|
||||||
|
var page = this;
|
||||||
|
|
||||||
|
$('.radioSortBy', this).on('click', function () {
|
||||||
|
query.SortBy = this.getAttribute('data-sortby');
|
||||||
|
query.StartIndex = 0;
|
||||||
|
reloadItems(page);
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.radioSortOrder', this).on('click', function () {
|
||||||
|
query.SortOrder = this.getAttribute('data-sortorder');
|
||||||
|
query.StartIndex = 0;
|
||||||
|
reloadItems(page);
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.chkStandardFilter', this).on('change', function () {
|
||||||
|
|
||||||
|
var filterName = this.getAttribute('data-filter');
|
||||||
|
var filters = query.Filters || "";
|
||||||
|
|
||||||
|
filters = (',' + filters).replace(',' + filterName, '').substring(1);
|
||||||
|
|
||||||
|
if (this.checked) {
|
||||||
|
filters = filters ? (filters + ',' + filterName) : filterName;
|
||||||
|
}
|
||||||
|
|
||||||
|
query.StartIndex = 0;
|
||||||
|
query.Filters = filters;
|
||||||
|
|
||||||
|
reloadItems(page);
|
||||||
|
});
|
||||||
|
|
||||||
|
}).on('pagebeforeshow', "#gameGenresPage", function () {
|
||||||
|
|
||||||
|
reloadItems(this);
|
||||||
|
|
||||||
|
}).on('pageshow', "#gameGenresPage", function () {
|
||||||
|
|
||||||
|
// Reset form values using the last used query
|
||||||
|
$('.radioSortBy', this).each(function () {
|
||||||
|
|
||||||
|
this.checked = query.SortBy == this.getAttribute('data-sortby');
|
||||||
|
|
||||||
|
}).checkboxradio('refresh');
|
||||||
|
|
||||||
|
$('.radioSortOrder', this).each(function () {
|
||||||
|
|
||||||
|
this.checked = query.SortOrder == this.getAttribute('data-sortorder');
|
||||||
|
|
||||||
|
}).checkboxradio('refresh');
|
||||||
|
});
|
||||||
|
|
||||||
|
})(jQuery, document);
|
||||||
136
dashboard-ui/scripts/gamespage.js
Normal file
136
dashboard-ui/scripts/gamespage.js
Normal file
|
|
@ -0,0 +1,136 @@
|
||||||
|
|
||||||
|
(function ($, document) {
|
||||||
|
|
||||||
|
var view = "Tile";
|
||||||
|
|
||||||
|
// The base query options
|
||||||
|
var query = {
|
||||||
|
|
||||||
|
SortBy: "SortName",
|
||||||
|
SortOrder: "Ascending",
|
||||||
|
MediaTypes: "Game",
|
||||||
|
Recursive: true,
|
||||||
|
Fields: "PrimaryImageAspectRatio,UserData,DisplayMediaType,Genres,Studios",
|
||||||
|
Limit: LibraryBrowser.getDetaultPageSize(),
|
||||||
|
StartIndex: 0
|
||||||
|
};
|
||||||
|
|
||||||
|
function reloadItems(page) {
|
||||||
|
|
||||||
|
Dashboard.showLoadingMsg();
|
||||||
|
|
||||||
|
ApiClient.getItems(Dashboard.getCurrentUserId(), query).done(function (result) {
|
||||||
|
|
||||||
|
var html = '';
|
||||||
|
|
||||||
|
var showPaging = result.TotalRecordCount > query.Limit;
|
||||||
|
|
||||||
|
if (showPaging) {
|
||||||
|
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount, true);
|
||||||
|
}
|
||||||
|
|
||||||
|
for (var i = 0, length = result.Items.length; i < length; i++) {
|
||||||
|
var item = result.Items[i];
|
||||||
|
//console.log(item);
|
||||||
|
html += '<tr>';
|
||||||
|
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>' + /* */ + '</td>';
|
||||||
|
html += '</tr>';
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
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('pageinit', "#gamesPage", function () {
|
||||||
|
|
||||||
|
var page = this;
|
||||||
|
|
||||||
|
$('.radioSortBy', this).on('click', function () {
|
||||||
|
query.StartIndex = 0;
|
||||||
|
query.SortBy = this.getAttribute('data-sortby');
|
||||||
|
reloadItems(page);
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.radioSortOrder', this).on('click', function () {
|
||||||
|
query.StartIndex = 0;
|
||||||
|
query.SortOrder = this.getAttribute('data-sortorder');
|
||||||
|
reloadItems(page);
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.chkStandardFilter', this).on('change', function () {
|
||||||
|
|
||||||
|
var filterName = this.getAttribute('data-filter');
|
||||||
|
var filters = query.Filters || "";
|
||||||
|
|
||||||
|
filters = (',' + filters).replace(',' + filterName, '').substring(1);
|
||||||
|
|
||||||
|
if (this.checked) {
|
||||||
|
filters = filters ? (filters + ',' + filterName) : filterName;
|
||||||
|
}
|
||||||
|
|
||||||
|
query.StartIndex = 0;
|
||||||
|
query.Filters = filters;
|
||||||
|
|
||||||
|
reloadItems(page);
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#selectView', this).on('change', function () {
|
||||||
|
|
||||||
|
view = this.value;
|
||||||
|
|
||||||
|
reloadItems(page);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
}).on('pagebeforeshow', "#gamesPage", function () {
|
||||||
|
|
||||||
|
reloadItems(this);
|
||||||
|
|
||||||
|
}).on('pageshow', "#gamesPage", function () {
|
||||||
|
|
||||||
|
|
||||||
|
// Reset form values using the last used query
|
||||||
|
$('.radioSortBy', this).each(function () {
|
||||||
|
|
||||||
|
this.checked = query.SortBy == this.getAttribute('data-sortby');
|
||||||
|
|
||||||
|
}).checkboxradio('refresh');
|
||||||
|
|
||||||
|
$('.radioSortOrder', this).each(function () {
|
||||||
|
|
||||||
|
this.checked = query.SortOrder == this.getAttribute('data-sortorder');
|
||||||
|
|
||||||
|
}).checkboxradio('refresh');
|
||||||
|
|
||||||
|
$('.chkStandardFilter', this).each(function () {
|
||||||
|
|
||||||
|
var filters = "," + (query.Filters || "");
|
||||||
|
var filterName = this.getAttribute('data-filter');
|
||||||
|
|
||||||
|
this.checked = filters.indexOf(',' + filterName) != -1;
|
||||||
|
|
||||||
|
}).checkboxradio('refresh');
|
||||||
|
|
||||||
|
|
||||||
|
$('#selectView', this).val(view).selectmenu('refresh');
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
})(jQuery, document);
|
||||||
51
dashboard-ui/scripts/gamesrecommendedpage.js
Normal file
51
dashboard-ui/scripts/gamesrecommendedpage.js
Normal file
|
|
@ -0,0 +1,51 @@
|
||||||
|
(function ($, document) {
|
||||||
|
|
||||||
|
$(document).on('pagebeforeshow', "#gamesRecommendedPage", function () {
|
||||||
|
|
||||||
|
var page = this;
|
||||||
|
|
||||||
|
var options = {
|
||||||
|
|
||||||
|
SortBy: "DateCreated",
|
||||||
|
SortOrder: "Descending",
|
||||||
|
MediaTypes: "Game",
|
||||||
|
Limit: 5,
|
||||||
|
Recursive: true,
|
||||||
|
Fields: "PrimaryImageAspectRatio",
|
||||||
|
Filters: "IsUnplayed"
|
||||||
|
};
|
||||||
|
|
||||||
|
ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
|
||||||
|
|
||||||
|
$('#recentlyAddedItems', page).html(LibraryBrowser.getGamePosterViewHtml({
|
||||||
|
items: result.Items,
|
||||||
|
useAverageAspectRatio: true,
|
||||||
|
showNewIndicator: false
|
||||||
|
}));
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
var options = {
|
||||||
|
|
||||||
|
SortBy: "DatePlayed",
|
||||||
|
SortOrder: "Descending",
|
||||||
|
MediaTypes: "Game",
|
||||||
|
Limit: 5,
|
||||||
|
Recursive: true,
|
||||||
|
Fields: "PrimaryImageAspectRatio",
|
||||||
|
Filters: "IsPlayed"
|
||||||
|
};
|
||||||
|
|
||||||
|
ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
|
||||||
|
|
||||||
|
$('#resumableItems', page).html(LibraryBrowser.getGamePosterViewHtml({
|
||||||
|
items: result.Items,
|
||||||
|
useAverageAspectRatio: true,
|
||||||
|
showNewIndicator: false
|
||||||
|
}));
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
})(jQuery, document);
|
||||||
105
dashboard-ui/scripts/gamestudiospage.js
Normal file
105
dashboard-ui/scripts/gamestudiospage.js
Normal file
|
|
@ -0,0 +1,105 @@
|
||||||
|
(function ($, document) {
|
||||||
|
|
||||||
|
// The base query options
|
||||||
|
var query = {
|
||||||
|
|
||||||
|
SortBy: "SortName",
|
||||||
|
SortOrder: "Ascending",
|
||||||
|
MediaTypes: "Game",
|
||||||
|
Recursive: true,
|
||||||
|
Fields: "PrimaryImageAspectRatio,ItemCounts,DateCreated,UserData",
|
||||||
|
Limit: LibraryBrowser.getDetaultPageSize(),
|
||||||
|
StartIndex: 0
|
||||||
|
};
|
||||||
|
|
||||||
|
function reloadItems(page) {
|
||||||
|
|
||||||
|
Dashboard.showLoadingMsg();
|
||||||
|
|
||||||
|
ApiClient.getStudios(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: "Game",
|
||||||
|
countNamePlural: "Games"
|
||||||
|
});
|
||||||
|
|
||||||
|
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('pageinit', "#gameStudiosPage", function () {
|
||||||
|
|
||||||
|
var page = this;
|
||||||
|
|
||||||
|
$('.radioSortBy', this).on('click', function () {
|
||||||
|
query.SortBy = this.getAttribute('data-sortby');
|
||||||
|
query.StartIndex = 0;
|
||||||
|
reloadItems(page);
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.radioSortOrder', this).on('click', function () {
|
||||||
|
query.SortOrder = this.getAttribute('data-sortorder');
|
||||||
|
query.StartIndex = 0;
|
||||||
|
reloadItems(page);
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.chkStandardFilter', this).on('change', function () {
|
||||||
|
|
||||||
|
var filterName = this.getAttribute('data-filter');
|
||||||
|
var filters = query.Filters || "";
|
||||||
|
|
||||||
|
filters = (',' + filters).replace(',' + filterName, '').substring(1);
|
||||||
|
|
||||||
|
if (this.checked) {
|
||||||
|
filters = filters ? (filters + ',' + filterName) : filterName;
|
||||||
|
}
|
||||||
|
|
||||||
|
query.StartIndex = 0;
|
||||||
|
query.Filters = filters;
|
||||||
|
|
||||||
|
reloadItems(page);
|
||||||
|
});
|
||||||
|
|
||||||
|
}).on('pagebeforeshow', "#gameStudiosPage", function () {
|
||||||
|
|
||||||
|
reloadItems(this);
|
||||||
|
|
||||||
|
}).on('pageshow', "#gameStudiosPage", function () {
|
||||||
|
|
||||||
|
// Reset form values using the last used query
|
||||||
|
$('.radioSortBy', this).each(function () {
|
||||||
|
|
||||||
|
this.checked = query.SortBy == this.getAttribute('data-sortby');
|
||||||
|
|
||||||
|
}).checkboxradio('refresh');
|
||||||
|
|
||||||
|
$('.radioSortOrder', this).each(function () {
|
||||||
|
|
||||||
|
this.checked = query.SortOrder == this.getAttribute('data-sortorder');
|
||||||
|
|
||||||
|
}).checkboxradio('refresh');
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
})(jQuery, document);
|
||||||
62
dashboard-ui/scripts/gamesystempage.js
Normal file
62
dashboard-ui/scripts/gamesystempage.js
Normal file
|
|
@ -0,0 +1,62 @@
|
||||||
|
|
||||||
|
(function ($, document, LibraryBrowser) {
|
||||||
|
|
||||||
|
function reload(page) {
|
||||||
|
|
||||||
|
var id = getParameterByName('id');
|
||||||
|
|
||||||
|
Dashboard.showLoadingMsg();
|
||||||
|
|
||||||
|
ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(function (item) {
|
||||||
|
|
||||||
|
var name = item.Name;
|
||||||
|
|
||||||
|
$('#itemImage', page).html(LibraryBrowser.getDetailImageHtml(item));
|
||||||
|
|
||||||
|
Dashboard.setPageTitle(name);
|
||||||
|
|
||||||
|
$('#itemName', page).html(name);
|
||||||
|
|
||||||
|
renderDetails(page, item);
|
||||||
|
|
||||||
|
Dashboard.hideLoadingMsg();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderDetails(page, item) {
|
||||||
|
|
||||||
|
if (item.Overview || item.OverviewHtml) {
|
||||||
|
var overview = item.OverviewHtml || item.Overview;
|
||||||
|
|
||||||
|
$('#itemOverview', page).html(overview).show();
|
||||||
|
$('#itemOverview a').each(function () {
|
||||||
|
$(this).attr("target", "_blank");
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
$('#itemOverview', page).hide();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (item.CommunityRating) {
|
||||||
|
$('#itemCommunityRating', page).html(LibraryBrowser.getStarRatingHtml(item)).show().attr('title', item.CommunityRating);
|
||||||
|
} else {
|
||||||
|
$('#itemCommunityRating', page).hide();
|
||||||
|
}
|
||||||
|
|
||||||
|
$('#itemMiscInfo', page).html(LibraryBrowser.getMiscInfoHtml(item));
|
||||||
|
|
||||||
|
LibraryBrowser.renderGenres($('#itemGenres', page), item);
|
||||||
|
LibraryBrowser.renderStudios($('#itemStudios', page), item);
|
||||||
|
renderUserDataIcons(page, item);
|
||||||
|
LibraryBrowser.renderLinks($('#itemLinks', page), item);
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderUserDataIcons(page, item) {
|
||||||
|
$('#itemRatings', page).html(LibraryBrowser.getUserDataIconsHtml(item));
|
||||||
|
}
|
||||||
|
|
||||||
|
$(document).on('pageshow', "#gamesystemPage", function () {
|
||||||
|
reload(this);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
})(jQuery, document, LibraryBrowser);
|
||||||
111
dashboard-ui/scripts/gamesystemspage.js
Normal file
111
dashboard-ui/scripts/gamesystemspage.js
Normal file
|
|
@ -0,0 +1,111 @@
|
||||||
|
|
||||||
|
(function ($, document) {
|
||||||
|
|
||||||
|
// The base query options
|
||||||
|
var query = {
|
||||||
|
|
||||||
|
SortBy: "SortName",
|
||||||
|
SortOrder: "Ascending",
|
||||||
|
IncludeItemTypes: "Platform",
|
||||||
|
Recursive: true,
|
||||||
|
Fields: "PrimaryImageAspectRatio,ItemCounts,ItemCounts,DateCreated,UserData",
|
||||||
|
Limit: LibraryBrowser.getDetaultPageSize(),
|
||||||
|
StartIndex: 0
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
function reloadItems(page) {
|
||||||
|
|
||||||
|
Dashboard.showLoadingMsg();
|
||||||
|
|
||||||
|
ApiClient.getItems(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
|
||||||
|
});
|
||||||
|
|
||||||
|
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('pageinit', "#gamesystemsPage", function () {
|
||||||
|
|
||||||
|
var page = this;
|
||||||
|
|
||||||
|
$('.radioSortBy', this).on('click', function () {
|
||||||
|
query.SortBy = this.getAttribute('data-sortby');
|
||||||
|
reloadItems(page);
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.radioSortOrder', this).on('click', function () {
|
||||||
|
query.SortOrder = this.getAttribute('data-sortorder');
|
||||||
|
reloadItems(page);
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.chkStandardFilter', this).on('change', function () {
|
||||||
|
|
||||||
|
var filterName = this.getAttribute('data-filter');
|
||||||
|
var filters = query.Filters || "";
|
||||||
|
|
||||||
|
filters = (',' + filters).replace(',' + filterName, '').substring(1);
|
||||||
|
|
||||||
|
if (this.checked) {
|
||||||
|
filters = filters ? (filters + ',' + filterName) : filterName;
|
||||||
|
}
|
||||||
|
|
||||||
|
query.StartIndex = 0;
|
||||||
|
query.Filters = filters;
|
||||||
|
|
||||||
|
reloadItems(page);
|
||||||
|
});
|
||||||
|
|
||||||
|
}).on('pagebeforeshow', "#gamesystemsPage", function () {
|
||||||
|
|
||||||
|
reloadItems(this);
|
||||||
|
|
||||||
|
}).on('pageshow', "#gamesystemsPage", function () {
|
||||||
|
|
||||||
|
// Reset form values using the last used query
|
||||||
|
$('.radioSortBy', this).each(function () {
|
||||||
|
|
||||||
|
this.checked = query.SortBy == this.getAttribute('data-sortby');
|
||||||
|
|
||||||
|
}).checkboxradio('refresh');
|
||||||
|
|
||||||
|
$('.radioSortOrder', this).each(function () {
|
||||||
|
|
||||||
|
this.checked = query.SortOrder == this.getAttribute('data-sortorder');
|
||||||
|
|
||||||
|
}).checkboxradio('refresh');
|
||||||
|
|
||||||
|
$('.chkStandardFilter', this).each(function () {
|
||||||
|
|
||||||
|
var filters = "," + (query.Filters || "");
|
||||||
|
var filterName = this.getAttribute('data-filter');
|
||||||
|
|
||||||
|
this.checked = filters.indexOf(',' + filterName) != -1;
|
||||||
|
|
||||||
|
}).checkboxradio('refresh');
|
||||||
|
});
|
||||||
|
|
||||||
|
})(jQuery, document);
|
||||||
|
|
@ -59,7 +59,7 @@
|
||||||
|
|
||||||
if (result.TotalRecordCount) {
|
if (result.TotalRecordCount) {
|
||||||
|
|
||||||
var view = { name: "Games", url: "#", img: "css/images/items/list/gamecollection.png", background: "#E12026" };
|
var view = { name: "Games", url: "gamesrecommended.html", img: "css/images/items/list/gamecollection.png", background: "#E12026" };
|
||||||
|
|
||||||
$('#views', page).append(getViewHtml(view));
|
$('#views', page).append(getViewHtml(view));
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -79,6 +79,10 @@
|
||||||
|
|
||||||
html += "<img class='posterDetailViewImage' style='background:" + LibraryBrowser.getMetroColor(item.Id) + ";' src='css/images/items/list/person.png' />";
|
html += "<img class='posterDetailViewImage' style='background:" + LibraryBrowser.getMetroColor(item.Id) + ";' src='css/images/items/list/person.png' />";
|
||||||
}
|
}
|
||||||
|
else if (item.MediaType == "Game") {
|
||||||
|
|
||||||
|
html += "<img class='posterDetailViewImage' style='background:" + LibraryBrowser.getMetroColor(item.Id) + ";' src='css/images/items/list/game.png' />";
|
||||||
|
}
|
||||||
else {
|
else {
|
||||||
|
|
||||||
html += "<img class='posterDetailViewImage' style='background:" + LibraryBrowser.getMetroColor(item.Id) + ";' src='css/images/items/list/collection.png' />";
|
html += "<img class='posterDetailViewImage' style='background:" + LibraryBrowser.getMetroColor(item.Id) + ";' src='css/images/items/list/collection.png' />";
|
||||||
|
|
@ -896,6 +900,75 @@
|
||||||
} else {
|
} else {
|
||||||
elem.hide();
|
elem.hide();
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getGamePosterViewHtml: function (options) {
|
||||||
|
|
||||||
|
var items = options.items;
|
||||||
|
|
||||||
|
var primaryImageAspectRatio = options.useAverageAspectRatio ? LibraryBrowser.getAveragePrimaryImageAspectRatio(items) : null;
|
||||||
|
|
||||||
|
var html = "";
|
||||||
|
|
||||||
|
for (var i = 0, length = items.length; i < length; i++) {
|
||||||
|
var item = items[i];
|
||||||
|
|
||||||
|
var hasPrimaryImage = item.ImageTags && item.ImageTags.Primary;
|
||||||
|
|
||||||
|
var showText = options.showTitle || !hasPrimaryImage;
|
||||||
|
|
||||||
|
var cssClass = showText ? "posterViewItem" : "posterViewItem posterViewItemWithNoText";
|
||||||
|
|
||||||
|
html += "<div class='" + cssClass + "'><a href='" + LibraryBrowser.getHref(item) + "'>";
|
||||||
|
|
||||||
|
if (options.preferBackdrop && item.BackdropImageTags && item.BackdropImageTags.length) {
|
||||||
|
html += "<img src='" + ApiClient.getImageUrl(item.Id, {
|
||||||
|
type: "Backdrop",
|
||||||
|
height: 198,
|
||||||
|
width: 352,
|
||||||
|
tag: item.BackdropImageTags[0]
|
||||||
|
|
||||||
|
}) + "' />";
|
||||||
|
} else if (hasPrimaryImage) {
|
||||||
|
|
||||||
|
var height = 300;
|
||||||
|
var width = primaryImageAspectRatio ? parseInt(height * primaryImageAspectRatio) : null;
|
||||||
|
|
||||||
|
html += "<img src='" + ApiClient.getImageUrl(item.Id, {
|
||||||
|
type: "Primary",
|
||||||
|
height: height,
|
||||||
|
width: width,
|
||||||
|
tag: item.ImageTags.Primary
|
||||||
|
|
||||||
|
}) + "' />";
|
||||||
|
|
||||||
|
} else if (item.BackdropImageTags && item.BackdropImageTags.length) {
|
||||||
|
html += "<img src='" + ApiClient.getImageUrl(item.Id, {
|
||||||
|
type: "Backdrop",
|
||||||
|
height: 198,
|
||||||
|
width: 352,
|
||||||
|
tag: item.BackdropImageTags[0]
|
||||||
|
|
||||||
|
}) + "' />";
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
html += "<img style='background:" + LibraryBrowser.getMetroColor(item.Id) + ";' src='css/images/items/list/game.png' />";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (showText) {
|
||||||
|
html += "<div class='posterViewItemText'>";
|
||||||
|
html += item.Name;
|
||||||
|
html += "</div>";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.showNewIndicator !== false) {
|
||||||
|
html += LibraryBrowser.getNewIndicatorHtml(item);
|
||||||
|
}
|
||||||
|
|
||||||
|
html += "</a></div>";
|
||||||
|
}
|
||||||
|
|
||||||
|
return html;
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue