cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-17 19:08:18 -07:00
Code Issues Packages Projects Releases Wiki Activity

fixes #834 - Change view of TV Shows or Interface for plugins

Browse Source
This commit is contained in:
Luke Pulverenti 2014-07-05 17:15:25 -04:00
parent 495501f5aa
commit 3719b9ad8e
9 changed files with 252 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
dashboard-ui/css/librarybrowser.css
View File

@ -1267,6 +1267,12 @@ a.itemTag:hover {
border: 0;
}
.itemsListview .playedIndicator {
right: 1em;
top: 55%;
background: rgba(82, 181, 75, .8);
}
.listviewImage {
width: 80px;
height: 80px;

6
dashboard-ui/games.html
View File

@ -16,6 +16,12 @@
</div>
<div data-role="content">
<div class="viewSettings">
<div style="display: inline-block;">
<select data-mini="true" data-inline="true" id="selectView" name="selectView">
<option value="Poster">${OptionPoster}</option>
<option value="List">${OptionList}</option>
</select>
</div>
<div class="viewControls" data-role="controlgroup" data-type="horizontal">
<button data-mini="true" data-icon="sort" data-inline="true" data-iconpos="notext" title="${ButtonSort}" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">${ButtonSort}</button>
<button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="${ButtonFilter}" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">${ButtonFilter}</button>

6
dashboard-ui/musicalbumartists.html
View File

@ -19,6 +19,12 @@
</div>
<div data-role="content">
<div class="viewSettings">
<div style="display: inline-block;">
<select data-mini="true" data-inline="true" id="selectView" name="selectView">
<option value="Poster">${OptionPoster}</option>
<option value="List">${OptionList}</option>
</select>
</div>
<div class="viewControls" data-role="controlgroup" data-type="horizontal">
<button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="${ButtonFilter}" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">${ButtonFilter}</button>
</div>

6
dashboard-ui/musicartists.html
View File

@ -19,6 +19,12 @@
</div>
<div data-role="content">
<div class="viewSettings">
<div style="display: inline-block;">
<select data-mini="true" data-inline="true" id="selectView" name="selectView">
<option value="Poster">${OptionPoster}</option>
<option value="List">${OptionList}</option>
</select>
</div>
<div class="viewControls" data-role="controlgroup" data-type="horizontal">
<button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="${ButtonFilter}" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">${ButtonFilter}</button>
</div>

65
dashboard-ui/scripts/gamespage.js
View File

@ -1,6 +1,8 @@
(function ($, document) {
var view = LibraryBrowser.getDefaultItemsView('Poster', 'List');
// The base query options
var query = {
@ -8,7 +10,7 @@
SortOrder: "Ascending",
MediaTypes: "Game",
Recursive: true,
Fields: "Genres,Studios,PrimaryImageAspectRatio",
Fields: "Genres,Studios,PrimaryImageAspectRatio,SortName",
StartIndex: 0
};
@ -32,14 +34,25 @@
updateFilterControls(page);
html = LibraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "auto",
context: 'games',
showTitle: true,
showParentTitle: true,
centerText: true
});
if (view == "List") {
html = LibraryBrowser.getListViewHtml({
items: result.Items,
context: 'games',
sortBy: query.SortBy
});
$('.itemsContainer', page).removeClass('timelineItemsContainer');
}
else if (view == "Poster") {
html = LibraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "auto",
context: 'games',
showTitle: true,
showParentTitle: true,
centerText: true
});
}
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
@ -104,6 +117,8 @@
}).checkboxradio('refresh');
$('#selectView', page).val(view).selectmenu('refresh');
$('#chkTrailer', page).checked(query.HasTrailer == true).checkboxradio('refresh');
$('#chkThemeSong', page).checked(query.HasThemeSong == true).checkboxradio('refresh');
$('#chkThemeVideo', page).checked(query.HasThemeVideo == true).checkboxradio('refresh');
@ -193,8 +208,27 @@
reloadItems(page);
});
$('#selectView', this).on('change', function () {
view = this.value;
if (view == "Timeline") {
query.SortBy = "PremiereDate";
query.SortOrder = "Descending";
query.StartIndex = 0;
$('#radioPremiereDate', page)[0].click();
} else {
reloadItems(page);
}
LibraryBrowser.saveViewSetting(getSavedQueryKey(), view);
});
}).on('pagebeforeshow', "#gamesPage", function () {
var page = this;
query.ParentId = LibraryMenu.getTopParentId();
var limit = LibraryBrowser.getDefaultPageSize();
@ -205,9 +239,18 @@
query.StartIndex = 0;
}
LibraryBrowser.loadSavedQueryValues(getSavedQueryKey(), query);
var viewkey = getSavedQueryKey();
reloadItems(this);
LibraryBrowser.loadSavedQueryValues(viewkey, query);
LibraryBrowser.getSavedViewSetting(viewkey).done(function (val) {
if (val) {
$('#selectView', page).val(val).selectmenu('refresh').trigger('change');
} else {
reloadItems(page);
}
});
}).on('pageshow', "#gamesPage", function () {

85
dashboard-ui/scripts/librarybrowser.js
View File

@ -498,21 +498,24 @@
return ApiClient.getScaledImageUrl(item.Id || item.ItemId, options);
},
getListViewIndex: function(item, sortBy) {
getListViewIndex: function (item, sortBy) {
sortBy = (sortBy || '').toLowerCase();
var code, name;
if (sortBy.indexOf('sortname') == 0) {
if (item.Type == 'Episode') return '';
// SortName
var name = (item.SortName || item.Name)[0];
if (!isNaN(name)) {
name = (item.SortName || item.Name)[0].toUpperCase();
code = name.charCodeAt(0);
if (code < 65 || code > 90) {
return '#';
}
return name.toUpperCase();
}
if (sortBy.indexOf('officialrating') == 0) {
@ -547,13 +550,15 @@
// SortName
if (!item.AlbumArtist) return '';
var albumartist = item.AlbumArtist[0];
if (!isNaN(albumartist)) {
name = item.AlbumArtist[0].toUpperCase();
code = name.charCodeAt(0);
if (code < 65 || code > 90) {
return '#';
}
return albumartist.toUpperCase();
return name.toUpperCase();
}
return '';
},
@ -572,7 +577,7 @@
var html = '';
var itemGroupTitle = LibraryBrowser.getListViewIndex(item, options.sortBy);
if (itemGroupTitle != groupTitle) {
html += '<li data-role="list-divider">';
@ -590,7 +595,7 @@
if (item.ImageTags.Primary) {
// Scaling 400w episode images to 80 doesn't turn out very well
var width = item.Type == 'Episode' ? 160 : 80;
var width = item.Type == 'Episode' || item.Type == 'Game' ? 160 : 80;
imgUrl = ApiClient.getScaledImageUrl(item.Id, {
width: width,
@ -609,24 +614,62 @@
}
}
var textlines = [];
if (item.Type == 'Episode') {
textlines.push(item.SeriesName || 'Unknown Series');
}
else if (item.Type == 'MusicAlbum') {
textlines.push(item.AlbumArtist || 'Unknown Artist');
}
textlines.push(LibraryBrowser.getPosterViewDisplayName(item));
if (item.Type == 'Game') {
textlines.push(item.GameSystem || 'Unknown Gane System');
}
textlines.push(LibraryBrowser.getMiscInfoHtml(item));
html += '<h3>';
html += LibraryBrowser.getPosterViewDisplayName(item);
html += textlines[0];
html += '</h3>';
html += '<p>';
html += LibraryBrowser.getMiscInfoHtml(item);
html += '</p>';
if (textlines.length > 1) {
html += '<p>';
html += textlines[1];
html += '</p>';
}
html += '<div class="ui-li-aside">';
html += LibraryBrowser.getRatingHtml(item, false);
html += textlines[2] || LibraryBrowser.getRatingHtml(item, false);
html += '</div>';
if (item.UserData.UnplayedItemCount) {
html += '<span class="ui-li-count">' + item.UserData.UnplayedItemCount + '</span>';
if (item.Type == 'Series' || item.Type == 'Season' || item.Type == 'BoxSet' || item.MediaType == 'Video') {
if (item.UserData.UnplayedItemCount) {
html += '<span class="ui-li-count">' + item.UserData.UnplayedItemCount + '</span>';
}
else if (item.UserData.Played) {
html += '<div class="playedIndicator"><div class="ui-icon-check ui-btn-icon-notext"></div></div>';
}
}
html += '</a>';
html += '<a href="#" data-icon="ellipsis-v">';
var itemCommands = [];
//if (MediaController.canPlay(item)) {
// itemCommands.push('playmenu');
//}
if (item.Type != "Recording" && item.Type != "Program") {
itemCommands.push('edit');
}
if (item.LocalTrailerCount) {
itemCommands.push('trailer');
}
html += '<a href="#" data-icon="ellipsis-v" data-itemid="' + item.Id + '" data-commands="' + itemCommands.join(',') + '" data-href="' + LibraryBrowser.getHref(item, options.context) + '" class="listviewMenuButton">';
html += '</a>';
html += '</li>';

23
dashboard-ui/scripts/librarylist.js
View File

@ -212,9 +212,15 @@
function onPosterItemTapHold(e) {
$('.tapHoldMenu').popup("close").remove();
showContextMenu(this);
var posterItem = this;
e.preventDefault();
return false;
}
function showContextMenu(posterItem) {
$('.tapHoldMenu').popup("close").remove();
var itemId = posterItem.getAttribute('data-itemid');
var commands = posterItem.getAttribute('data-commands').split(',');
@ -234,8 +240,10 @@
html += '<ul data-role="listview" style="min-width: 240px;">';
html += '<li data-role="list-divider">' + Globalize.translate('HeaderMenu') + '</li>';
html += '<li><a href="' + posterItem.href + '">' + Globalize.translate('ButtonOpen') + '</a></li>';
html += '<li><a href="' + posterItem.href + '" target="_blank">' + Globalize.translate('ButtonOpenInNewTab') + '</a></li>';
var href = posterItem.getAttribute('data-href') || posterItem.href;
html += '<li><a href="' + href + '">' + Globalize.translate('ButtonOpen') + '</a></li>';
html += '<li><a href="' + href + '" target="_blank">' + Globalize.translate('ButtonOpenInNewTab') + '</a></li>';
if (user.Configuration.IsAdministrator && commands.indexOf('edit') != -1) {
html += '<li data-icon="edit"><a href="edititemmetadata.html?id=' + itemId + '">' + Globalize.translate('ButtonEdit') + '</a></li>';
@ -285,6 +293,11 @@
$('.btnShuffle', elem).on('click', onShuffleButtonClick);
$('.btnPlayTrailer', elem).on('click', onTrailerButtonClick);
});
}
function onListViewMenuButtonClick(e) {
showContextMenu(this);
e.preventDefault();
return false;
@ -471,6 +484,8 @@
$('.posterItem', this).on('contextmenu.posterItemMenu', onPosterItemTapHold);
$('.listviewMenuButton', this).on('click', onListViewMenuButtonClick);
$('.groupedPosterItem', this).on('click', onGroupedPosterItemClick);
return this.off('.posterItemHoverMenu')

57
dashboard-ui/scripts/musicalbumartists.js
View File

@ -1,12 +1,14 @@
(function ($, document) {
var view = LibraryBrowser.getDefaultItemsView('Poster', 'List');
// The base query options
var query = {
SortBy: "SortName",
SortOrder: "Ascending",
Recursive: true,
Fields: "DateCreated",
Fields: "PrimaryImageAspectRatio,SortName,DateCreated",
StartIndex: 0
};
@ -30,15 +32,25 @@
updateFilterControls(page);
html = LibraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "square",
context: 'music',
showTitle: true,
coverImage: true,
centerText: true,
lazy: true
});
if (view == "List") {
html = LibraryBrowser.getListViewHtml({
items: result.Items,
context: 'music',
sortBy: query.SortBy
});
}
else if (view == "Poster") {
html = LibraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "square",
context: 'music',
showTitle: true,
coverImage: true,
centerText: true,
lazy: true
});
}
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
@ -77,6 +89,8 @@
}).checkboxradio('refresh');
$('#selectView', page).val(view).selectmenu('refresh');
$('.alphabetPicker', page).alphaValue(query.NameStartsWithOrGreater);
}
@ -115,8 +129,18 @@
reloadItems(page);
});
$('#selectView', this).on('change', function () {
view = this.value;
reloadItems(page);
LibraryBrowser.saveViewSetting(getSavedQueryKey(), view);
});
}).on('pagebeforeshow', "#musicAlbumArtistsPage", function () {
var page = this;
query.ParentId = LibraryMenu.getTopParentId();
var limit = LibraryBrowser.getDefaultPageSize();
@ -127,9 +151,18 @@
query.StartIndex = 0;
}
LibraryBrowser.loadSavedQueryValues(getSavedQueryKey(), query);
var viewkey = getSavedQueryKey();
reloadItems(this);
LibraryBrowser.loadSavedQueryValues(viewkey, query);
LibraryBrowser.getSavedViewSetting(viewkey).done(function (val) {
if (val) {
$('#selectView', page).val(val).selectmenu('refresh').trigger('change');
} else {
reloadItems(page);
}
});
}).on('pageshow', "#musicAlbumArtistsPage", function () {

58
dashboard-ui/scripts/musicartists.js
View File

@ -1,12 +1,14 @@
(function ($, document) {
var view = LibraryBrowser.getDefaultItemsView('Poster', 'List');
// The base query options
var query = {
SortBy: "SortName",
SortOrder: "Ascending",
Recursive: true,
Fields: "DateCreated",
Fields: "PrimaryImageAspectRatio,SortName,DateCreated",
StartIndex: 0
};
@ -30,15 +32,25 @@
updateFilterControls(page);
html = LibraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "square",
context: 'music',
showTitle: true,
coverImage: true,
centerText: true,
lazy: true
});
if (view == "List") {
html = LibraryBrowser.getListViewHtml({
items: result.Items,
context: 'music',
sortBy: query.SortBy
});
}
else if (view == "Poster") {
html = LibraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "square",
context: 'music',
showTitle: true,
coverImage: true,
centerText: true,
lazy: true
});
}
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
@ -77,6 +89,8 @@
}).checkboxradio('refresh');
$('#selectView', page).val(view).selectmenu('refresh');
$('.alphabetPicker', page).alphaValue(query.NameStartsWithOrGreater);
}
@ -115,8 +129,19 @@
reloadItems(page);
});
$('#selectView', this).on('change', function () {
view = this.value;
reloadItems(page);
LibraryBrowser.saveViewSetting(getSavedQueryKey(), view);
});
}).on('pagebeforeshow', "#musicArtistsPage", function () {
var page = this;
query.ParentId = LibraryMenu.getTopParentId();
var limit = LibraryBrowser.getDefaultPageSize();
@ -127,9 +152,18 @@
query.StartIndex = 0;
}
LibraryBrowser.loadSavedQueryValues(getSavedQueryKey(), query);
var viewkey = getSavedQueryKey();
reloadItems(this);
LibraryBrowser.loadSavedQueryValues(viewkey, query);
LibraryBrowser.getSavedViewSetting(viewkey).done(function (val) {
if (val) {
$('#selectView', page).val(val).selectmenu('refresh').trigger('change');
} else {
reloadItems(page);
}
});
}).on('pageshow', "#musicArtistsPage", function () {