未加星标

How we brought the Dailymotion UWP app to Xbox One with Windows 10

字体大小 | |
[系统(windows) 所属分类 系统(windows) | 发布者 店小二05 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏

This presentation was given during the event Microsoft Experiences' 16 in Paris France on October 5th 2016.

Microsoft Experiencesis a 2 day event in Paris, France held every year at the Palais des Congrès de Paris. The event is composed of business sessions on the first day and technical sessions on the other, during these 2 days, over 300 sessions were made by more then 650 speakers .

This article is a transcript done for those of you who couldn't attend the presentation, don't speak French or just really liked it and want to look at it again and maybe get inspired by some of the code examples I provide.


How we brought the Dailymotion UWP app to Xbox One with Windows 10
How we brought the Dailymotion UWP app to Xbox One with Windows 10
*As well as working for dailymotion, one of the largest video streaming platform's in the world as Lead windows Software Engineer, I'm also an MVP for Microsoft. *
How we brought the Dailymotion UWP app to Xbox One with Windows 10
We at dailymotion have decided to follow the Microsoft UWP journey and thus have developped one application that runs on all 3 platforms Desktop / Mobile / Xbox One . We have one code base that runs on all 3 platforms and each platform has its own specific views when necessary (for example: the video page).
How we brought the Dailymotion UWP app to Xbox One with Windows 10

Above are the four topics that we will look at.


How we brought the Dailymotion UWP app to Xbox One with Windows 10
How we brought the Dailymotion UWP app to Xbox One with Windows 10
Your Xbox One users will probably not have a mouse and keyboard, however they will all have a Gamepad or a Remote your application must be navigable with these two new input devices.
How we brought the Dailymotion UWP app to Xbox One with Windows 10
Here is an example of how we at dailymotion have mapped the buttons on the Gamepad/Remote to different functions in our application.

For example on the Gamepad/Remote:

The Menu button opens and closes the menu in our dailymotion application

The B button allows the user to go back to the previous action

The Y button allows the user to go to the search view
How we brought the Dailymotion UWP app to Xbox One with Windows 10
By default your UWP will be in mouse mode, I HIGHLY recommend to turn this mode off and make your Xbox One app compatible with the Gamepad/Remote.

When porting your application to Xbox One, one of your most important tasks will be to make the Gamepad and Remote 100% functional for your app.


How we brought the Dailymotion UWP app to Xbox One with Windows 10
We won't define again the definition of Focus Traps you can find it on MSDN here
How we brought the Dailymotion UWP app to Xbox One with Windows 10
Here for example we have two focus traps:

The AutoSuggestBox is a great example, this control is a focus trap because your users will have a very hard time selecting the suggestions that the control is proposing. The focus will be on the textbox of the AutoSuggestBox and you wont be able to access the listview that is just under the textbox.

The Listview will also be a trap, when that listview can do an endless loading you're going to be stuck in that control and will never be able to access the elements that are below it.

It is very important that you and your designers understand that building an application for a TV will require you to rethink the design of your app.


How we brought the Dailymotion UWP app to Xbox One with Windows 10
As said before, Listviews and Gridviews with endless loading are focus traps, you'll never be able to access the content that is below those items. Also controls with negative margins can also be focus traps.

The rule of thumb should be,if you want to have a control that is hidden then you should set the visibility property to collapsed and not set a negative margin to hide your elements.


How we brought the Dailymotion UWP app to Xbox One with Windows 10
This little snippet of code will allow you to easily be able to find where and on what your focus is.
How we brought the Dailymotion UWP app to Xbox One with Windows 10

Statetriggers can also be used to detect if you are running on a Phone, Desktop, or Xbox One. So depending on what platform you are on you can show, hide, or set elements to a specific value.


How we brought the Dailymotion UWP app to Xbox One with Windows 10
Here for example the item template is the same for all 3 platforms, we just change the width depening on which platform we are on.
How we brought the Dailymotion UWP app to Xbox One with Windows 10
How we brought the Dailymotion UWP app to Xbox One with Windows 10

The dailymotion Windows 10 application is developed using MVVM and because I prefer not to have any code behind (when possible of course) a page StateTriggers are the perfect solution for my needs.


How we brought the Dailymotion UWP app to Xbox One with Windows 10
How we brought the Dailymotion UWP app to Xbox One with Windows 10
You must be very careful with how many elements you have in your view. You can quickly end up with an elements that are not accessible because of the X-Y axis navigation in the app, that can cause certain elements to become inaccessible.
How we brought the Dailymotion UWP app to Xbox One with Windows 10
This is what happened in our application, when the default tablet app was ported to the Xbox One.

We couldn't navigate to the:

Search bar My Profile Settings Also it wasn't easy to access the Following tab

Which is not a great user experience...

Also we ended up deciding that we have way too much information for our TV users on this page.


How we brought the Dailymotion UWP app to Xbox One with Windows 10
As you can see, that's why we decided to simplify this page, here's a quick break down:

We mapped the menu button on our Gamepad to our menu on our application, this allowed us to hide the menu in our Xbox One application.

We have hidden the search box and are showing a Y image of the Y button on the Gamepad to tell our users that they can start searching by using the Y button.

We have changed our Listview to a horizontal orientation so that users can more easily navigate inside the application.

Our thumbnails are bigger so that users can better see them.


How we brought the Dailymotion UWP app to Xbox One with Windows 10
On our video page which is the most important view in our application, we again have too many elements for a TV user.

For example with the Gamepad and Remote we were unable to select the send video to full screen button, thus making it not the greatest user experience...

Also the play/pause button was very hard to access.


How we brought the Dailymotion UWP app to Xbox One with Windows 10
That is why we have decided that when a user goes to the video page on Xbox One he will have his video in full screen.

We decided to remove all controls/elements that are not specifically linked to watching a video. However we did keep the ability for our users to see related videos by clicking on the X button on the Gamepad.


How we brought the Dailymotion UWP app to Xbox One with Windows 10
Here's what you will see when you click on 'show more'. As you can see a user can still follow or go to a channel page and also look at the related videos.

Here are two interesting questions that we had during the session:

Do we use/support Kinect?The answer is no we do not support Kinect, and we decided to not support it because a lot a users don't have it connected and now Microsoft is not selling it with its Xbox One. However it could be a fun side feature to add during a hackathon! And yes using a UWP app you can have access to the Kinect API .

Another question was, is it possible to cast an UWP app to your Xbox One?

The answer is yes you have many different options to cast. At dailymotion we are using the DIAL protocol to broadcast a video to the Xbox One so that we can continue playing the video from the desktop/mobile to the Xbox One.

To conclude, porting your UWP app to Xbox One should be an easy experience because you should be able to reuse most of your code and most of your views. However you must know that your users will most likely not be using a keyboard and mouse and thus you must take into consideration these two new input devices.

All in all developing for Xbox One has been a great experience I have learned a lot and you will too!

Happy coding,

Damien

本文系统(windows)相关术语:三级网络技术 计算机三级网络技术 网络技术基础 计算机网络技术

主题: WindowsUWSDNHIG
分页:12
转载请注明
本文标题:How we brought the Dailymotion UWP app to Xbox One with Windows 10
本站链接:http://www.codesec.net/view/482151.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 系统(windows) | 评论(0) | 阅读(41)