@stream-io/video-react-bindings 0.0.1-alpha.13

package/src/hooks/call.ts

@@ -0,0 +1,126 @@
+import { useObservableValue } from './helpers/useObservableValue';
+import { useCallState, useStore } from './store';
+
+/**
+ * Utility hook which provides information whether the current call is being recorded.
+ *
+ * @category Call State
+ */
+export const useIsCallRecordingInProgress = () => {
+  const { callRecordingInProgress$ } = useCallState();
+  return useObservableValue(callRecordingInProgress$);
+};
+
+/**
+ * Utility hook which provides a boolean indicating whether there is
+ * a participant in the current call which shares their screen.
+ *
+ * @category Call State
+ */
+export const useHasOngoingScreenShare = () => {
+  const { hasOngoingScreenShare$ } = useCallState();
+  return useObservableValue(hasOngoingScreenShare$);
+};
+
+/**
+ * Utility hook which provides the latest stats report of the current call.
+ *
+ * The latest stats report of the current call.
+ * When stats gathering is enabled, this observable will emit a new value
+ * at a regular (configurable) interval.
+ *
+ * Consumers of this observable can implement their own batching logic
+ * in case they want to show historical stats data.
+ *
+ * @category Call State
+ */
+export const useCurrentCallStatsReport = () => {
+  const { callStatsReport$ } = useCallState();
+  return useObservableValue(callStatsReport$);
+};
+
+/**
+ * Utility hook which provides the dominant speaker of the current call.
+ *
+ * @category Call State
+ */
+export const useDominantSpeaker = () => {
+  const { dominantSpeaker$ } = useCallState();
+  return useObservableValue(dominantSpeaker$);
+};
+
+/**
+ * Utility hook which provides a list of all notifications about created calls.
+ * In the ring call settings, these calls can be outgoing (I have called somebody)
+ * or incoming (somebody has called me).
+ *
+ * @category Client State
+ */
+export const useCalls = () => {
+  const { calls$ } = useStore();
+  return useObservableValue(calls$);
+};
+
+/**
+ * Utility hook which provides a list of all incoming ring calls (somebody calls me).
+ *
+ * @deprecated derive from useCalls()/useCall() instead.
+ * @internal
+ * @category Client State
+ */
+export const useIncomingCalls = () => {
+  const { incomingCalls$ } = useStore();
+  return useObservableValue(incomingCalls$);
+};
+
+/**
+ * Utility hook which provides a list of all outgoing ring calls (I call somebody).
+ *
+ * @deprecated derive from useCalls()/useCall() instead.
+ * @internal
+ * @category Client State
+ */
+export const useOutgoingCalls = () => {
+  const { outgoingCalls$ } = useStore();
+  return useObservableValue(outgoingCalls$);
+};
+
+/**
+ * Utility hook which provides call metadata (such as blocked users and own capabilities).
+ *
+ * @category Call State
+ */
+export const useCallMetadata = () => {
+  const { metadata$ } = useCallState();
+  return useObservableValue(metadata$);
+};
+
+/**
+ * Utility hook which provides a list of call members.
+ *
+ * @category Call State
+ */
+export const useCallMembers = () => {
+  const { members$ } = useCallState();
+  return useObservableValue(members$);
+};
+
+/**
+ * Utility hook providing the latest list of recordings performed during the active call
+ *
+ * @category Call State
+ */
+export const useCallRecordings = () => {
+  const { callRecordingList$ } = useCallState();
+  return useObservableValue(callRecordingList$);
+};
+
+/**
+ * Utility hook providing the current calling state of the call.
+ *
+ * @category Call State
+ */
+export const useCallCallingState = () => {
+  const { callingState$ } = useCallState();
+  return useObservableValue(callingState$);
+};

package/src/hooks/client.ts

