1
0
Fork 0
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:
Luke Pulverenti 2016-08-20 17:58:28 -04:00
parent f53cb1ca8a
commit b7eaf270a1
13 changed files with 165 additions and 37 deletions

View file

@ -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",

View file

@ -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,

View file

@ -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,

View file

@ -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');
} }
} }

View 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;
// }
//});
});

View file

@ -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']);
} }

View file

@ -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"
} }

View file

@ -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%);
} }

View file

@ -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",

View file

@ -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({

View file

@ -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", {

View file

@ -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));
} }

View file

@ -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 = {