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

update listviews

This commit is contained in:
Luke Pulverenti 2016-07-16 14:02:39 -04:00
parent 1032fa887e
commit f458196922
31 changed files with 168 additions and 100 deletions

View file

@ -15,12 +15,12 @@
}, },
"devDependencies": {}, "devDependencies": {},
"ignore": [], "ignore": [],
"version": "1.4.81", "version": "1.4.84",
"_release": "1.4.81", "_release": "1.4.84",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "1.4.81", "tag": "1.4.84",
"commit": "77ba771ece78a8beb9262d7ac296175df6c052b2" "commit": "15bfe5a5a9ca97a96f3f30c76dd463266f66e290"
}, },
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git", "_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
"_target": "^1.2.0", "_target": "^1.2.0",

View file

@ -0,0 +1,17 @@
define(['itemShortcuts', 'registerElement'], function (itemShortcuts) {
var ItemsContainerProtoType = Object.create(HTMLDivElement.prototype);
ItemsContainerProtoType.attachedCallback = function () {
itemShortcuts.on(this);
};
ItemsContainerProtoType.detachedCallback = function () {
itemShortcuts.off(this);
};
document.registerElement('emby-itemscontainer', {
prototype: ItemsContainerProtoType,
extends: 'div'
});
});

View file

@ -8,8 +8,9 @@
top: 0; top: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
background-color: #52B54B;
} }
.timerIndicator { .timerIndicator {
color: #CB272A; color: #CB272A;
} }

View file

