diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css index 123c916956..5a67a3c6df 100644 --- a/dashboard-ui/css/librarybrowser.css +++ b/dashboard-ui/css/librarybrowser.css @@ -988,6 +988,17 @@ a.itemTag:hover { background: #4d90fe; } +.itemOverlayContent { + max-width: 300px; +} + +.itemOverlayHtml { + max-height: 100px; + margin-top: 1.5em; + overflow: hidden; + text-overflow: ellipsis; +} + @media all and (min-height: 500px) { .alphabetPicker { diff --git a/dashboard-ui/css/posteritem.css b/dashboard-ui/css/posteritem.css index 65a3b2784d..5d623b4f4d 100644 --- a/dashboard-ui/css/posteritem.css +++ b/dashboard-ui/css/posteritem.css @@ -27,11 +27,11 @@ position: relative; } - .posterItem:hover .posterItemImage { - -moz-box-shadow: 0 0 12px 7px #2572EB; - -webkit-box-shadow: 0 0 12px 7px #2572EB; - box-shadow: 0 0 12px 7px #2572EB; - } +.posterItem:hover .posterItemImage { + -moz-box-shadow: 0 0 12px 7px #2572EB; + -webkit-box-shadow: 0 0 12px 7px #2572EB; + box-shadow: 0 0 12px 7px #2572EB; +} .coveredPosterItemImage { background-size: cover; @@ -163,10 +163,10 @@ z-index: 10; } -.miniPosterItemProgress .itemProgressBar { - height: 7px; - opacity: 1; -} + .miniPosterItemProgress .itemProgressBar { + height: 7px; + opacity: 1; + } @media all and (max-width: 600px) { diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js index fffb13b349..03efb71d6a 100644 --- a/dashboard-ui/scripts/librarybrowser.js +++ b/dashboard-ui/scripts/librarybrowser.js @@ -45,9 +45,9 @@ localStorage.setItem(key + '_' + Dashboard.getCurrentUserId(), JSON.stringify(values)); }, - - saveViewSetting: function(key, value) { - + + saveViewSetting: function (key, value) { + localStorage.setItem(key + '_' + Dashboard.getCurrentUserId() + '_view', value); }, @@ -899,7 +899,7 @@ cssClass += ' ' + options.shape + 'PosterItem'; - html += ''; + html += ''; var style = ""; @@ -954,18 +954,18 @@ html += '
'; } - var cssclass = options.centerText ? "posterItemText posterItemTextCentered" : "posterItemText"; + cssClass = options.centerText ? "posterItemText posterItemTextCentered" : "posterItemText"; if (options.showParentTitle) { - html += "
"; + html += "
"; html += item.EpisodeTitle ? item.Name : (item.SeriesName || item.Album || item.AlbumArtist || item.GameSystem || " "); html += "
"; } if (options.showTitle || forceName) { - html += "
"; + html += "
"; html += name; html += "
"; } @@ -975,7 +975,7 @@ var itemCountHtml = LibraryBrowser.getItemCountsHtml(options, item); if (itemCountHtml) { - html += "
"; + html += "
"; html += itemCountHtml; html += "
"; } @@ -1482,7 +1482,7 @@ } pageSizes = pageSizes || [20, 50, 100, 200, 300, 400, 500]; - + for (var j = 0, length = pageSizes.length; j < length; j++) { options += getOption(pageSizes[j]); } @@ -2411,4 +2411,177 @@ }; -})(window, document, jQuery, screen, localStorage); \ No newline at end of file +})(window, document, jQuery, screen, localStorage); + +(function ($, document, window) { + + var showOverlayTimeout; + var hideOverlayTimeout; + var currentPosterItem; + + function onOverlayMouseOver() { + + if (hideOverlayTimeout) { + clearTimeout(hideOverlayTimeout); + hideOverlayTimeout = null; + } + } + + function onOverlayMouseOut() { + + startHideOverlayTimer(); + } + + function getOverlayHtml(item) { + + var html = ''; + + html += '
'; + + html += '

'; + html += LibraryBrowser.getMiscInfoHtml(item); + html += '

'; + + html += '

'; + html += ''; + html += LibraryBrowser.getRatingHtml(item); + html += ''; + html += '

'; + + //html += '

'; + //html += ''; + //html += LibraryBrowser.getUserDataIconsHtml(item); + //html += ''; + //html += '

'; + + html += '

'; + html += (item.OverviewHtml || item.Overview || ''); + html += '

'; + + html += '

'; + + html += ''; + html += ''; + html += ''; + html += ''; + + html += '

'; + + html += '
'; + + return html; + } + + function showOverlay(elem, item) { + + $('.itemFlyout').popup('close').remove(); + + var html = '
'; + + html += '
'; + html += '

' + LibraryBrowser.getPosterViewDisplayName(item, true) + '

'; + html += '
'; + + html += '
'; + html += getOverlayHtml(item); + html += '
'; + + html += '
'; + + $('.itemFlyout').popup('close').popup('destroy').remove(); + + $(document.body).append(html); + + var popup = $('.itemFlyout').on('mouseenter', onOverlayMouseOver).on('mouseleave', onOverlayMouseOut).popup({ positionTo: elem }).trigger('create').popup("open").on("popupafterclose", function () { + + $(elem).off('mouseleave.overlay', onHoverOut); + $(this).off("popupafterclose").off("mouseenter").off("mouseleave").remove(); + }); + + popup.parents().prev('.ui-popup-screen').remove(); + currentPosterItem = elem; + + $(elem).on('mouseleave.overlay', onHoverOut).on('click.overlay', hideOverlay); + } + + function hideOverlay() { + + $('.itemFlyout').popup('close').remove(); + + if (currentPosterItem) { + + $(currentPosterItem).off('mouseleave.overlay').off('click.overlay'); + currentPosterItem = null; + } + } + + function startHideOverlayTimer() { + + if (hideOverlayTimeout) { + clearTimeout(hideOverlayTimeout); + hideOverlayTimeout = null; + } + + hideOverlayTimeout = setTimeout(hideOverlay, 400); + } + + function onHoverOut() { + + if (showOverlayTimeout) { + clearTimeout(showOverlayTimeout); + showOverlayTimeout = null; + } + + startHideOverlayTimer(); + } + + $.fn.createPosterItemHoverMenu = function (items) { + + function onShowTimerExpired(elem) { + + var id = elem.getAttribute('data-itemid'); + + ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(function (item) { + + showOverlay(elem, item); + + }); + } + + function onHoverIn() { + + if (showOverlayTimeout) { + clearTimeout(showOverlayTimeout); + showOverlayTimeout = null; + } + + if (hideOverlayTimeout) { + clearTimeout(hideOverlayTimeout); + hideOverlayTimeout = null; + } + + var elem = this; + + if (currentPosterItem && currentPosterItem == elem) { + return; + } + + showOverlayTimeout = setTimeout(function () { + + onShowTimerExpired(elem); + + }, 600); + } + + return this.hoverIntent({ + over: onHoverIn, + out: function () { + + }, + selector: '.posterItem' + + }); + }; + +})(jQuery, document, window); + diff --git a/dashboard-ui/scripts/livetvchannel.js b/dashboard-ui/scripts/livetvchannel.js index 7bc335fbf9..7f41e23a11 100644 --- a/dashboard-ui/scripts/livetvchannel.js +++ b/dashboard-ui/scripts/livetvchannel.js @@ -275,7 +275,7 @@ var airDate = item.OriginalAirDate; - if (airDate) { + if (airDate && !item.IsRepeat) { try { airDate = parseISO8601Date(airDate, { toLocal: true }).toLocaleDateString(); diff --git a/dashboard-ui/scripts/moviesrecommended.js b/dashboard-ui/scripts/moviesrecommended.js index 956bea728a..dd77aa108d 100644 --- a/dashboard-ui/scripts/moviesrecommended.js +++ b/dashboard-ui/scripts/moviesrecommended.js @@ -20,8 +20,8 @@ $('#recentlyAddedItems', page).html(LibraryBrowser.getPosterViewHtml({ items: result.Items, useAverageAspectRatio: true - })); - + + })).createPosterItemHoverMenu(); }); @@ -50,7 +50,8 @@ shape: 'backdrop', overlayText: true, showTitle: true - })); + + })).createPosterItemHoverMenu(); }); @@ -77,7 +78,8 @@ $('#trailerItems', page).html(LibraryBrowser.getPosterViewHtml({ items: result.Items, useAverageAspectRatio: true - })); + + })).createPosterItemHoverMenu(); }); diff --git a/dashboard-ui/scripts/musicrecommended.js b/dashboard-ui/scripts/musicrecommended.js index 7a98e099d3..a1a37d4883 100644 --- a/dashboard-ui/scripts/musicrecommended.js +++ b/dashboard-ui/scripts/musicrecommended.js @@ -23,7 +23,7 @@ shape: "square", showTitle: true, showParentTitle: true - })); + })).createPosterItemHoverMenu(); }); @@ -46,7 +46,7 @@ shape: "square", showTitle: true, showParentTitle: true - })); + })).createPosterItemHoverMenu(); }); @@ -76,7 +76,7 @@ shape: "square", showTitle: true, showParentTitle: true - })); + })).createPosterItemHoverMenu(); }); @@ -106,7 +106,7 @@ shape: "square", showTitle: true, showParentTitle: true - })); + })).createPosterItemHoverMenu(); }); diff --git a/dashboard-ui/scripts/tvnextup.js b/dashboard-ui/scripts/tvnextup.js index 387204270f..26319fa74b 100644 --- a/dashboard-ui/scripts/tvnextup.js +++ b/dashboard-ui/scripts/tvnextup.js @@ -30,7 +30,7 @@ showParentTitle: true, overlayText: true - })); + })).createPosterItemHoverMenu(); } else { diff --git a/dashboard-ui/scripts/tvrecommended.js b/dashboard-ui/scripts/tvrecommended.js index fea22dc44f..05e378bea0 100644 --- a/dashboard-ui/scripts/tvrecommended.js +++ b/dashboard-ui/scripts/tvrecommended.js @@ -25,7 +25,8 @@ showTitle: true, showParentTitle: true, overlayText: true - })); + + })).createPosterItemHoverMenu(); }); @@ -56,7 +57,8 @@ showTitle: true, showParentTitle: true, overlayText: true - })); + + })).createPosterItemHoverMenu(); }); diff --git a/dashboard-ui/thirdparty/jquery.hoverIntent.minified.js b/dashboard-ui/thirdparty/jquery.hoverIntent.minified.js new file mode 100644 index 0000000000..3f6bf7372b --- /dev/null +++ b/dashboard-ui/thirdparty/jquery.hoverIntent.minified.js @@ -0,0 +1,8 @@ +/*! + * hoverIntent r7 // 2013.03.11 // jQuery 1.9.1+ + * http://cherne.net/brian/resources/jquery.hoverIntent.html + * + * You may use hoverIntent under the terms of the MIT license. + * Copyright 2007, 2013 Brian Cherne + */ +(function(e){e.fn.hoverIntent=function(t,n,r){var i={interval:100,sensitivity:7,timeout:0};if(typeof t==="object"){i=e.extend(i,t)}else if(e.isFunction(n)){i=e.extend(i,{over:t,out:n,selector:r})}else{i=e.extend(i,{over:t,out:t,selector:n})}var s,o,u,a;var f=function(e){s=e.pageX;o=e.pageY};var l=function(t,n){n.hoverIntent_t=clearTimeout(n.hoverIntent_t);if(Math.abs(u-s)+Math.abs(a-o)