diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1e06fb3c..4f91b9c1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,17 @@
# Changelog
+## v5.0.0
+
+*22 aug 2022*
+
+- Moved Metrological and Platform specific plugins to [metrological-sdk](https://github.com/Metrological/metrological-sdk) (Metadata, Metrics, Pin, Profile, Purchase, TV, VideoPlayer)
+- Added base 64 image support for Image plugin
+- Fixed bug in Image plugin as Img cover stretches image
+- Fixed named route property not being accessed properly
+- Added/Updated Router available methods
+- Added Accessibility plugin with support for ColorShifting (color blindness filter)
+
+
## v4.8.3
*19 apr 2022*
diff --git a/docs/_sidebar.md b/docs/_sidebar.md
index cd68414b..5d87ec9c 100644
--- a/docs/_sidebar.md
+++ b/docs/_sidebar.md
@@ -1,13 +1,13 @@
- [Getting started](/getting-started.md)
- Plugins
+ - [Accessibility](/plugins/accessibility.md)
- [Utils](/plugins/utils.md)
- [Storage](/plugins/storage.md)
- [Settings](/plugins/settings.md)
- [Log](/plugins/log.md)
- [Metadata](/plugins/metadata.md)
- [Metrics](/plugins/metrics.md)
- - [Metadata](/plugins/metadata.md)
- [Profile](/plugins/profile.md)
- [Purchase](/plugins/purchase.md)
- [Language](/plugins/language.md)
diff --git a/docs/changelog.md b/docs/changelog.md
index 1e06fb3c..4f91b9c1 100644
--- a/docs/changelog.md
+++ b/docs/changelog.md
@@ -1,5 +1,17 @@
# Changelog
+## v5.0.0
+
+*22 aug 2022*
+
+- Moved Metrological and Platform specific plugins to [metrological-sdk](https://github.com/Metrological/metrological-sdk) (Metadata, Metrics, Pin, Profile, Purchase, TV, VideoPlayer)
+- Added base 64 image support for Image plugin
+- Fixed bug in Image plugin as Img cover stretches image
+- Fixed named route property not being accessed properly
+- Added/Updated Router available methods
+- Added Accessibility plugin with support for ColorShifting (color blindness filter)
+
+
## v4.8.3
*19 apr 2022*
diff --git a/docs/getting-started.md b/docs/getting-started.md
index d017cbec..95e2b5c3 100644
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@@ -30,7 +30,7 @@ Next you can run the `lng build` and `lng serve` commands to build the blueprint
During development you might prefer using the `lng dev` command, which builds and launches your App, and then keeps watching for changes to automatically rebuild.
-Whenever you want to review this documentation, you can run `lng docs` in the root of a project. This will open up the documention for the Lightning-SDK version used in that project.
+Whenever you want to review this documentation, you can run `lng docs` in the root of a project. This will open up the documentation for the Lightning-SDK version used in that project.
## Fonts
diff --git a/docs/index.md b/docs/index.md
index bf296b82..c8b66d24 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -6,20 +6,33 @@ The Reference Documentation for Lightning SDK contains detailed descriptions of
The available Lightning SDK plugins are, in alphabetical order:
+
+* [Colors](plugins/colors.md)
* [FPS Counter](plugins/fpscounter.md)
* [Image](plugins/image.md)
* [Language](plugins/language.md)
* [Lightning](plugins/lightning.md)
* [Log](plugins/log.md)
+* [Metadata](plugins/metadata.md)
* [Metrics](plugins/metrics.md)
* [Pin](plugins/pin.md)
* [Profile](plugins/profile.md)
* [Purchase](plugins/purchase.md)
* [Registry](plugins/registry.md)
* [Router](plugins/router/index.md)
+ * [Configuration](plugins/router/configuration.md)
+ * [Navigation](plugins/router/navigation.md)
+ * [Data Providing](plugins/router/dataproviding.md)
+ * [Router Events](plugins/router/events.md)
+ * [Page Transitions](plugins/router/pagetransitions.md)
+ * [Widgets](plugins/router/widgets.md)
+ * [Settings](plugins/router/settings.md)
+ * [Deeplinking](plugins/router/deeplinking.md)
+ * [History](plugins/router/history.md)
* [Settings](plugins/settings.md)
* [Storage](plugins/storage.md)
* [TV](plugins/tv.md)
* [Utils](plugins/utils.md)
* [VersionLabel](plugins/versionlabel.md)
* [VideoPlayer](plugins/videoplayer.md)
+
diff --git a/docs/package.json b/docs/package.json
index 081b232f..ff80d5f8 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,6 +1,6 @@
{
"name": "@lightningjs/sdk",
- "version": "4.8.3",
+ "version": "5.0.0",
"license": "Apache-2.0",
"scripts": {
"postinstall": "node ./scripts/postinstall.js",
@@ -23,6 +23,7 @@
"dependencies": {
"@babel/polyfill": "^7.11.5",
"@lightningjs/core": "*",
+ "@metrological/sdk": "github:metrological/metrological-sdk",
"@michieljs/execute-as-promise": "^1.0.0",
"deepmerge": "^4.2.2",
"localCookie": "github:WebPlatformForEmbedded/localCookie",
diff --git a/docs/plugins/accessibility.md b/docs/plugins/accessibility.md
new file mode 100644
index 00000000..c57e16ba
--- /dev/null
+++ b/docs/plugins/accessibility.md
@@ -0,0 +1,85 @@
+# Accessibility
+
+The Accessibility plugin provides functionality to easily make your App more accessible.
+
+Currently it provides functionality to apply a **Colorshifting filter** to your App, helping people with different types of color blindness to properly use your App.
+
+## Usage
+
+The Accessibility plugin is automatically included in the root of your App. In most cases there is no need to specifically import the Accessibility plugin into your App code.
+
+## Colorshift filter
+
+When you want to apply a colorshift filter over your _entire App_, you can do so by calling the
+`colorshift` method attached to the root `application`.
+
+A reference to the root application is made available in every Lightning component (via `this.application`), allowing you to invoke this function from anywhere in your App.
+
+### colorshift
+
+Applies a color filter and optional _brightness_, _contrast_ and _gamma_ configuration.
+
+```js
+const type = 'deuteranopia'
+const config = {
+ brightness: 18,
+ contrast: 69,
+ gamma: 42
+}
+this.application.colorshift(type, config)
+```
+
+#### type
+
+Valid values for Colorshift types are:
+
+- `deuteranopia` (red-green, green weak)
+- `protanopia` (red-green, red weak)
+- `tritanopia` (blue-yellow)
+- `monochromacy` (grayscale)
+- `normal` (normal vision)
+
+When passing `false` the entire colorshift filter is disabled.
+
+#### config
+
+`config` is an object where the _brightness_, _contrast_ and _gamma_ of each color filter can be tweaked. The values are expected to be between `0` and `100`, and default to `50`.
+
+It's not required to pass in the entire object. Keys that are omitted are automatically assumed to have the default value (of `50`).
+
+The `normal` type color filter should be used for cases where you only want to adjust the brightness, contrast or gamma values, without applying any specific color blindness filter.
+
+
+### Advanced use
+
+The typical use of the colorshift filter is to apply it over the entire app (using `this.application.colorshift()`). But there may also be cases where you want to apply it only to a single element (for demo purposes or during in-app configuration of the color settings, for example).
+
+In this case you should import the `Accessibility` plugin into your component.
+
+```js
+import { Accessibility } from '@lightningjs/sdk'
+```
+
+Next you can use the `colorshift` method similarly to the standard use. With the exception that the first argument refers to the Lightning element you want to apply the colorshift filter to.
+
+```js
+const type = 'protanopia'
+const config = {
+ brightness: 54,
+}
+const element = this.tag('Logo')
+Accessibility.colorshift(element, type, config)
+```
+
+Important to remember is that the element you apply the colorshift filter to shouldn't already have a _shader_ applied to it, nor can it have `rtt` set to `true`. In these cases you could create a wrapper and apply the colorshift filter to the wrapper instead.
+
+
diff --git a/docs/plugins/colors/index.md b/docs/plugins/colors/index.md
deleted file mode 100644
index b0297b2d..00000000
--- a/docs/plugins/colors/index.md
+++ /dev/null
@@ -1,131 +0,0 @@
-# Colors
-
-This plugin is primarily for storing colors so you can easily access them anywhere in your project, without the hassle of remembering the actual color code or argb code. This plugin will calculate the desired color and return them in ARGB format.
-
-The plugin comes with 8 standard colors; white, black, red, green, blue, yellow, cyan, and magenta.
-
-## Usage
-
-If you want to use the Colors plugin, import it from the Lightning SDK:
-
-```js
-import { Colors } from '@lightningjs/sdk'
-```
-
-### Loading on boot
-
-You can automatically load and initialize the Colors plugin when your App boots, by specifying ‘static’ method ‘colors()’ on the App class in src/App.js.
-
-With ‘colors’ method you can return, a boolean ‘true’, an object, or a string:
-
-```js
-export default class App extends Lightning.Component {
- static colors() {
- //default
- return true
- //object
- return {
- background: '#c9deff',
- focus: '#276ee5'
- }
- //string
- return 'my/custom/colors-file.json'
- }
-}
-```
-
-### Colors file
-
-With the default, and string option during boot the Colors plugin expects a JSON file. The default option will look for a JSON file named colors.json. Or a JSON file at a custom location defined with the string option. The JSON file should look something like this:
-
-```json
-{
- "background": "#c9deff",
- "focus": "#276EE5"
-}
-```
-
-### Retrieving Colors
-
-Retrieving a color from the Colors plugin is very easy. You simply import Colors into your source file and use the following function to get the color. For example:
-
-```js
-Colors('white').get()
-```
-
-### Adjusting Color values
-
-With this plugin you can also adjust the values of a specific color before retrieving it.
-
-#### Alpha
-If you want your color to have some opacity / alpha you can use the following:
-
-```js
-Colors('red').alpha(0.4).get()
-```
-
-The parameter used in the alpha function expects a value with 0 as a minimum, and 1 as maximum value.
-
-#### Hue
-You can adjust the Hue value of your color using the following:
-
-```js
-Colors('red').hue(120).get()
-```
-
-The parameter used in the hue function expects a value with 0 as a minimum, and 360 as maximum value.
-
-
-#### Lightness
-You can adjust the Lightness value of your color using the following:
-
-```js
-Colors('green').lightness(0.3).get()
-```
-
-The parameter used in the lightness function expects a value with 0 as a minimum, and 1 as maximum value.
-
-#### Saturation
-You can adjust the Saturation value of your color using the following:
-
-```js
-Colors('blue').saturation(0.3).get()
-```
-
-The parameter used in the saturation function expects a value with 0 as a minimum, and 1 as maximum value.
-
-#### Lighter
-You can also make your color Lighter using the following:
-
-```js
-Colors('red').lighter(0.3).get()
-```
-
-The lighter function takes the current Lightness value and changes that according to the parameter.
-The parameter used in the lighter function expects a value with 0 as a minimum, and 1 as maximum value.
-
-#### Darker
-You can also make your color Darker using the following:
-
-```js
-Colors('red').darker(0.3).get()
-```
-
-The darker function takes the current Brightness value and changes that according to the parameter.
-The parameter used in the lighter function expects a value with 0 as a minimum, and 1 as maximum value.
-
-
-#### Mixing
-If you want to mix two different colors you can do it with the mix function. The first parameter can be a stored color, or an ARGB color. The second parameter is the percentage of how it is mixed, we normalized it to a value from 0 to 1.
-
-```js
-Colors('cyan').mix(Colors('magenta').get(), 0.5).get()
-```
-
-### Chaining
-
-With this plugin you can also chain functions, if for example a specific color darker and give it a specific opacity:
-
-```js
-Colors('red').darker(0.2).alpha(0.8).get()
-```
\ No newline at end of file
diff --git a/docs/plugins/metadata.md b/docs/plugins/metadata.md
index 6c4e20c8..3b0a32cb 100644
--- a/docs/plugins/metadata.md
+++ b/docs/plugins/metadata.md
@@ -4,74 +4,4 @@ If you create an App, you store the App's *metadata* (such as its name, version
The Metadata plugin enables you to use this metadata in your App. (For example, if you want to show the App's version number in an *About* window.)
-> If you deploy your App to the Metrological Store, the metadata is 'injected' into the App by the Metrological Store.
-
-## Usage
-
-If you want to access metadata in your App code directly, import the *Metadata* plugin from the Lightning SDK:
-
-```js
-import { Metadata } from '@lightningjs/sdk'
-```
-
-The SDK automatically creates the `appMetadata` from the Launch params.
-
-## Available methods
-
-### Get
-
-Returns the key value of the metadata.
-
-```js
-Metadata.get(key, [fallback])
-```
-Key can be either `icon`, `id`, `safeId`, `version`, `name`, `description`, `type`, `url` or `artwork` .
-Optionally you can specify a `fallback`-value for when the Metadata is not defined.
-
-### AppId
-
-Gets Application id from Metadata
-
-```js
-Metadata.appId()
-```
-
-### SafeAppId
-
-Returns the *safe ID* of your App. This is actually the `AppId` without dots (and any other special characters) which are are not permitted in JS variables.
-
-```js
-Metadata.safeAppId()
-```
-
-### AppName
-
-Returns the name of your App.
-
-```js
-Metadata.appName()
-```
-
-### AppVersion
-
-Returns the version of your App (without the GIT commit hash).
-
-```js
-Metadata.appVersion()
-```
-
-### AppIcon
-
-Returns the icon of your App.
-
-```js
-Metadata.appIcon()
-```
-
-### AppFullVersion
-
-Returns the full version of your App.
-
-```js
-Metadata.appFullVersion()
-```
+> Starting v5.0.0 and up, the Metadata plugin is part of the metrological-sdk.
For backwards compatibility reasons, the Lightning-SDK exports this plugin provided by the metrological-sdk. The code however is maintained here. More information on how to use this plugin can be found here.
diff --git a/docs/plugins/metrics.md b/docs/plugins/metrics.md
index f96d66e5..dde379e0 100644
--- a/docs/plugins/metrics.md
+++ b/docs/plugins/metrics.md
@@ -4,150 +4,4 @@ It is important to know how people use Apps. We can acquire this information by
Because each operator might implement these tracking metrics in a different way, the Lightning SDK provides the *Metrics* plugin. This plugin is a *generic* interface for developers, independent of any operator or platform.
-Some *standard* metrics are automatically implemented by the SDK, such as App Launch, App Loaded, App Close and various video-related [media](#media) events.
-
-You can implement additional metrics in your App. For example, when the App is 'Ready to use', or specific user interactions like 'Clicking on a button'.
-
-There are four event-related categories for sending metrics:
-
-* App
-* Page
-* User
-* Media
-
-## Usage
-
-Import the Metrics plugin in components where you want to track and send events:
-
-```js
-import { Metrics } from '@lightningjs/sdk'
-```
-
-## Available Methods
-
-### App.launch
-
-Sends a metric that the App is launched (implemented automatically by the SDK).
-
-```js
-Metrics.App.launch()
-```
-
-### App.loaded
-
-Sends a metric that the App is loaded (implemented automatically by the SDK).
-
-```js
-Metrics.App.loaded()
-```
-
-### App.ready
-
-Sends a metric that the App is ready to be used.
-
-```js
-Metrics.App.ready()
-```
-
-### App.close
-
-Sends a metric that the App is closed (implemented automatically by the SDK).
-
-```js
-Metrics.App.close()
-```
-
-### App.error
-
-Sends a metric that an error has occurred in the App.
-
-```js
-Metrics.App.error(message, code, params)
-```
-
-### App.event
-
-Sends a custom metric that is related to an App event.
-
-```js
-Metrics.App.event(name, params)
-```
-
-### Page.view
-
-Sends a metric that a page has been viewed.
-
-```js
-Metrics.page.view(name, params)
-```
-
-### Page.leave
-
-Sends a metric that a page has been left.
-
-```js
-Metrics.page.leave(name, params)
-```
-
-### Page.error
-
-Sends a metric that an error has occurred when accessing a page.
-
-```js
-Metrics.page.error(message, code, params)
-```
-
-### Page.event
-
-Sends a custom metric that is related to a Page event.
-
-```js
-Metrics.page.event(name, params)
-```
-
-### User.click
-
-Sends a metric that a user has clicked on an element.
-
-```js
-Metrics.user.click(name, params)
-```
-
-### User.input
-
-Sends a metric that a user has supplied input.
-
-```js
-Metrics.user.input(name, params)
-```
-
-### User.error
-
-Sends a metric that an error has occurred that is related to a User event.
-
-```js
-Metrics.user.error(message, code, params)
-```
-
-### User.event
-
-Sends a custom metric that is related to a User event.
-
-```js
-Metrics.user.event(name, params)
-```
-
-### Media
-
-The [VideoPlayer](videoplayer.md) plugin automatically tracks and sends video-related metrics. Each metric receives the URL and progress of the current video. The Media events that are sent as metrics are:
-
-* Media Abort
-* Media CanPlay
-* Media Ended
-* Media Pause
-* Media Play
-* Media Suspend
-* Media VolumeChange
-* Media Waiting
-* Media Seeking
-* Media Seeked
+> Starting v5.0.0 and up, the Metrics plugin is part of the metrological-sdk.
For backwards compatibility reasons, the Lightning-SDK exports this plugin provided by the metrological-sdk. The code however is maintained here. More information on how to use this plugin can be found here.
diff --git a/docs/plugins/pin.md b/docs/plugins/pin.md
index 52a906f2..5113e627 100644
--- a/docs/plugins/pin.md
+++ b/docs/plugins/pin.md
@@ -6,81 +6,4 @@ You can use the interface to check the middleware layer for the current state of
Depending on the state of the STB, you can use the Pin plugin to lock certain content or screens in your App.
-## Usage
-
-If you want to use the Pin plugin, import it from the Lightning SDK:
-
-```js
-import { Pin } from '@lightningjs/sdk'
-```
-
-## Available Methods
-
-### show
-
-Shows a standard, built-in **Pin** dialog where the user can supply a Pin code.
-
-```js
-Pin.show()
-```
-
-### hide
-
-Hides the visible **Pin** dialog.
-
-```js
-Pin.hide()
-```
-
-### submit
-
-Sends a Pin code to the middleware layer for verification. If the code is correct, the STB will be unlocked.
-
-The `submit` method accepts `pin` and `context` as it's arguments. The context argument indicates in with what purpsose the Pin dialog is being used. The accepted values van be either `parental` or `purchase`. `context` defaults to `purchase`, but it's recommended to explicitly specify the context
-
-The `submit` method is automatically invoked when you are using the built-in **Pin** dialog. Use this method for sending the Pin code *only* if you are making a fully custom **Pin** dialog in your App.
-
-```js
-Pin.submit('0000', context)
- .then(() => console.log('Unlocked!'))
- .catch(e => console.log('Pin error', e))
-```
-
-The `submit` method returns a *Promise*. If the supplied Pin code is correct (and context is valid), the Promise resolves with `true` and the STB will be unlocked. If the Pin code or context are wrong, the Promise resolves with `false`.
-
-If the middleware is unable to unlock the STB, the Promise is *rejected* (with an optional error message).
-
-During development, the default Pin code is `0000`. Optionally, you can overwrite the default Pin code during development by editing the **settings.json** file and adding the key `pin` as a Platform Setting with a different valid Pin code.
-
-### unlocked
-
-Checks if the STB is currently *unlocked*.
-
-```js
-Pin.unlocked(context)
- .then(
- unlocked => unlocked === true ?
- console.log('STB is unlocked') :
- console.log('STB is locked'))
-```
-
-The `unlocked` method returns a *Promise* which resolves with `true` if the device is *unlocked*, or with `false` if the device is *locked*.
-
-If the middleware is unable to retrieve the current state, the Promise is *rejected*.
-
-### locked
-
-Checks if the STB is currently *locked*.
-
-```js
-Pin.locked(context)
- .then(
- locked => locked === true ?
- console.log('STB is locked') :
- console.log('STB is unlocked'))
-```
-
-The `locked` method is the *exact* counterpart of the `unlocked` method. It returns a *Promise* which resolves to `true` if
-the device is *locked* or to `false` if the device is *unlocked*.
-
-If the middleware is unable to retrieve the current state, the Promise is *rejected*.
+> Starting v5.0.0 and up, the Pin plugin is part of the metrological-sdk.
For backwards compatibility reasons, the Lightning-SDK exports this plugin provided by the metrological-sdk. The code however is maintained here. More information on how to use this plugin can be found here.
diff --git a/docs/plugins/profile.md b/docs/plugins/profile.md
index 7f354120..f9cfd605 100644
--- a/docs/plugins/profile.md
+++ b/docs/plugins/profile.md
@@ -6,172 +6,4 @@ Because each operator or platform might implement user profile information in a
You can also use the Profile plugin to *update* profile information.
-> The profile information that can actually be updated, depends on the operator or platform.
-
-## Usage
-
-If you need Profile information, import the Profile plugin from the Lightning SDK:
-
-```js
-import { Profile } from '@lightningjs/sdk'
-```
-
-## Available Methods
-
-If you call one of the methods below *without* parameters, it returns the Profile information in the form of a *Promise*.
-
-If you pass parameters, the method will *attempt to update* the Profile information. The information that can actually be updated, depends on the operator / platform.
-
-### ageRating
-
-Gets the user's age rating. Returns `adult` by default during *local development*.
-
-```js
-Profile.ageRating()
-```
-
-### city
-
-Gets the user's city. Returns `New York` by default during *local development*.
-
-```js
-Profile.city()
-```
-
-### zipCode
-
-Gets the user's zip code. Returns `27505` by default during *local development*.
-
-```js
-Profile.zipCode()
-```
-
-### countryCode
-
-Gets the user's country code. Returns `US` by default during *local development*.
-
-```js
-Profile.countryCode()
-```
-
-### ip
-
-Gets the user's IP address. Returns `127.0.0.1` by default during *local development*.
-
-```js
-Profile.ip()
-```
-
-### household
-
-Gets the user's household ID. Returns `b2244e9d4c04826ccd5a7b2c2a50e7d4` by default during *local development*.
-
-```js
-Profile.household()
-```
-
-### language
-
-Gets the user's language, based on the currently set locale. During *local development*, it attempts to return the browser's language with `en` as default.
-
-```js
-Profile.language()
-```
-
-### latLon
-
-Gets the user's latitude and longitude.
-
-During *local development*, it returns the user's actual latitude and longitude from a remote API service. If unsuccessful, it defaults to `[40.7128, 74.006]`.
-
-If, during *local development*, you want to force to use the browser's built-in *geolocation* for retrieving the latitude and longitude, add the key `forceBrowserGeolocation` with the value `true` as a Platform Setting in **settings.json**.
-
-```js
-Profile.latLon()
-```
-
-### locale
-
-Gets the user's locale. During *local development*, it returns the browser's locale, with a fallback to `en-US`.
-
-```js
-Profile.locale()
-```
-
-### mac
-
-Gets the user's Mac address. Returns `00:00:00:00:00:00` by default during *local development*.
-
-```js
-Profile.mac()
-```
-
-### operator
-
-Gets the user's operator. Returns `metrological` by default during *local development*.
-
-```js
-Profile.operator()
-```
-
-### platform
-
-Gets the user's platform. Returns `metrological` by default during *local development*.
-
-```js
-Profile.platform()
-```
-
-### packages
-
-Gets the user's packages. Returns `[]` by default during *local development*.
-
-```js
-Profile.packages()
-```
-
-### uid
-
-Gets the user ID. Returns `ee6723b8-7ab3-462c-8d93-dbf61227998e` by default during *local development*.
-
-```js
-Profile.uid()
-```
-
-### stbType
-
-Gets the user's STB type. Returns `metrological` by default during *local development*.
-
-```js
-Profile.stbType()
-```
-
-## Overwriting Default Values
-
-During development you might want to test your App with different profile values (for example, a different language or age rating).
-When you want to overwrite the default values, you can do so by editing the **settings.json** file.
-Add a `profile` key in `platformSettings` and only add the values you wish to change here.
-
-```json
-{
- "platformSettings": {
- "profile": {
- "ageRating": "adult",
- "city": "New York",
- "zipCode": "27505",
- "countryCode": "US",
- "ip": "127.0.0.1",
- "household": "b2244e9d4c04826ccd5a7b2c2a50e7d4",
- "language": "en",
- "latlon": [40.7128, 74.006],
- "locale": "en-US",
- "mac": "00:00:00:00:00:00",
- "operator": "metrological",
- "platform": "metrological",
- "packages": [],
- "uid": "ee6723b8-7ab3-462c-8d93-dbf61227998e",
- "stbType": "metrological"
- }
- }
-}
-```
+> Starting v5.0.0 and up, the Profile plugin is part of the metrological-sdk.
For backwards compatibility reasons, the Lightning-SDK exports this plugin provided by the metrological-sdk. The code however is maintained here. More information on how to use this plugin can be found here.
diff --git a/docs/plugins/purchase.md b/docs/plugins/purchase.md
index b3a37f9c..f7e76544 100644
--- a/docs/plugins/purchase.md
+++ b/docs/plugins/purchase.md
@@ -2,235 +2,4 @@
You can use the Purchase plugin to integrate *in-app purchases* in your App, in combination with the Metrological Billing Server. This way, you can let customers perform transactions in Apps, and the customers can pay for the transactions via the operator’s monthly bill.
-## Usage
-
-If you want to integrate purchases in your App, import the Purchase plugin from the Lightning SDK:
-
-```js
-import { Purchase } from '@lightningjs/sdk'
-```
-
-## Available Methods
-
-### buy
-
-The `buy` method executes all the required steps to do a full purchase of an asset.
-
-> If you use this method, it is required that you have *properly configured* the Purchase plugin via the `setup` method (see [below](#setup)).
-
-In a typical, default setup, buying an asset with the Lightning SDK and the Metrological Billing Server only requires calling `Purchase.buy()`. No other calls should be necessary.
-
-The `buy` method performs the following actions:
-
-* Retrieve a signature for a given asset
-* Fire a payment request to the Metrological Billing Server
-* Attempt to register a successful purchase at the CSP backend
-* Confirm back to the Metrological Billing Server that the purchase has been registered by the CSP backend
-
-The `buy` method accepts an `assetId `(as defined by the CSP) as its first argument. For example:
-
-```js
-const assetId = '123abc'
-Purchase.buy(assetId).then(() => {
- // asset succesfully bought
-}).catch(err => {
- // some error
-})
-```
-
-> If the CSP backend does *not* completely follow the expected blueprint, or can not be configured properly via the `setup` method, the steps in the `buy` method can also be implemented *manually*. In that case, you can use the Purchase plugin methods `signature`, `payment`, `subscribe` and `confirm` (see [below](#signature)).
-
-### setup
-
-You use the `setup` method to configure the Purchase plugin for matching with a specific CSP backend setup, which is used for providing available assets and storing purchased asset records.
-
-> The `setup` method should only be called *once*, before any other Purchase plugin method is called.
-
-The `setup` method accepts a *configuration object* as its only argument. The object can have *2 keys*:
-
-* `cspUrl`: specifies the *base URL* of the backend of the CSP (Content Service Provider).
-* `endPoints`: can be used to customize those API endpoints that differ from the default specification (as outlined below). For each *endpoint* that differs from the default, you specify the *URI* (which will be appended to the `cspUrl`, unless specified as a fully qualified domain) and the REST *method* to use.
-
-If needed, you can also specify an object with custom `headers` that will be merged with the default headers (`{ Accept: 'application/json', 'Content-Type': 'application/json' }`).
-
-```js
-{
- assets: {
- uri: '/assets',
- method: 'GET',
- },
- asset: {
- uri: '/assets/:id',
- method: 'GET',
- },
- signature: {
- uri: '/assets/:id/signature',
- method: 'POST',
- },
- subscribe: {
- uri: '/assets/:id/subscribe',
- method: 'POST',
- },
- unsubscribe: {
- uri: '/assets/:id/unsubscribe',
- method: 'POST',
- },
-}
-```
-
-```js
-Purchase.setup('http://csp-backend.com/api', {
- assets: {
- uri: '/products',
- method: 'GET',
- },
- unsubscribe: {
- uri: '/subscriptions/:id',
- method: 'DELETE',
- },
- signature: {
- uri: '/assets/:id/signature',
- method: 'POST',
- headers: {
- 'x-auth-token': 'abcd123xyz'
- 'cache-control': 'no-cache'
- }
- },
-})
-```
-
-In some cases, the setup of the CSP backend differs too much from the default specification and it becomes too difficult to configure the enpoint URIs. In those cases, you can specify a *callback* instead, and handle the request to the CSP backend entirely yourself.
-
-The callback function will receive 2 arguments: `params` and `data`. It should always return a Promise which resolves with the result (or rejects with an error in case of a failure).
-
-> When a callback is specified, all other keys in the endpoint configuration are ignored.
-
-```js
-Purchase.setup('http://csp-backend.com/api', {
- asset: {
- callback(params, data) {
- return Promise((resolve, reject) => {
- Api.getAssetDetails(params.id)
- .then(resolve)
- .catch(reject)
- }
- }
- },
- signature: {
- callback(params, data) {
- return fetch('http://csp-backend.com/api/' + data.household + '?productId=' + params.id, {
- headers: {
- 'Accept': 'application/json',
- 'Content-Type': 'application/json'
- }),
- method: 'POST',
- })
- }
- },
-})
-```
-
-### assets
-
-The `assets` method returns a *Promise* with the result of the request that is made to the CSP to retrieve available assets for purchase. Typically, it returns an Array of objects containing information about the assets (such as *title*, *description* and *price*).
-
-The `household` is automatically sent as a `query param` in the request. This allows to return information on whether the assets were purchased by the current household or not.
-
-The `assets` method is an *optional* convenience method provided by the Purchase plugin. Depending on the CSP's API integration, the functionality to retrieve assets can be fully custom-implemented in your App.
-
-```js
-Purchase.assets().then(assets => {
- // do something with assets
-})
-```
-
-### asset
-
-The `asset` method returns a Promise with the result of the request to the CSP to retrieve details for a specific asset.
-
-The `household` is automatically sent as a `query param` in the request. This allows to return information on whether the asset was purchased by the current household or not.
-
-The `asset` method is an *optional* convenience method provided by the Purchase plugin. Depending on the CSP's API integration, the functionality to retrieve an asset can be fully custom-implemented in your App.
-
-```js
-const assetId = '123abc'
-Purchase.asset(assetId).then(assets => {
- // do something with assets
-})
-```
-
-### signature
-
-To make a payment request to the Metrological Billing Server, the CSP must provide a *signed signature*.
-
-The `signature` method returns a *Promise* with the result of the request made to the CSP to retrieve that signature. It accepts the `id` of the asset to purchase as its argument.
-
-The `household` value is automatically added as a `query param` in the request.
-
-The `signature` method is an *optional* convenience method provided by the Purchase plugin. Depending on the CSP's API integration, the functionality to generate a purchase signature can be fully custom-implemented in your App.
-
-```js
-const assetId = '123abc'
-Purchase.signature(assetId).then(signature => {
- // call Purchase.payment() with signature
-})
-```
-
-### payment
-
-The `payment` method calls the Metrological Billing Server to execute a purchase. It accepts a *valid signature* (as retrieved from the CSP) as its argument.
-
-The method returns a *Promise*. If successful, the Promise resolves to a transaction object (that can be stored on the CSP side). If not, it rejects with an error code in case of a failure.
-
-```js
-const signature = {} // received from Payment.signature()
-Purchase.payment(signature).then(() => {
- // call Payment.subscribe()
-})
-```
-
-### subscribe
-
-After a successful transaction, the CSP stores the purchase on their system. Especially in the case of recurring subscriptions, where storing the purchase is essential.
-
-The `subscribe` method returns a *Promise* with the result of the request made to the CSP to register the purchase. It accepts the `id` of the purchased asset as its first argument, and the `transaction` object as received from the Metrological Billing Server (via `Purchase.payment()`) as its second argument.
-
-The `subscribe` method is an *optional* convenience method provided by the Purchase plugin. Depending on the CSP's API integration, the functionality to register a purchase can be fully custom-implemented in your App.
-
-```js
-const assetId = '123abc'
-const transaction = {} // received from Purchase.payment()
-Purchase.subscribe(assetId, transaction).then(() => {
- // call Purchase.confirm()
-})
-```
-
-### confirm
-
-The `confirm` method calls the Metrological Billing Server to confirm a purchase. It accepts a `transactionId` (which is available inside the transaction object that is returned by a successful `payment` request) as its argument.
-
-Calling the method notifies the Metrological Billing Server that the CSP has received *and* stored the purchase on the CSP's backend.
-
-The method returns a *Promise* which resolves in case of a successful confirmation. If the `transactionId` is not valid, the Promise is rejected.
-
-```js
-const transaction = {} // received from Purchase.payment()
-Purchase.subscribe(transaction.transactionId).then(() => {
- // full purchase flow done
-})
-```
-
-### unsubscribe
-
-Since the CSP is responsible for renewing subscriptions in the context of the Metrological Billing Server, the CSP must be able to handle *cancellations of recurring purchases*.
-
-The `unsubscribe` method returns a *Promise* with the result of the request made to the CSP to unsubscribe from a recurring purchase. It accepts the `id` of the purchased asset as its first argument.
-
-The `unsubscribe` method is an *optional* convenience method provided by the Purchase plugin. Depending on the CSP's API integration, the functionality to cancel recurring purchases can be fully custom-implemented in your App.
-
-```js
-const assetId = '123abc'
-Purchase.unsubscribe(assetId).then(() => {
- // unsubscribed
-})
-```
+> Starting v5.0.0 and up, the Purchase plugin is part of the metrological-sdk.
For backwards compatibility reasons, the Lightning-SDK exports this plugin provided by the metrological-sdk. The code however is maintained here. More information on how to use this plugin can be found here.
diff --git a/docs/plugins/registry.md b/docs/plugins/registry.md
index 3b8f56af..305674aa 100644
--- a/docs/plugins/registry.md
+++ b/docs/plugins/registry.md
@@ -86,7 +86,7 @@ Registry.clearInterval(intervalId)
### clearIntervals
-Cancesl *all* running intervals and prevents them from being executed.
+Cancels *all* running intervals and prevents them from being executed.
```js
Registry.clearIntervals()
diff --git a/docs/plugins/router/configuration.md b/docs/plugins/router/configuration.md
index 48342872..77de2b74 100644
--- a/docs/plugins/router/configuration.md
+++ b/docs/plugins/router/configuration.md
@@ -2,11 +2,10 @@
The Router plugin can be configured by passing a *configuration object* to the `Router.startRouter()` method. This method is typically called in the `_setup`[lifecycle event](../../../lightning-core-reference/Components/LifecycleEvents.md) in **App.js**.
-The configuration object can contain six different *keys*, each of which is described below:
+The configuration object can contain five different *keys*, each of which is described below:
* [root](#root)
* [boot](#boot)
-* [bootComponent](#bootcomponent)
* [beforeEachRoute](#beforeeachroute)
* [afterEachRoute](#aftereachroute)
* [routes](#routes)
@@ -91,31 +90,6 @@ export default {
}
```
-### bootComponent
-
-If you want to display a **Splash** or **Loading** screen while the Router is booting (and *before* the actual routing process kicks in), you can specify a Lightning Component in the `bootComponent` key of the configuration object.
-
-The component is not only displayed when you open the root of your App, but also when you open a [deeplinked](deeplinking.md) location in the App.
-
-```js
-import { Splash } from './pages',
-
-export default {
- boot: () => {
- return new Promise(resolve => {
- Api.getToken().then(() => {
- resolve();
- })
- })
- },
- bootComponent: Splash,
- routes:[...]
-}
-```
-
-> Since the `boot` component might show an animation that takes some time to finish, the Router plugin does not hide
-the `boot` component automatically. Instead, you have to *explicitly* call `Router.resume()` in your `boot` component to give control back to the Router plugin.
-
### beforeEachRoute
The `beforeEachRoute` key is a global hook that is invoked right after starting a `navigate` to a route.
@@ -176,16 +150,16 @@ If you want to pass parameters, the hook must return an *object*:
## afterEachRoute
-Is a global hook that will be called after every succesfull `navigate()` request. The parameter is the resolved
+Is a global hook that will be called after every successful `navigate()` request. The parameter is the resolved
request object.
```js
-{
+{
...
routes:[...],
afterEachRoute: (request)=>{
updateAnalytics("loaded", request.hash)
- }
+ }
}
```
@@ -367,11 +341,34 @@ It follows the same rules as the [global ](#beforeeachroute) hook `beforeEachRou
## Special Routes
-There are two *special* routes that can be configured in the `routes` Array, and are *not* added to the history stack. These special routes are:
+There are three *special* routes that can be configured in the `routes` Array, and are *not* added to the history stack. These special routes are:
+
+
+
+* [BootPage](#bootpage)
* [NotFoundPage](#notfoundpage)
* [ErrorPage](#errorpage)
+### BootPage
+
+If you want to display a **Splash** or **Loading** screen while the Router is booting (and *before* the actual routing process kicks in), you can specify a Lightning Component in the `bootComponent` key of the configuration object.
+
+The component is not only displayed when you open the root of your App, but also when you open a [deeplinked](deeplinking.md) location in the App.
+
+```js
+{
+ path: '$',
+ component: BootPage
+}
+```
+
+
+> Since the `BootPage` might show an animation that takes some time to finish, the Router plugin does not hide
+the `BootPage` automatically. Instead, you have to *explicitly* call `Router.resume()` in your `BootPage` to give control back to the Router plugin.
+
+
+
### NotFoundPage
The `*` path indicates which Page component must be displayed when an *unknown* route path is hit (i.e., URL not found):
@@ -379,7 +376,7 @@ The `*` path indicates which Page component must be displayed when an *unknown*
```js
{
path: '*',
- component: NotFoundPage,
+ component: NotFoundPage
}
```
diff --git a/docs/plugins/router/events.md b/docs/plugins/router/events.md
index 900f3517..164656bd 100644
--- a/docs/plugins/router/events.md
+++ b/docs/plugins/router/events.md
@@ -59,7 +59,7 @@ You can prevent this by adding `_handleAppClose()` to your App class, for instan
```js
class MyApp extends Router.App{
- _handleAppClose(params){
+ _handleAppClose(){
this.toggleExitDialog().then((confirmed)=>{
// close the application
if(confirmed){
diff --git a/docs/plugins/router/index.md b/docs/plugins/router/index.md
index 3604af65..09672dab 100644
--- a/docs/plugins/router/index.md
+++ b/docs/plugins/router/index.md
@@ -197,6 +197,22 @@ Router.resume()
> See [Router Configuration](configuration.md#bootcomponent) for more information.
+### reload
+
+```js
+Router.reload()
+```
+
+Force reload the current hash
+
+### root
+
+```js
+Router.root()
+```
+
+Force the `Router` to navigate to the configured `root`
+
### startRouter
```js
diff --git a/docs/plugins/tv.md b/docs/plugins/tv.md
index 76f84c92..cdb16fb4 100644
--- a/docs/plugins/tv.md
+++ b/docs/plugins/tv.md
@@ -5,141 +5,4 @@ and program information, and allows you to change the TV channel from *inside* a
One of the things you can do with the TV plugin, is adapting your App contextually to what the user is currently watching on TV.
-## Usage
-
-If you want to use the TV plugin, import it from the Lightning SDK:
-
-```js
-import { TV } from '@lightningjs/sdk'
-```
-
-## Available methods
-
-### channel
-
-Either *[retrieves](#retrieve-current-channel)* information about the TV channel that is currently being watched, or *[changes](#change-current-channel)* the current TV channel.
-
-#### Retrieve Current Channel
-
-```js
-TV.channel().then(channel => console.log(channel))
-```
-
-The `channel` method returns a *Promise* that returns the channel information as an object. The Promise is *rejected* if an error occurred or if the App is not allowed to retrieve the information.
-
-During *development*, the `channel` method returns a *random mocked channel*. Optionally, you can [overwrite](#overwriting-default-values) the default values by editing the **settings.json** file. For example:
-
-```json
-{
- number: 1,
- name: 'Metro News 1',
- description: 'New York Cable News Channel',
- entitled: true,
-}
-```
-
-#### Change Current Channel
-
-```js
-const channelNumber = 2
-TV.channel(channelNumber).then(channel => console.log(channel))
-```
-
-If a `channelNumber` is passed as an argument, the `channel` method attempts to change the TV channel.
-It returns a *Promise* that returns the channel information as an object. The Promise is *rejected* if an error occurred or if the App is not allowed to set the channel.
-
-During *development*, you can pass either 1, 2 or 3 as the `channelNumber`, so that one of the default mocked channels can be selected.
-
-> In a *production* setting, most Apps are *not* able to change the currently live TV channel. The functionality is only
-made available to certain *whitelisted* Apps.
-
-### program
-
-Retrieves information about the TV program that is currently being watched.
-
-```js
-TV.program().then(program => console.log(program))
-```
-
-The `program` method returns a *Promise* that returns the program information as an object.
-
-During *development*, the `program` method returns a mocked program that is linked to a random mocked channel. Optionally, you can [overwrite](#overwriting-default-values) the default values by editing the **settings.json** file. For example:
-
-```json
-{
- title: 'The Tonight Show Starring Jimmy Fallon',
- description: 'Late-night talk show hosted by Jimmy Fallon on NBC',
- startTime: 'Wed, 12 Aug 2020 23:00:00 GMT', // UTC date string
- duration: 3600, // in seconds
- ageRating: 10,
-}
-```
-
-### entitled
-
-Indicates whether the user is entitled to watch the current TV channel or not.
-
-```js
-TV.entitled().then(entitled => console.log(entitled))
-```
-
-The `entitled` method returns a *Promise* that returns `true` if the user is entitled and `false` if not.
-
-During *development*, the `entitled` method returns the entitlement value of the random mocked channel. Optionally, you can [overwrite](#overwriting-default-values) the default values by editing the **settings.json** file.
-
-### addEventListener
-
-Allows you to listen for TV events and executes a callback if these events occur.
-
-```js
-const event = 'channelChange'
-const callback = (channel) => { console.log(channel) }
-
-TV.addEventListener(event, callback)
-```
-
-Currently, *only one* event is supported: `channelChange`. This passes an object with the new `channel` information as an argument to the callback function.
-
-You can register *multiple* callbacks for the same event.
-
-### removeEventListener
-
-Allows you to remove previously registered callbacks (via the `addEventListener` method) for TV events.
-
-```js
-const event = 'channelChange'
-const callback = (channel) => { console.log(channel) }
-
-TV.removeEventListener(event, callback)
-```
-
-If the `callback` argument is omitted, *all* previously registered callbacks for that event are removed.
-
-## Overwriting Default Values
-
-During development, you might want to test your App with different TV channels and / or programs.
-You can *overwrite* the default values by editing the **settings.json** file.
-Just add a `tv` key in `platformSettings` and supply it with an `Array` of channels in the following format:
-
-```json
-{
- "platformSettings": {
- "tv": [
- {
- "number": 1,
- "name": "Metro News 1",
- "description": "New York Cable News Channel",
- "entitled": true,
- "program": {
- "title": "The Morning Show",
- "description": "New York's best morning show",
- "startTime": "Wed, 12 Aug 2020 23:00:00 GMT",
- "duration": 180,
- "ageRating": 0
- }
- },
- ...
- ]
- }
-}
-```
+> Starting v5.0.0 and up, the TV plugin is part of the metrological-sdk.
For backwards compatibility reasons, the Lightning-SDK exports this plugin provided by the metrological-sdk. The code however is maintained here. More information on how to use this plugin can be found here.
diff --git a/docs/plugins/videoplayer.md b/docs/plugins/videoplayer.md
index caeed028..d92c9805 100644
--- a/docs/plugins/videoplayer.md
+++ b/docs/plugins/videoplayer.md
@@ -9,470 +9,4 @@ The VideoPlayer plugin has a built-in integration with the [Metrics](metrics.md)
> Although it is possible to implement a fully custom video playback solution, the use of the VideoPlayer plugin from
the SDK is highly recommended.
-## Usage
-
-In the Lightning components that require video playback capabilities (i.e., a Player component), you can import the
-VideoPlayer plugin from the Lightning SDK:
-
-```js
-import { VideoPlayer } from '@lightningjs/sdk'
-```
-
-The first time that you interact with the VideoPlayer plugin, a `