@enact/spotlight

Spotlight

An extensible library for 5-way navigation and focus control

Spotlight is an extensible utility that enables users to navigate applications using a keyboard or television remote control. Responding to input from the UP, DOWN, LEFT, RIGHT, and RETURN keys, Spotlight provides a navigation experience that compares favorably to that of a computer-with-mouse.

Usage

import kind from '@enact/core/kind';
import {SpotlightRootDecorator, Spottable} from '@enact/spotlight';

const MySpottableComponent = Spottable('div');

const MyApp = kind({
    name: 'MyApp',
    render: () => (<MySpottableComponent>Hello, Enact!</MySpottableComponent>)
});
const MySpotlightApp = SpotlightRootDecorator(MyApp);

See the docs for more information.

Additional Information

When using @enact/moonstone, the SpotlightRootDecorator is applied automatically by MoonstoneDecorator.

Acknowledgments

Spotlight is based on a fork of JavaScript SpatialNavigation (c) 2016 Luke Chang, under the terms of the Mozilla Public License.

Copyright and License Information

Unless otherwise specified, all content, including all source code files and documentation files in this repository are:

Copyright (c) 2012-2017 LG Electronics

Unless otherwise specified or set forth in the NOTICE file, all content, including all source code files and documentation files in this repository are: Licensed under the Apache License, Version 2.0 (the "License"); you may not use this content except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Changelog

[1.6.0] - 2017-08-04

Added

• moonstone/VideoPlayer ability to seek when holding down the right and left keys. Sensitivity can be adjusted using throttling options jumpDelay and initialJumpDelay.

• moonstone/VideoPlayer property no5WayJump to disable jumping done by 5-way

• moonstone/VideoPlayer support for the "More" button to use tooltips

• moonstone/VideoPlayer properties moreButtonLabel and moreButtonCloseLabel to allow customization of the "More" button's tooltip and Aria labels

• moonstone/VideoPlayer property moreButtonDisabled to disable the "More" button

• moonstone/Picker and moonstone/RangePicker prop aria-valuetext to support reading custom text instead of value

• moonstone/VideoPlayer methods showControls and hideControls to allow external interaction with the player

• moonstone/Scroller support for Page Up/Page Down keys in pointer mode when no item has focus

Changed

• moonstone/VideoPlayer to handle play, pause, stop, fast forward and rewind on remote controller
• moonstone/Marquee to also start when hovered if marqueeOnRender is set
• spotlight containers using a restrict value of 'self-only' will ignore leaveFor directives when attempting to leave the container via 5-way

Fixed

• moonstone/IconButton to fit image source within IconButton
• moonstone icon font sizes for wide icons
• moonstone/ContextualPopupDecorator to prefer setting focus to the appropriate popup instead of other underlying controls when using 5-way from the activating control
• moonstone/Scroller not scrolled via 5 way when moonstone/ExpandableList is opened
• moonstone/VirtualList no not let the focus move outside of container even if there are children left when navigating with 5way
• moonstone/Scrollable to update disability of paging controls when the scrollbar is set to visible and the content becomes shorter
• moonstone/VideoPlayer to focus on hover over play/pause button when video is loading
• moonstone/VideoPlayer to update and display proper time while moving knob when video is paused
• moonstone/VideoPlayer long title overlap issues
• moonstone/Panels.Header to apply marqueeOn prop to subTitleBelow and titleBelow
• moonstone/Picker wheeling in moonstone/Scroller
• moonstone/IncrementSlider and moonstone/Picker to read value changes when selecting buttons
• spotlight to not blur and re-focus an element that is already focused
• ui/PlaceholderDecorator to update bounds of Scroller when the visible state changed