diff --git a/dashboard-ui/bower_components/material-design-lite/material.css b/dashboard-ui/bower_components/material-design-lite/material.css index 8dd484b8f6..a1870886e5 100644 --- a/dashboard-ui/bower_components/material-design-lite/material.css +++ b/dashboard-ui/bower_components/material-design-lite/material.css @@ -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; } diff --git a/dashboard-ui/channels.html b/dashboard-ui/channels.html index b3884ce7e1..38c23341e0 100644 --- a/dashboard-ui/channels.html +++ b/dashboard-ui/channels.html @@ -1,20 +1,16 @@ -
+
-
- - ${TabLatest} - ${TabChannels} - -
- ${TabLatest} - ${TabChannels} +
+
+
+ ${TabLatest} + ${TabChannels} +
-
-
-
+
-
+
diff --git a/dashboard-ui/components/remotecontrol.js b/dashboard-ui/components/remotecontrol.js index 5c97493960..dde6368cc1 100644 --- a/dashboard-ui/components/remotecontrol.js +++ b/dashboard-ui/components/remotecontrol.js @@ -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); }; diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css index 8365802b28..92bbc06448 100644 --- a/dashboard-ui/css/librarybrowser.css +++ b/dashboard-ui/css/librarybrowser.css @@ -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 { diff --git a/dashboard-ui/css/librarymenu.css b/dashboard-ui/css/librarymenu.css index 769d7293bd..2063d159f7 100644 --- a/dashboard-ui/css/librarymenu.css +++ b/dashboard-ui/css/librarymenu.css @@ -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 { diff --git a/dashboard-ui/css/nowplaying.css b/dashboard-ui/css/nowplaying.css index efb7070fb7..edeaf5eab2 100644 --- a/dashboard-ui/css/nowplaying.css +++ b/dashboard-ui/css/nowplaying.css @@ -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; } diff --git a/dashboard-ui/devices/android/android.css b/dashboard-ui/devices/android/android.css index f97bc7a3f5..84ad997727 100644 --- a/dashboard-ui/devices/android/android.css +++ b/dashboard-ui/devices/android/android.css @@ -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; + } +} diff --git a/dashboard-ui/devices/windowsphone/wp.css b/dashboard-ui/devices/windowsphone/wp.css index a2423578a4..3b6400ec7c 100644 --- a/dashboard-ui/devices/windowsphone/wp.css +++ b/dashboard-ui/devices/windowsphone/wp.css @@ -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; diff --git a/dashboard-ui/home.html b/dashboard-ui/home.html index a6193ca841..38317f2494 100644 --- a/dashboard-ui/home.html +++ b/dashboard-ui/home.html @@ -1,22 +1,15 @@ 
-
- - ${TabHome} - ${TabNextUp} - ${TabFavorites} - ${TabUpcoming} - -
- ${TabHome} - ${TabNextUp} - ${TabFavorites} - ${TabUpcoming} +
+
+
+ ${TabHome} + ${TabNextUp} + ${TabFavorites} + ${TabUpcoming} +
-
- -
-
+
-
+

${HeaderNextUp}

@@ -37,10 +30,10 @@
-
+
-
+
+
diff --git a/dashboard-ui/livetv.html b/dashboard-ui/livetv.html index ea08794bdc..a886613acd 100644 --- a/dashboard-ui/livetv.html +++ b/dashboard-ui/livetv.html @@ -1,24 +1,16 @@ -
+
-
- - ${TabSuggestions} - ${TabGuide} - ${TabChannels} - ${TabRecordings} - ${TabSeries} - -
- ${TabSuggestions} - ${TabGuide} - ${TabChannels} - ${TabRecordings} - ${TabSeries} +
+
+
+ ${TabSuggestions} + ${TabGuide} + ${TabChannels} + ${TabRecordings} + ${TabSeries} +
-
- -
-
+

${HeaderWhatsOnTV}

@@ -54,16 +46,16 @@
-
+
-
+
-
+

${HeaderActiveRecordings}

