Create an EPG-like program list with existing components in QB Mobile – Applicaster Support

Introduction

This article explains how to build EPG functionality into QB mobile apps using existing components of a data feed with tabs, lists and rails.

NOTE: This is not the same process as in Native apps where an EPG plugin added the functionality and this displayed a classic EPG Grid-structure.

Single Channel Guide

A single channel program schedule can be displayed using a FEED and the QB mobile components of TABS and LISTS

At its most basic, as described below, the result of this feature is a display of daily programs, split across tabs per-day.

If you wish to add the following features then they need to be addressed with the suggestions described.

Playing today's current live program from the list
- Your main EPG feed should not include the current live program
  - The components rendering the feed will be set to non-clickable (configured in UI Builder, detailed below)
- Add a separate component with it's own live program feed at the top of the tabs page
  - Set this to display 1 item
  - This component is tappable - to launch the player
  - This component will appear at the top of each day's view
Auto time zone adaptation
- Send the device time offset with the DSP request
- Calculate the device time within the DSP for display in the app
Multi-channel support
- Option 1. Add a pre-screen that displays all the channels as logos in a grid. Tap a channel icon will launch the program list view for that specific channel
- Option 2. Use a horizontal list for each channel in the tabs screen
  - Note: Cell Info Component (header) does not support logos, only text so channel logo cannot be used in the header. This could be solved by using a group component in the tabs screen of
    - A H List set to item=1 to display the channel logo from the feed
    - H List for the programs for that channel
    - Repeat the group pattern for all channels
Reminders
- Not supported yet

Basic single channel program list

Feed requirements

Ensure the TABS (QB) plugin is in your app

2. In your app layout create a tab screen following the help guide at Configure QB Mobile Tabs

3. Add a general screen type that will be used to display the list of daily programs

4. Connect your tab screen to this screen

5. Add a component (e.g. List) to the general screen to display the feed metadata

6. Ensure the Content Selectable radio button is set to off as future programs do not yet have a video associated with them

7. Use a Power Cell to style a cell for the components. A program guide would typically need to display a program image, title, start time, duration in a list.

8. Create a feed that contains

A source for content for each of the required number of days (see example below)

Attach this feed to the type and source fields of the tabs screen

Example: The following feed is a simple 2 day schedule that will distribute

“title”:”day 0” and “title”:”day 1” into the title area of 2 tabs

// 20200414192554
// https://zapp-pipes.herokuapp.com/general-provider/fetchData?type=FEED_JSON&url=aHR0cHM6Ly9kbC5kcm9wYm94LmNvbS9zL21tbXJ3cjN5b3EzOTBpNS90YWJzX2ZlZWRzLmpzb24%2FZGw9MA%3D%3D

{
  "type": {
    "value": "feed"
  },
  "title": "static tabs",
  "entry": [
    {
      "type": {
        "value": "feed"
      },
      "id": 52931,
      "title": "day 0",
      "media_group": [
        {
          "type": "image",
          "media_item": [
            {
              "src": null,
              "key": "image_base",
              "type": "image"
            }
          ]
        }
      ],

      "link": {
        "type": "atom",
        "rel": "self",
        "href": null
      },
      "content": {
        "src": "general-provider://fetchData?type=FEED_JSON&url=aHR0cHM6Ly9kbC5kcm9wYm94LmNvbS9zL3c0NXRpN2t4dmc4djU2Yy90YWIxX2ZlZWQuanNvbj9kbD0w"
      }
    },
    {
      "type": {
        "value": "feed"
      },
      "id": 52932,
      "title": "day 1",
      "media_group": [
        {
          "type": "image",
          "media_item": [
            {
              "src": null,
              "key": "image_base",
              "type": "image"
            }
          ]
        }
      ],

      "link": {
        "type": "atom",
        "rel": "self",
        "href": null
      },
      "content": {
        "src": 
      }
    }
    ],
  "content": {
    "src": "applicaster://fetchData?url=aHR0cHM6Ly9hc3NldHMtc2VjdXJlLmFwcGxpY2FzdGVyLmNvbS96YXBwL2FjY291bnRzLzVlMTMyYzkwNjY2MzMzMDAwOGMwZjhhYi9hcHBfZmFtaWxpZXMvMTczNC9mZWVkcy81Y2U5ZjQ2Zi1kOTJiLTQ4YWItYTBlYS1mYjQ4ZGQwMjFlMWMuanNvbg%3D%3D&type=manual",
    "type": "atom"
  },
  "author": {
    "name": "applicaster"
  }
}

The src for each day’s content in the above feed should contain the metadata about the program such as

Title
ID
Summary
Image
Start time
End time
Duration

Example

// 20200414194701
// https://zapp-pipes.herokuapp.com/general-provider/fetchData?type=FEED_JSON&url=aHR0cHM6Ly9kbC5kcm9wYm94LmNvbS9zLzh1c2l6NHF4NHMxbDNyei9saXN0MV9mZWVkLmpzb24%2FZGw9MA%3D%3D

{
  "type": {
    "value": "feed"
  },
  "title": "Testing feed",
  "id": "123",
  "content": {
    
  },
  "entry": [
    {
      "type": {
        "value": "video"
      },
      "title": "The Crown",
      "id": "9",
      "summary": "S1 E7: Scientia Potentia Est",
      "published": "2020-01-10T00:00+00:00",
      "updated": "2020-01-17T00:00+00:00",
      "author": {
        "name": ""
      },
      "media_group": [
        {
          "type": "image",
          "media_item": [
            {
              "src": "https://images.ctfassets.net/4k8t6nhywge5/1JtvmaugjfOWLIMU2ov0Ln/a2b34cdf076759a07543e2f479b0ea96/AAAABTEFpESCAs2XU2NwSGSQD7GJuEbqrsgKqEqZj5pmQ8kE0GdCIi_agMZ81Inhl_-qdkTPZ0t-pqbsssv5Yz4AIXk8o1c5BpMPQhtczcutc6QLUCMn.jpg",
              "key": "image_base",
              "type": "extern_image"
            }
          ]
        }
      ],
      "link": {
        "rel": "alternate",
        "href": "https://www.themoviedb.org/tv/62688-supergirl?language=en-US",
        "type": "text/html"
      },
      "extensions": {
        "section": "Netflix",
        "duration": 535242,
        "free": true,
        "language": "English",
        "start_time": "12:15",
        "end_time": "14:00",
        "duration_time": "1:45"
      },
      "content": {
        "type": "video/hls",
        "src": null
      }
    }
  }
]

8. To display the required content (e.g start time or duration) from the feed in a Power Cell Text field you can select the the Data Key to “Other” and then type the extension data type into the Custom Data Key field.

Use the format extension.name