Build Custom Samsung Tizen TV EPG with Remote Navigation

Creating a custom Electronic Program Guide (EPG) for Samsung Tizen TV involves dynamically populating channel and program data while ensuring smooth navigation using remote keys. This guide walks you through key aspects of building an EPG, rendering programs, and managing remote key events, making it adaptable for other TV applications.
 

Dynamic Channel and Program Rendering: Populate channels and their associated programs dynamically from an API.
Remote Key Navigation: Seamlessly navigate through the sidebar, channels, and programs using the TV remote.
Program Details Modal: Display detailed program information in a modal and handle live playback.

1. Populating Channels and Programs Dynamically
The following function fetches channel data from an API and renders channels and their programs in a grid layout:
 

function populateChannels(channels) {
   const channelContainer = document.getElementById('schedule-channels');
   const contentContainer = document.querySelector('.schedule_container_content');
   channelContainer.innerHTML = '';
   contentContainer.innerHTML = '';
   const firstSlotTime = renderTimeSlots();
   channels.forEach(channel => {
       // Create a row for the channel
       const channelRow = document.createElement('div');
       channelRow.classList.add('schedule_channel_container');
       // Add channel details
       const channelCol = document.createElement('div');
       channelCol.classList.add('schedule_channel');
       channelCol.innerHTML = `
           <div class="history_ch">
               <div class="chn-id">${channel.id}</div>
               <img loading="lazy" src="${channel.image || 'default-img.png'}" alt="${channel.callSign}" />
           </div>
       `;
       channelRow.appendChild(channelCol);
       channelContainer.appendChild(channelRow);
       // Add programs for the channel
       const programsContainer = document.createElement('div');
       programsContainer.classList.add('schedule_time_programs');
       if (channel.program && channel.program.length > 0) {
           channel.program.forEach(program => {
               const programElem = document.createElement('div');
               programElem.classList.add('schedule_time');
               const programWidth = calculateProgramWidth(program.start, program.end, firstSlotTime);
               programElem.style.width = programWidth;
               programElem.innerHTML = `
                   <h4 class="program_title">${program.title}</h4>
                   <p class="program_time">${formatTime(program.start)} - ${formatTime(program.end)}</p>
               `;
               programsContainer.appendChild(programElem);
           });
       }
       contentContainer.appendChild(programsContainer);
   });
}

2. Remote Key Navigation

Handling TV remote navigation involves managing focus states for the sidebar, channels, and programs. The code snippet below shows how to implement this:

let currentSidebarIndex = 0;
let currentChannelIndex = 0;
let currentProgramIndex = 0;
let focusedOnSidebar = true;
function focusSidebarItem(index) {
   const sidebarItems = document.querySelectorAll('.sidebar .icon');
   sidebarItems.forEach((item, i) => {
       item.classList.toggle('focus', i === index);
   });
}
function focusProgram(channelIndex, programIndex) {
   const programs = getProgramsInChannel(channelIndex);
   const programElement = programs[programIndex];
   if (programElement) {
       programElement.classList.add('focus');
       programElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
   }
}

3. Program Details Modal

When a program is focused, detailed information can be displayed in a modal:

function fetchProgramDetail(channelId, programId) {
   const apiUrl = 'https://api.example.com/program-details';
   fetch(apiUrl, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ channel_id: channelId, program_id: programId }),
   })
       .then(response => response.json())
       .then(data => {
           populateModal(data);
       })
       .catch(error => console.error('API Error:', error));
}
function populateModal(data) {
   document.getElementById('programTitle').textContent = data.title || 'N/A';
   document.getElementById('programDescription').textContent = data.description || 'Description not available';
}

4. Live Program Indicator

Highlighting programs currently airing is essential for an interactive EPG:

function checkIfPlayingNow(programElement) {
   const now = Date.now() / 1000;
   const startTime = parseInt(programElement.querySelector('.program_time').getAttribute('data-starttime'), 10);
   const endTime = parseInt(programElement.querySelector('.program_time').getAttribute('data-endtime'), 10);
   return startTime <= now && now <= endTime;
}

Steps to Implement

   Set Up API Integration: Replace the demo API with your API for fetching channels and programs.

   Render Channels and Programs: Use populateChannels() to dynamically generate the grid.

   Implement Remote Navigation: Leverage focusSidebarItem() and focusProgram() to handle remote key events.

   Add Program Details Modal: Use fetchProgramDetail() and populateModal() to display detailed program information.

   Live Indicator: Use checkIfPlayingNow() to highlight live programs.

Conclusion

This blog covers the essential steps to build a custom EPG for Samsung Tizen TV, focusing on dynamic data rendering and remote key navigation. By following these techniques, developers can create an interactive and user-friendly EPG tailored to their needs. Additional features like search, filtering, or DRM content playback can further enhance the application.

If you need help building your OTT or TV web app, we're here to assist. Our expertise spans custom EPG development, DRM integration, and more. Please feel free to reach out here to discuss your project!