@stream-io/video-react-sdk 0.0.1-alpha.100

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,45 @@
+import { CSSProperties, useState } from 'react';
+
+export type AvatarData = {
+  imageSrc?: string;
+  name?: string;
+  style?: CSSProperties & Record<string, string | number>;
+};
+
+export type AvatarProps = AvatarData;
+
+export const Avatar = ({ imageSrc, name, style }: AvatarProps) => {
+  const [error, setError] = useState(false);
+
+  return (
+    <>
+      {(!imageSrc || error) && name && (
+        <AvatarFallback style={style} names={[name]} />
+      )}
+      {imageSrc && !error && (
+        <img
+          onError={() => setError(true)}
+          alt="avatar"
+          className="str-video__avatar"
+          src={imageSrc}
+          style={style}
+        />
+      )}
+    </>
+  );
+};
+
+type AvatarFallbackProps = {
+  names: string[];
+  style?: CSSProperties & Record<string, string | number>;
+};
+export const AvatarFallback = ({ names, style }: AvatarFallbackProps) => {
+  return (
+    <div className="str-video__avatar--initials-fallback" style={style}>
+      <div>
+        {names[0][0]}
+        {names[1]?.[0]}
+      </div>
+    </div>
+  );
+};

package/src/components/Avatar/index.ts

@@ -0,0 +1 @@
+export * from './Avatar';

package/src/components/Button/CompositeButton.tsx

@@ -0,0 +1,50 @@
+import clsx from 'clsx';
+import { MenuToggle, ToggleMenuButtonProps } from '../Menu';
+import { ComponentType, forwardRef, PropsWithChildren } from 'react';
+import { Placement } from '@floating-ui/react';
+
+import { IconButton } from './IconButton';
+import { isComponentType } from '../../utilities';
+
+export type IconButtonWithMenuProps = PropsWithChildren<{
+  active?: boolean;
+  Menu?: ComponentType | JSX.Element;
+  caption?: string;
+  menuPlacement?: Placement;
+}>;
+
+export const CompositeButton = forwardRef<
+  HTMLDivElement,
+  IconButtonWithMenuProps
+>(({ caption, children, active, Menu, menuPlacement }, ref) => {
+  return (
+    <div className="str-video__composite-button" ref={ref}>
+      <div
+        className={clsx('str-video__composite-button__button-group', {
+          'str-video__composite-button__button-group--active': active,
+        })}
+      >
+        {children}
+        {Menu && (
+          <MenuToggle placement={menuPlacement} ToggleButton={ToggleMenuButton}>
+            {isComponentType(Menu) ? <Menu /> : Menu}
+          </MenuToggle>
+        )}
+      </div>
+      {caption && (
+        <div className="str-video__composite-button__caption">{caption}</div>
+      )}
+    </div>
+  );
+});
+
+const ToggleMenuButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
+  ({ menuShown }, ref) => (
+    <IconButton
+      className={'str-video__menu-toggle-button'}
+      icon={menuShown ? 'caret-down' : 'caret-up'}
+      title="Toggle device menu"
+      ref={ref}
+    />
+  ),
+);

package/src/components/Button/CopyToClipboardButton.tsx

