-
-
Save Kram42/9ab03c8682f945a1a037627a1be54bba to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "type": "APL", | |
| "version": "1.2", | |
| "theme": "dark", | |
| "import": [ | |
| { | |
| "name": "alexa-viewport-profiles", | |
| "version": "1.1.0" | |
| } | |
| ], | |
| "resources": [ | |
| { | |
| "description": "Icon asset URLs for transport control icon buttons", | |
| "when": "${@viewportProfile == @hubRoundSmall}", | |
| "strings": { | |
| "urlPlayIcon": "https://s3.us-east-2.amazonaws.com/ryanwagn-fluid-assets/ic_transport_play_default_48dp.png", | |
| "urlPlayIconFocused": "https://s3.us-east-2.amazonaws.com/ryanwagn-fluid-assets/ic_transport_play_focused_48dp.png", | |
| "urlPauseIcon": "https://s3.us-east-2.amazonaws.com/ryanwagn-fluid-assets/ic_transport_pause_default_48dp.png", | |
| "urlPauseIconFocused": "https://s3.us-east-2.amazonaws.com/ryanwagn-fluid-assets/ic_transport_pause_focused_48dp.png" | |
| } | |
| }, | |
| { | |
| "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": { | |
| "titleText": { | |
| "description": "title text size", | |
| "values": [ | |
| { | |
| "fontSize": "3vw", | |
| "textAlignVertical": "top" | |
| }, | |
| { | |
| "when": "${@viewportProfile == @hubRoundSmall}", | |
| "fontSize": "5vw", | |
| "textAlignVertical": "center" | |
| } | |
| ] | |
| }, | |
| "navButton": { | |
| "description": "styling for next/prev buttons", | |
| "values": [ | |
| { | |
| "fontSize": "12vh", | |
| "color": "#ebeded", | |
| "textAlign": "center", | |
| "textAlignVertical": "center" | |
| }, | |
| { | |
| "when": "${state.pressed}", | |
| "color": "#FFFFFF" | |
| }, | |
| { | |
| "when": "${state.focused}", | |
| "color": "#EBEDED" | |
| } | |
| ] | |
| }, | |
| "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" | |
| } | |
| ] | |
| }, | |
| "overlayContainer": { | |
| "description": "Styling for overlay as a whole.", | |
| "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" | |
| ], | |
| "item": [ | |
| { | |
| "type": "TouchWrapper", | |
| "id": "alexaPlayPauseToggleButton", | |
| "height": "${buttonSize}", | |
| "width": "${buttonSize}", | |
| "position": "relative", | |
| "top": "22%", | |
| "disabled": true, | |
| "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" | |
| } | |
| ] | |
| }, | |
| { | |
| "type": "Idle", | |
| "delay": 1500 | |
| }, | |
| { | |
| "type": "overlaySwitch", | |
| "overlayStatus": false, | |
| "buttonDisabledStatus": true | |
| } | |
| ], | |
| "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": [ | |
| "datasource" | |
| ], | |
| "items": [ | |
| { | |
| "type": "Container", | |
| "width": "100vw", | |
| "height": "100vh", | |
| "items": [ | |
| { | |
| "type": "Frame", | |
| "width": "100%", | |
| "height": "100%", | |
| "id": "TemplateBackground", | |
| "backgroundColor": "#000000", | |
| "item": [ | |
| { | |
| "type": "Container", | |
| "width": "100%", | |
| "height": "100%", | |
| "items": [ | |
| { | |
| "type": "Video", | |
| "id": "myVideoPlayer", | |
| "width": "100vw", | |
| "height": "100vh", | |
| "autoplay": true, | |
| "source": "https://delivery.vidible.tv/video/redirect/5b634e2dbf488517fc64fbb4.mp4?bcid=5593271909eab110d8f43789&w=852&h=480&enc=mp4&domain=cdn.vidible.tv", | |
| "scale": "best-fill", | |
| "onPlay": [ | |
| { | |
| "type": "SetValue", | |
| "componentId": "loadingMessage", | |
| "property": "opacity", | |
| "value": 0 | |
| } | |
| ] | |
| }, | |
| { | |
| "type": "Text", | |
| "id": "loadingMessage", | |
| "alignSelf": "center", | |
| "position": "absolute", | |
| "text": "Loading video...", | |
| "top": "45%", | |
| "align-text": "center", | |
| "width": "100%", | |
| "background-color": "transparent", | |
| "text-align": "center" | |
| }, | |
| { | |
| "type": "TouchWrapper", | |
| "id": "alexaOverlayToggle", | |
| "width": "100%", | |
| "height": "100%", | |
| "position": "absolute", | |
| "onPress": [ | |
| { | |
| "type": "overlaySwitch", | |
| "overlayStatus": true, | |
| "buttonDisabledStatus": false | |
| }, | |
| { | |
| "type": "Idle", | |
| "delay": 1500 | |
| }, | |
| { | |
| "type": "overlaySwitch", | |
| "overlayStatus": false, | |
| "buttonDisabledStatus": true | |
| } | |
| ], | |
| "item": { | |
| "type": "Container", | |
| "width": "100%", | |
| "height": "100%", | |
| "inheritParentState": true, | |
| "style": "overlayContainer", | |
| "items": [ | |
| { | |
| "type": "Frame", | |
| "width": "100%", | |
| "height": "100%", | |
| "backgroundColor": "#333841", | |
| "opacity": "0.35", | |
| "position": "absolute", | |
| "inheritParentState": true | |
| }, | |
| { | |
| "type": "Container", | |
| "width": "100%", | |
| "height": "100%", | |
| "alignItems": "center", | |
| "position": "absolute", | |
| "inheritParentState": true, | |
| "item": [ | |
| { | |
| "when": "${@viewportProfile == @hubRoundSmall}", | |
| "type": "Text", | |
| "style": "titleText", | |
| "width": "40%", | |
| "height": "20vh", | |
| "textAlign": "center", | |
| "color": "#FFFFFF", | |
| "text": "Example title listed here.", | |
| "fontWeight": "900", | |
| "top": "10dp" | |
| }, | |
| { | |
| "when": "${@viewportProfile != @hubRoundSmall}", | |
| "type": "Text", | |
| "style": "titleText", | |
| "width": "50%", | |
| "height": "20vh", | |
| "alignSelf": "start", | |
| "textAlign": "left", | |
| "color": "#FFFFFF", | |
| "text": "Example title listed here.", | |
| "fontWeight": "900", | |
| "left": "10dp", | |
| "top": "10dp" | |
| }, | |
| { | |
| "type": "PlayPauseToggleButton", | |
| "buttonSize": "15vh", | |
| "componentId": "myVideoPlayer" | |
| }, | |
| { | |
| "type": "TouchWrapper", | |
| "id": "previousButton", | |
| "position": "absolute", | |
| "top": "20%", | |
| "left": "20dp", | |
| "width": "100dp", | |
| "height": "60%", | |
| "opacity": 1, | |
| "disabled": true, | |
| "onPress": [ | |
| { | |
| "type": "sendEvent", | |
| "arguments": [ | |
| "previous" | |
| ] | |
| }, | |
| { | |
| "type": "Idle", | |
| "delay": 2000 | |
| }, | |
| { | |
| "type": "overlaySwitch", | |
| "overlayStatus": false, | |
| "buttonDisabledStatus": true | |
| } | |
| ], | |
| "item": { | |
| "type": "Text", | |
| "height": "100%", | |
| "text": "‹", | |
| "style": "navButton", | |
| "inheritParentState": true | |
| } | |
| }, | |
| { | |
| "type": "TouchWrapper", | |
| "id": "nextButton", | |
| "position": "absolute", | |
| "top": "20%", | |
| "right": "20dp", | |
| "width": "100dp", | |
| "height": "60%", | |
| "opacity": 1, | |
| "disabled": true, | |
| "onPress": [ | |
| { | |
| "type": "sendEvent", | |
| "arguments": [ | |
| "next" | |
| ] | |
| }, | |
| { | |
| "type": "Idle", | |
| "delay": 2000 | |
| }, | |
| { | |
| "type": "overlaySwitch", | |
| "overlayStatus": false, | |
| "buttonDisabledStatus": true | |
| } | |
| ], | |
| "item": { | |
| "type": "Text", | |
| "height": "100%", | |
| "text": "›", | |
| "style": "navButton", | |
| "inheritParentState": true | |
| } | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| }, | |
| { | |
| "when": "${@viewportProfile == @hubRoundSmall}", | |
| "type": "Image", | |
| "width": "120dp", | |
| "height": "24dp", | |
| "source": "https://d2o906d8ln7ui1.cloudfront.net/placeholder_image.png", | |
| "position": "absolute", | |
| "right": "80dp", | |
| "bottom": "60dp" | |
| }, | |
| { | |
| "when": "${@viewportProfile == @hubLandscapeLarge}", | |
| "type": "Image", | |
| "width": "120dp", | |
| "height": "24dp", | |
| "source": "https://d2o906d8ln7ui1.cloudfront.net/placeholder_image.png", | |
| "position": "absolute", | |
| "right": "40dp", | |
| "bottom": "15dp" | |
| }, | |
| { | |
| "when": "${@viewportProfile != @hubLandscapeLarge && @viewportProfile != @hubRoundSmall}", | |
| "type": "Image", | |
| "width": "120dp", | |
| "height": "24dp", | |
| "source": "https://d2o906d8ln7ui1.cloudfront.net/placeholder_image.png", | |
| "position": "absolute", | |
| "right": "50dp", | |
| "bottom": "10dp" | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| }, | |
| "commands": { | |
| "overlaySwitch": { | |
| "parameters": [ | |
| "overlayStatus", | |
| "buttonDisabledStatus" | |
| ], | |
| "command": { | |
| "type": "Parallel", | |
| "commands": [ | |
| { | |
| "type": "SetState", | |
| "componentId": "alexaOverlayToggle", | |
| "state": "checked", | |
| "value": "${overlayStatus}" | |
| }, | |
| { | |
| "type": "SetState", | |
| "componentId": "alexaPlayPauseToggleButton", | |
| "state": "disabled", | |
| "value": "${buttonDisabledStatus}" | |
| }, | |
| { | |
| "type": "SetState", | |
| "componentId": "previousButton", | |
| "state": "disabled", | |
| "value": true | |
| }, | |
| { | |
| "type": "SetState", | |
| "componentId": "nextButton", | |
| "state": "disabled", | |
| "value": true | |
| } | |
| ] | |
| } | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment