Dispatch flow

Display a stream of dispatches as dispatch flow (full screen). Dispatches must contains media attachment which will be used to display in fullscreen. The child widget will be stacked on top of the fullscreen media attachment that the dispatch flow will rendered. Use a stack component along with positioned component to place things as needed.

Name	Description
component	dispatch-flow
query	used use to query for dispatches
filterKey	a unique string key used to identify a filter popup that we listened to that would allow user to filter the result
floatingAction	a widget that appear as a floating action button (usually this is a filter/setting button)
placeholder	a widget that would display when stream has no data
options	options for the dispatch flow
child	a widget that will be used to layout on top of each dispatch flow

Options

Name	Description
autoPlayVideo	boolean, if true will auto play any videos
showVideoControls	boolean, if true, will displayed the video controls
loop	boolean, if true will play video in a loop
streamingWhenAvailable	boolean, if true, will try to stream video when available, default to false
showAttachment	optional boolean, default to true, if false, do not display the first attachment. Use this to customized attachmetn view (you can stack first attachment as part of the children stack of dispatch flow)
refreshOnNavigationChanged	optional boolean, default is true
viewPortFraction	double, view port fraction, default to 1.0, to pre-fetch next page, set it to less than 1.0, e.g. 0.99

Example

{
  "ux": {
    "component": "dispatch-flow",
    "query": "given tracker [media]",
    "filterKey": "dispatchFlowStream",
    "options": {
      "autoPlayVideo": false,
      "showVideoControls": false
    },
    "floatingAction": {
      "component": "filter",
      "filterKey": "dispatchFlowStream",
      "positioned": {
        "top": "20px",
        "left": "20px"
      },
      "options": {
        "icon": "fa-sliders",
        "color": "#fff",
        "size": "48px",
        "elevation": 1
      },
      "child": {
        "component": "grid",
        "direction": "column",
        "children": [
          {
            "component": "search-box",
            "options": {
              "id": "searchBox",
              "keyword": "body,name,first,last",
              "queryPrefix": "where",
              "operator": "contains"
            }
          },
          {
            "component": "chooser",
            "text": "Media type",
            "hint": "Filter the result by media type",
            "variant": "radio",
            "alignment": "right",
            "justifyContent": "space-between",
            "direction": "column",
            "options": {
              "id": "media",
              "keyword": "attachment",
              "queryPrefix": "where",
              "operator": "is",
              "items": [
                {
                  "text": "Any",
                  "value": ""
                },
                {
                  "text": "Video",
                  "value": "video"
                },
                {
                  "text": "Image",
                  "value": "image"
                }
              ]
            }
          },
          {
            "component": "chooser",
            "text": "Product category",
            "hint": "Filter the result by product categories",
            "variant": "checkbox",
            "alignment": "right",
            "justifyContent": "space-between",
            "direction": "column",
            "options": {
              "id": "product",
              "keyword": "key:product",
              "queryPrefix": "where",
              "operator": "contains",
              "items": [
                {
                  "text": "Skincare",
                  "value": "skincare"
                },
                {
                  "text": "Haircare",
                  "value": "hair"
                },
                {
                  "text": "Cream",
                  "value": "cream"
                }
              ]
            }
          },
          {
            "component": "chooser",
            "text": "Rating",
            "hint": "Star rating",
            "variant": "button-group",
            "options": {
              "id": "starRating",
              "multiSelected": true,
              "keyword": "key:rating",
              "queryPrefix": "where",
              "operator": "is",
              "items": [
                {
                  "text": "5 stars",
                  "value": "5"
                },
                {
                  "text": "4 stars",
                  "value": "4"
                },
                {
                  "text": "3 stars",
                  "value": "3"
                },
                {
                  "text": "2 stars",
                  "value": "2"
                },
                {
                  "text": "1 stars",
                  "value": "1"
                }
              ]
            }
          }
        ]
      }
    },
    "child": {
      "component": "stack",
      "children": [
        {
          "component": "positioned",
          "top": "20px",
          "right": "20px",
          "child": {
            "component": "profile",
            "value": "{dispatch.authorId}",
            "options": {
              "size": "48px"
            }
          }
        },
        {
          "component": "positioned",
          "bottom": "20px",
          "left": "20px",
          "child": {
            "component": "grid",
            "direction": "column",
            "children": [
              {
                "component": "text",
                "text": "any widgets here",
                "styles": {
                  "root": {
                    "color": "#fff",
                    "padding": "0px 0px 20px 0px"
                  }
                }
              },
              {
                "component": "grid",
                "direction": "row",
                "children": [
                  {
                    "component": "dispatch-action",
                    "options": {
                      "kind": "like",
                      "dispatchId": "{dispatch.id}",
                      "color": "#fff",
                      "size": "24px"
                    }
                  },
                  {
                    "component": "dispatch-action",
                    "options": {
                      "kind": "bookmark",
                      "dispatchId": "{dispatch.id}",
                      "color": "#fff",
                      "size": "24px"
                    }
                  },
                  {
                    "component": "dispatch-action",
                    "options": {
                      "kind": "share",
                      "dispatchId": "{dispatch.id}",
                      "color": "#fff",
                      "size": "24px"
                    }
                  }
                ]
              }
            ]
          }
        }
      ]
    }
  }
}