@@ -0,0 +1,129 @@
+import {
+  ComponentProps,
+  ComponentPropsWithRef,
+  ComponentType,
+  ForwardedRef,
+  forwardRef,
+  MouseEventHandler,
+  useCallback,
+  useState,
+} from 'react';
+import clsx from 'clsx';
+import { Placement } from '@floating-ui/react';
+
+import { Tooltip } from '../Tooltip';
+
+type CopyToClipboardButtonProps = ComponentProps<'button'> & {
+  /** Custom button component implementation. Will be rendered instead of native button element */
+  Button?: ComponentType<
+    ComponentPropsWithRef<'button'> & { ref: ForwardedRef<HTMLButtonElement> }
+  >;
+  /** Custom function to override the logic of generating the call invitation link */
+  copyValue: (() => string) | string;
+  /** Callback invoked if the copy-to-clipboard action fails */
+  onError?: (button: HTMLButtonElement, e: Error) => void;
+  /** Callback invoked if the copy-to-clipboard action succeeds */
+  onSuccess?: (button: HTMLButtonElement) => void;
+};
+
+export const CopyToClipboardButton = forwardRef<
+  HTMLButtonElement,
+  CopyToClipboardButtonProps
+>(
+  (
+    { Button, className, copyValue, onClick, onError, onSuccess, ...restProps },
+    ref,
+  ) => {
+    const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(
+      async (event) => {
+        if (onClick) onClick(event);
+        const value = typeof copyValue === 'function' ? copyValue() : copyValue;
+        try {
+          await navigator?.clipboard.writeText(value);
+          onSuccess?.(event.target as HTMLButtonElement);
+        } catch (error) {
+          onError?.(event.target as HTMLButtonElement, error as Error);
+        }
+      },
+      [copyValue, onClick, onError, onSuccess],
+    );
+
+    const props = {
+      ...restProps,
+      ref: ref,
+      className: clsx('str-video__copy-to-clipboard-button', className),
+      onClick: handleClick,
+    };
+
+    return Button ? <Button {...props} /> : <button {...props} />;
+  },
+);
+
+type CopyToClipboardButtonWithPopupProps = Exclude<
+  CopyToClipboardButtonProps,
+  'onError' | 'onSuccess'
+> & {
+  dismissAfterMs?: number;
+  /** String displayed when copy-to-clipboard action fails */
+  onErrorMessage?: string;
+  /** String displayed when copy-to-clipboard succeeds fails */
+  onSuccessMessage?: string;
+  /** Class applied to the popup container element */
+  popupClassName?: string;
+  // todo: We should replace Placement for internal type
+  popupPlacement?: Placement;
+};
+
+export const CopyToClipboardButtonWithPopup = ({
+  dismissAfterMs = 1500,
+  onErrorMessage = 'Failed to copy',
+  onSuccessMessage = 'Copied to clipboard',
+  popupClassName,
+  popupPlacement,
+  ...restProps
+}: CopyToClipboardButtonWithPopupProps) => {
+  const [tooltipText, setTooltipText] = useState('');
+  const [tooltipAnchor, setTooltipAnchor] = useState<HTMLButtonElement | null>(
+    null,
+  );
+
+  const setTemporaryPopup = useCallback(
+    (popupText: string) => {
+      setTooltipText(popupText);
+      setTimeout(() => setTooltipText(''), dismissAfterMs);
+    },
+    [dismissAfterMs],
+  );
+
+  const onSuccess = useCallback(
+    () => setTemporaryPopup(onSuccessMessage),
+    [onSuccessMessage, setTemporaryPopup],
+  );
+
+  const onError = useCallback(
+    () => setTemporaryPopup(onErrorMessage),
+    [onErrorMessage, setTemporaryPopup],
+  );
+
+  return (
+    <>
+      <Tooltip
+        tooltipClassName={clsx(
+          'str-video__copy-to-clipboard-button__popup',
+          popupClassName,
+        )}
+        tooltipPlacement={popupPlacement}
+        referenceElement={tooltipAnchor}
+        visible={!!tooltipText}
+      >
+        {tooltipText}
+      </Tooltip>
+      <CopyToClipboardButton
+        {...restProps}
+        onError={onError}
+        onSuccess={onSuccess}
+        ref={setTooltipAnchor}
+      />
+    </>
+  );
+};

package/src/components/Button/IconButton.tsx

@@ -0,0 +1,32 @@
+import { ComponentProps, ForwardedRef, forwardRef } from 'react';
+import clsx from 'clsx';
+
+import { Icon, IconProps } from '../Icon';
+
+export type ButtonWithIconProps = {
+  enabled?: boolean;
+  variant?: string;
+} & ComponentProps<'button'> &
+  IconProps;
+
+export const IconButton = forwardRef(
+  (props: ButtonWithIconProps, ref: ForwardedRef<HTMLButtonElement>) => {
+    const { icon, enabled, variant, onClick, className, ...rest } = props;
+    return (
+      <button
+        className={clsx('str-video__call-controls__button', className, {
+          [`str-video__call-controls__button--variant-${variant}`]: variant,
+          'str-video__call-controls__button--enabled': enabled,
+        })}
+        onClick={(e) => {
+          e.preventDefault();
+          onClick?.(e);
+        }}
+        ref={ref}
+        {...rest}
+      >
+        <Icon icon={icon} />
+      </button>
+    );
+  },
+);

