1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
This commit is contained in:
Techywarrior 2013-04-09 08:42:22 -07:00
commit d24f324427
6 changed files with 259 additions and 221 deletions

View file

@ -87,9 +87,10 @@
.libraryItemsGrid th { .libraryItemsGrid th {
padding-bottom: 10px; padding-bottom: 10px;
border-bottom: 1px solid #555;
} }
.libraryItemsGrid td, .libraryItemsGrid th { .libraryItemsGrid td {
border-top: 1px solid #555; border-top: 1px solid #555;
border-bottom: 1px solid #555; border-bottom: 1px solid #555;
} }

View file

@ -52,7 +52,7 @@
html += "<img style='background:" + LibraryBrowser.getMetroColor(item.Id) + ";' src='css/images/items/list/audio.png' />"; html += "<img style='background:" + LibraryBrowser.getMetroColor(item.Id) + ";' src='css/images/items/list/audio.png' />";
} }
else if (item.MediaType == "Video") { else if (item.MediaType == "Video" || item.Type == "Season" || item.Type == "Series") {
html += "<img style='background:" + LibraryBrowser.getMetroColor(item.Id) + ";' src='css/images/items/list/video.png' />"; html += "<img style='background:" + LibraryBrowser.getMetroColor(item.Id) + ";' src='css/images/items/list/video.png' />";
} }
@ -148,72 +148,72 @@
return html; return html;
}, },
getBoxsetPosterViewHtml: function (options) { getBoxsetPosterViewHtml: function (options) {
var items = options.items; var items = options.items;
var primaryImageAspectRatio = options.useAverageAspectRatio ? LibraryBrowser.getAveragePrimaryImageAspectRatio(items) : null; var primaryImageAspectRatio = options.useAverageAspectRatio ? LibraryBrowser.getAveragePrimaryImageAspectRatio(items) : null;
var html = ""; var html = "";
for (var i = 0, length = items.length; i < length; i++) { for (var i = 0, length = items.length; i < length; i++) {
var item = items[i]; var item = items[i];
var hasPrimaryImage = item.ImageTags && item.ImageTags.Primary; var hasPrimaryImage = item.ImageTags && item.ImageTags.Primary;
var href = item.url || ("boxset.html?id=" + item.Id); var href = item.url || ("boxset.html?id=" + item.Id);
var showText = options.showTitle || !hasPrimaryImage || (item.Type !== 'Movie' && item.Type !== 'Series' && item.Type !== 'Season' && item.Type !== 'Trailer'); var showText = options.showTitle || !hasPrimaryImage || (item.Type !== 'Movie' && item.Type !== 'Series' && item.Type !== 'Season' && item.Type !== 'Trailer');
var cssClass = showText ? "posterViewItem posterViewItemWithDualText" : "posterViewItem posterViewItemWithNoText"; var cssClass = showText ? "posterViewItem posterViewItemWithDualText" : "posterViewItem posterViewItemWithNoText";
html += "<div class='" + cssClass + "'><a href='" + href + "'>"; html += "<div class='" + cssClass + "'><a href='" + href + "'>";
if (options.preferBackdrop && item.BackdropImageTags && item.BackdropImageTags.length) { if (options.preferBackdrop && item.BackdropImageTags && item.BackdropImageTags.length) {
html += "<img src='" + ApiClient.getImageUrl(item.Id, { html += "<img src='" + ApiClient.getImageUrl(item.Id, {
type: "Backdrop", type: "Backdrop",
height: 198, height: 198,
width: 352, width: 352,
tag: item.BackdropImageTags[0] tag: item.BackdropImageTags[0]
}) + "' />"; }) + "' />";
} else if (hasPrimaryImage) { } else if (hasPrimaryImage) {
var height = 300; var height = 300;
var width = primaryImageAspectRatio ? parseInt(height * primaryImageAspectRatio) : null; var width = primaryImageAspectRatio ? parseInt(height * primaryImageAspectRatio) : null;
html += "<img src='" + ApiClient.getImageUrl(item.Id, { html += "<img src='" + ApiClient.getImageUrl(item.Id, {
type: "Primary", type: "Primary",
height: height, height: height,
width: width, width: width,
tag: item.ImageTags.Primary tag: item.ImageTags.Primary
}) + "' />"; }) + "' />";
} else if (item.BackdropImageTags && item.BackdropImageTags.length) { } else if (item.BackdropImageTags && item.BackdropImageTags.length) {
html += "<img src='" + ApiClient.getImageUrl(item.Id, { html += "<img src='" + ApiClient.getImageUrl(item.Id, {
type: "Backdrop", type: "Backdrop",
height: 198, height: 198,
width: 352, width: 352,
tag: item.BackdropImageTags[0] tag: item.BackdropImageTags[0]
}) + "' />"; }) + "' />";
} else { } else {
html += "<img style='background:" + LibraryBrowser.getMetroColor(item.Id) + ";' src='css/images/items/list/video.png' />"; html += "<img style='background:" + LibraryBrowser.getMetroColor(item.Id) + ";' src='css/images/items/list/video.png' />";
} }
if (showText) { if (showText) {
html += "<div class='posterViewItemText posterViewItemPrimaryText'>"; html += "<div class='posterViewItemText posterViewItemPrimaryText'>";
html += item.Name; html += item.Name;
html += "</div>"; html += "</div>";
html += "<div class='posterViewItemText'>"; html += "<div class='posterViewItemText'>";
html += item.ChildCount+" Movie"; html += item.ChildCount + " Movie";
if (item.ChildCount > 1) html += "s"; if (item.ChildCount > 1) html += "s";
html += "</div>"; html += "</div>";
} }
html += "</a></div>"; html += "</a></div>";
} }
return html; return html;
}, },
getAveragePrimaryImageAspectRatio: function (items) { getAveragePrimaryImageAspectRatio: function (items) {
@ -258,10 +258,10 @@
if (str) { if (str) {
var char = String(str.substr(0, 1).charCodeAt()); var char = String(str.substr(0, 1).charCodeAt());
var sum = 0; var sum = 0;
for (var i = 0; i < char.length; i++) { for (var i = 0; i < char.length; i++) {
sum += parseInt(char.charAt(i)); sum += parseInt(char.charAt(i));
} }
var index = String(sum).substr(-1); var index = String(sum).substr(-1);
return LibraryBrowser.metroColors[index]; return LibraryBrowser.metroColors[index];
@ -271,45 +271,72 @@
}, },
renderLinks: function (item) { renderLinks: function (item) {
var page = $.mobile.activePage; var page = $.mobile.activePage;
//console.log(item); //console.log(item);
if (item.ProviderIds) { if (item.ProviderIds) {
var html = 'Links:&nbsp;&nbsp;'; var html = 'Links:&nbsp;&nbsp;';
var links = []; var links = [];
if (item.ProviderIds.Imdb) { if (item.ProviderIds.Imdb) {
if (item.Type == "Movie" || item.Type == "Episode") if (item.Type == "Movie" || item.Type == "Episode")
links.push('<a class="ui-link" href="http://www.imdb.com/title/' + item.ProviderIds.Imdb + '" target="_blank">IMDb</a>'); links.push('<a class="ui-link" href="http://www.imdb.com/title/' + item.ProviderIds.Imdb + '" target="_blank">IMDb</a>');
else if (item.Type == "Person") else if (item.Type == "Person")
links.push('<a class="ui-link" href="http://www.imdb.com/name/' + item.ProviderIds.Imdb + '" target="_blank">IMDb</a>'); links.push('<a class="ui-link" href="http://www.imdb.com/name/' + item.ProviderIds.Imdb + '" target="_blank">IMDb</a>');
} }
if (item.ProviderIds.Tmdb) { if (item.ProviderIds.Tmdb) {
if (item.Type == "Movie") if (item.Type == "Movie")
links.push('<a class="ui-link" href="http://www.themoviedb.org/movie/' + item.ProviderIds.Tmdb + '" target="_blank">TMDB</a>'); links.push('<a class="ui-link" href="http://www.themoviedb.org/movie/' + item.ProviderIds.Tmdb + '" target="_blank">TMDB</a>');
else if (item.Type == "Person") else if (item.Type == "Person")
links.push('<a class="ui-link" href="http://www.themoviedb.org/person/' + item.ProviderIds.Tmdb + '" target="_blank">TMDB</a>'); links.push('<a class="ui-link" href="http://www.themoviedb.org/person/' + item.ProviderIds.Tmdb + '" target="_blank">TMDB</a>');
} }
if (item.ProviderIds.Tvdb) if (item.ProviderIds.Tvdb)
links.push('<a class="ui-link" href="http://thetvdb.com/index.php?tab=series&id=' + item.ProviderIds.Tvdb + '" target="_blank">TVDB</a>'); links.push('<a class="ui-link" href="http://thetvdb.com/index.php?tab=series&id=' + item.ProviderIds.Tvdb + '" target="_blank">TVDB</a>');
if (item.ProviderIds.Tvcom) { if (item.ProviderIds.Tvcom) {
if (item.Type == "Episode") if (item.Type == "Episode")
links.push('<a class="ui-link" href="http://www.tv.com/shows/' + item.ProviderIds.Tvcom + '" target="_blank">TV.com</a>'); links.push('<a class="ui-link" href="http://www.tv.com/shows/' + item.ProviderIds.Tvcom + '" target="_blank">TV.com</a>');
else if (item.Type == "Person") else if (item.Type == "Person")
links.push('<a class="ui-link" href="http://www.tv.com/people/' + item.ProviderIds.Tvcom + '" target="_blank">TV.com</a>'); links.push('<a class="ui-link" href="http://www.tv.com/people/' + item.ProviderIds.Tvcom + '" target="_blank">TV.com</a>');
} }
if (item.ProviderIds.Musicbrainz) if (item.ProviderIds.Musicbrainz)
links.push('<a class="ui-link" href="http://musicbrainz.org/release/' + item.ProviderIds.Musicbrainz + '" target="_blank">MusicBrainz</a>'); links.push('<a class="ui-link" href="http://musicbrainz.org/release/' + item.ProviderIds.Musicbrainz + '" target="_blank">MusicBrainz</a>');
if (item.ProviderIds.Gamesdb) if (item.ProviderIds.Gamesdb)
links.push('<a class="ui-link" href="http://www.games-db.com/Game/' + item.ProviderIds.Gamesdb + '" target="_blank">GamesDB</a>'); links.push('<a class="ui-link" href="http://www.games-db.com/Game/' + item.ProviderIds.Gamesdb + '" target="_blank">GamesDB</a>');
html += links.join('&nbsp;&nbsp;/&nbsp;&nbsp;'); html += links.join('&nbsp;&nbsp;/&nbsp;&nbsp;');
$('#itemLinks', page).html(html); $('#itemLinks', page).html(html);
} else { } else {
$('#itemLinks', page).hide(); $('#itemLinks', page).hide();
} }
} },
getPagingHtml: function (query, totalRecordCount) {
var html = '';
var pageCount = Math.ceil(totalRecordCount / query.Limit);
var pageNumber = (query.StartIndex / query.Limit) + 1;
var dropdownHtml = '<select data-enhance="false" data-role="none">';
for (var i = 1; i <= pageCount; i++) {
if (i == pageNumber) {
dropdownHtml += '<option value="' + i + '" selected="selected">' + i + '</option>';
} else {
dropdownHtml += '<option value="' + i + '">' + i + '</option>';
}
}
dropdownHtml += '</select>';
var recordsEnd = Math.min(query.StartIndex + query.Limit, totalRecordCount);
html += '<div class="listPaging">';
html += 'Results ' + (query.StartIndex + 1) + '-' + recordsEnd + ' of ' + totalRecordCount + ', page ' + dropdownHtml + ' of ' + pageCount;
html += '</div>';
return html;
}
}; };

