@applicaster/zapp-react-native-master-cell

QuickBricks Master Cell

This is the first iteration on the master cell plugin and it lets you create and style grid cell.

Tested on Samsung TV only.

Functionalities

1. This plugin is capable of displaying a Grid cell cell;
2. Lock icon maps to extensions.free key;
3. Possibility to map text to the different entry keys;
4. 3 fully customizable text fields;
5. Runtime badge that maps to the extensions.duration which represents duration time in seconds;
6. Two badges(content, lock) can be place in every corner of the image and in the middle
7. Handling of focused and selected states

Example applicaster entry

{
  "type": {
    "value": "video"
  },
  "title": "Supergirl",
  "id": "6156701",
  "summary": "S5 E1: Event Horizon",
  "published": "2019-11-15T10:31:00+00:00",
  "updated": "2019-11-15T10:41:03+00:00",
  "author": {
    "name": ""
  },
  "media_group": [
    {
      "type": "image",
      "media_item": [
        {
          "src": "https://live.staticflickr.com/65535/49084419672_cb19f602b2_b.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": "Apple TV+",
    "duration": 9863,
    "free": true
  },
  "content": {
    "type": "video/hls",
    "src": "https://mnmedias.api.telequebec.tv/m3u8/29880.m3u8"
  }
}

Default, hardcoded values

• Cell width: 399
• Cell height 372
• Main image width: 399
• Main image height: 372
• Empty number values fallback to: 0
• empty colors values fallback to: #FFFFFF
• badges height: 60
• badges width: 60
• cell margin: 18

Adding new configuration keys.

As QB doesn't receive the type of the configuration keys we need to store key names for number and colors to correctly parse/cast it. Every key from color_picker and number_input config fields needs to be defined in the NUMBER_KEYS and COLOR_KEYS arrays in the const.js