@signageos/front-applet 6.2.0 → 6.3.0

package/docs/{js-api → content}/js-proof-of-play.md

@@ -11,12 +11,11 @@ tags:
 description: "[Content JS API] You can use our Prooof of Play mechanism to log that some content was played on end device successfully or not. Our system includes important metadata about applet and device out-of-box to simplify solution of issues with content. You can use SignageOS to analyze, if, where, when and how long proposed content was playing in front of audience."
 ---
 
-# All methods
-::: table-responsive
+## All methods
+
 | Methods | Description | Supported since |
 | ----------- | ------------ | -----------|
 | `recordItemPlayed()` | Log that content was played successfully | 5.5.1 |
-:::
 
 ## recordItemPlayed()
 
@@ -24,11 +23,10 @@ Send provided information about played content along with additional metadata ab
 
 ### Parameters
 
-::: table-responsive
+
 | Param     | Type   | Required                   | Description                                        |
 | --------- | ------ | :------------------------: | -------------------------------------------------- |
-| `options` | Object | <div class="red">Yes</div> | Object containing information about played content |
-:::
+| `options` | Object | <div class="red">Yes</div> | Object containing information about played content 
 
 ### Options
 

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

@@ -24,7 +24,7 @@ If every implementation implements the same set of interfaces, it's easy to swap
 It also requires less code to be written to use various types of hardware.
 If possible, you should always implement these interfaces.
 
-::: alert alert--info
+:::info
 Right now, the list of interfaces is very short. We will be adding more types soon.
 If there's any particular type of interfaces you'd like, kindly let us know.
 :::
@@ -62,9 +62,9 @@ For more information read [this article](https://docs.signageos.io/hc/en-us/arti
 
 Sometimes you might want to use hardware that we don't support out of the box yet.
 
-Firstly, you will need to read the documentation for the [serial API](/api/js/content/js-hardware-serial).
+Firstly, you will need to read the documentation for the [serial API](js-serial).
 Most often, the hardware you will decide to use connects to the device via USB and internally uses a serial communication, like RS232.
 In that case you will use the serial API.
 
-You can approach this any way you like, but remember that you should always implement the [interfaces defined by us](/api/js/content/js-sensors#sensors-interfaces).
+You can approach this any way you like, but remember that you should always implement the [interfaces defined by us](js-sensors#sensors-interfaces).
 That will allow for greater code reusability and readability.

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

@@ -1,5 +1,5 @@
 ---
-title:  Serial
+title:  Serial Port
 author: Michal Artazov
 date:   25.9.2020
 type:   js-api
@@ -19,29 +19,27 @@ This can be leveraged to integrate a wide variety of hardware into your digital
 
 Such hardware could be, for example, printers, payment terminals or sensors.
 
-::: alert alert--warning
+:::warning
 * Before using this API, ensure that the display supports serial via `sos.display.supports("SERIAL")`.
-* More info [**HERE**](/api/js/content/latest/js-display#supports).
+* More info [**HERE**](js-display#supports).
 * Samsung Kiosk serial connection only works over serial ports, not over USB ports
 :::
 
 ## All methods
 
-::: table-responsive
+
 | Method             | Description            | Supported since |
 | ------------------ | ---------------------- | :-------------: |
-| `openSerialPort()` | Open a new serial port | 4.4.0           |
-:::
+| `openSerialPort()` | Open a new serial port | 4.4.0           
 
 ## openSerialPort()
 
 Creates a new instance of serial port. You can then use that instance to handle the communication.
 
-::: table-responsive
+
 | Param     | Type   | Required                   | Description                                        |
 | --------- | ------ | :------------------------: | -------------------------------------------------- |
-| `options` | Object | <div class="red">Yes</div> | Object containing configuration of the serial port |
-:::
+| `options` | Object | <div class="red">Yes</div> | Object containing configuration of the serial port 
 
 ### Options
 
@@ -71,7 +69,7 @@ const serialPort = await sos.hardware.openSerialPort({
 });
 ```
 
-::: alert alert--info
+:::info
 Device address is different per platform (at least for now). Kindly find the respective device address:
 
 | Device type | Default value | Other values for `device` |
@@ -80,21 +78,19 @@ Device address is different per platform (at least for now). Kindly find the res
 | Windows | `COM3` | `COM3` (typically, but check your Win machine if this does not work) |
 | Samsung Kiosk | `PORT1` |`PORT1`, `PORT2`, `PORT3` |
 | Android | `/dev/ttyusb0` | `/dev/ttyusb0` |
-| BrightSign | `0` | `0`, `1`, `USB:A/0` |
-:::
+| BrightSign | `0` | `0`, `1`, `USB:A/0` 
 
 ## Serial port methods
 
 Once you create a serial port instance using `openSerialPort()` method listed above,
 you can call following methods on it.
 
-::: table-responsive
+
 | Method     | Description                                                 | Supported since |
 | ---------- | ----------------------------------------------------------- | :-------------: |
 | `onData()` | Call a listener callback anytime the opened serial port receiving data. | 4.4.0           |
 | `write()`  | Write data to the serial port                               | 4.4.0           |
-| `close()`  | Close serial port                                           | 4.4.0           |
-:::
+| `close()`  | Close serial port                                           | 4.4.0           
 
 ## onData()
 
@@ -148,12 +144,11 @@ await serialPort.close();
 Following errors may occur when working with the serial ports. However they don't reflect on actual physical connectivity of the ports due to Samsung b2bapi does not register these events.
 
 
-::: table-responsive
+
 | Code  | Type                  | Message                                   |
 | ----- | --------------------- | ----------------------------------------- |
 | 50602 | InternalHardwareError | Failed to open serial port                |
 | 50603 | InternalHardwareError | Closing serial port that isn't open       |
 | 50603 | InternalHardwareError | Failed to close serial port               |
 | 50604 | InternalHardwareError | Writing to a serial port that isn't open |
-| 50604 | InternalHardwareError | Failed to write to serial port            |
-:::
+| 50604 | InternalHardwareError | Failed to write to serial port            

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

@@ -21,7 +21,6 @@ Sync API enables multiple devices to communicate and coordinate their behavior w
 
 ## All methods
 
-::: table-responsive
 | Methods/Events     | Description | Supported since |
 | ------------------ | ----------- | :---------------: |
 | `connect()` 	 	 | Connect to the sync server. |  1.0.32 |
@@ -35,63 +34,32 @@ Sync API enables multiple devices to communicate and coordinate their behavior w
 | `onValue()`	     | Event called when device receives value broadcasted by another device in the network |  2.0.0 |
 | `onStatus()`	     | Event called when device is connected and periodic every 30s from sync server - report connected devices |  2.1.0 |
 | `onClosed()`	     | Event called when synchronizer is closed |  5.12.0 |
-:::
 
-## Examples
-<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/sync-video">
-            <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">Synchronized video through applets</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/sync-mixed-content">
-            <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">Synchronization mixed content</h3>
-                <div class="wide-box__description">Working example on our Github</div>
-            </div>
-            </div>
-        </a>
-    </div>
-</div>
+:::note[GitHub Example]
+- [Synchronized video through applets](https://github.com/signageos/applet-examples/blob/master/examples/content-js-api/sync-video)
+- [Synchronization mixed content](https://github.com/signageos/applet-examples/blob/master/examples/content-js-api/sync-mixed-content)
+:::
 
 ## connect()
 Connect to the sync server. This initializes the connection and is mandatory to call, since synchronization is an optional feature and doesn’t get initialized by default to save resources and bandwidth. You can optionally specify a custom sync server URI in case you are running the sync server in a custom location.
 
 ### Parameters
-::: table-responsive
+
 | Param    | Type   | Required                     | Description                   |
 | -------- | ------ | :--------------------------: | ----------------------------- |
 | `engine` | String | <div class="yellow">No</div> | Synchronization engine to use |
-| `uri`    | String | <div class="yellow">No</div> | Address of sync server. Only relevant for `sync-server`. If omitted, the default server will be used. |
-:::
+| `uri`    | String | <div class="yellow">No</div> | Address of sync server. Only relevant for `sync-server`. If omitted, the default server will be used. 
 
 ### Engine
 
-::: table-responsive
+
 | Engine        | Description                                                                              |
 | ------------- | ---------------------------------------------------------------------------------------- |
 | `sync-server` | (**Default**) Use external sync server. Device will connect to the server via websocket. |
 | `p2p-local`   | Synchronize directly with other devices in the local network via UDP and TCP.            |
-| `udp`         | (**Deprecated - use p2p-local**) Synchronize directly with other devices in the local network via UDP. |
-:::
+| `udp`         | (**Deprecated - use p2p-local**) Synchronize directly with other devices in the local network via UDP. 
 
-::: alert alert--info
+:::info
 All devices, that should be synchronized together, must select the same engine.
 Otherwise they won't be able to communicate with each other.
 :::
@@ -147,19 +115,18 @@ await sos.sync.close().then(() => {
 ```
 
 ## init()
-::: alert alert--warning
+:::warning
 This method is deprecated and will be removed in the future. Use `joinGroup()` instead. These two methods function identically.
 :::
 
 Once the user is connected to the server, the initialization of the sync group is required. Before any communication takes place, all participating devices have to be connected and recognize one another. Recommended to call this method early.
 
 ### Parameters
-::: table-responsive
+
 |      Param     | Type    | Required | Description  |
 | -------------- | ------- | :-----: | ---------------------------- |
 | `groupName`  | String  | <div class="yellow">No</div> | By default, all devices will be synced together. To create Groups of devices, independent from each other, specify group name |
-| `deviceIdentification`  | String  | <div class="yellow">No</div> | Is identification of device connected to groupName. |
-:::
+| `deviceIdentification`  | String  | <div class="yellow">No</div> | Is identification of device connected to groupName. 
 
 ### Javascript example
 ```javascript
@@ -170,12 +137,11 @@ await sos.sync.init('someRandomNameGroup', 'device1');
 Once we're connected, we have to join a sync group. Before any communication takes place, all participating devices have to be connected and recognize one another. Recommended to call this method early.
 
 ### Parameters
-::: table-responsive
+
 |      Param     | Type    | Required | Description  |
 | -------------- | ------- | :-----: | ---------------------------- |
 | `groupName`  | String  | <div class="yellow">No</div> | By default, all devices will be synced together. To create Groups of devices, independent from each other, specify group name |
-| `deviceIdentification`  | String  | <div class="yellow">No</div> | Is identification of device connected to groupName. |
-:::
+| `deviceIdentification`  | String  | <div class="yellow">No</div> | Is identification of device connected to groupName. 
 
 ### Javascript example
 ```javascript
@@ -193,13 +159,12 @@ This method returns a promise that resolves once all the devices meet and are re
 Sometimes devices might go out of sync due to unpredictable conditions like loss of internet connection. To ensure re-sync of an out of sync device, you can pass some data as the first argument. This can be any data that informs the whole group about what content is about to play next. Once all devices are ready, data from the master device is passed to everyone and the rest of the data is ignored. Therefore, when implementing your applet you should rely on the result data and not the data that is passed to the wait method as an argument.
 
 ### Parameters
-::: table-responsive
+
 |      Param     | Type  | Required | Description  |
 | -------------- | ------- | :-----: | ------- |
 | `data`    | Any | <div class="yellow">No</div>  | Information about what content is about to play so all the devices display the same content. |
 | `groupName` | String  | <div class="yellow">No</div> | If `joinGroup` is called with custom group name, the same group name as the second argument has to be passed. |
-| `timeout` | Number | <div class="yellow">No</div> | Wait timeout on other devices |
-:::
+| `timeout` | Number | <div class="yellow">No</div> | Wait timeout on other devices 
 
 ### Returns
 Promise that resolves to data picked from the first argument of the master device 
@@ -213,11 +178,10 @@ In order to gracefully cleanup any pending activity, use this method.
 Any pending wait will be canceled and the promise will be rejected with an error.
 
 ### Parameters
-::: table-responsive
+
 | Param       | Type    | Required                     | Description  |
 | ----------- | ------- | :--------------------------: | ------------ |
-| `groupName` | String  | <div class="yellow">No</div> | If `joinGroup` is called with custom group name, the same group name as the second argument has to be passed. |
-:::
+| `groupName` | String  | <div class="yellow">No</div> | If `joinGroup` is called with custom group name, the same group name as the second argument has to be passed. 
 
 ### Javascript example
 ```javascript
@@ -234,29 +198,27 @@ await sos.sync.cancelWait('someRandomNameGroup');
 Another way to synchronize devices is to broadcast some values within the group so, in turn, all devices can react to it. Unlike option wait, this is more useful in use cases when the synchronization is based around the content itself, rather than timing.
 
 ### All Methods
-::: table-responsive
+
 | Method  | Type | Description | Supported since |
 | ------ | ------ | -------- | ------------- |
 | `setValue()` | method | Used for broadcast values for all master devices | 2.0.0 |
 | `onValue()` | event | Event called when device receive any value | 2.0.0 |
-| `onStatus()` | event | Event called when device is connected and periodic every 30s from sync server - report connected devices | 2.1.0 |
-:::
+| `onStatus()` | event | Event called when device is connected and periodic every 30s from sync server - report connected devices | 2.1.0 
 
 ## setValue()
-::: alert alert--warning
+:::warning
 This method is deprecated and will be removed in the future. Use `broadcastValue()` instead. These two methods function identically.
 :::
 
 This method can be called by any device to broadcast a value to the whole group.
 
 ### Parameters
-::: table-responsive
+
 |  Param   |Type  | Required | Description  |
 | -------------- | --------- | :------: | ------------------- |
 | `key`            | String   | <div class="red">Yes</div> | Values are recognized based their key so different types of values can be broadcasted independently within the group |
 | `value`          | Any       | <div class="red">Yes</div> | The value to be broadcasted   |
-| `groupName`      | String     | <div class="yellow">No</div> | If `joinGroup` is called with custom group name, the same group name has to be passed as the third argument    |
-:::
+| `groupName`      | String     | <div class="yellow">No</div> | If `joinGroup` is called with custom group name, the same group name has to be passed as the third argument    
 
 ### Javascript example
 ```javascript
@@ -267,13 +229,12 @@ await sos.sync.setValue('some-key', 'some-value', 'some-group');
 This method can be called by any device to broadcast a value to the whole group.
 
 ### Parameters
-::: table-responsive
+
 |  Param   |Type  | Required | Description  |
 | -------------- | --------- | :------: | ------------------- |
 | `key`            | String   | <div class="red">Yes</div> | Values are recognized based their key so different types of values can be broadcasted independently within the group |
 | `value`          | Any       | <div class="red">Yes</div> | The value to be broadcasted   |
-| `groupName`      | String     | <div class="yellow">No</div> | If `joinGroup` is called with custom group name, the same group name has to be passed as the third argument    |
-:::
+| `groupName`      | String     | <div class="yellow">No</div> | If `joinGroup` is called with custom group name, the same group name has to be passed as the third argument    
 
 ### Javascript example
 ```javascript
@@ -294,7 +255,7 @@ await sos.sync.onValue((key, value, groupName) => {
 });
 ```
 
-<br>
+<br/>
 
 ## Event onStatus()
 Is used for receiving information about connected device to sync server. Emitted every 30s, or when device connect or disconnect from server.
@@ -307,9 +268,9 @@ await sos.sync.onStatus((connectedPeers) => {
 });
 ```
 
-<br>
+<br/>
 
-::: alert alert--info
+:::info
 Since you never know which device is the master at the moment, you should always rely only on the values received by the listener, not the values that the particular device itself is broadcasting.
 :::
 
@@ -371,12 +332,11 @@ onClosed(listener: (
 ## Errors
 Although we are doing our best, following errors may occur when working with the synchronizer.
 
-::: table-responsive
+
 | Code | Type | Message |
 | ---- | ---- | ------- |
 | 51101 | InternalSynchronizerError | Synchronizer couldn't connect to the server. |
 | 51102 | InternalSynchronizerError | The connection wasn't closed correctly. |
 | 51103 | InternalSynchronizerError | The group initialization failed. |
 | 51104 | InternalSynchronizerError | Wait failed for unexpected reason. |
-| 51105 | InternalSynchronizerError | Synchronizer couldn't set the value. |
-:::
+| 51105 | InternalSynchronizerError | Synchronizer couldn't set the value. 

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

@@ -15,60 +15,45 @@ description: "[Content JS API] Display content from another device over HDMI, Di
 Display content from another device over HDMI, Display Port, or other port. PIP (Picture in Picture) functionality allows you to display content from the internal port while keeping signageOS on.
 
 ## All methods
-::: table-responsive
+
 | Methods  | Description | Supported since |
 | ----------------- | ----------- | :---------------: |
 | `play()` | Method for starting stream | 1.0.18 |
 | `stop()` | Method stops using the internal port. | 1.0.18 |
-:::
 
 ## play() 
-Method uses the same API as [video streams](/api/js/content/js-video-stream). Instead of URL (for stream), **specify an URI of the port** to display.
+Method uses the same API as [video streams](js-video-stream). Instead of URL (for stream), **specify an URI of the port** to display.
 
 ### Parameters
-::: table-responsive
+
 |      Param     | Type              | Required |Description                   |
 | -------------- | -------------------| :----------: | ---------------------------- |
 | `uri`          | String                     | <div class="red">Yes</div>  | Internal port URI            |
 | `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 example
 ```javascript
 await sos.stream.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/stream-hdmi-port">
-            <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">Stream HDMI port Applet example</h3>
-                <div class="wide-box__description">Working example on our Github</div>
-            </div>
-            </div>
-        </a>
-    </div>
-</div>
+:::note[GitHub Example]
+[Stream HDMI port Applet example](https://github.com/signageos/applet-examples/blob/master/examples/content-js-api/stream-hdmi-port)
+:::
 
 ## Valid URI values 
 
-::: table-responsive
+
 |   Value                 |   Description                   |
 | ----------------------- | ------------------------------- |
 | `internal://hdmi<number>` | HDMI                            |
 | `internal://dp`          | DisplayPort                     |
 | `internal://dvi`          | DVI                             |
-| `internal://pc`           | PC or VGA                       |
-:::
+| `internal://pc`           | PC or VGA                       
 
-::: alert alert--warning
+:::warning
 `<number>` has to be a value between 1 - 4, depending on which of the available HDMI ports you want to use.
 :::
 
@@ -76,15 +61,14 @@ await sos.stream.play(uri,  x,  y,  width,  height);
 Method stops using the internal port.
 
 ### Parameters:
-::: table-responsive
+
 |      Param     | Type            | Required |Description                   |
 | -------------- | -----------------| :------------: | ---------------------------- |
 | `uri`            | String                     | <div class="red">Yes</div>  | Internal port URI             |
 | `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 example
 ```javascript
@@ -94,13 +78,12 @@ await sos.stream.stop(uri,  x,  y,  width,  height);
 ## Internal port events
 API reacts to events related to changes in internal port status. Events are only emitted for a currently playing internal port.
 
-::: table-responsive
+
 | Event                         | Description                                                                                     |
 | ----------------------------- | ----------------------------------------------------------------------------------------------- |
 | `disconnected()`              | Emmited when the port is disconnected or does not receive any signal                            |
 | `connected()`                 | Emmited when the port is re-connected or starts receiving signal again after being disconnected |
-| `error()`                     | Emmited when an error occurs, is emmited only once                                              |
-:::
+| `error()`                     | Emmited when an error occurs, is emmited only once                                              
 
 ## Usage with Typescript
 You can also use all these methods with [signageOS TypeScript](https://docs.signageos.io/hc/en-us/articles/4405069154962#signageos-typescript).
@@ -141,9 +124,8 @@ onError(listener: (event: {
 ## Errors
 Although we are doing our best, following errors may occur when playing content from the internal ports.
 
-::: table-responsive
+
 | Code | Type | Message |
 | ---- | ---- | ------- |
 | 51501 | InternalVideoError | Couldn't play the video. |
-| 51503 | InternalVideoError | Couldn't stop the video. |
-:::
+| 51503 | InternalVideoError | Couldn't stop the video.