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

package/src/components/Moderation/Restricted.tsx

@@ -1,38 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { OwnCapability } from '@stream-io/video-client';
-import { useCall, useOwnCapabilities } from '@stream-io/video-react-bindings';
-
-type RestrictedProps = PropsWithChildren<{
-  /**
-   * OwnCapabilities of the participant - grants they have available
-   */
-  availableGrants?: OwnCapability[];
-  /**
-   * Required grants for the component to be able to render supplied children elements
-   */
-  requiredGrants: OwnCapability[];
-  /**
-   * Require all grants specified in `requiredGrants` to be available in the `availableGrants`,
-   * component by default requires only one grant to appear in both arrays to render its children
-   */
-  requireAll?: boolean;
-}>;
-
-export const Restricted = ({
-  availableGrants: availableGrantsFromProps,
-  requiredGrants,
-  requireAll = true,
-  children,
-}: RestrictedProps) => {
-  const call = useCall();
-  const ownCapabilities = useOwnCapabilities();
-  const availableGrants = availableGrantsFromProps || ownCapabilities;
-  const hasPermissions = requiredGrants[requireAll ? 'every' : 'some'](
-    (capability) => availableGrants.includes(capability),
-  );
-  const canRequest = requiredGrants.some(
-    (capability) => !!call && call.permissionsContext.canRequest(capability),
-  );
-  if (hasPermissions || canRequest) return <>{children}</>;
-  return null;
-};

package/src/components/Moderation/index.ts

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

package/src/components/StreamMeeting/StreamMeeting.tsx

@@ -1,80 +0,0 @@
-import { PropsWithChildren, useEffect, useState } from 'react';
-import { Call, CallingState, JoinCallRequest } from '@stream-io/video-client';
-import {
-  StreamCallProvider,
-  useStreamVideoClient,
-} from '@stream-io/video-react-bindings';
-import { MediaDevicesProvider, MediaDevicesProviderProps } from '../../core';
-
-type InitWithCallCID = {
-  callId: string;
-  callType: string;
-  call?: never;
-};
-
-type InitWithCallInstance = {
-  call: Call | undefined;
-  callId?: never;
-  callType?: never;
-};
-
-type InitStreamMeeting = InitWithCallCID | InitWithCallInstance;
-
-export type StreamMeetingProps = InitStreamMeeting & {
-  /**
-   * If true, the call will be joined automatically.
-   * Usually, in the "ring" scenario, this flag should be set to false as
-   * the callee should decide whether to join the call or not.
-   *
-   * @default true.
-   */
-  autoJoin?: boolean;
-
-  /**
-   * An optional data to pass when joining the call.
-   */
-  data?: JoinCallRequest;
-
-  /**
-   * An optional props to pass to the `MediaDevicesProvider`.
-   */
-  mediaDevicesProviderProps?: MediaDevicesProviderProps;
-};
-
-export const StreamMeeting = ({
-  children,
-  callId,
-  callType,
-  call,
-  autoJoin = true,
-  data,
-  mediaDevicesProviderProps,
-}: PropsWithChildren<StreamMeetingProps>) => {
-  const client = useStreamVideoClient();
-  const [activeCall, setActiveCall] = useState<Call | undefined>(call);
-
-  useEffect(() => {
-    if (!client) return;
-
-    if (callId && callType && !activeCall) {
-      const newCall = client.call(callType, callId);
-      setActiveCall(newCall);
-    }
-  }, [activeCall, callId, callType, client]);
-
-  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}>
-      <MediaDevicesProvider {...mediaDevicesProviderProps}>
-        {children}
-      </MediaDevicesProvider>
-    </StreamCallProvider>
-  );
-};

package/src/components/StreamMeeting/index.ts

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

package/src/core/components/ParticipantBox/ParticipantBox.tsx

@@ -1,248 +0,0 @@
-import { forwardRef, useEffect, useState } from 'react';
-import clsx from 'clsx';
-import {
-  Call,
-  SfuModels,
-  StreamVideoParticipant,
-  VisibilityState,
-} from '@stream-io/video-client';
-import { useIsDebugMode } from '../../../components/Debug/useIsDebugMode';
-import { DebugParticipantPublishQuality } from '../../../components/Debug/DebugParticipantPublishQuality';
-import { DebugStatsView } from '../../../components/Debug/DebugStatsView';
-import { Audio } from '../Audio/Audio';
-import { Video } from '../../../components/Video';
-import { Notification } from '../../../components/Notification';
-import { Reaction } from '../../../components/Reaction';
-import { MenuToggle, ToggleMenuButtonProps } from '../../../components/Menu';
-import { IconButton } from '../../../components/Button';
-import { ParticipantActionsContextMenu } from '../../../components/CallParticipantsList';
-
-export interface ParticipantBoxProps {
-  /**
-   * The participant bound to this component.
-   */
-  participant: StreamVideoParticipant;
-
-  /**
-   * The current call.
-   */
-  call: Call;
-
-  /**
-   * In supported browsers, this sets the default audio output.
-   * The value of this prop should be a valid Audio Output `deviceId`.
-   */
-  sinkId?: string;
-
-  /**
-   * The kind of video stream to play for the given participant.
-   */
-  videoKind?: 'video' | 'screen';
-
-  /**
-   * Turns on/off the status indicator icons (mute, connection quality, etc...).
-   */
-  indicatorsVisible?: boolean;
-
-  /**
-   * Turns on/off the audio for the participant.
-   */
-  muteAudio?: boolean;
-
-  /**
-   * A function meant for exposing the "native" element ref to the integrators.
-   * The element can either be:
-   * - `<video />` for participants with enabled video.
-   * - `<div />` for participants with disabled video. This ref would point to
-   * the VideoPlaceholder component.
-   *
-   * @param element the element ref.
-   */
-  setVideoElementRef?: (element: HTMLElement | null) => void;
-
-  /**
-   * An additional list of class names to append to the root DOM element.
-   */
-  className?: string;
-
-  /**
-   * The position of the toggle button menu, relative to its button element.
-   */
-  toggleMenuPosition?: 'top' | 'bottom';
-}
-
-const ToggleButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
-  (props, ref) => {
-    return <IconButton enabled={props.menuShown} icon="ellipsis" ref={ref} />;
-  },
-);
-
-export const ParticipantBox = (props: ParticipantBoxProps) => {
-  const {
-    participant,
-    indicatorsVisible = true,
-    videoKind = 'video',
-    call,
-    sinkId,
-    muteAudio,
-    setVideoElementRef,
-    className,
-    toggleMenuPosition = 'bottom',
-  } = props;
-
-  const {
-    audioStream,
-    videoStream,
-    isLoggedInUser: isLocalParticipant,
-    isDominantSpeaker,
-    isSpeaking,
-    publishedTracks,
-    connectionQuality,
-    sessionId,
-    reaction,
-  } = participant;
-
-  const hasAudio = publishedTracks.includes(SfuModels.TrackType.AUDIO);
-  const hasVideo = publishedTracks.includes(SfuModels.TrackType.VIDEO);
-  const isPinned = !!participant.pinnedAt;
-
-  const [trackedElement, setTrackedElement] = useState<HTMLDivElement | null>(
-    null,
-  );
-
-  const connectionQualityAsString =
-    !!connectionQuality &&
-    String(SfuModels.ConnectionQuality[connectionQuality]).toLowerCase();
-
-  useEffect(() => {
-    if (!trackedElement) return;
-
-    const unobserve = call.viewportTracker.observe(trackedElement, (entry) => {
-      call.state.updateParticipant(sessionId, (p) => ({
-        ...p,
-        viewportVisibilityState: entry.isIntersecting
-          ? VisibilityState.VISIBLE
-          : VisibilityState.INVISIBLE,
-      }));
-    });
-
-    return () => {
-      unobserve();
-      // reset visibility state to UNKNOWN upon cleanup
-      // so that the layouts that are not actively observed
-      // can still function normally (runtime layout switching)
-      call.state.updateParticipant(sessionId, (p) => ({
-        ...p,
-        viewportVisibilityState: VisibilityState.UNKNOWN,
-      }));
-    };
-  }, [trackedElement, call.viewportTracker, call.state, sessionId]);
-
-  const isDebugMode = useIsDebugMode();
-  return (
-    <div
-      className={clsx(
-        'str-video__participant',
-        isSpeaking && 'str-video__participant--speaking',
-        !hasVideo && 'str-video__participant--no-video',
-        !hasAudio && 'str-video__participant--no-audio',
-        className,
-      )}
-      ref={setTrackedElement}
-    >
-      <MenuToggle
-        strategy="fixed"
-        placement={toggleMenuPosition === 'top' ? 'top-end' : 'bottom-end'}
-        ToggleButton={ToggleButton}
-      >
-        <ParticipantActionsContextMenu participant={participant} />
-      </MenuToggle>
-
-      <div className="str-video__video-container">
-        <Audio
-          // mute the local participant, as we don't want to hear ourselves
-          muted={participant.isLoggedInUser || muteAudio}
-          sinkId={sinkId}
-          audioStream={audioStream}
-        />
-        <Video
-          call={call}
-          participant={participant}
-          kind={videoKind}
-          setVideoElementRef={setVideoElementRef}
-          className={clsx('str-video__remote-video', {
-            'str-video__remote-video--mirror':
-              isLocalParticipant && videoKind === 'video',
-            'str-video__screen-share': videoKind === 'screen',
-          })}
-          // mute the local participant, as we don't want to hear ourselves
-          muted={participant.isLoggedInUser}
-          autoPlay
-        />
-        {reaction && (
-          <Reaction reaction={reaction} sessionId={sessionId} call={call} />
-        )}
-        <div className="str-video__participant_details">
-          <span className="str-video__participant_name">
-            {participant.name || participant.userId}
-            {indicatorsVisible && isDominantSpeaker && (
-              <span
-                className="str-video__participant_name--dominant_speaker"
-                title="Dominant speaker"
-              />
-            )}
-            {indicatorsVisible && (
-              <Notification
-                isVisible={
-                  isLocalParticipant &&
-                  connectionQuality === SfuModels.ConnectionQuality.POOR
-                }
-                message="Poor connection quality. Please check your internet connection."
-              >
-                {connectionQualityAsString && (
-                  <span
-                    className={clsx(
-                      'str-video__participant__connection-quality',
-                      `str-video__participant__connection-quality--${connectionQualityAsString}`,
-                    )}
-                    title={connectionQualityAsString}
-                  />
-                )}
-              </Notification>
-            )}
-            {indicatorsVisible && !hasAudio && (
-              <span className="str-video__participant_name--audio-muted"></span>
-            )}
-            {indicatorsVisible && !hasVideo && (
-              <span className="str-video__participant_name--video-muted"></span>
-            )}
-            {indicatorsVisible && isPinned && (
-              // TODO: remove this monstrosity once we have a proper design
-              <span
-                title="Unpin"
-                onClick={() =>
-                  call.setParticipantPinnedAt(participant.sessionId)
-                }
-                style={{ cursor: 'pointer' }}
-                className="str-video__participant_name--pinned"
-              ></span>
-            )}
-          </span>
-          {isDebugMode && (
-            <>
-              <DebugParticipantPublishQuality
-                participant={participant}
-                call={call}
-              />
-              <DebugStatsView
-                call={call}
-                kind={isLocalParticipant ? 'publisher' : 'subscriber'}
-                mediaStream={videoStream}
-              />
-            </>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/core/components/ParticipantBox/index.ts

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

package/src/core/components/Video/VideoPlaceholder.tsx

@@ -1,40 +0,0 @@
-import { ComponentProps, forwardRef, useState } from 'react';
-import { clsx } from 'clsx';
-import { StreamVideoParticipant } from '@stream-io/video-client';
-
-export type VideoPlaceholderProps = {
-  participant: StreamVideoParticipant;
-} & ComponentProps<'div'>;
-
-export const VideoPlaceholder = forwardRef<
-  HTMLDivElement,
-  VideoPlaceholderProps
->(({ participant, style }, ref) => {
-  const [error, setError] = useState(false);
-
-  const name = participant?.name || participant?.userId;
-
-  return (
-    <div className="str-video__participant-placeholder" style={style} ref={ref}>
-      {(!participant.image || error) &&
-        (name ? (
-          <div className="str-video__participant-placeholder--initials-fallback">
-            <div>{name[0]}</div>
-          </div>
-        ) : (
-          <div>Video is disabled</div>
-        ))}
-      {participant.image && !error && (
-        <img
-          onError={() => setError(true)}
-          alt="participant-placeholder"
-          className={clsx('str-video__participant-placeholder--avatar', {
-            'str-video__participant-placeholder--avatar-speaking':
-              participant.isSpeaking,
-          })}
-          src={participant.image}
-        />
-      )}
-    </div>
-  );
-});

package/src/hooks/useRtcStats.ts

@@ -1,36 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Call } from '@stream-io/video-client';
-
-/**
- *
- * @param call
- * @param kind
- * @param mediaStream
- * @returns
- *
- * @category Call State
- */
-export const useRtcStats = (
-  call: Call,
-  kind: 'subscriber' | 'publisher',
-  mediaStream?: MediaStream,
-) => {
-  const [stats, setStats] = useState<Record<string, string>>();
-  useEffect(() => {
-    const intervalId = setInterval(async () => {
-      const [track] = mediaStream?.getVideoTracks() ?? [];
-      const rawStats = await call.getStats(kind, track);
-      const decodedStats: Record<string, string> = {};
-      rawStats?.forEach((s) => {
-        decodedStats[s.id] = s;
-      });
-      setStats(decodedStats);
-    }, 1500);
-
-    return () => {
-      clearInterval(intervalId);
-    };
-  }, [call, kind, mediaStream]);
-
-  return stats;
-};