package/src/components/Button/TextButton.tsx

@@ -0,0 +1,12 @@
+import { ComponentProps } from 'react';
+
+export const TextButton = ({
+  children,
+  ...rest
+}: Omit<ComponentProps<'button'>, 'ref' | 'className'>) => {
+  return (
+    <button {...rest} className="str-video__text-button">
+      {children}
+    </button>
+  );
+};

package/src/components/Button/index.ts

@@ -0,0 +1,4 @@
+export * from './CompositeButton';
+export * from './CopyToClipboardButton';
+export * from './IconButton';
+export * from './TextButton';

package/src/components/CallControls/AcceptCallButton.tsx

@@ -0,0 +1,36 @@
+import { MouseEventHandler, useCallback } from 'react';
+import { IconButton } from '../Button';
+import { useCall } from '@stream-io/video-react-bindings';
+
+export type AcceptCallButtonProps = {
+  disabled?: boolean;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  onAccept?: () => void;
+};
+
+export const AcceptCallButton = ({
+  disabled,
+  onAccept,
+  onClick,
+}: AcceptCallButtonProps) => {
+  const call = useCall();
+  const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(
+    async (e) => {
+      if (onClick) {
+        onClick(e);
+      } else if (call) {
+        await call.join();
+        onAccept?.();
+      }
+    },
+    [onClick, onAccept, call],
+  );
+  return (
+    <IconButton
+      disabled={disabled}
+      icon="call-accept"
+      variant="success"
+      onClick={handleClick}
+    />
+  );
+};

package/src/components/CallControls/CallControls.tsx

@@ -0,0 +1,26 @@
+import {
+  CallStatsButton,
+  CancelCallButton,
+  RecordCallButton,
+  ScreenShareButton,
+  ToggleAudioPublishingButton,
+  ToggleVideoPublishingButton,
+} from './index';
+import { SpeakingWhileMutedNotification } from '../Notification';
+
+export type CallControlsProps = {
+  onLeave?: () => void;
+};
+
+export const CallControls = ({ onLeave }: CallControlsProps) => (
+  <div className="str-video__call-controls">
+    <RecordCallButton />
+    <CallStatsButton />
+    <ScreenShareButton />
+    <SpeakingWhileMutedNotification>
+      <ToggleAudioPublishingButton />
+    </SpeakingWhileMutedNotification>
+    <ToggleVideoPublishingButton />
+    <CancelCallButton onLeave={onLeave} />
+  </div>
+);

package/src/components/CallControls/CallStatsButton.tsx

@@ -0,0 +1,20 @@
+import { forwardRef } from 'react';
+
+import { CallStats } from '../CallStats';
+import { CompositeButton, IconButton } from '../Button/';
+import { MenuToggle, ToggleMenuButtonProps } from '../Menu';
+
+export const CallStatsButton = () => (
+  <MenuToggle placement="top-end" ToggleButton={ToggleMenuButton}>
+    <CallStats />
+  </MenuToggle>
+);
+
+const ToggleMenuButton = forwardRef<
+  HTMLDivElement,
+  ToggleMenuButtonProps<HTMLDivElement>
+>(({ menuShown }, ref) => (
+  <CompositeButton ref={ref} active={menuShown} caption={'Stats'}>
+    <IconButton icon="stats" title="Statistics" />
+  </CompositeButton>
+));

package/src/components/CallControls/CancelCallButton.tsx

