update shared components

2016-07-28 22:42:42 -04:00 · 2016-07-28 22:42:42 -04:00 · c59b4c5a08
commit c59b4c5a08
parent bcd1e109e0
10 changed files with 1298 additions and 27 deletions
--- a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/chaptercardbuilder.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/chaptercardbuilder.js
@ -0,0 +1,115 @@
+define(['datetime', 'imageLoader', 'itemShortcuts'], function (datetime, imageLoader, itemShortcuts) {
+
+    function buildChapterCardsHtml(item, chapters, options) {
+
+        var className = 'card scalableCard itemAction chapterCard';
+
+        var mediaStreams = ((item.MediaSources || [])[0] || {}).MediaStreams || [];
+        var videoStream = mediaStreams.filter(function (i) {
+            return i.Type == 'Video';
+        })[0] || {};
+
+        var shape = 'backdropCard';
+
+        if (videoStream.Width && videoStream.Height) {
+
+            if ((videoStream.Width / videoStream.Height) <= 1.34) {
+                shape = 'squareCard';
+            }
+        }
+
+        className += ' ' + shape;
+
+        if (options.block || options.rows) {
+            className += ' block';
+        }
+
+        var html = '';
+        var itemsInRow = 0;
+
+        for (var i = 0, length = chapters.length; i < length; i++) {
+
+            if (options.rows && itemsInRow == 0) {
+                html += '<div class="cardColumn">';
+            }
+
+            var chapter = chapters[i];
+
+            html += buildChapterCard(item, chapter, options, className);
+            itemsInRow++;
+
+            if (options.rows && itemsInRow >= options.rows) {
+                itemsInRow = 0;
+                html += '</div>';
+            }
+        }
+
+        return html;
+    }
+
+    function buildChapterCard(item, chapter, options, className) {
+
+        var imgUrl = chapter.images ? chapter.images.primary : '';
+
+        var cardImageContainerClass = 'cardImageContainer';
+        if (options.coverImage) {
+            cardImageContainerClass += ' coveredImage';
+        }
+        var dataAttributes = ' data-action="play" data-isfolder="' + item.IsFolder + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-type="' + item.Type + '" data-mediatype="' + item.MediaType + '" data-positionticks="' + chapter.StartPositionTicks + '"';
+        var cardImageContainer = imgUrl ? ('<div class="' + cardImageContainerClass + ' lazy" data-src="' + imgUrl + '">') : ('<div class="' + cardImageContainerClass + '">');
+
+        var nameHtml = '';
+        nameHtml += '<div class="cardText">' + chapter.Name + '</div>';
+        nameHtml += '<div class="cardText">' + datetime.getDisplayRunningTime(chapter.StartPositionTicks) + '</div>';
+
+        var html = '\
+<button type="button" class="' + className + '"' + dataAttributes + '> \
+<div class="cardBox">\
+<div class="cardScalable">\
+<div class="cardPadder"></div>\
+<div class="cardContent">\
+' + cardImageContainer + '\
+</div>\
+<div class="innerCardFooter">\
+' + nameHtml + '\
+</div>\
+</div>\
+</div>\
+</div>\
+</button>'
+        ;
+
+        return html;
+    }
+
+    function buildChapterCards(item, chapters, options) {
+
+        // Abort if the container has been disposed
+        if (!document.body.contains(options.parentContainer)) {
+            return;
+        }
+
+        if (options.parentContainer) {
+            if (chapters.length) {
+                options.parentContainer.classList.remove('hide');
+            } else {
+                options.parentContainer.classList.add('hide');
+                return;
+            }
+        }
+
+        var html = buildChapterCardsHtml(item, chapters, options);
+
+        options.itemsContainer.innerHTML = html;
+
+        imageLoader.lazyChildren(options.itemsContainer);
+
+        itemShortcuts.off(options.itemsContainer);
+        itemShortcuts.on(options.itemsContainer);
+    }
+
+    return {
+        buildChapterCards: buildChapterCards
+    };
+
+});