react-native-tv-box

react-native-tv-box

TvBox is a custom React-Native package to help people building remote controller mobile application. A unique APIs of every french TV box is the objective of this package. It helps to focus on UI development, which should be our main goal using React-Native...ain't it?

I've developed this package to introduce my new Youtube video series about React Native, so I'd be pleased to see you support, contribute and share my work :)

Getting started

$ npm install react-native-tv-box --save

Mostly automatic installation

$ react-native link react-native-tv-box

Manual installation

iOS

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
2. Go to node_modules ➜ react-native-tv-box and add RNTvBox.xcodeproj
3. In XCode, in the project navigator, select your project. Add libRNTvBox.a to your project's Build Phases ➜ Link Binary With Libraries
4. Run your project (Cmd+R)<

Android

1. Open up android/app/src/main/java/[...]/MainActivity.java

• Add import com.reactlibrary.RNTvBoxPackage; to the imports at the top of the file
• Add new RNTvBoxPackage() to the list returned by the getPackages() method

1. Append the following lines to android/settings.gradle:

   include ':react-native-tv-box'
   project(':react-native-tv-box').projectDir = new File(rootProject.projectDir,     '../node_modules/react-native-tv-box/android')

2. Insert the following lines inside the dependencies block in android/app/build.gradle:

   compile project(':react-native-tv-box')

Windows

Read it! :D

1. In Visual Studio add the RNTvBox.sln in node_modules/react-native-tv-box/windows/RNTvBox.sln folder to their solution, reference from their app.
2. Open up your MainPage.cs app

• Add using Com.Reactlibrary.RNTvBox; to the usings at the top of the file
• Add new RNTvBoxPackage() to the List<IReactPackage> returned by the Packages method

Usage

Methods

setPlatform(platform, options)

Initialize platform (see API Support for options) and returns:

• responseCode: "0" if no error
• message: "ok" if no error
• data: Data sent to initialize platform

set({key, mode})

Send command to your box and returns:

• responseCode: "0" if no error
• message: "ok" if no error
• data: null

getStatus() - Livebox only

Ask for box status and returns:

• 'active' when box is ON
• 'standby' when box is OFF
• 'playing' when box is playing media or liveTV

getInfos() - Livebox only

Ask for box informations and returns:

• timeShiftingState: timeshift status
• playedMediaType: current media type
• playedMediaState: current media status
• playedMediaId: current channel ID
• playedMediaContextId: current media context id
• playedMediaPosition: current media position
• osdContext: Current screen
• macAddress: Device MAC address
• wolSupport: Wake-on-Lan support status
• friendlyName: Box name
• activeStandbyState: Standby status

API Support

25/07/17 Only Livebox and Freebox are currently supported

Remote keys	Alias	Livebox	Freebox
Power	power
0-9	0-9
Up arrow	up
Left arrow	left
Right arrow	right
Down arrow	down
Increase volume	vol_up
Decrease volume	vol_dwn
Previous channel	epg_up
Next channel	epg_dwn
Mute	mute
OK	ok
Back	back
Menu	menu
Play/Pause	play
Rec	rec
Fast backward	fbackward
Fast forward	fforward
Previous	prev	✗
Next	next	✗
VOD	vod		✗
Red	red	✗
Green	green	✗
Blue	blue	✗
Yellow	yellow	✗
List	list	✗
Tv	tv	✗
Swap	swap	✗
Info	info	✗
EPG	epg	✗
Mail	mail	✗
Media	media	✗
Help	help	✗
Options	options	✗
Pip	pip	✗

Example

Try TvBoxExample Application in ./Example folder

import RNTvBox from 'react-native-tv-box'

class TVBox extends React.Component {

	constructor() {
		super()

		this.state = {
			status: '',
			name: '',
		}
	}

	componentDidMount() {
		RNTvBox.setPlatform('livebox', {ip: 'http://192.168.1.13:8080'}) // set platform
			.then(res => {
				if (res.responseCode === "0" && res.message === "ok") {
					this.getStatus()
					this.getName()
				}
			})
			.catch(err => console.log(err))
	}

	getStatus() {
		RNTvBox.getStatus()
		.then(status => {
			this.setState({status: status})
		})
		.catch(err => console.error(err))
	}

	getName() {
		RNTvBox.getInfos()
		.then(infos => {
			this.setState({name: infos.friendlyName})
		})
		.catch(err => console.error(err))
	}

	render() {
		return(
			<View>
				<Text>Box: {this.state.name}</Text>
				<Text>Status: {this.state.status}</Text>
			</View>
		)
	}
}

TODO

• setPlatform() must return request state