microsoft / tvhelpers

This project consists of several helper components, samples, and sample app to help you get started building applications for media, TV, and Xbox on the Universal Windows Platform for both C# and JavaScript developers.

ONLY THE SOURCE AND BINARY CODE IS LICENSED UNDER THE MIT LICENSE. ANY INCLUDED IMAGES ARE PROVIDED FOR INFORMATIONAL PURPOSES ONLY, NO FURTHER USE OR DISTRIBUTION OF THESE IMAGES IS ALLOWED.

#Copyright (c) Microsoft. All rights reserved.

This code is licensed under the MIT License (MIT). THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT. (Full license below)

TVHelpers Code Samples ver. 1.0

TVHelpers is a set of JavaScript and XAML/C# samples and libraries to help you build great Xbox One and TV experiences in JavaScript and C#. TVJS is a JavaScript library that helps you build premium UWP applications for Xbox One. TVJS includes support for automatic controller navigation, rich media playback, search and more. You can use TVJS with your Hosted Web App just as easily as with a packaged Web UWP App with full access to the Windows Runtime APIs.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

#The MIT License (MIT)

Copyright (c) 2016 Microsoft. All rights reserved.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

tvhelpers's Issues

I'm not able to run the "csharp MediaAppSample" on build 14388

I just downloaded this project as a zip from Github, and when I click on the .sln to open the project in Visual Studio 2015 it fails to load. It has the error,

The mappings for the solution could not be found.
The mappings for the solution could not be found.
The mappings for the solution could not be found.
The active solution has been temporarily disconnected from source control because the server is unavailable.

Windows SDK 14388 is the only build I can download from the Windows Insider website. And the readme says to use the 14366 build. I'm sorry if I am missing something obvious, could you please help me open your example?

Thank you

mouse pointer doesn't disappear

On Desktop Windows 10 the mouse pointer doesn't disappear after X seconds when a video is being played in full screen mode.

DirectionalNavigation does intercept first keyPress on input fields

in my hosted XBOX UWP javascript webapp, I found that <input type='text' /> fields would not bring the virtual keyboard on the first press to the A button. The second press brings it.

I figured that after calling

window.navigator.gamepadInputEmulation = "gamepad";

on the onfocus event on the fields, the first keyDown with A shows the keyboard, but once the text is typed, I can't navigate away using the controller. A workaround would be to set the property back to "keyboard", but I could not find a way to detect when the keyboard is being hidden in javascript.

Is there any way to workaround that bug? Thanks!

DirectionalNavigation: Xbox Gamepad "A" button not triggering winJS ListView's oniteminvoked event handler

When pressing the "A" button of the Xbox gamepad, the ListView tile that is in focus does not invoke the oniteminvoked event handler. However, when testing this on the computer (not Xbox) and I press the ENTER key on the keyboard, then the oniteminvoked event handler gets triggered.

The _handleKeyUpEvent() function of the DirectionalNavigation code does get called, but for some reason the following code that is called when testing on the Xbox does not invoke a call to the ListView's oniteminvoked event handler.

e.srcElement.click();

Why does it work on the PC, but not on the XboxOne?

directionalnavigation-1.0.0.0.js throws Google Closure errors

When I uses Google Closure, I get the following errors:

Error: Command failed: src/ui/directionalnavigation-1.0.0.0.js:203: ERROR - Bad type annotation. expecting a variable name in a @param tag
        * @param (optional) A rectangle to use as the source coordinates for finding the next focusable element.
                 ^

src/ui/directionalnavigation-1.0.0.0.js:204: ERROR - Bad type annotation. expecting a variable name in a @param tag
        * @param (optional) Indicates whether this focus request is allowed to propagate to its parent if we are in iframe.

I fixed locally by adding the variable names referenceRect and dontExit to the annotations:

/**
        * Executes XYFocus algorithm with the given parameters. Returns true if focus was moved, false otherwise.
        * @param direction The direction to move focus.
        * @param keyCode The key code of the pressed key.
        * @param referenceRect (optional) A rectangle to use as the source coordinates for finding the next focusable element.
        * @param dontExit (optional) Indicates whether this focus request is allowed to propagate to its parent if we are in iframe.
    **/

