@stream-io/video-react-sdk 0.0.43 → 0.0.45

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.
Files changed (7) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/README.md +2 -0
  3. package/dist/src/components/Avatar/Avatar.d.ts +5 -4
  4. package/dist/src/components/Avatar/Avatar.js +17 -4
  5. package/dist/src/components/Avatar/Avatar.js.map +1 -1
  6. package/package.json +1 -1
  7. package/src/components/Avatar/Avatar.tsx +23 -7
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.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)
6
+
7
+
8
+ ### Features
9
+
10
+ * **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))
11
+
12
+ ### [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)
13
+
14
+
15
+ ### Documentation
16
+
17
+ * Add header image to React SDK ([#688](https://github.com/GetStream/stream-video-js/issues/688)) ([a4697da](https://github.com/GetStream/stream-video-js/commit/a4697da69f0f0976d84566d16df840efdaab6ebc))
18
+
5
19
  ### [0.0.43](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.0.42...@stream-io/video-react-sdk-0.0.43) (2023-06-21)
6
20
 
7
21
  ### Dependency Updates
package/README.md CHANGED
@@ -1,5 +1,7 @@
1
1
  # Official React SDK for [Stream Video](https://getstream.io/video/docs/)
2
2
 
3
+ <img src="../../.readme-assets/Github-Graphic-React.jpg" alt="Stream Video for React Header image" style="box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); border-radius: 1rem" />
4
+
3
5
  ## **Quick Links**
4
6
 
5
7
  - [Register](https://getstream.io/chat/trial/) to get an API key for Stream Video
package/dist/src/components/Avatar/Avatar.d.ts CHANGED
@@ -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 {};
package/dist/src/components/Avatar/Avatar.js CHANGED
@@ -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
- export const Avatar = ({ imageSrc, name, style }) => {
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: "str-video__avatar", src: imageSrc, style: style }))] }));
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: "str-video__avatar--initials-fallback", style: style }, { children: _jsxs("div", { children: [names[0][0], (_a = names[1]) === null || _a === void 0 ? void 0 : _a[0]] }) })));
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
package/dist/src/components/Avatar/Avatar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAUhD,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAe,EAAE,EAAE;IAC/D,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,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,GAAI,CAChD,EACA,QAAQ,IAAI,CAAC,KAAK,IAAI,CACrB,cACE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAC7B,GAAG,EAAC,QAAQ,EACZ,SAAS,EAAC,mBAAmB,EAC7B,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,KAAK,GACZ,CACH,IACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAMF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,EAAuB,EAAE,EAAE;;IACtE,OAAO,CACL,4BAAK,SAAS,EAAC,sCAAsC,EAAC,KAAK,EAAE,KAAK,gBAChE,0BACG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACX,MAAA,KAAK,CAAC,CAAC,CAAC,0CAAG,CAAC,CAAC,IACV,IACF,CACP,CAAC;AACJ,CAAC,CAAC"}
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"}
package/package.json CHANGED
@@ -45,5 +45,5 @@
45
45
  "rimraf": "^3.0.2",
46
46
  "typescript": "^4.9.5"
47
47
  },
48
- "version": "0.0.43"
48
+ "version": "0.0.45"
49
49
  }
package/src/components/Avatar/Avatar.tsx 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 = ({ imageSrc, name, style }: AvatarProps) => {
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="str-video__avatar"
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 = ({ names, style }: AvatarFallbackProps) => {
45
+ export const AvatarFallback = ({
46
+ className,
47
+ names,
48
+ style,
49
+ }: AvatarFallbackProps) => {
37
50
  return (
38
- <div className="str-video__avatar--initials-fallback" style={style}>
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]}