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,28 @@ 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">
+| Feature                                              | Android, Android TV, Fire TV            | Web                                                                        | iOS, tvOS                                                                                                             |
+|:-----------------------------------------------------|:----------------------------------------|:---------------------------------------------------------------------------|:----------------------------------------------------------------------------------------------------------------------|
+| **Streaming**                                        | >                                       | MPEG-DASH (fmp4, CMAF), HLS (TS, CMAF), Progressive MP4, MP3               | HLS (TS, CMAF), Progressive MP4, MP3                                                                                  |
+| **Content Protection**                               | Widevine                                | Widevine, PlayReady, Fairplay                                              | Fairplay                                                                                                              |
+| **DRM Connectors**                                   | >                                       | >                                                                          | BuyDRM, EZDRM, Anvato, Titanium, Axinom, Irdeto, VuDRM, Comcast, Verimatrix, Azure, …                                 |
+| **Analytics Connectors**                             | >                                       | >                                                                          | Adobe, Agama, Comscore, Conviva, Mux, Nielsen, Youbora                                                                |
+| **Subtitles & Closed Captions**                      | >                                       | >                                                                          | CEA-608/708, SRT, TTML, WebVTT                                                                                        |
+| **Metadata**                                         | >                                       | >                                                                          | Event stream, emsg, ID3, EXT-X-DATERANGE, EXT-X-PROGRAM-DATE-TIME                                                     |
+| **Advertising Integration**                          | >                                       | >                                                                          | Google IMA, Google DAI                                                                                                |
+| **Cast Integration**                                 | Chromecast                              | >                                                                          | Chromecast, Airplay                                                                                                   |
+| **Presentation Mode**                                | >                                       | >                                                                          | Inline, Picture-in-Picture, Fullscreen                                                                                |
+| **Audio Control Management**                         | Audio focus & Audio-Becoming-Noisy mgmt | >                                                                          | (Audio control management by platform)                                                                                |
+| **Advanced APIs**                                    | >                                       | Background playback,<br/>Media Session,<br/>Media Cache (offline playback) | Background playback,<br/>NowPlaying,<br/>Media Cache (iOS only)                                                       |
+| **User Interface**<br/>`@theoplayer/react-native-ui` | >                                       | >                                                                          | Basic playback, media & text track selection, progress bar, live & vod, preview thumbnails, customisable & extensible |
 
 ## 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 +92,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: