Write more documentation

.docs/content/1.Get Started/0.introduction.md

@@ -1,7 +1,14 @@
 # Introduction
 
-- What is this project
-- How does it work?
-- What environments can it be ran in?
+## What is `@movie-web/providers`?
 
-TODO
+`@movie-web/providers` is the soul of [movie-web.app](https://movie-web.app). It's a collection of scrapers of various streaming sites. It extracts the raw streams from those sites, so you can watch them without any extra fluff from the original sites.
+
+## What can I use this on?
+
+We support many different environments, here are a few examples:
+ - In browser, watch streams without needing a server to scrape (does need a proxy)
+ - In a native app, scrape in the app itself
+ - In a backend server, scrape on the server and give the streams to the client to watch.
+
+To find out how to configure the library for your environment, You can read [How to use on X](../2.Essentials/0.usage-on-x.md).

.docs/content/1.Get Started/3.examples.md

@@ -1,5 +1,5 @@
 # Examples
 
-- list a few examples, just link to github folders
-
-TODO
+::alert{type="warning"}
+There are no examples yet, stay tuned!
+::

.docs/content/2.Essentials/3.customize-providers.md

@@ -1,7 +1,74 @@
 # Customize providers
 
-- use makeProviders()
-- use buildProviders()
-- only use some providers
+You make a provider controls in two ways. Either with `makeProviders()` (the simpler option) or with `buildProviders()` (more elaborate and extensive option).
 
-TODO
+## `makeProviders()` (simple)
+
+To know what to set the configuration to, you can read [How to use on X](./0.usage-on-x.md) for a detailed guide on how to configure your controls.
+
+```ts
+const providers = makeProviders({
+  // fetcher, every web request gets called through here
+  fetcher: makeStandardFetcher(fetch),
+  
+  // proxied fetcher, if the scraper needs to access a CORS proxy. this fetcher will be called instead
+  // of the normal fetcher. Defaults to the normal fetcher.
+  proxiedFetcher: undefined;
+
+  // target of where the streams will be used
+  target: targets.NATIVE;
+
+  // Set this to true, if the requests will have the same IP as
+  // the device that the stream will be played on.
+  consistentIpForRequests: false;
+})
+
+```
+
+## `buildProviders()` (advanced)
+
+To know what to set the configuration to, you can read [How to use on X](./0.usage-on-x.md) for a detailed guide on how to configure your controls.
+
+### Standard setup
+
+```ts
+const providers = buildProviders()
+  .setTarget(targets.NATIVE) // target of where the streams will be used
+  .setFetcher(makeStandardFetcher(fetch)) // fetcher, every web request gets called through here
+  .addBuiltinProviders() // add all builtin providers, if this is not called, no providers will be added to the controls
+  .build();
+```
+
+### Adding only select few providers
+
+Not all providers are great quality, so you can make a instance of the controls with only the providers you want.
+
+```ts
+const providers = buildProviders()
+  .setTarget(targets.NATIVE) // target of where the streams will be used
+  .setFetcher(makeStandardFetcher(fetch)) // fetcher, every web request gets called through here
+  .addSource('showbox') // only add showbox source
+  .addEmbed('febbox-hls') // add febbox-hls embed, which is returned by showbox
+  .build();
+```
+
+
+### Adding your own scrapers to the providers
+
+If you have your own scraper and still want to use the nice utils of the provider library or just want to add on to the builtin providers. You can add your own custom source.
+
+```ts
+const providers = buildProviders()
+  .setTarget(targets.NATIVE) // target of where the streams will be used
+  .setFetcher(makeStandardFetcher(fetch)) // fetcher, every web request gets called through here
+  .addSource({ // add your own source
+    id: 'my-scraper',
+    name: 'My scraper',
+    rank: 800,
+    flags: [],
+    scrapeMovie(ctx) {
+      throw new Error("Not implemented");
+    }
+  })
+  .build();
+```

.docs/content/2.Essentials/4.using-streams.md

@@ -1,6 +1,84 @@
 # Using streams
 
-- How to use the outputs
-- file based streams VS hls
+Streams can sometimes be quite picky on how they can be used. So here is a guide on how to use them.
 
-TODO
+## Essentials
+
+All streams have the same common parameters:
+ - `Stream.type`: The type of stream. Either `hls` or `file`
+ - `Stream.id`: The id of this stream, unique per scraper output.
+ - `Stream.flags`: A list of flags that apply to this stream. Most people won't need to use it.
+ - `Stream.captions`: A list of captions/subtitles for this stream.
+ - `Stream.headers`: Either undefined or a key value object of headers you must set to use the stream.
+ - `Stream.preferredHeaders`: Either undefined or a key value object of headers you may want to set if you want optimal playback - but not required.
+
+Now let's delve deeper into how to actually watch these streams!
+
+## Streams with type `hls`
+
+HLS streams can be tough to watch, it's not a normal file you can just use.
+These streams have an extra property `Stream.playlist` which contains the m3u8 playlist.
+
+Here is a code sample of how to use HLS streams in web context using hls.js
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script>
+
+<video id="video"></video>
+<script>
+  const stream = null; // add your stream here
+
+  if (Hls.isSupported()) {
+    var video = document.getElementById('video');
+    var hls = new Hls();
+    hls.loadSource(stream.playlist);
+    hls.attachMedia(video);
+  }
+</script>
+```
+
+## Streams with type `file`
+
+File streams are quite easy to use, it just returns a new property: `Stream.qualities`.
+This property is a map of quality and a stream file. So if you want to get 1080p quality you do `stream["1080"]` to get your stream file. It will return undefined if there is no quality like that.
+
+The possibly qualities are: `unknown`, `360`, `480`, `720`, `1080`, `4k`.
+File based streams are garuanteed to always have one quality.
+
+Once you get a streamfile, you have the following parameters:
+ - `StreamFile.type`: Right now it can only be `mp4`.
+ - `StreamFile.url`: The URL linking to the video file.
+
+Here is a code sample of how to watch a file based stream the video in a browser:
+
+```html
+<video id="video"></video>
+<script>
+  const stream = null; // add your stream here
+  const video = document.getElementById('video');
+
+  const qualityEntries = Object.keys(stream.qualities);
+  const firstQuality = qualityEntries[0];
+  video.src = firstQuality.url;
+</script>
+```
+
+## Streams with headers
+
+Streams have both a `Stream.headers` and a `Stream.preferredHeaders`.
+The difference between the two is that `Stream.headers` **must** be set in other for the stream to work. While the other one is optional, and can only enhance the quality or performance.
+
+If your target is set to `BROWSER`. There will never be required headers, as it's not possible to do.
+
+## Using captions/subtitles
+
+All streams have a list of captions at `Stream.captions`. The structure looks like this:
+```ts
+type Caption = {
+  type: CaptionType; // language type, either 'srt' or 'vtt'
+  id: string; // only unique per stream
+  url: string; // the url pointing to the subtitle file
+  hasCorsRestrictions: boolean; // If true, you will need to proxy it if you're running in a browser
+  language: string; // language code of the caption
+};
+```

.docs/content/3.In-depth/0.sources-and-embeds.md

@@ -1,6 +1,11 @@
 # Sources vs embeds
 
+::alert{type="warning"}
+This page isn't quite done yet, stay tuned!
+::
+
+<!--
+TODO
 - How do sources and embeds differ
 - How do sources and embeds interact
-
-TODO
+-->

.docs/content/3.In-depth/1.new-providers.md

@@ -1,7 +1,12 @@
 # New providers
 
+::alert{type="warning"}
+This page isn't quite done yet, stay tuned!
+::
+
+<!--
+TODO
 - How to make new sources or embeds
 - Ranking
 - Link to flags
-
-TODO
+-->

.docs/content/3.In-depth/2.flags.md

@@ -1,6 +1,10 @@
 # Flags
 
-- what are flags?
-- list of all flags and their meaning
+Flags is the primary way the library seperates entities between different environments.
+For example some sources only give back content that has the CORS headers set to allow anyone, so that source gets the flag `CORS_ALLOWED`. Now if you set your target to `BROWSER`, sources without that flag won't even get listed.
 
-TODO
+This concept is applied in multiple away across the library.
+
+## Flag options
+ - `CORS_ALLOWED`: Headers from the output streams are set to allow any origin.
+ - `IP_LOCKED`: The streams are locked by ip, requester and watcher must be the same.

.docs/content/4.Extra topics/0.development.md

@@ -1,9 +1,14 @@
 # Development / contributing
 
+::alert{type="warning"}
+This page isn't quite done yet, stay tuned!
+::
+
+<!--
+TODO
 - Development setup
 - How to make new sources/embeds (link to the page)
 - How to use the fetchers, when to use proxiedFetcher
 - How to use the context
 - Testing of contributions
-
-TODO
+-->

.docs/content/5.Api reference/0.makeProviders.md

@@ -1,6 +1,6 @@
 # `makeProviders`
 
-Make an instance of providers with configuration. 
+Make an instance of provider controls with configuration. 
 This is the main entrypoint of the library. It is recommended to make one instance globally and reuse it throughout your application.
 
 ## Example

.docs/content/5.Api reference/7.makeStandardFetcher.md

@@ -1,6 +1,6 @@
 # `makeStandardFetcher`
 
-Make a fetcher from a `fetch()` API. It is used for making a instance of providers with `makeProviders()`.
+Make a fetcher from a `fetch()` API. It is used for making a instance of provider controls.
 
 ## Example
 
@@ -8,13 +8,13 @@ Make a fetcher from a `fetch()` API. It is used for making a instance of provide
 import { targets, makeProviders, makeDefaultFetcher } from "@movie-web/providers";
 
 const providers = makeProviders({
-  fetcher: makeDefaultFetcher(fetch),
-  target: targets.NATIVE,
+  fetcher: makeStandardFetcher(fetch),
+  target: targets.ANY,
 });
 ```
 
 ## Type
 
 ```ts
-function makeDefaultFetcher(fetchApi: typeof fetch): Fetcher;
+function makeStandardFetcher(fetchApi: typeof fetch): Fetcher;
 ```

src/providers/streams.ts

@@ -4,7 +4,6 @@ import { Caption } from '@/providers/captions';
 export type StreamFile = {
   type: 'mp4';
   url: string;
-  headers?: Record<string, string>;
 };
 
 export type Qualities = 'unknown' | '360' | '480' | '720' | '1080' | '4k';