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

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

Microsoft Experiences is 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.

Dailymotion Dailymotion *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. *

Dailymotion 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).

Dailymotion

Above are the four topics that we will look at.

Dailymotion

Dailymotion 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.

Dailymotion 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

Dailymotion 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.

Dailymotion We won't define again the definition of Focus Traps you can find it on MSDN here

Dailymotion 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.

Dailymotion 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.

Dailymotion This little snippet of code will allow you to easily be able to find where and on what your focus is.

Dailymotion

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.

Dailymotion 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.

Dailymotion

Dailymotion

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.

Dailymotion

Dailymotion 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.

Dailymotion 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.

Dailymotion 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.

Dailymotion 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.

Dailymotion 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.

Dailymotion 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