mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update tabs
This commit is contained in:
parent
516c5715a1
commit
26dcecb51f
29 changed files with 535 additions and 501 deletions
|
@ -16,12 +16,12 @@
|
||||||
},
|
},
|
||||||
"devDependencies": {},
|
"devDependencies": {},
|
||||||
"ignore": [],
|
"ignore": [],
|
||||||
"version": "1.3.25",
|
"version": "1.3.26",
|
||||||
"_release": "1.3.25",
|
"_release": "1.3.26",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "1.3.25",
|
"tag": "1.3.26",
|
||||||
"commit": "004eca200cd748222897d11f6bd92a29899d7945"
|
"commit": "094d2fc7c9e0c008e1c44744da95a69d1aa6516f"
|
||||||
},
|
},
|
||||||
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
|
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
|
||||||
"_target": "^1.2.0",
|
"_target": "^1.2.0",
|
||||||
|
|
|
@ -24,10 +24,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.formDialog .dialogContentInner {
|
.formDialog .dialogContentInner {
|
||||||
padding-bottom: 50vh;
|
padding-bottom: 10vh;
|
||||||
padding-top: 1em;
|
padding-top: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.layout-tv .formDialog .dialogContentInner {
|
||||||
|
padding-bottom: 50vh;
|
||||||
|
}
|
||||||
|
|
||||||
@media all and (min-width: 1000px) {
|
@media all and (min-width: 1000px) {
|
||||||
|
|
||||||
.formDialog form {
|
.formDialog form {
|
||||||
|
|
|
@ -49,5 +49,5 @@
|
||||||
"Download": "Download",
|
"Download": "Download",
|
||||||
"Advanced": "Advanced",
|
"Advanced": "Advanced",
|
||||||
"Refresh": "Refresh",
|
"Refresh": "Refresh",
|
||||||
"RefreshQueued": "Refresh queued"
|
"RefreshQueued": "Refresh queued."
|
||||||
}
|
}
|
|
@ -30,14 +30,14 @@
|
||||||
"web-component-tester": "polymer/web-component-tester#^3.4.0"
|
"web-component-tester": "polymer/web-component-tester#^3.4.0"
|
||||||
},
|
},
|
||||||
"ignore": [],
|
"ignore": [],
|
||||||
"homepage": "https://github.com/polymerelements/iron-a11y-announcer",
|
"homepage": "https://github.com/PolymerElements/iron-a11y-announcer",
|
||||||
"_release": "1.0.4",
|
"_release": "1.0.4",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v1.0.4",
|
"tag": "v1.0.4",
|
||||||
"commit": "5ce3eb8c4282bb53cd72e348858dc6be6b4c50b9"
|
"commit": "5ce3eb8c4282bb53cd72e348858dc6be6b4c50b9"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/polymerelements/iron-a11y-announcer.git",
|
"_source": "git://github.com/PolymerElements/iron-a11y-announcer.git",
|
||||||
"_target": "^1.0.0",
|
"_target": "^1.0.0",
|
||||||
"_originalSource": "polymerelements/iron-a11y-announcer"
|
"_originalSource": "PolymerElements/iron-a11y-announcer"
|
||||||
}
|
}
|
|
@ -36,7 +36,7 @@
|
||||||
"tag": "v1.5.1",
|
"tag": "v1.5.1",
|
||||||
"commit": "e3e34408fad8f7cde59c4255cf3fe90f7dcf91d8"
|
"commit": "e3e34408fad8f7cde59c4255cf3fe90f7dcf91d8"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/polymerelements/iron-selector.git",
|
"_source": "git://github.com/PolymerElements/iron-selector.git",
|
||||||
"_target": "^1.0.0",
|
"_target": "^1.0.0",
|
||||||
"_originalSource": "polymerelements/iron-selector"
|
"_originalSource": "PolymerElements/iron-selector"
|
||||||
}
|
}
|
|
@ -45,7 +45,7 @@
|
||||||
"tag": "v1.0.11",
|
"tag": "v1.0.11",
|
||||||
"commit": "e3c1ab0c72905b58fb4d9adc2921ea73b5c085a5"
|
"commit": "e3c1ab0c72905b58fb4d9adc2921ea73b5c085a5"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/PolymerElements/paper-behaviors.git",
|
"_source": "git://github.com/polymerelements/paper-behaviors.git",
|
||||||
"_target": "^1.0.0",
|
"_target": "^1.0.0",
|
||||||
"_originalSource": "PolymerElements/paper-behaviors"
|
"_originalSource": "polymerelements/paper-behaviors"
|
||||||
}
|
}
|
|
@ -32,14 +32,14 @@
|
||||||
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0"
|
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0"
|
||||||
},
|
},
|
||||||
"ignore": [],
|
"ignore": [],
|
||||||
"homepage": "https://github.com/PolymerElements/paper-ripple",
|
"homepage": "https://github.com/polymerelements/paper-ripple",
|
||||||
"_release": "1.0.5",
|
"_release": "1.0.5",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v1.0.5",
|
"tag": "v1.0.5",
|
||||||
"commit": "d72e7a9a8ab518b901ed18dde492df3b87a93be5"
|
"commit": "d72e7a9a8ab518b901ed18dde492df3b87a93be5"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/PolymerElements/paper-ripple.git",
|
"_source": "git://github.com/polymerelements/paper-ripple.git",
|
||||||
"_target": "^1.0.0",
|
"_target": "^1.0.0",
|
||||||
"_originalSource": "PolymerElements/paper-ripple"
|
"_originalSource": "polymerelements/paper-ripple"
|
||||||
}
|
}
|
|
@ -34,6 +34,6 @@
|
||||||
"commit": "11c987b2eb3c73b388a79fc8aaea8ca01624f514"
|
"commit": "11c987b2eb3c73b388a79fc8aaea8ca01624f514"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/Polymer/polymer.git",
|
"_source": "git://github.com/Polymer/polymer.git",
|
||||||
"_target": "^1.1.0",
|
"_target": "^1.0.0",
|
||||||
"_originalSource": "Polymer/polymer"
|
"_originalSource": "Polymer/polymer"
|
||||||
}
|
}
|
|
@ -1,21 +1,17 @@
|
||||||
<div id="channelsPage" data-role="page" data-dom-cache="true" class="page libraryPage channelsPage pageWithAbsoluteTabs" data-contextname="${HeaderChannels}" data-require="scripts/channels,scripts/channelslatest,scripts/sections,MaterialTabs">
|
<div id="channelsPage" data-role="page" data-dom-cache="true" class="page libraryPage channelsPage pageWithAbsoluteTabs" data-contextname="${HeaderChannels}" data-require="scripts/channels,scripts/channelslatest,scripts/sections">
|
||||||
|
|
||||||
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
|
|
||||||
<div class="libraryViewNav">
|
<div class="libraryViewNav">
|
||||||
<div class="mdl-tabs__tab-bar">
|
<button class="pageTabButton is-active" data-index="0">${TabLatest}</button>
|
||||||
<a href="#latestTab" class="mdl-tabs__tab is-active" data-index="0">${TabLatest}</a>
|
<button class="pageTabButton" data-index="1">${TabChannels}</button>
|
||||||
<a href="#channelsTab" class="mdl-tabs__tab" data-index="1">${TabChannels}</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="is-active pageTabContent ehsContent" id="latestTab" data-index="0">
|
||||||
<div class="mdl-tabs__panel is-active pageTabContent ehsContent" id="latestTab" data-index="0">
|
|
||||||
<div class="latestItems"></div>
|
<div class="latestItems"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mdl-tabs__panel pageTabContent ehsContent" id="channelsTab" data-index="1">
|
<div class="pageTabContent ehsContent" id="channelsTab" data-index="1">
|
||||||
<div class="viewSettings">
|
<div class="viewSettings">
|
||||||
</div>
|
</div>
|
||||||
<div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
|
<div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div data-role="content">
|
<div data-role="content">
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -32,12 +32,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
var menuItem = {
|
var menuItem = {
|
||||||
name: name,
|
name: s.DisplayTitle || name,
|
||||||
id: s.Index
|
id: s.Index
|
||||||
};
|
};
|
||||||
|
|
||||||
if (s.Index == currentIndex) {
|
if (s.Index == currentIndex) {
|
||||||
menuItem.ironIcon = 'check';
|
menuItem.selected = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
return menuItem;
|
return menuItem;
|
||||||
|
@ -83,12 +83,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
var menuItem = {
|
var menuItem = {
|
||||||
name: name,
|
name: s.DisplayTitle || name,
|
||||||
id: s.Index
|
id: s.Index
|
||||||
};
|
};
|
||||||
|
|
||||||
if (s.Index == currentIndex) {
|
if (s.Index == currentIndex) {
|
||||||
menuItem.ironIcon = 'check';
|
menuItem.selected = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
return menuItem;
|
return menuItem;
|
||||||
|
@ -459,7 +459,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
function isPlaylistOpen(context) {
|
function isPlaylistOpen(context) {
|
||||||
return libraryBrowser.selectedTab(context.querySelector('.mdl-tabs')) == 2;
|
return libraryBrowser.selectedTab(context.querySelector('.libraryViewNav')) == 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
function onStateChanged(e, state) {
|
function onStateChanged(e, state) {
|
||||||
|
@ -813,7 +813,7 @@
|
||||||
// showSlideshowMenu(context);
|
// showSlideshowMenu(context);
|
||||||
//});
|
//});
|
||||||
|
|
||||||
var mdlTabs = context.querySelector('.mdl-tabs');
|
var mdlTabs = context.querySelector('.libraryViewNav');
|
||||||
|
|
||||||
if (AppInfo.enableNowPlayingPageBottomTabs) {
|
if (AppInfo.enableNowPlayingPageBottomTabs) {
|
||||||
context.querySelector('.libraryViewNav').classList.add('bottom');
|
context.querySelector('.libraryViewNav').classList.add('bottom');
|
||||||
|
@ -821,7 +821,7 @@
|
||||||
context.querySelector('.libraryViewNav').classList.remove('bottom');
|
context.querySelector('.libraryViewNav').classList.remove('bottom');
|
||||||
}
|
}
|
||||||
|
|
||||||
libraryBrowser.configurePaperLibraryTabs(ownerView, mdlTabs);
|
libraryBrowser.configurePaperLibraryTabs(ownerView, mdlTabs, ownerView.querySelectorAll('.pageTabContent'));
|
||||||
|
|
||||||
mdlTabs.addEventListener('tabchange', function (e) {
|
mdlTabs.addEventListener('tabchange', function (e) {
|
||||||
if (e.detail.selectedTabIndex == 2 && playlistNeedsRefresh) {
|
if (e.detail.selectedTabIndex == 2 && playlistNeedsRefresh) {
|
||||||
|
@ -862,7 +862,6 @@
|
||||||
context.querySelector('.topRightContainer').style.position = 'relative';
|
context.querySelector('.topRightContainer').style.position = 'relative';
|
||||||
}
|
}
|
||||||
|
|
||||||
componentHandler.upgradeAllRegistered(dlg);
|
|
||||||
init(ownerView, dlg);
|
init(ownerView, dlg);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -29,6 +29,10 @@
|
||||||
bottom: -92px !important;
|
bottom: -92px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pageTabContent:not(.is-active) {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
.sidebarDivider {
|
.sidebarDivider {
|
||||||
height: 1px;
|
height: 1px;
|
||||||
background: #eaeaea;
|
background: #eaeaea;
|
||||||
|
@ -181,50 +185,70 @@
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
padding: 0 0 0;
|
padding: 0 0 0;
|
||||||
overflow-x: scroll;
|
|
||||||
-ms-overflow-style: none;
|
|
||||||
overflow: -moz-scrollbars-none;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
|
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.libraryViewNav.bottom {
|
.libraryViewNav.bottom {
|
||||||
top: auto!important;
|
top: auto !important;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.libraryViewNav .mdl-tabs__tab-bar {
|
.libraryViewNav {
|
||||||
-webkit-justify-content: initial;
|
justify-content: center;
|
||||||
justify-content: initial;
|
display: flex;
|
||||||
display: inline-flex;
|
display: block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.libraryViewNav .pageTabButton {
|
||||||
.libraryViewNav .mdl-tabs__tab {
|
background: transparent;
|
||||||
color: #aaa !important;
|
border: 0 !important;
|
||||||
padding: 0 1.25em;
|
cursor: pointer;
|
||||||
float: none;
|
outline: none !important;
|
||||||
|
width: auto;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
color: #999 !important;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
margin: 0;
|
||||||
|
padding: 1.2em .9em;
|
||||||
|
transition: none !important;
|
||||||
|
position: relative;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 500 !important;
|
||||||
|
height: auto;
|
||||||
|
min-width: initial;
|
||||||
|
line-height: initial;
|
||||||
}
|
}
|
||||||
|
|
||||||
.libraryViewNav .mdl-tabs__tab.is-active {
|
.libraryViewNav .pageTabButton:focus {
|
||||||
|
font-weight: 500 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.libraryViewNav .pageTabButton.is-active {
|
||||||
color: #fff !important;
|
color: #fff !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.libraryViewNav .mdl-tabs__tab.is-active:after {
|
.libraryViewNav .pageTabButton:before {
|
||||||
background: #52B54B !important;
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
border: 0;
|
||||||
|
bottom: 0;
|
||||||
|
height: 2px;
|
||||||
|
transition: all .12s cubic-bezier(.4,0,1,1);
|
||||||
|
right: 0;
|
||||||
|
transform: translateX(-100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.libraryViewNav::-webkit-scrollbar {
|
.libraryViewNav .pageTabButton.is-active:before {
|
||||||
height: 0 !important;
|
transform: none;
|
||||||
display: none;
|
background: #52B54B;
|
||||||
}
|
|
||||||
|
|
||||||
.libraryViewNav .mdl-tabs__tab .mdl-tabs__ripple-container .mdl-ripple {
|
|
||||||
background: #52B54B !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.viewMenuBar, .libraryViewNav {
|
.viewMenuBar, .libraryViewNav {
|
||||||
|
|
|
@ -2,17 +2,21 @@
|
||||||
font-weight: bold !important;
|
font-weight: bold !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.libraryViewNav .mdl-tabs__tab {
|
.libraryViewNav .pageTabButton {
|
||||||
font-weight: bold !important;
|
font-weight: bold !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.libraryViewNav .pageTabButton:focus {
|
||||||
|
font-weight: bold !important;
|
||||||
|
}
|
||||||
|
|
||||||
@media all and (min-width: 300px) {
|
@media all and (min-width: 300px) {
|
||||||
|
|
||||||
.libraryViewNav .mdl-tabs__tab-bar {
|
.libraryViewNav {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.libraryViewNav .mdl-tabs__tab {
|
.libraryViewNav .pageTabButton {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -59,15 +59,11 @@ body:not(.dashboardDocument) .mainDrawerButton {
|
||||||
padding: 12px 13px 8px;
|
padding: 12px 13px 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.libraryViewNav .mdl-tabs__ripple-container {
|
.libraryViewNav .pageTabButton.is-active:after {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.libraryViewNav .mdl-tabs__tab.is-active:after {
|
.libraryViewNav .pageTabButton.is-active {
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.libraryViewNav .mdl-tabs__tab.is-active {
|
|
||||||
color: #52B54B !important;
|
color: #52B54B !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,15 +1,12 @@
|
||||||
<div id="indexPage" style="outline: none;" data-role="page" data-dom-cache="true" class="page homePage libraryPage allLibraryPage backdropPage pageWithAbsoluteTabs" data-title="${ButtonHome}" data-backdroptype="movie,series,game,book">
|
<div id="indexPage" style="outline: none;" data-role="page" data-dom-cache="true" class="page homePage libraryPage allLibraryPage backdropPage pageWithAbsoluteTabs" data-title="${ButtonHome}" data-backdroptype="movie,series,game,book">
|
||||||
|
|
||||||
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
|
|
||||||
<div class="libraryViewNav">
|
<div class="libraryViewNav">
|
||||||
<div class="mdl-tabs__tab-bar">
|
<button class="pageTabButton is-active" data-index="0">${TabHome}</button>
|
||||||
<a href="#homeTab" class="mdl-tabs__tab is-active" data-index="0">${TabHome}</a>
|
<button class="pageTabButton" data-index="1">${TabNextUp}</button>
|
||||||
<a href="#nextUpTab" class="mdl-tabs__tab" data-index="1">${TabNextUp}</a>
|
<button class="pageTabButton homeFavoritesTab" data-index="2">${TabFavorites}</button>
|
||||||
<a href="#favoritesTab" class="mdl-tabs__tab homeFavoritesTab" data-index="2">${TabFavorites}</a>
|
<button class="pageTabButton" data-index="3">${TabUpcoming}</button>
|
||||||
<a href="#upcomingTab" class="mdl-tabs__tab" data-index="3">${TabUpcoming}</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="is-active pageTabContent ehsContent" id="homeTab" data-index="0">
|
||||||
<div class="mdl-tabs__panel is-active pageTabContent ehsContent" id="homeTab" data-index="0">
|
|
||||||
<div class="ui-bar-b readOnlyContent welcomeMessage" style="display: none; padding: 2em; border-radius: 10px; margin: 2em auto; font-weight: normal;">
|
<div class="ui-bar-b readOnlyContent welcomeMessage" style="display: none; padding: 2em; border-radius: 10px; margin: 2em auto; font-weight: normal;">
|
||||||
<h1 style="margin-top: 0;" class="tourHeader"></h1>
|
<h1 style="margin-top: 0;" class="tourHeader"></h1>
|
||||||
<p>
|
<p>
|
||||||
|
@ -19,7 +16,7 @@
|
||||||
|
|
||||||
<div class="sections"></div>
|
<div class="sections"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mdl-tabs__panel pageTabContent ehsContent" id="nextUpTab" data-index="1">
|
<div class="pageTabContent ehsContent" id="nextUpTab" data-index="1">
|
||||||
<div class="homePageSection">
|
<div class="homePageSection">
|
||||||
<div>
|
<div>
|
||||||
<h1 class="listHeader nextUpHeader" style="display: inline-block; vertical-align: middle;">${HeaderNextUp}</h1>
|
<h1 class="listHeader nextUpHeader" style="display: inline-block; vertical-align: middle;">${HeaderNextUp}</h1>
|
||||||
|
@ -30,10 +27,10 @@
|
||||||
</div>
|
</div>
|
||||||
<p class="noNextUpItems" style="display: none;">${NoNextUpItemsMessage}</p>
|
<p class="noNextUpItems" style="display: none;">${NoNextUpItemsMessage}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="mdl-tabs__panel pageTabContent ehsContent" id="favoritesTab" data-index="2">
|
<div class="pageTabContent ehsContent" id="favoritesTab" data-index="2">
|
||||||
<div class="favoriteSections"></div>
|
<div class="favoriteSections"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mdl-tabs__panel pageTabContent ehsContent" id="upcomingTab" data-index="3">
|
<div class="pageTabContent ehsContent" id="upcomingTab" data-index="3">
|
||||||
<div id="upcomingItems" class="itemsContainer">
|
<div id="upcomingItems" class="itemsContainer">
|
||||||
</div>
|
</div>
|
||||||
<div class="noItemsMessage" style="display: none;">
|
<div class="noItemsMessage" style="display: none;">
|
||||||
|
@ -44,7 +41,6 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div data-role="content">
|
<div data-role="content">
|
||||||
|
|
||||||
|
|
|
@ -1,16 +1,13 @@
|
||||||
<div id="liveTvSuggestedPage" data-dom-cache="true" data-role="page" class="page libraryPage liveTvPage pageWithAbsoluteTabs" data-contextname="${HeaderLiveTv}" data-backdroptype="series,movie" data-require="scripts/livetvsuggested,livetvcss,scripts/livetvcomponents,MaterialTabs,paper-checkbox,paper-button">
|
<div id="liveTvSuggestedPage" data-dom-cache="true" data-role="page" class="page libraryPage liveTvPage pageWithAbsoluteTabs" data-contextname="${HeaderLiveTv}" data-backdroptype="series,movie" data-require="scripts/livetvsuggested,livetvcss,scripts/livetvcomponents,paper-checkbox">
|
||||||
|
|
||||||
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
|
|
||||||
<div class="libraryViewNav">
|
<div class="libraryViewNav">
|
||||||
<div class="mdl-tabs__tab-bar">
|
<button class="pageTabButton is-active" data-index="0">${TabSuggestions}</button>
|
||||||
<a href="#suggestionsTab" class="mdl-tabs__tab is-active" data-index="0">${TabSuggestions}</a>
|
<button class="pageTabButton" data-index="1">${TabGuide}</button>
|
||||||
<a href="#guideTab" class="mdl-tabs__tab" data-index="1">${TabGuide}</a>
|
<button class="pageTabButton" data-index="2">${TabChannels}</button>
|
||||||
<a href="#channelsTab" class="mdl-tabs__tab" data-index="2">${TabChannels}</a>
|
<button class="pageTabButton" data-index="3">${TabRecordings}</button>
|
||||||
<a href="#recordingsTab" class="mdl-tabs__tab" data-index="3">${TabRecordings}</a>
|
<button class="pageTabButton" data-index="4">${TabSeries}</button>
|
||||||
<a href="#seriesTab" class="mdl-tabs__tab" data-index="4">${TabSeries}</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="is-active pageTabContent ehsContent" id="suggestionsTab" data-index="0">
|
||||||
<div class="mdl-tabs__panel is-active pageTabContent ehsContent" id="suggestionsTab" data-index="0">
|
|
||||||
<div id="activePrograms" class="homePageSection">
|
<div id="activePrograms" class="homePageSection">
|
||||||
<h1 class="listHeader">${HeaderWhatsOnTV}</h1>
|
<h1 class="listHeader">${HeaderWhatsOnTV}</h1>
|
||||||
<div class="activeProgramItems itemsContainer noautoinit"></div>
|
<div class="activeProgramItems itemsContainer noautoinit"></div>
|
||||||
|
@ -46,16 +43,16 @@
|
||||||
<br />
|
<br />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mdl-tabs__panel pageTabContent ehsContent fullWidth flexPageTabContent absolutePageTabContent" id="guideTab" data-index="1" style="width:auto;padding-top:0; padding-bottom: 0;">
|
<div class="pageTabContent ehsContent fullWidth flexPageTabContent absolutePageTabContent" id="guideTab" data-index="1" style="width:auto;padding-top:0; padding-bottom: 0;">
|
||||||
</div>
|
</div>
|
||||||
<div class="mdl-tabs__panel pageTabContent ehsContent" id="channelsTab" data-index="2">
|
<div class="pageTabContent ehsContent" id="channelsTab" data-index="2">
|
||||||
<div class="viewSettings">
|
<div class="viewSettings">
|
||||||
<div class="listTopPaging">
|
<div class="listTopPaging">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="items" class="itemsContainer"></div>
|
<div id="items" class="itemsContainer"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mdl-tabs__panel pageTabContent ehsContent" id="recordingsTab" data-index="3">
|
<div class="pageTabContent ehsContent" id="recordingsTab" data-index="3">
|
||||||
<div id="activeRecordings" class="homePageSection hide">
|
<div id="activeRecordings" class="homePageSection hide">
|
||||||
<h1 class="listHeader">${HeaderActiveRecordings}</h1>
|
<h1 class="listHeader">${HeaderActiveRecordings}</h1>
|
||||||
<div class="recordingItems itemsContainer"></div>
|
<div class="recordingItems itemsContainer"></div>
|
||||||
|
@ -80,11 +77,10 @@
|
||||||
<div id="recordingGroupItems"></div>
|
<div id="recordingGroupItems"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mdl-tabs__panel pageTabContent ehsContent" id="seriesTab" data-index="4">
|
<div class="pageTabContent ehsContent" id="seriesTab" data-index="4">
|
||||||
<div style="max-width: 700px; margin: 0 auto;" id="items">
|
<div style="max-width: 700px; margin: 0 auto;" id="items">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div data-role="content">
|
<div data-role="content">
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,17 +1,14 @@
|
||||||
<div id="moviesPage" data-role="page" data-dom-cache="true" class="page libraryPage backdropPage pageWithAbsoluteTabs collectionEditorPage" data-backdroptype="movie">
|
<div id="moviesPage" data-role="page" data-dom-cache="true" class="page libraryPage backdropPage pageWithAbsoluteTabs collectionEditorPage" data-backdroptype="movie">
|
||||||
|
|
||||||
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
|
|
||||||
<div class="libraryViewNav">
|
<div class="libraryViewNav">
|
||||||
<div class="mdl-tabs__tab-bar">
|
<button class="pageTabButton is-active" data-index="0">${TabSuggestions}</button>
|
||||||
<a href="#suggestionsTab" class="mdl-tabs__tab is-active" data-index="0">${TabSuggestions}</a>
|
<button class="pageTabButton" data-index="1">${TabMovies}</button>
|
||||||
<a href="#moviesTab" class="mdl-tabs__tab" data-index="1">${TabMovies}</a>
|
<button class="pageTabButton movieTrailersTab" data-index="2">${TabTrailers}</button>
|
||||||
<a href="#trailersTab" class="mdl-tabs__tab movieTrailersTab" data-index="2">${TabTrailers}</a>
|
<button class="pageTabButton" data-index="3">${TabCollections}</button>
|
||||||
<a href="#collectionsTab" class="mdl-tabs__tab" data-index="3">${TabCollections}</a>
|
<button class="pageTabButton" data-index="4">${TabGenres}</button>
|
||||||
<a href="#genresTab" class="mdl-tabs__tab" data-index="4">${TabGenres}</a>
|
<button class="pageTabButton movieStudiosTab" data-index="5">${TabStudios}</button>
|
||||||
<a href="#studiosTab" class="mdl-tabs__tab movieStudiosTab" data-index="5">${TabStudios}</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="is-active pageTabContent ehsContent" id="suggestionsTab" data-index="0">
|
||||||
<div class="mdl-tabs__panel is-active pageTabContent ehsContent" id="suggestionsTab" data-index="0">
|
|
||||||
<div id="resumableSection" style="display: none;" class="homePageSection">
|
<div id="resumableSection" style="display: none;" class="homePageSection">
|
||||||
<div>
|
<div>
|
||||||
<h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderResume}</h1>
|
<h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderResume}</h1>
|
||||||
|
@ -39,7 +36,7 @@
|
||||||
<p>${MessageNoMovieSuggestionsAvailable}</p>
|
<p>${MessageNoMovieSuggestionsAvailable}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mdl-tabs__panel pageTabContent ehsContent" id="moviesTab" data-index="1">
|
<div class="pageTabContent ehsContent" id="moviesTab" data-index="1">
|
||||||
<div class="alphabetPicker">
|
<div class="alphabetPicker">
|
||||||
</div>
|
</div>
|
||||||
<div class="viewSettings">
|
<div class="viewSettings">
|
||||||
|
@ -48,7 +45,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="itemsContainer" style="text-align:center;"></div>
|
<div class="itemsContainer" style="text-align:center;"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mdl-tabs__panel pageTabContent ehsContent" id="trailersTab" data-index="2">
|
<div class="pageTabContent ehsContent" id="trailersTab" data-index="2">
|
||||||
<div class="alphabetPicker">
|
<div class="alphabetPicker">
|
||||||
</div>
|
</div>
|
||||||
<div class="viewSettings">
|
<div class="viewSettings">
|
||||||
|
@ -58,7 +55,7 @@
|
||||||
<div class="itemsContainer" style="text-align:center;"></div>
|
<div class="itemsContainer" style="text-align:center;"></div>
|
||||||
<p class="noItemsMessage" style="display:none;text-align:center;">${MessageNoTrailersFound}</p>
|
<p class="noItemsMessage" style="display:none;text-align:center;">${MessageNoTrailersFound}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="mdl-tabs__panel pageTabContent ehsContent" id="collectionsTab" data-index="3">
|
<div class="pageTabContent ehsContent" id="collectionsTab" data-index="3">
|
||||||
<div class="viewSettings">
|
<div class="viewSettings">
|
||||||
|
|
||||||
<div class="listTopPaging">
|
<div class="listTopPaging">
|
||||||
|
@ -72,21 +69,20 @@
|
||||||
|
|
||||||
<paper-fab class="btnNewCollection bottomFab" icon="add" style="position:fixed;right:20px;background-color:#db4437;"></paper-fab>
|
<paper-fab class="btnNewCollection bottomFab" icon="add" style="position:fixed;right:20px;background-color:#db4437;"></paper-fab>
|
||||||
</div>
|
</div>
|
||||||
<div class="mdl-tabs__panel pageTabContent ehsContent" id="genresTab" data-index="4">
|
<div class="pageTabContent ehsContent" id="genresTab" data-index="4">
|
||||||
<div class="viewSettings">
|
<div class="viewSettings">
|
||||||
<div class="listTopPaging">
|
<div class="listTopPaging">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="itemsContainer"></div>
|
<div class="itemsContainer"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mdl-tabs__panel pageTabContent ehsContent" id="studiosTab" data-index="5">
|
<div class="pageTabContent ehsContent" id="studiosTab" data-index="5">
|
||||||
<div class="viewSettings">
|
<div class="viewSettings">
|
||||||
<div class="listTopPaging">
|
<div class="listTopPaging">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="itemsContainer" style="text-align:center;"></div>
|
<div class="itemsContainer" style="text-align:center;"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div data-role="content">
|
<div data-role="content">
|
||||||
|
|
||||||
|
|
|
@ -1,18 +1,15 @@
|
||||||
<div id="musicRecommendedPage" data-dom-cache="true" data-role="page" class="page libraryPage backdropPage pageWithAbsoluteTabs" data-backdroptype="musicartist" data-require="scripts/musicrecommended,MaterialTabs,paper-checkbox,scripts/alphapicker">
|
<div id="musicRecommendedPage" data-dom-cache="true" data-role="page" class="page libraryPage backdropPage pageWithAbsoluteTabs" data-backdroptype="musicartist" data-require="scripts/musicrecommended,paper-checkbox,scripts/alphapicker">
|
||||||
|
|
||||||
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
|
|
||||||
<div class="libraryViewNav">
|
<div class="libraryViewNav">
|
||||||
<div class="mdl-tabs__tab-bar">
|
<button class="pageTabButton is-active" data-index="0">${TabSuggestions}</button>
|
||||||
<a href="#suggestionsTab" class="mdl-tabs__tab is-active" data-index="0">${TabSuggestions}</a>
|
<button class="pageTabButton" data-index="1">${TabAlbums}</button>
|
||||||
<a href="#albumsTab" class="mdl-tabs__tab" data-index="1">${TabAlbums}</a>
|
<button class="pageTabButton" data-index="2">${TabAlbumArtists}</button>
|
||||||
<a href="#albumArtistsTab" class="mdl-tabs__tab" data-index="2">${TabAlbumArtists}</a>
|
<button class="pageTabButton" data-index="3">${TabArtists}</button>
|
||||||
<a href="#artistsTab" class="mdl-tabs__tab" data-index="3">${TabArtists}</a>
|
<button class="pageTabButton" data-index="4">${TabSongs}</button>
|
||||||
<a href="#songsTab" class="mdl-tabs__tab" data-index="4">${TabSongs}</a>
|
<button class="pageTabButton" data-index="5">${TabGenres}</button>
|
||||||
<a href="#genresTab" class="mdl-tabs__tab" data-index="5">${TabGenres}</a>
|
<button class="pageTabButton" data-index="6">${TabFolders}</button>
|
||||||
<a href="#foldersTab" class="mdl-tabs__tab" data-index="6">${TabFolders}</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="pageTabContent is-active pageTabContent ehsContent" id="suggestionsTab" data-index="0">
|
||||||
<div class="mdl-tabs__panel is-active pageTabContent ehsContent" id="suggestionsTab" data-index="0">
|
|
||||||
<div class="homePageSection">
|
<div class="homePageSection">
|
||||||
<h1 class="listHeader">${HeaderLatestMusic}</h1>
|
<h1 class="listHeader">${HeaderLatestMusic}</h1>
|
||||||
|
|
||||||
|
@ -43,7 +40,7 @@
|
||||||
|
|
||||||
<div class="favoriteSections homePageSection"></div>
|
<div class="favoriteSections homePageSection"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mdl-tabs__panel pageTabContent ehsContent" id="albumsTab" data-index="1">
|
<div class="pageTabContent pageTabContent ehsContent" id="albumsTab" data-index="1">
|
||||||
<div class="alphabetPicker">
|
<div class="alphabetPicker">
|
||||||
</div>
|
</div>
|
||||||
<div class="viewSettings">
|
<div class="viewSettings">
|
||||||
|
@ -52,7 +49,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div id="items" class="itemsContainer paddedItemsContainer"></div>
|
<div id="items" class="itemsContainer paddedItemsContainer"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mdl-tabs__panel pageTabContent ehsContent" id="albumArtistsTab" data-index="2">
|
<div class="pageTabContent pageTabContent ehsContent" id="albumArtistsTab" data-index="2">
|
||||||
<div class="alphabetPicker">
|
<div class="alphabetPicker">
|
||||||
</div>
|
</div>
|
||||||
<div class="viewSettings">
|
<div class="viewSettings">
|
||||||
|
@ -61,7 +58,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
|
<div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mdl-tabs__panel pageTabContent ehsContent" id="artistsTab" data-index="3">
|
<div class="pageTabContent pageTabContent ehsContent" id="artistsTab" data-index="3">
|
||||||
<div class="alphabetPicker">
|
<div class="alphabetPicker">
|
||||||
</div>
|
</div>
|
||||||
<div class="viewSettings">
|
<div class="viewSettings">
|
||||||
|
@ -70,28 +67,27 @@
|
||||||
</div>
|
</div>
|
||||||
<div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
|
<div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mdl-tabs__panel pageTabContent ehsContent" id="songsTab" data-index="4">
|
<div class="pageTabContent pageTabContent ehsContent" id="songsTab" data-index="4">
|
||||||
<div class="viewSettings">
|
<div class="viewSettings">
|
||||||
<div class="listTopPaging">
|
<div class="listTopPaging">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="items" class="itemsContainer" style="max-width:1000px;margin: 0 auto;"></div>
|
<div id="items" class="itemsContainer" style="max-width:1000px;margin: 0 auto;"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mdl-tabs__panel pageTabContent ehsContent" id="genresTab" data-index="5">
|
<div class="pageTabContent pageTabContent ehsContent" id="genresTab" data-index="5">
|
||||||
<div class="viewSettings">
|
<div class="viewSettings">
|
||||||
<div class="listTopPaging">
|
<div class="listTopPaging">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="items" class="itemsContainer paddedItemsContainer"></div>
|
<div id="items" class="itemsContainer paddedItemsContainer"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mdl-tabs__panel pageTabContent ehsContent" id="foldersTab" data-index="6">
|
<div class="pageTabContent pageTabContent ehsContent" id="foldersTab" data-index="6">
|
||||||
<div class="viewSettings">
|
<div class="viewSettings">
|
||||||
<div class="listTopPaging">
|
<div class="listTopPaging">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="items" class="itemsContainer paddedItemsContainer"></div>
|
<div id="items" class="itemsContainer paddedItemsContainer"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div data-role="content">
|
<div data-role="content">
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
<div class="detailSectionContent">
|
<div class="detailSectionContent">
|
||||||
|
|
||||||
<div class="fldSyncPath hide">
|
<div class="fldSyncPath hide">
|
||||||
<paper-input type="text" id="txtSyncPath" label="${LabelSyncPath}" style="display:inline-block;width:80%;" readonly></paper-input>
|
<paper-input type="text" id="txtSyncPath" label="${LabelSyncPath}" style="display:inline-block;width:80%;"></paper-input>
|
||||||
<button is="paper-icon-button-light" class="btnSelectSyncPath"><iron-icon icon="search"></iron-icon></button>
|
<button is="paper-icon-button-light" class="btnSelectSyncPath"><iron-icon icon="search"></iron-icon></button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -10,15 +10,12 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
|
|
||||||
<div class="libraryViewNav headroomDisabled">
|
<div class="libraryViewNav headroomDisabled">
|
||||||
<div class="mdl-tabs__tab-bar">
|
<button class="pageTabButton is-active" data-index="0">${TabNowPlaying}</button>
|
||||||
<a href="#nowPlayingTab" class="mdl-tabs__tab is-active" data-index="0">${TabNowPlaying}</a>
|
<button class="pageTabButton" data-index="1">${TabControls}</button>
|
||||||
<a href="#controlsTab" class="mdl-tabs__tab" data-index="1">${TabControls}</a>
|
<button class="pageTabButton" data-index="2">${TabPlaylist}</button>
|
||||||
<a href="#playlistTab" class="mdl-tabs__tab" data-index="2">${TabPlaylist}</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="is-active pageTabContent ehsContent" id="nowPlayingTab" data-index="0">
|
||||||
<div class="mdl-tabs__panel is-active pageTabContent ehsContent" id="nowPlayingTab" data-index="0">
|
|
||||||
<div style="text-align:center;">
|
<div style="text-align:center;">
|
||||||
<div class="nowPlayingPageTitle" style="line-height: normal;">
|
<div class="nowPlayingPageTitle" style="line-height: normal;">
|
||||||
</div>
|
</div>
|
||||||
|
@ -62,7 +59,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mdl-tabs__panel pageTabContent ehsContent" id="controlsTab" data-index="1">
|
<div class="pageTabContent ehsContent" id="controlsTab" data-index="1">
|
||||||
<div style="text-align:center;">
|
<div style="text-align:center;">
|
||||||
<div>
|
<div>
|
||||||
<paper-fab icon="keyboard-arrow-up" class="btnArrowUp btnCommand subdued" title="${ButtonArrowUp}" data-command="MoveUp"></paper-fab>
|
<paper-fab icon="keyboard-arrow-up" class="btnArrowUp btnCommand subdued" title="${ButtonArrowUp}" data-command="MoveUp"></paper-fab>
|
||||||
|
@ -122,12 +119,11 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mdl-tabs__panel 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" style="max-width: 800px; margin: 3em auto 0; padding-bottom: 200px;">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div data-role="content" style="overflow:visible;">
|
<div data-role="content" style="overflow:visible;">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -74,11 +74,9 @@
|
||||||
|
|
||||||
var page = this;
|
var page = this;
|
||||||
|
|
||||||
var mdlTabs = page.querySelector('.mdl-tabs');
|
var mdlTabs = page.querySelector('.libraryViewNav');
|
||||||
|
|
||||||
componentHandler.upgradeAllRegistered(page);
|
libraryBrowser.configurePaperLibraryTabs(page, mdlTabs, page.querySelectorAll('.pageTabContent'));
|
||||||
|
|
||||||
libraryBrowser.configurePaperLibraryTabs(page, mdlTabs);
|
|
||||||
|
|
||||||
mdlTabs.addEventListener('tabchange', function (e) {
|
mdlTabs.addEventListener('tabchange', function (e) {
|
||||||
loadTab(page, parseInt(e.detail.selectedTabIndex));
|
loadTab(page, parseInt(e.detail.selectedTabIndex));
|
||||||
|
|
|
@ -26,7 +26,7 @@
|
||||||
pageIdOn('pageinit', "channelsPage", function () {
|
pageIdOn('pageinit', "channelsPage", function () {
|
||||||
|
|
||||||
var page = this;
|
var page = this;
|
||||||
var mdlTabs = page.querySelector('.mdl-tabs');
|
var mdlTabs = page.querySelector('.libraryViewNav');
|
||||||
|
|
||||||
mdlTabs.addEventListener('tabchange', function (e) {
|
mdlTabs.addEventListener('tabchange', function (e) {
|
||||||
loadTab(page, parseInt(e.detail.selectedTabIndex));
|
loadTab(page, parseInt(e.detail.selectedTabIndex));
|
||||||
|
|
|
@ -243,21 +243,20 @@
|
||||||
var self = this;
|
var self = this;
|
||||||
|
|
||||||
self.renderTab = function () {
|
self.renderTab = function () {
|
||||||
var tabContent = view.querySelector('.mdl-tabs__panel[data-index=\'' + 0 + '\']');
|
var tabContent = view.querySelector('.pageTabContent[data-index=\'' + 0 + '\']');
|
||||||
loadHomeTab(view, tabContent);
|
loadHomeTab(view, tabContent);
|
||||||
};
|
};
|
||||||
|
|
||||||
var mdlTabs = view.querySelector('.mdl-tabs');
|
var mdlTabs = view.querySelector('.libraryViewNav');
|
||||||
|
|
||||||
componentHandler.upgradeAllRegistered(view);
|
libraryBrowser.configurePaperLibraryTabs(view, mdlTabs, view.querySelectorAll('.pageTabContent'));
|
||||||
libraryBrowser.configurePaperLibraryTabs(view, mdlTabs);
|
|
||||||
|
|
||||||
var tabControllers = [];
|
var tabControllers = [];
|
||||||
var renderedTabs = [];
|
var renderedTabs = [];
|
||||||
|
|
||||||
function loadTab(page, index) {
|
function loadTab(page, index) {
|
||||||
|
|
||||||
var tabContent = view.querySelector('.mdl-tabs__panel[data-index=\'' + index + '\']');
|
var tabContent = view.querySelector('.pageTabContent[data-index=\'' + index + '\']');
|
||||||
var depends = [];
|
var depends = [];
|
||||||
|
|
||||||
switch (index) {
|
switch (index) {
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
define(['playlistManager', 'appSettings', 'appStorage', 'apphost', 'datetime', 'jQuery', 'itemHelper', 'mediaInfo', 'scrollStyles'], function (playlistManager, appSettings, appStorage, appHost, datetime, $, itemHelper, mediaInfo) {
|
define(['playlistManager', 'scrollHelper', 'appSettings', 'appStorage', 'apphost', 'datetime', 'jQuery', 'itemHelper', 'mediaInfo', 'scrollStyles'], function (playlistManager, scrollHelper, appSettings, appStorage, appHost, datetime, $, itemHelper, mediaInfo) {
|
||||||
|
|
||||||
function parentWithClass(elem, className) {
|
function parentWithClass(elem, className) {
|
||||||
|
|
||||||
|
@ -176,7 +176,7 @@
|
||||||
|
|
||||||
if (selected == null) {
|
if (selected == null) {
|
||||||
|
|
||||||
var elem = tabs.querySelector('.mdl-tabs__tab.is-active');
|
var elem = tabs.querySelector('.pageTabButton.is-active');
|
||||||
if (elem) {
|
if (elem) {
|
||||||
return parseInt(elem.getAttribute('data-index'));
|
return parseInt(elem.getAttribute('data-index'));
|
||||||
}
|
}
|
||||||
|
@ -191,18 +191,18 @@
|
||||||
}
|
}
|
||||||
}));
|
}));
|
||||||
} else {
|
} else {
|
||||||
var tabButtons = tabs.querySelectorAll('.mdl-tabs__tab');
|
var tabButtons = tabs.querySelectorAll('.pageTabButton');
|
||||||
tabButtons[selected].click();
|
tabButtons[selected].click();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
configureSwipeTabs: function (ownerpage, tabs) {
|
configureSwipeTabs: function (ownerpage, tabs) {
|
||||||
|
|
||||||
var pageCount = tabs.querySelectorAll('.mdl-tabs__panel').length;
|
var pageCount = ownerpage.querySelectorAll('.pageTabContent').length;
|
||||||
|
|
||||||
require(['hammer'], function (Hammer) {
|
require(['hammer'], function (Hammer) {
|
||||||
|
|
||||||
var hammertime = new Hammer(tabs);
|
var hammertime = new Hammer(ownerpage);
|
||||||
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_HORIZONTAL });
|
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_HORIZONTAL });
|
||||||
|
|
||||||
hammertime.on('swipeleft', function (e) {
|
hammertime.on('swipeleft', function (e) {
|
||||||
|
@ -225,22 +225,64 @@
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
configurePaperLibraryTabs: function (ownerpage, tabs) {
|
configurePaperLibraryTabs: function (ownerpage, tabs, panels) {
|
||||||
|
|
||||||
if (!browserInfo.safari) {
|
if (!browserInfo.safari) {
|
||||||
LibraryBrowser.configureSwipeTabs(ownerpage, tabs);
|
LibraryBrowser.configureSwipeTabs(ownerpage, tabs);
|
||||||
}
|
}
|
||||||
|
|
||||||
tabs.querySelector('.mdl-tabs__tab-bar').addEventListener('click', function (e) {
|
var buttons = tabs.querySelectorAll('.pageTabButton');
|
||||||
|
for (var i = 0, length = buttons.length; i < length; i++) {
|
||||||
|
buttons[i].classList.add('mdl-button');
|
||||||
|
buttons[i].classList.add('mdl-js-button');
|
||||||
|
}
|
||||||
|
|
||||||
var link = parentWithClass(e.target, 'mdl-tabs__tab');
|
tabs.classList.add('hiddenScrollX');
|
||||||
|
|
||||||
if (link) {
|
function fadeInRight(elem) {
|
||||||
|
|
||||||
|
var pct = browserInfo.mobile ? '1%' : '0.5%';
|
||||||
|
|
||||||
|
var keyframes = [
|
||||||
|
{ opacity: '0', transform: 'translate3d(' + pct + ', 0, 0)', offset: 0 },
|
||||||
|
{ opacity: '1', transform: 'none', offset: 1 }];
|
||||||
|
|
||||||
|
elem.animate(keyframes, {
|
||||||
|
duration: 300,
|
||||||
|
iterations: 1,
|
||||||
|
easing: 'ease-out'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
tabs.addEventListener('click', function (e) {
|
||||||
|
|
||||||
|
var current = tabs.querySelector('.is-active');
|
||||||
|
var link = parentWithClass(e.target, 'pageTabButton');
|
||||||
|
|
||||||
|
if (link && link != current) {
|
||||||
|
|
||||||
|
if (current) {
|
||||||
|
current.classList.remove('is-active');
|
||||||
|
panels[parseInt(current.getAttribute('data-index'))].classList.remove('is-active');
|
||||||
|
}
|
||||||
|
link.classList.add('is-active');
|
||||||
|
var index = parseInt(link.getAttribute('data-index'));
|
||||||
tabs.dispatchEvent(new CustomEvent("tabchange", {
|
tabs.dispatchEvent(new CustomEvent("tabchange", {
|
||||||
detail: {
|
detail: {
|
||||||
selectedTabIndex: parseInt(link.getAttribute('data-index'))
|
selectedTabIndex: index
|
||||||
}
|
}
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
panels[index].classList.add('is-active');
|
||||||
|
|
||||||
|
//if (browserInfo.animate) {
|
||||||
|
// fadeInRight(panels[index]);
|
||||||
|
//}
|
||||||
|
|
||||||
|
// If toCenter is called syncronously within the click event, it sometimes ends up canceling it
|
||||||
|
//setTimeout(function() {
|
||||||
|
// scrollHelper.toCenter(tabs, link, true);
|
||||||
|
//}, 10);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -271,7 +313,7 @@
|
||||||
|
|
||||||
onTabbedpagebeforeshowInternal: function (page, e, isFirstLoad) {
|
onTabbedpagebeforeshowInternal: function (page, e, isFirstLoad) {
|
||||||
|
|
||||||
var pageTabsContainer = page.querySelector('.mdl-tabs');
|
var pageTabsContainer = page.querySelector('.libraryViewNav');
|
||||||
|
|
||||||
if (isFirstLoad) {
|
if (isFirstLoad) {
|
||||||
|
|
||||||
|
|
|
@ -98,7 +98,7 @@
|
||||||
ApiClient.getLiveTvRecordings({
|
ApiClient.getLiveTvRecordings({
|
||||||
|
|
||||||
userId: Dashboard.getCurrentUserId(),
|
userId: Dashboard.getCurrentUserId(),
|
||||||
limit: 6,
|
limit: 4,
|
||||||
IsInProgress: false,
|
IsInProgress: false,
|
||||||
Fields: 'CanDelete,PrimaryImageAspectRatio'
|
Fields: 'CanDelete,PrimaryImageAspectRatio'
|
||||||
|
|
||||||
|
|
|
@ -141,7 +141,7 @@
|
||||||
|
|
||||||
function loadTab(page, index) {
|
function loadTab(page, index) {
|
||||||
|
|
||||||
var tabContent = page.querySelector('.mdl-tabs__panel[data-index=\'' + index + '\']');
|
var tabContent = page.querySelector('.pageTabContent[data-index=\'' + index + '\']');
|
||||||
var depends = [];
|
var depends = [];
|
||||||
var scope = 'LiveTvPage';
|
var scope = 'LiveTvPage';
|
||||||
var renderMethod = '';
|
var renderMethod = '';
|
||||||
|
@ -197,11 +197,9 @@
|
||||||
|
|
||||||
var page = this;
|
var page = this;
|
||||||
|
|
||||||
var mdlTabs = page.querySelector('.mdl-tabs');
|
var mdlTabs = page.querySelector('.libraryViewNav');
|
||||||
|
|
||||||
componentHandler.upgradeAllRegistered(page);
|
libraryBrowser.configurePaperLibraryTabs(page, mdlTabs, page.querySelectorAll('.pageTabContent'));
|
||||||
|
|
||||||
libraryBrowser.configurePaperLibraryTabs(page, mdlTabs);
|
|
||||||
|
|
||||||
mdlTabs.addEventListener('tabchange', function (e) {
|
mdlTabs.addEventListener('tabchange', function (e) {
|
||||||
loadTab(page, parseInt(e.detail.selectedTabIndex));
|
loadTab(page, parseInt(e.detail.selectedTabIndex));
|
||||||
|
|
|
@ -271,19 +271,19 @@
|
||||||
|
|
||||||
var self = this;
|
var self = this;
|
||||||
|
|
||||||
self.initTab = function() {
|
self.initTab = function () {
|
||||||
var tabContent = view.querySelector('.mdl-tabs__panel[data-index=\'' + 0 + '\']');
|
var tabContent = view.querySelector('.pageTabContent[data-index=\'' + 0 + '\']');
|
||||||
initSuggestedTab(view, tabContent);
|
initSuggestedTab(view, tabContent);
|
||||||
};
|
};
|
||||||
|
|
||||||
self.renderTab = function () {
|
self.renderTab = function () {
|
||||||
var tabContent = view.querySelector('.mdl-tabs__panel[data-index=\'' + 0 + '\']');
|
var tabContent = view.querySelector('.pageTabContent[data-index=\'' + 0 + '\']');
|
||||||
loadSuggestionsTab(view, params, tabContent);
|
loadSuggestionsTab(view, params, tabContent);
|
||||||
};
|
};
|
||||||
|
|
||||||
$('.recommendations', view).createCardMenus();
|
$('.recommendations', view).createCardMenus();
|
||||||
|
|
||||||
var mdlTabs = view.querySelector('.mdl-tabs');
|
var mdlTabs = view.querySelector('.libraryViewNav');
|
||||||
|
|
||||||
function onPlaybackStop(e, state) {
|
function onPlaybackStop(e, state) {
|
||||||
|
|
||||||
|
@ -297,22 +297,20 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
componentHandler.upgradeAllRegistered(view);
|
|
||||||
|
|
||||||
var baseUrl = 'movies.html';
|
var baseUrl = 'movies.html';
|
||||||
var topParentId = params.topParentId;
|
var topParentId = params.topParentId;
|
||||||
if (topParentId) {
|
if (topParentId) {
|
||||||
baseUrl += '?topParentId=' + topParentId;
|
baseUrl += '?topParentId=' + topParentId;
|
||||||
}
|
}
|
||||||
|
|
||||||
libraryBrowser.configurePaperLibraryTabs(view, mdlTabs);
|
libraryBrowser.configurePaperLibraryTabs(view, mdlTabs, view.querySelectorAll('.pageTabContent'));
|
||||||
|
|
||||||
var tabControllers = [];
|
var tabControllers = [];
|
||||||
var renderedTabs = [];
|
var renderedTabs = [];
|
||||||
|
|
||||||
function loadTab(page, index) {
|
function loadTab(page, index) {
|
||||||
|
|
||||||
var tabContent = page.querySelector('.mdl-tabs__panel[data-index=\'' + index + '\']');
|
var tabContent = view.querySelector('.pageTabContent[data-index=\'' + index + '\']');
|
||||||
var depends = [];
|
var depends = [];
|
||||||
|
|
||||||
switch (index) {
|
switch (index) {
|
||||||
|
|
|
@ -216,7 +216,7 @@
|
||||||
|
|
||||||
function loadTab(page, index) {
|
function loadTab(page, index) {
|
||||||
|
|
||||||
var tabContent = page.querySelector('.mdl-tabs__panel[data-index=\'' + index + '\']');
|
var tabContent = page.querySelector('.pageTabContent[data-index=\'' + index + '\']');
|
||||||
var depends = [];
|
var depends = [];
|
||||||
var scope = 'MusicPage';
|
var scope = 'MusicPage';
|
||||||
var renderMethod = '';
|
var renderMethod = '';
|
||||||
|
@ -285,7 +285,7 @@
|
||||||
|
|
||||||
$('.recommendations', page).createCardMenus();
|
$('.recommendations', page).createCardMenus();
|
||||||
|
|
||||||
var mdlTabs = page.querySelector('.mdl-tabs');
|
var mdlTabs = page.querySelector('.libraryViewNav');
|
||||||
|
|
||||||
var baseUrl = 'music.html';
|
var baseUrl = 'music.html';
|
||||||
var topParentId = LibraryMenu.getTopParentId();
|
var topParentId = LibraryMenu.getTopParentId();
|
||||||
|
@ -293,8 +293,7 @@
|
||||||
baseUrl += '?topParentId=' + topParentId;
|
baseUrl += '?topParentId=' + topParentId;
|
||||||
}
|
}
|
||||||
|
|
||||||
componentHandler.upgradeAllRegistered(page);
|
libraryBrowser.configurePaperLibraryTabs(page, mdlTabs, page.querySelectorAll('.pageTabContent'));
|
||||||
libraryBrowser.configurePaperLibraryTabs(page, mdlTabs);
|
|
||||||
|
|
||||||
mdlTabs.addEventListener('tabchange', function (e) {
|
mdlTabs.addEventListener('tabchange', function (e) {
|
||||||
loadTab(page, parseInt(e.detail.selectedTabIndex));
|
loadTab(page, parseInt(e.detail.selectedTabIndex));
|
||||||
|
|
|
@ -2004,7 +2004,6 @@ var AppInfo = {};
|
||||||
|
|
||||||
define("material-design-lite", [bowerPath + "/material-design-lite/material.min", "css!" + bowerPath + "/material-design-lite/material"]);
|
define("material-design-lite", [bowerPath + "/material-design-lite/material.min", "css!" + bowerPath + "/material-design-lite/material"]);
|
||||||
define("MaterialSpinner", ["material-design-lite"]);
|
define("MaterialSpinner", ["material-design-lite"]);
|
||||||
define("MaterialTabs", ["material-design-lite"]);
|
|
||||||
|
|
||||||
define("jQuery", [bowerPath + '/jquery/dist/jquery.slim.min'], function () {
|
define("jQuery", [bowerPath + '/jquery/dist/jquery.slim.min'], function () {
|
||||||
|
|
||||||
|
@ -2560,7 +2559,7 @@ var AppInfo = {};
|
||||||
|
|
||||||
defineRoute({
|
defineRoute({
|
||||||
path: '/home.html',
|
path: '/home.html',
|
||||||
dependencies: ['MaterialTabs'],
|
dependencies: [],
|
||||||
autoFocus: false,
|
autoFocus: false,
|
||||||
controller: 'scripts/indexpage'
|
controller: 'scripts/indexpage'
|
||||||
});
|
});
|
||||||
|
@ -2614,7 +2613,7 @@ var AppInfo = {};
|
||||||
|
|
||||||
defineRoute({
|
defineRoute({
|
||||||
path: '/livetv.html',
|
path: '/livetv.html',
|
||||||
dependencies: [],
|
dependencies: ['paper-button'],
|
||||||
autoFocus: false
|
autoFocus: false
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -2729,7 +2728,7 @@ var AppInfo = {};
|
||||||
|
|
||||||
defineRoute({
|
defineRoute({
|
||||||
path: '/movies.html',
|
path: '/movies.html',
|
||||||
dependencies: ['MaterialTabs', 'paper-checkbox', 'paper-fab', 'scripts/alphapicker', 'paper-button'],
|
dependencies: ['paper-checkbox', 'paper-fab', 'scripts/alphapicker', 'paper-button'],
|
||||||
autoFocus: false,
|
autoFocus: false,
|
||||||
controller: 'scripts/moviesrecommended'
|
controller: 'scripts/moviesrecommended'
|
||||||
});
|
});
|
||||||
|
@ -2811,7 +2810,7 @@ var AppInfo = {};
|
||||||
|
|
||||||
defineRoute({
|
defineRoute({
|
||||||
path: '/nowplaying.html',
|
path: '/nowplaying.html',
|
||||||
dependencies: ['MaterialTabs', 'paper-icon-button-light', 'paper-slider', 'paper-button'],
|
dependencies: ['paper-icon-button-light', 'paper-slider', 'paper-button'],
|
||||||
controller: 'scripts/nowplayingpage',
|
controller: 'scripts/nowplayingpage',
|
||||||
autoFocus: false
|
autoFocus: false
|
||||||
});
|
});
|
||||||
|
@ -2944,7 +2943,7 @@ var AppInfo = {};
|
||||||
|
|
||||||
defineRoute({
|
defineRoute({
|
||||||
path: '/tv.html',
|
path: '/tv.html',
|
||||||
dependencies: ['paper-checkbox', 'paper-button', 'paper-icon-button-light', 'MaterialTabs'],
|
dependencies: ['paper-checkbox', 'paper-icon-button-light', 'paper-button'],
|
||||||
autoFocus: false,
|
autoFocus: false,
|
||||||
controller: 'scripts/tvrecommended'
|
controller: 'scripts/tvrecommended'
|
||||||
});
|
});
|
||||||
|
|
|
@ -181,7 +181,7 @@
|
||||||
|
|
||||||
function loadTab(page, index) {
|
function loadTab(page, index) {
|
||||||
|
|
||||||
var tabContent = page.querySelector('.mdl-tabs__panel[data-index=\'' + index + '\']');
|
var tabContent = page.querySelector('.pageTabContent[data-index=\'' + index + '\']');
|
||||||
var depends = [];
|
var depends = [];
|
||||||
|
|
||||||
switch (index) {
|
switch (index) {
|
||||||
|
@ -232,7 +232,7 @@
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
var mdlTabs = view.querySelector('.mdl-tabs');
|
var mdlTabs = view.querySelector('.libraryViewNav');
|
||||||
|
|
||||||
function onPlaybackStop(e, state) {
|
function onPlaybackStop(e, state) {
|
||||||
|
|
||||||
|
@ -246,8 +246,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
componentHandler.upgradeAllRegistered(view);
|
|
||||||
|
|
||||||
var baseUrl = 'tv.html';
|
var baseUrl = 'tv.html';
|
||||||
var topParentId = params.topParentId;
|
var topParentId = params.topParentId;
|
||||||
if (topParentId) {
|
if (topParentId) {
|
||||||
|
@ -260,7 +258,7 @@
|
||||||
view.querySelector('#resumableItems').classList.remove('hiddenScrollX');
|
view.querySelector('#resumableItems').classList.remove('hiddenScrollX');
|
||||||
}
|
}
|
||||||
libraryBrowser.createCardMenus(view.querySelector('#resumableItems'));
|
libraryBrowser.createCardMenus(view.querySelector('#resumableItems'));
|
||||||
libraryBrowser.configurePaperLibraryTabs(view, mdlTabs);
|
libraryBrowser.configurePaperLibraryTabs(view, mdlTabs, view.querySelectorAll('.pageTabContent'));
|
||||||
|
|
||||||
mdlTabs.addEventListener('tabchange', function (e) {
|
mdlTabs.addEventListener('tabchange', function (e) {
|
||||||
loadTab(view, parseInt(e.detail.selectedTabIndex));
|
loadTab(view, parseInt(e.detail.selectedTabIndex));
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue