add tv guide hover menus

dashboard-ui/scripts/livetvguide.js

@@ -31,7 +31,7 @@
 
         return date;
     }
-    
+
     function reloadChannels(page) {
         channelsPromise = null;
         reloadGuide(page);
@@ -51,22 +51,22 @@
         nextDay.setHours(0, 0, 0, 0);
         nextDay.setDate(nextDay.getDate() + 1);
         console.log(nextDay);
-        channelsPromise.done(function(channelsResult) {
+        channelsPromise.done(function (channelsResult) {
 
             apiClient.getLiveTvPrograms({
                 UserId: Dashboard.getCurrentUserId(),
                 MaxStartDate: nextDay.toISOString(),
                 MinEndDate: date.toISOString(),
-                channelIds: channelsResult.Items.map(function(c) {
+                channelIds: channelsResult.Items.map(function (c) {
                     return c.Id;
                 }).join(',')
-                
-            }).done(function(programsResult) {
-                
+
+            }).done(function (programsResult) {
+
                 renderGuide(page, date, channelsResult.Items, programsResult.Items);
                 Dashboard.hideLoadingMsg();
             });
-            
+
             var channelPagingHtml = LibraryBrowser.getPagingHtml(channelQuery, channelsResult.TotalRecordCount, false, [10, 20, 30, 50, 100]);
             $('.channelPaging', page).html(channelPagingHtml).trigger('create');
 
@@ -214,6 +214,7 @@
             var href;
             var cssClass = "timeslotCellInner";
             var style;
+            var dataProgramId;
 
             if (program) {
                 if (program.IsKids) {
@@ -241,13 +242,15 @@
                 } else {
                     style = '';
                 }
+                dataProgramId = ' data-programid="' + program.Id + '"';
             } else {
                 cellTagName = "div";
                 href = '';
                 style = '';
+                dataProgramId = '';
             }
 
-            html += '<' + cellTagName + ' class="' + cssClass + '"' + href + style + '>';
+            html += '<' + cellTagName + dataProgramId + ' class="' + cssClass + '"' + href + style + '>';
 
             if (program) {
 
@@ -311,7 +314,8 @@
             html.push(getChannelProgramsHtml(page, date, channels[i], programs));
         }
 
-        $('.programGrid', page).html(html.join('')).scrollTop(0).scrollLeft(0);
+        $('.programGrid', page).html(html.join('')).scrollTop(0).scrollLeft(0)
+            .createGuideHoverMenu('.timeslotCellInnerWithProgram');
     }
 
     function renderChannelHeaders(page, channels) {
@@ -444,4 +448,206 @@
         });
     });
 
-})(jQuery, document, ApiClient);
+})(jQuery, document, ApiClient);
+
+(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 += '<div class="itemOverlayContent">';
+
+        if (item.EpisodeTitle) {
+            html += '<p>';
+            html += item.EpisodeTitle;
+            html += '</p>';
+        }
+
+        html += '<p class="itemMiscInfo miscTvProgramInfo"></p>';
+
+        html += '<p style="margin: 1.25em 0;">';
+        html += '<div class="itemCommunityRating" style="display:inline-block;">';
+        html += LibraryBrowser.getRatingHtml(item);
+        html += '</div>';
+        html += '<span class="userDataIcons">';
+        html += LibraryBrowser.getUserDataIconsHtml(item);
+        html += '</span>';
+        html += '</p>';
+
+        html += '<p class="itemGenres"></p>';
+
+        html += '<p class="itemOverlayHtml">';
+        html += (item.OverviewHtml || item.Overview || '');
+        html += '</p>';
+
+        //html += '<p>';
+
+        //html += '<button type="button" data-mini="true" data-inline="true" data-icon="play" data-iconpos="notext">Play</button>';
+        //html += '<button type="button" data-mini="true" data-inline="true" data-icon="remote" data-iconpos="notext">Play</button>';
+
+        //html += '</p>';
+
+        html += '</div>';
+
+        return html;
+    }
+
+    function showOverlay(elem, item) {
+
+        $('.itemFlyout').popup('close').remove();
+
+        var html = '<div data-role="popup" class="itemFlyout" data-theme="b" data-arrow="true" data-history="false">';
+
+        html += '<div class="ui-bar-b" style="text-align:center;">';
+        html += '<h3 style="margin: .5em 0;padding:0 1em;font-weight:normal;">' + item.Name + '</h3>';
+        html += '</div>';
+
+        html += '<div style="padding: 0 1em;">';
+        html += getOverlayHtml(item);
+        html += '</div>';
+
+        html += '</div>';
+
+        $('.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 () {
+
+            $(this).off("popupafterclose").off("mouseenter").off("mouseleave").remove();
+        });
+
+        LibraryBrowser.renderGenres($('.itemGenres', popup), {
+            Type: item.type,
+            Genres: item.Genres.splice(0, 3)
+        }, 'livetv');
+        LiveTvHelpers.renderMiscProgramInfo($('.miscTvProgramInfo', popup), item);
+
+        popup.parents().prev('.ui-popup-screen').remove();
+        currentPosterItem = elem;
+    }
+
+    function onProgramClicked() {
+
+        if (showOverlayTimeout) {
+            clearTimeout(showOverlayTimeout);
+            showOverlayTimeout = null;
+        }
+
+        if (hideOverlayTimeout) {
+            clearTimeout(hideOverlayTimeout);
+            hideOverlayTimeout = null;
+        }
+
+        hideOverlay();
+    }
+
+    function hideOverlay() {
+
+        $('.itemFlyout').popup('close').remove();
+
+        if (currentPosterItem) {
+
+            $(currentPosterItem).off('click.overlay');
+            currentPosterItem = null;
+        }
+    }
+
+    function startHideOverlayTimer() {
+
+        if (hideOverlayTimeout) {
+            clearTimeout(hideOverlayTimeout);
+            hideOverlayTimeout = null;
+        }
+
+        hideOverlayTimeout = setTimeout(hideOverlay, 200);
+    }
+
+    function onHoverOut() {
+
+        if (showOverlayTimeout) {
+            clearTimeout(showOverlayTimeout);
+            showOverlayTimeout = null;
+        }
+
+        startHideOverlayTimer();
+    }
+
+    $.fn.createGuideHoverMenu = function (childSelector) {
+
+        function onShowTimerExpired(elem) {
+
+            var id = elem.getAttribute('data-programid');
+
+            ApiClient.getLiveTvProgram(id, Dashboard.getCurrentUserId()).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) {
+                if (currentPosterItem && currentPosterItem == elem) {
+                    return;
+                } else {
+                    hideOverlay();
+                }
+            }
+
+            showOverlayTimeout = setTimeout(function () {
+
+                onShowTimerExpired(elem);
+
+            }, 1000);
+        }
+
+        // https://hacks.mozilla.org/2013/04/detecting-touch-its-the-why-not-the-how/
+
+        if (('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)) {
+            /* browser with either Touch Events of Pointer Events
+               running on touch-capable device */
+            return this;
+        }
+
+        return this.on('mouseenter', childSelector, onHoverIn)
+            .on('mouseleave', childSelector, onHoverOut)
+            .on('click', childSelector, onProgramClicked);
+    };
+
+})(jQuery, document, window);