@@ -0,0 +1,36 @@
+import { MouseEventHandler, useCallback } from 'react';
+import { IconButton } from '../Button/';
+import { useCall } from '@stream-io/video-react-bindings';
+
+export type CancelCallButtonProps = {
+  disabled?: boolean;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  onLeave?: () => void;
+};
+
+export const CancelCallButton = ({
+  disabled,
+  onClick,
+  onLeave,
+}: CancelCallButtonProps) => {
+  const call = useCall();
+  const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(
+    async (e) => {
+      if (onClick) {
+        onClick(e);
+      } else if (call) {
+        await call.leave();
+        onLeave?.();
+      }
+    },
+    [onClick, onLeave, call],
+  );
+  return (
+    <IconButton
+      disabled={disabled}
+      icon="call-end"
+      variant="danger"
+      onClick={handleClick}
+    />
+  );
+};

package/src/components/CallControls/ReactionsButton.tsx

@@ -0,0 +1,74 @@
+import { OwnCapability, StreamReaction } from '@stream-io/video-client';
+import { Restricted, useCall } from '@stream-io/video-react-bindings';
+
+import { CompositeButton, IconButton } from '../Button';
+import { defaultEmojiReactions } from '../Reaction';
+
+export const defaultReactions: StreamReaction[] = [
+  {
+    type: 'reaction',
+    emoji_code: ':like:',
+  },
+  {
+    // TODO OL: use `prompt` type?
+    type: 'raised-hand',
+    emoji_code: ':raise-hand:',
+  },
+  {
+    type: 'reaction',
+    emoji_code: ':fireworks:',
+  },
+];
+
+export interface ReactionsButtonProps {
+  reactions?: StreamReaction[];
+}
+
+export const ReactionsButton = ({
+  reactions = defaultReactions,
+}: ReactionsButtonProps) => {
+  return (
+    <Restricted requiredGrants={[OwnCapability.CREATE_REACTION]}>
+      <CompositeButton
+        active={false}
+        caption="Reactions"
+        menuPlacement="top-start"
+        Menu={<DefaultReactionsMenu reactions={reactions} />}
+      >
+        <IconButton
+          icon="reactions"
+          title="Reactions"
+          onClick={() => {
+            console.log('Reactions');
+          }}
+        />
+      </CompositeButton>
+    </Restricted>
+  );
+};
+
+export interface DefaultReactionsMenuProps {
+  reactions: StreamReaction[];
+}
+
+export const DefaultReactionsMenu = ({
+  reactions,
+}: DefaultReactionsMenuProps) => {
+  const call = useCall();
+  return (
+    <div className="str-video__reactions-menu">
+      {reactions.map((reaction) => (
+        <button
+          key={reaction.emoji_code}
+          type="button"
+          className="str-video__reactions-menu__button"
+          onClick={() => {
+            call?.sendReaction(reaction);
+          }}
+        >
+          {reaction.emoji_code && defaultEmojiReactions[reaction.emoji_code]}
+        </button>
+      ))}
+    </div>
+  );
+};

package/src/components/CallControls/RecordCallButton.tsx

@@ -0,0 +1,73 @@
+import { useCallback, useEffect, useState } from 'react';
+import { OwnCapability } from '@stream-io/video-client';
+import {
+  Restricted,
+  useCall,
+  useIsCallRecordingInProgress,
+} from '@stream-io/video-react-bindings';
+import { CompositeButton, IconButton } from '../Button/';
+import { LoadingIndicator } from '../LoadingIndicator';
+
+export type RecordCallButtonProps = {
+  caption?: string;
+};
+
+export const RecordCallButton = ({
+  caption = 'Record',
+}: RecordCallButtonProps) => {
+  const call = useCall();
+  const isCallRecordingInProgress = useIsCallRecordingInProgress();
+  const [isAwaitingResponse, setIsAwaitingResponse] = useState(false);
+  useEffect(() => {
+    // we wait until call.recording_started/stopped event to flips the
+    // `isCallRecordingInProgress` state variable.
+    // Once the flip happens, we remove the loading indicator
+    setIsAwaitingResponse((isAwaiting) => {
+      if (isAwaiting) return false;
+      return isAwaiting;
+    });
+  }, [isCallRecordingInProgress]);
+
+  const toggleRecording = useCallback(async () => {
+    try {
+      setIsAwaitingResponse(true);
+      if (isCallRecordingInProgress) {
+        await call?.stopRecording();
+      } else {
+        await call?.startRecording();
+      }
+    } catch (e) {
+      console.error(`Failed start recording`, e);
+    }
+  }, [call, isCallRecordingInProgress]);
+
+  return (
+    <Restricted
+      requiredGrants={[
+        OwnCapability.START_RECORD_CALL,
+        OwnCapability.STOP_RECORD_CALL,
+      ]}
+    >
+      <CompositeButton active={isCallRecordingInProgress} caption={caption}>
+        {isAwaitingResponse ? (
+          <LoadingIndicator
+            tooltip={
+              isCallRecordingInProgress
+                ? 'Waiting for recording to stop... '
+                : 'Waiting for recording to start...'
+            }
+          />
+        ) : (
+          <IconButton
+            // FIXME OL: sort out this ambiguity
+            enabled={!!call}
+            disabled={!call}
+            icon={isCallRecordingInProgress ? 'recording-on' : 'recording-off'}
+            title="Record call"
+            onClick={toggleRecording}
+          />
+        )}
+      </CompositeButton>
+    </Restricted>
+  );
+};

package/src/components/CallControls/ScreenShareButton.tsx

@@ -0,0 +1,84 @@
+import { useEffect, useState } from 'react';
+import {
+  getScreenShareStream,
+  OwnCapability,
+  SfuModels,
+} from '@stream-io/video-client';
+import {
+  Restricted,
+  useCall,
+  useHasOngoingScreenShare,
+  useHasPermissions,
+  useLocalParticipant,
+} from '@stream-io/video-react-bindings';
+import { CompositeButton, IconButton } from '../Button/';
+import { PermissionNotification } from '../Notification';
+
+export type ScreenShareButtonProps = {
+  caption?: string;
+};
+
+export const ScreenShareButton = ({
+  caption = 'Screen Share',
+}: ScreenShareButtonProps) => {
+  const call = useCall();
+  const localParticipant = useLocalParticipant();
+  const isSomeoneScreenSharing = useHasOngoingScreenShare();
+  const isScreenSharing = localParticipant?.publishedTracks.includes(
+    SfuModels.TrackType.SCREEN_SHARE,
+  );
+
+  const [isAwaitingApproval, setIsAwaitingApproval] = useState(false);
+  const hasPermission = useHasPermissions(OwnCapability.SCREENSHARE);
+  useEffect(() => {
+    if (hasPermission) {
+      setIsAwaitingApproval(false);
+    }
+  }, [hasPermission]);
+  return (
+    <Restricted requiredGrants={[OwnCapability.SCREENSHARE]}>
+      <PermissionNotification
+        permission={OwnCapability.SCREENSHARE}
+        isAwaitingApproval={isAwaitingApproval}
+        messageApproved="You can now share your screen."
+        messageAwaitingApproval="Awaiting for an approval to share screen."
+        messageRevoked="You can no longer share your screen."
+      >
+        <CompositeButton active={isSomeoneScreenSharing} caption={caption}>
+          <IconButton
+            icon={isScreenSharing ? 'screen-share-on' : 'screen-share-off'}
+            title="Share screen"
+            disabled={(!isScreenSharing && isSomeoneScreenSharing) || !call}
+            onClick={async () => {
+              if (
+                !hasPermission &&
+                call?.permissionsContext.canRequest(OwnCapability.SCREENSHARE)
+              ) {
+                setIsAwaitingApproval(true);
+                await call
+                  .requestPermissions({
+                    permissions: [OwnCapability.SCREENSHARE],
+                  })
+                  .catch((reason) => {
+                    console.log('RequestPermissions failed', reason);
+                  });
+                return;
+              }
+
+              if (!isScreenSharing && hasPermission) {
+                const stream = await getScreenShareStream().catch((e) => {
+                  console.log(`Can't share screen: ${e}`);
+                });
+                if (stream) {
+                  await call?.publishScreenShareStream(stream);
+                }
+              } else {
+                await call?.stopPublish(SfuModels.TrackType.SCREEN_SHARE);
+              }
+            }}
+          />
+        </CompositeButton>
+      </PermissionNotification>
+    </Restricted>
+  );
+};