@signageos/front-applet 6.2.0 → 6.2.1

package/docs/js-api/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.
 
 ### 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. 

package/docs/js-api/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/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.