mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
rework library buttons
This commit is contained in:
Luke Pulverenti
parent
173773d5bc
commit
eac4ec9324
6 changed files with 109 additions and 184 deletions
|
|
@ -26,38 +26,51 @@
|
|||
var item = items[i];
|
||||
|
||||
var icon;
|
||||
var backgroundColor = 'rgba(82, 181, 75, 0.7)';
|
||||
|
||||
switch (item.CollectionType) {
|
||||
case "movies":
|
||||
icon = "fa-film";
|
||||
backgroundColor = 'rgba(176, 94, 81, 0.7)';
|
||||
break;
|
||||
case "music":
|
||||
icon = "fa-music";
|
||||
backgroundColor = 'rgba(217, 145, 67, 0.7)';
|
||||
break;
|
||||
case "photos":
|
||||
icon = "fa-photo";
|
||||
backgroundColor = 'rgba(127, 0, 0, 0.7)';
|
||||
break;
|
||||
case "livetv":
|
||||
icon = "fa-video-camera";
|
||||
backgroundColor = 'rgba(255, 233, 127, 0.7)';
|
||||
break;
|
||||
case "tvshows":
|
||||
icon = "fa-video-camera";
|
||||
backgroundColor = 'rgba(77, 88, 164, 0.7)';
|
||||
break;
|
||||
case "games":
|
||||
icon = "fa-gamepad";
|
||||
backgroundColor = 'rgba(183, 202, 72, 0.7)';
|
||||
break;
|
||||
case "trailers":
|
||||
icon = "fa-film";
|
||||
backgroundColor = 'rgba(176, 94, 81, 0.7)';
|
||||
break;
|
||||
case "homevideos":
|
||||
icon = "fa-video-camera";
|
||||
backgroundColor = 'rgba(110, 52, 32, 0.7)';
|
||||
break;
|
||||
case "musicvideos":
|
||||
icon = "fa-video-camera";
|
||||
backgroundColor = 'rgba(143, 54, 168, 0.7)';
|
||||
break;
|
||||
case "books":
|
||||
icon = "fa-book";
|
||||
break;
|
||||
case "channels":
|
||||
icon = "fa-globe";
|
||||
backgroundColor = 'rgba(51, 136, 204, 0.7)';
|
||||
break;
|
||||
case "playlists":
|
||||
icon = "fa-list";
|
||||
|
|
@ -67,25 +80,22 @@
|
|||
break;
|
||||
}
|
||||
|
||||
var cssClass = "posterItem";
|
||||
cssClass += ' ' + options.shape + 'PosterItem';
|
||||
var cssClass = 'card smallBackdropCard buttonCard';
|
||||
|
||||
if (item.CollectionType) {
|
||||
cssClass += ' ' + item.CollectionType + 'PosterItem';
|
||||
cssClass += ' ' + item.CollectionType + 'buttonCard';
|
||||
}
|
||||
|
||||
var href = item.url || LibraryBrowser.getHref(item, options.context);
|
||||
|
||||
html += '<a data-itemid="' + item.Id + '" class="' + cssClass + '" href="' + href + '">';
|
||||
html += '<div class="cardBox" style="background-color:' + backgroundColor + ';margin:4px;border-radius:4px;">';
|
||||
|
||||
var imageCssClass = '';
|
||||
|
||||
html += '<div class="posterItemImage ' + imageCssClass + '">';
|
||||
html += '</div>';
|
||||
|
||||
html += "<div class='posterItemDefaultText posterItemText'>";
|
||||
html += "<div class='cardText' style='padding:5px 10px;color:#fff;'>";
|
||||
html += '<i class="fa ' + icon + '"></i>';
|
||||
html += '<span>' + item.Name + '</span>';
|
||||
html += '<span style="margin-left:.7em;">' + item.Name + '</span>';
|
||||
html += "</div>";
|
||||
|
||||
html += "</div>";
|
||||
|
||||
html += "</a>";
|
||||
|
|
@ -106,7 +116,6 @@
|
|||
html += '<div>';
|
||||
html += createMediaLinks({
|
||||
items: items,
|
||||
shape: 'myLibrary',
|
||||
showTitle: true,
|
||||
centerText: true
|
||||
|
||||
|
|
|
|||
|
|
@ -949,42 +949,61 @@
|
|||
|
||||
var screenWidth = $(window).width();
|
||||
|
||||
if (!AppInfo.isTouchPreferred) {
|
||||
screenWidth = window.screen.availWidth;
|
||||
}
|
||||
|
||||
return screenWidth;
|
||||
},
|
||||
|
||||
getPostersPerRow: function () {
|
||||
|
||||
var screenWidth = LibraryBrowser.screenWidth();
|
||||
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();
|
||||
|
||||
div = $('<div class="card backdropCard">><div class="cardBox"><div class="cardImage"></div></div></div>').appendTo(document.body);
|
||||
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();
|
||||
|
||||
div = $('<div class="card portraitCard">><div class="cardBox"><div class="cardImage"></div></div></div>').appendTo(document.body);
|
||||
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();
|
||||
|
||||
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();
|
||||
|
||||
return {
|
||||
thumb: thumb,
|
||||
poster: poster,
|
||||
square: square
|
||||
square: square,
|
||||
banner: banner
|
||||
};
|
||||
},
|
||||
|
||||
getPosterViewSizes: function () {
|
||||
posterSizes: [],
|
||||
|
||||
var imagesPerRow = LibraryBrowser.getPostersPerRow();
|
||||
getPosterViewInfo: function () {
|
||||
|
||||
var screenWidth = LibraryBrowser.screenWidth();
|
||||
|
||||
var cachedResults = LibraryBrowser.posterSizes;
|
||||
|
||||
for (var i = 0, length = cachedResults.length; i < length; i++) {
|
||||
|
||||
if (cachedResults[i].screenWidth == screenWidth) {
|
||||
return cachedResults[i];
|
||||
}
|
||||
}
|
||||
|
||||
var result = LibraryBrowser.getPosterViewInfoInternal(screenWidth);
|
||||
|
||||
cachedResults.push(result);
|
||||
|
||||
return result;
|
||||
},
|
||||
|
||||
getPosterViewInfoInternal: function (screenWidth) {
|
||||
|
||||
var imagesPerRow = LibraryBrowser.getPostersPerRow(screenWidth);
|
||||
|
||||
if (AppInfo.hasLowImageBandwidth) {
|
||||
screenWidth *= .95;
|
||||
} else {
|
||||
|
|
@ -994,11 +1013,28 @@
|
|||
var thumbWidth = screenWidth / imagesPerRow.thumb;
|
||||
var posterWidth = screenWidth / imagesPerRow.poster;
|
||||
var squareSize = screenWidth / imagesPerRow.square;
|
||||
var bannerWidth = screenWidth / imagesPerRow.banner;
|
||||
|
||||
if (!AppInfo.isTouchPreferred) {
|
||||
|
||||
var roundTo = 100;
|
||||
|
||||
thumbWidth = Math.round(thumbWidth / roundTo) * roundTo;
|
||||
posterWidth = Math.round(posterWidth / roundTo) * roundTo;
|
||||
squareSize = Math.round(squareSize / roundTo) * roundTo;
|
||||
bannerWidth = Math.round(bannerWidth / roundTo) * roundTo;
|
||||
}
|
||||
|
||||
var defaultPortait = 'portrait';
|
||||
var defaultThumb = 'backdrop';
|
||||
var defaultSquare = 'square';
|
||||
|
||||
return {
|
||||
thumbWidth: parseInt(thumbWidth),
|
||||
posterWidth: parseInt(posterWidth),
|
||||
squareSize: parseInt(squareSize)
|
||||
thumbWidth: Math.round(thumbWidth),
|
||||
posterWidth: Math.round(posterWidth),
|
||||
squareSize: Math.round(squareSize),
|
||||
bannerWidth: Math.round(bannerWidth),
|
||||
screenWidth: screenWidth
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -1035,11 +1071,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
var sizes = LibraryBrowser.getPosterViewSizes();
|
||||
var sizes = LibraryBrowser.getPosterViewInfo();
|
||||
|
||||
var thumbWidth = sizes.thumbWidth;
|
||||
var posterWidth = sizes.posterWidth;
|
||||
var squareSize = sizes.squareSize;
|
||||
var bannerWidth = sizes.bannerWidth;
|
||||
|
||||
for (var i = 0, length = items.length; i < length; i++) {
|
||||
|
||||
|
|
@ -1153,7 +1190,7 @@
|
|||
|
||||
imgUrl = ApiClient.getScaledImageUrl(item.Id, {
|
||||
type: "Banner",
|
||||
maxWidth: 700,
|
||||
maxWidth: bannerWidth,
|
||||
tag: item.ImageTags.Banner,
|
||||
enableImageEnhancers: enableImageEnhancers
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1404,13 +1404,32 @@ var Dashboard = {
|
|||
}
|
||||
|
||||
var appVersion = window.dashboardVersion;
|
||||
var appName = Dashboard.isConnectMode() ?
|
||||
"Emby Mobile" :
|
||||
"Emby Web Client";
|
||||
var appName = "Emby Web Client";
|
||||
|
||||
var deviceName;
|
||||
var deviceId;
|
||||
|
||||
if (Dashboard.isRunningInCordova()) {
|
||||
|
||||
if ($.browser.safari) {
|
||||
|
||||
appName = "iOS";
|
||||
|
||||
if ($.browser.iphone) {
|
||||
deviceName = 'iPhone';
|
||||
} else if ($.browser.ipad) {
|
||||
deviceName = 'iPad';
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
appName = "Android";
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
deviceName = deviceName || generateDeviceName();
|
||||
|
||||
// Cordova
|
||||
//if (window.device) {
|
||||
|
||||
|
|
@ -1420,9 +1439,6 @@ var Dashboard = {
|
|||
//}
|
||||
//else
|
||||
{
|
||||
|
||||
deviceName = generateDeviceName();
|
||||
|
||||
var seed = [];
|
||||
var keyName = 'randomId';
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue