@ikonai/sdk-react-ui 1.12.0 → 1.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/{feedback-form-BSy2olwD.js → feedback-form-2zrRPOiE.js} +10 -10
- package/index.d.ts +1 -1
- package/index.d.ts.map +1 -1
- package/index.js +869 -818
- package/media/video-canvas.d.ts.map +1 -1
- package/media/video-stream-view.d.ts +17 -3
- package/media/video-stream-view.d.ts.map +1 -1
- package/package.json +1 -1
- package/{shadertoy-renderer-Cq1lOXBs.js → shadertoy-renderer-Qdk-bdwO.js} +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"video-canvas.d.ts","sourceRoot":"","sources":["../../../../sdk/sdk-react-ui/src/media/video-canvas.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"video-canvas.d.ts","sourceRoot":"","sources":["../../../../sdk/sdk-react-ui/src/media/video-canvas.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AA+DnE,eAAO,MAAM,yBAAyB,EAAG,kBAA2B,CAAC;AACrE,eAAO,MAAM,6BAA6B,EAAG,sBAA+B,CAAC;AAE7E,wBAAgB,yBAAyB,IAAI,uBAAuB,CA6EnE;AAED,wBAAgB,oBAAoB,IAAI,uBAAuB,EAAE,CAEhE;AAgBD,wBAAgB,4BAA4B,IAAI,uBAAuB,CAyDtE"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { CSSProperties } from 'react';
|
|
2
|
-
import { IkonClient } from '@ikonai/sdk';
|
|
1
|
+
import { CSSProperties, ReactNode } from 'react';
|
|
2
|
+
import { IkonClient, IkonVideoStreamEvent } from '@ikonai/sdk';
|
|
3
3
|
export declare const ATTACH_CANVAS_RETRY_MS = 100;
|
|
4
4
|
export declare const ATTACH_CANVAS_MAX_ATTEMPTS = 50;
|
|
5
5
|
export declare const ATTACH_CANVAS_WEBRTC_RETRY_MS = 500;
|
|
@@ -10,7 +10,9 @@ export declare const ATTACH_CANVAS_WEBRTC_RETRY_MS = 500;
|
|
|
10
10
|
export interface VideoStreamPlayback {
|
|
11
11
|
attachCanvas(streamId: string, canvas: HTMLCanvasElement): Promise<unknown>;
|
|
12
12
|
detachCanvas(streamId: string): void;
|
|
13
|
+
addStreamListener?(streamId: string, listener: (event: IkonVideoStreamEvent) => void): () => void;
|
|
13
14
|
}
|
|
15
|
+
export type VideoStreamFit = 'contain' | 'cover';
|
|
14
16
|
export interface VideoStreamViewProps {
|
|
15
17
|
/** The connection the stream arrives on — an app connection or a sibling media connection. */
|
|
16
18
|
client: IkonClient | null | undefined;
|
|
@@ -28,6 +30,18 @@ export interface VideoStreamViewProps {
|
|
|
28
30
|
* passes its own source so a context-level override keeps working.
|
|
29
31
|
*/
|
|
30
32
|
getPlayback?: () => VideoStreamPlayback | null | undefined;
|
|
33
|
+
/** How the picture fills the element: `object-fit` on the `<video>` or `<canvas>`. Absent stretches it. */
|
|
34
|
+
fit?: VideoStreamFit;
|
|
35
|
+
/**
|
|
36
|
+
* A local capture's app-level stream id. While this client captures under that id, its own
|
|
37
|
+
* `MediaStream` is shown instead of `streamId`, with no server round trip.
|
|
38
|
+
*/
|
|
39
|
+
localStreamId?: string | null;
|
|
40
|
+
/**
|
|
41
|
+
* Shown until the first frame is on screen, and again whenever the stream is gone. When set, the
|
|
42
|
+
* element is wrapped in a `position: relative` box that takes `className`, `style` and the size.
|
|
43
|
+
*/
|
|
44
|
+
placeholder?: ReactNode;
|
|
31
45
|
}
|
|
32
46
|
/**
|
|
33
47
|
* Renders one incoming video stream (camera or screenshare), handling both media
|
|
@@ -38,5 +52,5 @@ export interface VideoStreamViewProps {
|
|
|
38
52
|
* implements just one of the two renders a permanently black tile on the other — use
|
|
39
53
|
* this view instead of calling `attachCanvas` directly.
|
|
40
54
|
*/
|
|
41
|
-
export declare const VideoStreamView: import('react').MemoExoticComponent<({ client, streamId, className, style, width, height, attributes, getPlayback, }: VideoStreamViewProps) => import('react').JSX.Element>;
|
|
55
|
+
export declare const VideoStreamView: import('react').MemoExoticComponent<({ client, streamId, className, style, width, height, attributes, getPlayback, fit, localStreamId, placeholder, }: VideoStreamViewProps) => import('react').JSX.Element>;
|
|
42
56
|
//# sourceMappingURL=video-stream-view.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"video-stream-view.d.ts","sourceRoot":"","sources":["../../../../sdk/sdk-react-ui/src/media/video-stream-view.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqC,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"video-stream-view.d.ts","sourceRoot":"","sources":["../../../../sdk/sdk-react-ui/src/media/video-stream-view.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqC,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9F,OAAO,EAAgB,KAAK,UAAU,EAAE,KAAK,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAMvF,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAC1C,eAAO,MAAM,0BAA0B,KAAK,CAAC;AAK7C,eAAO,MAAM,6BAA6B,MAAM,CAAC;AAEjD;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAClC,YAAY,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,iBAAiB,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAC5E,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,iBAAiB,CAAC,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;CACnG;AAED,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,OAAO,CAAC;AAUjD,MAAM,WAAW,oBAAoB;IACnC,8FAA8F;IAC9F,MAAM,EAAE,UAAU,GAAG,IAAI,GAAG,SAAS,CAAC;IACtC,kGAAkG;IAClG,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yEAAyE;IACzE,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,mBAAmB,GAAG,IAAI,GAAG,SAAS,CAAC;IAC3D,2GAA2G;IAC3G,GAAG,CAAC,EAAE,cAAc,CAAC;IACrB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,yJAYzB,oBAAoB,iCAkMrB,CAAC"}
|
package/package.json
CHANGED
|
@@ -159,7 +159,7 @@ var d = class {
|
|
|
159
159
|
let n = this.gl, r = new Image();
|
|
160
160
|
t.startsWith("data:") || (r.crossOrigin = "anonymous"), r.onload = () => {
|
|
161
161
|
let i = this.channels[e];
|
|
162
|
-
i.url
|
|
162
|
+
i.url === t && i.texture && (n.bindTexture(n.TEXTURE_2D, i.texture), n.pixelStorei(n.UNPACK_FLIP_Y_WEBGL, !0), n.texImage2D(n.TEXTURE_2D, 0, n.RGBA, n.RGBA, n.UNSIGNED_BYTE, r), n.generateMipmap(n.TEXTURE_2D), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_WRAP_S, n.REPEAT), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_WRAP_T, n.REPEAT), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_MIN_FILTER, n.LINEAR_MIPMAP_LINEAR), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_MAG_FILTER, n.LINEAR), n.pixelStorei(n.UNPACK_FLIP_Y_WEBGL, !1), n.bindTexture(n.TEXTURE_2D, null), i.width = r.naturalWidth, i.height = r.naturalHeight, this.channelResolution[e * 3] = r.naturalWidth, this.channelResolution[e * 3 + 1] = r.naturalHeight, this.channelResolution[e * 3 + 2] = 1);
|
|
163
163
|
}, r.onerror = () => {
|
|
164
164
|
this.lastError = `Failed to load texture for iChannel${e}`;
|
|
165
165
|
}, r.src = t;
|
|
@@ -368,7 +368,7 @@ function b() {
|
|
|
368
368
|
}
|
|
369
369
|
}, []), r(() => {
|
|
370
370
|
let e = b.current;
|
|
371
|
-
if (
|
|
371
|
+
if (e && E && C.current !== E) {
|
|
372
372
|
if (e.compile(E, k)) C.current = E, w.current = k;
|
|
373
373
|
else {
|
|
374
374
|
let t = e.getError();
|
|
@@ -377,7 +377,7 @@ function b() {
|
|
|
377
377
|
}
|
|
378
378
|
}, [E, k]), r(() => {
|
|
379
379
|
let e = b.current;
|
|
380
|
-
|
|
380
|
+
e && C.current && (y(w.current, k) || (e.setCustomUniforms(k), w.current = k));
|
|
381
381
|
}, [k]), r(() => {
|
|
382
382
|
let e = b.current;
|
|
383
383
|
e && e.setChannels(j);
|