Merge pull request #1962 from MediaBrowser/dev

Dev

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 {

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

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;
+    left: 200px;
-    right: 0;
+    right: 200px;
     top: 0;
 }
 

dashboard-ui/scripts/homeupcoming.js

@@ -115,7 +115,8 @@
                 showDetailsMenu: true,
                 centerText: true,
                 context: 'home-upcoming',
-                overlayMoreButton: true
+                overlayMoreButton: true,
+                showParentTitle: true
 
             });
             html += '</div>';

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 += '</div>';
 
                 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 = '<button data-id="' + item.Id + '" data-type="' + item.Type + '" data-mediatype="' + item.MediaType + '" data-isfolder="' + item.IsFolder + '" type="button" class="itemAction textActionButton" data-action="link">';
+                html += text;
+                html += '</button>';
+
+                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);

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 + '<br/>' + 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('<br/>');
         };
 
         self.showPlaybackInfoErrorMessage = function (errorCode) {

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 || {};
 

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;

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) {
+            require(['itemShortcuts', 'css!css/nowplayingbar.css', 'emby-slider'], function (itemShortcuts) {
-                resolve(nowPlayingBarElement);
-                return;
-            }
-
-            require(['css!css/nowplayingbar.css', 'emby-slider'], function () {
 
                 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('<br/>') != -1) {
+            if (nowPlayingName.item) {
-            nowPlayingTextElement.classList.add('nowPlayingDoubleText');
+                return '<div>' + LibraryBrowser.getTextActionButton(nowPlayingName.item, nowPlayingName.text) + '</div>';
-        } else {
+            }
-            nowPlayingTextElement.classList.remove('nowPlayingDoubleText');
-        }
 
-        if (state.NowPlayingItem.Id) {
+            return '<div>' + nowPlayingName.text + '</div>';
-            nameHtml = '<a style="color:inherit;text-decoration:none;" href="' + LibraryBrowser.getHref(state.NowPlayingItem) + '">' + nameHtml + '</a>';
-        }
 
-        nowPlayingTextElement.innerHTML = nameHtml;
+        }).join('');
 
         var url;
         var imgHeight = 80;

dashboard-ui/scripts/tvupcoming.js

@@ -116,7 +116,8 @@
                 lazy: true,
                 showDetailsMenu: true,
                 centerText: true,
-                overlayMoreButton: true
+                overlayMoreButton: true,
+                showParentTitle: true
 
             });
             html += '</div>';