mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update tv guide
This commit is contained in:
Luke Pulverenti
parent
66043451c1
commit
e9e57ba19e
4 changed files with 1 additions and 268 deletions
|
|
@ -289,10 +289,6 @@
|
|||
programGrid.innerHTML = html.join('');
|
||||
|
||||
$(programGrid).scrollTop(0).scrollLeft(0);
|
||||
|
||||
if (options.enableHoverMenu) {
|
||||
$(programGrid).createGuideHoverMenu('.programCell');
|
||||
}
|
||||
}
|
||||
|
||||
function renderChannelHeaders(page, channels) {
|
||||
|
|
|
|||
|
|
@ -95,8 +95,6 @@
|
|||
|
||||
html += '</a>';
|
||||
}
|
||||
|
||||
$('#childrenContent', page).html(html).createGuideHoverMenu('.tvProgramInfo');
|
||||
}
|
||||
|
||||
function loadPrograms(page, channelId) {
|
||||
|
|
|
|||
|
|
@ -146,263 +146,3 @@
|
|||
|
||||
};
|
||||
});
|
||||
|
||||
define(['jQuery'], function ($) {
|
||||
|
||||
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 += '<span class="itemCommunityRating">';
|
||||
html += LibraryBrowser.getRatingHtml(item);
|
||||
html += '</span>';
|
||||
html += '<span class="userDataIcons">';
|
||||
html += LibraryBrowser.getUserDataIconsHtml(item);
|
||||
html += '</span>';
|
||||
html += '</p>';
|
||||
|
||||
html += '<p class="itemGenres"></p>';
|
||||
|
||||
html += '<p class="itemOverlayHtml">';
|
||||
html += (item.Overview || '');
|
||||
html += '</p>';
|
||||
|
||||
html += '<div style="text-align:center;padding-bottom:.5em;">';
|
||||
|
||||
var endDate;
|
||||
var startDate;
|
||||
var now = new Date().getTime();
|
||||
|
||||
try {
|
||||
|
||||
endDate = parseISO8601Date(item.EndDate, { toLocal: true });
|
||||
|
||||
} catch (err) {
|
||||
endDate = now;
|
||||
}
|
||||
|
||||
try {
|
||||
|
||||
startDate = parseISO8601Date(item.StartDate, { toLocal: true });
|
||||
|
||||
} catch (err) {
|
||||
startDate = now;
|
||||
}
|
||||
|
||||
|
||||
if (now < endDate && now >= startDate) {
|
||||
html += '<paper-button data-id="' + item.ChannelId + '" raised class="accent mini btnPlay"><iron-icon icon="play-arrow"></iron-icon><span>' + Globalize.translate('ButtonPlay') + '</span></paper-button>';
|
||||
}
|
||||
|
||||
if (!item.TimerId && !item.SeriesTimerId) {
|
||||
html += '<paper-button data-id="' + item.Id + '" raised class="mini btnRecord" style="background-color:#cc3333;"><iron-icon icon="videocam"></iron-icon><span>' + Globalize.translate('ButtonRecord') + '</span></paper-button>';
|
||||
}
|
||||
|
||||
html += '<div>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
function onPlayClick() {
|
||||
|
||||
hideOverlay();
|
||||
|
||||
MediaController.play({
|
||||
ids: [this.getAttribute('data-id')]
|
||||
});
|
||||
}
|
||||
|
||||
function onRecordClick() {
|
||||
hideOverlay();
|
||||
|
||||
var programId = this.getAttribute('data-id');
|
||||
require(['components/recordingcreator/recordingcreator'], function (recordingcreator) {
|
||||
recordingcreator.show(programId);
|
||||
});
|
||||
}
|
||||
|
||||
function showOverlay(elem, item) {
|
||||
|
||||
require(['paperdialoghelper', 'scale-up-animation', 'fade-out-animation'], function (paperdialoghelper) {
|
||||
|
||||
var dlg = document.createElement('paper-dialog');
|
||||
|
||||
dlg.setAttribute('with-backdrop', 'with-backdrop');
|
||||
dlg.setAttribute('role', 'alertdialog');
|
||||
|
||||
// seeing max call stack size exceeded in the debugger with this
|
||||
dlg.setAttribute('noAutoFocus', 'noAutoFocus');
|
||||
dlg.entryAnimation = 'scale-up-animation';
|
||||
dlg.exitAnimation = 'fade-out-animation';
|
||||
dlg.classList.add('ui-body-b');
|
||||
dlg.classList.add('background-theme-b');
|
||||
dlg.classList.add('tvProgramOverlay');
|
||||
|
||||
var html = '';
|
||||
html += '<h2 class="dialogHeader">';
|
||||
html += item.Name;
|
||||
html += '</h2>';
|
||||
|
||||
html += '<div>';
|
||||
html += getOverlayHtml(item);
|
||||
html += '</div>';
|
||||
|
||||
dlg.innerHTML = html;
|
||||
document.body.appendChild(dlg);
|
||||
|
||||
// Has to be assigned a z-index after the call to .open()
|
||||
$(dlg).on('iron-overlay-closed', function () {
|
||||
|
||||
$(dlg).off('mouseenter', onOverlayMouseOver);
|
||||
$(dlg).off('mouseleave', onOverlayMouseOut);
|
||||
|
||||
this.parentNode.removeChild(this);
|
||||
|
||||
if (currentPosterItem) {
|
||||
|
||||
currentPosterItem = null;
|
||||
}
|
||||
});
|
||||
|
||||
$('.btnPlay', dlg).on('click', onPlayClick);
|
||||
$('.btnRecord', dlg).on('click', onRecordClick);
|
||||
|
||||
LibraryBrowser.renderGenres($('.itemGenres', dlg), item, 3);
|
||||
$('.miscTvProgramInfo', dlg).html(LibraryBrowser.getMiscInfoHtml(item));
|
||||
|
||||
paperdialoghelper.positionTo(dlg, elem);
|
||||
|
||||
dlg.open();
|
||||
|
||||
$(dlg).on('mouseenter', onOverlayMouseOver);
|
||||
$(dlg).on('mouseleave', onOverlayMouseOut);
|
||||
|
||||
currentPosterItem = elem;
|
||||
});
|
||||
}
|
||||
|
||||
function onProgramClicked() {
|
||||
|
||||
if (showOverlayTimeout) {
|
||||
clearTimeout(showOverlayTimeout);
|
||||
showOverlayTimeout = null;
|
||||
}
|
||||
|
||||
if (hideOverlayTimeout) {
|
||||
clearTimeout(hideOverlayTimeout);
|
||||
hideOverlayTimeout = null;
|
||||
}
|
||||
|
||||
hideOverlay();
|
||||
}
|
||||
|
||||
function hideOverlay() {
|
||||
|
||||
var flyout = document.querySelector('.tvProgramOverlay');
|
||||
|
||||
if (flyout) {
|
||||
flyout.close();
|
||||
}
|
||||
}
|
||||
|
||||
function startHideOverlayTimer() {
|
||||
|
||||
if (hideOverlayTimeout) {
|
||||
clearTimeout(hideOverlayTimeout);
|
||||
hideOverlayTimeout = null;
|
||||
}
|
||||
|
||||
hideOverlayTimeout = setTimeout(hideOverlay, 200);
|
||||
}
|
||||
|
||||
$.fn.createGuideHoverMenu = function (childSelector) {
|
||||
|
||||
function onShowTimerExpired(elem) {
|
||||
|
||||
var id = elem.getAttribute('data-programid');
|
||||
|
||||
ApiClient.getLiveTvProgram(id, Dashboard.getCurrentUserId()).then(function (item) {
|
||||
|
||||
showOverlay(elem, item);
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function onHoverOut() {
|
||||
if (showOverlayTimeout) {
|
||||
clearTimeout(showOverlayTimeout);
|
||||
showOverlayTimeout = null;
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
if (AppInfo.isTouchPreferred) {
|
||||
/* 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);
|
||||
};
|
||||
|
||||
});
|
||||
|
|
@ -15,8 +15,7 @@
|
|||
|
||||
page.guideInstance = new tvguide({
|
||||
element: tabContent,
|
||||
enableHeadRoom: true,
|
||||
enableHoverMenu: true
|
||||
enableHeadRoom: true
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue