Navigation Plugin

TV platforms

DIVA Navigation Plugin

The DIVA Navigation plugin is a library of react components and hooks to implement navigation and main interactions on TVs.

Installation

1. Add @deltatre-vxp:registry=https://npm.pkg.github.com to your .npmrc file
2. Install the SDK

      npm install --save-dev @deltatre-vxp/diva-plugin-webtv-navigation

Usage

Web TV

import { useNavigation, useRootNavigation, RootNavigation, FocusElement } from "@deltatre-vxp/diva-plugin-webtv-navigation/{platform}";
import "@deltatre-vxp/diva-plugin-webtv-navigation/{platform}/index.min.css";

where the

• platform is: tizen, webos, webos720p, generic (browsers)

const useNavControl = ({ navigationActive, handleExit }: Props) => {
	const navigation = useNavigation();
	useRootNavigation(navigation, navigationActive, deviceModel.keys, handleExit);
};

const NavControl = ({ children, navigationActive, handleExit }: Props) => {
	useNavControl({
		children,
		navigationActive,
		handleExit,
	});
	return <>{children}</>;
};

const App = ()=>{
    return (
        <RootNavigation>
            <NavControl 
                navigationActive={navigationAppActive} 
                handleExit={handleExit}
            >
                <>
                    <FocusElement 
                        focusKey="EXAMPLE" 
                        focusable 
                        onEnterPress={()=>{
                            console.log("example")
                        }} 
                        classNameF={classNameF}
                    >
                        Example
                    </FocusElement>
                    <FocusElement 
                        focusKey="EXAMPLE_2" 
                        focusable 
                        onEnterPress={()=>{
                            console.log("example 2")
                        }} 
                        classNameF={classNameF}
                    >
                        Example 2
                    </FocusElement>
                </>
            </NavControl>
        </RootNavigation>
    )
}