1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

update shared components

This commit is contained in:
Luke Pulverenti 2016-07-31 00:11:23 -04:00
parent ce0fd77a63
commit 41eeda7bab
11 changed files with 108 additions and 277 deletions

View file

@ -14,12 +14,12 @@
},
"devDependencies": {},
"ignore": [],
"version": "1.4.132",
"_release": "1.4.132",
"version": "1.4.135",
"_release": "1.4.135",
"_resolution": {
"type": "version",
"tag": "1.4.132",
"commit": "4af41910495a11c5f3fdfcdc9821c1944d4da439"
"tag": "1.4.135",
"commit": "769b3fed535db71b82c65e113ac39505078a2a82"
},
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
"_target": "^1.2.0",

View file

@ -1,4 +1,4 @@
define(['datetime', 'imageLoader', 'itemShortcuts', 'connectionManager'], function (datetime, imageLoader, itemShortcuts, connectionManager) {
define(['datetime', 'imageLoader', 'connectionManager'], function (datetime, imageLoader, connectionManager) {
function buildChapterCardsHtml(item, chapters, options) {
@ -9,12 +9,12 @@ define(['datetime', 'imageLoader', 'itemShortcuts', 'connectionManager'], functi
return i.Type == 'Video';
})[0] || {};
var shape = 'backdropCard';
var shape = (options.backdropShape || 'backdrop') + 'Card';
if (videoStream.Width && videoStream.Height) {
if ((videoStream.Width / videoStream.Height) <= 1.34) {
shape = 'squareCard';
shape = (options.squareShape || 'square') + 'Card';
}
}
@ -121,9 +121,6 @@ define(['datetime', 'imageLoader', 'itemShortcuts', 'connectionManager'], functi
options.itemsContainer.innerHTML = html;
imageLoader.lazyChildren(options.itemsContainer);
itemShortcuts.off(options.itemsContainer);
itemShortcuts.on(options.itemsContainer);
}
return {

View file

@ -1,8 +1,8 @@
define(['imageLoader', 'itemShortcuts'], function (imageLoader, itemShortcuts) {
define(['imageLoader', 'itemShortcuts', 'connectionManager'], function (imageLoader, itemShortcuts, connectionManager) {
function buildPeopleCardsHtml(people, options) {
var className = 'card portraitCard personCard';
var className = 'card ' + (options.shape || 'portrait') + 'Card personCard';
if (options.block || options.rows) {
className += ' block';
@ -12,6 +12,7 @@ define(['imageLoader', 'itemShortcuts'], function (imageLoader, itemShortcuts) {
var itemsInRow = 0;
var serverId = options.serverId;
var apiClient = connectionManager.getApiClient(serverId);
for (var i = 0, length = people.length; i < length; i++) {
@ -21,7 +22,7 @@ define(['imageLoader', 'itemShortcuts'], function (imageLoader, itemShortcuts) {
var person = people[i];
html += buildPersonCard(person, serverId, options, className);
html += buildPersonCard(person, apiClient, serverId, options, className);
itemsInRow++;
if (options.rows && itemsInRow >= options.rows) {
@ -33,11 +34,26 @@ define(['imageLoader', 'itemShortcuts'], function (imageLoader, itemShortcuts) {
return html;
}
function buildPersonCard(person, serverId, options, className) {
function getImgUrl(person, maxWidth, apiClient) {
if (person.PrimaryImageTag) {
return apiClient.getScaledImageUrl(person.Id, {
maxWidth: maxWidth,
tag: person.PrimaryImageTag,
type: "Primary"
});
}
return null;
}
function buildPersonCard(person, apiClient, serverId, options, className) {
className += " itemAction scalableCard";
var imgUrl = person.images ? person.images.primary : '';
var imgUrl = getImgUrl(person, options.width, apiClient);
var cardImageContainerClass = 'cardImageContainer';
if (options.coverImage) {
@ -79,12 +95,12 @@ define(['imageLoader', 'itemShortcuts'], function (imageLoader, itemShortcuts) {
function buildPeopleCards(items, options) {
if (options.parentContainer) {
// Abort if the container has been disposed
if (!document.body.contains(options.parentContainer)) {
return;
}
if (options.parentContainer) {
if (items.length) {
options.parentContainer.classList.remove('hide');
} else {

View file

@ -87,7 +87,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'embyRouter',
});
}
if (isMobileApp && options.identify !== false) {
if (options.identify !== false) {
if (itemHelper.canIdentify(user, item.Type)) {
commands.push({
name: globalize.translate('sharedcomponents#Identify'),
@ -298,7 +298,6 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'embyRouter',
{
require(['subtitleEditor'], function (subtitleEditor) {
var serverId = apiClient.serverInfo().Id;
subtitleEditor.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
});
break;
@ -318,9 +317,9 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'embyRouter',
}
case 'identify':
{
require(['components/itemidentifier/itemidentifier'], function (itemidentifier) {
require(['itemIdentifier'], function (itemIdentifier) {
itemidentifier.show(itemId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
itemIdentifier.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
});
break;
}

View file

@ -1,12 +1,17 @@
define(['dialogHelper', 'loading', 'cardBuilder', 'emby-input', 'emby-checkbox', 'paper-icon-button-light'], function (dialogHelper, loading, cardBuilder) {
define(['dialogHelper', 'loading', 'cardBuilder', 'connectionManager', 'require', 'globalize', 'emby-input', 'emby-checkbox', 'paper-icon-button-light'], function (dialogHelper, loading, cardBuilder, connectionManager, require, globalize) {
var currentItem;
var currentItemType;
var currentServerId;
var currentResolve;
var currentReject;
var hasChanges = false;
var currentSearchResult;
function getApiClient() {
return connectionManager.getApiClient(currentServerId);
}
function searchForIdentificationResults(page) {
var lookupInfo = {
@ -44,7 +49,7 @@
if (!hasId && !lookupInfo.Name) {
require(['toast'], function (toast) {
toast(Globalize.translate('MessagePleaseEnterNameOrId'));
toast(globalize.translate('MessagePleaseEnterNameOrId'));
});
return;
}
@ -60,9 +65,11 @@
loading.show();
ApiClient.ajax({
var apiClient = getApiClient();
apiClient.ajax({
type: "POST",
url: ApiClient.getUrl("Items/RemoteSearch/" + currentItemType),
url: apiClient.getUrl("Items/RemoteSearch/" + currentItemType),
data: JSON.stringify(lookupInfo),
contentType: "application/json",
dataType: 'json'
@ -203,7 +210,9 @@
}
function getSearchImageDisplayUrl(url, provider) {
return ApiClient.getUrl("Items/RemoteSearch/Image", { imageUrl: url, ProviderName: provider });
var apiClient = getApiClient();
return apiClient.getUrl("Items/RemoteSearch/Image", { imageUrl: url, ProviderName: provider });
}
function submitIdentficationResult(page) {
@ -214,9 +223,11 @@
ReplaceAllImages: page.querySelector('#chkIdentifyReplaceImages').checked
};
ApiClient.ajax({
var apiClient = getApiClient();
apiClient.ajax({
type: "POST",
url: ApiClient.getUrl("Items/RemoteSearch/Apply/" + currentItem.Id, options),
url: apiClient.getUrl("Items/RemoteSearch/Apply/" + currentItem.Id, options),
data: JSON.stringify(currentSearchResult),
contentType: "application/json"
@ -251,7 +262,7 @@
html += '<div class="inputContainer">';
var idLabel = Globalize.translate('LabelDynamicExternalId').replace('{0}', idInfo.Name);
var idLabel = globalize.translate('LabelDynamicExternalId').replace('{0}', idInfo.Name);
var value = providerIds[idInfo.Key] || '';
@ -274,7 +285,7 @@
page.querySelector('.identifyProviderIds').innerHTML = html;
page.querySelector('.dialogHeaderTitle').innerHTML = Globalize.translate('HeaderIdentify');
page.querySelector('.dialogHeaderTitle').innerHTML = globalize.translate('HeaderIdentify');
});
}
@ -282,13 +293,11 @@
loading.show();
var xhr = new XMLHttpRequest();
xhr.open('GET', 'components/itemidentifier/itemidentifier.template.html', true);
require(['text!./itemidentifier.template.html'], function (template) {
xhr.onload = function (e) {
var apiClient = getApiClient();
var template = this.response;
ApiClient.getItem(ApiClient.getCurrentUserId(), itemId).then(function (item) {
apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
currentItem = item;
currentItemType = currentItem.Type;
@ -302,7 +311,7 @@
dlg.classList.add('background-theme-b');
var html = '';
html += Globalize.translateDocument(template);
html += globalize.translateDocument(template);
dlg.innerHTML = html;
document.body.appendChild(dlg);
@ -336,9 +345,7 @@
showIdentificationForm(dlg, item);
loading.hide();
});
}
xhr.send();
});
}
function onDialogClosed() {
@ -356,12 +363,7 @@
currentItem = null;
currentItemType = itemType;
var xhr = new XMLHttpRequest();
xhr.open('GET', 'components/itemidentifier/itemidentifier.template.html', true);
xhr.onload = function (e) {
var template = this.response;
require(['text!./itemidentifier.template.html'], function (template) {
var dlg = dialogHelper.createDialog({
size: 'medium'
@ -371,7 +373,7 @@
dlg.classList.add('background-theme-a');
var html = '';
html += Globalize.translateDocument(template);
html += globalize.translateDocument(template);
dlg.innerHTML = html;
document.body.appendChild(dlg);
@ -401,9 +403,7 @@
dlg.classList.add('identifyDialog');
showIdentificationFormFindNew(dlg, itemName, itemYear, itemType);
}
xhr.send();
});
}
function showIdentificationFormFindNew(dlg, itemName, itemYear, itemType) {
@ -421,25 +421,29 @@
dlg.querySelector('#txtLookupYear').value = itemYear;
}
dlg.querySelector('.dialogHeaderTitle').innerHTML = Globalize.translate('HeaderSearch');
dlg.querySelector('.dialogHeaderTitle').innerHTML = globalize.translate('HeaderSearch');
}
return {
show: function (itemId) {
show: function (itemId, serverId) {
return new Promise(function (resolve, reject) {
currentResolve = resolve;
currentReject = reject;
currentServerId = serverId;
hasChanges = false;
showEditor(itemId);
});
},
showFindNew: function (itemName, itemYear, itemType) {
showFindNew: function (itemName, itemYear, itemType, serverId) {
return new Promise(function (resolve, reject) {
currentServerId = serverId;
hasChanges = false;
showEditorFindNew(itemName, itemYear, itemType, resolve);
});

View file

@ -156,9 +156,9 @@
return;
}
require(['components/itemidentifier/itemidentifier'], function (itemidentifier) {
require(['itemIdentifier'], function (itemIdentifier) {
itemidentifier.showFindNew(extractedName, extractedYear, 'Series').then(function (newItem) {
itemIdentifier.showFindNew(extractedName, extractedYear, 'Series', ApiClient.serverId()).then(function (newItem) {
if (newItem != null) {
currentNewItem = newItem;

View file

@ -1054,4 +1054,8 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
.itemDetailPage .scalableCard.backdropCard, .itemDetailPage .scalableCard.smallBackdropCard {
width: 33.3333333333333333% !important;
}
.itemDetailPage .personCard.portraitCard {
width: 16.666666666666666666666666666667% !important;
}
}

View file

@ -94,7 +94,8 @@
<h1 id="peopleHeader">
${HeaderCastCrew}
</h1>
<div id="castContent"></div>
<div id="castContent" class="itemsContainer"></div>
<button is="emby-button" type="button" class="raised more morePeople hide">${ButtonMore}</button>
</div>
<div class="detailSection photoInfo hide">
@ -153,7 +154,7 @@
<button is="paper-icon-button-light" class="autoSize"><i class="md-icon">settings</i></button>
</a>
</h1>
<div id="scenesContent" class="itemsContainer"></div>
<div is="emby-itemscontainer" id="scenesContent" class="itemsContainer"></div>
<button is="emby-button" type="button" class="raised more moreScenes hide">${ButtonMore}</button>
</div>
<div id="themeSongsCollapsible" class="detailSection hide">

View file

@ -450,7 +450,7 @@
page.querySelector('#castCollapsible').classList.add('hide');
} else {
page.querySelector('#castCollapsible').classList.remove('hide');
renderCast(page, item, context, enableScrollX() ? null : 6);
renderCast(page, item, context, enableScrollX() ? null : 12);
}
if (item.PartCount && item.PartCount > 1) {
@ -1606,7 +1606,9 @@
chaptercardbuilder.buildChapterCards(item, chapters, {
itemsContainer: scenesContent,
coverImage: true,
width: 400
width: 400,
backdropShape: getThumbShape(),
squareShape: getSquareShape()
});
});
@ -1869,232 +1871,39 @@
function renderCast(page, item, context, limit, isStatic) {
if (enableScrollX()) {
renderHorizontalCast(page, item, context, isStatic);
return;
}
var html = '';
var casts = item.People || [];
for (var i = 0, length = casts.length; i < length; i++) {
if (limit && i >= limit) {
break;
}
var cast = casts[i];
var href = isStatic ? '#' : 'itemdetails.html?id=' + cast.Id + '';
html += '<a class="tileItem smallPosterTileItem" href="' + href + '">';
var imgUrl;
var lazy = true;
if (cast.PrimaryImageTag) {
imgUrl = ApiClient.getScaledImageUrl(cast.Id, {
maxWidth: 100,
tag: cast.PrimaryImageTag,
type: "primary",
minScale: 2
});
} else {
imgUrl = "css/images/items/list/person.png";
lazy = false;
}
if (lazy) {
html += '<div class="tileImage lazy" data-src="' + imgUrl + '"></div>';
} else {
html += '<div class="tileImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
}
html += '<div class="tileContent">';
html += '<p>' + cast.Name + '</p>';
var role = cast.Role ? Globalize.translate('ValueAsRole', cast.Role) : cast.Type;
if (role == "GuestStar") {
role = Globalize.translate('ValueGuestStar');
}
role = role || "";
var maxlength = 40;
if (role.length > maxlength) {
role = role.substring(0, maxlength - 3) + '...';
}
html += '<p>' + role + '</p>';
html += '</div>';
html += '</a>';
}
if (limit && casts.length > limit) {
html += '<p style="margin: 0;padding-left:5px;"><button is="emby-button" type="button" class="raised more morePeople">' + Globalize.translate('ButtonMore') + '</button></p>';
}
var people = item.People || [];
var castContent = page.querySelector('#castContent');
castContent.innerHTML = html;
ImageLoader.lazyChildren(castContent);
}
function renderHorizontalCast(page, item, context, isStatic) {
var html = '';
if (enableScrollX()) {
html += '<div class="hiddenScrollX itemsContainer">';
castContent.classList.add('smoothScrollX');
limit = 32;
} else {
html += '<div class="itemsContainer">';
castContent.classList.add('vertical-wrap');
}
var casts = item.People || [];
var limitExceeded = limit && people.length > limit;
casts = casts.filter(function (c) {
if (limitExceeded) {
people = people.slice(0);
people.length = Math.min(limit, people.length);
}
return c.PrimaryImageTag;
});
if (!casts.length) {
casts = item.People || [];
}
for (var i = 0, length = casts.length; i < length; i++) {
var cast = casts[i];
var href = isStatic ? '#' : 'itemdetails.html?id=' + cast.Id + '';
html += '<div class="card ' + getPortraitShape() + 'Card">';
html += '<div class="cardBox">';
html += '<div class="cardScalable">';
var imgUrl;
var lazy = true;
if (cast.PrimaryImageTag) {
imgUrl = ApiClient.getScaledImageUrl(cast.Id, {
maxWidth: 100,
tag: cast.PrimaryImageTag,
type: "primary",
minScale: 2
require(['peoplecardbuilder'], function (peoplecardbuilder) {
peoplecardbuilder.buildPeopleCards(people, {
itemsContainer: castContent,
coverImage: true,
serverId: item.ServerId,
width: 160,
shape: getPortraitShape()
});
});
if (limitExceeded && !enableScrollX()) {
page.querySelector('.morePeople').classList.remove('hide');
} else {
imgUrl = "css/images/items/list/person.png";
lazy = false;
page.querySelector('.morePeople').classList.add('hide');
}
html += '<div class="cardPadder"></div>';
html += '<a class="cardContent" href="' + href + '">';
if (lazy) {
html += '<div class="cardImage coveredCardImage lazy" data-src="' + imgUrl + '"></div>';
} else {
html += '<div class="cardImage coveredCardImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
}
//cardFooter
html += "</div>";
// cardContent
html += '</a>';
// cardScalable
html += '</div>';
html += '<div class="cardFooter outerCardFooter">';
html += '<div class="cardText">' + cast.Name + '</div>';
html += '<div class="cardText">';
var role = cast.Role ? Globalize.translate('ValueAsRole', cast.Role) : cast.Type;
if (role == "GuestStar") {
role = Globalize.translate('ValueGuestStar');
}
role = role || "";
var maxlength = 40;
if (role.length > maxlength) {
role = role.substring(0, maxlength - 3) + '...';
}
html += role;
html += '</div>';
// cardBox
html += '</div>';
html += '</div>';
//html += '<a class="tileItem smallPosterTileItem" href="' + href + '">';
//var imgUrl;
//var lazy = true;
//if (cast.PrimaryImageTag) {
// imgUrl = ApiClient.getScaledImageUrl(cast.Id, {
// width: 100,
// tag: cast.PrimaryImageTag,
// type: "primary",
// minScale: 2
// });
//} else {
// imgUrl = "css/images/items/list/person.png";
// lazy = false;
//}
//if (lazy) {
// html += '<div class="tileImage lazy" data-src="' + imgUrl + '"></div>';
//} else {
// html += '<div class="tileImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
//}
//html += '<div class="tileContent">';
//html += '<p>' + cast.Name + '</p>';
//var role = cast.Role ? Globalize.translate('ValueAsRole', cast.Role) : cast.Type;
//if (role == "GuestStar") {
// role = Globalize.translate('ValueGuestStar');
//}
//role = role || "";
//var maxlength = 40;
//if (role.length > maxlength) {
// role = role.substring(0, maxlength - 3) + '...';
//}
//html += '<p>' + role + '</p>';
//html += '</div>';
//html += '</a>';
}
html += '</div>';
var castContent = page.querySelector('#castContent');
castContent.innerHTML = html;
ImageLoader.lazyChildren(castContent);
}
function play(startPosition) {

View file

@ -1420,6 +1420,7 @@ var AppInfo = {};
define("recordingCreator", [embyWebComponentsBowerPath + "/recordingcreator/recordingcreator"], returnFirstDependency);
define("recordingEditor", [embyWebComponentsBowerPath + "/recordingcreator/recordingeditor"], returnFirstDependency);
define("subtitleEditor", [embyWebComponentsBowerPath + "/subtitleeditor/subtitleeditor"], returnFirstDependency);
define("itemIdentifier", [embyWebComponentsBowerPath + "/itemidentifier/itemidentifier"], returnFirstDependency);
define("mediaInfo", [embyWebComponentsBowerPath + "/mediainfo/mediainfo"], returnFirstDependency);
define("itemContextMenu", [embyWebComponentsBowerPath + "/itemcontextmenu"], returnFirstDependency);
define("dom", [embyWebComponentsBowerPath + "/dom"], returnFirstDependency);