@stream-io/video-react-sdk 0.0.44 → 0.0.46
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/CHANGELOG.md +14 -0
- package/dist/src/components/Avatar/Avatar.d.ts +5 -4
- package/dist/src/components/Avatar/Avatar.js +17 -4
- package/dist/src/components/Avatar/Avatar.js.map +1 -1
- package/dist/src/core/hooks/useAudioPublisher.js +9 -2
- package/dist/src/core/hooks/useAudioPublisher.js.map +1 -1
- package/dist/src/core/hooks/useVideoPublisher.js +9 -2
- package/dist/src/core/hooks/useVideoPublisher.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Avatar/Avatar.tsx +23 -7
- package/src/core/hooks/useAudioPublisher.ts +11 -2
- package/src/core/hooks/useVideoPublisher.ts +11 -2
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,20 @@
|
|
|
2
2
|
|
|
3
3
|
This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
|
|
4
4
|
|
|
5
|
+
### [0.0.46](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.0.45...@stream-io/video-react-sdk-0.0.46) (2023-06-22)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
* prevent unmute after reconnect ([#694](https://github.com/GetStream/stream-video-js/issues/694)) ([367abaa](https://github.com/GetStream/stream-video-js/commit/367abaac49e16b1334caa41d7cfee598796ac066))
|
|
11
|
+
|
|
12
|
+
### [0.0.45](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.0.44...@stream-io/video-react-sdk-0.0.45) (2023-06-21)
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### Features
|
|
16
|
+
|
|
17
|
+
* **react sdk:** prefer URL credentials in audio rooms demo app ([#678](https://github.com/GetStream/stream-video-js/issues/678)) ([f9ac52f](https://github.com/GetStream/stream-video-js/commit/f9ac52ff5afa10e6a10e97177dd2fb7e8a4c2e48))
|
|
18
|
+
|
|
5
19
|
### [0.0.44](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.0.43...@stream-io/video-react-sdk-0.0.44) (2023-06-21)
|
|
6
20
|
|
|
7
21
|
|
|
@@ -1,14 +1,15 @@
|
|
|
1
|
-
import { CSSProperties } from 'react';
|
|
1
|
+
import { ComponentProps, CSSProperties } from 'react';
|
|
2
2
|
export type AvatarData = {
|
|
3
3
|
imageSrc?: string;
|
|
4
4
|
name?: string;
|
|
5
5
|
style?: CSSProperties & Record<string, string | number>;
|
|
6
6
|
};
|
|
7
|
-
export type AvatarProps = AvatarData
|
|
8
|
-
export declare const Avatar: ({ imageSrc, name, style }: AvatarProps) => JSX.Element;
|
|
7
|
+
export type AvatarProps = AvatarData & ComponentProps<'img'>;
|
|
8
|
+
export declare const Avatar: ({ imageSrc, name, style, className, ...rest }: AvatarProps) => JSX.Element;
|
|
9
9
|
type AvatarFallbackProps = {
|
|
10
10
|
names: string[];
|
|
11
|
+
className?: string;
|
|
11
12
|
style?: CSSProperties & Record<string, string | number>;
|
|
12
13
|
};
|
|
13
|
-
export declare const AvatarFallback: ({ names, style }: AvatarFallbackProps) => JSX.Element;
|
|
14
|
+
export declare const AvatarFallback: ({ className, names, style, }: AvatarFallbackProps) => JSX.Element;
|
|
14
15
|
export {};
|
|
@@ -1,11 +1,24 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
1
12
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
13
|
import { useState } from 'react';
|
|
3
|
-
|
|
14
|
+
import clsx from 'clsx';
|
|
15
|
+
export const Avatar = (_a) => {
|
|
16
|
+
var { imageSrc, name, style, className } = _a, rest = __rest(_a, ["imageSrc", "name", "style", "className"]);
|
|
4
17
|
const [error, setError] = useState(false);
|
|
5
|
-
return (_jsxs(_Fragment, { children: [(!imageSrc || error) && name && (_jsx(AvatarFallback, { style: style, names: [name] })), imageSrc && !error && (_jsx("img", { onError: () => setError(true), alt: "avatar", className:
|
|
18
|
+
return (_jsxs(_Fragment, { children: [(!imageSrc || error) && name && (_jsx(AvatarFallback, { className: className, style: style, names: [name] })), imageSrc && !error && (_jsx("img", Object.assign({ onError: () => setError(true), alt: "avatar", className: clsx('str-video__avatar', className), src: imageSrc, style: style }, rest)))] }));
|
|
6
19
|
};
|
|
7
|
-
export const AvatarFallback = ({ names, style }) => {
|
|
20
|
+
export const AvatarFallback = ({ className, names, style, }) => {
|
|
8
21
|
var _a;
|
|
9
|
-
return (_jsx("div", Object.assign({ className:
|
|
22
|
+
return (_jsx("div", Object.assign({ className: clsx('str-video__avatar--initials-fallback', className), style: style }, { children: _jsxs("div", { children: [names[0][0], (_a = names[1]) === null || _a === void 0 ? void 0 : _a[0]] }) })));
|
|
10
23
|
};
|
|
11
24
|
//# sourceMappingURL=Avatar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAiC,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,IAAI,MAAM,MAAM,CAAC;AAUxB,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAMT,EAAE,EAAE;QANK,EACrB,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,SAAS,OAEG,EADT,IAAI,cALc,0CAMtB,CADQ;IAEP,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1C,OAAO,CACL,8BACG,CAAC,CAAC,QAAQ,IAAI,KAAK,CAAC,IAAI,IAAI,IAAI,CAC/B,KAAC,cAAc,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,GAAI,CACtE,EACA,QAAQ,IAAI,CAAC,KAAK,IAAI,CACrB,4BACE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAC7B,GAAG,EAAC,QAAQ,EACZ,SAAS,EAAE,IAAI,CAAC,mBAAmB,EAAE,SAAS,CAAC,EAC/C,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,KAAK,IACR,IAAI,EACR,CACH,IACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAOF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,SAAS,EACT,KAAK,EACL,KAAK,GACe,EAAE,EAAE;;IACxB,OAAO,CACL,4BACE,SAAS,EAAE,IAAI,CAAC,sCAAsC,EAAE,SAAS,CAAC,EAClE,KAAK,EAAE,KAAK,gBAEZ,0BACG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACX,MAAA,KAAK,CAAC,CAAC,CAAC,0CAAG,CAAC,CAAC,IACV,IACF,CACP,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
7
7
|
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
8
|
});
|
|
9
9
|
};
|
|
10
|
-
import { useCallback, useEffect } from 'react';
|
|
10
|
+
import { useCallback, useEffect, useRef } from 'react';
|
|
11
11
|
import { map } from 'rxjs';
|
|
12
12
|
import { CallingState, getAudioStream, OwnCapability, SfuModels, watchForAddedDefaultAudioDevice, watchForDisconnectedAudioDevice, } from '@stream-io/video-client';
|
|
13
13
|
import { useCall, useCallCallingState, useCallState, useLocalParticipant, } from '@stream-io/video-react-bindings';
|
|
@@ -38,11 +38,18 @@ export const useAudioPublisher = ({ canObserveAudio, initialAudioMuted, audioDev
|
|
|
38
38
|
console.log('Failed to publish audio stream', e);
|
|
39
39
|
}
|
|
40
40
|
}), [audioDeviceId, call]);
|
|
41
|
+
const initialPublishRun = useRef(false);
|
|
41
42
|
useEffect(() => {
|
|
42
|
-
if (callingState === CallingState.JOINED &&
|
|
43
|
+
if (callingState === CallingState.JOINED &&
|
|
44
|
+
!initialAudioMuted &&
|
|
45
|
+
!initialPublishRun.current) {
|
|
46
|
+
// automatic publishing should happen only when:
|
|
47
|
+
// - joining the call from the lobby, and the audio is not muted
|
|
48
|
+
// - reconnecting to the call with the audio already published
|
|
43
49
|
publishAudioStream().catch((e) => {
|
|
44
50
|
console.error('Failed to publish audio stream', e);
|
|
45
51
|
});
|
|
52
|
+
initialPublishRun.current = true;
|
|
46
53
|
}
|
|
47
54
|
}, [callingState, initialAudioMuted, publishAudioStream]);
|
|
48
55
|
useEffect(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAudioPublisher.js","sourceRoot":"","sources":["../../../../src/core/hooks/useAudioPublisher.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"useAudioPublisher.js","sourceRoot":"","sources":["../../../../src/core/hooks/useAudioPublisher.ts"],"names":[],"mappings":"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"}
|
|
@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
7
7
|
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
8
|
});
|
|
9
9
|
};
|
|
10
|
-
import { useCallback, useEffect } from 'react';
|
|
10
|
+
import { useCallback, useEffect, useRef } from 'react';
|
|
11
11
|
import { map } from 'rxjs';
|
|
12
12
|
import { CallingState, getVideoStream, OwnCapability, SfuModels, VideoSettingsCameraFacingEnum, watchForAddedDefaultVideoDevice, watchForDisconnectedVideoDevice, } from '@stream-io/video-client';
|
|
13
13
|
import { useCall, useCallCallingState, useCallMetadata, useCallState, useLocalParticipant, } from '@stream-io/video-react-bindings';
|
|
@@ -53,11 +53,18 @@ export const useVideoPublisher = ({ canObserveVideo, initialVideoMuted, videoDev
|
|
|
53
53
|
videoDeviceId,
|
|
54
54
|
videoSettings === null || videoSettings === void 0 ? void 0 : videoSettings.camera_facing,
|
|
55
55
|
]);
|
|
56
|
+
const initialPublishRun = useRef(false);
|
|
56
57
|
useEffect(() => {
|
|
57
|
-
if (callingState === CallingState.JOINED &&
|
|
58
|
+
if (callingState === CallingState.JOINED &&
|
|
59
|
+
!initialVideoMuted &&
|
|
60
|
+
!initialPublishRun.current) {
|
|
61
|
+
// automatic publishing should happen only when:
|
|
62
|
+
// - joining the call from the lobby, and the video is not muted
|
|
63
|
+
// - reconnecting to the call with the video already published
|
|
58
64
|
publishVideoStream().catch((e) => {
|
|
59
65
|
console.error('Failed to publish video stream', e);
|
|
60
66
|
});
|
|
67
|
+
initialPublishRun.current = true;
|
|
61
68
|
}
|
|
62
69
|
}, [callingState, initialVideoMuted, publishVideoStream]);
|
|
63
70
|
useEffect(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useVideoPublisher.js","sourceRoot":"","sources":["../../../../src/core/hooks/useVideoPublisher.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"useVideoPublisher.js","sourceRoot":"","sources":["../../../../src/core/hooks/useVideoPublisher.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { CSSProperties, useState } from 'react';
|
|
1
|
+
import { ComponentProps, CSSProperties, useState } from 'react';
|
|
2
|
+
import clsx from 'clsx';
|
|
2
3
|
|
|
3
4
|
export type AvatarData = {
|
|
4
5
|
imageSrc?: string;
|
|
@@ -6,23 +7,30 @@ export type AvatarData = {
|
|
|
6
7
|
style?: CSSProperties & Record<string, string | number>;
|
|
7
8
|
};
|
|
8
9
|
|
|
9
|
-
export type AvatarProps = AvatarData
|
|
10
|
+
export type AvatarProps = AvatarData & ComponentProps<'img'>;
|
|
10
11
|
|
|
11
|
-
export const Avatar = ({
|
|
12
|
+
export const Avatar = ({
|
|
13
|
+
imageSrc,
|
|
14
|
+
name,
|
|
15
|
+
style,
|
|
16
|
+
className,
|
|
17
|
+
...rest
|
|
18
|
+
}: AvatarProps) => {
|
|
12
19
|
const [error, setError] = useState(false);
|
|
13
20
|
|
|
14
21
|
return (
|
|
15
22
|
<>
|
|
16
23
|
{(!imageSrc || error) && name && (
|
|
17
|
-
<AvatarFallback style={style} names={[name]} />
|
|
24
|
+
<AvatarFallback className={className} style={style} names={[name]} />
|
|
18
25
|
)}
|
|
19
26
|
{imageSrc && !error && (
|
|
20
27
|
<img
|
|
21
28
|
onError={() => setError(true)}
|
|
22
29
|
alt="avatar"
|
|
23
|
-
className=
|
|
30
|
+
className={clsx('str-video__avatar', className)}
|
|
24
31
|
src={imageSrc}
|
|
25
32
|
style={style}
|
|
33
|
+
{...rest}
|
|
26
34
|
/>
|
|
27
35
|
)}
|
|
28
36
|
</>
|
|
@@ -31,11 +39,19 @@ export const Avatar = ({ imageSrc, name, style }: AvatarProps) => {
|
|
|
31
39
|
|
|
32
40
|
type AvatarFallbackProps = {
|
|
33
41
|
names: string[];
|
|
42
|
+
className?: string;
|
|
34
43
|
style?: CSSProperties & Record<string, string | number>;
|
|
35
44
|
};
|
|
36
|
-
export const AvatarFallback = ({
|
|
45
|
+
export const AvatarFallback = ({
|
|
46
|
+
className,
|
|
47
|
+
names,
|
|
48
|
+
style,
|
|
49
|
+
}: AvatarFallbackProps) => {
|
|
37
50
|
return (
|
|
38
|
-
<div
|
|
51
|
+
<div
|
|
52
|
+
className={clsx('str-video__avatar--initials-fallback', className)}
|
|
53
|
+
style={style}
|
|
54
|
+
>
|
|
39
55
|
<div>
|
|
40
56
|
{names[0][0]}
|
|
41
57
|
{names[1]?.[0]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useCallback, useEffect } from 'react';
|
|
1
|
+
import { useCallback, useEffect, useRef } from 'react';
|
|
2
2
|
import { map } from 'rxjs';
|
|
3
3
|
import {
|
|
4
4
|
CallingState,
|
|
@@ -58,11 +58,20 @@ export const useAudioPublisher = ({
|
|
|
58
58
|
}
|
|
59
59
|
}, [audioDeviceId, call]);
|
|
60
60
|
|
|
61
|
+
const initialPublishRun = useRef(false);
|
|
61
62
|
useEffect(() => {
|
|
62
|
-
if (
|
|
63
|
+
if (
|
|
64
|
+
callingState === CallingState.JOINED &&
|
|
65
|
+
!initialAudioMuted &&
|
|
66
|
+
!initialPublishRun.current
|
|
67
|
+
) {
|
|
68
|
+
// automatic publishing should happen only when:
|
|
69
|
+
// - joining the call from the lobby, and the audio is not muted
|
|
70
|
+
// - reconnecting to the call with the audio already published
|
|
63
71
|
publishAudioStream().catch((e) => {
|
|
64
72
|
console.error('Failed to publish audio stream', e);
|
|
65
73
|
});
|
|
74
|
+
initialPublishRun.current = true;
|
|
66
75
|
}
|
|
67
76
|
}, [callingState, initialAudioMuted, publishAudioStream]);
|
|
68
77
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useCallback, useEffect } from 'react';
|
|
1
|
+
import { useCallback, useEffect, useRef } from 'react';
|
|
2
2
|
import { map } from 'rxjs';
|
|
3
3
|
import {
|
|
4
4
|
CallingState,
|
|
@@ -75,11 +75,20 @@ export const useVideoPublisher = ({
|
|
|
75
75
|
videoSettings?.camera_facing,
|
|
76
76
|
]);
|
|
77
77
|
|
|
78
|
+
const initialPublishRun = useRef(false);
|
|
78
79
|
useEffect(() => {
|
|
79
|
-
if (
|
|
80
|
+
if (
|
|
81
|
+
callingState === CallingState.JOINED &&
|
|
82
|
+
!initialVideoMuted &&
|
|
83
|
+
!initialPublishRun.current
|
|
84
|
+
) {
|
|
85
|
+
// automatic publishing should happen only when:
|
|
86
|
+
// - joining the call from the lobby, and the video is not muted
|
|
87
|
+
// - reconnecting to the call with the video already published
|
|
80
88
|
publishVideoStream().catch((e) => {
|
|
81
89
|
console.error('Failed to publish video stream', e);
|
|
82
90
|
});
|
|
91
|
+
initialPublishRun.current = true;
|
|
83
92
|
}
|
|
84
93
|
}, [callingState, initialVideoMuted, publishVideoStream]);
|
|
85
94
|
|