karaoke-apl11.json

{
  "document": {
    "type": "APL",
    "version": "1.4",
    "settings": {},
    "theme": "dark",
    "import": [],
    "resources": [],
    "styles": {},
    "onMount": [],
    "graphics": {},
    "commands": {
      "Highlight": {
        "parameters": [
          "tokens",
          {
            "name": "index",
            "type": "number",
            "default": "0"
          }
        ],
        "commands": [
          {
            "type": "SetValue",
            "componentId": "tokens",
            "property": "token",
            "value": "${index}"
          },
          {
            "when": "${index < tokens.length}",
            "type": "Sequential",
            "commands": [
              {
                "type": "Idle",
                "delay": "${tokens[index].minimumDwellTime || 500}"
              },
              {
                "type": "Highlight",
                "index": "${index + 1}",
                "tokens": "${tokens}"
              }
            ]
          }
        ]
      }
    },
    "layouts": {},
    "mainTemplate": {
      "parameters": [
        "payload"
      ],
      "items": [
        {
          "type": "Container",
          "id": "tokens",
          "direction": "row",
          "bind": [
            {
              "name": "token",
              "type": "number",
              "value": "-1"
            }
          ],
          "onMount": [
            {
              "type": "Highlight",
              "tokens": "${payload.currentView.properties.tokens}"
            }
          ],
          "wrap": "wrap",
          "data": "${payload.currentView.properties.tokens}",
          "items": [
            {
              "color": "${index == token ? 'red' : 'white'}",
              "type": "Text",
              "spacing": "10dp",
              "text": "${data.value}"
            }
          ]
        }
      ]
    }
  },
  "datasources": {
    "currentView": {
      "type": "object",
      "properties": {
        "tokens": [
          {
            "value": "Lorem"
          },
          {
            "value": "ipsum"
          },
          {
            "value": "dolor"
          },
          {
            "value": "sit",
            "minimumDwellTime": 300
          },
          {
            "value": "amet,",
            "minimumDwellTime": 300
          },
          {
            "value": "consetetur",
            "minimumDwellTime": 800
          },
          {
            "value": "sadipscing",
            "minimumDwellTime": 800
          },
          {
            "value": "elitr"
          }
        ]
      }
    }
  },
  "sources": {}
}