View file

@ -1,4 +1,4 @@
var MediaPlayer = (function (document, clearTimeout, screen, localStorage, _V_, $) { var MediaPlayer = (function (document, clearTimeout, screen, localStorage, _V_, $, setInterval) {
var testableAudioElement = document.createElement('audio'); var testableAudioElement = document.createElement('audio');
var testableVideoElement = document.createElement('video'); var testableVideoElement = document.createElement('video');
@ -360,4 +360,4 @@
return self; return self;
})(document, clearTimeout, screen, localStorage, _V_, $); })(document, clearTimeout, screen, localStorage, _V_, $, setInterval);

View file

@ -138,31 +138,6 @@
return html; return html;
} }
function getPagingHtml(result) {
var html = '';
var pageCount = Math.round(result.TotalRecordCount / query.Limit);
var pageNumber = (query.StartIndex / query.Limit) + 1;
var dropdownHtml = '<select data-enhance="false" data-role="none">';
for (var i = 1; i <= pageCount; i++) {
if (i == pageNumber) {
dropdownHtml += '<option value="' + i + '" selected="selected">' + i + '</option>';
} else {
dropdownHtml += '<option value="' + i + '">' + i + '</option>';
}
}
dropdownHtml += '</select>';
html += '<div class="listPaging">';
html += 'Results ' + (query.StartIndex + 1) + '-' + (query.StartIndex + query.Limit) + ' of ' + result.TotalRecordCount + ', page ' + dropdownHtml + ' of ' + pageCount;
html += '</div>';
return html;
}
function reloadItems(page) { function reloadItems(page) {
Dashboard.showLoadingMsg(); Dashboard.showLoadingMsg();
@ -174,7 +149,7 @@
var showPaging = result.TotalRecordCount > query.Limit; var showPaging = result.TotalRecordCount > query.Limit;
if (showPaging) { if (showPaging) {
html += getPagingHtml(result); html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
} }
if (view == "Poster") { if (view == "Poster") {
@ -188,7 +163,7 @@
} }
if (showPaging) { if (showPaging) {
html += getPagingHtml(result); html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
} }
var elem = $('#items', page); var elem = $('#items', page);

View file

@ -1,159 +1,184 @@
(function ($, document) { (function ($, document) {
// The base query options // The base query options
var query = { var query = {
SortBy: "SortName", SortBy: "SortName",
SortOrder: "Ascending", SortOrder: "Ascending",
IncludeItemTypes: "Series", IncludeItemTypes: "Series",
Recursive: true, Recursive: true,
Fields: "PrimaryImageAspectRatio,SeriesInfo" Fields: "PrimaryImageAspectRatio,SeriesInfo"
}; };
function getTableHtml(items) { function getTableHtml(items) {
var html = '<div class="libraryItemsGridContainer"><table data-role="table" data-mode="reflow" class="ui-responsive table-stroke libraryItemsGrid">'; var html = '<div class="libraryItemsGridContainer"><table data-role="table" data-mode="reflow" class="ui-responsive table-stroke libraryItemsGrid">';
html += '<thead>'; html += '<thead>';
html += '<tr>'; html += '<tr>';
html += '<th>&nbsp;</th>'; html += '<th>&nbsp;</th>';
html += '<th>Name</th>'; html += '<th>Name</th>';
html += '<th>Year</th>'; html += '<th>Year</th>';
html += '<th>Official Rating</th>'; html += '<th>Official Rating</th>';
html += '<th>Runtime</th>'; html += '<th>Runtime</th>';
html += '<th>Community Rating</th>'; html += '<th>Community Rating</th>';
html += '</tr>'; html += '</tr>';
html += '</thead>'; html += '</thead>';
html += '<tbody>'; html += '<tbody>';
for (var i = 0, length = items.length; i < length; i++) { for (var i = 0, length = items.length; i < length; i++) {
html += getRowHtml(items[i]); html += getRowHtml(items[i]);
} }
html += '</tbody>'; html += '</tbody>';
html += '</table></div>'; html += '</table></div>';
return html; return html;
} }
function getRowHtml(item) { function getRowHtml(item) {
var html = '<tr>'; var html = '<tr>';
html += '<td>'; html += '<td>';
var url = "itemdetails.html?id=" + item.Id; var url = "itemdetails.html?id=" + item.Id;
var imageTags = item.ImageTags; var imageTags = item.ImageTags;
html += '<a href="' + url + '">'; html += '<a href="' + url + '">';
if (imageTags.Primary) { if (imageTags.Primary) {
html += '<img class="libraryGridImage" src="' + ApiClient.getImageUrl(item.Id, { html += '<img class="libraryGridImage" src="' + ApiClient.getImageUrl(item.Id, {
type: "Primary", type: "Primary",
height: 150, height: 150,
tag: item.ImageTags.Primary tag: item.ImageTags.Primary
}) + '" />'; }) + '" />';
} }
else { else {
html += '<img class="libraryGridImage" style="background:' + LibraryBrowser.getMetroColor(item.Id) + ';" src="css/images/items/list/collection.png" />'; html += '<img class="libraryGridImage" style="background:' + LibraryBrowser.getMetroColor(item.Id) + ';" src="css/images/items/list/collection.png" />';
} }
html += '</a></td>'; html += '</a></td>';
html += '<td><a href="' + url + '">' + item.Name + '</a></td>'; html += '<td><a href="' + url + '">' + item.Name + '</a></td>';
html += '<td>' + (item.ProductionYear || "") + '</td>'; html += '<td>' + (item.ProductionYear || "") + '</td>';
html += '<td>' + (item.OfficialRating || "") + '</td>'; html += '<td>' + (item.OfficialRating || "") + '</td>';
html += '<td>' + (item.RunTimeTicks || "") + '</td>'; html += '<td>' + (item.RunTimeTicks || "") + '</td>';
html += '<td>' + (item.CommunityRating || "") + '</td>'; html += '<td>' + (item.CommunityRating || "") + '</td>';
html += '</tr>'; html += '</tr>';
return html; return html;
} }
function reloadItems(page) { function reloadItems(page) {
Dashboard.showLoadingMsg(); Dashboard.showLoadingMsg();
ApiClient.getItems(Dashboard.getCurrentUserId(), query).done(function (result) { ApiClient.getItems(Dashboard.getCurrentUserId(), query).done(function (result) {
$('#items', page).html(LibraryBrowser.getPosterViewHtml({ $('#items', page).html(LibraryBrowser.getPosterViewHtml({
items: result.Items, items: result.Items,
useAverageAspectRatio: true useAverageAspectRatio: true
}))/*.html(getTableHtml(result.Items)).trigger('create')*/; }))/*.html(getTableHtml(result.Items)).trigger('create')*/;
Dashboard.hideLoadingMsg(); Dashboard.hideLoadingMsg();
}); });
} }
$(document).on('pageinit', "#tvShowsPage", function () { $(document).on('pageinit', "#tvShowsPage", function () {
var page = this; var page = this;
$('.radioSortBy', this).on('click', function () { $('.radioSortBy', this).on('click', function () {
query.SortBy = this.getAttribute('data-sortby'); query.SortBy = this.getAttribute('data-sortby');
reloadItems(page); reloadItems(page);
}); });
$('.radioSortOrder', this).on('click', function () { $('.radioSortOrder', this).on('click', function () {
query.SortOrder = this.getAttribute('data-sortorder'); query.SortOrder = this.getAttribute('data-sortorder');
reloadItems(page); reloadItems(page);
}); });
$('.chkStandardFilter', this).on('change', function () { $('.chkStandardFilter', this).on('change', function () {
var filterName = this.getAttribute('data-filter'); var filterName = this.getAttribute('data-filter');
var filters = query.Filters || ""; var filters = query.Filters || "";
filters = (',' + filters).replace(',' + filterName, '').substring(1); filters = (',' + filters).replace(',' + filterName, '').substring(1);
if (this.checked) { if (this.checked) {
filters = filters ? (filters + ',' + filterName) : filterName; filters = filters ? (filters + ',' + filterName) : filterName;
} }
query.Filters = filters; query.Filters = filters;
reloadItems(page); reloadItems(page);
}); });
}).on('pagebeforeshow', "#tvShowsPage", function () { $('.chkStatus', this).on('change', function () {
reloadItems(this); var filterName = this.getAttribute('data-filter');
var filters = query.SeriesStatus || "";
}).on('pageshow', "#tvShowsPage", function () { filters = (',' + filters).replace(',' + filterName, '').substring(1);
// Reset form values using the last used query if (this.checked) {
$('.radioSortBy', this).each(function () { filters = filters ? (filters + ',' + filterName) : filterName;
}
this.checked = query.SortBy == this.getAttribute('data-sortby'); query.SeriesStatus = filters;
}).checkboxradio('refresh'); reloadItems(page);
});
$('.radioSortOrder', this).each(function () { }).on('pagebeforeshow', "#tvShowsPage", function () {
this.checked = query.SortOrder == this.getAttribute('data-sortorder'); reloadItems(this);
}).checkboxradio('refresh'); }).on('pageshow', "#tvShowsPage", function () {
$('.chkStandardFilter', this).each(function () { // Reset form values using the last used query
$('.radioSortBy', this).each(function () {
var filters = "," + (query.Filters || ""); this.checked = query.SortBy == this.getAttribute('data-sortby');
var filterName = this.getAttribute('data-filter');
this.checked = filters.indexOf(',' + filterName) != -1; }).checkboxradio('refresh');
}).checkboxradio('refresh'); $('.chkStatus', this).each(function () {
});
var filters = "," + (query.SeriesStatus || "");
var filterName = this.getAttribute('data-filter');
this.checked = filters.indexOf(',' + filterName) != -1;
}).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); })(jQuery, document);

View file

@ -74,6 +74,16 @@
<input class="chkStandardFilter" type="checkbox" name="chkDislikes" id="chkDislikes" data-theme="c" data-filter="Dislikes"> <input class="chkStandardFilter" type="checkbox" name="chkDislikes" id="chkDislikes" data-theme="c" data-filter="Dislikes">
<label for="chkDislikes">Dislikes</label> <label for="chkDislikes">Dislikes</label>
</fieldset> </fieldset>
<fieldset data-role="controlgroup">
<legend>
<h3>Status:</h3>
</legend>
<input class="chkStatus" type="checkbox" name="chkStatusContinuing" id="chkStatusContinuing" data-theme="c" data-filter="Continuing">
<label for="chkStatusContinuing">Continuing</label>
<input class="chkStatus" type="checkbox" name="chkStatusEnded" id="chkStatusEnded" data-theme="c" data-filter="Ended">
<label for="chkStatusEnded">Ended</label>
</fieldset>
</form> </form>
</div> </div>
</div> </div>