🀞 TV Controller JavaScript

A lightweight focus management library for Smart TV apps. Navigate with remote controls using simple HTML attributes. In projects where you want TV support, instead of writing long HTML and JavaScript code, you can provide TV hardware support to your project in a simple way using only HTML attributes.

Installation

npm install tvcontroller-javascript

Quick Start

import { tvController } from "tvcontroller-javascript";

tvController().init();

.tv-focused {
  border: 3px solid #ff0000;
  transform: scale(1.1);
  transition: all 200ms ease;
}

<button tv-focus="true" tv-enter="playVideo()">
  ▶ Play Movie
</button>

Attributes

| Attribute | Description | |-----------|-------------| | tv-focus="true" | Makes element focusable | | tv-enter="..." | Runs on OK/Enter press | | tv-focused="..." | Runs when focused | | tv-back="..." | Runs on Back press |

Examples

Movie Grid

<div class="movie-card" tv-focus="true" tv-enter="playMovie('stranger-things')">
  <img src="movie.jpg" alt="Movie">
</div>

Menu

<div tv-focus="true" tv-enter="navigateToHome()">Home</div>
<div tv-focus="true" tv-enter="navigateToMovies()">Movies</div>
<div tv-focus="true" tv-enter="navigateToSettings()">Settings</div>

Player Controls (example bu arada)

<button tv-focus="true" tv-enter="togglePlay()">⏯ Play/Pause</button>
<button tv-focus="true" tv-enter="rewind()">⏪ -10s</button>
<button tv-focus="true" tv-enter="forward()">⏩ +10s</button>

Style Examples

/* Glow effect */
.tv-focused {
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
}

/* Slide effect */
.tv-focused {
  transform: translateX(10px) scale(1.05);
}

Controls

• Arrow Keys: Navigate
• Enter/OK: Select
• Back: Go back

Compatible With

Samsung Tizen, LG webOS, Android TV, Fire TV, and more.

License

MIT

⭐ Star us on GitHub if you find this useful! From AnarLabs❤️