Redo folder structure

.docs/content/2.essentials/0.usage-on-x.md

@@ -0,0 +1,50 @@
+# How to use on X
+
+The library can run in many environments, so it can be tricky to figure out how to set it up.
+
+So here is a checklist, for more specific environments, keep reading below:
+ - When requests are very restricted (like browser client-side). Configure a proxied fetcher.
+ - When your requests come from the same device it will be streamed on (Not compatible with proxied fetcher). Set `consistentIpForRequests: true`.
+ - To set a target. Consult [Targets](./1.targets.md).
+
+To make use of the examples below, You check check out the following pages:
+ - [Quick start](../1.get-started/1.quick-start.md)
+ - [Using streams](../2.essentials/4.using-streams.md)
+
+## NodeJs server
+```ts
+import { makeProviders, makeStandardFetcher, targets } from '@movie-web/providers';
+
+const providers = makeProviders({
+  fetcher: makeStandardFetcher(fetch),
+  target: chooseYourself, // check out https://providers.docs.movie-web.app/essentials/targets
+})
+```
+
+## Browser client-side
+
+Doing client-side usage of the provider package requires a hosted version of simple-proxy.
+Read more [about proxy fetchers](./2.fetchers.md#using-fetchers-on-the-browser).
+
+```ts
+import { makeProviders, makeStandardFetcher, targets } from '@movie-web/providers';
+
+const proxyUrl = "https://your.proxy.workers.dev/";
+
+const providers = makeProviders({
+  fetcher: makeStandardFetcher(fetch),
+  proxiedFetcher: makeSimpleProxyFetcher(proxyUrl, fetch),
+  target: target.BROWSER,
+})
+```
+
+## React native
+```ts
+import { makeProviders, makeStandardFetcher, targets } from '@movie-web/providers';
+
+const providers = makeProviders({
+  fetcher: makeStandardFetcher(fetch),
+  target: target.NATIVE,
+  consistentIpForRequests: true,
+})
+```

.docs/content/2.essentials/1.targets.md

@@ -0,0 +1,14 @@
+# Targets
+
+When creating provider controls, you will immediately be required to choose a target.
+
+::alert{type="warning"}
+A target is the device where the stream will be played on.
+**Where the scraping is run has nothing to do with the target**, only where the stream is finally played in the end is significant in choosing a target.
+::
+
+#### Possible targets
+- **`targets.BROWSER`** Stream will be played in a browser with CORS
+- **`targets.BROWSER_EXTENSION`** Stream will be played in a browser using the movie-web extension (WIP)
+- **`targets.NATIVE`** Stream will be played on a native video player
+- **`targets.ANY`** No restrictions for selecting streams, will just give all of them

.docs/content/2.essentials/2.fetchers.md

@@ -0,0 +1,74 @@
+# Fetchers
+
+When creating provider controls, it will need you to configure a fetcher.
+This comes with some considerations depending on the environment youre running.
+
+## Using `fetch()`
+In most cases, you can use the `fetch()` API. This will work in newer versions of Node.js (18 and above) and on the browser.
+
+```ts
+const fetcher = makeStandardFetcher(fetch);
+```
+
+If you using older version of Node.js. You can use the npm package `node-fetch` to polyfill fetch:
+
+```ts
+import fetch from "node-fetch";
+
+const fetcher = makeStandardFetcher(fetch);
+```
+
+## Using fetchers on the browser
+When using this library on a browser, you will need a proxy. Browsers come with many restrictions on when a web request can be made, and to bypass those restrictions, you will need a cors proxy.
+
+The movie-web team has a proxy pre-made and pre-configured for you to use. For more information, check out [movie-web/simple-proxy](https://github.com/movie-web/simple-proxy). After installing, you can use this proxy like so:
+
+```ts
+const fetcher = makeSimpleProxyFetcher("https://your.proxy.workers.dev/", fetch);
+```
+
+If you aren't able to use this specific proxy and need to use a different one, you can make your own fetcher in the next section.
+
+## Making a derived fetcher
+
+In some rare cases, a custom fetcher will need to be made. This can be quite difficult to do from scratch so it's recommended to base it off an existing fetcher and building your own functionality around it.
+
+```ts
+export function makeCustomFetcher(): Fetcher {
+  const fetcher = makeStandardFetcher(f);
+  const customFetcher: Fetcher = (url, ops) => {
+    // Do something with the options and url here
+    return fetcher(url, ops);
+  };
+
+  return customFetcher;
+}
+```
+
+If you need to make your own fetcher for a proxy. Make sure you make it compatible with the following headers: `Set-Cookie`, `Cookie`, `Referer`, `Origin`. Proxied fetchers need to be able to write/read those headers when making a request.
+
+
+## Making a fetcher from scratch
+
+In some even rare cases, you need to make one completely from scratch.
+This is the list of features it needs:
+ - Send/read every header
+ - Parse JSON, otherwise parse as text
+ - Send JSON, Formdata or normal strings
+ - get final destination url
+
+It's not recommended to do this at all, but if you have to. You can base your code on the original implementation of `makeStandardFetcher`. Check the source code for it.
+
+Here is a basic template on how to make your own custom fetcher:
+
+```ts
+const myFetcher: Fetcher = (url, ops) => {
+  // Do some fetching
+  return {
+    body: {},
+    finalUrl: "",
+    headers: new Headers(), // should only contain headers from ops.readHeaders
+    statusCode: 200,
+  };
+}
+```

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

@@ -0,0 +1,74 @@
+# Customize providers
+
+You make a provider controls in two ways. Either with `makeProviders()` (the simpler option) or with `buildProviders()` (more elaborate and extensive option).
+
+## `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

@@ -0,0 +1,84 @@
+# Using streams
+
+Streams can sometimes be quite picky on how they can be used. So here is a guide on how to use them.
+
+## 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/2.essentials/_dir.yml

@@ -0,0 +1,3 @@
+icon: ph:info-fill
+navigation.redirect: /essentials/usage
+navigation.title: "Get started"