{
    "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": [{
                    "when": "${!state.checked}",
                    "backgroundColor": "transparent"
                },
                {
                    "when": "${state.checked}",
                    "backgroundColor": "rgba(#FAFAFA, .20)"
                },
                {
                    "when": "${state.pressed}",
                    "backgroundColor": "rgba(#FAFAFA, .30)"
                }
            ]
        },
        "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",
                "position": "absolute",
                "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": "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": "toggleButtonPlayImageFocused",
                                    "position": "absolute",
                                    "width": "${buttonSize}",
                                    "height": "${buttonSize}",
                                    "source": "@urlPlayIconFocused",
                                    "scale": "best-fit",
                                    "align": "center",
                                    "style": "playPauseToggleButtonPlayImage",
                                    "inheritParentState": true
                                }]
                            }
                        ]
                    }
                }
            }
        }
    },
    "mainTemplate": {
        "parameters": [
            "datasource"
        ],
        "items": [{
            "type": "Container",
            "width": "100vw",
            "height": "100vh",
            "justifyContent": "center",
            "items": [{
                    "type": "TouchWrapper",
                    "id": "videoWideToggleButton",
                    "width": "100vw",
                    "height": "100vh",
                    "onPress": {
                        "type": "Parallel",
                        "commands": [{
                                "type": "SetState",
                                "componentId": "videoWideToggleButton",
                                "state": "checked",
                                "value": "${!event.source.value}"
                            },
                            {
                                "when": "${event.source.value}",
                                "type": "ControlMedia",
                                "componentId": "myVideoPlayer",
                                "command": "play"
                            },
                            {
                                "when": "${!event.source.value}",
                                "type": "ControlMedia",
                                "componentId": "myVideoPlayer",
                                "command": "pause"
                            }
                        ]
                    },
                    "items": [{
                        "type": "Video",
                        "position": "absolute",
                        "height": "100vh",
                        "width": "100vw",
                        "id": "myVideoPlayer",
                        "source": "https://yourServer/video.mp4",
                        "onPlay": {
                            "type": "SetState",
                            "componentId": "alexaPlayPauseToggleButton",
                            "state": "checked",
                            "value": false
                        },
                        "onPause": {
                            "type": "SetState",
                            "componentId": "alexaPlayPauseToggleButton",
                            "state": "checked",
                            "value": true
                        }
                    }]
                },
                {
                    "type": "PlayPauseToggleButton",
                    "buttonSize": "30vh",
                    "alignSelf": "center",
                    "componentId": "myVideoPlayer",
                    "autoplay": true
                }
            ]
        }]
    }
}