@ -16,7 +16,7 @@ button.listItem {
display: block; display: block;
align-items: center; align-items: center;
text-align: left; text-align: left;
padding: .25em .5em .25em 1em !important; padding: .25em .25em .25em .25em !important;
line-height: 170%; line-height: 170%;
border-bottom: 1px solid #2a2a2a; border-bottom: 1px solid #2a2a2a;
} }
@ -26,7 +26,7 @@ div.listItem {
} }
.listItem.largeImage { .listItem.largeImage {
padding: 1em 0 1em 1em; padding: .5em !important;
} }
.listItem > *:not(.listItemBody) { .listItem > *:not(.listItemBody) {
@ -38,6 +38,14 @@ div.listItem {
vertical-align: middle; vertical-align: middle;
} }
.listItem [is=paper-icon-button-light] {
margin: 0;
}
.listViewDragHandle {
margin-left: -.25em !important;
}
.listItemBody { .listItemBody {
flex-grow: 1; flex-grow: 1;
padding: 0 1em; padding: 0 1em;
@ -89,8 +97,8 @@ div.listItem {
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
flex-shrink: 0; flex-shrink: 0;
margin-left: -.75em;
background-position: center center; background-position: center center;
position: relative;
} }
.listItemIcon { .listItemIcon {
@ -103,7 +111,6 @@ div.listItem {
width: 45vh; width: 45vh;
height: 30vh; height: 30vh;
background-position: center center; background-position: center center;
position: relative;
margin-right: 2%; margin-right: 2%;
margin-left: 1%; margin-left: 1%;
} }

View file

@ -153,7 +153,11 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
} }
} }
var cssClass = "itemAction listItem"; var cssClass = "listItem";
if (clickEntireItem) {
cssClass += ' itemAction';
}
var downloadWidth = 80; var downloadWidth = 80;
@ -162,7 +166,13 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
downloadWidth = 500; downloadWidth = 500;
} }
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 playlistItemId = item.PlaylistItemId ? (' data-playlistitemid="' + item.PlaylistItemId + '"') : '';
html += '<' + outerTagName + ' class="' + cssClass + '" data-index="' + index + '"' + playlistItemId + ' data-action="' + action + '" data-isfolder="' + item.IsFolder + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-type="' + item.Type + '">';
if (!clickEntireItem && options.dragHandle) {
html += '<button is="paper-icon-button-light" class="listViewDragHandle autoSize"><i class="md-icon">&#xE25D;</i></button>';
}
var imgUrl = getImageUrl(item, downloadWidth); var imgUrl = getImageUrl(item, downloadWidth);
@ -218,7 +228,12 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
lineCount++; lineCount++;
} }
html += '<div class="listItemBody">'; cssClass = 'listItemBody';
if (!clickEntireItem) {
cssClass += ' itemAction';
}
html += '<div class="' + cssClass + '">';
for (var i = 0, textLinesLength = textlines.length; i < textLinesLength; i++) { for (var i = 0, textLinesLength = textlines.length; i < textLinesLength; i++) {

View file

@ -1,7 +1,11 @@
define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'globalize', 'loading'], function (playbackManager, inputManager, connectionManager, embyRouter, globalize, loading) { define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'globalize', 'loading'], function (playbackManager, inputManager, connectionManager, embyRouter, globalize, loading) {
function playAllFromHere(card, serverId) { function playAllFromHere(card, serverId) {
var cards = card.parentNode.querySelectorAll('.itemAction[data-id]');
var parent = card.parentNode;
var className = card.classList.length ? ('.' + card.classList[0]) : '';
var cards = parent.querySelectorAll(className + '[data-id]');
var ids = []; var ids = [];
var foundCard = false; var foundCard = false;
@ -13,6 +17,11 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'g
ids.push(cards[i].getAttribute('data-id')); ids.push(cards[i].getAttribute('data-id'));
} }
} }
if (!ids.length) {
return;
}
playbackManager.play({ playbackManager.play({
ids: ids, ids: ids,
serverId: serverId serverId: serverId
@ -75,7 +84,14 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'g
} }
function executeAction(card, action) { function executeAction(card, action) {
var id = card.getAttribute('data-id'); var id = card.getAttribute('data-id');
if (!id) {
card = parentWithAttribute(card, 'data-id');
id = card.getAttribute('data-id');
}
var serverId = card.getAttribute('data-serverid'); var serverId = card.getAttribute('data-serverid');
var type = card.getAttribute('data-type'); var type = card.getAttribute('data-type');
var isfolder = card.getAttribute('data-isfolder') == 'true'; var isfolder = card.getAttribute('data-isfolder') == 'true';
@ -197,7 +213,14 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'g
var card = parentWithClass(e.target, 'itemAction'); var card = parentWithClass(e.target, 'itemAction');
if (card) { if (card) {
var action = card.getAttribute('data-action');
var actionElement = card;
var action = actionElement.getAttribute('data-action');
if (!action) {
actionElement = parentWithAttribute(actionElement, 'data-action');
action = actionElement.getAttribute('data-action');
}
if (action) { if (action) {
executeAction(card, action); executeAction(card, action);
@ -205,6 +228,19 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'g
} }
} }
function parentWithAttribute(elem, name) {
while (!elem.getAttribute(name)) {
elem = elem.parentNode;
if (!elem) {
return null;
}
}
return elem;
}
function parentWithClass(elem, className) { function parentWithClass(elem, className) {
while (!elem.classList || !elem.classList.contains(className)) { while (!elem.classList || !elem.classList.contains(className)) {

View file

@ -413,7 +413,8 @@
html += listView.getListViewHtml({ html += listView.getListViewHtml({
items: MediaController.playlist(), items: MediaController.playlist(),
smallIcon: true smallIcon: true,
action: 'none'
}); });
playlistNeedsRefresh = false; playlistNeedsRefresh = false;
@ -557,34 +558,15 @@
function onContextClick(e) { function onContextClick(e) {
var lnkPlayFromIndex = parentWithClass(e.target, 'lnkPlayFromIndex'); var mediaItem = parentWithClass(e.target, 'itemAction');
if (lnkPlayFromIndex != null) {
var index = parseInt(lnkPlayFromIndex.getAttribute('data-index'));
MediaController.currentPlaylistIndex(index);
loadPlaylist(context);
e.preventDefault();
e.stopPropagation();
return false;
}
var lnkRemoveFromPlaylist = parentWithClass(e.target, 'lnkRemoveFromPlaylist');
if (lnkRemoveFromPlaylist != null) {
var index = parseInt(lnkRemoveFromPlaylist.getAttribute('data-index'));
MediaController.removeFromPlaylist(index);
loadPlaylist(context);
e.preventDefault();
e.stopPropagation();
return false;
}
var mediaItem = parentWithClass(e.target, 'mediaItem');
if (mediaItem != null) { if (mediaItem != null) {
var info = libraryBrowser.getListItemInfo(mediaItem);
MediaController.currentPlaylistIndex(info.index); mediaItem = parentWithClass(e.target, 'listItem');
var indexValue = mediaItem.getAttribute('data-index');
if (indexValue) {
MediaController.currentPlaylistIndex(parseInt(indexValue));
}
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();

View file

@ -949,10 +949,17 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
margin-right: 5px; margin-right: 5px;
} }
/* Polyfill */ /* Undo these to original */
.itemProgressBar[role]:after { .listItem .itemProgressBar {
background-image: none; /* removes default background from polyfill */ width: auto;
} margin: 0;
height: .56vh;
}
/* Polyfill */
.itemProgressBar[role]:after {
background-image: none; /* removes default background from polyfill */
}
/* /*
* Background of the progress bar background * Background of the progress bar background

View file

@ -106,6 +106,10 @@ h2 {
font-weight: 400; font-weight: 400;
} }
h3 {
font-weight: 500;
}
a, a:active, a:hover { a, a:active, a:hover {
text-decoration: none; text-decoration: none;
} }

View file

@ -81,7 +81,7 @@
<span id="childrenTitle"></span> <span id="childrenTitle"></span>
</h1> </h1>
<div id="childrenContent"> <div id="childrenContent">
<div class="childrenItemsContainer itemsContainer noautoinit" style="text-align:left;"></div> <div is="emby-itemscontainer" class="childrenItemsContainer itemsContainer noautoinit" style="text-align:left;"></div>
</div> </div>
</div> </div>
<div id="additionalPartsCollapsible" class="detailSection hide"> <div id="additionalPartsCollapsible" class="detailSection hide">
@ -155,7 +155,7 @@
<h1> <h1>
${HeaderThemeSongs} ${HeaderThemeSongs}
</h1> </h1>
<div id="themeSongsContent"></div> <div id="themeSongsContent" is="emby-itemscontainer"></div>
</div> </div>
<div class="detailSection detailsSection"> <div class="detailSection detailsSection">
<h1> <h1>

View file

@ -10,6 +10,6 @@
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button> <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button>
<button type="button" is="paper-icon-button-light" class="btnNewCollection autoSize hide"><i class="md-icon">add</i></button> <button type="button" is="paper-icon-button-light" class="btnNewCollection autoSize hide"><i class="md-icon">add</i></button>
</div> </div>
<div id="items" class="itemsContainer paddedItemsContainer itemsContainerWithAlphaPicker" style="text-align:center;"></div> <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer itemsContainerWithAlphaPicker" style="text-align:center;"></div>
</div> </div>
</div> </div>

View file

@ -55,7 +55,7 @@
<div class="alphaPicker alphabetPicker vertical"> <div class="alphaPicker alphabetPicker vertical">
</div> </div>
<div class="itemsContainer itemsContainerWithAlphaPicker"> <div is="emby-itemscontainer" class="itemsContainer itemsContainerWithAlphaPicker">
</div> </div>
<div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;"> <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
<div class="paging"></div> <div class="paging"></div>
@ -71,7 +71,7 @@
<div class="alphaPicker alphabetPicker vertical"> <div class="alphaPicker alphabetPicker vertical">
</div> </div>
<div class="itemsContainer itemsContainerWithAlphaPicker"> <div is="emby-itemscontainer" class="itemsContainer itemsContainerWithAlphaPicker">
</div> </div>
<div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;"> <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
<div class="paging"></div> <div class="paging"></div>
@ -88,7 +88,7 @@
<div class="alphaPicker alphabetPicker vertical"> <div class="alphaPicker alphabetPicker vertical">
</div> </div>
<div class="itemsContainer itemsContainerWithAlphaPicker" style="text-align:center;"> <div is="emby-itemscontainer" class="itemsContainer itemsContainerWithAlphaPicker" style="text-align:center;">
</div> </div>
<div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;"> <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
<div class="paging"></div> <div class="paging"></div>

View file

@ -53,7 +53,7 @@
<div class="alphaPicker alphabetPicker vertical"> <div class="alphaPicker alphabetPicker vertical">
</div> </div>
<div class="itemsContainer itemsContainerWithAlphaPicker"> <div is="emby-itemscontainer" class="itemsContainer itemsContainerWithAlphaPicker">
</div> </div>
<div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;"> <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
<div class="paging"></div> <div class="paging"></div>
@ -69,7 +69,7 @@
<div class="alphaPicker alphabetPicker vertical"> <div class="alphaPicker alphabetPicker vertical">
</div> </div>
<div class="itemsContainer itemsContainerWithAlphaPicker"> <div is="emby-itemscontainer" class="itemsContainer itemsContainerWithAlphaPicker">
</div> </div>
<div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;"> <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
<div class="paging"></div> <div class="paging"></div>
@ -85,7 +85,7 @@
<div class="alphaPicker alphabetPicker vertical"> <div class="alphaPicker alphabetPicker vertical">
</div> </div>
<div class="itemsContainer itemsContainerWithAlphaPicker"> <div is="emby-itemscontainer" class="itemsContainer itemsContainerWithAlphaPicker">
</div> </div>
<div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;"> <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
<div class="paging"></div> <div class="paging"></div>
@ -98,7 +98,7 @@
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button> <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button>
</div> </div>
<div id="items" class="itemsContainer" style="max-width:1000px;margin: 0 auto;"></div> <div is="emby-itemscontainer" id="items" class="itemsContainer" style="max-width:1000px;margin: 0 auto;"></div>
<div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;"> <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
<div class="paging"></div> <div class="paging"></div>

View file

@ -186,7 +186,7 @@
</div> </div>
</div> </div>
<div class="pageTabContent ehsContent" id="playlistTab" data-index="2"> <div class="pageTabContent ehsContent" id="playlistTab" data-index="2">
<div class="playlist itemsContainer" style="max-width: 800px; margin: 3em auto 0; padding-bottom: 200px;"> <div class="playlist itemsContainer" is="emby-itemscontainer" style="max-width: 800px; margin: 3em auto 0; padding-bottom: 200px;">
</div> </div>
</div> </div>
</div> </div>

View file

@ -1,4 +1,4 @@
<div id="playlistsPage" data-dom-cache="true" data-role="page" class="page libraryPage noSecondaryNavPage" data-require="scripts/playlists" data-title="${HeaderPlaylists}"> <div id="playlistsPage" data-dom-cache="true" data-role="page" class="page libraryPage noSecondaryNavPage" data-require="scripts/playlists,emby-itemscontainer" data-title="${HeaderPlaylists}">
<div data-role="content"> <div data-role="content">
<div class="viewSettings"> <div class="viewSettings">
@ -7,7 +7,7 @@
&nbsp; &nbsp;
</div> </div>
</div> </div>
<div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div> <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
<div class="noItemsMessage hide" style="text-align: center;"> <div class="noItemsMessage hide" style="text-align: center;">
<p>${MessageNoPlaylistsAvailable}</p> <p>${MessageNoPlaylistsAvailable}</p>
</div> </div>

View file

@ -1,4 +1,4 @@
define(['events', 'libraryBrowser', 'imageLoader', 'listView'], function (events, libraryBrowser, imageLoader, listView) { define(['events', 'libraryBrowser', 'imageLoader', 'listView', 'emby-itemscontainer'], function (events, libraryBrowser, imageLoader, listView) {
return function (view, params, tabContent) { return function (view, params, tabContent) {

View file

@ -1,4 +1,4 @@
define(['listView'], function (listView) { define(['listView', 'emby-itemscontainer'], function (listView) {
function renderItems(page, item) { function renderItems(page, item) {
@ -82,7 +82,7 @@
html += '<a href="#" class="clearLink hide" style="margin-left:1em;vertical-align:middle;"><button is="emby-button" type="button" class="raised more mini noIcon">' + Globalize.translate('ButtonMore') + '</button></a>'; html += '<a href="#" class="clearLink hide" style="margin-left:1em;vertical-align:middle;"><button is="emby-button" type="button" class="raised more mini noIcon">' + Globalize.translate('ButtonMore') + '</button></a>';
html += '</div>'; html += '</div>';
html += '<div class="itemsContainer">'; html += '<div is="emby-itemscontainer" class="itemsContainer">';
html += '</div>'; html += '</div>';
html += '</div>'; html += '</div>';

View file

@ -1,4 +1,4 @@
define(['libraryBrowser', 'alphaPicker', 'listView'], function (libraryBrowser, alphaPicker, listView) { define(['libraryBrowser', 'alphaPicker', 'listView', 'emby-itemscontainer'], function (libraryBrowser, alphaPicker, listView) {
return function (view, params) { return function (view, params) {

View file

@ -254,12 +254,15 @@
var displayContextItem = card; var displayContextItem = card;
if (!card.classList.contains('card') && !card.classList.contains('listItem')) { card = parentWithClass(card, 'card');
card = parentWithAnyClass(card, ['listItem', 'card']);
if (!card) {
return;
} }
var itemId = card.getAttribute('data-itemid'); var itemId = card.getAttribute('data-itemid');
var playlistItemId = card.getAttribute('data-playlistitemid'); var playlistItemId = card.getAttribute('data-playlistitemid');
var commands = card.getAttribute('data-commands').split(','); var commands = card.getAttribute('data-commands').split(',');
var itemType = card.getAttribute('data-itemtype'); var itemType = card.getAttribute('data-itemtype');
var mediaType = card.getAttribute('data-mediatype'); var mediaType = card.getAttribute('data-mediatype');

View file

@ -1,4 +1,4 @@
define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView'], function (events, libraryBrowser, imageLoader, alphaPicker, listView) { define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'emby-itemscontainer'], function (events, libraryBrowser, imageLoader, alphaPicker, listView) {
return function (view, params, tabContent) { return function (view, params, tabContent) {

View file

@ -1,4 +1,4 @@
define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView'], function (events, libraryBrowser, imageLoader, alphaPicker, listView) { define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'emby-itemscontainer'], function (events, libraryBrowser, imageLoader, alphaPicker, listView) {
return function (view, params, tabContent) { return function (view, params, tabContent) {

View file

@ -1,4 +1,4 @@
define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView'], function (events, libraryBrowser, imageLoader, alphaPicker, listView) { define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'emby-itemscontainer'], function (events, libraryBrowser, imageLoader, alphaPicker, listView) {
return function (view, params, tabContent) { return function (view, params, tabContent) {

View file

@ -1,4 +1,4 @@
define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView'], function (events, libraryBrowser, imageLoader, alphaPicker, listView) { define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'emby-itemscontainer'], function (events, libraryBrowser, imageLoader, alphaPicker, listView) {
return function (view, params, tabContent) { return function (view, params, tabContent) {

View file

@ -1,4 +1,4 @@
define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView'], function (events, libraryBrowser, imageLoader, alphaPicker, listView) { define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'emby-itemscontainer'], function (events, libraryBrowser, imageLoader, alphaPicker, listView) {
return function (view, params, tabContent) { return function (view, params, tabContent) {

View file

@ -67,37 +67,30 @@
showRemoveFromPlaylist: true, showRemoveFromPlaylist: true,
playFromHere: true, playFromHere: true,
action: 'playallfromhere', action: 'playallfromhere',
smallIcon: true smallIcon: true,
dragHandle: true
}); });
} }
var elem = page.querySelector('#childrenContent .itemsContainer'); var elem = page.querySelector('#childrenContent .itemsContainer');
elem.innerHTML = html; elem.innerHTML = html;
var listItems = []; var listParent = elem;
var elems = elem.querySelectorAll('.listItem');
for (var i = 0, length = elems.length; i < length; i++) {
listItems.push(elems[i]);
}
var listParent = elem.querySelector('.paperList'); require(['sortable'], function (Sortable) {
if (!AppInfo.isTouchPreferred) { var sortable = new Sortable(listParent, {
require(['sortable'], function (Sortable) {
var sortable = new Sortable(listParent, { draggable: ".listItem",
handle: '.listViewDragHandle',
draggable: ".listItem", // dragging ended
onEnd: function (/**Event*/evt) {
// dragging ended onDrop(evt, page, item);
onEnd: function (/**Event*/evt) { }
onDrop(evt, page, item);
}
});
}); });
} });
ImageLoader.lazyChildren(elem); ImageLoader.lazyChildren(elem);
LibraryBrowser.createCardMenus(elem); LibraryBrowser.createCardMenus(elem);
@ -117,14 +110,13 @@
function onDrop(evt, page, item) { function onDrop(evt, page, item) {
Dashboard.showLoadingMsg();
var el = evt.item; var el = evt.item;
var newIndex = evt.newIndex; var newIndex = evt.newIndex;
var itemId = el.getAttribute('data-playlistitemid'); var itemId = el.getAttribute('data-playlistitemid');
Dashboard.showLoadingMsg();
ApiClient.ajax({ ApiClient.ajax({
url: ApiClient.getUrl('Playlists/' + item.Id + '/Items/' + itemId + '/Move/' + newIndex), url: ApiClient.getUrl('Playlists/' + item.Id + '/Items/' + itemId + '/Move/' + newIndex),

View file

@ -1,4 +1,4 @@
define(['libraryBrowser', 'listView'], function (libraryBrowser, listView) { define(['libraryBrowser', 'listView', 'emby-itemscontainer'], function (libraryBrowser, listView) {
return function (view, params) { return function (view, params) {

View file

@ -1803,6 +1803,7 @@ var AppInfo = {};
define("emby-collapse", [embyWebComponentsBowerPath + "/emby-collapse/emby-collapse"], returnFirstDependency); define("emby-collapse", [embyWebComponentsBowerPath + "/emby-collapse/emby-collapse"], returnFirstDependency);
define("emby-button", [embyWebComponentsBowerPath + "/emby-button/emby-button"], returnFirstDependency); define("emby-button", [embyWebComponentsBowerPath + "/emby-button/emby-button"], returnFirstDependency);
define("emby-itemscontainer", [embyWebComponentsBowerPath + "/emby-itemscontainer/emby-itemscontainer"], returnFirstDependency);
define("alphaPicker", [embyWebComponentsBowerPath + "/alphapicker/alphapicker"], returnFirstDependency); define("alphaPicker", [embyWebComponentsBowerPath + "/alphapicker/alphapicker"], returnFirstDependency);
define("paper-icon-button-light", [embyWebComponentsBowerPath + "/emby-button/paper-icon-button-light"]); define("paper-icon-button-light", [embyWebComponentsBowerPath + "/emby-button/paper-icon-button-light"]);
@ -2021,6 +2022,9 @@ var AppInfo = {};
return { return {
isPlayingVideo: function () { isPlayingVideo: function () {
return false; return false;
},
play: function (options) {
MediaController.play(options);
} }
}; };
}); });
@ -2273,7 +2277,7 @@ var AppInfo = {};
var baseUrl = 'bower_components/emby-webcomponents/strings/'; var baseUrl = 'bower_components/emby-webcomponents/strings/';
var languages = ['da', 'de', 'en-US', 'es-MX', 'kk', 'nb', 'nl', 'pt-BR', 'pt-PT', 'ru', 'sv']; var languages = ['da', 'de', 'en-US', 'es-MX', 'kk', 'nb', 'nl', 'pt-BR', 'pt-PT', 'ru', 'sv', 'zh-TW'];
var translations = languages.map(function (i) { var translations = languages.map(function (i) {
return { return {
@ -2566,7 +2570,7 @@ var AppInfo = {};
defineRoute({ defineRoute({
path: '/itemdetails.html', path: '/itemdetails.html',
dependencies: ['emby-button', 'tileitemcss', 'scripts/livetvcomponents', 'paper-icon-button-light', 'listViewStyle'], dependencies: ['emby-button', 'tileitemcss', 'scripts/livetvcomponents', 'paper-icon-button-light', 'emby-itemscontainer'],
controller: 'scripts/itemdetailpage', controller: 'scripts/itemdetailpage',
autoFocus: false, autoFocus: false,
transition: 'fade' transition: 'fade'
@ -2836,7 +2840,7 @@ var AppInfo = {};
defineRoute({ defineRoute({
path: '/nowplaying.html', path: '/nowplaying.html',
dependencies: ['paper-icon-button-light', 'emby-slider', 'emby-button', 'emby-input'], dependencies: ['paper-icon-button-light', 'emby-slider', 'emby-button', 'emby-input', 'emby-itemscontainer'],
controller: 'scripts/nowplayingpage', controller: 'scripts/nowplayingpage',
autoFocus: false, autoFocus: false,
transition: 'fade' transition: 'fade'

View file

@ -1,4 +1,4 @@
define(['events', 'libraryBrowser', 'imageLoader', 'listView'], function (events, libraryBrowser, imageLoader, listView) { define(['events', 'libraryBrowser', 'imageLoader', 'listView', 'emby-itemscontainer'], function (events, libraryBrowser, imageLoader, listView) {
return function (view, params, tabContent) { return function (view, params, tabContent) {

View file

@ -1,4 +1,4 @@
define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView'], function (events, libraryBrowser, imageLoader, alphaPicker, listView) { define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'emby-itemscontainer'], function (events, libraryBrowser, imageLoader, alphaPicker, listView) {
return function (view, params, tabContent) { return function (view, params, tabContent) {

View file

@ -5,7 +5,7 @@
<div class="listTopPaging"> <div class="listTopPaging">
</div> </div>
</div> </div>
<div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div> <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
</div> </div>
</div> </div>

View file

@ -73,7 +73,7 @@
<div class="alphaPicker alphabetPicker vertical"> <div class="alphaPicker alphabetPicker vertical">
</div> </div>
<div class="itemsContainer itemsContainerWithAlphaPicker"> <div is="emby-itemscontainer" class="itemsContainer itemsContainerWithAlphaPicker">
</div> </div>
<div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;"> <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
<div class="paging"></div> <div class="paging"></div>
@ -86,7 +86,7 @@
<button is="paper-icon-button-light" class="btnSort autoSize" title="${ButtonSort}"><i class="md-icon">sort_by_alpha</i></button> <button is="paper-icon-button-light" class="btnSort autoSize" title="${ButtonSort}"><i class="md-icon">sort_by_alpha</i></button>
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button> <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button>
</div> </div>
<div class="itemsContainer"> <div is="emby-itemscontainer" class="itemsContainer">
</div> </div>
<div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;"> <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
<div class="paging"></div> <div class="paging"></div>