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

rework tabs

Browse source
This commit is contained in:
Luke Pulverenti 2016-05-09 15:27:38 -04:00
parent 14a8cf548f
commit 25f06c166b
25 changed files with 424 additions and 634 deletions
Download patch file Download diff file Expand all files Collapse all files

8
dashboard-ui/bower_components/material-design-lite/material.css vendored
View file

@ -1,4 +1,4 @@
/**
/**
* material-design-lite - Material Design Components in CSS, JS and HTML
* @version v1.1.2
* @license Apache-2.0
@ -9384,8 +9384,7 @@ _:-ms-input-placeholder, :root .mdl-slider.mdl-slider.is-upgraded {
align-items: flex-start;
height: 48px;
padding: 0 0 0 0;
margin: 0;
border-bottom: 1px solid rgb(224,224,224); }
margin: 0;}
.mdl-tabs__tab {
margin: 0;
@ -9398,8 +9397,7 @@ _:-ms-input-placeholder, :root .mdl-slider.mdl-slider.is-upgraded {
height: 48px;
line-height: 48px;
text-align: center;
font-weight: 500;
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
color: rgba(0,0,0, 0.54);
overflow: hidden; }

22
dashboard-ui/channels.html
View file

@ -1,20 +1,16 @@
<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,paper-tabs">
<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 class="libraryViewNav scopedLibraryViewNav libraryViewNavWithMinHeight">
<paper-tabs hidescrollbuttons noink>
<paper-tab>${TabLatest}</paper-tab>
<paper-tab>${TabChannels}</paper-tab>
</paper-tabs>
<div class="legacyTabs">
<a href="channels.html">${TabLatest}</a>
<a href="channels.html?tab=1">${TabChannels}</a>
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="libraryViewNav">
<div class="mdl-tabs__tab-bar">
<a href="#latestTab" class="mdl-tabs__tab is-active" data-index="0">${TabLatest}</a>
<a href="#channelsTab" class="mdl-tabs__tab" data-index="1">${TabChannels}</a>
</div>
</div>
</div>
<div class="ehsContent fullWidth pageTabsContainer">
<div class="pageTabContent latestContent hide">
<div class="mdl-tabs__panel is-active pageTabContent ehsContent" id="latestTab" data-index="0">
<div class="latestItems"></div>
</div>
<div class="pageTabContent channelsContent hide">
<div class="mdl-tabs__panel pageTabContent ehsContent" id="channelsTab" data-index="1">
<div class="viewSettings">
</div>
<div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>

69
dashboard-ui/components/remotecontrol.js
View file

@ -1,4 +1,4 @@
define(['browser', 'datetime', 'jQuery', 'paper-fab', 'paper-tabs', 'paper-slider'], function (browser, datetime, $) {
define(['browser', 'datetime', 'jQuery', 'paper-fab', 'paper-slider'], function (browser, datetime, $) {
function showSlideshowMenu(context) {
require(['scripts/slideshow'], function () {
@ -459,7 +459,7 @@
}
function isPlaylistOpen(context) {
return context.querySelector('paper-tabs').selected == 2;
return LibraryBrowser.selectedTab(context.querySelector('.mdl-tabs')) == 2;
}
function onStateChanged(e, state) {
@ -793,24 +793,6 @@
return false;
}
function showTab(index) {
var all = dlg.querySelectorAll('.nowPlayingPageTab');
index = (index || 0).toString();
for (var i = 0, length = all.length; i < length; i++) {
var tab = all[i];
if (tab.getAttribute('data-tab') == index) {
tab.classList.remove('hide');
} else {
tab.classList.add('hide');
}
}
}
function init(context) {
require(['css!css/nowplaying.css']);
@ -831,39 +813,18 @@
// showSlideshowMenu(context);
//});
var tabs = context.querySelector('paper-tabs');
var mdlTabs = context.querySelector('.mdl-tabs');
if (AppInfo.enableNowPlayingPageBottomTabs) {
tabs.classList.remove('hide');
context.querySelector('.libraryViewNav').classList.add('hide');
context.querySelector('.libraryViewNav').classList.add('bottom');
} else {
tabs.classList.add('hide');
context.querySelector('.libraryViewNav').classList.remove('hide');
context.querySelector('.libraryViewNav').classList.remove('bottom');
}
tabs.noSlide = true;
tabs.addEventListener('iron-select', function (e) {
var btn = context.querySelector('.libraryViewNav a.ui-btn-active');
if (btn) {
btn.classList.remove('ui-btn-active');
}
context.querySelector('.libraryViewNav a[data-index=\'' + e.target.selected + '\']').classList.add('ui-btn-active');
if (e.target.selected == 2 && playlistNeedsRefresh) {
mdlTabs.addEventListener('tabchange', function (e) {
if (e.detail.selectedTabIndex == 2 && playlistNeedsRefresh) {
loadPlaylist(context);
}
showTab(e.target.selected);
});
$(context.querySelectorAll('.libraryViewNav a')).on('click', function () {
var newSelected = this.getAttribute('data-index');
tabs.selected = newSelected;
});
Events.on(MediaController, 'playerchange', onPlayerChange);
@ -887,21 +848,6 @@
bindToPlayer(context, MediaController.getCurrentPlayer());
var selected = tab == '#playlist' ? 2 : 0;
var delay = browser.animate ? 0 : 1000;
// hack alert. doing this because the neon elements don't seem to be initialized yet
setTimeout(function () {
if (AppInfo.enableNowPlayingPageBottomTabs) {
context.querySelector('paper-tabs').selected = selected;
} else {
showTab(selected);
}
}, delay);
updateCastIcon(context);
}
@ -914,6 +860,7 @@
context.querySelector('.topRightContainer').style.position = 'relative';
}
componentHandler.upgradeAllRegistered(dlg);
init(dlg);
};

6
dashboard-ui/css/librarybrowser.css
View file

@ -62,7 +62,7 @@
padding-bottom: 0;
}
.pageWithAbsoluteTabs .pageTabsContainer, .libraryPage > .ui-content {
.pageWithAbsoluteTabs .pageTabContent, .libraryPage > .ui-content {
padding-top: 10px;
}
@ -71,6 +71,10 @@
padding-right: .5em !important;
}*/
.flexPageTabContent.is-active {
display: flex!important;
}
@media all and (max-width: 600px) {
.libraryPage > .ui-content {

104
dashboard-ui/css/librarymenu.css
View file

@ -26,7 +26,7 @@
.absolutePageTabContent.headroomUnpinned {
transform: translateY(-92px);
bottom: -92px!important;
bottom: -92px !important;
}
.sidebarDivider {
@ -188,14 +188,44 @@
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
}
.libraryViewNav.bottom {
top: auto!important;
bottom: 0;
}
.libraryViewNav .mdl-tabs__tab-bar {
-webkit-justify-content: initial;
justify-content: initial;
display: inline-flex;
text-align: center;
margin: 0 auto;
}
.libraryViewNav .mdl-tabs__tab {
color: #888 !important;
padding: 0 1.25em;
float: none;
flex-shrink: 0;
}
.libraryViewNav .mdl-tabs__tab.is-active {
color: #fff !important;
}
.libraryViewNav .mdl-tabs__tab.is-active:after {
background: #52B54B !important;
}
.libraryViewNav::-webkit-scrollbar {
height: 0 !important;
display: none;
}
.libraryViewNavWithMinHeight {
min-height: 48px;
}
.libraryViewNav .mdl-tabs__tab .mdl-tabs__ripple-container .mdl-ripple {
background: #52B54B !important;
}
.viewMenuBar, .libraryViewNav {
background-color: #020202;
@ -335,72 +365,6 @@
background-color: #212121;
}
.libraryViewNav a {
display: inline-block;
padding: 14px 13px 11px;
color: rgba(255,255,255,.8) !important;
text-decoration: none;
margin: 0 0;
position: relative;
font-weight: normal;
border-bottom: 2px solid transparent;
}
.libraryViewNav .ui-btn-active {
border-bottom-color: #52B54B;
color: #fff !important;
}
.libraryViewNav .iron-selected a {
color: inherit !important;
text-decoration: none;
text-align: center;
}
.libraryViewNav #tabsContainer {
margin: auto;
-ms-flex: none;
-webkit-flex: none;
flex: none;
flex-shrink: 0;
flex-grow: 1;
touch-action: auto !important;
}
.libraryViewNav paper-tabs {
flex: none;
flex-shrink: 0;
flex-grow: 1;
overflow-x: visible !important;
}
.libraryViewNav paper-tab {
flex: none;
flex-shrink: 0;
flex-grow: 1;
}
.basicPaperLibraryTabs .libraryViewNav paper-tabs {
display: none;
}
.fullPaperLibraryTabs .legacyTabs {
display: none;
}
.minimumSizeTabs .libraryViewNav .tab-content {
display: block !important;
}
.minimumSizeTabs .libraryViewNav paper-tab {
height: auto !important;
flex-grow: 0 !important;
}
.minimumSizeTabs .libraryViewNav #tabsContainer {
flex-grow: 0 !important;
}
@media all and (max-width: 400px) {
.libraryMenuButtonText {

7
dashboard-ui/css/nowplaying.css
View file

@ -2,13 +2,6 @@
padding-top: 0 !important;
}
.nowPlayingPagePaperTabs.bottom {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
.nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand {
margin: 2px 1px;
}

17
dashboard-ui/devices/android/android.css
View file

@ -1,3 +1,18 @@
.libraryViewNav a, paper-tab, paper-tab a {
paper-tab, paper-tab a {
font-weight: bold !important;
}
.libraryViewNav .mdl-tabs__tab {
font-weight: bold !important;
}
@media all and (min-width: 800px) {
.libraryViewNav .mdl-tabs__tab-bar {
display: flex;
}
.libraryViewNav .mdl-tabs__tab {
flex-grow: 1;
}
}

16
dashboard-ui/devices/windowsphone/wp.css
View file

@ -2,14 +2,14 @@
background-color: #000;
}
.libraryViewNav, .libraryViewNav paper-tabs {
.libraryViewNav {
background-color: #161616;
box-shadow: none;
text-transform: lowercase;
font-size: 220%;
}
.libraryViewNav a, paper-tab {
.libraryViewNav .mdl-tabs__tab {
font-weight: 400 !important;
}
@ -17,17 +17,13 @@
background: #161616;
}
.libraryViewNav #selectionBar {
background-color: transparent !important;
}
.libraryViewNav .ui-btn-active, .libraryViewNav .iron-selected, .btnActiveCast {
.libraryViewNav .mdl-tabs__tab.is-active {
color: #52B54B !important;
}
.libraryViewNav .ui-btn-active {
border-bottom-color: transparent;
}
.libraryViewNav .mdl-tabs__tab.is-active:after {
background-color: transparent !important;
}
.libraryPage:not(.noSecondaryNavPage) {
padding-top: 105px !important;

32
dashboard-ui/home.html
View file

@ -1,22 +1,15 @@
<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="libraryViewNav libraryViewNavWithMinHeight hide">
<paper-tabs hidescrollbuttons noink>
<paper-tab>${TabHome}</paper-tab>
<paper-tab>${TabNextUp}</paper-tab>
<paper-tab class="homeFavoritesTab">${TabFavorites}</paper-tab>
<paper-tab>${TabUpcoming}</paper-tab>
</paper-tabs>
<div class="legacyTabs">
<a href="home.html">${TabHome}</a>
<a href="home.html?tab=1">${TabNextUp}</a>
<a href="home.html?tab=2" class="homeFavoritesTab">${TabFavorites}</a>
<a href="home.html?tab=3">${TabUpcoming}</a>
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="libraryViewNav">
<div class="mdl-tabs__tab-bar">
<a href="#homeTab" class="mdl-tabs__tab is-active" data-index="0">${TabHome}</a>
<a href="#nextUpTab" class="mdl-tabs__tab" data-index="1">${TabNextUp}</a>
<a href="#favoritesTab" class="mdl-tabs__tab homeFavoritesTab" data-index="2">${TabFavorites}</a>
<a href="#upcomingTab" class="mdl-tabs__tab" data-index="3">${TabUpcoming}</a>
</div>
</div>
</div>
<div class="ehsContent fullWidth pageTabsContainer">
<div class="pageTabContent homeTabContent hide" 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;">
<h1 style="margin-top: 0;" class="tourHeader"></h1>
<p>
@ -26,7 +19,7 @@
<div class="sections"></div>
</div>
<div class="pageTabContent homeNextUpTabContent hide" data-index="1">
<div class="mdl-tabs__panel pageTabContent ehsContent" id="nextUpTab" data-index="1">
<div class="homePageSection">
<div>
<h1 class="listHeader nextUpHeader" style="display: inline-block; vertical-align: middle;">${HeaderNextUp}</h1>
@ -37,10 +30,10 @@
</div>
<p class="noNextUpItems" style="display: none;">${NoNextUpItemsMessage}</p>
</div>
<div class="pageTabContent homeFavoritesTabContent hide" data-index="2">
<div class="mdl-tabs__panel pageTabContent ehsContent" id="favoritesTab" data-index="2">
<div class="favoriteSections"></div>
</div>
<div class="pageTabContent homeUpcomingTabContent hide" data-index="3">
<div class="mdl-tabs__panel pageTabContent ehsContent" id="upcomingTab" data-index="3">
<div id="upcomingItems" class="itemsContainer">
</div>
<div class="noItemsMessage" style="display: none;">
@ -49,6 +42,7 @@
<a href="metadata.html">${MessagePleaseEnsureInternetMetadata}</a>
</p>
</div>
</div>
</div>

38
dashboard-ui/livetv.html
View file

@ -1,24 +1,16 @@
<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-tabs,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,MaterialTabs,paper-checkbox,paper-button">
<div class="libraryViewNav libraryViewNavWithMinHeight">
<paper-tabs hidescrollbuttons noink>
<paper-tab>${TabSuggestions}</paper-tab>
<paper-tab>${TabGuide}</paper-tab>
<paper-tab>${TabChannels}</paper-tab>
<paper-tab>${TabRecordings}</paper-tab>
<paper-tab>${TabSeries}</paper-tab>
</paper-tabs>
<div class="legacyTabs">
<a href="livetv.html">${TabSuggestions}</a>
<a href="livetv.html?tab=1">${TabGuide}</a>
<a href="livetv.html?tab=2">${TabChannels}</a>
<a href="livetv.html?tab=3">${TabRecordings}</a>
<a href="livetv.html?tab=4">${TabSeries}</a>
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="libraryViewNav">
<div class="mdl-tabs__tab-bar">
<a href="#suggestionsTab" class="mdl-tabs__tab is-active" data-index="0">${TabSuggestions}</a>
<a href="#guideTab" class="mdl-tabs__tab" data-index="1">${TabGuide}</a>
<a href="#channelsTab" class="mdl-tabs__tab" data-index="2">${TabChannels}</a>
<a href="#recordingsTab" class="mdl-tabs__tab" data-index="3">${TabRecordings}</a>
<a href="#seriesTab" class="mdl-tabs__tab" data-index="4">${TabSeries}</a>
</div>
</div>
</div>
<div class="ehsContent fullWidth pageTabsContainer">
<div class="pageTabContent suggestedTabContent hide" data-index="0">
<div class="mdl-tabs__panel is-active pageTabContent ehsContent" id="suggestionsTab" data-index="0">
<div id="activePrograms" class="homePageSection">
<h1 class="listHeader">${HeaderWhatsOnTV}</h1>
<div class="activeProgramItems itemsContainer noautoinit"></div>
@ -54,16 +46,16 @@
<br />
</div>
</div>
<div class="pageTabContent absolutePageTabContent guideTabContent hide" style="width: auto; display: flex;padding-bottom: 0;" data-index="1">
<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>
<div class="pageTabContent channelsTabContent hide" data-index="2">
<div class="mdl-tabs__panel pageTabContent ehsContent" id="channelsTab" data-index="2">
<div class="viewSettings">
<div class="listTopPaging">
</div>
</div>
<div id="items" class="itemsContainer"></div>
</div>
<div class="pageTabContent recordingsTabContent hide" data-index="3">
<div class="mdl-tabs__panel pageTabContent ehsContent" id="recordingsTab" data-index="3">
<div id="activeRecordings" class="homePageSection hide">
<h1 class="listHeader">${HeaderActiveRecordings}</h1>
<div class="recordingItems itemsContainer"></div>
@ -88,7 +80,7 @@
<div id="recordingGroupItems"></div>
</div>
</div>
<div class="pageTabContent seriesTimersTabContent hide" data-index="4">
<div class="mdl-tabs__panel pageTabContent ehsContent" id="seriesTab" data-index="4">
<div style="max-width: 700px; margin: 0 auto;" id="items">
</div>
</div>

41
dashboard-ui/movies.html
View file

@ -1,26 +1,17 @@
<div id="moviesPage" data-role="page" data-dom-cache="true" class="page libraryPage backdropPage pageWithAbsoluteTabs collectionEditorPage" data-backdroptype="movie">
<div class="libraryViewNav libraryViewNavWithMinHeight">
<paper-tabs hidescrollbuttons noink>
<paper-tab>${TabSuggestions}</paper-tab>
<paper-tab>${TabMovies}</paper-tab>
<paper-tab class="movieTrailersTab">${TabTrailers}</paper-tab>
<paper-tab>${TabCollections}</paper-tab>
<paper-tab>${TabGenres}</paper-tab>
<paper-tab class="movieStudiosTab">${TabStudios}</paper-tab>
</paper-tabs>
<div class="legacyTabs scopedLibraryViewNav">
<a href="movies.html">${TabSuggestions}</a>
<a href="movies.html?tab=1">${TabMovies}</a>
<a href="movies.html?tab=2" class="movieTrailersTab">${TabTrailers}</a>
<a href="movies.html?tab=3">${TabCollections}</a>
<a href="movies.html?tab=4">${TabGenres}</a>
<a href="movies.html?tab=5" class="movieStudiosTab">${TabStudios}</a>
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="libraryViewNav">
<div class="mdl-tabs__tab-bar">
<a href="#suggestionsTab" class="mdl-tabs__tab is-active" data-index="0">${TabSuggestions}</a>
<a href="#moviesTab" class="mdl-tabs__tab" data-index="1">${TabMovies}</a>
<a href="#trailersTab" class="mdl-tabs__tab movieTrailersTab" data-index="2">${TabTrailers}</a>
<a href="#collectionsTab" class="mdl-tabs__tab" data-index="3">${TabCollections}</a>
<a href="#genresTab" class="mdl-tabs__tab" data-index="4">${TabGenres}</a>
<a href="#studiosTab" class="mdl-tabs__tab movieStudiosTab" data-index="5">${TabStudios}</a>
</div>
</div>
</div>
<div class="ehsContent fullWidth pageTabsContainer">
<div class="pageTabContent hide" 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>
<h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderResume}</h1>
@ -48,7 +39,7 @@
<p>${MessageNoMovieSuggestionsAvailable}</p>
</div>
</div>
<div class="pageTabContent hide" data-index="1">
<div class="mdl-tabs__panel pageTabContent ehsContent" id="moviesTab" data-index="1">
<div class="alphabetPicker">
</div>
<div class="viewSettings">
@ -57,7 +48,7 @@
</div>
<div class="itemsContainer" style="text-align:center;"></div>
</div>
<div class="pageTabContent hide" data-index="2">
<div class="mdl-tabs__panel pageTabContent ehsContent" id="trailersTab" data-index="2">
<div class="alphabetPicker">
</div>
<div class="viewSettings">
@ -67,7 +58,7 @@
<div class="itemsContainer" style="text-align:center;"></div>
<p class="noItemsMessage" style="display:none;text-align:center;">${MessageNoTrailersFound}</p>
</div>
<div class="pageTabContent hide" data-index="3">
<div class="mdl-tabs__panel pageTabContent ehsContent" id="collectionsTab" data-index="3">
<div class="viewSettings">
<div class="listTopPaging">
@ -81,14 +72,14 @@
<paper-fab class="btnNewCollection bottomFab" icon="add" style="position:fixed;right:20px;background-color:#db4437;"></paper-fab>
</div>
<div class="pageTabContent hide" data-index="4">
<div class="mdl-tabs__panel pageTabContent ehsContent" id="genresTab" data-index="4">
<div class="viewSettings">
<div class="listTopPaging">
</div>
</div>
<div class="itemsContainer"></div>
</div>
<div class="pageTabContent hide" data-index="5">
<div class="mdl-tabs__panel pageTabContent ehsContent" id="studiosTab" data-index="5">
<div class="viewSettings">
<div class="listTopPaging">
</div>

50
dashboard-ui/music.html
View file

@ -1,28 +1,18 @@
<div id="musicRecommendedPage" data-dom-cache="true" data-role="page" class="page libraryPage backdropPage pageWithAbsoluteTabs" data-backdroptype="musicartist" data-require="scripts/musicrecommended,paper-tabs,paper-checkbox,scripts/alphapicker">
<div class="libraryViewNav libraryViewNavWithMinHeight">
<paper-tabs hidescrollbuttons noink>
<paper-tab>${TabSuggestions}</paper-tab>
<paper-tab>${TabAlbums}</paper-tab>
<paper-tab>${TabAlbumArtists}</paper-tab>
<paper-tab>${TabArtists}</paper-tab>
<paper-tab>${TabSongs}</paper-tab>
<paper-tab>${TabGenres}</paper-tab>
<paper-tab>${TabFolders}</paper-tab>
</paper-tabs>
<div class="legacyTabs scopedLibraryViewNav">
<a href="music.html">${TabSuggestions}</a>
<a href="music.html?tab=1">${TabAlbums}</a>
<a href="music.html?tab=2">${TabAlbumArtists}</a>
<a href="music.html?tab=3">${TabArtists}</a>
<a href="music.html?tab=4">${TabSongs}</a>
<a href="music.html?tab=5">${TabGenres}</a>
<a href="music.html?tab=6">${TabFolders}</a>
<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 class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="libraryViewNav">
<div class="mdl-tabs__tab-bar">
<a href="#suggestionsTab" class="mdl-tabs__tab is-active" data-index="0">${TabSuggestions}</a>
<a href="#albumsTab" class="mdl-tabs__tab" data-index="1">${TabAlbums}</a>
<a href="#albumArtistsTab" class="mdl-tabs__tab" data-index="2">${TabAlbumArtists}</a>
<a href="#artistsTab" class="mdl-tabs__tab" data-index="3">${TabArtists}</a>
<a href="#songsTab" class="mdl-tabs__tab" data-index="4">${TabSongs}</a>
<a href="#genresTab" class="mdl-tabs__tab" data-index="5">${TabGenres}</a>
<a href="#foldersTab" class="mdl-tabs__tab" data-index="6">${TabFolders}</a>
</div>
</div>
</div>
<div class="ehsContent fullWidth pageTabsContainer">
<div class="pageTabContent hide" data-index="0">
<div class="mdl-tabs__panel is-active pageTabContent ehsContent" id="suggestionsTab" data-index="0">
<div class="homePageSection">
<h1 class="listHeader">${HeaderLatestMusic}</h1>
@ -53,7 +43,7 @@
<div class="favoriteSections homePageSection"></div>
</div>
<div class="pageTabContent hide" data-index="1">
<div class="mdl-tabs__panel pageTabContent ehsContent" id="albumsTab" data-index="1">
<div class="alphabetPicker">
</div>
<div class="viewSettings">
@ -62,7 +52,7 @@
</div>
<div id="items" class="itemsContainer paddedItemsContainer"></div>
</div>
<div class="pageTabContent hide" data-index="2">
<div class="mdl-tabs__panel pageTabContent ehsContent" id="albumArtistsTab" data-index="2">
<div class="alphabetPicker">
</div>
<div class="viewSettings">
@ -71,7 +61,7 @@
</div>
<div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
</div>
<div class="pageTabContent hide" data-index="3">
<div class="mdl-tabs__panel pageTabContent ehsContent" id="artistsTab" data-index="3">
<div class="alphabetPicker">
</div>
<div class="viewSettings">
@ -80,21 +70,21 @@
</div>
<div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
</div>
<div class="pageTabContent hide" data-index="4">
<div class="mdl-tabs__panel pageTabContent ehsContent" id="songsTab" data-index="4">
<div class="viewSettings">
<div class="listTopPaging">
</div>
</div>
<div id="items" class="itemsContainer" style="max-width:1000px;margin: 0 auto;"></div>
</div>
<div class="pageTabContent hide" data-index="5">
<div class="mdl-tabs__panel pageTabContent ehsContent" id="genresTab" data-index="5">
<div class="viewSettings">
<div class="listTopPaging">
</div>
</div>
<div id="items" class="itemsContainer paddedItemsContainer"></div>
</div>
<div class="pageTabContent hide" data-index="6">
<div class="mdl-tabs__panel pageTabContent ehsContent" id="foldersTab" data-index="6">
<div class="viewSettings">
<div class="listTopPaging">
</div>

211
dashboard-ui/nowplaying.html
View file

@ -1,4 +1,4 @@
<div id="nowPlayingPage" data-role="page" class="page libraryPage nowPlayingPage noSecondaryNavPage selfBackdropPage" data-contextname="${TitleRemoteControl}" data-theme="b" data-require="scripts/nowplayingpage,paper-tabs,paper-icon-button-light,paper-slider,paper-button">
<div id="nowPlayingPage" data-role="page" class="page libraryPage nowPlayingPage noSecondaryNavPage selfBackdropPage" data-contextname="${TitleRemoteControl}" data-theme="b" data-require="scripts/nowplayingpage,MaterialTabs,paper-icon-button-light,paper-slider,paper-button">
<div class="remoteControlContent">
@ -9,127 +9,124 @@
<button is="paper-icon-button-light" class="nowPlayingCastIcon" style="vertical-align: middle; z-index: 1;" tabindex="-1"><iron-icon icon="cast"></iron-icon></button>
</div>
</div>
<div class="libraryViewNav hide" style="position: static;">
<div>
<a href="#" data-index="0">${TabNowPlaying}</a>
<a href="#" data-index="1">${TabControls}</a>
<a href="#" data-index="2">${TabPlaylist}</a>
</div>
</div>
<div class="nowPlayingPageTab hide" data-tab="0">
<div style="text-align:center;">
<div class="nowPlayingPageTitle" style="line-height: normal;">
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="libraryViewNav">
<div class="mdl-tabs__tab-bar">
<a href="#nowPlayingTab" class="mdl-tabs__tab is-active" data-index="0">${TabNowPlaying}</a>
<a href="#controlsTab" class="mdl-tabs__tab" data-index="1">${TabControls}</a>
<a href="#playlistTab" class="mdl-tabs__tab" data-index="1">${TabPlaylist}</a>
</div>
<div class="nowPlayingInfoMetadata">
<div class="nowPlayingPageImage" style="margin: 1em auto;"></div>
<div class="nowPlayingPageTimeContainer">
</div>
<div class="mdl-tabs__panel is-active pageTabContent ehsContent" id="nowPlayingTab" data-index="0">
<div style="text-align:center;">
<div class="nowPlayingPageTitle" style="line-height: normal;">
</div>
<div class="nowPlayingInfoMetadata">
<div class="nowPlayingPageImage" style="margin: 1em auto;"></div>
<div class="nowPlayingPageTimeContainer">
<div>
<paper-slider pin step="1" min="0" max="100" value="0" class="nowPlayingPositionSlider" style="width: 100%;"></paper-slider>
</div>
<div style="text-align:left;">
<div class="positionTime" style="float:left;"></div>
<div class="runtime" style="float: right;"></div>
</div>
</div>
</div>
<div class="nowPlayingInfoButtons">
<div>
<paper-slider pin step="1" min="0" max="100" value="0" class="nowPlayingPositionSlider" style="width: 100%;"></paper-slider>
<paper-fab icon="skip-previous" class="btnPreviousTrack btnPlayStateCommand subdued" title="${ButtonPreviousTrack}"></paper-fab>
<paper-fab icon="pause" class="btnPause btnPlayStateCommand subdued" title="${ButtonPause}"></paper-fab>
<paper-fab icon="play-arrow" class="btnPlay btnPlayStateCommand subdued" title="${ButtonPlay}"></paper-fab>
<paper-fab icon="stop" class="btnPlayStateCommand btnStop subdued" title="${ButtonStop}"></paper-fab>
<paper-fab icon="skip-next" class="btnPlayStateCommand btnNextTrack subdued" title="${ButtonNextTrack}"></paper-fab>
</div>
<div style="text-align:left;">
<div class="positionTime" style="float:left;"></div>
<div class="runtime" style="float: right;"></div>
<div class="buttonsRow2">
<paper-fab icon="audiotrack" class="btnAudioTracks videoButton btnPlayStateCommand subdued" title="${ButtonAudioTracks}" data-command="GoToSearch"></paper-fab>
<paper-fab icon="closed-caption" class="btnSubtitles videoButton btnPlayStateCommand subdued" title="${ButtonSubtitles}" data-command="GoToSearch"></paper-fab>
<paper-fab icon="movie" class="btnChapters videoButton btnPlayStateCommand subdued" title="${ButtonScenes}" data-command="GoToSearch"></paper-fab>
<paper-fab icon="fullscreen" class="btnToggleFullscreen videoButton btnPlayStateCommand subdued" title="${ButtonFullscreen}" data-command="ToggleFullscreen"></paper-fab>
</div>
<div>
<paper-fab icon="repeat" class="btnCommand subdued repeatToggleButton" title="${ButtonRepeat}" data-command="SetRepeatMode"></paper-fab>
<paper-fab icon="volume-off" class="btnCommand subdued volumeButton" title="${ButtonMute}" data-command="ToggleMute"></paper-fab>
<paper-fab icon="volume-down" class="btnCommand subdued volumeButton" title="${ButtonVolumeDown}" data-command="VolumeDown"></paper-fab>
<paper-fab icon="volume-up" class="btnCommand subdued volumeButton" title="${ButtonVolumeUp}" data-command="VolumeUp"></paper-fab>
</div>
<div class="nowPlayingPageUserDataButtons" style="margin-top:1em;">
</div>
</div>
</div>
<div class="nowPlayingInfoButtons">
</div>
<div class="mdl-tabs__panel pageTabContent ehsContent" id="controlsTab" data-index="1">
<div style="text-align:center;">
<div>
<paper-fab icon="skip-previous" class="btnPreviousTrack btnPlayStateCommand subdued" title="${ButtonPreviousTrack}"></paper-fab>
<paper-fab icon="pause" class="btnPause btnPlayStateCommand subdued" title="${ButtonPause}"></paper-fab>
<paper-fab icon="play-arrow" class="btnPlay btnPlayStateCommand subdued" title="${ButtonPlay}"></paper-fab>
<paper-fab icon="stop" class="btnPlayStateCommand btnStop subdued" title="${ButtonStop}"></paper-fab>
<paper-fab icon="skip-next" class="btnPlayStateCommand btnNextTrack subdued" title="${ButtonNextTrack}"></paper-fab>
</div>
<div class="buttonsRow2">
<paper-fab icon="audiotrack" class="btnAudioTracks videoButton btnPlayStateCommand subdued" title="${ButtonAudioTracks}" data-command="GoToSearch"></paper-fab>
<paper-fab icon="closed-caption" class="btnSubtitles videoButton btnPlayStateCommand subdued" title="${ButtonSubtitles}" data-command="GoToSearch"></paper-fab>
<paper-fab icon="movie" class="btnChapters videoButton btnPlayStateCommand subdued" title="${ButtonScenes}" data-command="GoToSearch"></paper-fab>
<paper-fab icon="fullscreen" class="btnToggleFullscreen videoButton btnPlayStateCommand subdued" title="${ButtonFullscreen}" data-command="ToggleFullscreen"></paper-fab>
<paper-fab icon="keyboard-arrow-up" class="btnArrowUp btnCommand subdued" title="${ButtonArrowUp}" data-command="MoveUp"></paper-fab>
</div>
<div>
<paper-fab icon="repeat" class="btnCommand subdued repeatToggleButton" title="${ButtonRepeat}" data-command="SetRepeatMode"></paper-fab>
<paper-fab icon="volume-off" class="btnCommand subdued volumeButton" title="${ButtonMute}" data-command="ToggleMute"></paper-fab>
<paper-fab icon="volume-down" class="btnCommand subdued volumeButton" title="${ButtonVolumeDown}" data-command="VolumeDown"></paper-fab>
<paper-fab icon="volume-up" class="btnCommand subdued volumeButton" title="${ButtonVolumeUp}" data-command="VolumeUp"></paper-fab>
<paper-fab icon="keyboard-arrow-left" class="btnArrowLeft btnCommand subdued" title="${ButtonArrowLeft}" data-command="MoveLeft"></paper-fab>
<paper-fab icon="check" class="btnOk btnCommand subdued" title="${ButtonOk}" data-command="Select"></paper-fab>
<paper-fab icon="keyboard-arrow-right" class="btnArrowRight btnCommand subdued" title="${ButtonArrowRight}" data-command="MoveRight"></paper-fab>
</div>
<div class="nowPlayingPageUserDataButtons" style="margin-top:1em;">
<div>
<paper-fab icon="keyboard-arrow-down" class="btnArrowDown btnCommand subdued" title="${ButtonArrowDown}" data-command="MoveDown"></paper-fab>
</div>
<div>
<paper-fab icon="arrow-back" class="btnBack btnCommand subdued" title="${ButtonBack}" data-command="Back"></paper-fab>
<paper-fab icon="info" class="btnInfo btnCommand subdued" title="${ButtonInfo}" data-command="ToggleContextMenu"></paper-fab>
</div>
<br />
<div>
<paper-fab icon="home" class="btnGoHome btnCommand subdued" title="${ButtonHome}" data-command="GoHome"></paper-fab>
<paper-fab icon="search" class="btnShowSearch btnCommand subdued" title="${ButtonSearch}" data-command="GoToSearch"></paper-fab>
</div>
<div>
<paper-fab icon="settings" class="bthShowSettings btnCommand subdued" title="${ButtonSettings}" data-command="GoToSettings"></paper-fab>
<paper-fab icon="videocam" class="btnScreenshot btnCommand subdued" title="${ButtonTakeScreenshot}" data-command="TakeScreenshot"></paper-fab>
</div>
</div>
<div class="readOnlyContent" style="margin: 2em auto 0; padding: 0 1em 100px;">
<div class="sendMessageSection">
<br /><h1>${HeaderSendMessage}</h1>
<div style="text-align: left;">
<form class="sendMessageForm">
<div>
<paper-input class="sendMessageElement" type="text" id="txtMessageTitle" label="${LabelMessageTitle}" required></paper-input>
</div>
<br />
<div>
<paper-input class="sendMessageElement" type="text" id="txtMessageText" label="${LabelMessageText}" required></paper-input>
</div>
<p>
<button class="sendMessageElement clearButton" type="submit" data-role="none" style="display:block;"><paper-button class="sendMessageElement accent" type="submit" raised style="display:block;">${ButtonSend}</paper-button></button>
</p>
</form>
</div>
</div>
<div class="sendTextSection">
<br /><h1>${HeaderTypeText}</h1>
<div style="text-align: left;">
<form class="typeTextForm">
<div>
<paper-input class="typeTextElement" type="text" id="txtTypeText" label="${LabelTypeText}" required></paper-input>
</div>
<p>
<button class="typeTextElement clearButton" type="submit" data-role="none" style="display:block;"><paper-button class="typeTextElement accent" type="submit" raised style="display:block;">${ButtonSend}</paper-button></button>
</p>
</form>
</div>
</div>
</div>
</div>
<div class="mdl-tabs__panel pageTabContent ehsContent" id="playlistTab" data-index="1">
<div class="playlist itemsContainer" style="max-width: 800px; margin: 3em auto 0; padding-bottom: 200px;">
</div>
</div>
</div>
<div class="nowPlayingPageTab hide" data-tab="1">
<div style="text-align:center;">
<div>
<paper-fab icon="keyboard-arrow-up" class="btnArrowUp btnCommand subdued" title="${ButtonArrowUp}" data-command="MoveUp"></paper-fab>
</div>
<div>
<paper-fab icon="keyboard-arrow-left" class="btnArrowLeft btnCommand subdued" title="${ButtonArrowLeft}" data-command="MoveLeft"></paper-fab>
<paper-fab icon="check" class="btnOk btnCommand subdued" title="${ButtonOk}" data-command="Select"></paper-fab>
<paper-fab icon="keyboard-arrow-right" class="btnArrowRight btnCommand subdued" title="${ButtonArrowRight}" data-command="MoveRight"></paper-fab>
</div>
<div>
<paper-fab icon="keyboard-arrow-down" class="btnArrowDown btnCommand subdued" title="${ButtonArrowDown}" data-command="MoveDown"></paper-fab>
</div>
<div>
<paper-fab icon="arrow-back" class="btnBack btnCommand subdued" title="${ButtonBack}" data-command="Back"></paper-fab>
<paper-fab icon="info" class="btnInfo btnCommand subdued" title="${ButtonInfo}" data-command="ToggleContextMenu"></paper-fab>
</div>
<br />
<div>
<paper-fab icon="home" class="btnGoHome btnCommand subdued" title="${ButtonHome}" data-command="GoHome"></paper-fab>
<paper-fab icon="search" class="btnShowSearch btnCommand subdued" title="${ButtonSearch}" data-command="GoToSearch"></paper-fab>
</div>
<div>
<paper-fab icon="settings" class="bthShowSettings btnCommand subdued" title="${ButtonSettings}" data-command="GoToSettings"></paper-fab>
<paper-fab icon="videocam" class="btnScreenshot btnCommand subdued" title="${ButtonTakeScreenshot}" data-command="TakeScreenshot"></paper-fab>
</div>
</div>
<div class="readOnlyContent" style="margin: 2em auto 0; padding: 0 1em 100px;">
<div class="sendMessageSection">
<br /><h1>${HeaderSendMessage}</h1>
<div style="text-align: left;">
<form class="sendMessageForm">
<div>
<paper-input class="sendMessageElement" type="text" id="txtMessageTitle" label="${LabelMessageTitle}" required></paper-input>
</div>
<br />
<div>
<paper-input class="sendMessageElement" type="text" id="txtMessageText" label="${LabelMessageText}" required></paper-input>
</div>
<p>
<button class="sendMessageElement clearButton" type="submit" data-role="none" style="display:block;"><paper-button class="sendMessageElement accent" type="submit" raised style="display:block;">${ButtonSend}</paper-button></button>
</p>
</form>
</div>
</div>
<div class="sendTextSection">
<br /><h1>${HeaderTypeText}</h1>
<div style="text-align: left;">
<form class="typeTextForm">
<div>
<paper-input class="typeTextElement" type="text" id="txtTypeText" label="${LabelTypeText}" required></paper-input>
</div>
<p>
<button class="typeTextElement clearButton" type="submit" data-role="none" style="display:block;"><paper-button class="typeTextElement accent" type="submit" raised style="display:block;">${ButtonSend}</paper-button></button>
</p>
</form>
</div>
</div>
</div>
</div>
<div class="nowPlayingPageTab hide" data-tab="2">
<div class="playlist itemsContainer" style="max-width: 800px; margin: 3em auto 0; padding-bottom: 200px;">
</div>
</div>
<paper-tabs class="nowPlayingPagePaperTabs bottom hide" alignbottom hidescrollbuttons noink disabledrag>
<paper-tab>${TabNowPlaying}</paper-tab>
<paper-tab>${TabControls}</paper-tab>
<paper-tab>${TabPlaylist}</paper-tab>
</paper-tabs>
</div>
<div data-role="content" style="overflow:visible;">

2
dashboard-ui/photos.html
View file

@ -1,4 +1,4 @@
<div id="photosPage" data-role="page" data-dom-cache="true" class="page libraryPage noSecondaryNavPage" data-require="scripts/photos,paper-tabs">
<div id="photosPage" data-role="page" data-dom-cache="true" class="page libraryPage noSecondaryNavPage" data-require="scripts/photos">
<div data-role="content">
<div class="viewSettings">

19
dashboard-ui/scripts/channels.js
View file

@ -1,4 +1,4 @@
define(['jQuery'], function ($) {
define(['libraryBrowser'], function (libraryBrowser) {
// The base query options
var query = {
@ -23,7 +23,7 @@
if (view == "Thumb") {
html = LibraryBrowser.getPosterViewHtml({
html = libraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "backdrop",
context: 'channels',
@ -36,7 +36,7 @@
}
else if (view == "ThumbCard") {
html = LibraryBrowser.getPosterViewHtml({
html = libraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "backdrop",
preferThumb: true,
@ -51,7 +51,7 @@
elem.innerHTML = html;
ImageLoader.lazyChildren(elem);
LibraryBrowser.saveQueryValues('channels', query);
libraryBrowser.saveQueryValues('channels', query);
Dashboard.hideLoadingMsg();
});
@ -62,7 +62,7 @@
switch (index) {
case 1:
LibraryBrowser.loadSavedQueryValues('channels', query);
libraryBrowser.loadSavedQueryValues('channels', query);
reloadItems(page);
break;
default:
@ -74,12 +74,13 @@
var page = this;
var tabs = page.querySelector('paper-tabs');
var pageTabsContainer = page.querySelector('.pageTabsContainer');
var mdlTabs = page.querySelector('.mdl-tabs');
LibraryBrowser.configurePaperLibraryTabs(page, tabs, pageTabsContainer, 'channels.html');
componentHandler.upgradeAllRegistered(page);
pageTabsContainer.addEventListener('tabchange', function (e) {
libraryBrowser.configurePaperLibraryTabs(page, mdlTabs);
mdlTabs.addEventListener('tabchange', function (e) {
loadTab(page, parseInt(e.detail.selectedTabIndex));
});

4
dashboard-ui/scripts/channelslatest.js
View file

@ -26,9 +26,9 @@
pageIdOn('pageinit', "channelsPage", function () {
var page = this;
var pageTabsContainer = page.querySelector('.pageTabsContainer');
var mdlTabs = page.querySelector('.mdl-tabs');
pageTabsContainer.addEventListener('tabchange', function (e) {
mdlTabs.addEventListener('tabchange', function (e) {
loadTab(page, parseInt(e.detail.selectedTabIndex));
});

38
dashboard-ui/scripts/indexpage.js
View file

@ -237,20 +237,6 @@
}
}
function onPlaybackStop(e, state) {
if (state.NowPlayingItem && state.NowPlayingItem.MediaType == 'Video') {
var page = $.mobile.activePage;
var pageTabsContainer = page.querySelector('.pageTabsContainer');
pageTabsContainer.dispatchEvent(new CustomEvent("tabchange", {
detail: {
selectedTabIndex: libraryBrowser.selectedTab(pageTabsContainer)
}
}));
}
}
function getDisplayPreferences(key, userId) {
return ApiClient.getDisplayPreferences(key, userId, displayPreferencesKey());
@ -261,20 +247,21 @@
var self = this;
self.renderTab = function () {
var tabContent = view.querySelector('.pageTabContent[data-index=\'' + 0 + '\']');
var tabContent = view.querySelector('.mdl-tabs__panel[data-index=\'' + 0 + '\']');
loadHomeTab(view, tabContent);
};
var pageTabsContainer = view.querySelector('.pageTabsContainer');
var mdlTabs = view.querySelector('.mdl-tabs');
libraryBrowser.configurePaperLibraryTabs(view, view.querySelector('paper-tabs'), pageTabsContainer, 'home.html');
componentHandler.upgradeAllRegistered(view);
libraryBrowser.configurePaperLibraryTabs(view, mdlTabs);
var tabControllers = [];
var renderedTabs = [];
function loadTab(page, index) {
var tabContent = page.querySelector('.pageTabContent[data-index=\'' + index + '\']');
var tabContent = view.querySelector('.mdl-tabs__panel[data-index=\'' + index + '\']');
var depends = [];
switch (index) {
@ -293,7 +280,6 @@
break;
default:
return;
break;
}
require(depends, function (controllerFactory) {
@ -318,7 +304,7 @@
});
}
pageTabsContainer.addEventListener('tabchange', function (e) {
mdlTabs.addEventListener('tabchange', function (e) {
loadTab(view, parseInt(e.detail.selectedTabIndex));
});
@ -334,6 +320,18 @@
view.querySelector('.libraryViewNav').classList.add('hide');
}
function onPlaybackStop(e, state) {
if (state.NowPlayingItem && state.NowPlayingItem.MediaType == 'Video') {
mdlTabs.dispatchEvent(new CustomEvent("tabchange", {
detail: {
selectedTabIndex: libraryBrowser.selectedTab(mdlTabs)
}
}));
}
}
view.addEventListener('viewshow', function (e) {
Events.on(MediaController, 'playbackstop', onPlaybackStop);
});

196
dashboard-ui/scripts/librarybrowser.js
View file

@ -1,5 +1,18 @@
define(['playlistManager', 'appSettings', 'appStorage', 'apphost', 'datetime', 'jQuery', 'scrollStyles'], function (playlistManager, appSettings, appStorage, appHost, datetime, $) {
function parentWithClass(elem, className) {
while (!elem.classList || !elem.classList.contains(className)) {
elem = elem.parentNode;
if (!elem) {
return null;
}
}
return elem;
}
var libraryBrowser = (function (window, document, screen) {
// Regular Expressions for parsing tags and attributes
@ -171,14 +184,6 @@
elem.classList.add('hasrefreshtime');
},
enableFullPaperTabs: function () {
if (browserInfo.animate && !browserInfo.mobile) {
//return true;
}
return AppInfo.isNativeApp;
},
allowSwipe: function (target) {
function allowSwipeOn(elem) {
@ -188,7 +193,7 @@
}
if (elem.classList) {
return !elem.classList.contains('hiddenScrollX') && !elem.classList.contains('smoothScrollX');
return !elem.classList.contains('hiddenScrollX') && !elem.classList.contains('smoothScrollX') && !elem.classList.contains('libraryViewNav');
}
return true;
@ -205,119 +210,79 @@
return true;
},
selectedTab: function (pageTabsContainer, selected) {
selectedTab: function (tabs, selected) {
if (selected == null) {
return pageTabsContainer.selectedTabIndex;
var elem = tabs.querySelector('.mdl-tabs__tab.is-active');
if (elem) {
return parseInt(elem.getAttribute('data-index'));
}
return 0;
}
var tabs = pageTabsContainer.querySelectorAll('.pageTabContent');
for (var i = 0, length = tabs.length; i < length; i++) {
if (i == selected) {
tabs[i].classList.remove('hide');
} else {
tabs[i].classList.add('hide');
}
var current = LibraryBrowser.selectedTab(tabs);
if (current == selected) {
tabs.dispatchEvent(new CustomEvent("tabchange", {
detail: {
selectedTabIndex: selected
}
}));
} else {
var tabButtons = tabs.querySelectorAll('.mdl-tabs__tab');
tabButtons[selected].click();
}
pageTabsContainer.selectedTabIndex = selected;
pageTabsContainer.dispatchEvent(new CustomEvent("tabchange", {
detail: {
selectedTabIndex: selected
}
}));
},
configureSwipeTabs: function (ownerpage, tabs, pageTabsContainer) {
configureSwipeTabs: function (ownerpage, tabs) {
var pageCount = pageTabsContainer.querySelectorAll('.pageTabContent').length;
var pageCount = tabs.querySelectorAll('.mdl-tabs__panel').length;
require(['hammer'], function (Hammer) {
var hammertime = new Hammer(pageTabsContainer);
var hammertime = new Hammer(tabs);
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_HORIZONTAL });
hammertime.on('swipeleft', function (e) {
if (LibraryBrowser.allowSwipe(e.target)) {
var selected = parseInt(LibraryBrowser.selectedTab(pageTabsContainer) || '0');
var selected = parseInt(LibraryBrowser.selectedTab(tabs) || '0');
if (selected < (pageCount - 1)) {
tabs.selectNext();
LibraryBrowser.selectedTab(tabs, selected + 1);
}
}
});
hammertime.on('swiperight', function (e) {
if (LibraryBrowser.allowSwipe(e.target)) {
var selected = parseInt(LibraryBrowser.selectedTab(pageTabsContainer) || '0');
var selected = parseInt(LibraryBrowser.selectedTab(tabs) || '0');
if (selected > 0) {
tabs.selectPrevious();
LibraryBrowser.selectedTab(tabs, selected - 1);
}
}
});
});
},
navigateOnLibraryTabSelect: function () {
return !LibraryBrowser.enableFullPaperTabs();
},
configurePaperLibraryTabs: function (ownerpage, tabs) {
configurePaperLibraryTabs: function (ownerpage, tabs, pageTabsContainer) {
// Causing iron-select to not fire in IE and safari
if (browserInfo.chrome) {
tabs.noink = true;
if (!browserInfo.safari) {
LibraryBrowser.configureSwipeTabs(ownerpage, tabs);
}
var libraryViewNav = ownerpage.querySelector('.libraryViewNav');
if (LibraryBrowser.enableFullPaperTabs()) {
tabs.querySelector('.mdl-tabs__tab-bar').addEventListener('click', function (e) {
if (browserInfo.safari) {
tabs.noSlide = true;
tabs.noBar = true;
} else {
LibraryBrowser.configureSwipeTabs(ownerpage, tabs, pageTabsContainer);
}
var link = parentWithClass(e.target, 'mdl-tabs__tab');
if (libraryViewNav) {
libraryViewNav.classList.add('paperLibraryViewNav');
libraryViewNav.classList.remove('libraryViewNavWithMinHeight');
}
} else {
tabs.noSlide = true;
tabs.noBar = true;
var legacyTabs = ownerpage.querySelector('.legacyTabs');
if (legacyTabs) {
pageTabsContainer.addEventListener('tabchange', function (e) {
var selected = e.detail.selectedTabIndex;
var anchors = legacyTabs.querySelectorAll('a');
for (var i = 0, length = anchors.length; i < length; i++) {
if (i == selected) {
anchors[i].classList.add('ui-btn-active');
} else {
anchors[i].classList.remove('ui-btn-active');
}
if (link) {
tabs.dispatchEvent(new CustomEvent("tabchange", {
detail: {
selectedTabIndex: parseInt(link.getAttribute('data-index'))
}
});
}));
}
if (libraryViewNav) {
libraryViewNav.classList.remove('libraryViewNavWithMinHeight');
}
}
});
ownerpage.addEventListener('viewbeforeshow', LibraryBrowser.onTabbedpagebeforeshow);
if (!LibraryBrowser.navigateOnLibraryTabSelect()) {
tabs.addEventListener('iron-select', function () {
LibraryBrowser.selectedTab(pageTabsContainer, this.selected);
});
}
},
onTabbedpagebeforeshow: function (e) {
@ -344,38 +309,24 @@
onTabbedpagebeforeshowInternal: function (page, e, isFirstLoad) {
var pageTabsContainer = page.querySelector('.pageTabsContainer');
var pageTabsContainer = page.querySelector('.mdl-tabs');
if (isFirstLoad) {
console.log('selected tab is null, checking query string');
var selected = parseInt(getParameterByName('tab') || '0');
var selected = page.firstTabIndex != null ? page.firstTabIndex : parseInt(getParameterByName('tab') || '0');
console.log('selected tab will be ' + selected);
if (LibraryBrowser.enableFullPaperTabs()) {
var tabs = page.querySelector('paper-tabs');
if (tabs.selected) {
// showTab was called
return;
}
tabs.selected = selected;
} else {
LibraryBrowser.selectedTab(pageTabsContainer, selected);
}
LibraryBrowser.selectedTab(pageTabsContainer, selected);
} else {
// Go back to the first tab
if (LibraryBrowser.enableFullPaperTabs() && !e.detail.isRestored) {
if (LibraryBrowser.selectedTab(pageTabsContainer)) {
page.querySelector('paper-tabs').selected = 0;
return;
}
if (!e.detail.isRestored) {
LibraryBrowser.selectedTab(pageTabsContainer, 0);
return;
}
pageTabsContainer.dispatchEvent(new CustomEvent("tabchange", {
detail: {
@ -387,37 +338,13 @@
showTab: function (url, index) {
if (!LibraryBrowser.enableFullPaperTabs()) {
if (index) {
url = replaceQueryString(url, 'tab', index);
}
Dashboard.navigate(url);
return;
}
var afterNavigate = function () {
document.removeEventListener('pagebeforeshow', afterNavigate);
if (window.location.href.toLowerCase().indexOf(url.toLowerCase()) != -1) {
var pageTabsContainer = this.querySelector('.pageTabsContainer');
if (pageTabsContainer) {
var tabs = this.querySelector('paper-tabs');
// For some reason the live tv page will not switch tabs in IE and safari
var delay = browserInfo.chrome ? 0 : 100;
setTimeout(function () {
var noSlide = tabs.noSlide;
tabs.noSlide = true;
tabs.selected = index;
tabs.noSlide = noSlide;
}, delay);
}
this.firstTabIndex = index;
}
};
@ -425,6 +352,7 @@
afterNavigate.call($.mobile.activePage);
} else {
pageClassOn('pagebeforeshow', 'page', afterNavigate);
Dashboard.navigate(url);
}
@ -2431,7 +2359,7 @@
lines.push(airTimeText || '');
}
if (item.Type == 'TvChannel') {
if (item.Type == 'TvChannel') {
if (item.CurrentProgram) {
lines.push(LibraryBrowser.getPosterViewDisplayName(item.CurrentProgram));
@ -3141,7 +3069,7 @@
getUserDataButtonHtml: function (method, itemId, btnCssClass, icon, tooltip, style) {
if (style == 'fab') {
var tagName = 'paper-fab';
return '<' + tagName + ' title="' + tooltip + '" data-itemid="' + itemId + '" icon="' + icon + '" class="' + btnCssClass + '" onclick="LibraryBrowser.' + method + '(this);return false;"></' + tagName + '>';
}
@ -3712,12 +3640,6 @@
}
};
if (libraryBrowser.enableFullPaperTabs()) {
document.documentElement.classList.add('fullPaperLibraryTabs');
} else {
document.documentElement.classList.add('basicPaperLibraryTabs');
}
return libraryBrowser;
})(window, document, screen);

20
dashboard-ui/scripts/librarymenu.js
View file

@ -896,16 +896,18 @@
var viewMenuBar = document.querySelector('.viewMenuBar');
if (page.classList.contains('standalonePage')) {
viewMenuBar.classList.add('hide');
} else {
viewMenuBar.classList.remove('hide');
}
if (viewMenuBar) {
if (page.classList.contains('standalonePage')) {
viewMenuBar.classList.add('hide');
} else {
viewMenuBar.classList.remove('hide');
}
if (page.classList.contains('type-interior') && !layoutManager.mobile) {
viewMenuBar.classList.add('headroomDisabled');
} else {
viewMenuBar.classList.remove('headroomDisabled');
if (page.classList.contains('type-interior') && !layoutManager.mobile) {
viewMenuBar.classList.add('headroomDisabled');
} else {
viewMenuBar.classList.remove('headroomDisabled');
}
}
if (requiresUserRefresh) {

22
dashboard-ui/scripts/livetvsuggested.js
View file

@ -1,4 +1,4 @@
define(['jQuery', 'scrollStyles'], function ($) {
define(['jQuery', 'libraryBrowser', 'scrollStyles'], function ($, libraryBrowser) {
function enableScrollX() {
return browserInfo.mobile && AppInfo.enableAppLayouts;
@ -37,7 +37,7 @@
}).then(function (result) {
renderItems(page, result.Items, 'activeProgramItems', 'play');
LibraryBrowser.setLastRefreshed(page);
libraryBrowser.setLastRefreshed(page);
Dashboard.hideLoadingMsg();
});
}
@ -108,7 +108,7 @@
function renderItems(page, items, sectionClass, overlayButton, shape) {
var html = LibraryBrowser.getPosterViewHtml({
var html = libraryBrowser.getPosterViewHtml({
items: items,
shape: shape || (enableScrollX() ? getSquareShape() : 'auto'),
showTitle: true,
@ -137,19 +137,21 @@
function renderSuggestedTab(page, tabContent) {
if (LibraryBrowser.needsRefresh(tabContent)) {
if (libraryBrowser.needsRefresh(tabContent)) {
reload(tabContent);
}
}
function loadTab(page, index) {
var tabContent = page.querySelector('.pageTabContent[data-index=\'' + index + '\']');
var tabContent = page.querySelector('.mdl-tabs__panel[data-index=\'' + index + '\']');
var depends = [];
var scope = 'LiveTvPage';
var renderMethod = '';
var initMethod = '';
var viewMenuBar = document.querySelector('.viewMenuBar');
switch (index) {
case 0:
@ -198,15 +200,15 @@
var page = this;
var tabs = page.querySelector('paper-tabs');
var pageTabsContainer = page.querySelector('.pageTabsContainer');
var mdlTabs = page.querySelector('.mdl-tabs');
LibraryBrowser.configurePaperLibraryTabs(page, tabs, pageTabsContainer, 'livetv.html');
componentHandler.upgradeAllRegistered(page);
pageTabsContainer.addEventListener('tabchange', function (e) {
libraryBrowser.configurePaperLibraryTabs(page, mdlTabs);
mdlTabs.addEventListener('tabchange', function (e) {
loadTab(page, parseInt(e.detail.selectedTabIndex));
});
});
pageIdOn('viewshow', "liveTvSuggestedPage", function () {

40
dashboard-ui/scripts/moviesrecommended.js
View file

@ -267,37 +267,37 @@
}
}
function onPlaybackStop(e, state) {
if (state.NowPlayingItem && state.NowPlayingItem.MediaType == 'Video') {
var page = $($.mobile.activePage)[0];
var pageTabsContainer = page.querySelector('.pageTabsContainer');
pageTabsContainer.dispatchEvent(new CustomEvent("tabchange", {
detail: {
selectedTabIndex: libraryBrowser.selectedTab(pageTabsContainer)
}
}));
}
}
return function (view, params) {
var self = this;
self.initTab = function() {
var tabContent = view.querySelector('.pageTabContent[data-index=\'' + 0 + '\']');
var tabContent = view.querySelector('.mdl-tabs__panel[data-index=\'' + 0 + '\']');
initSuggestedTab(view, tabContent);
};
self.renderTab = function () {
var tabContent = view.querySelector('.pageTabContent[data-index=\'' + 0 + '\']');
var tabContent = view.querySelector('.mdl-tabs__panel[data-index=\'' + 0 + '\']');
loadSuggestionsTab(view, params, tabContent);
};
$('.recommendations', view).createCardMenus();
var pageTabsContainer = view.querySelector('.pageTabsContainer');
var mdlTabs = view.querySelector('.mdl-tabs');
function onPlaybackStop(e, state) {
if (state.NowPlayingItem && state.NowPlayingItem.MediaType == 'Video') {
mdlTabs.dispatchEvent(new CustomEvent("tabchange", {
detail: {
selectedTabIndex: libraryBrowser.selectedTab(mdlTabs)
}
}));
}
}
componentHandler.upgradeAllRegistered(view);
var baseUrl = 'movies.html';
var topParentId = params.topParentId;
@ -305,14 +305,14 @@
baseUrl += '?topParentId=' + topParentId;
}
libraryBrowser.configurePaperLibraryTabs(view, view.querySelector('paper-tabs'), pageTabsContainer, baseUrl);
libraryBrowser.configurePaperLibraryTabs(view, mdlTabs);
var tabControllers = [];
var renderedTabs = [];
function loadTab(page, index) {
var tabContent = page.querySelector('.pageTabContent[data-index=\'' + index + '\']');
var tabContent = page.querySelector('.mdl-tabs__panel[data-index=\'' + index + '\']');
var depends = [];
switch (index) {
@ -360,7 +360,7 @@
});
}
pageTabsContainer.addEventListener('tabchange', function (e) {
mdlTabs.addEventListener('tabchange', function (e) {
loadTab(view, parseInt(e.detail.selectedTabIndex));
});

24
dashboard-ui/scripts/musicrecommended.js
View file

@ -1,4 +1,4 @@
define(['jQuery', 'scrollStyles'], function ($) {
define(['jQuery', 'libraryBrowser', 'scrollStyles'], function ($, libraryBrowser) {
function itemsPerRow() {
@ -34,7 +34,7 @@
ApiClient.getJSON(ApiClient.getUrl('Users/' + userId + '/Items/Latest', options)).then(function (items) {
var elem = page.querySelector('#recentlyAddedSongs');
elem.innerHTML = LibraryBrowser.getPosterViewHtml({
elem.innerHTML = libraryBrowser.getPosterViewHtml({
items: items,
showUnplayedIndicator: false,
showLatestItemsPopup: false,
@ -50,7 +50,7 @@
Dashboard.hideLoadingMsg();
LibraryBrowser.setLastRefreshed(page);
libraryBrowser.setLastRefreshed(page);
});
}
@ -82,7 +82,7 @@
}
var itemsContainer = elem.querySelector('.itemsContainer');
itemsContainer.innerHTML = LibraryBrowser.getPosterViewHtml({
itemsContainer.innerHTML = libraryBrowser.getPosterViewHtml({
items: result.Items,
showUnplayedIndicator: false,
shape: getSquareShape(),
@ -128,7 +128,7 @@
}
var itemsContainer = elem.querySelector('.itemsContainer');
itemsContainer.innerHTML = LibraryBrowser.getPosterViewHtml({
itemsContainer.innerHTML = libraryBrowser.getPosterViewHtml({
items: result.Items,
showUnplayedIndicator: false,
shape: getSquareShape(),
@ -171,7 +171,7 @@
}
var itemsContainer = elem.querySelector('.itemsContainer');
itemsContainer.innerHTML = LibraryBrowser.getPosterViewHtml({
itemsContainer.innerHTML = libraryBrowser.getPosterViewHtml({
items: result.Items,
shape: getSquareShape(),
showTitle: true,
@ -203,7 +203,7 @@
var parentId = LibraryMenu.getTopParentId();
if (LibraryBrowser.needsRefresh(tabContent)) {
if (libraryBrowser.needsRefresh(tabContent)) {
console.log('loadSuggestionsTab');
loadLatest(tabContent, parentId);
loadPlaylists(tabContent, parentId);
@ -220,7 +220,7 @@
function loadTab(page, index) {
var tabContent = page.querySelector('.pageTabContent[data-index=\'' + index + '\']');
var tabContent = page.querySelector('.mdl-tabs__panel[data-index=\'' + index + '\']');
var depends = [];
var scope = 'MusicPage';
var renderMethod = '';
@ -289,8 +289,7 @@
$('.recommendations', page).createCardMenus();
var tabs = page.querySelector('paper-tabs');
var pageTabsContainer = page.querySelector('.pageTabsContainer');
var mdlTabs = page.querySelector('.mdl-tabs');
var baseUrl = 'music.html';
var topParentId = LibraryMenu.getTopParentId();
@ -298,9 +297,10 @@
baseUrl += '?topParentId=' + topParentId;
}
LibraryBrowser.configurePaperLibraryTabs(page, tabs, pageTabsContainer, baseUrl);
componentHandler.upgradeAllRegistered(page);
libraryBrowser.configurePaperLibraryTabs(page, mdlTabs);
pageTabsContainer.addEventListener('tabchange', function (e) {
mdlTabs.addEventListener('tabchange', function (e) {
loadTab(page, parseInt(e.detail.selectedTabIndex));
});

7
dashboard-ui/scripts/site.js
View file

@ -1998,6 +1998,7 @@ var AppInfo = {};
define("material-design-lite", [bowerPath + "/material-design-lite/material.min", "css!" + bowerPath + "/material-design-lite/material"]);
define("MaterialSpinner", ["material-design-lite"]);
define("MaterialTabs", ["material-design-lite"]);
define("jQuery", [bowerPath + '/jquery/dist/jquery.slim.min'], function () {
@ -2531,7 +2532,7 @@ var AppInfo = {};
defineRoute({
path: '/home.html',
dependencies: ['paper-tabs'],
dependencies: ['MaterialTabs'],
autoFocus: false,
controller: 'scripts/indexpage'
});
@ -2706,7 +2707,7 @@ var AppInfo = {};
defineRoute({
path: '/movies.html',
dependencies: ['paper-tabs', 'paper-checkbox', 'paper-fab', 'scripts/alphapicker', 'paper-button'],
dependencies: ['MaterialTabs', 'paper-checkbox', 'paper-fab', 'scripts/alphapicker', 'paper-button'],
autoFocus: false,
controller: 'scripts/moviesrecommended'
});
@ -2920,7 +2921,7 @@ var AppInfo = {};
defineRoute({
path: '/tv.html',
dependencies: ['paper-checkbox', 'paper-button', 'paper-icon-button-light', 'paper-tabs'],
dependencies: ['paper-checkbox', 'paper-button', 'paper-icon-button-light', 'MaterialTabs'],
autoFocus: false,
controller: 'scripts/tvrecommended'
});

17
dashboard-ui/scripts/tvrecommended.js
View file

@ -181,7 +181,7 @@
function loadTab(page, index) {
var tabContent = page.querySelector('.pageTabContent[data-index=\'' + index + '\']');
var tabContent = page.querySelector('.mdl-tabs__panel[data-index=\'' + index + '\']');
var depends = [];
switch (index) {
@ -232,21 +232,21 @@
});
}
var mdlTabs = view.querySelector('.mdl-tabs');
function onPlaybackStop(e, state) {
if (state.NowPlayingItem && state.NowPlayingItem.MediaType == 'Video') {
var pageTabsContainer = view.querySelector('.pageTabsContainer');
pageTabsContainer.dispatchEvent(new CustomEvent("tabchange", {
mdlTabs.dispatchEvent(new CustomEvent("tabchange", {
detail: {
selectedTabIndex: libraryBrowser.selectedTab(pageTabsContainer)
selectedTabIndex: libraryBrowser.selectedTab(mdlTabs)
}
}));
}
}
var pageTabsContainer = view.querySelector('.pageTabsContainer');
componentHandler.upgradeAllRegistered(view);
var baseUrl = 'tv.html';
var topParentId = params.topParentId;
@ -260,10 +260,9 @@
view.querySelector('#resumableItems').classList.remove('hiddenScrollX');
}
libraryBrowser.createCardMenus(view.querySelector('#resumableItems'));
libraryBrowser.configurePaperLibraryTabs(view, mdlTabs);
libraryBrowser.configurePaperLibraryTabs(view, view.querySelector('paper-tabs'), pageTabsContainer, baseUrl);
pageTabsContainer.addEventListener('tabchange', function (e) {
mdlTabs.addEventListener('tabchange', function (e) {
loadTab(view, parseInt(e.detail.selectedTabIndex));
});

48
dashboard-ui/tv.html
View file

@ -1,29 +1,18 @@
<div id="tvRecommendedPage" data-dom-cache="true" data-role="page" class="page libraryPage backdropPage pageWithAbsoluteTabs" data-backdroptype="series">
<div class="libraryViewNav libraryViewNavWithMinHeight">
<paper-tabs hidescrollbuttons noink>
<paper-tab>${TabSuggestions}</paper-tab>
<paper-tab>${TabLatest}</paper-tab>
<paper-tab>${TabUpcoming}</paper-tab>
<paper-tab>${TabShows}</paper-tab>
<paper-tab class="tvEpisodesTab">${TabEpisodes}</paper-tab>
<paper-tab>${TabGenres}</paper-tab>
<paper-tab class="tvStudiosTab">${TabNetworks}</paper-tab>
</paper-tabs>
<div class="legacyTabs scopedLibraryViewNav">
<a href="tv.html">${TabSuggestions}</a>
<a href="tv.html?tab=1">${TabLatest}</a>
<a href="tv.html?tab=2">${TabUpcoming}</a>
<a href="tv.html?tab=3">${TabShows}</a>
<a href="tv.html?tab=4" class="tvEpisodesTab">${TabEpisodes}</a>
<a href="tv.html?tab=5">${TabGenres}</a>
<a href="tv.html?tab=6" class="tvStudiosTab">${TabNetworks}</a>
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="libraryViewNav">
<div class="mdl-tabs__tab-bar">
<a href="#suggestionsTab" class="mdl-tabs__tab is-active" data-index="0">${TabSuggestions}</a>
<a href="#latestTab" class="mdl-tabs__tab" data-index="1">${TabLatest}</a>
<a href="#upcomingTab" class="mdl-tabs__tab" data-index="2">${TabUpcoming}</a>
<a href="#seriesTab" class="mdl-tabs__tab" data-index="3">${TabShows}</a>
<a href="#episodesTab" class="mdl-tabs__tab" data-index="4">${TabEpisodes}</a>
<a href="#genresTab" class="mdl-tabs__tab" data-index="5">${TabGenres}</a>
<a href="#studiosTab" class="mdl-tabs__tab" data-index="6">${TabNetworks}</a>
</div>
</div>
</div>
<div class="ehsContent fullWidth pageTabsContainer">
<div class="pageTabContent hide" data-index="0">
<div class="mdl-tabs__panel is-active pageTabContent ehsContent" id="suggestionsTab" data-index="0">
<div id="resumableSection" class="homePageSection">
<div>
<h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderResume}</h1>
@ -44,7 +33,7 @@
</div>
<p class="noNextUpItems" style="display: none;">${NoNextUpItemsMessage}</p>
</div>
<div class="pageTabContent hide" data-index="1">
<div class="mdl-tabs__panel pageTabContent ehsContent" id="latestTab" data-index="1">
<div class="homePageSection">
<div>
<h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderLatestEpisodes}</h1>
@ -54,7 +43,7 @@
</div>
</div>
</div>
<div class="pageTabContent hide" data-index="2">
<div class="mdl-tabs__panel pageTabContent ehsContent" id="upcomingTab" data-index="2">
<div id="upcomingItems">
</div>
<div class="noItemsMessage" style="display: none;">
@ -64,8 +53,7 @@
</p>
</div>
</div>
<div id="seriesTab" class="pageTabContent hide" data-index="3">
<div class="mdl-tabs__panel pageTabContent ehsContent" id="seriesTab" data-index="3">
<div style="text-align: center;padding:.7em 0;">
<div style="text-align: center; display: flex; align-items: center; justify-content: center;">
<div class="paging"></div>
@ -84,7 +72,7 @@
<div class="paging"></div>
</div>
</div>
<div id="episodesTab" class="pageTabContent hide" data-index="4">
<div class="mdl-tabs__panel pageTabContent ehsContent" id="episodesTab" data-index="4">
<div style="text-align: center; display: flex; align-items: center; justify-content: center;">
<div class="paging"></div>
<button is="paper-icon-button-light" class="btnSelectView" title="${ButtonSelectView}"><iron-icon icon="view-comfy"></iron-icon></button>
@ -97,13 +85,13 @@
<div class="paging"></div>
</div>
</div>
<div class="pageTabContent hide" data-index="5">
<div class="mdl-tabs__panel pageTabContent ehsContent" id="genresTab" data-index="5">
<div style="text-align: center; display: flex; align-items: center; justify-content: center;">
<button is="paper-icon-button-light" class="btnSelectView" title="${ButtonSelectView}"><iron-icon icon="view-comfy"></iron-icon></button>
</div>
<div id="items" class="itemsContainer paddedItemsContainer"></div>
</div>
<div class="pageTabContent hide" data-index="6">
<div class="mdl-tabs__panel pageTabContent ehsContent" id="studiosTab" data-index="6">
<div class="viewSettings">
<div class="listTopPaging">
</div>