use shared chaptercardbuilder.js

dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css

@@ -150,6 +150,22 @@ button.cardContent {
     transition: filter, -webkit-filter 600ms ease-out !important;
 }
 
+.mediaSourceIndicator {
+    display: flex;
+    position: absolute;
+    align-items: center;
+    justify-content: center;
+    top: .3em;
+    left: .3em;
+    text-align: center;
+    vertical-align: middle;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    color: #fff;
+    background: rgb(51, 136, 204);
+}
+
 .cardImageContainer {
     background-size: contain;
     background-repeat: no-repeat;
@@ -163,6 +179,20 @@ button.cardContent {
     background-clip: content-box !important;
 }
 
+button.cardImageContainer {
+    border: 0;
+    padding: 0;
+    background-color: transparent;
+    box-sizing: content-box;
+    outline: none !important;
+    cursor: pointer;
+}
+
+/* Used by non-scalable cards */
+.forceRelative {
+    position: relative;
+}
+
 .cardContent {
     overflow: hidden;
     position: absolute;

dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js

@@ -1007,10 +1007,34 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
                 cardImageContainerClass += " " + cardBoxClass;
             }
 
+            var overlayButtons = '';
+            if (!layoutManager.tv) {
+
+                var overlayPlayButton = options.overlayPlayButton;
+
+                if (overlayPlayButton == null && !options.overlayMoreButton) {
+                    overlayPlayButton = item.MediaType == 'Video';
+                }
+
+                if (overlayPlayButton && !item.IsPlaceHolder && (item.LocationType != 'Virtual' || !item.MediaType || item.Type == 'Program') && item.Type != 'Person' && item.PlayAccess == 'Full') {
+                    overlayButtons += '<button is="paper-icon-button-light" class="cardOverlayButton itemAction autoSize" data-action="playmenu" onclick="return false;"><i class="md-icon">play_arrow</i></button>';
+                }
+                if (options.overlayMoreButton) {
+
+                    var moreIcon = appHost.moreIcon == 'dots-horiz' ? '&#xE5D3;' : '&#xE5D4;';
+
+                    overlayButtons += '<button is="paper-icon-button-light" class="cardOverlayButton itemAction autoSize" data-action="menu" onclick="return false;"><i class="md-icon">' + moreIcon + '</i></button>';
+                }
+            }
+
+            if (options.showChildCountIndicator && item.ChildCount) {
+                className += ' groupedCard';
+            }
+
             // cardBox can be it's own separate element if an outer footer is ever needed
-            var cardImageContainerOpen = imgUrl ? ('<div class="' + cardImageContainerClass + ' lazy" data-src="' + imgUrl + '">') : ('<div class="' + cardImageContainerClass + '">');
+            var cardImageContainerOpen;
             var cardImageContainerClose = '';
-            var cardBoxClose = '</div>';
+            var cardBoxClose = '';
             var cardContentClose = '';
             var cardScalableClose = '';
 
@@ -1024,10 +1048,22 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
                     cardContentOpen = '<button type="button" class="clearButton cardContent itemAction" data-action="' + action + '">';
                     cardContentClose = '</button>';
                 }
+                cardImageContainerOpen = imgUrl ? ('<div class="' + cardImageContainerClass + ' lazy" data-src="' + imgUrl + '">') : ('<div class="' + cardImageContainerClass + '">');
                 cardImageContainerOpen = '<div class="' + cardBoxClass + '"><div class="cardScalable"><div class="cardPadder"></div>' + cardContentOpen + cardImageContainerOpen;
                 cardBoxClose = '</div>';
                 cardScalableClose = '</div>';
                 cardImageContainerClose = '</div>';
+            } else {
+
+                if (overlayButtons && !separateCardBox) {
+                    cardImageContainerOpen = imgUrl ? ('<button type="button" data-action="' + action + '" class="itemAction ' + cardImageContainerClass + ' lazy" data-src="' + imgUrl + '">') : ('<button type="button" data-action="' + action + '" class="itemAction ' + cardImageContainerClass + '">');
+                    cardImageContainerClose = '</button>';
+
+                    className += ' forceRelative';
+                } else {
+                    cardImageContainerOpen = imgUrl ? ('<div class="' + cardImageContainerClass + ' lazy" data-src="' + imgUrl + '">') : ('<div class="' + cardImageContainerClass + '">');
+                    cardImageContainerClose = '</div>';
+                }
             }
 
             var indicatorsHtml = '';
