Migrate docs to new documentation website

CHANGELOG.md

@@ -492,7 +492,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### Added
 
-- Added `onPlayerReady` callback on `THEOplayerView` to pass a `THEOplayer` instance once it is ready for access. More info on the [migration documentation](./doc/migrating_v2.md) page.
+- Added `onPlayerReady` callback on `THEOplayerView` to pass a `THEOplayer` instance once it is ready for access. More info on the [migration documentation](./doc/migrating-v2.md) page.
 - Added `canplay` event, which is dispatched when the player can start play-out.
 - Added `waiting` event, which is dispatched when the player has stopped play-out because of a temporary lack of data.
 - Added `nativeHandle` property on `THEOplayer` to access the native player instance on web, and view id on mobile.
@@ -513,8 +513,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### Changed
 
-- Moved all player properties such as `paused`, `muted` and `volume`, from `THEOplayerView` component to `THEOplayer` instance. More info on the [migration documentation](./doc/migrating_v2.md) page.
-- Removed `onEventName` callback methods from `THEOplayerView` component in favor of `THEOplayer` event listener's interface. More info on the [migration documentation](./doc/migrating_v2.md) page.
+- Moved all player properties such as `paused`, `muted` and `volume`, from `THEOplayerView` component to `THEOplayer` instance. More info on the [migration documentation](./doc/migrating-v2.md) page.
+- Removed `onEventName` callback methods from `THEOplayerView` component in favor of `THEOplayer` event listener's interface. More info on the [migration documentation](./doc/migrating-v2.md) page.
 - Changed documentation sample code to reflect API changes.
 - Exposed the `activeQuality` of a `MediaTrack` as a `Quality` instance instead of the quality's `uid`.
 - Set the default container style for web to let the player cover the whole container.

README.md

@@ -32,15 +32,15 @@ It also gives a description of the properties of the `THEOplayerView` component,
 a list of features and known limitations.
 
 ## Prerequisites
+
 For each platform, a dependency to the corresponding THEOplayer SDK is included through a dependency manager:
 
 - Gradle & Maven for Android
 - Cocoapods for iOS
 - npm for Web
 
 In order to use one of these THEOplayer SDKs, it is necessary to obtain a valid THEOplayer license for that specific platform,
-i.e. HTML5, Android, and/or iOS. You can use your existing THEOplayer SDK license or request a
-[free trial account](https://www.theoplayer.com/free-trial-theoplayer?hsLang=en-us).
+i.e. HTML5, Android, and/or iOS. You can sign up for a THEOplayer SDK license through [our portal](https://portal.theoplayer.com/).
 
 If you have no previous experience in React Native, we encourage you to first explore the
 [React Native Documentation](https://reactnative.dev/docs/getting-started),
@@ -59,15 +59,80 @@ Depending on the platform on which the application is deployed, a different set
 If a feature missing, additional help is needed, or you need to extend the package,
 please reach out to us for support.
 
-<img src="./doc/features.svg">
+<table>
+<thead>
+<tr>
+<th>Feature</th>
+<th>Android, Android TV, Fire TV</th>
+<th>Web</th>
+<th>iOS, tvOS</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><strong>Streaming</strong></td>
+<td colspan="2">MPEG-DASH (fmp4, CMAF), HLS (TS, CMAF), Progressive MP4, MP3</td>
+<td>HLS (TS, CMAF), Progressive MP4, MP3</td>
+</tr>
+<tr>
+<td><strong>Content Protection</strong></td>
+<td>Widevine</td>
+<td>Widevine, PlayReady, Fairplay</td>
+<td>Fairplay</td>
+</tr>
+<tr>
+<td><strong>DRM Connectors</strong></td>
+<td colspan="3">BuyDRM, EZDRM, Anvato, Titanium, Axinom, Irdeto, VuDRM, Comcast, Verimatrix, Azure, …</td>
+</tr>
+<tr>
+<td><strong>Analytics Connectors</strong></td>
+<td colspan="3">Adobe, Agama, Comscore, Conviva, Mux, Nielsen, Youbora</td>
+</tr>
+<tr>
+<td><strong>Subtitles &amp; Closed Captions</strong></td>
+<td colspan="3">CEA-608/708, SRT, TTML, WebVTT</td>
+</tr>
+<tr>
+<td><strong>Metadata</strong></td>
+<td colspan="3">Event stream, emsg, ID3, EXT-X-DATERANGE, EXT-X-PROGRAM-DATE-TIME</td>
+</tr>
+<tr>
+<td><strong>Advertising Integration</strong></td>
+<td colspan="3">Google IMA, Google DAI</td>
+</tr>
+<tr>
+<td><strong>Cast Integration</strong></td>
+<td>Chromecast</td>
+<td colspan="2">Chromecast, Airplay</td>
+</tr>
+<tr>
+<td><strong>Presentation Mode</strong></td>
+<td colspan="3">Inline, Picture-in-Picture, Fullscreen</td>
+</tr>
+<tr>
+<td><strong>Audio Control Management</strong></td>
+<td>Audio focus &amp; Audio-Becoming-Noisy mgmt</td>
+<td colspan="2">(Audio control management by platform)</td>
+</tr>
+<tr>
+<td><strong>Advanced APIs</strong></td>
+<td colspan="2">Background playback,<br/>Media Session,<br/>Media Cache (offline playback)</td>
+<td>Background playback,<br/>NowPlaying,<br/>Media Cache (iOS only)</td>
+</tr>
+<tr>
+<td><strong>User Interface</strong><br/><code>@theoplayer/react-native-ui</code></td>
+<td colspan="3">Basic playback, media &amp; text track selection, progress bar, live &amp; vod, preview thumbnails, customisable &amp; extensible</td>
+</tr>
+</tbody>
+</table>
 
 ## Available connectors
 
 The `react-native-theoplayer` package can be combined with any number of connectors to provide extra
 functionality. Currently, the following connectors are available:
 
 | Package name                                                                                                              | Purpose                                                  | Registry                                                                                                                                                      |
-|---------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| ------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | [`@theoplayer/react-native-analytics-adobe`](https://github.com/THEOplayer/react-native-theoplayer-analytics)             | Adobe analytics connector                                | [![npm](https://img.shields.io/npm/v/@theoplayer/react-native-analytics-adobe)](https://www.npmjs.com/package/@theoplayer/react-native-analytics-adobe)       |
 | [`@theoplayer/react-native-analytics-agama`](https://github.com/THEOplayer/react-native-theoplayer-analytics)             | Agama analytics connector                                | [![npm](https://img.shields.io/npm/v/@theoplayer/react-native-analytics-agama)](https://www.npmjs.com/package/@theoplayer/react-native-analytics-agama)       |
 | [`@theoplayer/react-native-analytics-comscore`](https://github.com/THEOplayer/react-native-theoplayer-analytics)          | Comscore analytics connector                             | [![npm](https://img.shields.io/npm/v/@theoplayer/react-native-analytics-comscore)](https://www.npmjs.com/package/@theoplayer/react-native-analytics-comscore) |
@@ -79,32 +144,40 @@ functionality. Currently, the following connectors are available:
 | [`@theoplayer/react-native-ui`](https://github.com/THEOplayer/react-native-theoplayer-ui)                                 | React Native user interface                              | [![npm](https://img.shields.io/npm/v/@theoplayer/react-native-ui)](https://www.npmjs.com/package/@theoplayer/react-native-ui)                                 |
 | [`@theoplayer/react-native-connector-template`](https://github.com/THEOplayer/react-native-theoplayer-connector-template) | A template for<br/>`react-native-theoplayer` connectors. | [![npm](https://img.shields.io/npm/v/@theoplayer/react-native-connector-template)](https://www.npmjs.com/package/@theoplayer/react-native-connector-template) |
 
-## Getting Started
+## Creating your first app
 
 This section starts with creating a minimal demo app that integrates the `react-native-theoplayer` package,
 followed by an overview of the available properties and functionality of the THEOplayerView component.
 An example application including a basic user interface and demo sources is included in the
-[git repository](https://github.com/THEOplayer/react-native-theoplayer/tree/master/example),
-and discussed in the next section. Finally, an overview of features, limitations and known issues is listed.
+[git repository](https://github.com/THEOplayer/react-native-theoplayer/tree/develop/example),
+and discussed in the next section.
 
 - [Creating a minimal demo app](./doc/creating-minimal-app.md)
-    - [Getting started on Android](./doc/creating-minimal-app.md#getting-started-on-android)
-    - [Getting started on iOS](./doc/creating-minimal-app.md#getting-started-on-ios-and-tvos)
-    - [Getting started on Web](./doc/creating-minimal-app.md#getting-started-on-web)
+  - [Getting started on Android](./doc/creating-minimal-app.md#getting-started-on-android)
+  - [Getting started on iOS](./doc/creating-minimal-app.md#getting-started-on-ios-and-tvos)
+  - [Getting started on Web](./doc/creating-minimal-app.md#getting-started-on-web)
 - [The THEOplayerView component](./doc/theoplayerview-component.md)
 - [The example application](./doc/example-app.md)
-- Knowledge Base
-  - [Adaptive Bitrate (ABR)](./doc/abr.md)
-  - [Advertisements](./doc/ads.md)
-  - [Audio Control Management](./doc/audio-control.md)
-  - [Background playback and notifications](./doc/background.md)
-  - [Casting with Chromecast and Airplay](./doc/cast.md)
-  - [Custom iOS framework](./doc/custom-ios-framework.md)
-  - [Digital Rights Management (DRM)](./doc/drm.md)
-  - [Fullscreen presentation](./doc/fullscreen.md)
-  - [Media Caching](./doc/media_caching.md)
-  - [Migrating to `react-native-theoplayer` v2.x](./doc/migrating_v2.md)
-  - [Picture-in-Picture (PiP)](./doc/pip.md)
-  - [Subtitles, Closed Captions and Metadata tracks](./doc/texttracks.md)
-  - [Limitations and known issues](./doc/limitations.md)
-- [API Reference](https://theoplayer.github.io/react-native-theoplayer/api/)
+
+## Knowledge Base
+
+This section gives an overview of features, limitations and known issues:
+
+- [Adaptive Bitrate (ABR)](./doc/abr.md)
+- [Advertisements](./doc/ads.md)
+- [Audio Control Management](./doc/audio-control.md)
+- [Background playback and notifications](./doc/background.md)
+- [Casting with Chromecast and Airplay](./doc/cast.md)
+- [Custom iOS framework](./doc/custom-ios-framework.md)
+- [Digital Rights Management (DRM)](./doc/drm.md)
+- [Fullscreen presentation](./doc/fullscreen.md)
+- [Media Caching](./doc/media-caching.md)
+- [Migrating to `react-native-theoplayer` v2.x](./doc/migrating-v2.md)
+- [Picture-in-Picture (PiP)](./doc/pip.md)
+- [Subtitles, Closed Captions and Metadata tracks](./doc/texttracks.md)
+- [Limitations and known issues](./doc/limitations.md)
+
+## API Reference
+
+See the [API Reference](https://theoplayer.github.io/react-native-theoplayer/api/) for detailed documentation
+about all available components and functions.

doc/abr.md

@@ -1,6 +1,6 @@
-## Adaptive Bitrate (ABR)
+# Adaptive Bitrate (ABR)
 
-### Overview
+## Overview
 
 The playback quality during play-out of a stream is determined by the ABR algorithm.
 On starting play-out of a stream, the ABR *strategy* determines which quality to prefer, while during play-out the
@@ -14,7 +14,7 @@ and [demo page](https://www.theoplayer.com/theoplayer-demo-optimized-video-abr).
 In this document we will outline how to affect the ABR algorithm, setting a preferred quality or set of qualities and
 subscribe to related events.
 
-### ABR Configuration
+## ABR Configuration
 
 The [ABR Configuration](../src/api/abr/ABRConfiguration.ts) determines which initial quality the player will download, depending
 on the chosen strategy, as well as various parameters of the playback buffer.
@@ -54,7 +54,7 @@ const strategyConfig: ABRStrategyConfiguration = {
 player.abr.strategy = strategyConfig;
 ```
 
-### Setting Target Video Quality
+## Setting Target Video Quality
 
 By default, the ABR algorithm will choose, depending on the available bandwidth,
 from all the video qualities that are available in the manifest or playlist.
@@ -67,7 +67,7 @@ const selectedVideoQuality: number | number[] | undefined = [33, 34, 35]
 player.targetVideoQuality = selectedVideoQuality;
 ```
 
-### Subscribing to track events
+## Subscribing to track events
 
 The `onMediaTrackListEvent` and `onMediaTrackEvent` callback properties on `THEOplayerView` provide a way to perform actions
 when the track list is modified, or when a track's current quality changes:
@@ -77,7 +77,7 @@ when the track list is modified, or when a track's current quality changes:
 | `onMediaTrackListEvent` | when a media track list event occurs, for `trackType` with value `Audio` or `Video`, and event `type` with values `AddTrack`, `RemoveTrack` or `ChangeTrack`. | Android & Web       |
 | `onMediaTrackEvent`     | when a media track event occurs, for `trackType` with value `Audio` or `Video`, and event `type`, which currently is only `ActiveQualityChanged`.             | Android & Web       |
 
-#### Setting a preferred video quality across period switches and discontinuities
+### Setting a preferred video quality across period switches and discontinuities
 
 Subscribing to the `AddTrack` event on `onMediaTrackListEvent` for video tracks makes it possible set a
 fixed preferred video quality, even when a stream's track list changes due to a DASH period switch or an

doc/ads.md

@@ -1,6 +1,6 @@
-## Advertisements
+# Advertisements
 
-### Overview
+## Overview
 
 A good starting point to get acquainted with THEOplayer's advertising features
 is THEOplayer's [Knowledge Base](https://docs.theoplayer.com/knowledge-base/01-advertisement/01-user-guide.md).
@@ -18,9 +18,9 @@ Additional functionality, such as scheduling ads at runtime, is provided by the
 
 The final section describes how to subscribe and add custom logic to [ad events](#subscribing-to-ad-events).
 
-### Getting started with Google IMA
+## Getting started with Google IMA
 
-#### Configuration
+### Configuration
 
 First enable Google IMA support, which requires a different approach on each platform.
 
@@ -40,13 +40,13 @@ THEOplayer_extensionGoogleIMA = true
 <details>
 <summary>iOS/tvOS</summary>
 
-##### 1.x versions: Custom THEOplayer build
+#### 1.x versions: Custom THEOplayer build
 
 To enable GoogleIMA on react-native-theoplayer 1.x versions, a dependency to the THEOplayer SDK
 that includes the Google IMA library needs to be added. See [Custom iOS framework](./custom-ios-framework.md) for more
 details.
 
-##### 2.x versions: Add feature flag to config
+#### 2.x versions: Add feature flag to config
 
 To enable Google IMA on react-native-theoplayer 2.x versions, you can add the "GOOGLE_IMA" [feature flag](./creating-minimal-app.md#getting-started-on-ios-and-tvos) to react-native-theoplayer.json (or theoplayer-config.json)
 
@@ -57,7 +57,7 @@ To enable Google IMA on react-native-theoplayer 2.x versions, you can add the "G
 <summary>Web</summary>
 
 To enable Google IMA on web, it suffices to add this script in the web page's header section, as shown
-in the example app's [index.html](../example/web/public/index.html):
+in the example app's [index.html](https://github.com/THEOplayer/react-native-theoplayer/blob/develop/example/web/public/index.html):
 
 ```html
 
@@ -69,7 +69,7 @@ in the example app's [index.html](../example/web/public/index.html):
 
 </details>
 
-#### Source description
+### Source description
 
 When providing the player with a source that includes a list of ads, make sure to
 set the `integration` property to `"google-ima"`, as shown in one of the sources of the example app:
@@ -96,7 +96,7 @@ const imaSource = {
 The API's [`AdSource`](../src/api/source/ads/Ads.ts) description provides additional information on
 the configurable properties.
 
-### Getting started with Google DAI
+## Getting started with Google DAI
 
 First enable Google DAI support, which requires a different approach on each platform.
 
@@ -126,7 +126,7 @@ To enable Google DAI for iOS, a dependency to the THEOplayer SDK that includes t
 <summary>Web</summary>
 
 To enable Google DAI on web, it suffices to add this script in the web page's header section, as shown
-in the example app's [index.html](../example/web/public/index.html):
+in the example app's [index.html](https://github.com/THEOplayer/react-native-theoplayer/blob/develop/example/web/public/index.html):
 
 ```html
 
@@ -138,7 +138,7 @@ in the example app's [index.html](../example/web/public/index.html):
 
 </details>
 
-#### Source description
+### Source description
 
 Providing a Google DAI source description to the player requires providing an `ssai` object and
 specifying `"google-dai"` as integration type:
@@ -159,7 +159,7 @@ const daiSource = {
 A full description of the available source properties can be found in the
 [API](../src/api/source/ads/ssai/GoogleDAIConfiguration.ts) definition.
 
-### Using the Ads API
+## Using the Ads API
 
 [THEOplayer](../src/api/player/THEOplayer.ts) provides an [AdsAPI](../src/api/ads/AdsAPI.ts) that enables additional
 features
@@ -201,7 +201,7 @@ const streamTimeForContentTime = (contentTime: number): Promise<number> | undefi
 };
 ```
 
-### Subscribing to ad events
+## Subscribing to ad events
 
 [THEOplayer](../src/api/player/THEOplayer.ts) allows you to subscribe to ad events:
 

doc/audio-control.md

@@ -1,6 +1,6 @@
-## Audio Control Management on Android
+# Audio Control Management on Android
 
-### Overview
+## Overview
 
 Android allows multiple apps to play audio concurrently, but this can lead to a disruptive user experience due to
 mixed audio streams. To enhance user experience, Android offers an API for apps to control **audio focus**, ensuring only
@@ -13,15 +13,15 @@ References:
 - [Android for Developers: Audio focus](https://developer.android.com/reference/android/media/AudioFocusRequest)
 - [Android for Developers: "Don't be Noisy"](https://developer.android.com/guide/topics/media/platform/output#becoming-noisy)
 
-### Audio Focus
+## Audio Focus
 
 The `react-native-theoplayer` package is equipped with inherent audio focus management. It initiates an audio focus
 request upon the start of playback and responds to the loss of audio focus by pausing playback.
 
 If the loss was *transient*, i.e. lasting only for a short while such as during an incoming phone call,
 the player will regain audio focus afterward and play-out while resume.
 
-#### Audio "ducking"
+### Audio "ducking"
 
 When another app seeks audio focus, it can optionally indicate that the current audio focus holder can
 lower its playback volume to continue playing (AUDIOFOCUS_LOSS_TRANSIENT_CAN_DUCK). The new focus holder does
@@ -37,7 +37,7 @@ In summary:
 | `AUDIOFOCUS_GAIN`                                | Resume play-out |
 
 
-### Audio Becoming Noisy
+## Audio Becoming Noisy
 
 When headphones are unplugged or a Bluetooth device is disconnected, the audio stream automatically reroutes to the
 device's built-in speaker. This can lead to an abrupt increase in volume, which is an undesired outcome.