Skip to content

Instantly share code, notes, and snippets.

@Kram42

Kram42/Video_With_Overlay.json Secret

Last active February 4, 2020 14:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Kram42/12c5fa3d5372066444213207049a506e to your computer and use it in GitHub Desktop.
Save Kram42/12c5fa3d5372066444213207049a506e to your computer and use it in GitHub Desktop.
Download ZIP
Modified fireTV video player json - attempting to create overlay
Raw
Video_With_Overlay.json
{
"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"
}
]
},
"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"
}
]
},
"overlayContainer": {
"description": "Styling for overlay as a whole.",
"values": [
{
"when": "${state.checked}",
"opacity": "1"
},
{
"when": "${!state.checked}",
"opacity": "0"
}
]
},
"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"
],
"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": "SetState",
"componentId": "alexaPlayPauseToggleButton",
"state": "disabled",
"value": "false"
},
{
"type": "SetState",
"componentId": "alexaOverlayToggle",
"state": "checked",
"value": "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": "http://techslides.com/demos/sample-videos/small.mp4",
"scale": "best-fill"
},
{
"type": "TouchWrapper",
"id": "alexaOverlayToggle",
"width": "100%",
"height": "100%",
"position": "absolute",
"onPress": [
{
"type": "Parallel",
"commands": [
{
"type": "SetState",
"componentId": "alexaOverlayToggle",
"state": "checked",
"value": "${!event.source.value}"
},
{
"type": "SetState",
"componentId": "alexaPlayPauseToggleButton",
"state": "disabled",
"value": "${event.source.value}"
}
]
}
],
"item": {
"type": "Container",
"width": "100%",
"height": "100%",
"inheritParentState": true,
"style": "overlayContainer",
"items": [
{
"type": "Frame",
"width": "100%",
"height": "100%",
"backgroundColor": "#333841",
"opacity": "0.2",
"position": "absolute",
"inheritParentState": true
},
{
"type": "Container",
"width": "100%",
"height": "100%",
"alignItems": "center",
"position": "absolute",
"inheritParentState": true,
"item": [
{
"type": "Text",
"height": "20vh",
"textAlign": "center",
"text": "This is an example title.",
"fontWeight": "900",
"color": "#FFFFFF",
"width": "40%",
"style": "titleText"
},
{
"type": "PlayPauseToggleButton",
"buttonSize": "15vh",
"componentId": "myVideoPlayer"
}
]
}
]
}
}
]
}
]
}
]
}
]
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment