mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update image magick sharp
This commit is contained in:
parent
88698139ff
commit
35bc1c89ac
12 changed files with 308 additions and 28 deletions
|
@ -524,3 +524,37 @@
|
|||
width: 12.5%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/** horizontalBackdropCard */
|
||||
.horizontalBackdropCard .cardPadder {
|
||||
padding-bottom: 56.25%;
|
||||
}
|
||||
|
||||
|
||||
.horizontalBackdropCard {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
@media all and (min-width: 500px) {
|
||||
|
||||
.horizontalBackdropCard {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 800px) {
|
||||
|
||||
.horizontalBackdropCard {
|
||||
width: 31%;
|
||||
}
|
||||
}
|
||||
|
||||
.horizontalBackdropCard .cardImage {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.horizontalBackdropCard .cardBox {
|
||||
margin: 2px !important;
|
||||
}
|
||||
|
|
BIN
dashboard-ui/css/images/kids/bg.jpg
Normal file
BIN
dashboard-ui/css/images/kids/bg.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 262 KiB |
|
@ -268,6 +268,7 @@ h1 .imageLink {
|
|||
border: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.imageButton:hover {
|
||||
|
|
|
@ -8,8 +8,7 @@
|
|||
<div data-role="content editPageContent">
|
||||
<div class="editPageSidebar">
|
||||
<div class="libraryTree">
|
||||
<ul>
|
||||
</ul>
|
||||
<ul></ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -82,6 +81,7 @@
|
|||
<option value="Box">${OptionBox}</option>
|
||||
<option value="BoxRear">${OptionBoxRear}</option>
|
||||
<option value="Disc">${OptionDisc}</option>
|
||||
<option value="Icon">${OptionIcon}</option>
|
||||
<option value="Logo">${OptionLogo}</option>
|
||||
<option value="Menu">${OptionMenu}</option>
|
||||
<option value="Screenshot">${OptionScreenshot}</option>
|
||||
|
@ -125,6 +125,7 @@
|
|||
<option value="Box">${OptionBox}</option>
|
||||
<option value="BoxRear">${OptionBoxRear}</option>
|
||||
<option value="Disc">${OptionDisc}</option>
|
||||
<option value="Icon">${OptionIcon}</option>
|
||||
<option value="Logo">${OptionLogo}</option>
|
||||
<option value="Menu">${OptionMenu}</option>
|
||||
<option value="Screenshot">${OptionScreenshot}</option>
|
||||
|
|
85
dashboard-ui/kids.html
Normal file
85
dashboard-ui/kids.html
Normal file
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>${TitleMediaBrowser}</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="backdropContainer kidsBackdropContainer" style="top:0;"></div>
|
||||
<div id="kidsPage" data-role="page" class="page standalonePage noHeaderPage backdropPage staticBackdropPage" style="background-color: rgba(255,255,255,.6)!important;">
|
||||
|
||||
<div data-role="content" style="padding-left: 0;padding-right:0;">
|
||||
<div class="kidsWelcome" style="position:absolute;width:100%;">
|
||||
<div class="btn btnActionAccent" style="z-index:100;max-width:600px;width:80%;text-align:center;margin:0 auto;">
|
||||
<div style="padding-top:.25em;">${HeaderAdultsReadHere}</div>
|
||||
|
||||
<div style="padding: 1em 0; font-weight:normal;">
|
||||
<div>${KidsModeAdultInstruction}</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<a data-mini="true" data-role="button" href="#" data-icon="lock" class="lnkPinCode" data-ajax="false" target="_blank">${ButtonConfigurePinCode}</a>
|
||||
</p>
|
||||
<button type="button" data-mini="true" data-icon="check" data-inline="true" class="btnDismissWelcome">${ButtonOk}</button>
|
||||
<a data-mini="true" data-role="button" href="index.html" data-icon="delete" data-inline="true">${ButtonExit}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kidsOptionsLogin" style="position:absolute;width:100%;display:none;">
|
||||
<div class="btn" style="z-index:100;max-width:600px;width:80%;text-align:center;margin:0 auto;">
|
||||
<div style="padding-top:.25em;">${HeaderGrownupsOnly}</div>
|
||||
|
||||
<form style="font-weight:normal;" class="kidPinForm">
|
||||
<p>${HeaderToAccessPleaseEnterEasyPinCode}</p>
|
||||
<div style="text-align:left;">
|
||||
<div>
|
||||
<label for="txtPinCode">${LabelPinCode}</label>
|
||||
<input id="txtPinCode" type="password" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<button type="submit" data-mini="true" data-icon="check">${ButtonSignIn}</button>
|
||||
<button type="button" data-mini="true" data-icon="delete" class="btnCancelPin">${ButtonCancel}</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kidsOptions" style="position:absolute;width:100%;display:none;">
|
||||
<div class="btn" style="z-index:100;max-width:600px;width:80%;text-align:center;margin:0 auto;">
|
||||
<form class="kidsOptionsForm">
|
||||
<div style="padding-top:.25em;">${HeaderGrownupsOnly}</div>
|
||||
|
||||
<br />
|
||||
<div style="text-align:left;">
|
||||
<div data-role="controlgroup">
|
||||
<label for="chkEnableBackgroundMusic">${LabelEnableBackgroundMusic}</label>
|
||||
<input type="checkbox" id="chkEnableBackgroundMusic" />
|
||||
<label for="chkEnableSoundEffects">${LabelEnableSoundEffects}</label>
|
||||
<input type="checkbox" id="chkEnableSoundEffects" />
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" data-mini="true" data-icon="check">${ButtonSave}</button>
|
||||
</form>
|
||||
<p>${DividerOr}</p>
|
||||
<a data-mini="true" data-role="button" href="index.html" data-icon="delete">${ButtonExit}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="kidContent">
|
||||
|
||||
<div style="text-align:center;padding:1em 0 2em;">
|
||||
<div style="font-size:40px;">Icons</div>
|
||||
</div>
|
||||
<div class="itemsContainer" style="white-space:nowrap;overflow-y:hidden;overflow-x:auto;"></div>
|
||||
</div>
|
||||
|
||||
<button type="button" data-role="none" class="imageButton btnOptions" style="font-size:32px;color: rgba(0,0,0,.4); position: fixed; bottom: 0;right: 15px;z-index:101;">
|
||||
<i class="fa fa-lock"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$('.kidPinForm').off('submit', KidsPage.onPinSubmit).on('submit', KidsPage.onPinSubmit);
|
||||
$('.kidsOptionsForm').off('submit', KidsPage.onOptionsSubmit).on('submit', KidsPage.onOptionsSubmit);
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
125
dashboard-ui/scripts/kids.js
Normal file
125
dashboard-ui/scripts/kids.js
Normal file
|
@ -0,0 +1,125 @@
|
|||
(function ($, document, window) {
|
||||
|
||||
function showSignIn(page) {
|
||||
|
||||
$('.kidsOptionsLogin', page).fadeIn();
|
||||
|
||||
$('#txtPinCode', page).val('');
|
||||
$('.btnOptions', page).hide();
|
||||
$('.kidContent', page).hide();
|
||||
}
|
||||
|
||||
function validatePin(page) {
|
||||
|
||||
}
|
||||
|
||||
function loadContent(page) {
|
||||
|
||||
var options = {
|
||||
|
||||
SortBy: "Random",
|
||||
SortOrder: "Descending",
|
||||
MediaTypes: "Video",
|
||||
Limit: 100,
|
||||
Recursive: true,
|
||||
Fields: "PrimaryImageAspectRatio",
|
||||
ExcludeLocationTypes: "Virtual",
|
||||
ImageTypeLimit: 1,
|
||||
EnableImageTypes: "Primary,Backdrop,Thumb"
|
||||
};
|
||||
|
||||
ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
|
||||
|
||||
$('.itemsContainer', page).html(LibraryBrowser.getPosterViewHtml({
|
||||
|
||||
items: result.Items,
|
||||
shape: "horizontalBackdrop",
|
||||
preferThumb: true,
|
||||
overlayText: true,
|
||||
lazy: true,
|
||||
defaultAction: 'play',
|
||||
coverImage: true,
|
||||
enableImageEnhancers: false
|
||||
|
||||
})).lazyChildren();
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
$(document).on('pageshow', "#kidsPage", function () {
|
||||
|
||||
var page = this;
|
||||
|
||||
var userId = Dashboard.getCurrentUserId();
|
||||
|
||||
$('.kidContent', page).hide();
|
||||
|
||||
$('.kidsWelcome', page).show();
|
||||
$('.lnkPinCode', page).attr('href', 'myprofile.html?userId=' + userId);
|
||||
$('.btnOptions', page).buttonEnabled(false);
|
||||
$('.kidsOptionsLogin', page).hide();
|
||||
$('.kidsOptions', page).hide();
|
||||
|
||||
$('.kidsBackdropContainer').css('background-image', 'url(css/images/kids/bg.jpg)');
|
||||
|
||||
}).on('pageinit', "#kidsPage", function () {
|
||||
|
||||
var page = this;
|
||||
|
||||
$('.btnDismissWelcome', page).on('click', function () {
|
||||
|
||||
$('.kidsWelcome', page).fadeOut();
|
||||
$('.btnOptions', page).buttonEnabled(true);
|
||||
$('.kidContent', page).show();
|
||||
loadContent(page);
|
||||
|
||||
});
|
||||
|
||||
$('.btnOptions', page).on('click', function () {
|
||||
|
||||
showSignIn(page);
|
||||
});
|
||||
|
||||
$('.btnCancelPin', page).on('click', function () {
|
||||
|
||||
$('.kidsOptionsLogin', page).fadeOut();
|
||||
$('.btnOptions', page).show();
|
||||
$('.kidContent', page).show();
|
||||
});
|
||||
});
|
||||
|
||||
window.KidsPage = {
|
||||
|
||||
onPinSubmit: function () {
|
||||
|
||||
var page = $(this).parents('.page');
|
||||
|
||||
if (validatePin(page)) {
|
||||
|
||||
$('.kidsOptionsLogin', page).hide();
|
||||
$('.kidsOptions', page).fadeIn();
|
||||
|
||||
} else {
|
||||
Dashboard.alert({
|
||||
message: 'Invalid pin code entered. Please try again.',
|
||||
title: 'Input Error'
|
||||
});
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
|
||||
onOptionsSubmit: function () {
|
||||
|
||||
var page = $(this).parents('.page');
|
||||
|
||||
$('.kidsOptions', page).fadeOut();
|
||||
$('.btnOptions', page).show();
|
||||
$('.kidContent', page).show();
|
||||
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
})(jQuery, document, window);
|
|
@ -710,7 +710,13 @@
|
|||
var href = LibraryBrowser.getHref(item, options.context);
|
||||
html += '<li class="' + cssClass + '"' + dataAttributes + ' data-itemid="' + item.Id + '" data-playlistitemid="' + (item.PlaylistItemId || '') + '" data-href="' + href + '">';
|
||||
|
||||
var defaultActionAttribute = options.defaultAction ? (' data-action="' + options.defaultAction + '" class="itemWithAction"') : '';
|
||||
var defaultAction = options.defaultAction;
|
||||
if (defaultAction == 'play' || defaultAction == 'playallfromhere') {
|
||||
if (item.PlayAccess != 'Full') {
|
||||
defaultAction = null;
|
||||
}
|
||||
}
|
||||
var defaultActionAttribute = defaultAction ? (' data-action="' + defaultAction + '" class="itemWithAction"') : '';
|
||||
html += '<a' + defaultActionAttribute + ' href="' + href + '">';
|
||||
|
||||
var imgUrl;
|
||||
|
@ -1014,6 +1020,7 @@
|
|||
var forceName = false;
|
||||
|
||||
var downloadHeight = 576;
|
||||
var enableImageEnhancers = options.enableImageEnhancers !== false;
|
||||
|
||||
if (options.autoThumb && item.ImageTags && item.ImageTags.Primary && item.PrimaryImageAspectRatio && item.PrimaryImageAspectRatio >= 1.5) {
|
||||
|
||||
|
@ -1024,7 +1031,8 @@
|
|||
type: "Primary",
|
||||
height: height,
|
||||
width: width,
|
||||
tag: item.ImageTags.Primary
|
||||
tag: item.ImageTags.Primary,
|
||||
enableImageEnhancers: enableImageEnhancers
|
||||
});
|
||||
|
||||
} else if (options.autoThumb && item.ImageTags && item.ImageTags.Thumb) {
|
||||
|
@ -1032,7 +1040,8 @@
|
|||
imgUrl = ApiClient.getScaledImageUrl(item.Id, {
|
||||
type: "Thumb",
|
||||
maxWidth: downloadHeight,
|
||||
tag: item.ImageTags.Thumb
|
||||
tag: item.ImageTags.Thumb,
|
||||
enableImageEnhancers: enableImageEnhancers
|
||||
});
|
||||
|
||||
} else if (options.preferBackdrop && item.BackdropImageTags && item.BackdropImageTags.length) {
|
||||
|
@ -1040,7 +1049,8 @@
|
|||
imgUrl = ApiClient.getScaledImageUrl(item.Id, {
|
||||
type: "Backdrop",
|
||||
maxWidth: downloadHeight,
|
||||
tag: item.BackdropImageTags[0]
|
||||
tag: item.BackdropImageTags[0],
|
||||
enableImageEnhancers: enableImageEnhancers
|
||||
});
|
||||
|
||||
} else if (options.preferThumb && item.ImageTags && item.ImageTags.Thumb) {
|
||||
|
@ -1048,7 +1058,8 @@
|
|||
imgUrl = ApiClient.getScaledImageUrl(item.Id, {
|
||||
type: "Thumb",
|
||||
maxWidth: downloadHeight,
|
||||
tag: item.ImageTags.Thumb
|
||||
tag: item.ImageTags.Thumb,
|
||||
enableImageEnhancers: enableImageEnhancers
|
||||
});
|
||||
|
||||
} else if (options.preferBanner && item.ImageTags && item.ImageTags.Banner) {
|
||||
|
@ -1056,7 +1067,8 @@
|
|||
imgUrl = ApiClient.getScaledImageUrl(item.Id, {
|
||||
type: "Banner",
|
||||
maxWidth: 700,
|
||||
tag: item.ImageTags.Banner
|
||||
tag: item.ImageTags.Banner,
|
||||
enableImageEnhancers: enableImageEnhancers
|
||||
});
|
||||
|
||||
} else if (options.preferThumb && item.SeriesThumbImageTag && options.inheritThumb !== false) {
|
||||
|
@ -1064,14 +1076,16 @@
|
|||
imgUrl = ApiClient.getScaledImageUrl(item.SeriesId, {
|
||||
type: "Thumb",
|
||||
maxWidth: downloadHeight,
|
||||
tag: item.SeriesThumbImageTag
|
||||
tag: item.SeriesThumbImageTag,
|
||||
enableImageEnhancers: enableImageEnhancers
|
||||
});
|
||||
|
||||
} else if (options.preferThumb && item.ParentThumbItemId && options.inheritThumb !== false) {
|
||||
|
||||
imgUrl = ApiClient.getThumbImageUrl(item.ParentThumbItemId, {
|
||||
type: "Thumb",
|
||||
maxWidth: downloadHeight
|
||||
maxWidth: downloadHeight,
|
||||
enableImageEnhancers: enableImageEnhancers
|
||||
});
|
||||
|
||||
} else if (options.preferThumb && item.BackdropImageTags && item.BackdropImageTags.length) {
|
||||
|
@ -1079,7 +1093,8 @@
|
|||
imgUrl = ApiClient.getScaledImageUrl(item.Id, {
|
||||
type: "Backdrop",
|
||||
maxWidth: downloadHeight,
|
||||
tag: item.BackdropImageTags[0]
|
||||
tag: item.BackdropImageTags[0],
|
||||
enableImageEnhancers: enableImageEnhancers
|
||||
});
|
||||
|
||||
forceName = true;
|
||||
|
@ -1093,7 +1108,8 @@
|
|||
type: "Primary",
|
||||
height: height,
|
||||
width: width,
|
||||
tag: item.ImageTags.Primary
|
||||
tag: item.ImageTags.Primary,
|
||||
enableImageEnhancers: enableImageEnhancers
|
||||
});
|
||||
|
||||
}
|
||||
|
@ -1104,7 +1120,8 @@
|
|||
imgUrl = ApiClient.getImageUrl(item.ParentPrimaryImageItemId, {
|
||||
type: "Primary",
|
||||
height: height,
|
||||
tag: item.ParentPrimaryImageTag
|
||||
tag: item.ParentPrimaryImageTag,
|
||||
enableImageEnhancers: enableImageEnhancers
|
||||
});
|
||||
}
|
||||
else if (item.AlbumId && item.AlbumPrimaryImageTag) {
|
||||
|
@ -1116,7 +1133,8 @@
|
|||
type: "Primary",
|
||||
height: height,
|
||||
width: width,
|
||||
tag: item.AlbumPrimaryImageTag
|
||||
tag: item.AlbumPrimaryImageTag,
|
||||
enableImageEnhancers: enableImageEnhancers
|
||||
});
|
||||
|
||||
}
|
||||
|
@ -1125,7 +1143,8 @@
|
|||
imgUrl = ApiClient.getScaledImageUrl(item.Id, {
|
||||
type: "Thumb",
|
||||
maxWidth: downloadHeight,
|
||||
tag: item.ImageTags.Thumb
|
||||
tag: item.ImageTags.Thumb,
|
||||
enableImageEnhancers: enableImageEnhancers
|
||||
});
|
||||
|
||||
}
|
||||
|
@ -1134,7 +1153,8 @@
|
|||
imgUrl = ApiClient.getScaledImageUrl(item.Id, {
|
||||
type: "Backdrop",
|
||||
maxWidth: downloadHeight,
|
||||
tag: item.BackdropImageTags[0]
|
||||
tag: item.BackdropImageTags[0],
|
||||
enableImageEnhancers: enableImageEnhancers
|
||||
});
|
||||
|
||||
} else if (item.ImageTags && item.ImageTags.Thumb) {
|
||||
|
@ -1142,7 +1162,8 @@
|
|||
imgUrl = ApiClient.getScaledImageUrl(item.Id, {
|
||||
type: "Thumb",
|
||||
maxWidth: downloadHeight,
|
||||
tag: item.ImageTags.Thumb
|
||||
tag: item.ImageTags.Thumb,
|
||||
enableImageEnhancers: enableImageEnhancers
|
||||
});
|
||||
|
||||
} else if (item.SeriesThumbImageTag) {
|
||||
|
@ -1150,14 +1171,16 @@
|
|||
imgUrl = ApiClient.getScaledImageUrl(item.SeriesId, {
|
||||
type: "Thumb",
|
||||
maxWidth: downloadHeight,
|
||||
tag: item.SeriesThumbImageTag
|
||||
tag: item.SeriesThumbImageTag,
|
||||
enableImageEnhancers: enableImageEnhancers
|
||||
});
|
||||
|
||||
} else if (item.ParentThumbItemId) {
|
||||
|
||||
imgUrl = ApiClient.getThumbImageUrl(item, {
|
||||
type: "Thumb",
|
||||
maxWidth: downloadHeight
|
||||
maxWidth: downloadHeight,
|
||||
enableImageEnhancers: enableImageEnhancers
|
||||
});
|
||||
|
||||
} else if (item.MediaType == "Audio" || item.Type == "MusicAlbum" || item.Type == "MusicArtist") {
|
||||
|
@ -1223,7 +1246,13 @@
|
|||
|
||||
var dataAttributes = LibraryBrowser.getItemDataAttributes(item, options, i);
|
||||
|
||||
var defaultActionAttribute = options.defaultAction ? (' data-action="' + options.defaultAction + '"') : '';
|
||||
var defaultAction = options.defaultAction;
|
||||
if (defaultAction == 'play' || defaultAction == 'playallfromhere') {
|
||||
if (item.PlayAccess != 'Full') {
|
||||
defaultAction = null;
|
||||
}
|
||||
}
|
||||
var defaultActionAttribute = defaultAction ? (' data-action="' + defaultAction + '"') : '';
|
||||
|
||||
// card
|
||||
html += '<div' + dataAttributes + ' class="' + cssClass + '">';
|
||||
|
|
|
@ -46,7 +46,8 @@
|
|||
preferThumb: true,
|
||||
context: 'movies',
|
||||
showItemCounts: true,
|
||||
centerText: true
|
||||
centerText: true,
|
||||
lazy: true
|
||||
});
|
||||
}
|
||||
else if (view == "ThumbCard") {
|
||||
|
@ -58,7 +59,8 @@
|
|||
context: 'movies',
|
||||
showItemCounts: true,
|
||||
cardLayout: true,
|
||||
showTitle: true
|
||||
showTitle: true,
|
||||
lazy: true
|
||||
});
|
||||
}
|
||||
else if (view == "Poster") {
|
||||
|
|
|
@ -44,10 +44,11 @@
|
|||
preferThumb: true,
|
||||
context: 'movies',
|
||||
showItemCounts: true,
|
||||
centerText: true
|
||||
centerText: true,
|
||||
lazy: true
|
||||
});
|
||||
|
||||
var elem = $('#items', page).html(html).trigger('create');
|
||||
var elem = $('#items', page).html(html).lazyChildren().trigger('create');
|
||||
|
||||
$(pagingHtml).appendTo(elem).trigger('create');
|
||||
|
||||
|
|
|
@ -649,7 +649,7 @@ var Dashboard = {
|
|||
|
||||
ensureHeader: function (page) {
|
||||
|
||||
if (page.hasClass('standalonePage')) {
|
||||
if (page.hasClass('standalonePage') && !page.hasClass('noHeaderPage')) {
|
||||
|
||||
Dashboard.renderHeader(page);
|
||||
}
|
||||
|
|
|
@ -46,7 +46,8 @@
|
|||
preferThumb: true,
|
||||
context: 'tv',
|
||||
showItemCounts: true,
|
||||
centerText: true
|
||||
centerText: true,
|
||||
lazy: true
|
||||
});
|
||||
}
|
||||
else if (view == "ThumbCard") {
|
||||
|
@ -58,7 +59,8 @@
|
|||
context: 'tv',
|
||||
showItemCounts: true,
|
||||
cardLayout: true,
|
||||
showTitle: true
|
||||
showTitle: true,
|
||||
lazy: true
|
||||
});
|
||||
}
|
||||
else if (view == "Poster") {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue