@applicaster/zapp-react-native-cell-1-mobile

Cell style 1 plugin for QB

Usage no npm install needed!

<script type="module">
  import applicasterZappReactNativeCell1Mobile from 'https://cdn.skypack.dev/@applicaster/zapp-react-native-cell-1-mobile';
</script>

README

QuickBricks Cell 1 plugin

cell example

This is a home for the Cell 1 plugin for mobile

Tested on Android mobile/tablet and ios Mobile/tablet

Functionalities

  1. This plugin is capable of displaying a cell 1 fluid cell style
  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: defined by ui component
  • Cell height defined by ui component
  • Main image width: defined by ui component
  • Main image height: defined by ui component
  • 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