press 'A' button on xbox console Edge browser doesnt trigger anything

I was using exactly the same code from https://raw.githubusercontent.com/Microsoft/TVHelpers/master/tvjs/examples/DirectionalNavigation/ModalDialog/ModalDialog.html

the only different was i added <script src="gamepadtokey-1.0.0.0.js"></script> before directionalnavigation-1.0.0.0.js script tag, because i wanted to use xbox controller.

serve ModalDialog.html using a local server, then on xbox, open up edge broswer, then load ModalDialog.html (using ip address, eg: 10.10.10.123:7000/ModalDialog.html)

try to press open modal button, nothing happen.

i did some debugging, press 'A' button on controller hit line 603 from directionalnavigation-1.0.0.0.js

i did "alert(e.srcElement.outerHTML);" for debugging.
it turns out no matter where you click A, on a button or input field, the e.srcElemetn is always .
and e.srcElement.click(); would not work.

function _handleKeyUpEvent(e) {
    alert(e.srcElement.outerHTML);
    if (e.defaultPrevented) {
        return;
    }
    if (_keyCodeMap.accept.indexOf(e.keyCode) !== -1) {
        e.srcElement.click();
    }
};

i guess the problem is on the gamepadtokey.js,

function raiseEvent(name, key, keyCode) {
    var event = document.createEvent('Event');
    event.initEvent(name, true, true);
    event.key = key;
    event.keyCode = keyCode;
    document.body.dispatchEvent(event);
};

the event is always trigger from document body, not the element that you are actually on.

is it a bug? or intended?

index.txt

DirectionalNavigation event listeners for departingfocus and navigatingfocus calling wrong method

The event listeners for "departingfocus" and "navigatingfocus" in directionalnavigation-1.0.0.0.js are calling "_xyfocus" instead of "_xyFocus" (wrong casing for the method name).

Xbox Cursor not being hidden after application starts

I have previously posted this in another thread but it was a little misplaced, so i'm creating a new one.

This problem is when starting the App.

I have a UWP with a webview. When the app starts, the Xbox cursor appears and i have to press "A" in the Xbox controller to make it disappear.
If i press the "Xbox" button i go to the Xbox apps... but when i resume the app, the cursor appears again.

I have tried one suggestion that is using this: navigator.gamepadInputEmulation = "gamepad";

But with that the cursor still appears, and besides that, with this option none of the Key Events work.

Is there a way to remove it completely but still use the directional navigation, with the key events?

Thanks.

Xbox cursor appears when calling keyboard and never disappears again

Hello,

I am developing an Javascript UWP app for Xbox.
Using the directional navigation works OK until i have an input and i call the Xbox keyboard.

After that, the Xbox cursor appears and i can't find a way to hide it.
This means that all the focus stop working, and i only can navigate my app with the cursor.

Is there any solution for that?

Cannot focus some elements in Vue.js app on Xbox

My app is a Vue.js app targeting Xbox (Edge WebView). When the app loads, I'm able to focus the first navigation item, but when I navigate to new views in the Vue router, calling focus() on and element inside the new page does not focus the item. I have confirmed that when the view loads that DOM object I want to focus exists before I call focus on it.

Cursor not being hidden automatically

The mouse pointer is not being hidden after X time when a video is played, it should be.

only timeline shows when pressing button (xbox)

Hi,

When following the basic example for MediaPlayer and testing on xbox (hosted webapp), pressing the A button will bring the timeline, but nothing else appears. I'd like to give full control for the user (play/pause etc), am I missing something? I can't find methods to display the controls with js.

Thanks!

directionalNavigation loses focus loss when in UWP/XAML WebView

Hi!

I used to pack my webapp as an xbox hosted webapp, where directionalNavigation excelled.

Now I have to ship the exact same webapp but hosted in a WebView in a XAML/C# app, and it works as well, except that when the top button is focused and I press the up key on my controller, the focus is lost.
Same behavior is observed for the 4 screen boundaries; directionalNavigation seems to get tricked.
Playing around with focusRoot does not seem to solve the problem (I set it on document.body since the app is full screen).

