@signageos/front-applet 6.2.0 → 6.3.0

package/docs/{js-api → content}/js-video-stream.md

@@ -1,5 +1,5 @@
 ---
-title:  Video streams
+title:  Video Streams
 author: Miroslav Behina
 date:   22.11.2018
 type:   js-api
@@ -15,29 +15,28 @@ description: "[Content JS API] Methods to play or stop video streams."
 Methods to play or stop video streams.
 
 ## All methods
-::: table-responsive
-| Methods            | Description                                                      | Supported since |
-| ------------------ | ---------------------------------------------------------------- | --------------- |
-| `prepare()`        | Prepare video stream in the background                           | 4.7.0           |
-| `play()`           | Start playing video stream                                       | 1.0.18          |
-| `stop()`           | Stop video stream                                                | 1.0.18          |
-| `getTracks()`      | Get all tracks of the stream                                     | 6.1.0           |
-| `selectTrack()`    | Select track of the stream                                       | 6.1.0           |
-| `resetTrack()`     | Reset track of the stream                                        | 6.1.0           |
-| `onConnected()`    | Calls a listener callback when stream connects                   | 1.0.20          |
-| `onDisconnected()` | Calls a listener callback when stream disconnects                | 1.0.20          |
-| `onError()`        | Calls a listener callback when an unexpected stream error occurs | 1.0.20          |
-| `onPlay()`         | Calls a listener callback when stream starts playing             | 5.12.0          |
-| `onStop()`         | Calls a listener callback when stream stops                      | 5.12.0          |
-| `onPrepare()`      | Calls a listener callback when stream prepares                   | 5.12.0          |
-| `onTracksChanged()`| Calls a listener callback when stream tracks change              | 6.1.0           |
-:::
 
