diff --git a/dashboard-ui/css/card.css b/dashboard-ui/css/card.css index 9c0ba2cf3..79838727a 100644 --- a/dashboard-ui/css/card.css +++ b/dashboard-ui/css/card.css @@ -182,7 +182,7 @@ } .visualCardBox .outerCardFooter { - padding: 3px; + padding: .5em .3em; position: relative; } @@ -230,7 +230,7 @@ } .outerCardFooter .cardText + .cardText { - opacity: .8; + opacity: .6; } .outerCardFooter .cardText:first-child { diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css index abf8f1e18..0dbf5fa17 100644 --- a/dashboard-ui/css/librarybrowser.css +++ b/dashboard-ui/css/librarybrowser.css @@ -57,6 +57,24 @@ contain: style; } +.textActionButton { + border: 0 !important; + background: transparent; + border: 0 !important; + padding: 0 !important; + cursor: pointer; + outline: none !important; + color: inherit; + vertical-align: middle; + font-family: inherit; + font-size: inherit; +} + + .textActionButton:hover { + text-decoration: underline; + opacity: 1; + } + .pageWithAbsoluteTabs .pageTabContent, .libraryPage > .ui-content { padding-top: 10px; } diff --git a/dashboard-ui/css/nowplayingbar.css b/dashboard-ui/css/nowplayingbar.css index 8e5ba136f..7ff072b6c 100644 --- a/dashboard-ui/css/nowplayingbar.css +++ b/dashboard-ui/css/nowplayingbar.css @@ -90,10 +90,6 @@ font-size: 28px; } -.nowPlayingDoubleText { - top: -3px; -} - .nowPlayingImage { display: inline-block; vertical-align: middle; @@ -168,8 +164,8 @@ /* Need this to make sure it's on top of nowPlayingBarPositionContainer so that buttons are fully clickable */ z-index: 2; position: absolute; - left: 0; - right: 0; + left: 200px; + right: 200px; top: 0; } diff --git a/dashboard-ui/scripts/homeupcoming.js b/dashboard-ui/scripts/homeupcoming.js index e116fa727..f9b19cc14 100644 --- a/dashboard-ui/scripts/homeupcoming.js +++ b/dashboard-ui/scripts/homeupcoming.js @@ -115,7 +115,8 @@ showDetailsMenu: true, centerText: true, context: 'home-upcoming', - overlayMoreButton: true + overlayMoreButton: true, + showParentTitle: true }); html += ''; diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js index 3459c0372..b1c945abb 100644 --- a/dashboard-ui/scripts/librarybrowser.js +++ b/dashboard-ui/scripts/librarybrowser.js @@ -1447,7 +1447,7 @@ var footerCssClass = progressHtml ? 'cardFooter fullCardFooter' : 'cardFooter'; - html += LibraryBrowser.getCardFooterText(item, options, showTitle, imgUrl, forceName, footerCssClass, progressHtml); + html += LibraryBrowser.getCardFooterText(item, options, showTitle, imgUrl, forceName, footerCssClass, progressHtml, false); footerOverlayed = true; } else if (progressHtml) { @@ -1475,7 +1475,7 @@ html += ''; if (!options.overlayText && !footerOverlayed) { - html += LibraryBrowser.getCardFooterText(item, options, showTitle, imgUrl, forceName, 'cardFooter outerCardFooter', progressHtml); + html += LibraryBrowser.getCardFooterText(item, options, showTitle, imgUrl, forceName, 'cardFooter outerCardFooter', progressHtml, true); } // cardBox @@ -1487,7 +1487,20 @@ return html; }, - getCardFooterText: function (item, options, showTitle, imgUrl, forceName, footerClass, progressHtml) { + getTextActionButton: function (item, text) { + + if (!text) { + text = itemHelper.getDisplayName(item); + } + + var html = ''; + + return html; + }, + + getCardFooterText: function (item, options, showTitle, imgUrl, forceName, footerClass, progressHtml, isOuterFooter) { var html = ''; @@ -1509,9 +1522,22 @@ var lines = []; - if (options.showParentTitle) { + var parentTitleUnderneath = item.Type == 'MusicAlbum' || item.Type == 'Audio' || item.Type == 'MusicVideo'; + if (options.showParentTitle && !parentTitleUnderneath) { - lines.push(item.EpisodeTitle ? item.Name : (item.SeriesName || item.Album || item.AlbumArtist || item.GameSystem || "")); + if (isOuterFooter && item.Type == 'Episode' && item.SeriesName && item.SeriesId) { + + lines.push(LibraryBrowser.getTextActionButton({ + Id: item.SeriesId, + Name: item.SeriesName, + Type: 'Series', + IsFolder: true + })); + } + else { + + lines.push(item.EpisodeTitle ? item.Name : (item.SeriesName || item.Album || item.AlbumArtist || item.GameSystem || "")); + } } if (showTitle || forceName) { @@ -1519,6 +1545,17 @@ lines.push(htmlEncode(name)); } + if (options.showParentTitle && parentTitleUnderneath) { + + if (isOuterFooter && item.AlbumArtists && item.AlbumArtists.length) { + item.AlbumArtists[0].Type = 'MusicArtist'; + item.AlbumArtists[0].IsFolder = true; + lines.push(LibraryBrowser.getTextActionButton(item.AlbumArtists[0])); + } else { + lines.push(item.EpisodeTitle ? item.Name : (item.SeriesName || item.Album || item.AlbumArtist || item.GameSystem || "")); + } + } + if (options.showItemCounts) { var itemCountHtml = LibraryBrowser.getItemCountsHtml(options, item); diff --git a/dashboard-ui/scripts/mediacontroller.js b/dashboard-ui/scripts/mediacontroller.js index a02cbc491..4ba9daccc 100644 --- a/dashboard-ui/scripts/mediacontroller.js +++ b/dashboard-ui/scripts/mediacontroller.js @@ -813,10 +813,21 @@ }; // TOOD: This doesn't really belong here - self.getNowPlayingNameHtml = function (nowPlayingItem, includeNonNameInfo) { + self.getNowPlayingNames = function (nowPlayingItem, includeNonNameInfo) { + var topItem = nowPlayingItem; + var bottomItem = null; var topText = nowPlayingItem.Name; + if (nowPlayingItem.AlbumId && nowPlayingItem.MediaType == 'Audio') { + topItem = { + Id: nowPlayingItem.AlbumId, + Name: nowPlayingItem.Album, + Type: 'MusicAlbum', + IsFolder: true + }; + } + if (nowPlayingItem.MediaType == 'Video') { if (nowPlayingItem.IndexNumber != null) { topText = nowPlayingItem.IndexNumber + " - " + topText; @@ -829,18 +840,69 @@ var bottomText = ''; if (nowPlayingItem.Artists && nowPlayingItem.Artists.length) { - bottomText = topText; - topText = nowPlayingItem.Artists[0]; + + if (nowPlayingItem.ArtistItems && nowPlayingItem.ArtistItems.length) { + + bottomItem = { + Id: nowPlayingItem.ArtistItems[0].Id, + Name: nowPlayingItem.ArtistItems[0].Name, + Type: 'MusicArtist', + IsFolder: true + }; + + bottomText = bottomItem.Name; + } else { + bottomText = nowPlayingItem.Artists[0]; + } } else if (nowPlayingItem.SeriesName || nowPlayingItem.Album) { bottomText = topText; topText = nowPlayingItem.SeriesName || nowPlayingItem.Album; + + bottomItem = topItem; + + if (nowPlayingItem.SeriesId) { + topItem = { + Id: nowPlayingItem.SeriesId, + Name: nowPlayingItem.SeriesName, + Type: 'Series', + IsFolder: true + }; + } else { + topItem = null; + } } else if (nowPlayingItem.ProductionYear && includeNonNameInfo !== false) { bottomText = nowPlayingItem.ProductionYear; } - return bottomText ? topText + '
' + bottomText : topText; + var list = []; + + list.push({ + text: topText, + item: topItem + }); + + if (bottomText) { + list.push({ + text: bottomText, + item: bottomItem + }); + } + + return list; + }; + + // TOOD: This doesn't really belong here + self.getNowPlayingNameHtml = function (nowPlayingItem, includeNonNameInfo) { + + var names = self.getNowPlayingNames(nowPlayingItem, includeNonNameInfo); + + return names.map(function (i) { + + return i.text; + + }).join('
'); }; self.showPlaybackInfoErrorMessage = function (errorCode) { diff --git a/dashboard-ui/scripts/mediaplayer.js b/dashboard-ui/scripts/mediaplayer.js index 8740dcc32..01c77a7aa 100644 --- a/dashboard-ui/scripts/mediaplayer.js +++ b/dashboard-ui/scripts/mediaplayer.js @@ -1260,7 +1260,9 @@ define(['appSettings', 'userSettings', 'appStorage', 'datetime'], function (appS nowPlayingItem.PremiereDate = item.PremiereDate; nowPlayingItem.SeriesName = item.SeriesName; nowPlayingItem.Album = item.Album; + nowPlayingItem.AlbumId = item.AlbumId; nowPlayingItem.Artists = item.Artists; + nowPlayingItem.ArtistItems = item.ArtistItems; var imageTags = item.ImageTags || {}; diff --git a/dashboard-ui/scripts/movies.js b/dashboard-ui/scripts/movies.js index d36ba471b..da5e6c7d0 100644 --- a/dashboard-ui/scripts/movies.js +++ b/dashboard-ui/scripts/movies.js @@ -205,6 +205,7 @@ var alphaPickerElement = tabContent.querySelector('.alphaPicker'); alphaPickerElement.addEventListener('alphavaluechanged', function (e) { var newValue = e.detail.value; + alert(newValue); var query = getQuery(tabContent); query.NameStartsWithOrGreater = newValue; query.StartIndex = 0; diff --git a/dashboard-ui/scripts/nowplayingbar.js b/dashboard-ui/scripts/nowplayingbar.js index 5fc788eac..91e1e738f 100644 --- a/dashboard-ui/scripts/nowplayingbar.js +++ b/dashboard-ui/scripts/nowplayingbar.js @@ -288,14 +288,13 @@ var nowPlayingBarElement; function getNowPlayingBar() { + if (nowPlayingBarElement) { + return Promise.resolve(nowPlayingBarElement); + } + return new Promise(function (resolve, reject) { - if (nowPlayingBarElement) { - resolve(nowPlayingBarElement); - return; - } - - require(['css!css/nowplayingbar.css', 'emby-slider'], function () { + require(['itemShortcuts', 'css!css/nowplayingbar.css', 'emby-slider'], function (itemShortcuts) { nowPlayingBarElement = document.querySelector('.nowPlayingBar'); @@ -312,6 +311,8 @@ nowPlayingBarElement.classList.add('noMediaProgress'); } + itemShortcuts.on(nowPlayingBarElement); + bindEvents(nowPlayingBarElement); resolve(nowPlayingBarElement); }); @@ -507,19 +508,15 @@ var currentImgUrl; function updateNowPlayingInfo(state) { - var nameHtml = MediaController.getNowPlayingNameHtml(state.NowPlayingItem) || ''; + nowPlayingTextElement.innerHTML = MediaController.getNowPlayingNames(state.NowPlayingItem).map(function (nowPlayingName) { - if (nameHtml.indexOf('
') != -1) { - nowPlayingTextElement.classList.add('nowPlayingDoubleText'); - } else { - nowPlayingTextElement.classList.remove('nowPlayingDoubleText'); - } + if (nowPlayingName.item) { + return '
' + LibraryBrowser.getTextActionButton(nowPlayingName.item, nowPlayingName.text) + '
'; + } - if (state.NowPlayingItem.Id) { - nameHtml = '' + nameHtml + ''; - } + return '
' + nowPlayingName.text + '
'; - nowPlayingTextElement.innerHTML = nameHtml; + }).join(''); var url; var imgHeight = 80; diff --git a/dashboard-ui/scripts/tvupcoming.js b/dashboard-ui/scripts/tvupcoming.js index 2270258c5..eef18362e 100644 --- a/dashboard-ui/scripts/tvupcoming.js +++ b/dashboard-ui/scripts/tvupcoming.js @@ -116,7 +116,8 @@ lazy: true, showDetailsMenu: true, centerText: true, - overlayMoreButton: true + overlayMoreButton: true, + showParentTitle: true }); html += '';