; let programmes = []; let currentTimezone = 'Europe/London'; let scrollPosition = 0; function fetchData() { $.ajax({ url: 'https://d1e7iy84y3j6f2.cloudfront.net/xptvglobal.xml', dataType: 'xml', success: function(data) { channels = []; $(data).find('channel').each(function() { channels.push({ id: $(this).attr('id'), name: $(this).find('display-name').text(), logo: $(this).find('icon').attr('src') }); }); programmes = []; $(data).find('programme').each(function() { programmes.push({ channel: $(this).attr('channel'), start: moment.tz($(this).attr('start'), 'YYYYMMDDHHmmss Z', currentTimezone), stop: moment.tz($(this).attr('stop'), 'YYYYMMDDHHmmss Z', currentTimezone), title: $(this).find('title').text() }); }); renderGrid(); updateTimeRuler(); }, error: function() { console.error('Error fetching XML data'); } }); } function renderGrid() { const gridContainer = $('#grid'); gridContainer.empty(); const start = moment(currentDate).tz(currentTimezone); const end = moment(currentDate).add(12, 'hours').tz(currentTimezone); const visibleProgrammes = programmes.filter(p => p.start.isBefore(end) && p.stop.isAfter(start)); const groupedProgrammes = groupProgrammesByChannel(visibleProgrammes); channels.forEach(channel => { const channelRow = $(''); const channelElement = $(` `); channelRow.append(channelElement); const programmesWrapper = $(''); const programmesElement = $(''); const rowContent = $(''); const channelProgrammes = groupedProgrammes[channel.id] || []; for (let i = 0; i < 12; i++) { const cellStart = moment(currentDate).add(i, 'hours').tz(currentTimezone); const cellEnd = moment(cellStart).add(1, 'hour'); const cellProgrammes = channelProgrammes.filter(p => p.start.isBefore(cellEnd) && p.stop.isAfter(cellStart)); if (cellProgrammes.length > 0) { cellProgrammes.forEach(prog => { const startTime = prog.start.tz(currentTimezone).format('h:mm A'); const endTime = prog.stop.tz(currentTimezone).format('h:mm A'); const start = moment.max(prog.start.tz(currentTimezone), cellStart); const stop = moment.min(prog.stop.tz(currentTimezone), cellEnd); const width = stop.diff(start, 'minutes') / 60 * HOUR_WIDTH; rowContent.append(` `); }); } else { rowContent.append(``); } } programmesElement.append(rowContent); programmesWrapper.append(programmesElement); channelRow.append(programmesWrapper); gridContainer.append(channelRow); }); updateCurrentTimeLine(); updateScrollPosition(); updateTimeRuler(); } function groupProgrammesByChannel(programmes) { return programmes.reduce((acc, prog) => { if (!acc[prog.channel]) acc[prog.channel] = []; acc[prog.channel].push(prog); return acc; }, {}); } function updateTimeRuler() { const ruler = $('#timeRuler'); ruler.empty(); const programmesWrapper = $('.programmes-wrapper'); const programmesOffset = programmesWrapper.offset().left; const start = moment(currentDate).tz(currentTimezone); const end = moment(currentDate).add(12, 'hours').tz(currentTimezone); ruler.css('left', `${programmesOffset}px`); for (let i = 0; i < 12; i++) { const time = moment(start).add(i, 'hours'); ruler.append(``); } } function updateCurrentTimeLine() { $('.current-time').remove(); const now = moment().tz(currentTimezone); const start = moment(currentDate).tz(currentTimezone); const end = moment(currentDate).add(12, 'hours').tz(currentTimezone); if (now.isBetween(start, end)) { const left = (now.diff(start, 'minutes') / 60) * HOUR_WIDTH; $('.programmes').append(``); } } function updateScrollPosition() { $('.time-ruler').css('transform', `translateX(-${scrollPosition}px)`); $('.programmes').css('transform', `translateX(-${scrollPosition}px)`); } let popupTimeout; function showPopup(program, x, y) { clearTimeout(popupTimeout); popupTimeout = setTimeout(() => { const startTime = moment(program.data('start')).tz(currentTimezone); const endTime = moment(program.data('end')).tz(currentTimezone); const popupContent = `

${program.find('.programme-title').text()}

`; $('#popup-content').html(popupContent); const popup = $('#popup'); popup.css({ display: 'block', left: `${Math.min(x + 10, window.innerWidth - popup.outerWidth())}px`, top: `${Math.min(y + 10, window.innerHeight - popup.outerHeight())}px` }); setTimeout(() => popup.addClass('show'), 10); }, 1000); } function hidePopup() { clearTimeout(popupTimeout); const popup = $('#popup'); popup.removeClass('show'); setTimeout(() => popup.css('display', 'none'), 300); } function updateDateDisplay() { const dateDisplay = $('#date-display'); dateDisplay.text(moment(currentDate).format('ddd MMM D, YYYY')); } function openChannelLink(channelId) { let url; switch (channelId.toLowerCase()) { case 'xptv1': url = `https://xptv.live/?channel=xptv1`; break; case 'xptv2': url = `https://xptv.live/?channel=xptv2`; break; case 'xptvus': url = `https://xptv.live/?channel=xptvUS`; break; case 'xptvuk': url = `https://xptv.live/?channel=xptvUK`; break; case 'popworld': url = `https://xptv.live/?channel=popworld`; break; case 'xpr1': url = 'https://xpradioone.com'; break; case 'xpr2': url = 'https://xpradiotwo.com'; break; default: console.error('Unknown channel:', channelId); return; } window.open(url, '_blank'); } $('.grid').on('mouseenter', '.programme', function(event) { showPopup($(this), event.pageX, event.pageY); }).on('mouseleave', '.programme', function() { hidePopup(); }).on('click', '.programme', function() { const channelId = $(this).closest('.channel-row').find('.channel').data('channel-id'); openChannelLink(channelId); }); $('#popup-close').on('click', hidePopup); $('#earlier').on('click', function() { currentDate.subtract(8, 'hours'); renderGrid(); scrollPosition = 0; updateScrollPosition(); updateDateDisplay(); }); $('#later').on('click', function() { currentDate.add(8, 'hours'); renderGrid(); scrollPosition = 0; updateScrollPosition(); updateDateDisplay(); }); $(document).ready(function() { const savedTimezone = localStorage.getItem('selectedTimezone'); if (savedTimezone) { currentTimezone = savedTimezone; } else { currentTimezone = moment.tz.guess(); } $('#timezone-select').val(currentTimezone); fetchData(); setInterval(updateCurrentTimeLine, 60000); updateDateDisplay(); }); $('#timezone-select').on('change', function() { currentTimezone = $(this).val(); localStorage.setItem('selectedTimezone', currentTimezone); currentDate = moment.tz(currentDate, currentTimezone); renderGrid(); scrollPosition = 0; updateScrollPosition(); updateDateDisplay(); }); moment.tz.names().forEach(function(tz) { $('#timezone-select').append($('', { value: tz, text: tz, selected: tz === currentTimezone })); }); fetchData(); setInterval(updateCurrentTimeLine, 60000); updateDateDisplay();