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

fixes #944 - Add card views

Browse Source
This commit is contained in:
Luke Pulverenti 2014-11-10 22:41:19 -05:00
parent a1535a341b
commit c6064c9e96
27 changed files with 321 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
dashboard-ui/css/card.css
View File

@ -90,8 +90,9 @@
}
.visualCardBox-b {
border-radius: 3px;
background: rgb(51, 51, 51);
border: 1px solid rgb(31, 31, 31);
border-radius: 3px;
}
.cardScalable {
@ -130,9 +131,9 @@
right: 0;
}
.cardContent:hover .cardImage {
opacity: .5;
}
.cardContent:hover .cardImage {
opacity: .5;
}
/*.preview-overlay-container {
-moz-border-radius: 2px;

4
dashboard-ui/css/site.css
View File

@ -489,10 +489,10 @@ h1 .imageLink {
.mediaLocationsHeader .ui-btn {
position: absolute;
right: -6px;
right: -3px;
margin-top: 0 !important;
margin-bottom: 0 !important;
top: 6px;
top: 4px;
}
#ulDirectoryPickerList a {

3
dashboard-ui/episodes.html
View File

@ -47,8 +47,9 @@
<div>
<label for="selectView">${LabelView}</label>
<select id="selectView">
<option value="Poster">${OptionPoster}</option>
<option value="List">${OptionList}</option>
<option value="Poster">${OptionPoster}</option>
<option value="PosterCard">${OptionPosterCard}</option>
</select>
</div>
<br />

3
dashboard-ui/games.html
View File

@ -38,8 +38,9 @@
<div>
<label for="selectView">${LabelView}</label>
<select id="selectView">
<option value="Poster">${OptionPoster}</option>
<option value="List">${OptionList}</option>
<option value="Poster">${OptionPoster}</option>
<option value="PosterCard">${OptionPosterCard}</option>
</select>
</div>
<br />

9
dashboard-ui/moviegenres.html
View File

@ -35,6 +35,15 @@
<div class="tabView viewTab">
<div>
<label for="selectView">${LabelView}</label>
<select id="selectView">
<option value="Poster">${OptionPoster}</option>
<option value="Thumb">${OptionThumb}</option>
<option value="ThumbCard">${OptionThumbCard}</option>
</select>
</div>
<br />
<div>
<label for="selectPageSize">${LabelPageSize}</label>
<select id="selectPageSize"></select>

5
dashboard-ui/movies.html
View File

@ -49,10 +49,11 @@
<div>
<label for="selectView">${LabelView}</label>
<select id="selectView">
<option value="Thumb">${OptionThumb}</option>
<option value="Poster">${OptionPoster}</option>
<option value="Banner">${OptionBanner}</option>
<option value="List">${OptionList}</option>
<option value="Poster">${OptionPoster}</option>
<option value="Thumb">${OptionThumb}</option>
<option value="ThumbCard">${OptionThumbCard}</option>
<option value="Timeline">${OptionTimeline}</option>
</select>
</div>

3
dashboard-ui/musicalbumartists.html
View File

@ -43,8 +43,9 @@
<div>
<label for="selectView">${LabelView}</label>
<select id="selectView">
<option value="Poster">${OptionPoster}</option>
<option value="List">${OptionList}</option>
<option value="Poster">${OptionPoster}</option>
<option value="PosterCard">${OptionPosterCard}</option>
</select>
</div>
<br />

3
dashboard-ui/musicalbums.html
View File

@ -43,8 +43,9 @@
<div>
<label for="selectView">${LabelView}</label>
<select id="selectView">
<option value="Poster">${OptionPoster}</option>
<option value="List">${OptionList}</option>
<option value="Poster">${OptionPoster}</option>
<option value="PosterCard">${OptionPosterCard}</option>
<option value="Timeline">${OptionTimeline}</option>
</select>
</div>

3
dashboard-ui/musicartists.html
View File

@ -42,8 +42,9 @@
<div>
<label for="selectView">${LabelView}</label>
<select id="selectView">
<option value="Poster">${OptionPoster}</option>
<option value="List">${OptionList}</option>
<option value="Poster">${OptionPoster}</option>
<option value="PosterCard">${OptionPosterCard}</option>
</select>
</div>
<br />

12
dashboard-ui/scripts/episodes.js
View File

@ -59,11 +59,21 @@
showTitle: true,
showParentTitle: true,
overlayText: true,
selectionPanel: true,
lazy: true,
context: 'tv'
});
}
else if (view == "PosterCard") {
html += LibraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "backdrop",
showTitle: true,
showParentTitle: true,
lazy: true,
context: 'tv',
cardLayout: true
});
}
html += pagingHtml;

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

@ -61,6 +61,17 @@
centerText: true
});
}
else if (view == "PosterCard") {
html = LibraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "auto",
context: 'games',
showTitle: true,
showParentTitle: true,
cardLayout: true
});
}
html += pagingHtml;

4
dashboard-ui/scripts/gamesrecommendedpage.js
View File

@ -10,7 +10,7 @@
var options = {
IncludeItemTypes: "Game",
Limit: 8,
Limit: 18,
Fields: "PrimaryImageAspectRatio",
ParentId: parentId
};
@ -33,7 +33,7 @@
SortBy: "DatePlayed",
SortOrder: "Descending",
MediaTypes: "Game",
Limit: 8,
Limit: 18,
Recursive: true,
Filters: "IsPlayed",
Fields: "ItemCounts,AudioInfo,PrimaryImageAspectRatio",

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

@ -1217,7 +1217,7 @@
cssClass += ' itemWithAction';
}
html += '<a' + dataAttributes + ' class="' + cssClass + '" href="' + href + '"' + defaultActionAttribute + '>';
html += '<div' + dataAttributes + ' class="' + cssClass + '">';
var style = "";
@ -1250,7 +1250,7 @@
html += '<div class="cardScalable">';
html += '<div class="cardPadder"></div>';
html += '<div class="cardContent">';
html += '<a class="cardContent" href="' + href + '"' + defaultActionAttribute + '>';
html += '<div class="' + imageCssClass + '" style="' + style + '"' + dataSrc + '></div>';
html += '<div class="cardOverlayTarget"></div>';
@ -1292,7 +1292,7 @@
}
// cardContent
html += '</div>';
html += '</a>';
// cardScalable
html += '</div>';
@ -1304,7 +1304,7 @@
// cardBox
html += '</div>';
html += "</a>";
html += "</div>";
}
@ -1317,6 +1317,12 @@
html += '<div class="' + footerClass + '">';
if (options.cardLayout) {
html += '<div class="cardText" style="text-align:right; float:right;">';
html += '<button class="listviewMenuButton" type="button" data-inline="true" data-iconpos="notext" data-icon="ellipsis-v" style="margin: 4px 0 0;"></button>';
html += "</div>";
}
var name = LibraryBrowser.getPosterViewDisplayName(item, options.displayAsSpecial);
if (!imgUrl && !options.showTitle) {
@ -1346,6 +1352,19 @@
lines.push(itemCountHtml);
}
if (options.showSongCount) {
var songLine = '';
if (item.SongCount) {
songLine = item.SongCount == 1 ?
Globalize.translate('ValueOneSong') :
Globalize.translate('ValueSongCount', item.SongCount);
}
lines.push(songLine);
}
if (options.showPremiereDate && item.PremiereDate) {
try {
@ -1363,6 +1382,18 @@
lines.push(item.ProductionYear || '');
}
if (options.showSeriesYear) {
if (item.Status == "Continuing") {
lines.push(Globalize.translate('ValueSeriesYearToPresent', item.ProductionYear || ''));
} else {
lines.push(item.ProductionYear || '');
}
}
html += LibraryBrowser.getCardTextLines(lines, cssClass, !options.overlayText);
if (options.overlayText) {

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

@ -319,7 +319,7 @@
var displayContextItem = card;
if ($(card).hasClass('listviewMenuButton')) {
card = $(card).parents('.listItem')[0];
card = $(card).parents('.listItem,.card')[0];
}
var itemId = card.getAttribute('data-itemid');
@ -342,7 +342,7 @@
html += '<ul data-role="listview" style="min-width: 240px;">';
html += '<li data-role="list-divider">' + Globalize.translate('HeaderMenu') + '</li>';
var href = card.getAttribute('data-href') || card.href;
var href = card.getAttribute('data-href') || card.href || $('a', card).attr('href');
if (commands.indexOf('playlist') != -1) {
html += '<li data-icon="plus"><a href="#" class="btnAddToPlaylist" data-itemid="' + itemId + '">' + Globalize.translate('ButtonAddToPlaylist') + '</a></li>';

16
dashboard-ui/scripts/medialibrarypage.js
View File

@ -3,7 +3,7 @@
onPageInit: function () {
var page = this;
$('#selectCollectionType', page).on('change', function() {
$('#selectCollectionType', page).on('change', function () {
var index = this.selectedIndex;
if (index != -1) {
@ -93,11 +93,11 @@
html += '<p style="padding-left:.5em;">';
html += Globalize.translate('LabelFolderTypeValue').replace('{0}', '<b>' + typeName + '</b>');
html += '</p><ul class="mediaFolderLocations" data-inset="true" data-role="listview" data-split-icon="minus">';
html += Globalize.translate('LabelFolderTypeValue').replace('{0}', '<b>' + typeName + '</b>');
html += '</p><ul class="mediaFolderLocations" data-inset="true" data-role="listview" data-split-icon="minus">';
html += '<li data-role="list-divider" class="mediaLocationsHeader">' + Globalize.translate('HeaderMediaLocations');
html += '<button type="button" data-icon="plus" data-mini="true" data-inline="true" data-iconpos="notext" onclick="MediaLibraryPage.addMediaLocation(' + index + ');"></button>';
html += '<button type="button" data-icon="plus" data-mini="true" data-iconpos="notext" data-inline="true" onclick="MediaLibraryPage.addMediaLocation(' + index + ');">' + Globalize.translate('ButtonAdd') + '</button>';
html += '</li>';
for (var i = 0, length = virtualFolder.Locations.length; i < length; i++) {
@ -115,9 +115,9 @@
}
html += '<p>';
html += '<button type="button" data-inline="true" data-icon="minus" data-folderindex="' + index + '" onclick="MediaLibraryPage.deleteVirtualFolder(this);" data-mini="true">'+Globalize.translate('ButtonRemove')+'</button>';
html += '<button type="button" data-inline="true" data-icon="edit" data-folderindex="' + index + '" onclick="MediaLibraryPage.renameVirtualFolder(this);" data-mini="true">'+Globalize.translate('ButtonRename')+'</button>';
html += '<button type="button" data-inline="true" data-icon="edit" data-folderindex="' + index + '" onclick="MediaLibraryPage.changeCollectionType(this);" data-mini="true">'+Globalize.translate('ButtonChangeType')+'</button>';
html += '<button type="button" data-inline="true" data-icon="minus" data-folderindex="' + index + '" onclick="MediaLibraryPage.deleteVirtualFolder(this);" data-mini="true">' + Globalize.translate('ButtonRemove') + '</button>';
html += '<button type="button" data-inline="true" data-icon="edit" data-folderindex="' + index + '" onclick="MediaLibraryPage.renameVirtualFolder(this);" data-mini="true">' + Globalize.translate('ButtonRename') + '</button>';
html += '<button type="button" data-inline="true" data-icon="edit" data-folderindex="' + index + '" onclick="MediaLibraryPage.changeCollectionType(this);" data-mini="true">' + Globalize.translate('ButtonChangeType') + '</button>';
html += '</p>';
html += '</div>';
@ -281,7 +281,7 @@
var msg = Globalize.translate('MessageAreYouSureYouWishToRemoveMediaFolder');
if (locations.length) {
msg += "<br/><br/>"+Globalize.translate("MessageTheFollowingLocationWillBeRemovedFromLibrary")+"<br/><br/>";
msg += "<br/><br/>" + Globalize.translate("MessageTheFollowingLocationWillBeRemovedFromLibrary") + "<br/><br/>";
msg += locations.join("<br/>");
}

3
dashboard-ui/scripts/mediaplayer-video.js
View File

@ -1119,7 +1119,8 @@
html += '<source type="application/x-mpegURL" src="' + hlsVideoUrl + '" />';
}
var mp4BeforeWebm = self.getVideoTranscodingExtension() != '.webm';
// Live streams seem to function better with mp4
var mp4BeforeWebm = self.getVideoTranscodingExtension() != '.webm' || !mediaSource.RunTimeTicks;
if (mp4BeforeWebm) {
html += '<source type="video/mp4" src="' + mp4VideoUrl + '" />';

78
dashboard-ui/scripts/moviegenres.js
View File

@ -1,5 +1,7 @@
(function ($, document) {
var view = LibraryBrowser.getDefaultItemsView('Thumb', 'Thumb');
// The base query options
var query = {
@ -39,14 +41,41 @@
updateFilterControls(page);
html = LibraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "backdrop",
preferThumb: true,
context: 'movies',
showItemCounts: true,
centerText: true
});
if (view == "Thumb") {
html = LibraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "backdrop",
preferThumb: true,
context: 'movies',
showItemCounts: true,
centerText: true
});
$('.itemsContainer', page).removeClass('timelineItemsContainer');
}
else if (view == "ThumbCard") {
html = LibraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "backdrop",
preferThumb: true,
context: 'movies',
showItemCounts: true,
cardLayout: true,
showTitle: true
});
$('.itemsContainer', page).removeClass('timelineItemsContainer');
}
else if (view == "Poster") {
html = LibraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "portrait",
context: 'movies',
centerText: true,
showItemCounts: true,
lazy: true
});
$('.itemsContainer', page).removeClass('timelineItemsContainer');
}
html += pagingHtml;
@ -71,6 +100,7 @@
function updateFilterControls(page) {
$('#selectPageSize', page).val(query.Limit).selectmenu('refresh');
$('#selectView', page).val(view).selectmenu('refresh');
}
$(document).on('pageinit', "#movieGenresPage", function () {
@ -100,8 +130,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', "#movieGenresPage", function () {
var page = this;
query.ParentId = LibraryMenu.getTopParentId();
var limit = LibraryBrowser.getDefaultPageSize();
@ -112,9 +161,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', "#movieGenresPage", function () {

17
dashboard-ui/scripts/movies.js
View File

@ -50,13 +50,26 @@
shape: "backdrop",
preferThumb: true,
context: 'movies',
selectionPanel: true,
lazy: true,
overlayText: true,
showTitle: false
});
$('.itemsContainer', page).removeClass('timelineItemsContainer');
}
else if (view == "ThumbCard") {
html = LibraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "backdrop",
preferThumb: true,
context: 'movies',
lazy: true,
showTitle: true,
cardLayout: true,
showYear: true
});
$('.itemsContainer', page).removeClass('timelineItemsContainer');
}
else if (view == "Banner") {
html = LibraryBrowser.getPosterViewHtml({
@ -84,7 +97,6 @@
context: 'movies',
showTitle: false,
centerText: true,
selectionPanel: true,
lazy: true,
overlayText: true
});
@ -98,7 +110,6 @@
showTitle: true,
timeline: true,
centerText: true,
selectionPanel: true,
lazy: true
});
$('.itemsContainer', page).addClass('timelineItemsContainer');

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

@ -60,10 +60,23 @@
showTitle: true,
coverImage: true,
centerText: true,
lazy: true,
selectionPanel: true
lazy: true
});
}
else if (view == "PosterCard") {
html = LibraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "square",
context: 'music',
showTitle: true,
coverImage: true,
lazy: true,
cardLayout: true,
showSongCount: true
});
$('.itemsContainer', page).removeClass('timelineItemsContainer');
}
html += pagingHtml;

18
dashboard-ui/scripts/musicalbums.js
View File

@ -49,8 +49,21 @@
context: 'music',
showTitle: true,
showParentTitle: true,
lazy: true
});
$('.itemsContainer', page).removeClass('timelineItemsContainer');
}
else if (view == "PosterCard") {
html = LibraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "square",
context: 'music',
showTitle: true,
coverImage: true,
showParentTitle: true,
lazy: true,
selectionPanel: true
cardLayout: true
});
$('.itemsContainer', page).removeClass('timelineItemsContainer');
}
@ -71,8 +84,7 @@
showTitle: true,
showParentTitle: true,
timeline: true,
lazy: true,
selectionPanel: true
lazy: true
});
$('.itemsContainer', page).addClass('timelineItemsContainer');
}

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

@ -60,10 +60,23 @@
showTitle: true,
coverImage: true,
centerText: true,
lazy: true,
selectionPanel: true
lazy: true
});
}
else if (view == "PosterCard") {
html = LibraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "square",
context: 'music',
showTitle: true,
coverImage: true,
lazy: true,
cardLayout: true,
showSongCount: true
});
$('.itemsContainer', page).removeClass('timelineItemsContainer');
}
html += pagingHtml;

3
dashboard-ui/scripts/musicgenres.js
View File

@ -47,8 +47,7 @@
context: 'music',
showItemCounts: true,
centerText: true,
lazy: true,
selectionPanel: true
lazy: true
});
html += pagingHtml;

80
dashboard-ui/scripts/tvgenres.js
View File

@ -1,5 +1,7 @@
(function ($, document) {
var view = LibraryBrowser.getDefaultItemsView('Thumb', 'Thumb');
// The base query options
var query = {
@ -39,17 +41,41 @@
updateFilterControls(page);
html += LibraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "backdrop",
showTitle: false,
context: 'tv',
preferThumb: true,
showItemCounts: true,
centerText: true,
lazy: true
});
if (view == "Thumb") {
html = LibraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "backdrop",
preferThumb: true,
context: 'tv',
showItemCounts: true,
centerText: true
});
$('.itemsContainer', page).removeClass('timelineItemsContainer');
}
else if (view == "ThumbCard") {
html = LibraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "backdrop",
preferThumb: true,
context: 'tv',
showItemCounts: true,
cardLayout: true,
showTitle: true
});
$('.itemsContainer', page).removeClass('timelineItemsContainer');
}
else if (view == "Poster") {
html = LibraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "portrait",
context: 'tv',
centerText: true,
showItemCounts: true,
lazy: true
});
$('.itemsContainer', page).removeClass('timelineItemsContainer');
}
html += pagingHtml;
@ -89,6 +115,7 @@
}).checkboxradio('refresh');
$('#selectPageSize', page).val(query.Limit).selectmenu('refresh');
$('#selectView', page).val(view).selectmenu('refresh');
}
$(document).on('pageinit', "#tvGenresPage", function () {
@ -118,9 +145,28 @@
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', "#tvGenresPage", function () {
query.ParentId = LibraryMenu.getTopParentId();
var page = this;
var limit = LibraryBrowser.getDefaultPageSize();
@ -130,9 +176,17 @@
query.StartIndex = 0;
}
LibraryBrowser.loadSavedQueryValues(getSavedQueryKey(), query);
var viewkey = getSavedQueryKey();
LibraryBrowser.loadSavedQueryValues(viewkey, query);
reloadItems(this);
LibraryBrowser.getSavedViewSetting(viewkey).done(function (val) {
if (val) {
$('#selectView', page).val(val).selectmenu('refresh').trigger('change');
} else {
reloadItems(page);
}
});
}).on('pageshow', "#tvGenresPage", function () {

14
dashboard-ui/scripts/tvshows.js
View File

@ -53,6 +53,20 @@
$('.itemsContainer', page).removeClass('timelineItemsContainer');
}
else if (view == "ThumbCard") {
html = LibraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "backdrop",
preferThumb: true,
context: 'tv',
lazy: true,
cardLayout: true,
showTitle: true,
showSeriesYear: true
});
$('.itemsContainer', page).removeClass('timelineItemsContainer');
}
else if (view == "Banner") {
html = LibraryBrowser.getPosterViewHtml({

1
dashboard-ui/scripts/userprofilespage.js
View File

@ -139,7 +139,6 @@
html += '<div class="cardFooter">';
html += '<div class="cardText" style="text-align:right; float:right;">';
html += '<button class="btnUserMenu" type="button" data-inline="true" data-iconpos="notext" data-icon="ellipsis-v" style="margin: 2px 0 0;"></button>';
html += "</div>";

9
dashboard-ui/tvgenres.html
View File

@ -33,6 +33,15 @@
<div class="tabView viewTab">
<div>
<label for="selectView">${LabelView}</label>
<select id="selectView">
<option value="Poster">${OptionPoster}</option>
<option value="Thumb">${OptionThumb}</option>
<option value="ThumbCard">${OptionThumbCard}</option>
</select>
</div>
<br />
<div>
<label for="selectPageSize">${LabelPageSize}</label>
<select id="selectPageSize"></select>

5
dashboard-ui/tvshows.html
View File

@ -39,10 +39,11 @@
<div>
<label for="selectView">${LabelView}</label>
<select id="selectView">
<option value="Thumb">${OptionThumb}</option>
<option value="Poster">${OptionPoster}</option>
<option value="Banner">${OptionBanner}</option>
<option value="List">${OptionList}</option>
<option value="Poster">${OptionPoster}</option>
<option value="Thumb">${OptionThumb}</option>
<option value="ThumbCard">${OptionThumbCard}</option>
</select>
</div>
<br />