To go a bit more in details, the XAML app is just a Grid containing the WebView and nothing else. I removed the containing Grid to let only the WebView, but this did not fix the issue.

This repo is missing important files

There are important files that Microsoft projects should all have that are not present in this repository. A pull request has been opened to add the missing file(s). When the pr is merged this issue will be closed automatically.

Microsoft teams can learn more about this effort and share feedback within the open source guidance available internally.

Merge this pull request

Focus management thinking around WinJS controls? (Pivot)

I haven't tested other controls, but researching issues around the WinJS Pivot control, I'm seeing what appears to be a pretty big disconnect between the DirectionalNavigation and the WinJS Pivot control.

Are there any guidelines or thoughts on how to make the two play nice together? Or any other WinJS controls for that matter?

Specifically, the Pivot control handles it's own focus management (selecting tabs) - but the DirectionalNavigation doesn't allow the tab focusing to happen - causing it to jump off of the Pivot control to other elements on the page.

I'm looking into the TVJS.DirectionalNavigation.enabled = false workflow at the moment, but am hoping there's already been some thinking around this and I don't have to re-invent the focus wheel.

Thoughts?

TVJS.DirectionalNavigation is undefined

I have a multi paged app. The directional JavaScript is working, but then I navigate to a new page and then back to the previous page and when I try to navigate to a new button on that page, I get a runtime error that says that TVJS.DirectionalNavigation is undefined.

Does anyone know what may be happening?

xbox one controller not working

The xbox controller isn't responding to any navigation... I'm using the examples but nothing seems to be working?

On XboxOne, the enter button seems to be extra senstive

When I test the app on the desktop, the directional navigation is just fine. However, on the XboxOne, the app seems to react to both onKeyDown and onKeyUp. So when the user presses the "A" button to select the video play/pause toggle button, the video momentarily pauses upon key down, but resumes upon key up.

Has anyone else experienced this?

XAML samples

Hi,
are there any plans to include XAML samples for Xbox One UWP in addition to the WebView one?

Thanks,
Davide

Is the manual use of FindNextFocusableElement necessary for the csharp app?

Browser hang with DirectionalNavigation and WinJS Menu

Hey Team,

I'm trying to track down a strange issue that keeps hanging my browser(s). (Chrome & Edge).

I have a react-winjs app up and running and when I use a <Menu option I'm setting the focusRoot to the menu dom element when the menu is shown, and then .focus() some <MenuItem within the menu.

Everything works great while I use the keyboard to navigate up and down within the menu, However the moment I'm either at the first menu item and try to go up, or the last menu item and press down, it sends the browser into something that feels like an infinite loop, the U.I. thread locks up and I can't get it back without killing the tab.

Have you ever run into something like this? I'm struggling to track down what's causing this or how to work around it.

I littered the DirectionalNavigation with console logs and here's an example of what I see:

1. I press a button that activates and selects the middle of 3 items in the menu.
2. I press the up key to navigate to the first menu item and and notice the key down/up events within DirectionalNavigation get a console.log
3. It's now focused on the first item in the menu and I press up again.
4. I don't get either the key down or up logs on this action and it completely hangs the browser.

Have you ever seen something like this and have any thoughts on what it could be or how to debug it?

I am happy to setup a pairing session with someone to work through it if possible as this is currently blocking my keyboard (and soon to be testing controller) focus management work for an Win10/Xbox app I'm working on.

Thoughts?

MediaPlayer/Edge possible memory leak when streaming HLS

Hi,

Some of my users experienced crashes on our xbox app. It looks like it is caused by the memory usage when streaming videos. I created a simple page, similar to the basic example, with a .m3u8 of ours to see if it was caused by something else in our webapp. The memory usage reaches 2 gigs within minutes, then 4 gigs, then crashes.

Is there something I missed? I am not sure this is the right place to report this as it happens also when using a <video> element.

Thanks for helping!

can't disable directionalNavigation on xbox UWP

I use directionalNavigation on my hosted webapp. I'd like to prevent the user from focusing away while an animation happens, so I use the following before an animation TVJS.DirectionalNavigation.enabled = false; and the same with true after the animation completed. This works when debugging on browser, but not when running on device (Xbox One S and Xbox One).

