{
  "version": 1,
  "state": {
    "title": "night drive",
    "artist": "example artist",
    "track": "track-1",
    "playback": {
      "position": 30,
      "duration": 240,
      "at": 0,
      "rate": 1
    },
    "queue": [
      "next song",
      "another song"
    ]
  },
  "styles": {
    "heading": {
      "fontSize": 20,
      "fontWeight": "bold"
    },
    "secondary": {
      "fontSize": 14,
      "color": "muted"
    }
  },
  "actions": {
    "play": {
      "type": "bot",
      "audience": "chat_members",
      "context": {
        "bind": "track"
      }
    },
    "pause": {
      "type": "bot",
      "audience": "chat_members",
      "context": {
        "bind": "track"
      }
    },
    "seek": {
      "type": "bot",
      "audience": "chat_members",
      "context": {
        "bind": "track"
      }
    },
    "queue": {
      "type": "command",
      "audience": "chat_members",
      "command_id": "queue-command"
    }
  },
  "root": {
    "id": "player",
    "type": "column",
    "children": [
      {
        "id": "header",
        "type": "row",
        "children": [
          {
            "id": "cover-placeholder",
            "type": "icon",
            "props": {
              "name": "music",
              "label": "music"
            }
          },
          {
            "id": "metadata",
            "type": "column",
            "style": {
              "grow": 1,
              "gap": 4
            },
            "children": [
              {
                "id": "title",
                "type": "text",
                "style_ref": "heading",
                "props": {
                  "text": {
                    "bind": "title"
                  }
                }
              },
              {
                "id": "artist",
                "type": "text",
                "style_ref": "secondary",
                "props": {
                  "text": {
                    "bind": "artist"
                  }
                }
              }
            ]
          }
        ]
      },
      {
        "id": "seek",
        "type": "slider",
        "props": {
          "label": "playback position",
          "timeline": {
            "bind": "playback"
          },
          "action": "seek",
          "step": 1
        }
      },
      {
        "id": "controls",
        "type": "row",
        "children": [
          {
            "id": "play",
            "type": "button",
            "props": {
              "label": "play",
              "icon": "play",
              "action": "play"
            }
          },
          {
            "id": "pause",
            "type": "button",
            "props": {
              "label": "pause",
              "icon": "pause",
              "action": "pause"
            }
          },
          {
            "id": "queue-button",
            "type": "button",
            "props": {
              "label": "add to queue",
              "icon": "plus",
              "action": "queue"
            }
          }
        ]
      },
      {
        "id": "queue",
        "type": "details",
        "props": {
          "label": "up next"
        },
        "children": [
          {
            "id": "queue-list",
            "type": "list",
            "props": {
              "items": {
                "bind": "queue"
              }
            }
          }
        ]
      }
    ]
  }
}