manniru
4/21/2018 - 9:25 AM

React-TV

React-TV

import React from 'react'
import ReactTV, { Platform, renderOnAppLoaded } from 'react-tv'

import './tv.css';

class Clock extends React.Component {
  constructor() {
    super()
    this.state = { date: new Date() }
  }

  componentDidMount() {
    setInterval(() => this.setState({date: new Date()}), 1000)
  }

  render() {
    let currentPlatform = 'Browser'
    if (Platform('webos'))
      currentPlatform = 'LG WebOS'

    return (
      <div class='container'>
        <img src='https://i.imgur.com/9yhDR0Q.png'/>
        <h1>It's {this.state.date.toLocaleTimeString()}</h1>
        <p>You're in {currentPlatform}</p>
      </div>
    )
  }
}

const App = renderOnAppLoaded(Clock)

ReactTV.render(<App/>, document.getElementById('root'))
{
  "name": "tv",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-scripts": "1.1.4",
    "react-tv": "^0.3.4",
    "react-tv-navigation": "^0.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}