I can see there's a Windows living in the global scope, but can not find any documentation about it. Does it provide a way to block the direction input, or maybe change the repeat rate?

Let me know if I should move this question to SO or somewhere else.

No documentation for gamepadtokey-1.0.0.0.js

How exactly do I use this class?

DirectionalNavigation doesn't ensure focused item is visible

When navigating through a ListView, I have found that the focused item is not always visible.

For example, I navigate to the right, the focused item changes and eventually falls out of view, until eventually a new focused item is selected and the listView automatically scrolls to display the focused item. However, there are a number of items in the listView that were not visible when they were in focus.

Is there a way to fix this? Is there a way to set the viewable area? Is this a bug?

DirectionalNavigation doesn't provide Xbox Sounds

The tvjs version of DirectionalNavigation doesn't provide the typical "Xbox" sound effects during certain events: i.e. when an item is highlighted, when an item is pressed/selected, when an operation is exited.

Will playing XBOX sounds be added to the logic of DirectionalNavigation?

TVJS mediaplayer and the directional navigation JS doesnt work simultaneously.

I am new to the xbox development and an beginner at javascript. I am trying to build a UWP in which I want to implement the media player to my app to use the xbox keypad controls with the video playback. Also, I am using the directional navigation functions like focusableSelectors like this:

TVJS.DirectionalNavigation.focusableSelectors.push('.some_div');.

But, when I use both the library, in order:

<link rel="stylesheet" href="./lib/tvjs/MediaPlayer/mediaplayer-1.0.0.0.css">
<script src="./lib/tvjs/DirectionalNavigation/directionalnavigation-1.0.0.0.js"></script>
<script src="./lib/tvjs/MediaPlayer/mediaplayer-1.0.0.0.js"></script>

In debug it shows error
JavaScript runtime error: Unable to get property 'focusableSelectors' of undefined or null reference

Hence I am not able to use directionalnavigation specific functions.

Please help.

Question regarding DirectionalNav and initial focus.

I'm having trouble setting initial focus.

I feel like I'm calling .focus() at the right time but it just won't take focus until I navigate using the keyboard or gamepad. I really need it to set initial focus to the first video upon load but it just doesn't seem to work.

Am I missing something?

I noticed an issue relating to calling the "init()" manually, is this something I'll need to do maybe? instead of letting it default to DOMDocumentReady or whatever?

Thanks for any advice you can give!
Great work on this library!

Not seeing controls of the MediaPlayer

I am not seeing the controls for the MediaPlayer. Is there a trick in showing the buttons after instantiation?

var mediaPlayer = new TVJS.MediaPlayer(document.getElementById("myControls"));

Issue in derectionalnavigation JS lib

Init only happens on DOMContentLoaded. This works when the script is present as part of the initial page load but does not work when the script is injected in a WebView using invokeScriptAsync. Check for document ready state and if DOMContentLoaded has already fired run init.

c# samples

It seems this is primarily javascript related (the c# project is just a webview), the description makes it sound like it will include xaml samples? Is this on the roadmap or is it just a misunderstanding?

Changing appearance of focused MessageDialog button

I am using the DirectionalNavigation to get my Xbox app to shift its focus to the correct button. I am also using the Windows.UI.Popups.MessageDialog control to display an error message.

If the MessageDialog has multiple buttons, then I can use the left/right buttons to shift focus. That works but the appearance of the focused button doesn't appear very dramatic so it's not easy to know which button is in focus.

How do I ensure the buttons look differently when they are in focused? It doesn't seem like the buttons are affected by any CSS files.

This repo is missing a LICENSE file

This repository is currently missing a LICENSE file.

A license helps users understand how to use your project in a compliant manner. You can find the standard MIT license Microsoft uses at: https://github.com/microsoft/repo-templates/blob/main/shared/LICENSE.

If you would like to learn more about open source licenses, please visit the document at https://aka.ms/license (Microsoft-internal guidance).

Not seeing focus rectangle for ReactJS app insider a WebView

Repro -

1. Create (JavaScript) Hosted Web App.
2. Point to a local HTML file that hosts a WebView.
3. Point WebView to a ReactJS site.
4. Add Directional Navigation JS to container and WebView sites
5. Note that focus rectangle does not appear when navigating with Controller on Xbox with D-Pad

After pressing Xbox button, cannot interact with app anymore

After pressing the Xbox button (when the sidebar of the xbox appears and let us open other apps), and then resuming the app, we cannot interact anymore with the app.

We see that the element has focus, but no more keypress events are fired anymore.
I've tried also to set a timeout that would set a certain element with focus, but the behaviour is the same.

After pressing that Xbox button, no button work anymore, and i have to Quit the app and Launch it again.

Is there anyway to resolve this?

Regards,
Daniel

DirectionalNavigation doesn't listen for back events

Should the DirectionalNavigation listen for when the user uses the Back/ESC button to back out of a pop up window or navigate back a page?

CC setting not maintained when switching to/from FullScreen

When clicking the fullscreen button to enter/exit fullscreen the CC settings are not maintained.

I can't get closed captions to work in the TVJS player... cc708. Any ideas?

All I can find is WebVTT support in the HTML5 player - but our streams are hls streams with cc708 embedded. This was supported in XBOX One ADK player... is there any way to get it working in UWP JS app?

Consider making this a npm package

Howdy y'all! Love these TVHelpers. I'm left wondering if these scripts can become a version-able package. Would be useful for a project I'm currently working on. Thanks! 😊

Question: can I use the mediaPlayer as the UI

Can I use the MediaPlayer as the UI for a different video player? I just want to use the MediaPlayer's buttons to communicate to my player's API. Is that possible?

DirectionalNavigation.js code to detect if its in a webworker throws in a webworker

The DirectionalNavigation.js code tries at one point to check if its in a webworker with if (document) but if document isn't defined then this will throw. You'd need to say something like if (root.document) which will work (after defining root). However, if DirectionalNavigation.js is now a standalone JS file then we can just tell folks not to include it in a webworker and we don't need the check for if (document) at all.

https://github.com/Microsoft/TVHelpers/blob/master/tvjs/src/DirectionalNavigation/directionalnavigation-1.0.0.0.js#L654

Improving performance / API for directional navigation

There are a few things that have made the Directional Navigation library unusable for our project, and I just thought I'd leave some notes in the hopes that maybe these could be addressed.

1. The library makes numerous calls to getBoundingClientRects on all elements, despite that being a known cause of layout thrashing - https://gist.github.com/paulirish/5d52fb081b3570c81e3a. It seems part of the reason is to handle scrolling, but then wouldn't a scroll handler better invalidate existing rects rather than re-measuring (causing thrashing) each time? As a side-note, the Edge team implementing ResizeObservers would make getting client rects much much more performant.
2. Focusable elements cannot be registered or de-registered directly (passing in DOM elements), and so make integration with systems like React poor. Instead, it seems the API only supports adding selectors to the default queryable items, and then runs querySelectorAll on all elements (?) and then filters by focusable ones. This just seems incredibly inefficient.
3. The library is automatic by default, which is less friendly to modern JS approaches. It should have a start method if automatic is to be enabled.
4. The API doesn't expose any of the XYFocus algorithm (AFAICT), so that an event listener can be added to do something based on which direction or directional attributes (or button presses) are triggered.

It looks like Directional Navigation hasn't been updated since 2016. Maybe it's time for an update?

no such interface supported

When disposing of MediaPlayer after an error in playback (the video src URL returned 404), an error "No such interface supported" is thrown in MediaPlayer.dispose() when trying to remove _errorFlyout from DOM.

Narrowed it down to line ~21231:
if (this._errorFlyout) {
this._errorFlyout.removeEventListener("beforeshow", this._handleFlyoutOpenCallbackBind);
this._errorFlyout.removeEventListener("afterhide", this._handleFlyoutCloseCallbackBind);
_Global.document.body.removeChild(this._errorFlyout); // THIS LINE THROWS
this._errorFlyout.dispose();
}

Note that after the error occurs, I replace the mediaElement with another working video, let that play, then dispose.