[docs] TypeScript docs - reference (#780)

compositor_api/src/types/component.rs

@@ -72,7 +72,7 @@ pub struct View {
     pub rotation: Option<f32>,
 
     /// Defines how this component will behave during a scene update. This will only have an
-    /// effect if the previous scene already contained a View component with the same id.
+    /// effect if the previous scene already contained a `View` component with the same id.
     pub transition: Option<Transition>,
 
     /// (**default=`"hidden"`**) Controls what happens to content that is too big to fit into an area.
@@ -159,7 +159,7 @@ pub struct Rescaler {
     pub rotation: Option<f32>,
 
     /// Defines how this component will behave during a scene update. This will only have an
-    /// effect if the previous scene already contained a View component with the same id.
+    /// effect if the previous scene already contained a `Rescaler` component with the same id.
     pub transition: Option<Transition>,
 }
 

docs/docusaurus.config.ts

@@ -117,7 +117,7 @@ const config: Config = {
       copyright: `Copyright © ${new Date().getFullYear()} Software Mansion S.A.`,
     },
     prism: {
-      theme: prismThemes.duotoneDark,
+      theme: prismThemes.oneDark,
       additionalLanguages: ['wgsl', 'http', 'elixir', 'bash'],
     },
     algolia: {

docs/pages/api/renderers/web.md

@@ -15,8 +15,8 @@ Before the web renderer can be used, you need to make sure that compositor with
 
 ## Environment variables
 
-- `LIVE_COMPOSITOR_WEB_RENDERER_ENABLE` (default: `false`) - enables web rendering capabilities.
-- `LIVE_COMPOSITOR_WEB_RENDERER_GPU_ENABLE` (default: `true`) - if enabled, websites are rendered on GPU. Otherwise, software based rendering is used.
+- `LIVE_COMPOSITOR_WEB_RENDERER_ENABLE` (default: `false`) - Enables web rendering capabilities.
+- `LIVE_COMPOSITOR_WEB_RENDERER_GPU_ENABLE` (default: `true`) - If enabled, websites are rendered on GPU. Otherwise, software based rendering is used.
 
 :::tip
 Read more about environment variables [here](../../deployment/configuration.md#environment-variables)

docs/pages/typescript/api.md

@@ -0,0 +1,167 @@
+---
+description: TypeScript SDK Reference
+---
+
+# Reference
+
+Packages like `@live-compositor/node` export `LiveCompositor` class that is a main entity used to interact with or control Live Compositor server instance.
+
+## `LiveCompositor`
+
+```tsx
+import LiveCompositor from "@live-compositor/node"
+```
+
+### `new LiveCompositor()` 
+
+```tsx
+new LiveCompositor(manager?: CompositorManager)
+```
+
+Creates new compositor configuration. You have to call `init` first before this object can be used.
+
+
+`CompositorManager` configures how the client code will connect and manage the LiveCompositor server.
+- (**default**) `LocallySpawnedInstance` from `@live-compositor/node` downloads LiveCompositor binaries and starts the server on the local machine.
+- `ExistingInstance` from `@live-compositor/node` connects to already existing compositor instance.
+
+### `init()`
+
+```tsx
+LiveCompositor.init(): Promise<void>
+```
+
+Initialize the LiveCompositor instance, depending on which `CompositorManager` you are using it might mean spawning
+new instance or just establishing connection.
+
+After this request you can start connecting inputs/outputs or register other elements. However, no output stream will
+be produced until `start()` method is called.
+
+### `start()`
+
+```tsx
+LiveCompositor.start(): Promise<void>
+```
+
+Starts the processing pipeline. Any previously registered output will start producing the video/audio stream.
+
+***
+
+### Outputs configuration
+
+#### Register output
+
+```tsx
+import { Outputs } from "live-compositor"
+
+LiveCompositor.registerOutput(
+  outputId: string,
+  output: Outputs.RegisterOutput,
+): Promise<object>
+```
+
+Register external destination that can be used as a compositor output. See outputs documentation to learn more:
+- [Rtp](./outputs/rtp.md)
+- [Mp4](./outputs/mp4.md)
+
+#### Unregister output
+
+```tsx
+LiveCompositor.unregisterOutput(outputId: string): Promise<void>
+```
+
+Unregister previously registered output.
+
+***
+
+### Inputs configuration
+
+#### Register input
+
+```tsx
+import { Inputs } from "live-compositor"
+
+LiveCompositor.registerInput(
+  inputId: string,
+  input: Inputs.RegisterInput,
+): Promise<object>
+```
+
+Register external source that can be used as a compositor input. See inputs documentation to learn more:
+- [RTP](./inputs/rtp.md)
+- [MP4](./inputs/mp4.md)
+
+#### Unregister input
+
+```tsx
+LiveCompositor.unregisterInput(inputId: string): Promise<void>
+```
+
+Unregister a previously registered input. 
+
+***
+
+### Renderers configuration
+
+#### Register image
+
+```tsx
+import { Renderers } from "live-compositor"
+
+LiveCompositor.registerImage(
+  imageId: string,
+  image: Renderers.RegisterImage,
+): Promise<void>
+```
+
+Register an image asset. See [`Renderers.RegisterImage`](./renderers/image.md) to learn more.
+
+#### Unregister image
+
+```tsx
+LiveCompositor.unregisterImage(imageId: string): Promise<void>
+```
+
+Unregister a previously registered image asset. 
+
+#### Register shader
+
+```tsx
+import { Renderers } from "live-compositor"
+
+LiveCompositor.registerShader(
+  shaderId: string,
+  shader: Renderers.RegisterShader,
+): Promise<void>
+```
+
+Register a shader. See [`Renderers.RegisterShader`](./renderers/shader.md) to learn more.
+
+#### Unregister shader
+
+```tsx
+LiveCompositor.unregisterShader(shaderId: string): Promise<void>
+```
+
+Unregister a previously registered shader. 
+
+#### Register web renderer instance
+
+```tsx
+import { Renderers } from "live-compositor"
+
+LiveCompositor.registerWebRenderer(
+  instanceId: string,
+  instance: Renderers.RegisterWebRenderer,
+): Promise<object>
+```
+
+Register a web renderer instance. See [`Renderer.RegisterWebRenderer`](./renderers/web.md) to learn more.
+
+#### Unregister web renderer instance
+
+```tsx
+LiveCompositor.unregisterWebRenderer(instanceId: string): Promise<void>
+```
+
+Unregister a previously registered web renderer. 

docs/pages/typescript/components/Image.md

@@ -0,0 +1,24 @@
+---
+sidebar_position: 7
+---
+# Image
+
+A component for rendering images.
+
+:::note
+To use this component, you need to first register the image with matching `imageId` using [`LiveCompositor.registerImage`](../api.md#register-image) request.
+:::
+
+## ImageProps
+
+```typescript
+type ImageProps = {
+  id?: string;
+  imageId: string;
+}
+
+```
+
+#### Properties
+- `id` - Id of a component. Defaults to value produced by `useId` hook.
+- `imageId` - Id of an image. It identifies an image registered using a [`LiveCompositor.registerImage`](../api.md#register-image) method.

docs/pages/typescript/components/InputStream.md

@@ -0,0 +1,27 @@
+---
+sidebar_position: 1
+---
+
+# InputStream
+
+`InputStream` component represents a registered input.
+
+:::note
+To use this component, you need to first register the stream with matching `inputId` using [`LiveCompositor.registerInput`](../api.md#register-input) method.
+:::
+
+## Props
+
+```typescript
+type InputStreamProps = {
+  id?: string;
+  inputId: string;
+  volume?: number;
+  mute?: boolean;
+}
+```
+
+- `id` - Id of a component. Defaults to value produced by `useId` hook.
+- `inputId` - Id of an input. It identifies a stream registered using a [`LiveCompositor.registerInput`](../api.md#register-input) method.
+- `volume` - (**default=`1`**) Audio volume represented by a number between 0 and 1.
+- `mute` - (**default=`false`**) Mute audio.

docs/pages/typescript/components/Rescaler.md

@@ -0,0 +1,109 @@
+---
+sidebar_position: 3
+---
+import AbsolutePositionDefinition from "@site/pages/common/absolute-position.md"
+
+# Rescaler
+
+`Rescaler` is a layout component responsible for rescaling other components.
+
+### Absolute positioning
+
+<AbsolutePositionDefinition />
+
+- `Rescaler` **does not** support absolute positioning for its child components. A child component will still be rendered, but all fields like `top`, `left`, `right`, `bottom`, and `rotation` will be ignored.
+- `Rescaler` can be absolutely positioned relative to its parent, if the parent component supports it.
+
+### Static positioning
+
+`Rescaler` always have exactly one child that will be proportionally rescaled to match the parent.
+
+### Transitions
+
+On the scene update, a `Rescaler` component will animate between the original state and the new one if the `transition` field is defined. Both the original and the new scene need to define a component with the same `id`. Currently, only some of the fields support animated transitions:
+
+- `width` / `height` - Only supported within the same positioning mode. If the positioning mode changes between the old scene and the new one, the transition will not work.
+- `bottom` / `top` / `left` / `right` / `rotation` - Only supports transition when changing a value of the same field. If the old scene defines a `left` field and the new one does not, the transition will not work.
+
+## RescalerProps
+
+```typescript
+type RescalerProps = {
+  id?: string;
+  children: ReactElement;
+  mode?: "fit" | "fill";
+  horizontalAlign?: "left" | "right" | "justified" | "center";
+  verticalAlign?: "top" | "center" | "bottom" | "justified";
+  width?: number;
+  height?: number;
+  top?: number;
+  left?: number;
+  bottom?: number;
+  right?: number;
+  rotation?: number;
+  transition?: Transition;
+}
+```
+
+- `id` - Id of a component. Defaults to value produced by `useId` hook.
+- `children` - Rescaler accepts exactly one child component.
+- `mode` - (**default=`"fit"`**) Resize mode:
+  - `"fit"` - Resize the component proportionally, so one of the dimensions is the same as its parent,
+    but it still fits inside it.
+  - `"fill"` - Resize the component proportionally, so one of the dimensions is the same as its parent
+    and the entire area of the parent is covered. Parts of a child that do not fit inside the parent are not rendered.
+- `horizontalAlign` - (**default=`"center"`**) Horizontal alignment.
+- `verticalAlign` - (**default=`"center"`**) Vertical alignment.
+- `width` - Width of a component in pixels. Exact behavior might be different based on the parent
+  component:
+  - If the parent component is a layout, check sections "Absolute positioning" and "Static
+  positioning" of that component.
+  - If the parent component is not a layout, then this field is required.
+- `height` - Height of a component in pixels. Exact behavior might be different based on the parent
+  component:
+  - If the parent component is a layout, check sections "Absolute positioning" and "Static
+  positioning" of that component.
+  - If the parent component is not a layout, then this field is required.
+- `top` - Distance in pixels between this component's top edge and its parent's top edge.
+  If this field is defined, then the component will ignore a layout defined by its parent.
+- `left` - Distance in pixels between this component's left edge and its parent's left edge.
+  If this field is defined, this element will be absolutely positioned, instead of being
+  laid out by its parent.
+- `bottom` - Distance in pixels between this component's bottom edge and its parent's bottom edge.
+  If this field is defined, this element will be absolutely positioned, instead of being
+  laid out by its parent.
+- `right` - Distance in pixels between this component's right edge and its parent's right edge.
+  If this field is defined, this element will be absolutely positioned, instead of being
+  laid out by its parent.
+- `rotation` - Rotation of a component in degrees. If this field is defined, this element will be
+  absolutely positioned, instead of being laid out by its parent.
+- `transition` - Defines how this component will behave during a scene update. This will only have an
+  effect if the previous scene already contained a `Rescaler` component with the same id.
+
+## Transition
+```typescript
+type Transition = {
+  durationMs: number;
+  easingFunction?: EasingFunction;
+}
+```
+
+- `duration_ms` - Duration of a transition in milliseconds.
+- `easing_function` - (**default=`"linear"`**) Easing function to be used for the transition.
+
+## EasingFunction
+
+```typescript
+type EasingFunction = 
+  | "linear"
+  | "bounce"
+  | {
+      functionName: "cubic_bezier";
+      points: [number, number, number, number];
+    }
+```
+Easing functions are used to interpolate between two values over time.
+
+Custom easing functions can be implemented with cubic Bézier.
+The control points are defined with `points` field by providing four numerical values: `x1`, `y1`, `x2` and `y2`. The `x1` and `x2` values have to be in the range `[0; 1]`. The cubic Bézier result is clamped to the range `[0; 1]`.
+You can find example control point configurations [here](https://easings.net/).