-::: alert alert--warning
+| Methods            | Description                              | Supported since |
+| ------------------ | ----------------------------------------------------- | --------------- |
+| `prepare()`        | Prepare video stream in the background                           | 4.7.0  |
+| `play()`           | Start playing video stream                                       | 1.0.18 |
+| `stop()`           | Stop video stream                                                | 1.0.18 |
+| `getTracks()`      | Get all tracks of the stream                                     | 6.1.0  |
+| `selectTrack()`    | Select track of the stream                                       | 6.1.0  |
+| `resetTrack()`     | Reset track of the stream                                        | 6.1.0  |
+| `onConnected()`    | Calls a listener callback when stream connects                   | 1.0.20 |
+| `onDisconnected()` | Calls a listener callback when stream disconnects                | 1.0.20 |
+| `onError()`        | Calls a listener callback when an unexpected stream error occurs | 1.0.20 |
+| `onPlay()`         | Calls a listener callback when stream starts playing             | 5.12.0 |
+| `onStop()`         | Calls a listener callback when stream stops                      | 5.12.0 |
+| `onPrepare()`      | Calls a listener callback when stream prepares                   | 5.12.0 |
+| `onTracksChanged()`| Calls a listener callback when stream tracks change              | 6.1.0  |
+
+:::warning
 Are you using **Samsung Tizen** to play streams? [Read more about limitation and Tizen-specific details](https://docs.signageos.io/hc/en-us/articles/4405387373458).
 :::
 
-::: alert alert--danger
+:::danger
 Be aware version of JS API (v6.0.0+) changed how stream functions `play()` and `prepare()` work. For using an options object
 you need to our latest core app versions. If you are using older core app versions, you need to use deprecated format.
 :::
@@ -45,12 +44,12 @@ you need to our latest core app versions. If you are using older core app versio
 ## prepare()
 Calls the internal player and prepares a video stream in memory, so it can later start playing instantaneously.
 
-::: alert alert--info
+:::info
 If you want to play a video stream in full screen mode, use x = y = 0 and width = document.documentElement.clientWidth and height = document.documentElement.clientHeight as setup parameters.
 :::
 
 ### Parameters
-::: table-responsive
+
 |      Param     | Type                        | Required                     | Description                                   |
 | -------------- | --------------------------- | :--------------------------: | --------------------------------------------- |
 | `uri`          | String                      | <div class="red">Yes</div>   | Network address where the stream is available |
@@ -58,22 +57,20 @@ If you want to play a video stream in full screen mode, use x = y = 0 and width
 | `y`            | Number                      | <div class="red">Yes</div>   | Stream y-position on the screen               |
 | `width`        | Number                      | <div class="red">Yes</div>   | Stream width on the screen 	                  |
 | `height`		 | Number                      | <div class="red">Yes</div>   | Stream height on the screen 	              |
-| `options`      | Object                      | <div class="red">Yes</div>    | Additional options for the stream            |
-:::
+| `options`      | Object                      | <div class="red">Yes</div>    | Additional options for the stream            
 
 ### Options object
-::: table-responsive
+
 |      Key        | Type                        | Required                     | Description                                   |
 | ------------    | --------------------------- | :--------------------------: | --------------------------------------------- |
 | `protocol`     | String                      | <div class="red">Yes</div>    | Protocol that the stream is using             |
 |^^|^^|^^| Types: `HLS`, `RTP`, `HTTP`, `UDP`, `RTMP`, `RTSP`. |
 | `background`    | Boolean                     | <div class="yellow">No</div>    | Prepare stream in the background           |
 | `trackSelection`| Object                      | <div class="yellow">No</div>    | Track selection options                    |
-| `drm`           | Object                      | <div class="yellow">No</div>    | DRM options                                |
-:::
+| `drm`           | Object                      | <div class="yellow">No</div>    | DRM options                                
 
 ### Track selection object
-::: table-responsive
+
 |      Key        | Type                        | Required                     | Description                                   |
 | ------------    | --------------------------- | :--------------------------: | --------------------------------------------- |
 | `maxAudioChannelCount` | Number               | <div class="yellow">No</div>    | Maximum number of audio channels to play    |
@@ -82,18 +79,16 @@ If you want to play a video stream in full screen mode, use x = y = 0 and width
 | `maxVideoSize`  | Object                      | <div class="yellow">No</div>    | Maximum video size to play                  |
 |^^|^^|^^| Object with `width` and `height` properties |
 | `preferredAudioLanguages` | Array of strings | <div class="yellow">No</div>    | Preferred audio languages to play           |
-| `preferredTextLanguages` | Array of strings  | <div class="yellow">No</div>    | Preferred text languages to play            |
-:::
+| `preferredTextLanguages` | Array of strings  | <div class="yellow">No</div>    | Preferred text languages to play            
 
 ### DRM object
-::: table-responsive
+
 |      Key        | Type                        | Required                     | Description                                   |
 | ------------    | --------------------------- | :--------------------------: | --------------------------------------------- |
 | `scheme`        | String                      | <div class="red">Yes</div>    | DRM scheme                                   |
 |^^|^^|^^| Types: `CommonPSSH`, `ClearKey`, `Widevine`, `PlayReady` or own value |
 | `licenseUri`    | String                      | <div class="red">Yes</div>    | DRM license URI                              |
-| `licenseRequestHeaders` | Object             | <div class="yellow">No</div>    | DRM license request headers                 |
-:::
+| `licenseRequestHeaders` | Object             | <div class="yellow">No</div>    | DRM license request headers                 
 
 
 ### Javascript syntax
@@ -108,31 +103,19 @@ await sos.stream.prepare(uri,  x,  y,  width,  height, { protocol: 'HTTP', backg
 await sos.stream.prepare(uri,  x,  y,  width,  height, 'HTTP');
 ```
 
-<div class="row d-flex align-content-stretch force-padding-20">
-    <div class="col-12 d-flex">
-        <a class="wide-box wide-box--white d-flex align-content-stretch widebox-kb-color" target="_blank" href="https://github.com/signageos/applet-examples/blob/master/examples/content-js-api/stream">
-            <div>
-                <div class="wide-box__image d-flex align-items-center">
-                    <i class="fab fa-github svg-black"></i>
-                </div>
-            <div>
-                <h3 class="wide-box__title wide-box__title__small pl-85">Working example on our Github</h3>
-                <div class="wide-box__description">Stream video Applet example</div>
-            </div>
-            </div>
-        </a>
-    </div>
-</div>
+:::note[GitHub Example]
+[Stream video Applet example](https://github.com/signageos/applet-examples/blob/master/examples/content-js-api/stream)
+:::
 
 ## play()
 Calls the internal player and starts a video stream in correct position.
 
-::: alert alert--info
+:::info
 If you want to play a video stream in full screen mode, use x = y = 0 and width = document.documentElement.clientWidth and height = document.documentElement.clientHeight as setup parameters.
 :::
 
 ### Parameters
-::: table-responsive
+
 |      Param     | Type                        | Required                     | Description                                   |
 | -------------- | --------------------------- | :--------------------------: | --------------------------------------------- |
 | `uri`          | String                      | <div class="red">Yes</div>   | Network address where the stream is available |
@@ -140,11 +123,10 @@ If you want to play a video stream in full screen mode, use x = y = 0 and width
 | `y`            | Number                      | <div class="red">Yes</div>   | Stream y-position on the screen               |
 | `width`        | Number                      | <div class="red">Yes</div>   | Stream width on the screen 	                  |
 | `height`		 | Number                      | <div class="red">Yes</div>   | Stream height on the screen 	              |
-| `options`      | Object                      | <div class="red">Yes</div>    | Additional options for the stream             |
-:::
+| `options`      | Object                      | <div class="red">Yes</div>    | Additional options for the stream             
 
 ### Options object
-::: table-responsive
+
 |      Key        | Type                        | Required                     | Description                                   |
 | ------------    | --------------------------- | :--------------------------: | --------------------------------------------- |
 | `protocol`      | String                      | <div class="red">Yes</div>   | Protocol that the stream is using             |
@@ -155,8 +137,7 @@ If you want to play a video stream in full screen mode, use x = y = 0 and width
 |^^|^^|^^| Default value: 30000 ms |
 | `volume`        | Number                      | <div class="yellow">No</div>    | Volume of the stream                          |
 | `trackSelection`| Object                      | <div class="yellow">No</div>    | Track selection options                       |
-| `drm`           | Object                      | <div class="yellow">No</div>    | DRM options                                   |
-:::
+| `drm`           | Object                      | <div class="yellow">No</div>    | DRM options                                   
 
 ### Javascript syntax
 ```javascript
@@ -173,21 +154,9 @@ await sos.stream.play(uri,  x,  y,  width,  height, { protocol: 'HTTP', autoReco
 await sos.stream.play(uri,  x,  y,  width,  height, 'HTTP')
 ```
 
-<div class="row d-flex align-content-stretch force-padding-20">
-    <div class="col-12 d-flex">
-        <a class="wide-box wide-box--white d-flex align-content-stretch widebox-kb-color" target="_blank" href="https://github.com/signageos/applet-examples/blob/master/examples/content-js-api/stream">
-            <div>
-                <div class="wide-box__image d-flex align-items-center">
-                    <i class="fab fa-github svg-black"></i>
-                </div>
-            <div>
-                <h3 class="wide-box__title wide-box__title__small pl-85">Working example on our Github</h3>
-                <div class="wide-box__description">Stream video Applet example</div>
-            </div>
-            </div>
-        </a>
-    </div>
-</div>
+:::note[GitHub Example]
+[Stream video Applet example](https://github.com/signageos/applet-examples/blob/master/examples/content-js-api/stream)
+:::
 
 ## stop()
 Stops the video stream playback. 
@@ -198,15 +167,14 @@ await sos.stream.stop(uri,  x,  y,  width,  height);
 ```
 
 ### Parameters:
-::: table-responsive
+
 |      Param     | Type                        | Required     | Description                                                 |
 | -------------- | --------------------------- | :------------------------: | --------------------------------------------- |
 | `uri`          | String                      | <div class="red">Yes</div> | Network address where the stream is available |
 | `x`            | Number                      | <div class="red">Yes</div> | Stream x-position on the screen               |
 | `y`            | Number                      | <div class="red">Yes</div> | Stream y-position on the screen               |
 | `width`        | Number                      | <div class="red">Yes</div> | Stream width on the screen 	                |
-| `height`		 | Number                      | <div class="red">Yes</div> | Stream height on the screen 	                |
-:::
+| `height`		 | Number                      | <div class="red">Yes</div> | Stream height on the screen 	                
 
 ## getTracks()
 Get all tracks of the selected stream.
@@ -225,11 +193,10 @@ const tracks = await sos.stream.getTracks(videoId); // Promise<ITrackInfo[]>
 ```
 
 ### Parameters:
-::: table-responsive
+
 |      Param     | Type                        | Required                   | Description                                   |
 | -------------- | --------------------------- | :------------------------: | --------------------------------------------- |
-| `videoId`      | Object                      | <div class="red">Yes</div> | Video ID object of selected stream            |
-:::
+| `videoId`      | Object                      | <div class="red">Yes</div> | Video ID object of selected stream            
 
 ### Example of returned value
 ```javascript
@@ -259,14 +226,13 @@ await sos.stream.selectTrack(videoId, trackType, groupId, trackIndex); // Promis
 ```
 
 ### Parameters:
-::: table-responsive
+
 |      Param     | Type                        | Required                   | Description                                   |
 | -------------- | --------------------------- | :------------------------: | --------------------------------------------- |
 | `videoId`      | Object                      | <div class="red">Yes</div> | Video ID object of selected stream            |
 | `trackType`    | String                      | <div class="red">Yes</div> | Track type - `AUDIO`, `VIDEO`, `TEXT`         |
 | `groupId`      | String                      | <div class="red">Yes</div> | Group ID of selected track                    |
-| `trackIndex`   | Number                      | <div class="red">Yes</div> | Index of selected track                       |
-:::
+| `trackIndex`   | Number                      | <div class="red">Yes</div> | Index of selected track                       
 
 ## resetTrack()
 Reset track of the selected stream.
@@ -278,13 +244,12 @@ await sos.stream.resetTrack(videoId, trackType, groupId); // Promise<void>
 ```
 
 ### Parameters:
-::: table-responsive
+
 |      Param     | Type                        | Required                   | Description                                   |
 | -------------- | --------------------------- | :------------------------: | --------------------------------------------- |
 | `videoId`      | Object                      | <div class="red">Yes</div> | Video ID object of selected stream            |
 | `trackType`    | String                      | <div class="red">Yes</div> | Track type - `AUDIO`, `VIDEO`, `TEXT`         |
-| `groupId`      | String                      | <div class="yellow">No</div> | Group ID of selected track                  |
-:::
+| `groupId`      | String                      | <div class="yellow">No</div> | Group ID of selected track                  
 
 ## Event onConnected()
 Calls a listener callback everytime `connected` event is emitted.
@@ -514,7 +479,7 @@ onTracksChanged(listener: (event: StreamTracksChangedEvent) => void): void;
 ## Errors
 Although we are doing our best, following errors may occur when working with the video stream.
 
-::: table-responsive
+
 | Code | Type | Message |
 | ---- | ---- | ------- |
 | 41401 | AppletStreamError | Invalid stream protocol type: `protocol` |
@@ -523,5 +488,4 @@ Although we are doing our best, following errors may occur when working with the
 | 51302 | InternalStreamError | Couldn't prepare the stream. |
 | 51303 | InternalStreamError | Couldn't get stream tracks. |
 | 51304 | InternalStreamError | Couldn't select stream track. |
-| 51305 | InternalStreamError | Couldn't reset stream track. |
-:::
+| 51305 | InternalStreamError | Couldn't reset stream track. 

package/docs/{js-api → content}/js-video.md

@@ -15,9 +15,9 @@ description: "[Content JS API] We know how crucial video is for digital signage.
 We know how crucial video is for digital signage. So we made it easy. There are several methods you can use for video manipulation.
 
 ## All methods/events
-::: table-responsive
+
 | Methods/Events  | Description | Supported since |
-| ----------------- | ----------- | ------ | :---------------: |
+| ----------------- | ----------- | :---------------: |
 | `play()` | Start video playing | 1.0.3 |
 | `prepare()` | Prepare next video | 1.0.3 |
 | `pause()` | Pause video | 1.0.3 |
@@ -26,13 +26,12 @@ We know how crucial video is for digital signage. So we made it easy. There are
 | `onceEnded()` | Wait until video ends | 1.0.29 |
 | `onEnded()` | Event called when video ends | 1.0.3 |
 | `onError()` | Event called when video emits error | 1.0.3 |
-:::
 
-::: alert alert--warning
+:::warning
 First 5 parameters (uri, x, y, width, height) are unique identifiers for playing the video using play, stop, resume and pause methods.
 :::
 
-::: alert alert--info
+:::info
 If you want to play video in full screen mode, use x = y = 0 and width = document.documentElement.clientWidth and height = document.documentElement.clientHeight as setup parameters.
 :::
 
@@ -44,83 +43,40 @@ If you want to play video in full screen mode, use x = y = 0 and width = documen
 Play method calls the internal player and starts the video in correct position.
 
 ### Parameters
-::: table-responsive
+
 | Param | Type | Required | Description |
 | ------ | ------ | :--------: | -------- |
 | `uri` | String | <div class="red">Yes</div> | Address to remote (online) or local video file |
 | `x` | Number | <div class="red">Yes</div> | 	x-position for video on screen |
 | `y` | Number | <div class="red">Yes</div> |	y-position for video on screen |
 | `width` | Number | <div class="red">Yes</div> | 	Video width on screen |
-| `height` | Number | <div class="red">Yes</div> | Video height on screen |
-:::
+| `height` | Number | <div class="red">Yes</div> | Video height on screen 
 
 ### Javascript
 ```javascript
 await sos.video.play(uri, x, y, width, height);
 ```
 
-<div class="row d-flex align-content-stretch force-padding-20">
-    <div class="col-12 d-flex">
-        <a class="wide-box wide-box--white d-flex align-content-stretch widebox-kb-color" target="_blank" href="https://github.com/signageos/applet-examples/blob/master/examples/content-js-api/video-loop-one">
-            <div>
-                <div class="wide-box__image d-flex align-items-center">
-                    <i class="fab fa-github svg-black"></i>
-                </div>
-            <div>
-                <h3 class="wide-box__title wide-box__title__small pl-85">Play one video in endless loop</h3>
-                <div class="wide-box__description">Working example on our Github</div>
-            </div>
-            </div>
-        </a>
-    </div>
-</div>
-
-<div class="row d-flex align-content-stretch force-padding-10">
-    <div class="col-12 d-flex">
-        <a class="wide-box wide-box--white d-flex align-content-stretch widebox-kb-color" target="_blank" href="https://github.com/signageos/applet-examples/blob/master/examples/content-js-api/video-multiple">
-            <div>
-                <div class="wide-box__image d-flex align-items-center">
-                    <i class="fab fa-github svg-black"></i>
-                </div>
-            <div>
-                <h3 class="wide-box__title wide-box__title__small pl-85">Play multiple videos in endless loop</h3>
-                <div class="wide-box__description">Working example on our Github</div>
-            </div>
-            </div>
-        </a>
-    </div>
-</div>
-
-<div class="row d-flex align-content-stretch force-padding-10">
-    <div class="col-12 d-flex">
-        <a class="wide-box wide-box--white d-flex align-content-stretch widebox-kb-color" target="_blank" href="https://github.com/signageos/applet-examples/blob/master/examples/content-js-api/video-and-images">
-            <div>
-                <div class="wide-box__image d-flex align-items-center">
-                    <i class="fab fa-github svg-black"></i>
-                </div>
-            <div>
-                <h3 class="wide-box__title wide-box__title__small pl-85">Switching video and images in endless loop</h3>
-                <div class="wide-box__description">Working example on our Github</div>
-            </div>
-            </div>
-        </a>
-    </div>
-</div>
+:::note[GitHub Example]
+- [Play one video in infinite loop](https://github.com/signageos/applet-examples/blob/master/examples/content-js-api/video-loop-one)
+- [Play multiple videos in infinite loop](https://github.com/signageos/applet-examples/blob/master/examples/content-js-api/video-multiple)
+- [Switching video and images in infinite loop](https://github.com/signageos/applet-examples/blob/master/examples/content-js-api/video-and-images)
+:::
 
 ## prepare()
 Prepare method calls the internal player and preload the video into memory.
 
-::: alert alert--info
+:::info
 Using `prepare()` is mandatory for gapless playback
 :::
 
-::: alert alert--warning
+:::warning
 `4k` parameter is no longer needed since Front-display v7.5.0, Tizen Core App v2.1.0.  
 `volume` is supported only on the RaspberryPi.
 :::
 
 ### Parameters
-::: table-responsive
+
 | Param | Type | Required | Description |
 | ------ | ------ | :--------: | -------- |
 | `uri` | String | <div class="red">Yes</div> | Address to remote /online/ or local video file |
@@ -128,19 +84,17 @@ Using `prepare()` is mandatory for gapless playback
 | `y` | Number | <div class="red">Yes</div> |	y-position for video on screen |
 | `width` | Number | <div class="red">Yes</div> | 	Video width on screen |
 | `height` | Number | <div class="red">Yes</div> | Video height on screen |
-| `options` | Object | <div class="yellow">No</div> | Additional video properties |
-:::
+| `options` | Object | <div class="yellow">No</div> | Additional video properties 
 
 ### Options properties
-::: table-responsive
+
 | Property | Type | Required | Description |
 | ------- | ------ | :------:| -----------|
 | `4k` | Boolean | <div class="yellow">No</div> | Support for 4k video |
 |^^|^^|^^| Deprecated since Tizen Core App v2.1.0 |
 | `background` | Boolean | <div class="yellow">No</div> |  Bring video behind the applet html (similar to z-index: -1) |
 | `volume` | Number | <div class="yellow">No</div> | Adjust volume of playing video itself (doesn't adjust display speaker volume) |
-|^^|^^|^^| Supported only on **RaspberryPi** |
-:::
+|^^|^^|^^| Supported only on **RaspberryPi** 
 
 ### Javascript
 ```javascript
@@ -158,15 +112,14 @@ await sos.video.prepare(uri, x, y, width, height, {
 All these methods call the internal player. All variables are mandatory in order to ensure video identification.
 
 ### Parameters
-::: table-responsive
+
 | Param | Type | Required | Description |
 | ------ | ------ | :--------: | -------- |
 | `uri` | String | <div class="red">Yes</div> | Address to remote (online) or local video file |
 | `x` | Number | <div class="red">Yes</div> | 	x-position for video on screen |
 | `y` | Number | <div class="red">Yes</div> |	y-position for video on screen |
 | `width` | Number | <div class="red">Yes</div> | 	Video width on screen |
-| `height` | Number | <div class="red">Yes</div> | Video height on screen |
-:::
+| `height` | Number | <div class="red">Yes</div> | Video height on screen 
 
 ### Javascript
 ```javascript
@@ -184,15 +137,14 @@ await sos.video.resume(uri, x, y, width, height);
 Wait until one specific video is ended.
 
 ### Parameters
-::: table-responsive
+
 | Param | Type | Required | Description |
 | ------ | ------ | :--------: | -------- |
 | `uri` | String | <div class="red">Yes</div> | Address to remote (online) or local video file |
 | `x` | Number | <div class="red">Yes</div> | 	x-position for video on screen |
 | `y` | Number | <div class="red">Yes</div> |	y-position for video on screen |
 | `width` | Number | <div class="red">Yes</div> | 	Video width on screen |
-| `height` | Number | <div class="red">Yes</div> | Video height on screen |
-:::
+| `height` | Number | <div class="red">Yes</div> | Video height on screen 
 
 ### Javascript
 ```javascript
@@ -205,12 +157,11 @@ All events about played videos can be binded using above mentioned methods. It w
 
 Listener method added as argument accepts event object. It contains these properties:
 
-::: table-responsive
+
 | Property | Description |
 | ------ | ------ |
 | `type` |	Type of event which can be ended or error string |
-| `srcArguments` |	Arguments which was passed to play method.<br> Contains uri, x, y, width & height. |
-:::
+| `srcArguments` |	Arguments which was passed to play method.<br/> Contains uri, x, y, width & height. 
 
 ### Javascript
 ```javascript
@@ -270,7 +221,7 @@ resume(
 ## Errors
 Although we are doing our best, following errors may occur when working with the video stream.
 
-::: table-responsive
+
 | Code | Type | Message |
 | ---- | ---- | ------- |
 | 41501 | AppletVideoError | This video was not played yet. The arguments: `arguments` |
@@ -278,5 +229,4 @@ Although we are doing our best, following errors may occur when working with the
 | 51502 | InternalVideoError | Couldn't prepare the video. |
 | 51503 | InternalVideoError | Couldn't stop the video. |
 | 51504 | InternalVideoError | Couldn't pause the video. |
-| 51505 | InternalVideoError | Couldn't resume the video. |
-:::
+| 51505 | InternalVideoError | Couldn't resume the video. 

package/docs/index.md

@@ -0,0 +1,97 @@
+---
+title:  JS SDK Home
+author: Josef Kral
+date:   4.2.2018
+type:   rest-api
+tags:
+- rest_api
+- js_api
+- api
+description: "[Content JS API] General introduction to signageOS JS API"
+---
+# Javascript SDK for Applet development
+
+Javascript SDK gives you access to device's native features and functionalities. You can use the same functions across all devices with the same result.
+
+:::tip
+All APIs are standardized and available across all [supported devices](https://docs.signageos.io/hc/en-us/sections/4405700629266-Supported-Devices).
+:::
+
+:::info[Start here]
+[Basic information about Applets](applet-basics.md)
+
+General information required to use the signageOS JS API
+:::
+
+## Content-related JS APIs
+
+Content-related APIs help you with content part of your application /Applet/. 
+
+Universal APIs for File system, access to accelerated video playback, sensor management and more provide you with robust tool set for creating extensive experiences.
+
+| Domain | Description |
+| ------ | ----------- |
+| [Applet Resources](content/js-applet-resources) | Pre-load necessary files required by your HTML5 player/Applet |
+| [Browser](content/js-browser) | Opening managed web-browser on Android devices inc. whitelisting, blacklisting and other features |
+| [Command](content/js-command) | Sending business or technical logs through signageOS in secured offline-ready way |
+| [Debug](content/js-debug) | Start debug session |
+| [Device Info](content/js-device-info) | Device-related informations  |
+| [Display](content/js-display) | Query features supported by the display |
+| [File system](content/js-file-system) | Full-featured file system API including ZIP and folder management |
+| [Fonts](content/js-fonts) | Make it easy to load additional fonts into SoC devices |
+| [Hardware](content/js-hardware) | Hardware-specific APIs like LED lights on Philips 10BDL |
+| [Inputs](content/js-input) | Controller inputs like IR remote unified under one API |
+| [iFrames](content/js-iframes) | Using JS SDK in iFrames |
+| [Proof of Play](content/js-proof-of-play) | Proof of Play API |
+| [Sensors](content/js-sensors) | Using sensors and IoT devices in your application  |
+| [Serial Port](content/js-serial) | Control external devices via serial |
+| [Synchronized playback](content/js-sync-playback) | API for creating synced playback and videowalls  |
+| [Video Inputs aka PiP](content/js-video-inputs-internal-ports) | Show HDMI/DP/VGA as a part of your content via PiP feature |
+| [Video Playback](content/js-video) | Playing accelerated gapless videos via native video player |
+| [Video Streams](content/js-video-stream) | Playing video streams (RTSP, HLS, UDP) via native video player  
+
+## Device control JS APIs
+
+Device control features exposed via Javascript APIs.
+
+:::tip
+For **Device Management** we strongly recommend using REST APIs. [See the REST API documentation here](https://api.docs.signageos.io).
+:::
+
+
+| Domain | Description |
+| ------ | ----------- |
+| [Application](management/js-management-application) | Get application version and upgrade application from remote location |
+| [Audio](management/js-management-audio) | Control system volume level |
+| [Debug](management/js-management-debug) | Enable/disable debug mode |
+| [Firmware](management/js-management-firmware) | Get FW version and upgrade FW from remote location |
+| [Management](management/js-management-management) | Information about the device and power action like Reboot, Restart,.. |
+| [Monitors](management/js-management-monitors) | Information about monitors |
+| [Network](management/js-management-network) | Manage network settings |
+| [OS](management/js-management-os) | Get system information like CPU and Memory usage |
+| [Package](management/js-management-package) | Install and manage packages |
+| [Power](management/js-management-power) | Manage display power - timers, restart and reboot |
+| [Proxy](management/js-management-proxy) | Manage display network proxy setup |
+| [IR Remote Control](management/js-management-remote-control) | Manage IR Remote control functionality |
+| [Screen](management/js-management-screen) | Manage brightness, orientation and resolution, display on/off |
+| [Security](management/js-management-security) | Control system security (PIN code) |
+| [Time](management/js-management-time) | Set time, timezone and get current settings |
+| [Wi-Fi](management/js-management-wifi) | Manage Wi-Fi 
+
+# Testing Framework SDK
+
+Write and then run **automated tests** for your applet on physical devices, streamlining your development and QA efforts.
+
+See full [documentation on GitHub](https://github.com/signageos/test-framework)
+
+# Node.JS SDK
+
+Library which allows you to fully manage signageOS applets, devices, management & monitoring using Node.JS and REST API.
+
+See full [documentation on GitHub](https://github.com/signageos/sdk)
+
+# REST API
+
+Large collection of REST API endpoints for device management and monitoring.
+
+See full [documentation on Postman](https://api.docs.signageos.io)