@@ -88,7 +80,7 @@
-
+
diff --git a/dashboard-ui/movies.html b/dashboard-ui/movies.html index cf4f7b75ca..78812fb2f9 100644 --- a/dashboard-ui/movies.html +++ b/dashboard-ui/movies.html @@ -1,26 +1,17 @@ 
-
- - ${TabSuggestions} - ${TabMovies} - ${TabTrailers} - ${TabCollections} - ${TabGenres} - ${TabStudios} - -
- ${TabSuggestions} - ${TabMovies} - ${TabTrailers} - ${TabCollections} - ${TabGenres} - ${TabStudios} +
+
+
+ ${TabSuggestions} + ${TabMovies} + ${TabTrailers} + ${TabCollections} + ${TabGenres} + ${TabStudios} +
-
- -
-
+
-
+
@@ -57,7 +48,7 @@
-
+
@@ -67,7 +58,7 @@
-
+
@@ -81,14 +72,14 @@
-
+
-
+
diff --git a/dashboard-ui/music.html b/dashboard-ui/music.html index 268f920780..a37156ba47 100644 --- a/dashboard-ui/music.html +++ b/dashboard-ui/music.html @@ -1,28 +1,18 @@ -
-
- - ${TabSuggestions} - ${TabAlbums} - ${TabAlbumArtists} - ${TabArtists} - ${TabSongs} - ${TabGenres} - ${TabFolders} - -
- ${TabSuggestions} - ${TabAlbums} - ${TabAlbumArtists} - ${TabArtists} - ${TabSongs} - ${TabGenres} - ${TabFolders} +
+ +
+
+
+ ${TabSuggestions} + ${TabAlbums} + ${TabAlbumArtists} + ${TabArtists} + ${TabSongs} + ${TabGenres} + ${TabFolders} +
-
- -
- -
+

${HeaderLatestMusic}

@@ -53,7 +43,7 @@
-
+
@@ -62,7 +52,7 @@
-
+
@@ -71,7 +61,7 @@
-
+
@@ -80,21 +70,21 @@
-
+
-
+
-
+
diff --git a/dashboard-ui/nowplaying.html b/dashboard-ui/nowplaying.html index 6a32f3f166..591d1adece 100644 --- a/dashboard-ui/nowplaying.html +++ b/dashboard-ui/nowplaying.html @@ -1,4 +1,4 @@ -
+
@@ -9,127 +9,124 @@
-
- -
-
-
-
+
+
+
+ ${TabNowPlaying} + ${TabControls} + ${TabPlaylist}
-
-
-
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
- + + + + + +
-
-
-
+
+ + + + + +
+
+ + + + +
+
-
- +
+
+
- - - - - - -
-
- - - - - +
- - - - + + +
-
+
+
+
+ + +
+
+
+ + +
+
+ + +
+
+
+
+

${HeaderSendMessage}

+
+
+
+ +
+
+
+ +
+

+ +

+
+
+
+
+

${HeaderTypeText}

+
+
+
+ +
+

+ +

+
+
+
+
+
+
+
-
-
-
- -
-
- - - -
-
- -
-
- - -
-
-
- - -
-
- - -
-
-
-
-

${HeaderSendMessage}

-
-
-
- -
-
-
- -
-

- -

-
-
-
-
-

${HeaderTypeText}

-
-
-
- -
-

- -

-
-
-
-
-
-
-
-
-
- - ${TabNowPlaying} - ${TabControls} - ${TabPlaylist} -
diff --git a/dashboard-ui/photos.html b/dashboard-ui/photos.html index f93be3238b..5fb52d9529 100644 --- a/dashboard-ui/photos.html +++ b/dashboard-ui/photos.html @@ -1,4 +1,4 @@ -
+
diff --git a/dashboard-ui/scripts/channels.js b/dashboard-ui/scripts/channels.js index a937da54a3..d895a6f856 100644 --- a/dashboard-ui/scripts/channels.js +++ b/dashboard-ui/scripts/channels.js @@ -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)); }); diff --git a/dashboard-ui/scripts/channelslatest.js b/dashboard-ui/scripts/channelslatest.js index 11428bdd5d..403c7dbb58 100644 --- a/dashboard-ui/scripts/channelslatest.js +++ b/dashboard-ui/scripts/channelslatest.js @@ -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)); }); diff --git a/dashboard-ui/scripts/indexpage.js b/dashboard-ui/scripts/indexpage.js index 61db7fe1da..806618feb5 100644 --- a/dashboard-ui/scripts/indexpage.js +++ b/dashboard-ui/scripts/indexpage.js @@ -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); }); diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js index a9920405d4..a743274897 100644 --- a/dashboard-ui/scripts/librarybrowser.js +++ b/dashboard-ui/scripts/librarybrowser.js @@ -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;">'; } @@ -3712,12 +3640,6 @@ } }; - if (libraryBrowser.enableFullPaperTabs()) { - document.documentElement.classList.add('fullPaperLibraryTabs'); - } else { - document.documentElement.classList.add('basicPaperLibraryTabs'); - } - return libraryBrowser; })(window, document, screen); diff --git a/dashboard-ui/scripts/librarymenu.js b/dashboard-ui/scripts/librarymenu.js index 9e4b6da90c..a50e9bb707 100644 --- a/dashboard-ui/scripts/librarymenu.js +++ b/dashboard-ui/scripts/librarymenu.js @@ -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) { diff --git a/dashboard-ui/scripts/livetvsuggested.js b/dashboard-ui/scripts/livetvsuggested.js index 177253c877..8d87e29a09 100644 --- a/dashboard-ui/scripts/livetvsuggested.js +++ b/dashboard-ui/scripts/livetvsuggested.js @@ -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 () { diff --git a/dashboard-ui/scripts/moviesrecommended.js b/dashboard-ui/scripts/moviesrecommended.js index 3de56869e9..762e5f025a 100644 --- a/dashboard-ui/scripts/moviesrecommended.js +++ b/dashboard-ui/scripts/moviesrecommended.js @@ -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)); }); diff --git a/dashboard-ui/scripts/musicrecommended.js b/dashboard-ui/scripts/musicrecommended.js index d8d208f0c0..9bf6bfc721 100644 --- a/dashboard-ui/scripts/musicrecommended.js +++ b/dashboard-ui/scripts/musicrecommended.js @@ -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)); }); diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js index 2f7276afdd..f1b0188461 100644 --- a/dashboard-ui/scripts/site.js +++ b/dashboard-ui/scripts/site.js @@ -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' }); diff --git a/dashboard-ui/scripts/tvrecommended.js b/dashboard-ui/scripts/tvrecommended.js index 642c584e6f..32f8c68a99 100644 --- a/dashboard-ui/scripts/tvrecommended.js +++ b/dashboard-ui/scripts/tvrecommended.js @@ -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)); }); diff --git a/dashboard-ui/tv.html b/dashboard-ui/tv.html index 1766628bb8..bf135ce1bd 100644 --- a/dashboard-ui/tv.html +++ b/dashboard-ui/tv.html @@ -1,29 +1,18 @@ 
-
- - ${TabSuggestions} - ${TabLatest} - ${TabUpcoming} - ${TabShows} - ${TabEpisodes} - ${TabGenres} - ${TabNetworks} - -
- ${TabSuggestions} - ${TabLatest} - ${TabUpcoming} - ${TabShows} - ${TabEpisodes} - ${TabGenres} - ${TabNetworks} +
+
+
+ ${TabSuggestions} + ${TabLatest} + ${TabUpcoming} + ${TabShows} + ${TabEpisodes} + ${TabGenres} + ${TabNetworks} +
-
- -
- -
+

${HeaderResume}

@@ -44,7 +33,7 @@
-
+

${HeaderLatestEpisodes}

@@ -54,7 +43,7 @@
-
+
-
- +
@@ -84,7 +72,7 @@
-
+
@@ -97,13 +85,13 @@
-
+
-
+