@@ -0,0 +1,77 @@
+import {
+  StreamClientOptions,
+  StreamVideoClient,
+  TokenOrProvider,
+  User,
+} from '@stream-io/video-client';
+import { useEffect, useRef, useState } from 'react';
+
+/**
+ * Exclude types from documentation site, but we should still add doc comments
+ * @internal
+ */
+export type StreamVideoClientInit = {
+  /**
+   * The Stream API key.
+   */
+  apiKey: string;
+  /**
+   * The token or token provider.
+   */
+  tokenOrProvider: TokenOrProvider;
+  /**
+   * The client options.
+   */
+  options?: StreamClientOptions;
+  /**
+   * The user to connect.
+   */
+  user: User;
+  /**
+   * Whether the user is anonymous. Defaults to `false`.
+   */
+  isAnonymous?: boolean;
+};
+
+/**
+ * Creates a new `StreamVideoClient` instance and connects the given user.
+ *
+ * @category Client State
+ */
+export const useCreateStreamVideoClient = ({
+  apiKey,
+  tokenOrProvider,
+  user,
+  options,
+  isAnonymous = false,
+}: StreamVideoClientInit) => {
+  const [client] = useState(() => new StreamVideoClient(apiKey, options));
+
+  const disconnectRef = useRef(Promise.resolve());
+  useEffect(() => {
+    const connectionPromise = disconnectRef.current.then(() => {
+      if (isAnonymous) {
+        return client
+          .connectAnonymousUser(user, tokenOrProvider)
+          .catch((err) => {
+            console.error(`Failed to establish connection`, err);
+          });
+      }
+      return client.connectUser(user, tokenOrProvider).catch((err) => {
+        console.error(`Failed to establish connection`, err);
+      });
+    });
+
+    return () => {
+      disconnectRef.current = connectionPromise
+        .then(() => client.disconnectUser())
+        .catch((err) => {
+          console.error(`Failed to disconnect`, err);
+        });
+    };
+    // we want to re-run this effect only in some special cases
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [apiKey, tokenOrProvider, client, isAnonymous, user?.id]);
+
+  return client;
+};

package/src/hooks/helpers/useObservableValue.ts

@@ -0,0 +1,21 @@
+import type { Observable } from 'rxjs';
+import { useEffect, useState } from 'react';
+import { RxUtils } from '@stream-io/video-client';
+
+/**
+ *
+ * @internal
+ */
+export const useObservableValue = <T>(observable$: Observable<T>) => {
+  const [value, setValue] = useState<T>(() =>
+    RxUtils.getCurrentValue(observable$),
+  );
+  useEffect(() => {
+    const subscription = observable$.subscribe(setValue);
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [observable$]);
+
+  return value;
+};

package/src/hooks/index.ts

@@ -0,0 +1,6 @@
+export * from './call';
+export * from './client';
+export * from './participants';
+export * from './permissions';
+export * from './store';
+export * from './user';

package/src/hooks/participants.ts

@@ -0,0 +1,57 @@
+import { useObservableValue } from './helpers/useObservableValue';
+import { useCallState } from './store';
+import type {
+  Comparator,
+  StreamVideoParticipant,
+} from '@stream-io/video-client';
+import { useMemo } from 'react';
+
+/**
+ * A hook which provides a list of all participants that have joined an active call.
+ *
+ * @category Call State
+ *
+ * @param options.sortBy - A comparator function to sort the participants by.
+ * Make sure to memoize output of the `combineComparators` function
+ * (or keep it out of component's scope if possible) before passing it down to this property.
+ */
+export const useParticipants = ({
+  sortBy,
+}: {
+  /**
+   * Make sure to memoize output of the `combineComparators` function
+   * (or keep it out of component's scope if possible) before passing it down to this property.
+   */
+  sortBy?: Comparator<StreamVideoParticipant>;
+} = {}) => {
+  const { participants$ } = useCallState();
+  const participants = useObservableValue(participants$);
+
+  return useMemo(() => {
+    if (sortBy) {
+      return [...participants].sort(sortBy);
+    }
+    return participants;
+  }, [participants, sortBy]);
+};
+
+/**
+ * A hook which provides a StreamVideoLocalParticipant object.
+ * It signals that I have joined a call.
+ *
+ * @category Call State
+ */
+export const useLocalParticipant = () => {
+  const { localParticipant$ } = useCallState();
+  return useObservableValue(localParticipant$);
+};
+
+/**
+ * A hook which provides a list of all other participants than me that have joined an active call.
+ *
+ * @category Call State
+ */
+export const useRemoteParticipants = () => {
+  const { remoteParticipants$ } = useCallState();
+  return useObservableValue(remoteParticipants$);
+};

package/src/hooks/permissions.ts

@@ -0,0 +1,27 @@
+import { OwnCapability } from '@stream-io/video-client';
+import { useCallMetadata } from './call';
+
+/**
+ * Hook that returns true if the current user has all the given permissions.
+ *
+ * @param permissions the permissions to check.
+ *
+ * @category Call State
+ */
+export const useHasPermissions = (...permissions: OwnCapability[]) => {
+  const metadata = useCallMetadata();
+  if (!metadata) return false;
+  return permissions.every((permission) =>
+    metadata.own_capabilities.includes(permission),
+  );
+};
+
+/**
+ * A hook which returns the current user's own capabilities.
+ *
+ * @category Call State
+ */
+export const useOwnCapabilities = () => {
+  const metadata = useCallMetadata();
+  return metadata?.own_capabilities || [];
+};

package/src/hooks/store.ts

@@ -0,0 +1,33 @@
+import { CallState } from '@stream-io/video-client';
+import { useCall, useStreamVideoClient } from '../contexts';
+
+/**
+ * Utility hook which provides access to client's state store.
+ */
+export const useStore = () => {
+  const client = useStreamVideoClient();
+  if (!client) {
+    throw new Error(
+      `StreamVideoClient isn't initialized or this hook is called outside of <StreamVideo> context.`,
+    );
+  }
+  return client.readOnlyStateStore;
+};
+
+/**
+ * Utility hook which provides the current call's state.
+ *
+ * @category Call State
+ */
+export const useCallState = () => {
+  const call = useCall();
+  // return an empty and unlinked CallState object if there is no call in the provider
+  // this ensures that the hooks always return a value and many null checks can be avoided
+  if (!call) {
+    console.warn(
+      `You are using useCallState() outside a Call context. Please wrap your component in <StreamCallProvider />`,
+    );
+    return new CallState();
+  }
+  return call.state;
+};

package/src/hooks/user.ts

@@ -0,0 +1,13 @@
+import { useStore } from './store';
+import { useObservableValue } from './helpers/useObservableValue';
+
+/**
+ *
+ * @returns
+ *
+ * @category Client State
+ */
+export const useConnectedUser = () => {
+  const { connectedUser$ } = useStore();
+  return useObservableValue(connectedUser$);
+};