@stream-io/video-react-sdk 0.0.1-alpha.95 → 0.0.1-alpha.97

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.0.1-alpha.97](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.0.1-alpha.96...@stream-io/video-react-sdk-0.0.1-alpha.97) (2023-05-30)
+
+
+### Features
+
+* integrate the new call ring flow ([#562](https://github.com/GetStream/stream-video-js/issues/562)) ([c407961](https://github.com/GetStream/stream-video-js/commit/c4079614cb962e098215c0061690d59c35882cd8))
+
+
+
+## [0.0.1-alpha.96](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.0.1-alpha.95...@stream-io/video-react-sdk-0.0.1-alpha.96) (2023-05-30)
+
+
+
 ## [0.0.1-alpha.95](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.0.1-alpha.94...@stream-io/video-react-sdk-0.0.1-alpha.95) (2023-05-30)
 
 

package/dist/src/components/PendingCallPanel/PendingCallPanel.d.ts

@@ -1,2 +1,14 @@
 /// <reference types="react" />
-export declare const PendingCallPanel: () => JSX.Element | null;
+export type PendingCallPanelProps = {
+    /**
+     * Whether to include the current user in the list of members to show.
+     * @default false.
+     */
+    includeSelf?: boolean;
+    /**
+     * The maximum number of members to show.
+     * @default 3.
+     */
+    totalMembersToShow?: number;
+};
+export declare const PendingCallPanel: (props: PendingCallPanelProps) => JSX.Element | null;

package/dist/src/components/PendingCallPanel/PendingCallPanel.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CallingState } from '@stream-io/video-client';
-import { useCall, useCallCallingState, useCallMembers, useCallMetadata, useI18n, } from '@stream-io/video-react-bindings';
+import { useCall, useCallCallingState, useCallMembers, useConnectedUser, useI18n, } from '@stream-io/video-react-bindings';
 import { Avatar } from '../Avatar';
 import { PendingCallControls } from './PendingCallControls';
 const CALLING_STATE_TO_LABEL = {
@@ -14,20 +14,29 @@ const CALLING_STATE_TO_LABEL = {
     [CallingState.JOINED]: 'Joined',
     [CallingState.LEFT]: 'Left call',
 };
-export const PendingCallPanel = () => {
+export const PendingCallPanel = (props) => {
+    const { includeSelf = false, totalMembersToShow = 3 } = props;
     const call = useCall();
     const callingState = useCallCallingState();
     const { t } = useI18n();
-    const metadata = useCallMetadata();
     const members = useCallMembers();
+    const connectedUser = useConnectedUser();
     if (!call)
         return null;
-    const caller = metadata === null || metadata === void 0 ? void 0 : metadata.created_by;
-    const membersToShow = call.isCreatedByMe
-        ? (members === null || members === void 0 ? void 0 : members.slice(0, 3).map(({ user }) => user).filter((u) => !!u)) || []
-        : caller
-            ? [caller]
-            : [];
+    // take the first N members to show their avatars
+    const membersToShow = (members || [])
+        .slice(0, totalMembersToShow)
+        .map(({ user }) => user)
+        .filter((user) => user.id !== (connectedUser === null || connectedUser === void 0 ? void 0 : connectedUser.id) || includeSelf);
+    if (includeSelf &&
+        !membersToShow.find((user) => user.id === (connectedUser === null || connectedUser === void 0 ? void 0 : connectedUser.id))) {
+        // if the current user is not in the initial batch of members,
+        // add it to the beginning of the list
+        const self = members.find(({ user }) => user.id === (connectedUser === null || connectedUser === void 0 ? void 0 : connectedUser.id));
+        if (self) {
+            membersToShow.splice(0, 1, self.user);
+        }
+    }
     const callingStateLabel = CALLING_STATE_TO_LABEL[callingState];
     return (_jsxs("div", Object.assign({ className: "str-video__call-panel str-video__call-panel--pending" }, { children: [_jsx("div", Object.assign({ className: "str-video__call-panel__members-list" }, { children: membersToShow.map((user) => (_jsxs("div", Object.assign({ className: "str-video__call-panel__member-box" }, { children: [_jsx(Avatar, { name: user.name, imageSrc: user.image }), user.name && (_jsx("div", Object.assign({ className: "str-video__member_details" }, { children: _jsx("span", Object.assign({ className: "str-video__member_name" }, { children: user.name })) })))] }), user.id))) })), callingStateLabel && (_jsx("div", Object.assign({ className: "str-video__call-panel__calling-state-label" }, { children: t(callingStateLabel) }))), [CallingState.RINGING, CallingState.JOINING].includes(callingState) && (_jsx(PendingCallControls, {}))] })));
 };

package/dist/src/components/PendingCallPanel/PendingCallPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"PendingCallPanel.js","sourceRoot":"","sources":["../../../../src/components/PendingCallPanel/PendingCallPanel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EACL,OAAO,EACP,mBAAmB,EACnB,cAAc,EACd,eAAe,EACf,OAAO,GACR,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,MAAM,sBAAsB,GAAiC;IAC3D,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,SAAS;IACjC,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,SAAS;IACjC,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,eAAe;IAC5C,CAAC,YAAY,CAAC,mBAAmB,CAAC,EAAE,QAAQ;IAC5C,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,wBAAwB;IAChD,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,EAAE;IACvB,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,EAAE;IAC1B,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,QAAQ;IAC/B,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,WAAW;CACjC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IACvB,MAAM,YAAY,GAAG,mBAAmB,EAAE,CAAC;IAC3C,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IACxB,MAAM,QAAQ,GAAG,eAAe,EAAE,CAAC;IACnC,MAAM,OAAO,GAAG,cAAc,EAAE,CAAC;IAEjC,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IAEvB,MAAM,MAAM,GAAG,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,UAAU,CAAC;IACpC,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa;QACtC,CAAC,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CACH,KAAK,CAAC,CAAC,EAAE,CAAC,EACX,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,IAAI,EACtB,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,KAAI,EAAE;QAC7B,CAAC,CAAC,MAAM;YACR,CAAC,CAAC,CAAC,MAAM,CAAC;YACV,CAAC,CAAC,EAAE,CAAC;IAEP,MAAM,iBAAiB,GAAG,sBAAsB,CAAC,YAAY,CAAC,CAAC;IAE/D,OAAO,CACL,6BAAK,SAAS,EAAC,sDAAsD,iBACnE,4BAAK,SAAS,EAAC,qCAAqC,gBACjD,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC3B,6BAAmB,SAAS,EAAC,mCAAmC,iBAC9D,KAAC,MAAM,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,GAAI,EAChD,IAAI,CAAC,IAAI,IAAI,CACZ,4BAAK,SAAS,EAAC,2BAA2B,gBACxC,6BAAM,SAAS,EAAC,wBAAwB,gBAAE,IAAI,CAAC,IAAI,IAAQ,IACvD,CACP,MANO,IAAI,CAAC,EAAE,CAOX,CACP,CAAC,IACE,EAEL,iBAAiB,IAAI,CACpB,4BAAK,SAAS,EAAC,4CAA4C,gBACxD,CAAC,CAAC,iBAAiB,CAAC,IACjB,CACP,EAEA,CAAC,YAAY,CAAC,OAAO,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,YAAY,CAAC,IAAI,CACtE,KAAC,mBAAmB,KAAG,CACxB,KACG,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"PendingCallPanel.js","sourceRoot":"","sources":["../../../../src/components/PendingCallPanel/PendingCallPanel.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -25,9 +25,9 @@
     "@floating-ui/react": "^0.22.0",
     "@nivo/core": "^0.80.0",
     "@nivo/line": "^0.80.0",
-    "@stream-io/i18n": "^0.0.1-alpha.77",
-    "@stream-io/video-client": "^0.0.2-alpha.6",
-    "@stream-io/video-react-bindings": "^0.0.1-alpha.88",
+    "@stream-io/i18n": "^0.0.1-alpha.79",
+    "@stream-io/video-client": "^0.0.2-alpha.8",
+    "@stream-io/video-react-bindings": "^0.0.1-alpha.90",
     "clsx": "^1.2.1",
     "rxjs": "~7.8.1"
   },
@@ -36,7 +36,7 @@
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@stream-io/video-styling": "^0.0.1-alpha.72",
+    "@stream-io/video-styling": "^0.0.1-alpha.74",
     "@types/prop-types": "^15.7.5",
     "@types/rimraf": "^3.0.2",
     "prop-types": "^15.8.1",
@@ -47,5 +47,5 @@
     "typedoc": "^0.24.7",
     "typescript": "^4.9.5"
   },
-  "version": "0.0.1-alpha.95"
+  "version": "0.0.1-alpha.97"
 }

package/src/components/PendingCallPanel/PendingCallPanel.tsx

@@ -1,9 +1,9 @@
-import { CallingState } from '@stream-io/video-client';
+import { CallingState, UserResponse } from '@stream-io/video-client';
 import {
   useCall,
   useCallCallingState,
   useCallMembers,
-  useCallMetadata,
+  useConnectedUser,
   useI18n,
 } from '@stream-io/video-react-bindings';
 import { Avatar } from '../Avatar';
@@ -21,24 +21,46 @@ const CALLING_STATE_TO_LABEL: Record<CallingState, string> = {
   [CallingState.LEFT]: 'Left call',
 };
 
-export const PendingCallPanel = () => {
+export type PendingCallPanelProps = {
+  /**
+   * Whether to include the current user in the list of members to show.
+   * @default false.
+   */
+  includeSelf?: boolean;
+
+  /**
+   * The maximum number of members to show.
+   * @default 3.
+   */
+  totalMembersToShow?: number;
+};
+
+export const PendingCallPanel = (props: PendingCallPanelProps) => {
+  const { includeSelf = false, totalMembersToShow = 3 } = props;
   const call = useCall();
   const callingState = useCallCallingState();
   const { t } = useI18n();
-  const metadata = useCallMetadata();
   const members = useCallMembers();
+  const connectedUser = useConnectedUser();
 
   if (!call) return null;
 
-  const caller = metadata?.created_by;
-  const membersToShow = call.isCreatedByMe
-    ? members
-        ?.slice(0, 3)
-        .map(({ user }) => user)
-        .filter((u) => !!u) || []
-    : caller
-    ? [caller]
-    : [];
+  // take the first N members to show their avatars
+  const membersToShow: UserResponse[] = (members || [])
+    .slice(0, totalMembersToShow)
+    .map(({ user }) => user)
+    .filter((user) => user.id !== connectedUser?.id || includeSelf);
+  if (
+    includeSelf &&
+    !membersToShow.find((user) => user.id === connectedUser?.id)
+  ) {
+    // if the current user is not in the initial batch of members,
+    // add it to the beginning of the list
+    const self = members.find(({ user }) => user.id === connectedUser?.id);
+    if (self) {
+      membersToShow.splice(0, 1, self.user);
+    }
+  }
 
   const callingStateLabel = CALLING_STATE_TO_LABEL[callingState];