@@ -1082,26 +1118,18 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
                 progressHtml = '';
             }
 
+            var mediaSourceCount = item.MediaSourceCount || 1;
+            if (mediaSourceCount > 1) {
+                innerCardFooter += '<div class="mediaSourceIndicator">' + mediaSourceCount + '</div>';
+            }
+
             var outerCardFooter = '';
             if (!options.overlayText && !footerOverlayed) {
                 footerCssClass = options.cardLayout ? 'cardFooter' : 'cardFooter transparent';
                 outerCardFooter = getCardFooterText(item, options, showTitle, imgUrl, footerCssClass, progressHtml, true);
             }
 
-            var overlayButtons = '';
+            var tagName = (layoutManager.tv || !scalable) && !overlayButtons ? 'button' : 'div';
-            if (!layoutManager.tv && scalable) {
-                if (options.overlayPlayButton && !item.IsPlaceHolder && (item.LocationType != 'Virtual' || !item.MediaType || item.Type == 'Program') && item.Type != 'Person' && item.PlayAccess == 'Full') {
-                    overlayButtons += '<button is="paper-icon-button-light" class="cardOverlayButton itemAction autoSize" data-action="playmenu" onclick="return false;"><i class="md-icon">play_arrow</i></button>';
-                }
-                if (options.overlayMoreButton) {
-
-                    var moreIcon = appHost.moreIcon == 'dots-horiz' ? '&#xE5D3;' : '&#xE5D4;';
-
-                    overlayButtons += '<button is="paper-icon-button-light" class="cardOverlayButton itemAction autoSize" data-action="menu" onclick="return false;"><i class="md-icon">' + moreIcon + '</i></button>';
-                }
-            }
-
-            var tagName = layoutManager.tv || !scalable ? 'button' : 'div';
 
             var prefix = (item.SortName || item.Name || '')[0];
 
@@ -1139,7 +1167,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
 
             return '\
 <' + tagName + ' data-index="' + index + '"' + timerAttributes + actionAttribute + ' data-isfolder="' + (item.IsFolder || false) + '" data-serverid="' + (item.ServerId) + '" data-id="' + (item.Id || item.ItemId) + '" data-type="' + item.Type + '"' + mediaTypeData + collectionTypeData + channelIdData + positionTicksData + collectionIdData + playlistIdData + ' data-prefix="' + prefix + '" class="' + className + '"> \
-' + cardImageContainerOpen + cardImageContainerClose + innerCardFooter + cardContentClose + overlayButtons + cardScalableClose + outerCardFooter + cardBoxClose + '\
+' + cardImageContainerOpen + innerCardFooter + cardImageContainerClose + cardContentClose + overlayButtons + cardScalableClose + outerCardFooter + cardBoxClose + '\
 </' + tagName + '>';
         }
 

dashboard-ui/bower_components/emby-webcomponents/cardbuilder/chaptercardbuilder.js

