Clappr TVs key mapping plugin
Table of Contents
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