How can I make the play/pause button reflect the autoplay state?

[chearmstrong]

I'm using this example to extend my movie skill, to be able to play movie trailers.

I have a basic example more or less working - and autoplay is false. However, the play/pause button doesn't reflect this. For example, I'd expect it to show the ▶️ (play arrow) ready to be played, and not the ⏸ (pause icon).

This is before I click play:

{
  "type": "APL",
  "version": "1.0",
  "theme": "dark",
  "import": [{
    "name": "alexa-viewport-profiles",
    "version": "1.0.0"
  }],
  "resources": [{
    "description": "Icon asset URLs for transport control icon buttons",
    "strings": {
      "urlPlayIcon": "https://s3.us-east-2.amazonaws.com/ryanwagn-fluid-assets/ic_transport_play_default_72dp.png",
      "urlPlayIconFocused": "https://s3.us-east-2.amazonaws.com/ryanwagn-fluid-assets/ic_transport_play_focused_72dp.png",
      "urlPauseIcon": "https://s3.us-east-2.amazonaws.com/ryanwagn-fluid-assets/ic_transport_pause_default_72dp.png",
      "urlPauseIconFocused": "https://s3.us-east-2.amazonaws.com/ryanwagn-fluid-assets/ic_transport_pause_focused_72dp.png"
    }
  }],
  "styles": {
    "highEmphasisIconButton": {
      "description": "voice optimized icon button style - contained",
      "values": [{
          "backgroundColor": "rgba(#FAFAFA, .20)"
        },
        {
          "when": "${state.pressed}",
          "backgroundColor": "rgba(#FAFAFA, .30)"
        },
        {
          "when": "${state.focused}",
          "backgroundColor": "#EBEDED"
        },
        {
          "when": "${state.disabled}",
          "backgroundColor": "rgba(#FAFAFA, .20)"
        }
      ]
    },
    "lowEmphasisIconButton": {
      "description": "voice optimized icon button style - image",
      "values": [{
          "backgroundColor": "rgba(#EBEDED, .17)"
        },
        {
          "when": "${state.pressed}",
          "backgroundColor": "rgba(#FAFAFA, .50)"
        },
        {
          "when": "${state.focused}",
          "backgroundColor": "#EBEDED"
        },
        {
          "when": "${state.disabled}",
          "backgroundColor": "transparent"
        }
      ]
    },
    "playPauseToggleButtonPauseImage": {
      "description": "style for pause Image in the PlayPauseToggleButton layout",
      "values": [{
          "when": "${state.checked}",
          "opacity": "0"
        },
        {
          "when": "${!state.checked}",
          "opacity": "1"
        }
      ]
    },
    "playPauseToggleButtonPlayImage": {
      "description": "style for play Image in the PlayPauseToggleButton layout",
      "values": [{
          "when": "${state.checked}",
          "opacity": "1"
        },
        {
          "when": "${!state.checked}",
          "opacity": "0"
        }
      ]
    },
    "playPauseToggleButtonContainer": {
      "description": "style for the PlayPauseToggleButton",
      "values": [{
          "when": "${state.focused}",
          "opacity": "0"
        },
        {
          "when": "${!state.focused}",
          "opacity": "1"
        }
      ]
    },
    "playPauseToggleButtonContainerFocused": {
      "description": "style for the PlayPauseToggleButton - focused mode",
      "values": [{
          "when": "${state.focused}",
          "opacity": "1"
        },
        {
          "when": "${!state.focused}",
          "opacity": "0"
        }
      ]
    }
  },
  "layouts": {
    "PlayPauseToggleButton": {
      "parameters": [
        "buttonSize",
        "componentId",
        "autoplay"
      ],
      "item": {
        "type": "TouchWrapper",
        "id": "alexaPlayPauseToggleButton",
        "height": "${buttonSize}",
        "width": "${buttonSize}",
        "onPress": {
          "type": "Parallel",
          "commands": [{
              "type": "SetState",
              "componentId": "alexaPlayPauseToggleButton",
              "state": "checked",
              "value": "${!event.source.value}"
            },
            {
              "when": "${event.source.value}",
              "type": "ControlMedia",
              "componentId": "${componentId}",
              "command": "play"
            },
            {
              "when": "${!event.source.value}",
              "type": "ControlMedia",
              "componentId": "${componentId}",
              "command": "pause"
            }
          ]
        },
        "item": {
          "type": "Frame",
          "height": "${buttonSize}",
          "width": "${buttonSize}",
          "style": "highEmphasisIconButton",
          "borderRadius": "100vw",
          "inheritParentState": true,
          "item": {
            "type": "Container",
            "height": "${buttonSize}",
            "width": "${buttonSize}",
            "inheritParentState": true,
            "items": [{
                "type": "Container",
                "height": "${buttonSize}",
                "width": "${buttonSize}",
                "inheritParentState": true,
                "style": "playPauseToggleButtonContainer",
                "id": "toggleButtonImages",
                "position": "absolute",
                "items": [{
                    "type": "Image",
                    "id": "toggleButtonPauseImage",
                    "position": "absolute",
                    "width": "${buttonSize}",
                    "height": "${buttonSize}",
                    "source": "@urlPauseIcon",
                    "scale": "best-fit",
                    "align": "center",
                    "style": "playPauseToggleButtonPauseImage",
                    "inheritParentState": true
                  },
                  {
                    "type": "Image",
                    "id": "toggleButtonPlayImage",
                    "position": "absolute",
                    "width": "${buttonSize}",
                    "height": "${buttonSize}",
                    "source": "@urlPlayIcon",
                    "scale": "best-fit",
                    "align": "center",
                    "style": "playPauseToggleButtonPlayImage",
                    "inheritParentState": true
                  }
                ]
              },
              {
                "type": "Container",
                "height": "${buttonSize}",
                "width": "${buttonSize}",
                "inheritParentState": true,
                "style": "playPauseToggleButtonContainerFocused",
                "id": "toggleButtonImagesFocused",
                "position": "absolute",
                "items": [{
                    "type": "Image",
                    "id": "toggleButtonPauseImageFocused",
                    "position": "absolute",
                    "width": "${buttonSize}",
                    "height": "${buttonSize}",
                    "source": "@urlPauseIconFocused",
                    "scale": "best-fit",
                    "align": "center",
                    "style": "playPauseToggleButtonPauseImage",
                    "inheritParentState": true
                  },
                  {
                    "type": "Image",
                    "id": "toggleButtonPlayImageFocused",
                    "position": "absolute",
                    "width": "${buttonSize}",
                    "height": "${buttonSize}",
                    "source": "@urlPlayIconFocused",
                    "scale": "best-fit",
                    "align": "center",
                    "style": "playPauseToggleButtonPlayImage",
                    "inheritParentState": true
                  }
                ]
              }
            ]
          }
        }
      }
    }
  },
  "mainTemplate": {
    "parameters": [
      "payload"
    ],
    "items": [{
      "type": "Container",
      "width": "100vw",
      "height": "100vh",
      "items": [{
          "type": "Frame",
          "width": "100vw",
          "height": "20vh",
          "backgroundColor": "black",
          "item": {
            "type": "Container",
            "width": "100vw",
            "height": "20vh",
            "alignItems": "center",
            "justifyContent": "center",
            "direction": "row",
            "items": [{
                "type": "Text",
                "height": "20vh",
                "textAlign": "center",
                "textAlignVertical": "center",
                "text": "${payload.currentView.properties.title}",
                "fontSize": "5vw",
                "fontWeight": "900",
                "color": "#FFFFFF"
              },
              {
                "type": "PlayPauseToggleButton",
                "componentId": "myVideoPlayer",
                "buttonSize": "10vh",
                "autoplay": false
              }
            ]
          }
        },
        {
          "type": "Video",
          "id": "myVideoPlayer",
          "height": "80vh",
          "width": "100vw",
          "source": "${payload.currentView.properties.trailer}",
          "onPlay": {
            "type": "SetState",
            "componentId": "alexaPlayPauseToggleButton",
            "state": "checked",
            "value": false
          },
          "onPause": {
            "type": "SetState",
            "componentId": "alexaPlayPauseToggleButton",
            "state": "checked",
            "value": true
          }
        }
      ]
    }]
  }
}

[chearmstrong]

^^^ Nevermind. So I've managed to deploy my dev skill and try it on an Echo Show - the play button now seems to be as I expect.

However, I do have a follow on question - what do I need to implement for the user to be able to start playing the trailer by voice (rather than pressing the play button)?

Thanks.