@ikonai/sdk-react-ui 1.4.0 → 1.6.0

package/media/use-media-capture.d.ts

@@ -0,0 +1,21 @@
+import { IkonAudioCaptureRequest, IkonClient, IkonVideoCaptureRequest } from '../../sdk/sdk/src/index.ts';
+export interface UseMediaCaptureResult {
+    /** The start failure, if the last capture start failed (e.g. permission denied). */
+    error: Error | null;
+}
+/**
+ * Streams the microphone up the given connection while `active` is true. The request
+ * is applied when capture (re)starts; changing it alone does not restart capture.
+ * Pair with a mute flag: `useMicrophoneCapture(client, !muted)`.
+ */
+export declare function useMicrophoneCapture(client: IkonClient | null | undefined, active: boolean, request?: IkonAudioCaptureRequest): UseMediaCaptureResult;
+/**
+ * Streams the camera up the given connection while `active` is true. The request is
+ * applied when capture (re)starts; changing it alone does not restart capture.
+ */
+export declare function useCameraCapture(client: IkonClient | null | undefined, active: boolean, request?: Omit<IkonVideoCaptureRequest, 'sourceType'>): UseMediaCaptureResult;
+/**
+ * Streams a screenshare up the given connection while `active` is true. The request is
+ * applied when capture (re)starts; changing it alone does not restart capture.
+ */
+export declare function useScreenCapture(client: IkonClient | null | undefined, active: boolean, request?: Omit<IkonVideoCaptureRequest, 'sourceType'>): UseMediaCaptureResult;

package/media/use-media-capture.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/media/use-sibling-client.d.ts

@@ -0,0 +1,21 @@
+import { IkonClient, IkonClientConfig } from '../../sdk/sdk/src/index.ts';
+export interface UseSiblingClientResult {
+    /** The connected sibling client, or null while connecting / when inputs are null. */
+    client: IkonClient | null;
+    /** The connect failure, if the last connection attempt failed. */
+    error: Error | null;
+}
+/**
+ * Opens a sibling connection next to an existing one — same deployment, auth and
+ * transport, with the given connection parameters replacing the owner's. This is how
+ * a page opens a media leg to a cell room (`ikon-cell-type` + the cell's identity
+ * fields) while keeping its normal app connection. The sibling connects while the
+ * inputs are non-null and disconnects on unmount or when they change — so a huddle's
+ * media leg tears down (and the room sees the participant leave) simply by the
+ * component unmounting or `parameters` becoming null.
+ *
+ * Reconnection is keyed on the CONTENT of `parameters` (order-insensitive), so an
+ * object literal recreated every render is fine. `overrides` is applied when a
+ * connection starts; changing it alone does not reconnect.
+ */
+export declare function useSiblingClient(client: IkonClient | null | undefined, parameters: Record<string, string> | null | undefined, overrides?: Partial<IkonClientConfig>): UseSiblingClientResult;

package/media/use-sibling-client.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/media/video-stream-view.d.ts

@@ -0,0 +1,40 @@
+import { CSSProperties } from 'react';
+import { IkonClient } from '../../sdk/sdk/src/index.ts';
+export declare const ATTACH_CANVAS_RETRY_MS = 100;
+export declare const ATTACH_CANVAS_MAX_ATTEMPTS = 50;
+/**
+ * The slice of the custom (non-WebRTC) video playback pipeline this view needs.
+ * Structurally satisfied by `IkonVideoPlayback` from `@ikonai/sdk`.
+ */
+export interface VideoStreamPlayback {
+    attachCanvas(streamId: string, canvas: HTMLCanvasElement): Promise<unknown>;
+    detachCanvas(streamId: string): void;
+}
+export interface VideoStreamViewProps {
+    /** The connection the stream arrives on — an app connection or a sibling media connection. */
+    client: IkonClient | null | undefined;
+    /** App-level stream id, as published by the server (e.g. from a `Video.SendFrameAsync` relay). */
+    streamId: string | null | undefined;
+    className?: string;
+    style?: CSSProperties;
+    width?: number;
+    height?: number;
+    /** Extra attributes for the rendered element (e.g. `data-*` markers). */
+    attributes?: Record<string, string>;
+    /**
+     * Renderer hook: where to take the custom playback pipeline from. Defaults to
+     * `client.media?.video`, which is right for standalone use — the UI-node renderer
+     * passes its own source so a context-level override keeps working.
+     */
+    getPlayback?: () => VideoStreamPlayback | null | undefined;
+}
+/**
+ * Renders one incoming video stream (camera or screenshare), handling both media
+ * transports: when WebRTC carries the video the stream is a `MediaStream` rendered
+ * through a `<video>` element, and on the protocol-channel fallback the frames are
+ * decoded into a `<canvas>` attached to the custom playback pipeline. Which transport
+ * is active is per connection and can only be known at runtime, so a component that
+ * implements just one of the two renders a permanently black tile on the other — use
+ * this view instead of calling `attachCanvas` directly.
+ */
+export declare const VideoStreamView: import('react').MemoExoticComponent<({ client, streamId, className, style, width, height, attributes, getPlayback, }: VideoStreamViewProps) => import("react").JSX.Element>;

package/media/video-stream-view.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikonai/sdk-react-ui",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "type": "module",
   "main": "./index.js",
   "types": "./index.d.ts",

package/theme/ikon-app.css

@@ -158,6 +158,44 @@
     word-break: break-word;
   }
 
+  /* An installed PWA has no reload control the user can reach, so this button is the only way back
+     into the app — sized for a thumb rather than as a secondary affordance. */
+  .ikon-offline-action {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 160px;
+    min-height: 44px;
+    margin-top: 12px;
+    padding: 0 20px;
+    background: var(--ikon-bg-solid);
+    border: 1px solid transparent;
+    border-radius: var(--ikon-radius-md);
+    font-family: inherit;
+    font-size: 15px;
+    font-weight: 500;
+    line-height: 1;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+  }
+
+  /* Crosswind's preflight resets `button { color: inherit }` unlayered, and an unlayered rule beats
+     a layered one whatever its specificity — so colouring the button itself loses the contrast and
+     paints the label in the chip's text colour on the solid fill. The span is not something the
+     reset targets, which keeps this a normal cascade an app can still override without !important. */
+  .ikon-offline-action-label {
+    color: var(--ikon-text-on-solid);
+  }
+
+  .ikon-offline-action:hover {
+    background: var(--ikon-bg-solid-hover);
+  }
+
+  .ikon-offline-action:focus-visible {
+    outline: 2px solid var(--ikon-focus-ring);
+    outline-offset: 2px;
+  }
+
   @keyframes ikon-fade-in {
     from { opacity: 0; }
     to { opacity: 1; }