mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
adjust mobile image sizes
This commit is contained in:
Luke Pulverenti
parent
eac4ec9324
commit
6a2085d68b
6 changed files with 142 additions and 51 deletions
|
|
@ -14,12 +14,10 @@
|
|||
return deferred.promise();
|
||||
}
|
||||
|
||||
function createMediaLinks(options) {
|
||||
function getLibraryButtonsHtml(items) {
|
||||
|
||||
var html = "";
|
||||
|
||||
var items = options.items;
|
||||
|
||||
// "My Library" backgrounds
|
||||
for (var i = 0, length = items.length; i < length; i++) {
|
||||
|
||||
|
|
@ -86,12 +84,12 @@
|
|||
cssClass += ' ' + item.CollectionType + 'buttonCard';
|
||||
}
|
||||
|
||||
var href = item.url || LibraryBrowser.getHref(item, options.context);
|
||||
var href = item.url || LibraryBrowser.getHref(item);
|
||||
|
||||
html += '<a data-itemid="' + item.Id + '" class="' + cssClass + '" href="' + href + '">';
|
||||
html += '<div class="cardBox" style="background-color:' + backgroundColor + ';margin:4px;border-radius:4px;">';
|
||||
|
||||
html += "<div class='cardText' style='padding:5px 10px;color:#fff;'>";
|
||||
html += "<div class='cardText' style='padding:6px 10px;color:#fff;'>";
|
||||
html += '<i class="fa ' + icon + '"></i>';
|
||||
html += '<span style="margin-left:.7em;">' + item.Name + '</span>';
|
||||
html += "</div>";
|
||||
|
|
@ -114,12 +112,7 @@
|
|||
html += '<h1 class="listHeader">' + Globalize.translate('HeaderMyMedia') + '</h1>';
|
||||
}
|
||||
html += '<div>';
|
||||
html += createMediaLinks({
|
||||
items: items,
|
||||
showTitle: true,
|
||||
centerText: true
|
||||
|
||||
});
|
||||
html += getLibraryButtonsHtml(items);
|
||||
html += '</div>';
|
||||
|
||||
$(elem).html(html);
|
||||
|
|
@ -206,16 +199,16 @@
|
|||
|
||||
function loadLibraryTiles(elem, user, shape, index, autoHideOnMobile, showTitles) {
|
||||
|
||||
if (autoHideOnMobile) {
|
||||
$(elem).addClass('hiddenSectionOnMobile');
|
||||
} else {
|
||||
$(elem).removeClass('hiddenSectionOnMobile');
|
||||
}
|
||||
|
||||
return getUserViews(user.Id).done(function (items) {
|
||||
|
||||
var html = '';
|
||||
|
||||
if (autoHideOnMobile) {
|
||||
html += '<div class="hiddenSectionOnMobile">';
|
||||
} else {
|
||||
html += '<div>';
|
||||
}
|
||||
|
||||
if (items.length) {
|
||||
|
||||
var cssClass = index !== 0 ? 'listHeader' : 'listHeader firstListHeader';
|
||||
|
|
@ -241,6 +234,13 @@
|
|||
html += '</div>';
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
|
||||
if (autoHideOnMobile) {
|
||||
html += '<div class="hiddenSectionOnNonMobile" style="margin-top:1em;">';
|
||||
html += getLibraryButtonsHtml(items);
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
$(elem).html(html).lazyChildren().createCardMenus();
|
||||
|
||||
|
|
|
|||
|
|
@ -1177,7 +1177,7 @@
|
|||
|
||||
var chapters = item.Chapters || [];
|
||||
|
||||
var maxWwidth = LibraryBrowser.getPosterViewSizes().thumbWidth;
|
||||
var maxWwidth = LibraryBrowser.getPosterViewInfo().thumbWidth;
|
||||
|
||||
for (var i = 0, length = chapters.length; i < length; i++) {
|
||||
|
||||
|
|
@ -1399,7 +1399,7 @@
|
|||
|
||||
var html = '';
|
||||
|
||||
var maxWwidth = LibraryBrowser.getPosterViewSizes().thumbWidth;
|
||||
var maxWwidth = LibraryBrowser.getPosterViewInfo().thumbWidth;
|
||||
|
||||
for (var i = 0, length = items.length; i < length; i++) {
|
||||
|
||||
|
|
|
|||
|
|
@ -946,7 +946,7 @@
|
|||
},
|
||||
|
||||
screenWidth: function () {
|
||||
|
||||
|
||||
var screenWidth = $(window).width();
|
||||
|
||||
return screenWidth;
|
||||
|
|
@ -954,28 +954,25 @@
|
|||
|
||||
getPostersPerRow: function (screenWidth) {
|
||||
|
||||
var div = $('<div class="card squareCard"><div class="cardBox"><div class="cardImage"></div></div></div>').appendTo(document.body);
|
||||
var square = screenWidth / $('.cardImage', div).innerWidth();
|
||||
div.remove();
|
||||
function getValue(shape) {
|
||||
|
||||
div = $('<div class="card backdropCard"><div class="cardBox"><div class="cardImage"></div></div></div>').appendTo(document.body);
|
||||
var thumb = screenWidth / $('.cardImage', div).innerWidth();
|
||||
div.remove();
|
||||
var div = $('<div class="card ' + shape + 'Card"><div class="cardBox"><div class="cardImage"></div></div></div>').appendTo(document.body);
|
||||
var width = screenWidth / $('.cardImage', div).innerWidth();
|
||||
div.remove();
|
||||
return width;
|
||||
}
|
||||
|
||||
div = $('<div class="card portraitCard"><div class="cardBox"><div class="cardImage"></div></div></div>').appendTo(document.body);
|
||||
var poster = screenWidth / $('.cardImage', div).innerWidth();
|
||||
div.remove();
|
||||
var info = {};
|
||||
|
||||
div = $('<div class="card bannerCard"><div class="cardBox"><div class="cardImage"></div></div></div>').appendTo(document.body);
|
||||
var banner = screenWidth / $('.cardImage', div).innerWidth();
|
||||
div.remove();
|
||||
info.square = getValue('square');
|
||||
info.smallSquare = getValue('smallSquare');
|
||||
info.thumb = getValue('backdrop');
|
||||
info.portrait = getValue('portrait');
|
||||
info.smallPortrait = getValue('smallPortrait');
|
||||
info.banner = getValue('banner');
|
||||
info.smallThumb = getValue('smallBackdrop');
|
||||
|
||||
return {
|
||||
thumb: thumb,
|
||||
poster: poster,
|
||||
square: square,
|
||||
banner: banner
|
||||
};
|
||||
return info;
|
||||
},
|
||||
|
||||
posterSizes: [],
|
||||
|
|
@ -987,7 +984,7 @@
|
|||
var cachedResults = LibraryBrowser.posterSizes;
|
||||
|
||||
for (var i = 0, length = cachedResults.length; i < length; i++) {
|
||||
|
||||
|
||||
if (cachedResults[i].screenWidth == screenWidth) {
|
||||
return cachedResults[i];
|
||||
}
|
||||
|
|
@ -1011,8 +1008,11 @@
|
|||
}
|
||||
|
||||
var thumbWidth = screenWidth / imagesPerRow.thumb;
|
||||
var posterWidth = screenWidth / imagesPerRow.poster;
|
||||
var smallThumbWidth = screenWidth / imagesPerRow.smallThumb;
|
||||
var posterWidth = screenWidth / imagesPerRow.portrait;
|
||||
var smallPosterWidth = screenWidth / imagesPerRow.smallPortrait;
|
||||
var squareSize = screenWidth / imagesPerRow.square;
|
||||
var smallSquareSize = screenWidth / imagesPerRow.smallSquare;
|
||||
var bannerWidth = screenWidth / imagesPerRow.banner;
|
||||
|
||||
if (!AppInfo.isTouchPreferred) {
|
||||
|
|
@ -1020,7 +1020,9 @@
|
|||
var roundTo = 100;
|
||||
|
||||
thumbWidth = Math.round(thumbWidth / roundTo) * roundTo;
|
||||
smallThumbWidth = Math.round(smallThumbWidth / roundTo) * roundTo;
|
||||
posterWidth = Math.round(posterWidth / roundTo) * roundTo;
|
||||
smallPosterWidth = Math.round(smallPosterWidth / roundTo) * roundTo;
|
||||
squareSize = Math.round(squareSize / roundTo) * roundTo;
|
||||
bannerWidth = Math.round(bannerWidth / roundTo) * roundTo;
|
||||
}
|
||||
|
|
@ -1029,10 +1031,26 @@
|
|||
var defaultThumb = 'backdrop';
|
||||
var defaultSquare = 'square';
|
||||
|
||||
if (AppInfo.hasLowImageBandwidth) {
|
||||
defaultThumb = 'smallBackdrop';
|
||||
defaultSquare = 'smallSquare';
|
||||
defaultPortait = 'smallPortrait';
|
||||
}
|
||||
|
||||
return {
|
||||
|
||||
defaultThumb: defaultThumb,
|
||||
smallThumbWidth: Math.round(smallThumbWidth),
|
||||
thumbWidth: Math.round(thumbWidth),
|
||||
|
||||
defaultPortait: defaultPortait,
|
||||
posterWidth: Math.round(posterWidth),
|
||||
smallPosterWidth: Math.round(smallPosterWidth),
|
||||
|
||||
defaultSquare: defaultSquare,
|
||||
squareSize: Math.round(squareSize),
|
||||
smallSquareSize: Math.round(smallSquareSize),
|
||||
|
||||
bannerWidth: Math.round(bannerWidth),
|
||||
screenWidth: screenWidth
|
||||
};
|
||||
|
|
@ -1071,12 +1089,27 @@
|
|||
}
|
||||
}
|
||||
|
||||
var sizes = LibraryBrowser.getPosterViewInfo();
|
||||
var posterInfo = LibraryBrowser.getPosterViewInfo();
|
||||
|
||||
var thumbWidth = sizes.thumbWidth;
|
||||
var posterWidth = sizes.posterWidth;
|
||||
var squareSize = sizes.squareSize;
|
||||
var bannerWidth = sizes.bannerWidth;
|
||||
var thumbWidth = posterInfo.thumbWidth;
|
||||
var posterWidth = posterInfo.posterWidth;
|
||||
var squareSize = posterInfo.squareSize;
|
||||
var bannerWidth = posterInfo.bannerWidth;
|
||||
|
||||
if (options.shape == 'backdrop' && posterInfo.defaultThumb == 'smallBackdrop') {
|
||||
options.shape = 'smallBackdrop';
|
||||
thumbWidth = posterInfo.smallThumbWidth;
|
||||
}
|
||||
|
||||
else if (options.shape == 'portrait' && posterInfo.defaultPortait == 'smallPortrait') {
|
||||
options.shape = 'smallPortrait';
|
||||
posterWidth = posterInfo.smallPosterWidth;
|
||||
}
|
||||
|
||||
else if (options.shape == 'square' && posterInfo.defaultSquare == 'smallSquare') {
|
||||
options.shape = 'smallSquare';
|
||||
squareSize = posterInfo.smallSquareSize;
|
||||
}
|
||||
|
||||
for (var i = 0, length = items.length; i < length; i++) {
|
||||
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@
|
|||
|
||||
// TODO: With iOS 8 this might not be required anymore
|
||||
if ($.browser.safari) {
|
||||
$('.itemVideo').css('visibility', 'hidden');
|
||||
//$('.itemVideo').css('visibility', 'hidden');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue