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

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/CallControls.tsx

@@ -0,0 +1,32 @@
+import { Call } from '@stream-io/video-client';
+import {
+  CallStatsButton,
+  CancelCallButton,
+  RecordCallButton,
+  ScreenShareButton,
+  ToggleAudioPublishingButton,
+  ToggleCameraPublishingButton,
+} from './index';
+import { SpeakingWhileMutedNotification } from '../Notification';
+
+export type CallControlsProps = {
+  call: Call;
+  onLeave?: () => void;
+};
+
+export const CallControls = (props: CallControlsProps) => {
+  const { call, onLeave } = props;
+
+  return (
+    <div className="str-video__call-controls">
+      <RecordCallButton call={call} />
+      <CallStatsButton />
+      <ScreenShareButton call={call} />
+      <SpeakingWhileMutedNotification>
+        <ToggleAudioPublishingButton />
+      </SpeakingWhileMutedNotification>
+      <ToggleCameraPublishingButton />
+      <CancelCallButton call={call} onLeave={onLeave} />
+    </div>
+  );
+};

package/src/components/CallControls/CallStatsButton.tsx

@@ -0,0 +1,28 @@
+import { forwardRef } from 'react';
+
+import { CallStats } from '../StreamCall/CallStats';
+import { CompositeButton, IconButton } from '../Button/';
+import { MenuToggle, ToggleMenuButtonProps } from '../Menu';
+
+type CallStatsButtonProps = {
+  caption?: string;
+};
+
+export const CallStatsButton = ({
+  caption = 'Stats',
+}: CallStatsButtonProps) => {
+  return (
+    <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,28 @@
+import { MouseEventHandler, useCallback } from 'react';
+import { Call } from '@stream-io/video-client';
+import { IconButton } from '../Button/';
+
+export type CancelCallButtonProps = {
+  call: Call;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  onLeave?: () => void;
+};
+
+export const CancelCallButton = ({
+  call,
+  onClick,
+  onLeave,
+}: CancelCallButtonProps) => {
+  const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(
+    async (e) => {
+      if (onClick) {
+        onClick(e);
+      } else if (call) {
+        await call.leave();
+        onLeave?.();
+      }
+    },
+    [onClick, onLeave, call],
+  );
+  return <IconButton icon="call-end" variant="danger" onClick={handleClick} />;
+};

package/src/components/CallControls/ReactionsButton.tsx

@@ -0,0 +1,75 @@
+import { OwnCapability, StreamReaction } from '@stream-io/video-client';
+import { useCall } from '@stream-io/video-react-bindings';
+
+import { CompositeButton, IconButton } from '../Button';
+import { defaultEmojiReactions } from '../Reaction';
+import { Restricted } from '../Moderation';
+
+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,68 @@
+import { useCallback, useEffect, useState } from 'react';
+import { Call, OwnCapability } from '@stream-io/video-client';
+import { useIsCallRecordingInProgress } from '@stream-io/video-react-bindings';
+import { CompositeButton, IconButton } from '../Button/';
+import { LoadingIndicator } from '../LoadingIndicator';
+import { Restricted } from '../Moderation';
+
+export type RecordCallButtonProps = {
+  call: Call;
+  caption?: string;
+};
+
+export const RecordCallButton = ({
+  call,
+  caption = 'Record',
+}: RecordCallButtonProps) => {
+  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
+            icon={isCallRecordingInProgress ? 'recording-on' : 'recording-off'}
+            title="Record call"
+            onClick={toggleRecording}
+          />
+        )}
+      </CompositeButton>
+    </Restricted>
+  );
+};

package/src/components/CallControls/ScreenShareButton.tsx

@@ -0,0 +1,85 @@
+import { useEffect, useState } from 'react';
+import {
+  Call,
+  getScreenShareStream,
+  OwnCapability,
+  SfuModels,
+} from '@stream-io/video-client';
+import {
+  useHasOngoingScreenShare,
+  useHasPermissions,
+  useLocalParticipant,
+} from '@stream-io/video-react-bindings';
+import { CompositeButton, IconButton } from '../Button/';
+import { PermissionNotification } from '../Notification';
+import { Restricted } from '../Moderation';
+
+export type ScreenShareButtonProps = {
+  call: Call;
+  caption?: string;
+};
+
+export const ScreenShareButton = ({
+  call,
+  caption = 'Screen Share',
+}: ScreenShareButtonProps) => {
+  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}
+            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>
+  );
+};

package/src/components/CallControls/ToggleAudioButton.tsx

@@ -0,0 +1,112 @@
+import { useCallback, useEffect, useState } from 'react';
+import { OwnCapability, SfuModels } from '@stream-io/video-client';
+import {
+  useCall,
+  useHasPermissions,
+  useLocalParticipant,
+  useI18n,
+} from '@stream-io/video-react-bindings';
+
+import { useMediaDevices } from '../../core/contexts';
+import { DeviceSelectorAudioInput } from '../DeviceSettings';
+import { CompositeButton, IconButton } from '../Button';
+import { PermissionNotification } from '../Notification';
+import { Restricted } from '../Moderation';
+
+export type ToggleAudioPreviewButtonProps = { caption?: string };
+
+export const ToggleAudioPreviewButton = ({
+  caption,
+}: ToggleAudioPreviewButtonProps) => {
+  const { initialAudioEnabled, toggleAudioMuteState } = useMediaDevices();
+  const { t } = useI18n();
+
+  return (
+    <CompositeButton
+      Menu={DeviceSelectorAudioInput}
+      active={!initialAudioEnabled}
+      caption={caption || t('Mic')}
+    >
+      <IconButton
+        icon={initialAudioEnabled ? 'mic' : 'mic-off'}
+        onClick={toggleAudioMuteState}
+      />
+    </CompositeButton>
+  );
+};
+
+export type ToggleAudioPublishingButtonProps = {
+  caption?: string;
+};
+
+export const ToggleAudioPublishingButton = ({
+  caption,
+}: ToggleAudioPublishingButtonProps) => {
+  const { publishAudioStream, stopPublishingAudio } = useMediaDevices();
+  const localParticipant = useLocalParticipant();
+  const { t } = useI18n();
+  const isAudioMute = !localParticipant?.publishedTracks.includes(
+    SfuModels.TrackType.AUDIO,
+  );
+
+  const call = useCall();
+  const hasPermission = useHasPermissions(OwnCapability.SEND_AUDIO);
+  const [isAwaitingApproval, setIsAwaitingApproval] = useState(false);
+  useEffect(() => {
+    if (hasPermission) {
+      setIsAwaitingApproval(false);
+    }
+  }, [hasPermission]);
+
+  const handleClick = useCallback(async () => {
+    if (
+      !hasPermission &&
+      call &&
+      call.permissionsContext.canRequest(OwnCapability.SEND_AUDIO)
+    ) {
+      setIsAwaitingApproval(true);
+      await call
+        .requestPermissions({
+          permissions: [OwnCapability.SEND_AUDIO],
+        })
+        .catch((reason) => {
+          console.log('RequestPermissions failed', reason);
+        });
+      return;
+    }
+    if (isAudioMute && hasPermission) {
+      await publishAudioStream();
+    } else {
+      stopPublishingAudio();
+    }
+  }, [
+    call,
+    hasPermission,
+    isAudioMute,
+    publishAudioStream,
+    stopPublishingAudio,
+  ]);
+
+  return (
+    <Restricted requiredGrants={[OwnCapability.SEND_AUDIO]}>
+      <PermissionNotification
+        permission={OwnCapability.SEND_AUDIO}
+        isAwaitingApproval={isAwaitingApproval}
+        messageApproved="You can now speak."
+        messageAwaitingApproval="Awaiting for an approval to speak."
+        messageRevoked="You can no longer speak."
+      >
+        <CompositeButton
+          Menu={DeviceSelectorAudioInput}
+          active={isAudioMute}
+          caption={caption || t('Mic')}
+        >
+          <IconButton
+            icon={isAudioMute ? 'mic-off' : 'mic'}
+            onClick={handleClick}
+          />
+        </CompositeButton>
+      </PermissionNotification>
+    </Restricted>
+  );
+};

package/src/components/CallControls/ToggleAudioOutputButton.tsx

@@ -0,0 +1,21 @@
+import { CompositeButton, IconButton } from '../Button';
+import { DeviceSelectorAudioOutput } from '../DeviceSettings';
+import { useI18n } from '@stream-io/video-react-bindings';
+
+export type ToggleAudioOutputButtonProps = { caption?: string };
+
+export const ToggleAudioOutputButton = ({
+  caption,
+}: ToggleAudioOutputButtonProps) => {
+  const { t } = useI18n();
+
+  return (
+    <CompositeButton
+      Menu={DeviceSelectorAudioOutput}
+      active
+      caption={caption || t('Speakers')}
+    >
+      <IconButton icon="speaker" />
+    </CompositeButton>
+  );
+};