@joaopaulo.vieira/clappr-tvs-key-mapping-plugin

Clappr TVs key mapping plugin

Table of Contents

• Features
• Usage
• Configuration
• API Documentation
• Development

Features

🧙 One plugin to rule them all (remote controls)

Most smart TV platforms implement their own key code for their remote controls. With this plugin, you can guarantee that the wanted action for one button is consistent through all mapped devices.

🎬 Clappr events FTW!

When the key of the mapped device is pressed, the plugin triggers one Clappr event with the key name on core(CORE_SMART_TV_KEY_PRESSED) and container(CONTAINER_SMART_TV_KEY_PRESSED) scope. This flow allows you to listen to one of those events and do what you want based on the returned key name.

🔍 console.log for the rescue

Enable/disable log dynamically to check the key code and key name of each remote control key (and find out if the key is not mapped too!). The log uses Clappr.Log feature and is printed on the INFO level.

Usage

You can use it from JSDelivr:

https://cdn.jsdelivr.net/npm/@joaopaulo.vieira/clappr-tvs-key-mapping-plugin@latest/dist/clappr-tvs-key-mapping-plugin.min.js

or as an npm package:

# Using yarn
yarn add @joaopaulo.vieira/clappr-tvs-key-mapping-plugin

# Using npm
npm i @joaopaulo.vieira/clappr-tvs-key-mapping-plugin

Then just add the Watcher into the list of plugins of your player instance and set the device name to watch on tvsKeyMapping.deviceToMap config:

var player = new Clappr.Player({
  source: 'http://your.video/here.mp4',
  plugins: [TVsKeyMappingPlugin.Watcher],
  tvsKeyMapping: { deviceToMap: 'browser' },
});

Configuration

The options for the plugin go in the tvsKeyMapping property as shown below:

var player = new Clappr.Player({
  source: 'http://your.video/here.mp4',
  plugins: [TVsKeyMappingPlugin.Watcher],
  tvsKeyMapping: {
    deviceToMap: 'browser',
  },
});

deviceToMap {String}

This config is mandatory for the plugin. The name needs to be one of the currently mapped devices. The current mapped devices names are below:

Name	Device
browser	This option is for test the plugin on a desktop device in any web browser.
samsung_tizen	Samsung smart TVs with Tizen OS (>= 2015 launch year).
samsung_orsay	Samsung smart TVs with Orsay OS (<= 2014 launch year).
lg_webos	LG smart TVs with WebOS (>= 2014 launch year).
panasonic	Panasonic smart TVs.

API Documentation

Plugin API

method	arguments	description
plugin.start	device	Adds a listener for remote control keydown events of the mapped device to send the key name on the Clappr events.
plugin.stop		Removes listener for remote control keydown events.
plugin.enableLog		Adds a listener for remote control keydown events of the mapped device to log remote control key data.
plugin.disableLog		Removes listener for remote control keydown events that logging remote control key data.

Development

Install dependencies: npm install

Run: npm start

Test: npm test

Lint: npm run lint

Build: npm run build

Minified version: npm run release