@@ -1,4 +1,4 @@
-define(['datetime', 'imageLoader', 'itemShortcuts'], function (datetime, imageLoader, itemShortcuts) {
+define(['datetime', 'imageLoader', 'itemShortcuts', 'connectionManager'], function (datetime, imageLoader, itemShortcuts, connectionManager) {
 
     function buildChapterCardsHtml(item, chapters, options) {
 
@@ -27,6 +27,8 @@ define(['datetime', 'imageLoader', 'itemShortcuts'], function (datetime, imageLo
         var html = '';
         var itemsInRow = 0;
 
+        var apiClient = connectionManager.getApiClient(item.ServerId);
+
         for (var i = 0, length = chapters.length; i < length; i++) {
 
             if (options.rows && itemsInRow == 0) {
@@ -35,7 +37,7 @@ define(['datetime', 'imageLoader', 'itemShortcuts'], function (datetime, imageLo
 
             var chapter = chapters[i];
 
-            html += buildChapterCard(item, chapter, options, className);
+            html += buildChapterCard(item, apiClient, chapter, i, options, className);
             itemsInRow++;
 
             if (options.rows && itemsInRow >= options.rows) {
@@ -47,9 +49,25 @@ define(['datetime', 'imageLoader', 'itemShortcuts'], function (datetime, imageLo
         return html;
     }
 
-    function buildChapterCard(item, chapter, options, className) {
+    function getImgUrl(item, chapter, index, maxWidth, apiClient) {
 
-        var imgUrl = chapter.images ? chapter.images.primary : '';
+        if (chapter.ImageTag) {
+
+            return apiClient.getScaledImageUrl(item.Id, {
+
+                maxWidth: maxWidth,
+                tag: chapter.ImageTag,
+                type: "Chapter",
+                index: index
+            });
+        }
+
+        return null;
+    }
+
+    function buildChapterCard(item, apiClient, chapter, index, options, className) {
+
+        var imgUrl = getImgUrl(item, chapter, index, options.width || 400, apiClient);
 
         var cardImageContainerClass = 'cardImageContainer';
         if (options.coverImage) {
@@ -84,12 +102,12 @@ define(['datetime', 'imageLoader', 'itemShortcuts'], function (datetime, imageLo
 
     function buildChapterCards(item, chapters, options) {
 
-        // Abort if the container has been disposed
-        if (!document.body.contains(options.parentContainer)) {
-            return;
-        }
-
         if (options.parentContainer) {
+            // Abort if the container has been disposed
+            if (!document.body.contains(options.parentContainer)) {
+                return;
+            }
+
             if (chapters.length) {
                 options.parentContainer.classList.remove('hide');
             } else {

dashboard-ui/bower_components/emby-webcomponents/multiselect/multiselect.css

@@ -34,3 +34,7 @@
     top: 0 !important;
     border-radius: 0 !important;
 }
+
+.withMultiSelect {
+    position: relative;
+}

dashboard-ui/bower_components/emby-webcomponents/multiselect/multiselect.js

@@ -16,7 +16,10 @@
             selectedElements = [];
             var elems = document.querySelectorAll('.itemSelectionPanel');
             for (var i = 0, length = elems.length; i < length; i++) {
-                elems[i].parentNode.removeChild(elems[i]);
+
+                var parent = elems[i].parentNode;
+                parent.removeChild(elems[i]);
+                parent.classList.remove('withMultiSelect');
             }
         }
     }
@@ -75,7 +78,7 @@
 
     function updateItemSelection(chkItemSelect, selected) {
 
-        var id = dom.parentWithClass(chkItemSelect, 'card').getAttribute('data-id');
+        var id = dom.parentWithAttribute(chkItemSelect, 'data-id').getAttribute('data-id');
 
         if (selected) {
 
@@ -120,7 +123,9 @@
             itemSelectionPanel = document.createElement('div');
             itemSelectionPanel.classList.add('itemSelectionPanel');
 
-            (item.querySelector('.cardBox') || item.querySelector('.cardContent')).appendChild(itemSelectionPanel);
+            var parent = item.querySelector('.cardBox') || item.querySelector('.cardContent');
+            parent.classList.add('withMultiSelect');
+            parent.appendChild(itemSelectionPanel);
 
             var cssClass = 'chkItemSelect';
             if (isChecked && !browser.firefox) {

dashboard-ui/css/librarybrowser.css

@@ -884,23 +884,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     font-size: 180%;
 }
 
-.mediaSourceIndicator {
-    display: block;
-    position: absolute;
-    top: 5px;
-    left: 5px;
-    text-align: center;
-    vertical-align: middle;
-    width: 22px;
-    height: 19px;
-    padding-top: 3px;
-    border-radius: 50%;
-    color: #fff;
-    background: rgb(51, 136, 204);
-    background: rgba(51, 136, 204, .9);
-    line-height: 1.2;
-}
-
 .recordingProgressBar::-moz-progress-bar {
     background-color: #cc3333;
 }

dashboard-ui/itemdetails.html

@@ -153,7 +153,8 @@
                         <button is="paper-icon-button-light" class="autoSize"><i class="md-icon">settings</i></button>
                     </a>
                 </h1>
-                <div id="scenesContent"></div>
+                <div id="scenesContent" class="itemsContainer"></div>
+                <button is="emby-button" type="button" class="raised more moreScenes hide">${ButtonMore}</button>
             </div>
             <div id="themeSongsCollapsible" class="detailSection hide">
                 <h1>

dashboard-ui/scripts/itemdetailpage.js

@@ -1583,82 +1583,38 @@
     }
 
     function renderScenes(page, item, user, limit, isStatic) {
-        var html = '';
 
         var chapters = item.Chapters || [];
+        var scenesContent = page.querySelector('#scenesContent');
 
         if (enableScrollX()) {
-            html += '<div class="hiddenScrollX itemsContainer">';
+            scenesContent.classList.add('smoothScrollX');
             limit = null;
         } else {
-            html += '<div class="itemsContainer vertical-wrap">';
+            scenesContent.classList.add('vertical-wrap');
         }
 
-        for (var i = 0, length = chapters.length; i < length; i++) {
+        var limitExceeded = limit && chapters.length > limit;
 
-            if (limit && i >= limit) {
+        if (limitExceeded) {
-                break;
+            chapters = chapters.slice(0);
-            }
+            chapters.length = Math.min(limit, chapters.length);
-
-            var chapter = chapters[i];
-            var chapterName = chapter.Name || "Chapter " + i;
-
-            var onclick = item.PlayAccess == 'Full' && !isStatic ? ' onclick="ItemDetailPage.play(' + chapter.StartPositionTicks + ');"' : '';
-
-            html += '<a class="card ' + getThumbShape() + 'Card scalableCard" href="#"' + onclick + '>';
-
-            html += '<div class="cardBox">';
-            html += '<div class="cardScalable">';
-
-            var imgUrl;
-
-            if (chapter.ImageTag) {
-
-                imgUrl = ApiClient.getScaledImageUrl(item.Id, {
-                    maxWidth: 400,
-                    tag: chapter.ImageTag,
-                    type: "Chapter",
-                    index: i
-                });
-            } else {
-                imgUrl = "css/images/items/list/chapter.png";
-            }
-
-            html += '<div class="cardPadder"></div>';
-
-            html += '<div class="cardContent">';
-            html += '<div class="cardImage lazy" data-src="' + imgUrl + '"></div>';
-
-            html += '<div class="innerCardFooter">';
-            html += '<div class="cardText">' + chapterName + '</div>';
-            html += '<div class="cardText">';
-            html += datetime.getDisplayRunningTime(chapter.StartPositionTicks);
-            html += '</div>';
-
-            //cardFooter
-            html += "</div>";
-
-            // cardContent
-            html += '</div>';
-
-            // cardScalable
-            html += '</div>';
-
-            // cardBox
-            html += '</div>';
-
-            html += '</a>';
         }
 
-        html += '</div>';
+        require(['chaptercardbuilder'], function (chaptercardbuilder) {
 
-        if (limit && chapters.length > limit) {
+            chaptercardbuilder.buildChapterCards(item, chapters, {
-            html += '<p style="margin: 0;"><button is="emby-button" type="button" class="raised more moreScenes">' + Globalize.translate('ButtonMore') + '</button></p>';
+                itemsContainer: scenesContent,
+                coverImage: true,
+                width: 400
+            });
+        });
+
+        if (limitExceeded) {
+            page.querySelector('.moreScenes').classList.remove('hide');
+        } else {
+            page.querySelector('.moreScenes').classList.add('hide');
         }
-
-        var scenesContent = page.querySelector('#scenesContent');
-        scenesContent.innerHTML = html;
-        ImageLoader.lazyChildren(scenesContent);
     }
 
     function renderMediaSources(page, item) {