README to documentation synchro

apivideo · Nov 13, 2023 · fd958c4 · fd958c4
1 parent 05e25cb
commit fd958c4
Showing 1 changed file with 52 additions and 76 deletions.
diff --git a/templates/documentation/sdks/player/apivideo-react-player.md b/templates/documentation/sdks/player/apivideo-react-player.md
@@ -3,11 +3,18 @@ title: api.video React Player component
 meta: 
   description: The official api.video React Player component for api.video. [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app.
 ---
+<!--
+THIS FILE IS AUTOMATICALLY GENERATED. DO NOT EDIT!
+ IF YOU NEED TO CHANGE THIS FILE,  CREATE A PR IN THE SOURCE REPOSITORY.
+-->
 
 # api.video React Player component
 
 [api.video](https://api.video/) is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app.
 
+## Project description
+
+
 ## Getting started
 
 A React component for playing api.video videos.
@@ -22,8 +29,6 @@ $ npm install --save @api.video/react-player
 
 You can then use the component in your app: 
 
-{% raw %}
-
 ```tsx
 import ApiVideoPlayer from '@api.video/react-player'
 
@@ -32,8 +37,6 @@ import ApiVideoPlayer from '@api.video/react-player'
 <ApiVideoPlayer video={{id: "vi5fv44Hol1jFrCovyktAJS9"}} />
 ```
 
-{% endraw %}
-
 ## Documentation
 
 ### Properties
@@ -62,79 +65,65 @@ The following properties are used to configure the player. The value of each of
 | videoStyleObjectFit | no        | "contain" \| "cover" \| "fill" \| "none" \| "scale-down"                                         | The `object-fit` CSS value of the video tag                                                                                     | undefined |
 | videoStyleTransform | no        | string                                                                                           | The `transform` CSS value of the video tag (examples: "rotateY(180deg)")                                                        | undefined |
 | ads | no | {adTagUrl: string} | see below [ads](#ads) |
-
-#### Controls
+##### Controls
 
 The `controls` property let you decide wich controls should be displayed on the player. Here is the list of all available controls:  `play`, `seekBackward`, `seekForward`, `playbackRate`, `volume`, `fullscreen`, `subtitles`, `chapters`, `pictureInPicture`, `progressBar`, `chromecast`, `download`, `more`.
 
 
-{% raw %}
-
-> Examples
->
+Examples
 > ```tsx
-> {/* default: all controls are displayed */}
-> <ApiVideoPlayer 
->  video={{id: "vi5fv44Hol1jFrCovyktAJS9"}} />
-> 
-> {/* all controls hidden (equivalent to chromeless=true) */}
-> <ApiVideoPlayer 
->   video={{id: "vi5fv44Hol1jFrCovyktAJS9"}}
->   controls={[]} />
-> 
-> { /* only the play button & the unmute one are displayed */}
-> <ApiVideoPlayer 
->   video={{id: "vi5fv44Hol1jFrCovyktAJS9"}}
->   controls={["play", "unmute"]}/>
-> ```
-
-{% endraw %}
-
-#### Player theme
+{/* default: all controls are displayed */}
+<ApiVideoPlayer 
+ video={{id: "vi5fv44Hol1jFrCovyktAJS9"}} />
+
+{/* all controls hidden (equivalent to chromeless=true) */}
+<ApiVideoPlayer 
+  video={{id: "vi5fv44Hol1jFrCovyktAJS9"}}
+  controls={[]} />
+
+{ /* only the play button & the unmute one are displayed */}
+<ApiVideoPlayer 
+  video={{id: "vi5fv44Hol1jFrCovyktAJS9"}}
+  controls={["play", "unmute"]}/>
+```
+
+##### Player theme
 
 The `theme` property let you customize the color of some elements on the player. Here is the list of customizable elements: `text`, `link`, `linkHover`, `trackPlayed`, `trackUnplayed`, `trackBackground`, `backgroundTop`, `backgroundBottom`, `backgroundText`, `linkActive`.
 
+Example
+
+```tsx
+{ /* display the text in blue and the progress bar in red */}
+<ApiVideoPlayer 
+  video={{id: "vi5fv44Hol1jFrCovyktAJS9"}}
+  theme={{
+    trackPlayed: "#FF0000",
+    text: "blue"
+  }}/>
+```
 
-{% raw %}
 
-> Example
-> 
-> ```tsx
-> { /* display the text in blue and the progress bar in red */}
-> <ApiVideoPlayer 
->   video={{id: "vi5fv44Hol1jFrCovyktAJS9"}}
->   theme={{
->     trackPlayed: "#FF0000",
->     text: "blue"
->   }}/>
-> ```
-
-{% endraw %}
-
-#### Ads
+##### Ads
 Ads can be displayed in the player. To do so, you need to pass the `ads` option to the sdk constructor. In the `ads` object, pass the `adTagUrl` property with the url of the ad tag. The ad tag must be a VAST 2.0 or 3.0 url. For more information about VAST, check the [IAB documentation](https://www.iab.com/guidelines/vast/).
 
 Note: ads are displayed using the [Google IMA SDK](https://developers.google.com/interactive-media-ads/docs/sdks/html5/quickstart).
 
-#### Responsiveness
+##### Responsiveness
 
 With `responsive={true}`, the player height will be automatically set to match the video with/height ratio, depending on the width of player. 
 
-{% raw %}
+Example
 
-> Example
-> 
-> ```tsx
-> { /* the player width is 160px and response is true: if the video in a 16/9 one, the height of the player will be automatically set to 90px (160 / (16/9)) */}
-> <ApiVideoPlayer 
->   video={{id: "vi5fv44Hol1jFrCovyktAJS9"}}
->   style={{width: "160px"}}
->   responsive={true} />
-> ```
-
-{% endraw %}
+```tsx
+{ /* the player width is 160px and response is true: if the video in a 16/9 one, the height of the player will be automatically set to 90px (160 / (16/9)) */}
+<ApiVideoPlayer 
+  video={{id: "vi5fv44Hol1jFrCovyktAJS9"}}
+  style={{width: "160px"}}
+  responsive={true} />
+```
 
-### Callbacks
+#### Callbacks
 
 | Property               | Type                                                    | Description                                                                                                 |
 | ---------------------- | ------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
@@ -160,7 +149,7 @@ With `responsive={true}`, the player height will be automatically set to match t
 | onVolumeChange         | (volume: number) => void                                | Called when the volume changes. The volume is provided.                                                     |
 | onDurationChange       | (duration: number) => void                              | Called when the duration of the video change. The duration is provided                                      |
 
-## Methods
+### Methods
 
 | Method                       | Description                                                                                         |
 | ---------------------------- | --------------------------------------------------------------------------------------------------- |
@@ -173,27 +162,21 @@ With `responsive={true}`, the player height will be automatically set to match t
 | requestPictureInPicture()    | Request picture in picture mode (this may not work in some cases depending on browser restrictions) |
 | exitPictureInPicture()       | Leave picture in picture mode                                                                       |
 
-## Use cases
+### Use cases
 
 
-### Private videos
+#### Private videos
 
 To play a [private video](https://api.video/blog/tutorials/tutorial-private-videos/), add the video view token in the video attribute:
 
-{% raw %}
-
 ```tsx
 // ...
 <ApiVideoPlayer video={{
   id: "vi5fv44Hol1jFrCovyktAJS9",
   token: "e1bdf9a8-da40-421e-87f3-75b15232c531"}} />
 ```
 
-{% endraw %}
-
-### Defining metadata
-
-{% raw %}
+#### Defining metadata
 
 ```tsx
 // ...
@@ -202,12 +185,7 @@ To play a [private video](https://api.video/blog/tutorials/tutorial-private-vide
   metadata={{"userName": "Alfred"}} />
 ```
 
-{% endraw %}
-
-### Define your own controls
-
-
-{% raw %}
+#### Define your own controls
 
 ```tsx
 
@@ -222,5 +200,3 @@ return
     <button onClick={() => playerRef.current?.pause()}>pause</button>
 </ApiVideoPlayer>
 ```
-
-{% endraw %}