Add additional docs

.gitattributes

@@ -4,3 +4,20 @@ docs/tutorial/broadcaster/canvas_resolution.png filter=lfs diff=lfs merge=lfs -t
 docs/tutorial/broadcaster/client_empty.png filter=lfs diff=lfs merge=lfs -text
 docs/tutorial/broadcaster/client_startup.png filter=lfs diff=lfs merge=lfs -text
 docs/tutorial/broadcaster/download_client.png filter=lfs diff=lfs merge=lfs -text
+docs/console/add_asset_button.png filter=lfs diff=lfs merge=lfs -text
+docs/console/admin_console_overview.png filter=lfs diff=lfs merge=lfs -text
+docs/console/broadcast_view_modified_asset.png filter=lfs diff=lfs merge=lfs -text
+docs/console/show_asset.png filter=lfs diff=lfs merge=lfs -text
+docs/tutorial/channel_admin/empty_canvas.png filter=lfs diff=lfs merge=lfs -text
+docs/console/assets/scripts/script_asset_example.png filter=lfs diff=lfs merge=lfs -text
+docs/console/modified_asset.png filter=lfs diff=lfs merge=lfs -text
+docs/tutorial/channel_admin/open_cavnas.png filter=lfs diff=lfs merge=lfs -text
+docs/console/assets/scripts/rotate_asset.png filter=lfs diff=lfs merge=lfs -text
+docs/console/uploaded_asset.png filter=lfs diff=lfs merge=lfs -text
+docs/tutorial/broadcaster/window_stretched.png filter=lfs diff=lfs merge=lfs -text
+docs/console/assets/scripts/create.png filter=lfs diff=lfs merge=lfs -text
+docs/tutorial/broadcaster/add_window.png filter=lfs diff=lfs merge=lfs -text
+docs/tutorial/broadcaster/integrations_dashboard.png filter=lfs diff=lfs merge=lfs -text
+docs/tutorial/broadcaster/window_added.png filter=lfs diff=lfs merge=lfs -text
+docs/console/assets/scripts/rotate.gif filter=lfs diff=lfs merge=lfs -text
+docs/console/assets/scripts/script_asset_broadcaster_view.gif filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1 @@
+*.egg-info

Makefile

@@ -1,4 +1,6 @@
-venv:
-	python3 -m venv --copies venv
-	. venv/bin/activate
-	python3 -m pip install black flake8 isort mypy
+.ONESHELL:
+.DELETE_ON_ERROR:
+
+.PHONY: serve
+serve:
+	uv run mkdocs serve

docs/console/assets/audio.md

@@ -0,0 +1,9 @@
+# Audio asssets
+
+Audio assets are sound files that can be added to the broadcast. They support common audio formats such as MP3 and OGG. For a full list of supported formats, refer to the [developer documentation for the Imgfloat server](https://github.com/imgfloat/server)
+
+Audio assets do not have a visual representation on the broadcast canvas, but they can be managed through the asset list on the left side of the admin console. Once added, audio assets can be played manually, or automatically loop by checking the "Loop" option in the asset details panel when selected.
+
+In addition, the playback speed, pitch, volume and delay duration between loops can be controlled through the asset details panel.
+
+If further customization is needed, consider using [a script asset](./scripts/overview.md) to control audio playback programmatically.

docs/console/assets/images.md

@@ -0,0 +1,9 @@
+# Image assets
+
+Image assets are static images that can be added to the broadcast canvas. They support common image formats such as PNG and JPEG. For a full list of supported formats, refer to the [developer documentation for the Imgfloat server](https://github.com/imgfloat/server).
+
+Image assets can be resized, repositioned, shown or hidden and rotated using the canvas controls or the asset details panel when selected. All updates of these kinds are instantly reflected in the broadcast view.
+
+Image assets can be loaded by uploading a file using the 'Add asset' button and selecting a local file.
+
+While GIF files are considered images traditionally, Imgfloat treats them as videos, as they are converted behind the scenes. This allows for better control over playback and performance. Refer to the [video assets](./videos.md) section for more information on how to use GIFs in Imgfloat.

docs/console/assets/scripts/attachments.md

@@ -0,0 +1,45 @@
+# Using attachments
+
+> **_NOTE:_**  The interface currently doesn't support adding attachments before the asset is created. To add attachments, first create the script asset, then open it for editing to add the attachments.
+
+Attachments allow you to include additional files for use in your custom script assets, such as images, documents, or other media. These files can be accessed and manipulated through your script's JavaScript code, enabling you to create more dynamic and interactive overlays.
+
+Let's create a custom script asset, which has a single image asset, which is continously rotated on the canvas:
+
+![Rotating image attachment](./rotate_asset.png)
+
+```javascript
+async function init(context, state) {
+    const asset = Array.isArray(context.assets) ? context.assets[0] : null;
+    if (!asset?.blob) {
+        return;
+    }
+    state.rotation = 0;
+    state.imageReady = false;
+    state.image = await createImageBitmap(asset.blob);
+    state.imageReady = true;
+}
+
+function tick(context, state) {
+    const { ctx, width, height, deltaMs } = context;
+    if (!ctx) {
+        return;
+    }
+    ctx.clearRect(0, 0, width, height);
+    const image = state?.image;
+    if (!image || !state.imageReady) {
+        return;
+    }
+    const size = Math.min(width, height) * 0.35;
+    state.rotation = (state.rotation + (deltaMs || 0) * 0.002) % (Math.PI * 2);
+    ctx.save();
+    ctx.translate(width / 2, height / 2);
+    ctx.rotate(state.rotation);
+    ctx.drawImage(image, -size / 2, -size / 2, size, size);
+    ctx.restore();
+}
+```
+
+The final result looks like this in the broadcaster view:
+
+![Rotating image attachment broadcaster view](./rotate.gif)

docs/console/assets/scripts/chat.md

@@ -0,0 +1,5 @@
+# Reading chat
+
+> **_NOTE:_**  Reading chat messages requires enabling the "Chat access" integration for your channel. Ask your broadcaster to enable this integration from the dashboard. For more information, refer to the [Integrations](../../../tutorial/broadcaster/integrations.md) guide.
+
+Chat messages can be read using script assets. This allows for creating dynamic overlays that respond to chat activity, such as displaying recent messages or highlighting messages with specific keywords. It can also be used to trigger on-demand events, like displaying a special animation when a viewer types a specific command.

docs/console/assets/scripts/example.md

@@ -0,0 +1,33 @@
+# Script asset example
+
+This example script asset renders a circle on screen, that changes color every second.
+
+```javascript
+function init(context, state) {}
+
+function tick(context, state) {
+    const { ctx, width, height, elapsedMs } = context;
+
+    ctx.clearRect(0, 0, width, height);
+
+    const seconds = Math.floor(elapsedMs / 1000);
+    const r = (seconds * 50) % 256;
+    const g = (seconds * 80) % 256;
+    const b = (seconds * 110) % 256;
+    const color = `rgb(${r}, ${g}, ${b})`;
+
+    const radius = 50;
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.arc(width / 2, height / 2, radius, 0, Math.PI * 2);
+    ctx.fill();
+}
+```
+
+Here's what it looks like in the admin console view:
+
+![Script asset example](./script_asset_example.png)
+
+And here's what it looks like in the broadcaster view:
+
+![Script asset broadcaster view](./script_asset_broadcaster_view.gif)

docs/console/assets/scripts/overview.md

@@ -0,0 +1,104 @@
+# Script assets
+
+Script assets are customizable assets containing JavaScript code that runs in the context of the broadcast. They allow for advanced functionality and interactivity beyond what standard file assets provide. Script assets exist in their own layer and cannot modify other assets directly, but they can respond to events and manipulate their own properties at will.
+
+## Structure
+
+A script asset consists of the following components:
+
+* Title
+* Description
+* JavaScript code
+* Logo (optional)
+* Attachments (optional)
+
+![Create](./create.png)
+
+It is also possible to select the 'Make script public in the marketplace' option. This will make the script available for other Imgfloat users to add to their broadcasts through the asset marketplace. Users who import your script will be able to customize its settings, but cannot modify your copy.
+
+## JavaScript API
+
+The JavaScript code must conform to the following format:
+
+```typescript
+type Asset = {
+    id: string;
+    url?: string;
+    name?: string;
+    mediaType?: string;
+    blob?: Blob;
+    [key: string]: any;
+};
+
+
+type ChatTextFragment = {
+    type: "text";
+    text: string;
+}
+
+type ChatEmoteFragment = {
+    type: "emote";
+    id: string;
+    name: string;
+    text: string;
+    url: string;
+}
+
+type ChatSystemFragment = {
+    type?: string;
+    text?: string;
+    url?: string;
+    [key: string]: any;
+}
+
+type ChatFragment = ChatTextFragment | ChatEmoteFragment | ChatSystemFragment
+
+type ChatMessage = {
+    message?: string;
+    fragments?: ChatFragment[];
+    timestamp?: number;
+    displayName?: string;
+    tags?: {
+        color?: string;
+        [key: string]: any;
+    };
+    [key: string]: any;
+};
+
+type EmoteCatalogEntry = {
+    id?: string;
+    name?: string;
+    url?: string;
+    [key: string]: any;
+};
+
+type ScriptContext = {
+    canvas: OffscreenCanvas;
+    ctx: OffscreenCanvasRenderingContext2D;
+    channelName: string;
+    width: number;
+    height: number;
+    now: number;        
+    deltaMs: number;    
+    elapsedMs: number;  
+    assets: Asset[];
+    chatMessages: ChatMessage[];
+    emoteCatalog: EmoteCatalogEntry[];
+    playAudio: (attachment: string | { id?: string } | null | undefined) => void;
+};
+```
+
+Where the final script conforms to:
+
+```ts
+type ScriptInstance = {
+    init: (context: ScriptContext, state: any) => void | Promise<void>;
+    tick: (context: ScriptContext, state: any) => void;
+};
+```
+
+Although the types here are defined in TypeScript notation for clarity, the actual script code should be written in plain JavaScript.
+
+While the context is pre-defined, the state is completely up to the script author. The state object is persistent between calls to `tick` and can be used to store any data the script needs to maintain.
+
+Let's see this in practice with a simple example in the next section.

docs/console/assets/videos.md

@@ -0,0 +1,7 @@
+# Video assets
+
+Video assets are media files that can be added to the broadcast canvas. They support common video formats such as MP4 and WebM. For a full list of supported formats, refer to the [developer documentation for the Imgfloat server](https://github.com/imgfloat/server). In addition to traditional image formats, GIF files are also treated as video assets in Imgfloat. This allows for better control over playback and performance. Uploading a GIF file will convert it to a video format behind the scenes.
+
+Video assets support the same manipulation options as image assets, including resizing, repositioning, showing or hiding, and rotating using the canvas controls or the asset details panel when selected. All updates of these kinds are instantly reflected in the broadcast view. In addition, video assets support modification of the playback speed and volume through the asset details panel.
+
+Video assets will continuously loop during playback by default. If you need fine grained control over when videos play, consider using [a script asset](./scripts/overview.md) instead.

docs/console/first.md

@@ -0,0 +1,25 @@
+# Adding your first asset
+
+To add your first asset to the broadcast canvas, click the "Add asset" button in the top left corner of the admin console.
+
+![Add asset button](./add_asset_button.png)
+
+Select 'Upload asset' and select an image file on your machine. Once uploaded, the asset will appear in the asset list on the left side of the admin console, as well as on the broadcast canvas on the right side.
+
+![Uploaded asset](./uploaded_asset.png)
+
+You can now click and drag the asset on the canvas to reposition it. You can also use the handles around the asset to resize it. The position and size of the asset can also be adjusted more precisely using the controls in the asset details panel that appears when you select the asset in the asset list.
+
+By default, assets are hidden. This is indicated on the left in the assets menu, and by displaying the asset transparently on the canvas. To make the asset visible in the broadcast, click the eye icon next to the asset in the asset list.
+
+![Show asset](./show_asset.png)
+
+Let's try manipulating the asset a bit. Open the broadcaster view by clicking the "Broadcast view" button in the top bar in a new window. This view simulates what the broadcaster will see in their stream. Now, go back to the admin console and try moving and resizing the asset. You should see the changes reflected in real-time in the broadcaster view.
+
+![Modified asset](./modified_asset.png)
+
+![Broadcast view modified asset](./broadcast_view_modified_asset.png)
+
+Let's now clean up the console. Select the asset in the asset list and press 'Delete', 'Backspace', or click the trash can icon in the asset details panel to remove the asset from the broadcast canvas.
+
+Imgfloat supports a wide range of asset types. Let's learn about them in the next sections.

docs/console/overview.md

@@ -0,0 +1,9 @@
+# Admin console
+
+The admin console is the control center for your Imgfloat broadcasts. From here, you can manage your asset live. The user interface is broken up into two distinct sections: the asset list on the left and the canvas view on the right. The canvas view on the right will display the layout that appears in the broadcast, while the asset list on the left allows you to manage and configure the individual assets that make up the broadcast.
+
+![Admin console overview](./admin_console_overview.png)
+
+If you prefer to see the actual interface that is shown to the broadcaster you can open the broadcast view with the "Broadcast view" in the top bar.
+
+Let's start by adding our first asset.

docs/tutorial/broadcaster/audit_log.md

@@ -0,0 +1 @@
+# TODO

docs/tutorial/broadcaster/integrations.md

@@ -0,0 +1,19 @@
+# Integrations
+
+Your broadcast can be enchanced with various integrations that work seamlessly with Imgfloat. You can see the available integrations on the Imgfloat dashboard:
+
+![Integrations dashboard](./integrations_dashboard.png)
+
+By enabling each integration you allow custom script assets to pull information from the respective service. Your channel administrators can use this information to create dynamic overlays that respond to events on your channel.
+
+## Twitch emotes
+
+Enabling Twitch emotes allows channel administrators to use global Twitch emotes as well as emotes specific for your channel, like those for subscribers.
+
+## 7TV emotes
+
+Enabling 7TV emotes allows channel administrators to use 7TV emotes, that you've enabled for your channel.
+
+## Chat access
+
+Enabling chat access allows channel administrators to create overlays that respond to chat messages, such as displaying recent messages or highlighting messages with specific keywords. It can also be used to trigger on demand events, like displaying a special animation when a viewer types a specific command.

docs/tutorial/broadcaster/obs.md

@@ -2,4 +2,14 @@
 
 To add the Imgfloat client window to OBS, start by opening OBS and adding a new source. Select "Window Capture" as the source type.
 
+![Add window](./add_window.png)
 
+Select the new window source and resize it to cover your scene completely. The window is configured to be exactly the size defined on your broadcast canvas, plus the window frame, so position the window frame just outside the visible area.
+
+![Window added](./window_added.png)
+
+![Window stretched](./window_stretched.png)
+
+You can always test the setup by adding a simple image asset to the admin console and move it to each edge. The edges of the admin console should line up perfectly with the edges of your OBS scene.
+
+That's it! You're now ready to use imgfloat. Next, check out the integrations available for your broadcast.

docs/tutorial/channel_admin/overview.md

@@ -0,0 +1,15 @@
+# Getting started as a channel administrator
+
+Sign in with your Twitch account on [imgflo.at](https://imgflo.at) (or on your own instance) to register with the application.
+
+In order to modify the broadcast canvas for a specific broadcaster, you need to be added as a channel administrator by that broadcaster. Refer to the [Getting started as a broadcaster](../broadcaster/overview.md) guide for more information on how broadcasters can add you as an administrator.
+
+Once added you can access the channel admin dashboard from the dashboard:
+
+![Open canvas](./open_cavnas.png)
+
+Assuming you're the first channel administrator the view will look something like this:
+
+![Empty canvas](./empty_canvas.png)
+
+Now you're ready to start adding assets to the canvas!

mkdocs.yml

@@ -14,15 +14,14 @@ nav:
   - Getting Started:
     - Broadcaster: 
       - Getting Started: tutorial/broadcaster/overview.md
-      - OBS setup: tutorial/broadcaster/obs.md
+      - OBS Setup: tutorial/broadcaster/obs.md
       - Integrations: tutorial/broadcaster/integrations.md
+      - Audit Log: tutorial/broadcaster/audit_log.md
     - Channel Admin: 
       - Getting Started: tutorial/channel_admin/overview.md
-      - Register: tutorial/channel_admin/register.md
   - Admin Console:
     - Overview: console/overview.md
     - Adding Your First Asset: console/first.md
-    - Modifying Assets: console/modifying.md
     - Asset Types:
       - Images: console/assets/images.md
       - Videos and Gifs: console/assets/videos.md
@@ -30,8 +29,8 @@ nav:
       - Script Assets:
         - Overview: console/assets/scripts/overview.md
         - Example Script Asset: console/assets/scripts/example.md
-        - Drawing Geometry: console/assets/scripts/geometry.md
-        - Using Attachments: console/assets/scripts/geometry.md
+        - Using Attachments: console/assets/scripts/attachments.md
         - Reading Chat: console/assets/scripts/chat.md
         - Drawing Emotes: console/assets/scripts/emotes.md
+        - Dealing with errors: console/assets/scripts/errors.md
     - Marketplace: console/marketplace.md