mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update components
This commit is contained in:
Luke Pulverenti
parent
9254ff721d
commit
3197c48232
162 changed files with 902 additions and 9728 deletions
|
|
@ -15,12 +15,12 @@
|
|||
},
|
||||
"devDependencies": {},
|
||||
"ignore": [],
|
||||
"version": "1.4.78",
|
||||
"_release": "1.4.78",
|
||||
"version": "1.4.80",
|
||||
"_release": "1.4.80",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "1.4.78",
|
||||
"commit": "33c9381ec8872ebd87e46def5a2b86dcbf952f0d"
|
||||
"tag": "1.4.80",
|
||||
"commit": "a959ba5d3e78c15e700002a399450365bc6b9328"
|
||||
},
|
||||
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
|
||||
"_target": "^1.2.0",
|
||||
|
|
|
|||
|
|
@ -134,7 +134,7 @@
|
|||
|
||||
browser.xboxOne = userAgent.toLowerCase().indexOf('xbox') != -1;
|
||||
browser.animate = document.documentElement.animate != null;
|
||||
browser.tizen = userAgent.toLowerCase().indexOf('tizen') != -1;
|
||||
browser.tizen = userAgent.toLowerCase().indexOf('tizen') != -1 || userAgent.toLowerCase().indexOf('smarthub') != -1;
|
||||
browser.web0s = userAgent.toLowerCase().indexOf('Web0S'.toLowerCase()) != -1;
|
||||
|
||||
browser.tv = isTv();
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
button.listItem {
|
||||
background: transparent;
|
||||
border: 0 !important;
|
||||
border-bottom: 1px solid #2a2a2a !important;
|
||||
cursor: pointer;
|
||||
outline: none !important;
|
||||
color: inherit;
|
||||
|
|
@ -16,6 +17,7 @@ button.listItem {
|
|||
text-align: left;
|
||||
padding: 0 1em !important;
|
||||
line-height: 170%;
|
||||
border-bottom: 1px solid #2a2a2a;
|
||||
}
|
||||
|
||||
.listItem.largeImage {
|
||||
|
|
@ -33,7 +35,7 @@ button.listItem {
|
|||
|
||||
.listItemBody {
|
||||
flex-grow: 1;
|
||||
padding: 0 1.15em;
|
||||
padding: 0 1em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex-direction: column;
|
||||
|
|
@ -82,6 +84,7 @@ button.listItem {
|
|||
background-size: contain;
|
||||
flex-shrink: 0;
|
||||
margin-left: -.75em;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.listItemIcon {
|
||||
|
|
@ -133,10 +136,17 @@ button.listItem {
|
|||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.listItemMediaInfo {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.listItemMediaInfo > * {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@supports (display: flex) {
|
||||
|
||||
.listItem, .listItemBody {
|
||||
.listItem, .listItemBody, .listItemMediaInfo {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,116 @@
|
|||
define(['itemHelper', 'mediaInfo', 'indicators', 'css!./listview'], function (itemHelper, mediaInfo, indicators) {
|
||||
define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutManager', 'userdataButtons', 'css!./listview'], function (itemHelper, mediaInfo, indicators, connectionManager, layoutManager, userdataButtons) {
|
||||
|
||||
function getIndex(item, options) {
|
||||
|
||||
if (options.index == 'disc') {
|
||||
|
||||
return item.ParentIndexNumber == null ? '' : Globalize.translate('sharedcomponents#ValueDiscNumber', item.ParentIndexNumber);
|
||||
}
|
||||
|
||||
var sortBy = (options.sortBy || '').toLowerCase();
|
||||
var code, name;
|
||||
|
||||
if (sortBy.indexOf('sortname') == 0) {
|
||||
|
||||
if (item.Type == 'Episode') return '';
|
||||
|
||||
// SortName
|
||||
name = (item.SortName || item.Name || '?')[0].toUpperCase();
|
||||
|
||||
code = name.charCodeAt(0);
|
||||
if (code < 65 || code > 90) {
|
||||
return '#';
|
||||
}
|
||||
|
||||
return name.toUpperCase();
|
||||
}
|
||||
if (sortBy.indexOf('officialrating') == 0) {
|
||||
|
||||
return item.OfficialRating || globalize.translate('sharedcomponents#Unrated');
|
||||
}
|
||||
if (sortBy.indexOf('communityrating') == 0) {
|
||||
|
||||
if (item.CommunityRating == null) {
|
||||
return globalize.translate('sharedcomponents#Unrated');
|
||||
}
|
||||
|
||||
return Math.floor(item.CommunityRating);
|
||||
}
|
||||
if (sortBy.indexOf('criticrating') == 0) {
|
||||
|
||||
if (item.CriticRating == null) {
|
||||
return globalize.translate('sharedcomponents#Unrated');
|
||||
}
|
||||
|
||||
return Math.floor(item.CriticRating);
|
||||
}
|
||||
if (sortBy.indexOf('metascore') == 0) {
|
||||
|
||||
if (item.Metascore == null) {
|
||||
return globalize.translate('sharedcomponents#Unrated');
|
||||
}
|
||||
|
||||
return Math.floor(item.Metascore);
|
||||
}
|
||||
if (sortBy.indexOf('albumartist') == 0) {
|
||||
|
||||
// SortName
|
||||
if (!item.AlbumArtist) return '';
|
||||
|
||||
name = item.AlbumArtist[0].toUpperCase();
|
||||
|
||||
code = name.charCodeAt(0);
|
||||
if (code < 65 || code > 90) {
|
||||
return '#';
|
||||
}
|
||||
|
||||
return name.toUpperCase();
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
function getImageUrl(item, width) {
|
||||
|
||||
var apiClient = connectionManager.getApiClient(item.ServerId);
|
||||
|
||||
var options = {
|
||||
width: width,
|
||||
type: "Primary"
|
||||
};
|
||||
|
||||
if (item.ImageTags && item.ImageTags['Primary']) {
|
||||
|
||||
options.tag = item.ImageTags['Primary'];
|
||||
return apiClient.getScaledImageUrl(item.Id, options);
|
||||
}
|
||||
|
||||
if (item.AlbumId && item.AlbumPrimaryImageTag) {
|
||||
|
||||
options.tag = item.AlbumPrimaryImageTag;
|
||||
return apiClient.getScaledImageUrl(item.AlbumId, options);
|
||||
}
|
||||
|
||||
else if (item.SeriesId && item.SeriesPrimaryImageTag) {
|
||||
|
||||
options.tag = item.SeriesPrimaryImageTag;
|
||||
return apiClient.getScaledImageUrl(item.SeriesId, options);
|
||||
|
||||
}
|
||||
else if (item.ParentPrimaryImageTag) {
|
||||
|
||||
options.tag = item.ParentPrimaryImageTag;
|
||||
return apiClient.getScaledImageUrl(item.ParentPrimaryImageItemId, options);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function getListViewHtml(items, options) {
|
||||
|
||||
var outerHtml = "";
|
||||
if (arguments.length == 1) {
|
||||
options = items;
|
||||
items = options.items;
|
||||
}
|
||||
|
||||
var index = 0;
|
||||
var groupTitle = '';
|
||||
|
|
@ -11,10 +119,36 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'css!./listview'], function (it
|
|||
var isLargeStyle = options.imageSize == 'large';
|
||||
var enableOverview = options.enableOverview;
|
||||
|
||||
outerHtml += items.map(function (item) {
|
||||
var clickEntireItem = layoutManager.tv ? true : false;
|
||||
var outerTagName = clickEntireItem ? 'button' : 'div';
|
||||
|
||||
return items.map(function (item) {
|
||||
|
||||
var html = '';
|
||||
|
||||
//if (options.showIndex !== false) {
|
||||
|
||||
// var itemGroupTitle = LibraryBrowser.getListViewIndex(item, options);
|
||||
|
||||
// if (itemGroupTitle != groupTitle) {
|
||||
|
||||
// outerHtml += '</div>';
|
||||
|
||||
// if (index == 0) {
|
||||
// html += '<h1>';
|
||||
// }
|
||||
// else {
|
||||
// html += '<h1 style="margin-top:2em;">';
|
||||
// }
|
||||
// html += itemGroupTitle;
|
||||
// html += '</h1>';
|
||||
|
||||
// html += '<div class="paperList itemsListview">';
|
||||
|
||||
// groupTitle = itemGroupTitle;
|
||||
// }
|
||||
//}
|
||||
|
||||
var cssClass = "itemAction listItem";
|
||||
|
||||
var downloadWidth = 80;
|
||||
|
|
@ -24,19 +158,9 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'css!./listview'], function (it
|
|||
downloadWidth = 500;
|
||||
}
|
||||
|
||||
html += '<button class="' + cssClass + '" data-index="' + index + '" data-action="' + action + '" data-isfolder="' + item.IsFolder + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-type="' + item.Type + '">';
|
||||
html += '<' + outerTagName + ' class="' + cssClass + '" data-index="' + index + '" data-action="' + action + '" data-isfolder="' + item.IsFolder + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-type="' + item.Type + '">';
|
||||
|
||||
var imgUrl = Emby.Models.imageUrl(item, {
|
||||
width: downloadWidth,
|
||||
type: "Primary"
|
||||
});
|
||||
|
||||
if (!imgUrl) {
|
||||
imgUrl = Emby.Models.thumbImageUrl(item, {
|
||||
width: downloadWidth,
|
||||
type: "Thumb"
|
||||
});
|
||||
}
|
||||
var imgUrl = getImageUrl(item, downloadWidth);
|
||||
|
||||
if (imgUrl) {
|
||||
html += '<div class="listItemImage lazy" data-src="' + imgUrl + '" item-icon>';
|
||||
|
|
@ -122,18 +246,23 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'css!./listview'], function (it
|
|||
|
||||
html += '</div>';
|
||||
|
||||
if (!clickEntireItem) {
|
||||
html += '<button is="paper-icon-button-light" class="listviewMenuButton autoSize"><i class="md-icon"></i></button>';
|
||||
html += '<span class="listViewUserDataButtons">';
|
||||
html += userdataButtons.getIconsHtml(item);
|
||||
html += '</span>';
|
||||
}
|
||||
|
||||
if (options.enableSideMediaInfo) {
|
||||
html += '<div class="secondary listItemMediaInfo">' + mediaInfo.getPrimaryMediaInfoHtml(item) + '</div>';
|
||||
}
|
||||
|
||||
html += '</button>';
|
||||
html += '</' + outerTagName + '>';
|
||||
|
||||
index++;
|
||||
return html;
|
||||
|
||||
}).join('');
|
||||
|
||||
return outerHtml;
|
||||
}
|
||||
|
||||
return {
|
||||
|
|
|
|||
188
dashboard-ui/bower_components/emby-webcomponents/userdatabuttons/userdatabuttons.js
vendored
Normal file
188
dashboard-ui/bower_components/emby-webcomponents/userdatabuttons/userdatabuttons.js
vendored
Normal file
|
|
@ -0,0 +1,188 @@
|
|||
define(['connectionManager', 'globalize', 'paper-icon-button-light', 'material-icons', 'emby-button'], function (connectionManager, globalize) {
|
||||
|
||||
function getUserDataButtonHtml(method, itemId, iconCssClass, icon, tooltip, style) {
|
||||
|
||||
var is = style == 'fab' ? 'emby-button' : 'paper-icon-button-light';
|
||||
var className = style == 'fab' ? 'autoSize fab' : 'autoSize';
|
||||
|
||||
className += ' ' + iconCssClass;
|
||||
|
||||
return '<button title="' + tooltip + '" data-itemid="' + itemId + '" is="' + is + '" class="' + className + '" onclick="UserDataButtons.' + method + '(this);return false;">\
|
||||
<i class="md-icon">' + icon + '</i>\
|
||||
</button>';
|
||||
}
|
||||
|
||||
function fill(options) {
|
||||
|
||||
var html = getIconsHtml(options.item, options.includePlayed, options.buttonClass, options.style);
|
||||
|
||||
options.element.innerHTML = html;
|
||||
}
|
||||
|
||||
function getIconsHtml(item, includePlayed, cssClass, style) {
|
||||
|
||||
var html = '';
|
||||
|
||||
var userData = item.UserData || {};
|
||||
|
||||
var itemId = item.Id;
|
||||
|
||||
var btnCssClass = "btnUserData";
|
||||
|
||||
if (cssClass) {
|
||||
btnCssClass += " " + cssClass;
|
||||
}
|
||||
|
||||
if (includePlayed !== false) {
|
||||
var tooltipPlayed = globalize.translate('sharedcomponents#Played');
|
||||
|
||||
if (item.MediaType == 'Video' || item.Type == 'Series' || item.Type == 'Season' || item.Type == 'BoxSet' || item.Type == 'Playlist') {
|
||||
if (item.Type != 'TvChannel') {
|
||||
if (userData.Played) {
|
||||
html += getUserDataButtonHtml('markPlayed', itemId, btnCssClass + ' btnUserDataOn', 'check', tooltipPlayed, style);
|
||||
} else {
|
||||
html += getUserDataButtonHtml('markPlayed', itemId, btnCssClass, 'check', tooltipPlayed, style);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var tooltipLike = globalize.translate('sharedcomponents#Like');
|
||||
var tooltipDislike = globalize.translate('sharedcomponents#Dislike');
|
||||
|
||||
//if (typeof userData.Likes == "undefined") {
|
||||
// html += getUserDataButtonHtml('markDislike', itemId, btnCssClass + ' btnUserData btnDislike', 'thumb-down', tooltipDislike);
|
||||
// html += getUserDataButtonHtml('markLike', itemId, btnCssClass + ' btnUserData btnLike', 'thumb-up', tooltipLike);
|
||||
//}
|
||||
//else if (userData.Likes) {
|
||||
// html += getUserDataButtonHtml('markDislike', itemId, btnCssClass + ' btnUserData btnDislike', 'thumb-down', tooltipDislike);
|
||||
// html += getUserDataButtonHtml('markLike', itemId, btnCssClass + ' btnUserData btnLike btnUserDataOn', 'thumb-up', tooltipLike);
|
||||
//}
|
||||
//else {
|
||||
// html += getUserDataButtonHtml('markDislike', itemId, btnCssClass + ' btnUserData btnDislike btnUserDataOn', 'thumb-down', tooltipDislike);
|
||||
// html += getUserDataButtonHtml('markLike', itemId, btnCssClass + ' btnUserData btnLike', 'thumb-up', tooltipLike);
|
||||
//}
|
||||
|
||||
var tooltipFavorite = globalize.translate('sharedcomponents#Favorite');
|
||||
if (userData.IsFavorite) {
|
||||
|
||||
html += getUserDataButtonHtml('markFavorite', itemId, btnCssClass + ' btnUserData btnUserDataOn', 'favorite', tooltipFavorite, style);
|
||||
} else {
|
||||
html += getUserDataButtonHtml('markFavorite', itemId, btnCssClass + ' btnUserData', 'favorite', tooltipFavorite, style);
|
||||
}
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
function markFavorite(link) {
|
||||
|
||||
var id = link.getAttribute('data-itemid');
|
||||
|
||||
var markAsFavorite = !link.classList.contains('btnUserDataOn');
|
||||
|
||||
favorite(id, markAsFavorite);
|
||||
|
||||
if (markAsFavorite) {
|
||||
link.classList.add('btnUserDataOn');
|
||||
} else {
|
||||
link.classList.remove('btnUserDataOn');
|
||||
}
|
||||
}
|
||||
|
||||
function markLike(link) {
|
||||
|
||||
var id = link.getAttribute('data-itemid');
|
||||
|
||||
if (!link.classList.contains('btnUserDataOn')) {
|
||||
|
||||
likes(id, true);
|
||||
|
||||
link.classList.add('btnUserDataOn');
|
||||
|
||||
} else {
|
||||
|
||||
clearLike(id);
|
||||
|
||||
link.classList.remove('btnUserDataOn');
|
||||
}
|
||||
|
||||
link.parentNode.querySelector('.btnDislike').classList.remove('btnUserDataOn');
|
||||
}
|
||||
|
||||
function markDislike(link) {
|
||||
|
||||
var id = link.getAttribute('data-itemid');
|
||||
|
||||
if (!link.classList.contains('btnUserDataOn')) {
|
||||
|
||||
likes(id, false);
|
||||
|
||||
link.classList.add('btnUserDataOn');
|
||||
|
||||
} else {
|
||||
|
||||
clearLike(id);
|
||||
|
||||
link.classList.remove('btnUserDataOn');
|
||||
}
|
||||
|
||||
link.parentNode.querySelector('.btnLike').classList.remove('btnUserDataOn');
|
||||
}
|
||||
|
||||
function markPlayed(link) {
|
||||
|
||||
var id = link.getAttribute('data-itemid');
|
||||
|
||||
if (!link.classList.contains('btnUserDataOn')) {
|
||||
|
||||
played(id, true);
|
||||
|
||||
link.classList.add('btnUserDataOn');
|
||||
|
||||
} else {
|
||||
|
||||
played(id, false);
|
||||
|
||||
link.classList.remove('btnUserDataOn');
|
||||
}
|
||||
}
|
||||
|
||||
function likes(id, isLiked) {
|
||||
var apiClient = connectionManager.currentApiClient();
|
||||
return apiClient.updateUserItemRating(apiClient.getCurrentUserId(), id, isLiked);
|
||||
}
|
||||
|
||||
function played(id, isPlayed) {
|
||||
var apiClient = connectionManager.currentApiClient();
|
||||
|
||||
var method = isPlayed ? 'markPlayed' : 'markUnplayed';
|
||||
|
||||
return apiClient[method](apiClient.getCurrentUserId(), id, new Date());
|
||||
}
|
||||
|
||||
function favorite(id, isFavorite) {
|
||||
var apiClient = connectionManager.currentApiClient();
|
||||
|
||||
return apiClient.updateFavoriteStatus(apiClient.getCurrentUserId(), id, isFavorite);
|
||||
}
|
||||
|
||||
function clearLike(id) {
|
||||
|
||||
var apiClient = connectionManager.currentApiClient();
|
||||
|
||||
return apiClient.clearUserItemRating(apiClient.getCurrentUserId(), id);
|
||||
}
|
||||
|
||||
window.UserDataButtons = {
|
||||
markPlayed: markPlayed,
|
||||
markDislike: markDislike,
|
||||
markLike: markLike,
|
||||
markFavorite: markFavorite
|
||||
};
|
||||
|
||||
return {
|
||||
fill: fill,
|
||||
getIconsHtml: getIconsHtml
|
||||
};
|
||||
|
||||
});
|
||||
|
|
@ -150,7 +150,7 @@ define(['browser', 'css!./viewcontainer-lite'], function (browser) {
|
|||
|
||||
return new Promise(function (resolve, reject) {
|
||||
var timings = {
|
||||
duration: 200,
|
||||
duration: 300,
|
||||
iterations: 1,
|
||||
easing: 'ease-out',
|
||||
fill: 'both'
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue