mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
reduce direct dom access
This commit is contained in:
parent
f53cb1ca8a
commit
b7eaf270a1
13 changed files with 165 additions and 37 deletions
|
@ -14,12 +14,12 @@
|
||||||
},
|
},
|
||||||
"devDependencies": {},
|
"devDependencies": {},
|
||||||
"ignore": [],
|
"ignore": [],
|
||||||
"version": "1.4.176",
|
"version": "1.4.177",
|
||||||
"_release": "1.4.176",
|
"_release": "1.4.177",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "1.4.176",
|
"tag": "1.4.177",
|
||||||
"commit": "a69a071e40e18eb0f20b800f27de8f1c62c38fec"
|
"commit": "be084e7c414a4cd619a6b801fa953f12c729ff03"
|
||||||
},
|
},
|
||||||
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
|
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
|
||||||
"_target": "^1.2.1",
|
"_target": "^1.2.1",
|
||||||
|
|
|
@ -171,8 +171,6 @@ define(['dom'], function (dom) {
|
||||||
function getWindowData(win, documentElement) {
|
function getWindowData(win, documentElement) {
|
||||||
|
|
||||||
return {
|
return {
|
||||||
pageYOffset: win.pageYOffset,
|
|
||||||
pageXOffset: win.pageXOffset,
|
|
||||||
clientTop: documentElement.clientTop,
|
clientTop: documentElement.clientTop,
|
||||||
clientLeft: documentElement.clientLeft
|
clientLeft: documentElement.clientLeft
|
||||||
};
|
};
|
||||||
|
@ -180,16 +178,25 @@ define(['dom'], function (dom) {
|
||||||
|
|
||||||
function getOffset(elem, windowData) {
|
function getOffset(elem, windowData) {
|
||||||
|
|
||||||
var box = { top: 0, left: 0 };
|
var box;
|
||||||
|
|
||||||
// Support: BlackBerry 5, iOS 3 (original iPhone)
|
// Support: BlackBerry 5, iOS 3 (original iPhone)
|
||||||
// If we don't have gBCR, just use 0,0 rather than error
|
// If we don't have gBCR, just use 0,0 rather than error
|
||||||
if (elem.getBoundingClientRect) {
|
if (elem.getBoundingClientRect) {
|
||||||
box = elem.getBoundingClientRect();
|
box = elem.getBoundingClientRect();
|
||||||
|
} else {
|
||||||
|
box = {
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
width: 0,
|
||||||
|
height: 0
|
||||||
|
};
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
top: box.top + windowData.pageYOffset - windowData.clientTop,
|
top: box.top - windowData.clientTop,
|
||||||
left: box.left + windowData.pageXOffset - windowData.clientLeft
|
left: box.left - windowData.clientLeft,
|
||||||
|
width: box.width,
|
||||||
|
height: box.height
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -197,11 +204,13 @@ define(['dom'], function (dom) {
|
||||||
|
|
||||||
var offset = getOffset(elem, windowData);
|
var offset = getOffset(elem, windowData);
|
||||||
|
|
||||||
var posY = offset.top - windowData.pageYOffset;
|
var posY = offset.top;
|
||||||
var posX = offset.left - windowData.pageXOffset;
|
var posX = offset.left;
|
||||||
|
|
||||||
var width = elem.offsetWidth;
|
var width = offset.width;
|
||||||
var height = elem.offsetHeight;
|
var height = offset.height;
|
||||||
|
//var width = elem.offsetWidth;
|
||||||
|
//var height = elem.offsetHeight;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
left: posX,
|
left: posX,
|
||||||
|
|
|
@ -407,8 +407,7 @@
|
||||||
// Normally we'd want to just let responsive css handle this,
|
// Normally we'd want to just let responsive css handle this,
|
||||||
// but since mobile browsers are often underpowered,
|
// but since mobile browsers are often underpowered,
|
||||||
// it can help performance to get them out of the markup
|
// it can help performance to get them out of the markup
|
||||||
var showIndicators = window.innerWidth >= 800;
|
var showIndicators = false;
|
||||||
showIndicators = false;
|
|
||||||
|
|
||||||
var options = {
|
var options = {
|
||||||
showHdIcon: showIndicators,
|
showHdIcon: showIndicators,
|
||||||
|
|
|
@ -557,18 +557,33 @@ define(['loading', 'viewManager', 'skinManager', 'pluginManager', 'backdrop', 'b
|
||||||
return allRoutes;
|
return allRoutes;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var backdropContainer;
|
||||||
|
var backgroundContainer;
|
||||||
function setTransparency(level) {
|
function setTransparency(level) {
|
||||||
|
|
||||||
|
if (!backdropContainer) {
|
||||||
|
backdropContainer = document.querySelector('.backdropContainer');
|
||||||
|
}
|
||||||
|
if (!backgroundContainer) {
|
||||||
|
backgroundContainer = document.querySelector('.backgroundContainer');
|
||||||
|
}
|
||||||
|
|
||||||
if (level == 'full' || level == Emby.TransparencyLevel.Full) {
|
if (level == 'full' || level == Emby.TransparencyLevel.Full) {
|
||||||
backdrop.clear(true);
|
backdrop.clear(true);
|
||||||
document.documentElement.classList.add('transparentDocument');
|
document.documentElement.classList.add('transparentDocument');
|
||||||
|
backgroundContainer.classList.add('backgroundContainer-transparent');
|
||||||
|
backdropContainer.classList.add('hide');
|
||||||
}
|
}
|
||||||
else if (level == 'backdrop' || level == Emby.TransparencyLevel.Backdrop) {
|
else if (level == 'backdrop' || level == Emby.TransparencyLevel.Backdrop) {
|
||||||
backdrop.externalBackdrop(true);
|
backdrop.externalBackdrop(true);
|
||||||
document.documentElement.classList.add('transparentDocument');
|
document.documentElement.classList.add('transparentDocument');
|
||||||
|
backgroundContainer.classList.add('backgroundContainer-transparent');
|
||||||
|
backdropContainer.classList.add('hide');
|
||||||
} else {
|
} else {
|
||||||
backdrop.externalBackdrop(false);
|
backdrop.externalBackdrop(false);
|
||||||
document.documentElement.classList.remove('transparentDocument');
|
document.documentElement.classList.remove('transparentDocument');
|
||||||
|
backgroundContainer.classList.remove('backgroundContainer-transparent');
|
||||||
|
backdropContainer.classList.remove('hide');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
100
dashboard-ui/bower_components/emby-webcomponents/thememediaplayer.js
vendored
Normal file
100
dashboard-ui/bower_components/emby-webcomponents/thememediaplayer.js
vendored
Normal file
|
@ -0,0 +1,100 @@
|
||||||
|
define(['playbackManager', 'browser'], function (playbackManager, browser) {
|
||||||
|
|
||||||
|
var currentOwnerId;
|
||||||
|
var currentThemeIds = [];
|
||||||
|
|
||||||
|
function playThemeMedia(items, ownerId) {
|
||||||
|
|
||||||
|
if (items.length) {
|
||||||
|
|
||||||
|
// Stop if a theme song from another ownerId
|
||||||
|
// Leave it alone if anything else (e.g user playing a movie)
|
||||||
|
if (!currentOwnerId && playbackManager.isPlaying()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
currentThemeIds = items.map(function (i) {
|
||||||
|
return i.Id;
|
||||||
|
});
|
||||||
|
|
||||||
|
currentOwnerId = ownerId;
|
||||||
|
|
||||||
|
if (enabled(items[0].MediaType)) {
|
||||||
|
playbackManager.play({
|
||||||
|
items: items,
|
||||||
|
fullscreen: false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
if (currentOwnerId) {
|
||||||
|
playbackManager.stop();
|
||||||
|
}
|
||||||
|
|
||||||
|
currentOwnerId = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function enabled(mediaType) {
|
||||||
|
|
||||||
|
if (mediaType == 'Video') {
|
||||||
|
// too slow
|
||||||
|
if (browser.slow) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadThemeMedia(item) {
|
||||||
|
|
||||||
|
require(['connectionManager'], function (connectionManager) {
|
||||||
|
|
||||||
|
var apiClient = connectionManager.currentApiClient();
|
||||||
|
apiClient.getThemeMedia(apiClient.getCurrentUserId(), item.Id, true).then(function (themeMediaResult) {
|
||||||
|
|
||||||
|
var ownerId = themeMediaResult.ThemeVideosResult.Items.length ? themeMediaResult.ThemeVideosResult.OwnerId : themeMediaResult.ThemeSongsResult.OwnerId;
|
||||||
|
|
||||||
|
if (ownerId != currentOwnerId) {
|
||||||
|
|
||||||
|
var items = themeMediaResult.ThemeVideosResult.Items.length ? themeMediaResult.ThemeVideosResult.Items : themeMediaResult.ThemeSongsResult.Items;
|
||||||
|
|
||||||
|
playThemeMedia(items, ownerId);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('viewshow', function (e) {
|
||||||
|
|
||||||
|
var state = e.detail.state || {};
|
||||||
|
var item = state.item;
|
||||||
|
|
||||||
|
if (item) {
|
||||||
|
loadThemeMedia(item);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var viewOptions = e.detail.options || {};
|
||||||
|
|
||||||
|
if (viewOptions.supportsThemeMedia) {
|
||||||
|
// Do nothing here, allow it to keep playing
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
playThemeMedia([], null);
|
||||||
|
}
|
||||||
|
|
||||||
|
}, true);
|
||||||
|
|
||||||
|
//Events.on(Emby.PlaybackManager, 'playbackstart', function (e, player) {
|
||||||
|
// var item = Emby.PlaybackManager.currentItem(player);
|
||||||
|
// // User played something manually
|
||||||
|
// if (currentThemeIds.indexOf(item.Id) == -1) {
|
||||||
|
// currentOwnerId = null;
|
||||||
|
// }
|
||||||
|
//});
|
||||||
|
|
||||||
|
});
|
|
@ -8,6 +8,10 @@ define(['browser', 'css!./viewcontainer-lite'], function (browser) {
|
||||||
|
|
||||||
function enableAnimation() {
|
function enableAnimation() {
|
||||||
|
|
||||||
|
if (browser.animate) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
if (browser.tv) {
|
if (browser.tv) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
@ -261,7 +265,7 @@ define(['browser', 'css!./viewcontainer-lite'], function (browser) {
|
||||||
selectedPageIndex = -1;
|
selectedPageIndex = -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (enableAnimation() && !browser.animate) {
|
if (enableAnimation()) {
|
||||||
require(['webAnimations']);
|
require(['webAnimations']);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -32,14 +32,14 @@
|
||||||
"iron-component-page": "polymerElements/iron-component-page#^1.1.6"
|
"iron-component-page": "polymerElements/iron-component-page#^1.1.6"
|
||||||
},
|
},
|
||||||
"private": true,
|
"private": true,
|
||||||
"homepage": "https://github.com/Polymer/polymer",
|
"homepage": "https://github.com/polymer/polymer",
|
||||||
"_release": "1.6.1",
|
"_release": "1.6.1",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v1.6.1",
|
"tag": "v1.6.1",
|
||||||
"commit": "1f197d9d7874b1e5808b2a5c26f34446a7d912fc"
|
"commit": "1f197d9d7874b1e5808b2a5c26f34446a7d912fc"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/Polymer/polymer.git",
|
"_source": "git://github.com/polymer/polymer.git",
|
||||||
"_target": "^1.1.0",
|
"_target": "^1.1.0",
|
||||||
"_originalSource": "Polymer/polymer"
|
"_originalSource": "polymer/polymer"
|
||||||
}
|
}
|
|
@ -1,5 +1,6 @@
|
||||||
.appfooter {
|
.appfooter {
|
||||||
background: #1c1c1c;
|
background: #1c1c1c;
|
||||||
|
/*background: #222326;*/
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
@ -8,6 +9,6 @@
|
||||||
transition: transform 180ms linear;
|
transition: transform 180ms linear;
|
||||||
}
|
}
|
||||||
|
|
||||||
.appfooter.headroom--unpinned {
|
.appfooter.headroom--unpinned {
|
||||||
transform: translateY(100%);
|
transform: translateY(100%);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
define(['libraryBrowser', 'cardBuilder', 'scrollStyles', 'emby-itemscontainer'], function (libraryBrowser, cardBuilder) {
|
define(['libraryBrowser', 'cardBuilder', 'dom', 'scrollStyles', 'emby-itemscontainer'], function (libraryBrowser, cardBuilder, dom) {
|
||||||
|
|
||||||
function enableScrollX() {
|
function enableScrollX() {
|
||||||
return browserInfo.mobile && AppInfo.enableAppLayouts;
|
return browserInfo.mobile && AppInfo.enableAppLayouts;
|
||||||
|
@ -31,7 +31,7 @@
|
||||||
|
|
||||||
function loadSection(elem, userId, topParentId, section, isSingleSection) {
|
function loadSection(elem, userId, topParentId, section, isSingleSection) {
|
||||||
|
|
||||||
var screenWidth = window.innerWidth;
|
var screenWidth = dom.getWindowSize().innerWidth;
|
||||||
var options = {
|
var options = {
|
||||||
|
|
||||||
SortBy: "SortName",
|
SortBy: "SortName",
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
define(['jQuery', 'cardBuilder'], function ($, cardBuilder) {
|
define(['jQuery', 'cardBuilder', 'dom'], function ($, cardBuilder, dom) {
|
||||||
|
|
||||||
// The base query options
|
// The base query options
|
||||||
var query = {
|
var query = {
|
||||||
|
@ -29,7 +29,7 @@
|
||||||
|
|
||||||
updateFilterControls();
|
updateFilterControls();
|
||||||
|
|
||||||
var screenWidth = window.innerWidth;
|
var screenWidth = dom.getWindowSize().innerWidth;
|
||||||
|
|
||||||
html += cardBuilder.getCardsHtml({
|
html += cardBuilder.getCardsHtml({
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
define(['libraryBrowser', 'components/categorysyncbuttons', 'cardBuilder', 'scrollStyles', 'emby-itemscontainer', 'emby-tabs', 'emby-button'], function (libraryBrowser, categorysyncbuttons, cardBuilder) {
|
define(['libraryBrowser', 'components/categorysyncbuttons', 'cardBuilder', 'dom', 'scrollStyles', 'emby-itemscontainer', 'emby-tabs', 'emby-button'], function (libraryBrowser, categorysyncbuttons, cardBuilder, dom) {
|
||||||
|
|
||||||
function enableScrollX() {
|
function enableScrollX() {
|
||||||
return browserInfo.mobile && AppInfo.enableAppLayouts;
|
return browserInfo.mobile && AppInfo.enableAppLayouts;
|
||||||
|
@ -42,7 +42,7 @@
|
||||||
|
|
||||||
function loadResume(page, userId, parentId) {
|
function loadResume(page, userId, parentId) {
|
||||||
|
|
||||||
var screenWidth = window.innerWidth;
|
var screenWidth = dom.getWindowSize().innerWidth;
|
||||||
|
|
||||||
var options = {
|
var options = {
|
||||||
|
|
||||||
|
@ -134,7 +134,7 @@
|
||||||
|
|
||||||
function loadSuggestions(page, userId, parentId) {
|
function loadSuggestions(page, userId, parentId) {
|
||||||
|
|
||||||
var screenWidth = window.innerWidth;
|
var screenWidth = dom.getWindowSize().innerWidth;
|
||||||
|
|
||||||
var url = ApiClient.getUrl("Movies/Recommendations", {
|
var url = ApiClient.getUrl("Movies/Recommendations", {
|
||||||
|
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
define(['libraryBrowser', 'cardBuilder', 'scrollStyles', 'emby-itemscontainer', 'emby-tabs', 'emby-button'], function (libraryBrowser, cardBuilder) {
|
define(['libraryBrowser', 'cardBuilder', 'dom', 'scrollStyles', 'emby-itemscontainer', 'emby-tabs', 'emby-button'], function (libraryBrowser, cardBuilder, dom) {
|
||||||
|
|
||||||
function itemsPerRow() {
|
function itemsPerRow() {
|
||||||
|
|
||||||
var screenWidth = window.innerWidth;
|
var screenWidth = dom.getWindowSize().innerWidth;
|
||||||
|
|
||||||
return screenWidth >= 1920 ? 9 : (screenWidth >= 1200 ? 12 : (screenWidth >= 1000 ? 10 : 8));
|
return screenWidth >= 1920 ? 9 : (screenWidth >= 1200 ? 12 : (screenWidth >= 1000 ? 10 : 8));
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
define(['libraryBrowser', 'cardBuilder', 'appSettings', 'components/groupedcards', 'scrollStyles', 'emby-button', 'paper-icon-button-light', 'emby-itemscontainer'], function (LibraryBrowser, cardBuilder, appSettings, groupedcards) {
|
define(['libraryBrowser', 'cardBuilder', 'appSettings', 'components/groupedcards', 'dom', 'scrollStyles', 'emby-button', 'paper-icon-button-light', 'emby-itemscontainer'], function (libraryBrowser, cardBuilder, appSettings, groupedcards, dom) {
|
||||||
|
|
||||||
function getUserViews(userId) {
|
function getUserViews(userId) {
|
||||||
|
|
||||||
|
@ -95,7 +95,7 @@
|
||||||
cssClass += ' ' + item.CollectionType + 'buttonCard';
|
cssClass += ' ' + item.CollectionType + 'buttonCard';
|
||||||
}
|
}
|
||||||
|
|
||||||
var href = item.url || LibraryBrowser.getHref(item);
|
var href = item.url || libraryBrowser.getHref(item);
|
||||||
var onclick = item.onclick ? ' onclick="' + item.onclick + '"' : '';
|
var onclick = item.onclick ? ' onclick="' + item.onclick + '"' : '';
|
||||||
|
|
||||||
icon = item.icon || icon;
|
icon = item.icon || icon;
|
||||||
|
@ -402,7 +402,7 @@
|
||||||
|
|
||||||
function loadLatestChannelMedia(elem, userId) {
|
function loadLatestChannelMedia(elem, userId) {
|
||||||
|
|
||||||
var screenWidth = window.innerWidth;
|
var screenWidth = dom.getWindowSize().innerWidth;
|
||||||
|
|
||||||
var options = {
|
var options = {
|
||||||
|
|
||||||
|
@ -451,7 +451,7 @@
|
||||||
|
|
||||||
if (items.length) {
|
if (items.length) {
|
||||||
|
|
||||||
var screenWidth = window.innerWidth;
|
var screenWidth = dom.getWindowSize().innerWidth;
|
||||||
|
|
||||||
html += '<div>';
|
html += '<div>';
|
||||||
html += '<h1 class="listHeader">' + Globalize.translate('HeaderMyMedia') + '</h1>';
|
html += '<h1 class="listHeader">' + Globalize.translate('HeaderMyMedia') + '</h1>';
|
||||||
|
@ -495,7 +495,7 @@
|
||||||
|
|
||||||
function loadResume(elem, userId) {
|
function loadResume(elem, userId) {
|
||||||
|
|
||||||
var screenWidth = window.innerWidth;
|
var screenWidth = dom.getWindowSize().innerWidth;
|
||||||
|
|
||||||
var options = {
|
var options = {
|
||||||
|
|
||||||
|
@ -621,7 +621,7 @@
|
||||||
|
|
||||||
function loadLatestChannelItemsFromChannel(page, channel, index) {
|
function loadLatestChannelItemsFromChannel(page, channel, index) {
|
||||||
|
|
||||||
var screenWidth = window.innerWidth;
|
var screenWidth = dom.getWindowSize().innerWidth;
|
||||||
|
|
||||||
var options = {
|
var options = {
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue