Migrate THEOlive docs (#202)

sidebarsTheolive.ts

@@ -1,7 +1,19 @@
 import type { SidebarsConfig } from '@docusaurus/plugin-content-docs';
 
 const sidebars: SidebarsConfig = {
-  theolive: ['index'],
+  theolive: [
+    'index',
+    {
+      type: 'category',
+      label: 'Getting started',
+      customProps: {
+        icon: '🚀',
+      },
+      description: 'Getting started with THEOLive',
+      link: { type: 'doc', id: 'getting-started/index' },
+      items: [{ type: 'autogenerated', dirName: 'getting-started' }],
+    },
+  ],
 };
 
 export default sidebars;

theolive/getting-started/authorization.mdx

@@ -0,0 +1,54 @@
+---
+sidebar_position: 1
+---
+
+# Authorization
+
+We make sure that only authorized users can make API calls!
+
+---
+
+Making secure calls to our REST API requires authentication and authorization. THEOlive makes use of token-secret pairs to authorize requests.
+
+## 1. Getting a token-secret pair
+
+To generate a token-secret pair, you should be registered for an account at on our [management console](https://console.theo.live/). Under the section "Tokens", click on the "Generate Token" button, and enter a name before clicking "Generate".
+
+![](../assets/img/c0aca77-1.-THEOlive-console-generate-token.PNG)
+
+This will give a pop-up which shows your token "key" and the corresponding secret.
+
+![](../assets/img/bb9b4a6-2.-THEOlive-console-generated-token-and-secret.PNG)
+
+Once you "Close" the pop-up window, the new token will be visible in your list of tokens.
+
+![](../assets/img/5361242-3.-THEOlive-console-token-list.PNG)
+
+:::warning[Please store the secret]
+
+Make sure to store the secret somewhere, as this will be shown to you only once, and THEOlive only stores a hash of the secret, so it cannot be recovered afterward.
+
+:::
+
+In case you forgot your secret, or the secret got exposed, you can easily regenerate a pair at all times.
+
+## 2. Using the token-secret pair with Basic Authentication
+
+THEOlive makes use of Basic Authentication when making requests to the API. In the 'Authorization' header, make sure to pass your token-secret pair (encoded with base64), prepended with the word 'Basic'.
+
+As an example, assume that your token has the value "my-token", and your secret has the value "my-secret". Then you can put them together like this: `my-token:my-secret`.
+
+You subsequently encode this value using base64. Applying `base64(my-token:my-secret)` will result in the following encoded string: `bXktdG9rZW46bXktc2VjcmV0`
+
+This string can then be used in combination with 'Basic' to pass in the 'Authorization' header:
+
+```text
+Authorization: Basic bXktdG9rZW46bXktc2VjcmV0
+```
+
+You can now make requests to our THEOlive API in the name of your organization!
+
+:::info 📘 Basic Authentication with Postman
+
+The guide [Using Postman with THEOlive](https://developers.theo.live/docs/how-to-use-postmans-api-client-with-theolive) illustrates how to use the THEOlive token-secret pair in Postman.
+:::

theolive/getting-started/billing.mdx

@@ -0,0 +1,51 @@
+---
+sidebar_position: 5
+---
+
+# How Billing works for THEOLive
+
+Discover our payment methods and billing cycles
+
+---
+
+This guide describes which payment methods are available, how to activate these, and when you will be billed.
+
+## 1. Know this first
+
+- You can test for free in demo mode. This limits your streaming time to 5 minutes and puts a watermark on your video. All other functionalities are equivalent to those available in production.
+- When adding your payment method, you get $20 in production for free.
+- We work with billing cycles and payment thresholds, in combination.
+
+## 2. Add you billing details
+
+Your billing details can be added via _My Account_ > _Billing Details_.
+
+![](../assets/img/dcb32a2-billing-details.PNG)
+
+You subsequently have to click _Add Billing Details_, and complete the form.
+
+![](../assets/img/8e7abe9-2.Billing-details-fields-overview.PNG)
+
+This will allow you in turn to add a payment method. We provide for 2 methods: credit card payment and direct debit. The picture below illustrates the credit card view.
+
+![](../assets/img/76aaff1-3.Add-credit-or-debit-card.PNG)
+
+You are all set, and can start using your production channels!
+
+## 2. Invoicing
+
+### 2.1 Model
+
+THEOlive is pay-as-you-go. There are no minimum fees; you pay per minute of video ingested and per minute of video delivered per viewer.
+
+:::info 📘 Estimate your streaming costs
+To get an estimate of the streaming cost for an event, you can check the [pricing page](https://www.theoplayer.com/pricing/theolive) on the website. Note that the prices listed do not include VAT yet; this will be added on your invoice.
+:::
+
+### 2.2 Discounts on commitments
+
+Discounts are possible for high volumes and commitments: [contact us](https://www.theoplayer.com/contact-us) to know more.
+
+### 2.3 Learn More
+
+You can learn more about THEOlive pricing on our [pricing page](https://www.theoplayer.com/pricing/theolive).

theolive/getting-started/index.mdx

@@ -0,0 +1,100 @@
+---
+sidebar_position: 0
+pagination_next: getting-started/authorization
+---
+
+# Welcome
+
+---
+
+THEOlive allows you to stream video real-time to your viewers, and to get started in minutes instead of days or weeks. Leveraging the [High Efficiency Streaming Protocol](https://www.hespalliance.org/), THEOlive aims to provide real-time streaming to large audiences, with high quality video, up to HD 1080p.
+
+THEOlive lives by the "API first" mantra: each action can be performed using API calls. Each possible call can be found at our [API Reference](https://developers.theo.live/reference/create-channel). However, to make things easier for non-developers, we built a management console on top of these API calls which makes it straightforward to perform the basic actions. To be able to create and use a THEOlive channel, you should register for an account and get a token to perform [authenticated requests](./authorization.mdx) to our API.
+
+## 1. Create an account in the management console
+
+To start your journey, you'll have to create a THEOlive account in the [management console](https://console.theo.live/) .
+
+Once you've entered your user name and password, you can already create your first channel and start streaming. There will be a 5-minute streaming cap and a THEOlive watermark in this free environment. To get access to unlimited streaming, you will have to complete your account and credit card details in the 'my account' section. Find more information on [How billing works for THEOlive](./billing).
+
+![](../assets/img/302e789-dashboard.png 'Homepage of the THEOlive management console')
+
+:::info 📘 API reference
+
+This guide describes how to get started with the THEOlive management console. Please consult the [API reference](https://developers.theo.live/reference/create-channel) and [Authorization](./authorization.mdx) if you would like to work with API calls. There is also a guide [Using Postman with THEOlive](https://developers.theo.live/docs/how-to-use-postmans-api-client-with-theolive) which describes how to use [Postman](https://www.postman.com/product/api-client/) for THEOlive API calls.
+:::
+
+## 2. Create your first channel
+
+Time to start streaming! In the management console, please click "create channel", which will return the following screen: here you can enter a name for your channel, choose the ingest location, and define your [Stream configuration](./stream-configuration). It is important to choose a location as close as possible to you to reduce latency. An overview of possible ingest locations can be found [here](./regions).
+
+![](../assets/img/b636bf5-create-channel.PNG 'Create a channel')
+
+When hitting 'Create', you will be navigated towards the Details page of your newly created channel.
+
+![](../assets/img/467abb8-overview.PNG 'Management console: Details page with the possibility to start your channel and options to customize your player.')
+
+A channel can also be created through an API call to the `channels` endpoint, passing an ingest location and a name. It will return an `id` that you can use to start, stop, update or delete the channel later on. Also, a `streamKey` and `rtmpPushUrl` will be returned to stream your content to. More information about the Create channel endpoint and how to pass advanced properties can be found [here](https://developers.theo.live/reference/create-channel).
+
+```curl
+curl --location --request POST 'https://api.theo.live/channels'
+--header 'Authorization: Basic dG9rZW46c2VjcmV0' \
+--header 'Content-Type: application/json' \
+--data-raw '{
+    "ingestLocation": "europe-west",
+    "metadata": {
+        "name": "a-name"
+    }
+}'
+```
+
+Note that for this API call you'll need a token that you can generate in the management console. More information can be found at the [Authorization](./authorization) guide.
+
+## 3. Start streaming
+
+Using the RTMP push URL and the stream key you have received when creating a channel, you can start streaming content to that RTMP endpoint.
+
+:::info 🚧 RTMP pull
+
+If you would like to do pull-based streaming instead of push-based streaming, you can also use your own RTMP pull endpoint and specify this when starting the channel in the next step.
+:::
+
+One option to start streaming content is making use of [OBS](https://obsproject.com/). It's an easy, free and quick way to get you started. More information on how to get started with OBS can be found in our guide [Using OBS with THEOlive](https://developers.theo.live/docs/using-obs-with-theolive). If you would be using [Wirecast](https://www.telestream.net/wirecast) for your live streaming, then more information on how to get started can be found in the guide [Using Wirecast with THEOlive](https://developers.theo.live/docs/using-wirecast-with-theolive). There are also guides for [vMix](https://developers.theo.live/docs/using-vmix-with-theolive) and [Videon Edgecaster](https://developers.theo.live/docs/using-videon-edgecaster-with-theolive).
+
+:::info ❗️ RTMPS vs RTMP
+
+The RTMP push URL generated by THEOlive shows as RTMPS. If you would like to do RTMP streaming then you will have to change "rtmps" to "rtmp". As an example, `rtmps://rtmp.europe-west.theo.live/live` will have to be changed to `rtmp://rtmp.europe-west.theo.live/live` for RTMP-based streaming.
+:::
+
+## 4. Player embed script
+
+Now we have to make sure that our viewers have access to the stream! Including a THEOlive channel on your page is very simple: all you need is our embed script and the channel ID. The [Player](https://developers.theo.live/docs/including-a-theolive-player-on-your-page) guide gives more information on how to do this, including a code snippet example.
+
+## 5. Start the channel
+
+When you're all set, you can start your THEOlive channel. Starting your channel also means your [transcoding time](https://www.theoplayer.com/pricing/theolive) will start counting for billing purposes.
+
+You can easily start your channel on the channel details page, by clicking on the green "start" button.
+
+![](../assets/img/cbe288c-start.PNG)
+
+In the background this will make a `POST` request to the `channels/start` endpoint. You can also start a channel via the Start channel API call, for which you can find more information [here](https://developers.theo.live/reference/start-channel). As mentioned in the last section, you can optionally pass the `rtmpPullUrl` property in the body of the request for pull-based streaming. Don't forget to stop streaming when you are done!
+
+```curl
+curl --location --request POST 'https://api.theo.live/channels/{channel-id}/start' \
+--header 'Authorization: Basic dG9rZW46c2VjcmV0' \
+--header 'Content-Type: application/json' \
+--data-raw '{
+    "rtmpPullUrl": "your-optional-rtmp-pull-url"
+}'
+```
+
+## 6. Stop the channel
+
+Have you finished your real-time streaming? Make sure to stop your channel by making a request to the `channels/stop` endpoint, either through a [Stop channel](https://developers.theo.live/reference/stop-channel) API call or by pressing the red "stop" button in the management console.
+
+```curl
+curl --location --request POST 'https://api.theo.live/channels/{channel-id}/stop' \
+--header 'Authorization: Basic dG9rZW46c2VjcmV0' \
+--header 'Content-Type: application/json'
+```

theolive/getting-started/manage-team.mdx

@@ -0,0 +1,53 @@
+---
+sidebar_position: 7
+---
+
+# How to manage your team
+
+Form a team with your colleagues and work together
+
+---
+
+When you sign up to the [THEOlive console](https://console.theo.live/login), you might want to work together with your colleagues on the same account and the same channels. This guide describes how to set this up.
+
+## 1. Manage your team
+
+### 1.1 - Access the team
+
+Click on the “My account” button, on the top right-hand corner of the screen and select _My Team_.
+
+![](../assets/img/22fb225-my-team.PNG 'My team in top right-hand corener menu')
+
+Here, you will see all the members that are part of your team, and the status for each of them.
+
+![](../assets/img/e35aec9-2.Team.PNG 'Team')
+
+:::warning 🚧 Only admins can access the _My Team_ section
+The _My Team_ section is only available for admins. If you don’t see the _My team_ button, this means you do not have admin rights at the moment. More information on roles can be found in the below section.
+:::
+
+### 1.2 - Add member
+
+To invite your colleagues, click on the _Add member_ button. Insert the desired email address, choose the role, and then click _Add_.
+
+![](../assets/img/fe6b54f-3._New_user.jpg 'New user')
+
+An invitation to join your THEOlive console account has now been sent to the email address, containing a link and instructions on how to access the console.
+
+It is also possible to re-send the invitation from the "My team" page, should it be needed. To do this, click on the envelope icon on the side of the account name (see screenshot below). Now, your invited colleagues can access the same console account. Back to the _My Team_ page, you will see the newly invited users:
+
+![](../assets/img/3030fa6-4.Whole_team.PNG 'Whole team')
+
+## 2. Determining the role of your new team members
+
+Two possible roles are defined in the console: **admin** and **user**. Both admin and user team members mostly have access to the same information and can perform the same actions. Key differences between these two roles are as follows:
+
+- Admin members can additionally access the pages related to managing the team and the billing details.
+- Admin members can grant or revoke admin access for all other team members, or remove them from the team.
+- Admin members can revoke tokens
+
+## 3. Complete your profile
+
+When invited to a THEOlive team, every team member has access to the _My profile_ page, where they can edit their first name, last name, phone number and change their password. This access is limited to the team member itself. Other users or admin team members cannot see (nor change) the personal info.
+
+![](../assets/img/3aad379-5.Personal_info.PNG 'Personal info')

theolive/getting-started/platforms.mdx

@@ -0,0 +1,40 @@
+---
+sidebar_position: 3
+---
+
+# Platforms
+
+THEOlive supports all major web platforms
+
+---
+
+THEOlive supports playback across all major web platforms. An overview of the supported platforms can be found below. If you have any questions in regards to supported platforms and capabilities, don’t hesitate to reach out to our team.
+
+## Desktop browser platforms
+
+| Browser                     | Version                           |
+| :-------------------------- | :-------------------------------- |
+| Edge (Chromium)             | Evergreen (last 3 major versions) |
+| Chrome (and Chromium based) | Evergreen (last 3 major versions) |
+| Firefox                     | Evergreen (last 3 major versions) |
+| Safari                      | 8+                                |
+
+## Mobile browser platforms
+
+| Browser                | Version                           |
+| :--------------------- | :-------------------------------- |
+| Chrome for Android     | Evergreen (last 3 major versions) |
+| Firefox for Android    | Evergreen (last 3 major versions) |
+| Safari for iOS (\*)    | Evergreen (last 3 major versions) |
+| Chrome for iOS (\*\*)  | Evergreen (last 3 major versions) |
+| Firefox for iOS (\*\*) | Evergreen (last 3 major versions) |
+
+(\*) The latency for iOS Safari is currently about 1.5 seconds. We're targeting sub-second latency in a next release.  
+(\*\*) Supported as of iOS14.
+
+## Native applications
+
+| OS      | Version |
+| :------ | :------ |
+| Android | 24+     |
+| iOS     | 14+     |