APL video doesn't work only on Echo Show 5

Question

question

Starfish Mint asked Dec 18, '19

APL video doesn't work only on Echo Show 5

Skill id: amzn1.ask.skill.5a307715-1de0-4c58-9615-20a2eb038913

We had an existing Skill to play video's from users from their linked cloud storage. This was earlier using Alexa Video interface and was working fine didn't had that good look and feel. So we upgraded the skill to APL to bring refined visual elements and better control to play videos by both voice and touch controls.

When I went through certification one of the constant feedback was that it doesn't work on Echo Show 5 and we interpreted it as an issue with delay etc as it always worked for us all the time on multiple devices including your simulators. Then in one of our submissions the skill got certified and we celebrated.

In last couple of days couple of our users complained about not able to use it on Echo Show 5 so obviously we bought Echo Show 5 and then realised all is not good. We have reverted our code to old interface to use Video Interface and as the interaction model is same there was no issue with that and now it's working again on Echo Show 5.

Now my question is, as a skill developer how many devices are we suppose to test it? As you continue to launch new devices we can't possibly test on all devices. Amazon need to have some standards across all devices. First that round device sucked our blood for any display as only on that round device text will be always distorted and expectation from developers to cater on each display type now it doesn't even work on one or the other device.

alexa skills kit apl video skill api videoapp

10 |5000

Attachments: Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Answer 1 · 2020-02-26T13:59:28Z

Gaetano@Amazon answered Feb 26, '20

Update of Feb-26-2020:

The render inconsistency has been resolved with our last OTA that all the Echo Show 5 should have already received.

Moreover, the APL document posted in the original question was missing the @hubLandscapeSmall viewport profile for the when clause (line 248).

So a combination of the OTA + the APL fix, solved the issue.

Kind regards,
Gaetano

10 |5000

Attachments: Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Answer 2 · 2019-12-20T12:58:49Z

Gaetano@Amazon answered Dec 20, '19

Hi,

thanks for reporting this.

The APL video component is supported across all the screen-enabled Echo devices.

Can you please share the APL layout that was not working on the Echo Show 5 with some steps to reproduce the issue?

This will help speed up the troubleshooting.

Kind regards,
Gaetano

3

10 |5000

Attachments: Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Starfish Mint commented · Dec 21, 2019 at 08:54 AM

See my response above and I have also attached an example response

0 ·

Starfish Mint commented · Feb 16, 2020 at 11:16 AM

Any news on this? The last communication I received from you was as below but it's still broken:

Hi,

thank you so much for all the details provided.

I was able to reproduce the issue quite consistently on an Echo Show 5. Please be ensured that all these information have been passed to the APL team that is currently looking into it.

I will get back to you as soon as possible.

Thanks for your patience.

This was a month ago. I have good things planned once it starts working on all devices but I can't put my plans to motion.

0 ·

Gaetano@Amazon ♦ Starfish Mint commented · Feb 25, 2020 at 06:09 PM

Hi,

I have replied to your contact-us case, please let me know the outcome so that I can post the solution here as well.

Thanks!

0 ·

Answer 3 · 2019-12-21T08:52:28Z

Starfish Mint answered Dec 21, '19

We have reverted our skill to old video interface as we had few grumpy customers. I can point the development version of the same skill to APL code if you would like to debug:

Here below the certification comment only for Echo Show 5 and Echo Spot. Don't worry like you I also assumed that they can't be telling me that it doesn't work only on two devices. God know how I would have fixed Amazon's issue :-)

Common issues observed on devices with display (Echo Show 5, Echo Spot)
Your skill’s video playback fails to play within 10 seconds. All videos must begin playing within 10 seconds and resume without error.

Steps To Reproduce:

User: "Alexa, open starfish video"
Skill: "Hello, Test123. Welcome to Starfish Video. You can say show and your video file name to fetch videos from your One Drive."
User: "play holiday videos"
Skill:"Here is what we have found in your One Drive. Please select one to continue

Please note that, skill fails to play video when a category is selected and instead displays only a blank screen. The same behavior is observed when tried to play other video categories as well.

Here below an example response:

{
    "version": "1.0",
    "userAgent": "ask-java/2.27.1 Java/1.8.0_201 templateResolver",
    "response": {
        "directives": [
            {
                "type": "Alexa.Presentation.APL.RenderDocument",
                "token": "videoPlayer",
                "document": {
                    "import": [
                        {
                            "name": "alexa-viewport-profiles",
                            "version": "1.0.0"
                        }
                    ],
                    "mainTemplate": {
                        "parameters": [
                            "payload"
                        ],
                        "items": [
                            {
                                "video": "${payload.video}",
                                "type": "VideoPlayer"
                            }
                        ]
                    },
                    "resources": [
                        {
                            "strings": {
                                "urlPauseIcon": "https://s3.us-east-2.amazonaws.com/ryanwagn-fluid-assets/ic_transport_pause_default_48dp.png",
                                "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",
                                "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",
                            "when": "${@viewportProfile == @hubRoundSmall}"
                        },
                        {
                            "strings": {
                                "urlPauseIcon": "https://s3.us-east-2.amazonaws.com/ryanwagn-fluid-assets/ic_transport_pause_default_72dp.png",
                                "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",
                                "urlPauseIconFocused": "https://s3.us-east-2.amazonaws.com/ryanwagn-fluid-assets/ic_transport_pause_focused_72dp.png"
                            },
                            "description": "Icon asset URLs for transport control icon buttons"
                        }
                    ],
                    "theme": "dark",
                    "styles": {
                        "playPauseToggleButtonContainerFocused": {
                            "values": [
                                {
                                    "opacity": "1",
                                    "when": "${state.focused}"
                                },
                                {
                                    "opacity": "0",
                                    "when": "${!state.focused}"
                                }
                            ],
                            "description": "style for the PlayPauseToggleButton - focused mode"
                        },
                        "highEmphasisIconButton": {
                            "values": [
                                {
                                    "backgroundColor": "rgba(#FAFAFA, .20)"
                                },
                                {
                                    "backgroundColor": "rgba(#FAFAFA, .30)",
                                    "when": "${state.pressed}"
                                },
                                {
                                    "backgroundColor": "#EBEDED",
                                    "when": "${state.focused}"
                                },
                                {
                                    "backgroundColor": "rgba(#FAFAFA, .20)",
                                    "when": "${state.disabled}"
                                }
                            ],
                            "description": "voice optimized icon button style - contained"
                        },
                        "lowEmphasisIconButton": {
                            "values": [
                                {
                                    "backgroundColor": "rgba(#EBEDED, 0.17)"
                                },
                                {
                                    "backgroundColor": "rgba(#FAFAFA, .50)",
                                    "when": "${state.pressed}"
                                },
                                {
                                    "backgroundColor": "#EBEDED",
                                    "when": "${state.focused}"
                                },
                                {
                                    "backgroundColor": "transparent",
                                    "when": "${state.disabled}"
                                }
                            ],
                            "description": "voice optimized icon button style - image"
                        },
                        "playPauseToggleButtonPauseImage": {
                            "values": [
                                {
                                    "opacity": "0",
                                    "when": "${state.checked}"
                                },
                                {
                                    "opacity": "1",
                                    "when": "${!state.checked}"
                                }
                            ],
                            "description": "style for pause Image in the PlayPauseToggleButton layout"
                        },
                        "playPauseToggleButtonPlayImage": {
                            "values": [
                                {
                                    "opacity": "1",
                                    "when": "${state.checked}"
                                },
                                {
                                    "opacity": "0",
                                    "when": "${!state.checked}"
                                }
                            ],
                            "description": "style for play Image in the PlayPauseToggleButton layout"
                        },
                        "playPauseToggleButtonContainer": {
                            "values": [
                                {
                                    "opacity": "0",
                                    "when": "${state.focused}"
                                },
                                {
                                    "opacity": "1",
                                    "when": "${!state.focused}"
                                }
                            ],
                            "description": "style for the PlayPauseToggleButton"
                        }
                    },
                    "type": "APL",
                    "version": "1.0",
                    "layouts": {
                        "VideoPlayer": {
                            "item": [
                                {
                                    "type": "Container",
                                    "items": [
                                        {
                                            "alignItems": "center",
                                            "width": "100vw",
                                            "type": "Container",
                                            "when": "${@viewportProfile == @hubRoundSmall}",
                                            "items": [
                                                {
                                                    "onPress": [
                                                        {
                                                            "arguments": [
                                                                "PreviousVideo"
                                                            ],
                                                            "type": "SendEvent"
                                                        }
                                                    ],
                                                    "item": [
                                                        {
                                                            "color": "#FFFFFF",
                                                            "width": "10vw",
                                                            "fontSize": "25dp",
                                                            "text": "&lt;",
                                                            "type": "Text",
                                                            "height": "5vh"
                                                        }
                                                    ],
                                                    "type": "TouchWrapper"
                                                },
                                                {
                                                    "componentId": "videoPlayer",
                                                    "type": "PlayPauseToggleButton",
                                                    "buttonSize": "5vh",
                                                    "autoplay": true
                                                },
                                                {
                                                    "onPress": [
                                                        {
                                                            "arguments": [
                                                                "NextVideo"
                                                            ],
                                                            "type": "SendEvent"
                                                        }
                                                    ],
                                                    "item": [
                                                        {
                                                            "color": "#FFFFFF",
                                                            "width": "10vw",
                                                            "fontSize": "25dp",
                                                            "text": ">",
                                                            "type": "Text",
                                                            "paddingLeft": "7vw",
                                                            "height": "5vh"
                                                        }
                                                    ],
                                                    "type": "TouchWrapper"
                                                }
                                            ],
                                            "justifyContent": "center",
                                            "height": "10vh",
                                            "direction": "row"
                                        },
                                        {
                                            "onEnd": [
                                                {
                                                    "arguments": [
                                                        "NextVideo"
                                                    ],
                                                    "type": "SendEvent"
                                                }
                                            ],
                                            "width": "100vw",
                                            "onPause": [
                                                {
                                                    "componentId": "alexaPlayPauseToggleButton",
                                                    "state": "checked",
                                                    "type": "SetState",
                                                    "value": true
                                                }
                                            ],
                                            "id": "videoPlayer",
                                            "source": "${video.source}",
                                            "paddingTop": "2.5vh",
                                            "type": "Video",
                                            "when": "${@viewportProfile == @hubRoundSmall}",
                                            "onPlay": [
                                                {
                                                    "componentId": "alexaPlayPauseToggleButton",
                                                    "state": "checked",
                                                    "type": "SetState",
                                                    "value": false
                                                }
                                            ],
                                            "autoplay": true,
                                            "height": "80vh"
                                        },
                                        {
                                            "alignItems": "center",
                                            "width": "100vw",
                                            "type": "Container",
                                            "when": "${@viewportProfile == @hubLandscapeMedium || @viewportProfile == @hubLandscapeLarge || @viewportProfile == @tvLandscapeXLarge}",
                                            "items": [
                                                {
                                                    "onPress": [
                                                        {
                                                            "arguments": [
                                                                "PreviousVideo"
                                                            ],
                                                            "type": "SendEvent"
                                                        }
                                                    ],
                                                    "item": [
                                                        {
                                                            "color": "#FFFFFF",
                                                            "width": "10vw",
                                                            "text": "&lt;",
                                                            "type": "Text"
                                                        }
                                                    ],
                                                    "type": "TouchWrapper",
                                                    "paddingLeft": "3vw"
                                                },
                                                {
                                                    "componentId": "videoPlayer",
                                                    "type": "PlayPauseToggleButton",
                                                    "buttonSize": "5vh",
                                                    "autoplay": true
                                                },
                                                {
                                                    "alignSelf": "center",
                                                    "paddingBottom": "1vh",
                                                    "textAlignVertical": "center",
                                                    "color": "#FFFFFF",
                                                    "textAlign": "center",
                                                    "width": "70vw",
                                                    "fontSize": "4vh",
                                                    "id": "videoPlayerTitle",
                                                    "text": "${video.title ?? state.title}",
                                                    "type": "Text",
                                                    "fontWeight": "100",
                                                    "height": "5vh"
                                                },
                                                {
                                                    "onPress": [
                                                        {
                                                            "arguments": [
                                                                "NextVideo"
                                                            ],
                                                            "type": "SendEvent"
                                                        }
                                                    ],
                                                    "item": [
                                                        {
                                                            "color": "#FFFFFF",
                                                            "text": ">",
                                                            "type": "Text"
                                                        }
                                                    ],
                                                    "type": "TouchWrapper",
                                                    "paddingLeft": "5vw"
                                                }
                                            ],
                                            "justifyContent": "start",
                                            "height": "5vh",
                                            "direction": "row"
                                        },
                                        {
                                            "onEnd": [
                                                {
                                                    "arguments": [
                                                        "NextVideo"
                                                    ],
                                                    "type": "SendEvent"
                                                }
                                            ],
                                            "width": "100vw",
                                            "onPause": [
                                                {
                                                    "componentId": "alexaPlayPauseToggleButton",
                                                    "state": "checked",
                                                    "type": "SetState",
                                                    "value": true
                                                }
                                            ],
                                            "id": "videoPlayer",
                                            "source": "${video.source}",
                                            "paddingTop": "2.5vh",
                                            "type": "Video",
                                            "when": "${@viewportProfile == @hubLandscapeMedium || @viewportProfile == @hubLandscapeLarge || @viewportProfile == @tvLandscapeXLarge}",
                                            "onPlay": [
                                                {
                                                    "componentId": "alexaPlayPauseToggleButton",
                                                    "state": "checked",
                                                    "type": "SetState",
                                                    "value": false
                                                }
                                            ],
                                            "autoplay": true,
                                            "height": "90vh"
                                        }
                                    ]
                                }
                            ],
                            "parameters": [
                                {
                                    "name": "video",
                                    "type": "any"
                                }
                            ]
                        },
                        "PlayPauseToggleButton": {
                            "item": [
                                {
                                    "onPress": [
                                        {
                                            "type": "Parallel",
                                            "commands": [
                                                {
                                                    "componentId": "alexaPlayPauseToggleButton",
                                                    "state": "checked",
                                                    "type": "SetState",
                                                    "value": "${!event.source.value}"
                                                },
                                                {
                                                    "componentId": "${componentId}",
                                                    "type": "ControlMedia",
                                                    "when": "${event.source.value}",
                                                    "command": "play"
                                                },
                                                {
                                                    "componentId": "${componentId}",
                                                    "type": "ControlMedia",
                                                    "when": "${!event.source.value}",
                                                    "command": "pause"
                                                }
                                            ]
                                        }
                                    ],
                                    "item": [
                                        {
                                            "item": [
                                                {
                                                    "inheritParentState": true,
                                                    "width": "${buttonSize}",
                                                    "type": "Container",
                                                    "items": [
                                                        {
                                                            "inheritParentState": true,
                                                            "width": "${buttonSize}",
                                                            "style": "playPauseToggleButtonContainer",
                                                            "id": "toggleButtonImages",
                                                            "position": "absolute",
                                                            "type": "Container",
                                                            "items": [
                                                                {
                                                                    "inheritParentState": true,
                                                                    "width": "${buttonSize}",
                                                                    "scale": "best-fit",
                                                                    "style": "playPauseToggleButtonPauseImage",
                                                                    "id": "toggleButtonPauseImage",
                                                                    "position": "absolute",
                                                                    "source": "@urlPauseIcon",
                                                                    "type": "Image",
                                                                    "align": "center",
                                                                    "height": "${buttonSize}"
                                                                },
                                                                {
                                                                    "inheritParentState": true,
                                                                    "width": "${buttonSize}",
                                                                    "scale": "best-fit",
                                                                    "style": "playPauseToggleButtonPlayImage",
                                                                    "id": "toggleButtonPlayImage",
                                                                    "position": "absolute",
                                                                    "source": "@urlPlayIcon",
                                                                    "type": "Image",
                                                                    "align": "center",
                                                                    "height": "${buttonSize}"
                                                                }
                                                            ],
                                                            "height": "${buttonSize}"
                                                        },
                                                        {
                                                            "inheritParentState": true,
                                                            "width": "${buttonSize}",
                                                            "style": "playPauseToggleButtonContainerFocused",
                                                            "id": "toggleButtonImagesFocused",
                                                            "position": "absolute",
                                                            "type": "Container",
                                                            "items": [
                                                                {
                                                                    "inheritParentState": true,
                                                                    "width": "${buttonSize}",
                                                                    "scale": "best-fit",
                                                                    "style": "playPauseToggleButtonPauseImage",
                                                                    "id": "toggleButtonPauseImageFocused",
                                                                    "position": "absolute",
                                                                    "source": "@urlPauseIconFocused",
                                                                    "type": "Image",
                                                                    "align": "center",
                                                                    "height": "${buttonSize}"
                                                                },
                                                                {
                                                                    "inheritParentState": true,
                                                                    "width": "${buttonSize}",
                                                                    "scale": "best-fit",
                                                                    "style": "playPauseToggleButtonPlayImage",
                                                                    "id": "toggleButtonPlayImageFocused",
                                                                    "position": "absolute",
                                                                    "source": "@urlPlayIconFocused",
                                                                    "type": "Image",
                                                                    "align": "center",
                                                                    "height": "${buttonSize}"
                                                                }
                                                            ],
                                                            "height": "${buttonSize}"
                                                        }
                                                    ],
                                                    "height": "${buttonSize}"
                                                }
                                            ],
                                            "borderRadius": "100vw",
                                            "inheritParentState": true,
                                            "width": "${buttonSize}",
                                            "style": "highEmphasisIconButton",
                                            "type": "Frame",
                                            "height": "${buttonSize}"
                                        }
                                    ],
                                    "width": "${buttonSize}",
                                    "id": "alexaPlayPauseToggleButton",
                                    "type": "TouchWrapper",
                                    "height": "${buttonSize}"
                                }
                            ],
                            "parameters": [
                                "buttonSize",
                                "componentId",
                                "autoplay"
                            ]
                        }
                    }
                },
                "datasources": {
                    "video": {
                        "image": {
                            "url": "https://Some-image"
                        },
                        "source": {
                            "url": "https://Some-url"
                        },
                        "id": 0,
                        "title": "Maddy Walking",
                        "ordinal": 1
                    }
                }
            },
            {
                "type": "Alexa.Presentation.APL.ExecuteCommands",
                "commands": [
                    {
                        "type": "ControlMedia",
                        "command": "play",
                        "componentId": "videoPlayer"
                    }
                ],
                "token": "videoPlayer"
            }
        ],
        "shouldEndSession": false
    }
}

10 |5000

Attachments: Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Answer 4 · 2020-01-09T07:50:15Z

newuser-b8adc668-1d9f-4d00-9f8f-ac53f5ff7078 answered Jan 9, '20

any solution to this? I am having the same issue

2

10 |5000

Attachments: Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Gaetano@Amazon ♦ commented · Jan 16, 2020 at 03:58 PM

Hi,

we are still working on this issue, once it's resolved, we will update this thread with the solution.

Thanks,
Gaetano

0 ·

Starfish Mint Gaetano@Amazon ♦ commented · Jan 20, 2020 at 03:54 PM

I have attached the response we are sending. I have updated the video url as they are user specific and also they expire after an hour

0 ·

videoapl.txt (30.7 KiB)

question