@stream-io/video-react-sdk 0.0.12 → 0.0.13

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+### [0.0.13](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.0.12...@stream-io/video-react-sdk-0.0.13) (2023-06-08)
+
+### Dependency Updates
+
+* `@stream-io/video-client` updated to version `0.0.1`
+* `@stream-io/video-react-bindings` updated to version `0.0.7`
+
+### Features
+
+* StreamCall signature, video client creation ([#596](https://github.com/GetStream/stream-video-js/issues/596)) ([5c3000c](https://github.com/GetStream/stream-video-js/commit/5c3000cc6fc3f8b7904609d7b11fa025b7458cad))
+
 ### [0.0.12](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.0.11...@stream-io/video-react-sdk-0.0.12) (2023-06-07)
 
 ### Dependency Updates

package/dist/src/core/components/StreamCall/StreamCall.d.ts

@@ -1,73 +1,11 @@
 import { PropsWithChildren } from 'react';
-import { Call, JoinCallData } from '@stream-io/video-client';
+import { Call } from '@stream-io/video-client';
 import { MediaDevicesProviderProps } from '../../contexts';
-type InitWithCallCID = {
-    /**
-     * The call type.
-     */
-    callType: string;
-    /**
-     * The call id.
-     */
-    callId: string;
-    /**
-     * The call instance to use.
-     */
-    call?: never;
-};
-type InitWithCallInstance = {
-    /**
-     * The call instance to use.
-     */
-    call: Call | undefined;
-    /**
-     * The call type.
-     */
-    callType?: never;
-    /**
-     * The call id.
-     */
-    callId?: never;
-};
-type InitStreamCall = InitWithCallCID | InitWithCallInstance;
-export type StreamCallProps = InitStreamCall & {
-    /**
-     * If true, the call will be joined automatically.
-     * Set it to true if you want to join the call immediately.
-     * Useful for scenarios where you want to skip prompting the user to join the call.
-     *
-     * @default false.
-     */
-    autoJoin?: boolean;
-    /**
-     * If true, the call data will be loaded automatically from the server.
-     *
-     * This property is useful for the scenarios where you declaratively create
-     * the call instance by using the `callId` and `callType` props,
-     * and you have a UI that depends on the call metadata.
-     *
-     * @example
-     * ```jsx
-     * <StreamCall callId="call-id" callType="call-type" autoLoad>
-     *   <CallMetadata /> // has access to `call.metadata` although not joined yet
-     *   <CallUI />
-     *   <CallControls />
-     * </StreamCall>
-     * ```
-     *
-     * This property is ignored if you pass the `call` prop or enable `autoJoin`.
-     *
-     * @default true.
-     */
-    autoLoad?: boolean;
-    /**
-     * An optional data to pass when joining the call.
-     */
-    data?: JoinCallData;
+export type StreamCallProps = {
+    call: Call;
     /**
      * An optional props to pass to the `MediaDevicesProvider`.
      */
     mediaDevicesProviderProps?: MediaDevicesProviderProps;
 };
-export declare const StreamCall: ({ children, callId, callType, call, autoJoin, autoLoad, data, mediaDevicesProviderProps, }: PropsWithChildren<StreamCallProps>) => JSX.Element;
-export {};
+export declare const StreamCall: ({ children, call, mediaDevicesProviderProps, }: PropsWithChildren<StreamCallProps>) => JSX.Element;

package/dist/src/core/components/StreamCall/StreamCall.js

@@ -1,60 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { CallingState } from '@stream-io/video-client';
-import { StreamCallProvider, useConnectedUser, useStreamVideoClient, } from '@stream-io/video-react-bindings';
+import { StreamCallProvider } from '@stream-io/video-react-bindings';
 import { MediaDevicesProvider, } from '../../contexts';
-export const StreamCall = ({ children, callId, callType, call, autoJoin = false, autoLoad = true, data, mediaDevicesProviderProps, }) => {
-    const client = useStreamVideoClient();
-    const [activeCall, setActiveCall] = useState(() => {
-        if (call)
-            return call;
-        if (!client || !callId || !callType)
-            return;
-        return client.call(callType, callId);
-    });
-    useEffect(() => {
-        if (!client)
-            return;
-        if (callId && callType && !activeCall) {
-            const newCall = client.call(callType, callId);
-            setActiveCall(newCall);
-        }
-    }, [activeCall, callId, callType, client]);
-    const connectedUser = useConnectedUser();
-    useEffect(() => {
-        // run the effect only when the user is connected and the call
-        // is created declaratively by using the `callId` and `callType` props.
-        if (!connectedUser)
-            return;
-        if (activeCall && callType && callId && autoLoad && !autoJoin) {
-            activeCall
-                .getOrCreate({
-                ring: data === null || data === void 0 ? void 0 : data.ring,
-                data: data === null || data === void 0 ? void 0 : data.data,
-                members_limit: data === null || data === void 0 ? void 0 : data.members_limit,
-            })
-                .catch((err) => {
-                console.error(`Failed to get or create call`, err);
-            });
-        }
-    }, [
-        activeCall,
-        autoJoin,
-        autoLoad,
-        callId,
-        callType,
-        connectedUser,
-        data === null || data === void 0 ? void 0 : data.data,
-        data === null || data === void 0 ? void 0 : data.members_limit,
-        data === null || data === void 0 ? void 0 : data.ring,
-    ]);
-    useEffect(() => {
-        if (autoJoin && (activeCall === null || activeCall === void 0 ? void 0 : activeCall.state.callingState) === CallingState.IDLE) {
-            activeCall.join(data).catch((err) => {
-                console.error(`Failed to join call`, err);
-            });
-        }
-    }, [activeCall, autoJoin, data]);
-    return (_jsx(StreamCallProvider, Object.assign({ call: activeCall }, { children: _jsx(MediaDevicesProvider, Object.assign({}, mediaDevicesProviderProps, { children: children })) })));
+export const StreamCall = ({ children, call, mediaDevicesProviderProps, }) => {
+    return (_jsx(StreamCallProvider, Object.assign({ call: call }, { children: _jsx(MediaDevicesProvider, Object.assign({}, mediaDevicesProviderProps, { children: children })) })));
 };
 //# sourceMappingURL=StreamCall.js.map

package/dist/src/core/components/StreamCall/StreamCall.js.map

@@ -1 +1 @@
-{"version":3,"file":"StreamCall.js","sourceRoot":"","sources":["../../../../../src/core/components/StreamCall/StreamCall.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"StreamCall.js","sourceRoot":"","sources":["../../../../../src/core/components/StreamCall/StreamCall.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EACL,oBAAoB,GAErB,MAAM,gBAAgB,CAAC;AAWxB,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,IAAI,EACJ,yBAAyB,GACU,EAAE,EAAE;IACvC,OAAO,CACL,KAAC,kBAAkB,kBAAC,IAAI,EAAE,IAAI,gBAC5B,KAAC,oBAAoB,oBAAK,yBAAyB,cAChD,QAAQ,IACY,IACJ,CACtB,CAAC;AACJ,CAAC,CAAC"}

package/package.json

@@ -26,8 +26,8 @@
     "@nivo/core": "^0.80.0",
     "@nivo/line": "^0.80.0",
     "@stream-io/i18n": "^0.0.2",
-    "@stream-io/video-client": "^0.0.6",
-    "@stream-io/video-react-bindings": "^0.0.6",
+    "@stream-io/video-client": "^0.0.7",
+    "@stream-io/video-react-bindings": "^0.0.7",
     "clsx": "^1.2.1",
     "rxjs": "~7.8.1"
   },
@@ -47,5 +47,5 @@
     "typedoc": "^0.24.7",
     "typescript": "^4.9.5"
   },
-  "version": "0.0.12"
+  "version": "0.0.13"
 }

package/src/core/components/StreamCall/StreamCall.tsx

@@ -1,83 +1,13 @@
-import { PropsWithChildren, useEffect, useState } from 'react';
-import { Call, CallingState, JoinCallData } from '@stream-io/video-client';
-import {
-  StreamCallProvider,
-  useConnectedUser,
-  useStreamVideoClient,
-} from '@stream-io/video-react-bindings';
+import { PropsWithChildren } from 'react';
+import { Call } from '@stream-io/video-client';
+import { StreamCallProvider } from '@stream-io/video-react-bindings';
 import {
   MediaDevicesProvider,
   MediaDevicesProviderProps,
 } from '../../contexts';
 
-type InitWithCallCID = {
-  /**
-   * The call type.
-   */
-  callType: string;
-  /**
-   * The call id.
-   */
-  callId: string;
-  /**
-   * The call instance to use.
-   */
-  call?: never;
-};
-
-type InitWithCallInstance = {
-  /**
-   * The call instance to use.
-   */
-  call: Call | undefined;
-  /**
-   * The call type.
-   */
-  callType?: never;
-  /**
-   * The call id.
-   */
-  callId?: never;
-};
-
-type InitStreamCall = InitWithCallCID | InitWithCallInstance;
-
-export type StreamCallProps = InitStreamCall & {
-  /**
-   * If true, the call will be joined automatically.
-   * Set it to true if you want to join the call immediately.
-   * Useful for scenarios where you want to skip prompting the user to join the call.
-   *
-   * @default false.
-   */
-  autoJoin?: boolean;
-
-  /**
-   * If true, the call data will be loaded automatically from the server.
-   *
-   * This property is useful for the scenarios where you declaratively create
-   * the call instance by using the `callId` and `callType` props,
-   * and you have a UI that depends on the call metadata.
-   *
-   * @example
-   * ```jsx
-   * <StreamCall callId="call-id" callType="call-type" autoLoad>
-   *   <CallMetadata /> // has access to `call.metadata` although not joined yet
-   *   <CallUI />
-   *   <CallControls />
-   * </StreamCall>
-   * ```
-   *
-   * This property is ignored if you pass the `call` prop or enable `autoJoin`.
-   *
-   * @default true.
-   */
-  autoLoad?: boolean;
-
-  /**
-   * An optional data to pass when joining the call.
-   */
-  data?: JoinCallData;
+export type StreamCallProps = {
+  call: Call;
 
   /**
    * An optional props to pass to the `MediaDevicesProvider`.
@@ -87,68 +17,11 @@ export type StreamCallProps = InitStreamCall & {
 
 export const StreamCall = ({
   children,
-  callId,
-  callType,
   call,
-  autoJoin = false,
-  autoLoad = true,
-  data,
   mediaDevicesProviderProps,
 }: PropsWithChildren<StreamCallProps>) => {
-  const client = useStreamVideoClient();
-  const [activeCall, setActiveCall] = useState<Call | undefined>(() => {
-    if (call) return call;
-    if (!client || !callId || !callType) return;
-    return client.call(callType, callId);
-  });
-
-  useEffect(() => {
-    if (!client) return;
-
-    if (callId && callType && !activeCall) {
-      const newCall = client.call(callType, callId);
-      setActiveCall(newCall);
-    }
-  }, [activeCall, callId, callType, client]);
-
-  const connectedUser = useConnectedUser();
-  useEffect(() => {
-    // run the effect only when the user is connected and the call
-    // is created declaratively by using the `callId` and `callType` props.
-    if (!connectedUser) return;
-    if (activeCall && callType && callId && autoLoad && !autoJoin) {
-      activeCall
-        .getOrCreate({
-          ring: data?.ring,
-          data: data?.data,
-          members_limit: data?.members_limit,
-        })
-        .catch((err) => {
-          console.error(`Failed to get or create call`, err);
-        });
-    }
-  }, [
-    activeCall,
-    autoJoin,
-    autoLoad,
-    callId,
-    callType,
-    connectedUser,
-    data?.data,
-    data?.members_limit,
-    data?.ring,
-  ]);
-
-  useEffect(() => {
-    if (autoJoin && activeCall?.state.callingState === CallingState.IDLE) {
-      activeCall.join(data).catch((err) => {
-        console.error(`Failed to join call`, err);
-      });
-    }
-  }, [activeCall, autoJoin, data]);
-
   return (
-    <StreamCallProvider call={activeCall}>
+    <StreamCallProvider call={call}>
       <MediaDevicesProvider {...mediaDevicesProviderProps}>
         {children}
       </MediaDevicesProvider>