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

package/src/components/Debug/DebugParticipantPublishQuality.tsx

@@ -0,0 +1,62 @@
+import { useEffect, useState } from 'react';
+import { Call, StreamVideoParticipant } from '@stream-io/video-client';
+
+export const DebugParticipantPublishQuality = (props: {
+  participant: StreamVideoParticipant;
+  call: Call;
+}) => {
+  const { call, participant } = props;
+  const [quality, setQuality] = useState<string>();
+  const [publishStats, setPublishStats] = useState(() => ({
+    f: true,
+    h: true,
+    q: true,
+  }));
+
+  useEffect(() => {
+    return call.on('changePublishQuality', (event) => {
+      if (event.eventPayload.oneofKind !== 'changePublishQuality') return;
+      const { videoSenders } = event.eventPayload.changePublishQuality;
+      // FIXME OL: support additional layers (like screenshare)
+      const [videoLayer] = videoSenders.map(({ layers }) => {
+        return layers.map((l) => ({ [l.name]: l.active }));
+      });
+      setPublishStats((s) => ({
+        ...s,
+        ...videoLayer,
+      }));
+    });
+  }, [call]);
+
+  return (
+    <select
+      title={`Published tracks: ${JSON.stringify(publishStats)}`}
+      value={quality}
+      onChange={(e) => {
+        const value = e.target.value;
+        setQuality(value);
+        let w = 960;
+        let h = 540;
+        if (value === 'h') {
+          w = w / 2; // 480
+          h = h / 2; // 270
+        } else if (value === 'q') {
+          w = w / 4; // 240
+          h = h / 4; // 135
+        }
+        call.updateSubscriptionsPartial('video', {
+          [participant.sessionId]: {
+            dimension: {
+              width: w,
+              height: h,
+            },
+          },
+        });
+      }}
+    >
+      <option value="f">High (f)</option>
+      <option value="h">Medium (h)</option>
+      <option value="q">Low (q)</option>
+    </select>
+  );
+};

package/src/components/Debug/DebugStatsView.tsx

@@ -0,0 +1,108 @@
+import { useEffect, useState } from 'react';
+import { Call } from '@stream-io/video-client';
+import { useFloatingUIPreset } from '../../hooks';
+import { StatCard } from '../CallStats';
+import { useCallStatsReport } from '@stream-io/video-react-bindings';
+
+export const DebugStatsView = (props: {
+  call: Call;
+  mediaStream?: MediaStream;
+  sessionId: string;
+}) => {
+  const { call, mediaStream, sessionId } = props;
+  const callStatsReport = useCallStatsReport();
+
+  useEffect(() => {
+    call.startReportingStatsFor(sessionId);
+    return () => {
+      call.stopReportingStatsFor(sessionId);
+    };
+  }, [call, sessionId]);
+
+  const reportForTracks = callStatsReport?.participants[sessionId];
+  const trackStats = reportForTracks?.flatMap((report) => report.streams);
+
+  const { refs, strategy, y, x } = useFloatingUIPreset({
+    placement: 'top',
+    strategy: 'absolute',
+  });
+
+  const [isPopperOpen, setIsPopperOpen] = useState(false);
+
+  const [videoTrack] = mediaStream?.getVideoTracks() ?? [];
+  const settings = videoTrack?.getSettings();
+  return (
+    <>
+      <span
+        className="str-video__debug__track-stats-icon"
+        tabIndex={0}
+        ref={refs.setReference}
+        title={
+          settings &&
+          `${settings.width}x${settings.height}@${Math.round(
+            settings.frameRate || 0,
+          )}`
+        }
+        onClick={() => {
+          setIsPopperOpen((v) => !v);
+        }}
+      />
+      {isPopperOpen && (
+        <div
+          className="str-video__debug__track-stats str-video__call-stats"
+          ref={refs.setFloating}
+          style={{
+            position: strategy,
+            top: y ?? 0,
+            left: x ?? 0,
+            overflowY: 'auto',
+          }}
+        >
+          <h3>Participant stats</h3>
+          <div className="str-video__call-stats__card-container">
+            {trackStats
+              ?.map((track) => {
+                if (track.kind === 'video') {
+                  return (
+                    <StatCard
+                      key={`${track.rid}/${track.ssrc}/${track.codec}/${track.kind}`}
+                      label={
+                        `${track.kind}: ${track.codec} ` +
+                        (track.rid ? ` (${track.rid})` : '')
+                      }
+                      value={`${track.frameWidth || 0}x${
+                        track.frameHeight || 0
+                      }@${track.framesPerSecond || 0}fps`}
+                    />
+                  );
+                } else if (track.kind === 'audio') {
+                  return (
+                    <StatCard
+                      key={`${track.ssrc}/${track.codec}/${track.kind}`}
+                      label={track.codec || 'N/A'}
+                      value={`Jitter: ${track.jitter || 0}ms`}
+                    />
+                  );
+                }
+                return null;
+              })
+              .filter(Boolean)}
+          </div>
+          {reportForTracks?.map((report, index) => (
+            <pre key={index}>
+              {JSON.stringify(unwrapStats(report.rawStats), null, 2)}
+            </pre>
+          ))}
+        </div>
+      )}
+    </>
+  );
+};
+
+const unwrapStats = (rawStats?: RTCStatsReport) => {
+  const decodedStats: Record<string, string> = {};
+  rawStats?.forEach((s) => {
+    decodedStats[s.id] = s;
+  });
+  return decodedStats;
+};

package/src/components/Debug/useIsDebugMode.ts

@@ -0,0 +1,24 @@
+import { useMemo } from 'react';
+
+const useQueryParams = () => {
+  return useMemo(
+    () =>
+      typeof window === 'undefined'
+        ? null
+        : new URLSearchParams(window.location.search),
+    [],
+  );
+};
+
+/**
+ * Internal purpose hook. Enables certain development mode tools.
+ */
+export const useIsDebugMode = () => {
+  const params = useQueryParams();
+  return !!params?.get('debug');
+};
+
+export const useDebugPreferredVideoCodec = () => {
+  const params = useQueryParams();
+  return params?.get('video_codec');
+};

package/src/components/DeviceSettings/DeviceSelector.tsx

@@ -0,0 +1,106 @@
+import clsx from 'clsx';
+import { ChangeEventHandler } from 'react';
+
+type DeviceSelectorOptionProps = {
+  id: string;
+  label: string;
+  name: string;
+  selected?: boolean;
+  value: string;
+  disabled?: boolean;
+  defaultChecked?: boolean;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+};
+
+const DeviceSelectorOption = ({
+  disabled,
+  id,
+  label,
+  onChange,
+  name,
+  selected,
+  defaultChecked,
+  value,
+}: DeviceSelectorOptionProps) => {
+  return (
+    <label
+      className={clsx('str-video__device-settings__option', {
+        'str-video__device-settings__option--selected': selected,
+        'str-video__device-settings__option--disabled': disabled,
+      })}
+      htmlFor={id}
+    >
+      <input
+        type="radio"
+        name={name}
+        onChange={onChange}
+        value={value}
+        id={id}
+        checked={selected}
+        defaultChecked={defaultChecked}
+        disabled={disabled}
+      />
+      {label}
+    </label>
+  );
+};
+export const DeviceSelector = (props: {
+  devices: MediaDeviceInfo[];
+  selectedDeviceId?: string;
+  title: string;
+  onChange?: (deviceId: string) => void;
+}) => {
+  const {
+    devices = [],
+    selectedDeviceId: selectedDeviceFromProps,
+    title,
+    onChange,
+  } = props;
+  const inputGroupName = title.replace(' ', '-').toLowerCase();
+
+  // sometimes the browser (Chrome) will report the system-default device
+  // with an id of 'default'. In case when it doesn't, we'll select the first
+  // available device.
+  let selectedDeviceId = selectedDeviceFromProps;
+  if (
+    devices.length > 0 &&
+    !devices.find((d) => d.deviceId === selectedDeviceId)
+  ) {
+    selectedDeviceId = devices[0].deviceId;
+  }
+
+  return (
+    <div className="str-video__device-settings__device-kind">
+      <div className="str-video__device-settings__device-selector-title">
+        {title}
+      </div>
+      {!devices.length ? (
+        <DeviceSelectorOption
+          id={`${inputGroupName}--default`}
+          label="Default"
+          name={inputGroupName}
+          defaultChecked
+          value="default"
+        />
+      ) : (
+        devices.map((device) => {
+          return (
+            <DeviceSelectorOption
+              id={`${inputGroupName}--${device.deviceId}`}
+              value={device.deviceId}
+              label={device.label}
+              key={device.deviceId}
+              onChange={(e) => {
+                onChange?.(e.target.value);
+              }}
+              name={inputGroupName}
+              selected={
+                device.deviceId === selectedDeviceId || devices.length === 1
+              }
+            />
+          );
+        })
+      )}
+    </div>
+  );
+};

package/src/components/DeviceSettings/DeviceSelectorAudio.tsx

@@ -0,0 +1,57 @@
+import { DeviceSelector } from './DeviceSelector';
+import {
+  useMediaDevices,
+  useAudioInputDevices,
+  useAudioOutputDevices,
+} from '../../core';
+
+export type DeviceSelectorAudioInputProps = {
+  title?: string;
+};
+
+export const DeviceSelectorAudioInput = ({
+  title = 'Select a Mic',
+}: DeviceSelectorAudioInputProps) => {
+  const { selectedAudioInputDeviceId, switchDevice } = useMediaDevices();
+  const audioInputDevices = useAudioInputDevices();
+
+  return (
+    <DeviceSelector
+      devices={audioInputDevices}
+      selectedDeviceId={selectedAudioInputDeviceId}
+      onChange={(deviceId) => {
+        switchDevice('audioinput', deviceId);
+      }}
+      title={title}
+    />
+  );
+};
+
+export type DeviceSelectorAudioOutputProps = {
+  title?: string;
+};
+
+export const DeviceSelectorAudioOutput = ({
+  title = 'Select speakers',
+}: DeviceSelectorAudioOutputProps) => {
+  const {
+    isAudioOutputChangeSupported,
+    selectedAudioOutputDeviceId,
+    switchDevice,
+  } = useMediaDevices();
+
+  const audioOutputDevices = useAudioOutputDevices();
+
+  if (!isAudioOutputChangeSupported) return null;
+
+  return (
+    <DeviceSelector
+      devices={audioOutputDevices}
+      selectedDeviceId={selectedAudioOutputDeviceId}
+      onChange={(deviceId) => {
+        switchDevice('audiooutput', deviceId);
+      }}
+      title={title}
+    />
+  );
+};

package/src/components/DeviceSettings/DeviceSelectorVideo.tsx

@@ -0,0 +1,22 @@
+import { DeviceSelector } from './DeviceSelector';
+import { useMediaDevices, useVideoDevices } from '../../core';
+
+export type DeviceSelectorVideoProps = {
+  title?: string;
+};
+
+export const DeviceSelectorVideo = ({ title }: DeviceSelectorVideoProps) => {
+  const { selectedVideoDeviceId, switchDevice } = useMediaDevices();
+  const videoDevices = useVideoDevices();
+
+  return (
+    <DeviceSelector
+      devices={videoDevices}
+      selectedDeviceId={selectedVideoDeviceId}
+      onChange={(deviceId) => {
+        switchDevice('videoinput', deviceId);
+      }}
+      title={title || 'Select a Camera'}
+    />
+  );
+};

package/src/components/DeviceSettings/DeviceSettings.tsx

@@ -0,0 +1,39 @@
+import { forwardRef } from 'react';
+import { MenuToggle, ToggleMenuButtonProps } from '../Menu';
+import {
+  DeviceSelectorAudioInput,
+  DeviceSelectorAudioOutput,
+} from './DeviceSelectorAudio';
+import { DeviceSelectorVideo } from './DeviceSelectorVideo';
+import { IconButton } from '../Button';
+import clsx from 'clsx';
+
+export const DeviceSettings = () => {
+  return (
+    <MenuToggle placement="bottom-end" ToggleButton={ToggleMenuButton}>
+      <Menu />
+    </MenuToggle>
+  );
+};
+
+const Menu = () => (
+  <div className="str-video__device-settings">
+    <DeviceSelectorVideo />
+    <DeviceSelectorAudioInput />
+    <DeviceSelectorAudioOutput />
+  </div>
+);
+
+const ToggleMenuButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
+  ({ menuShown }, ref) => (
+    <IconButton
+      className={clsx('str-video__device-settings__button', {
+        'str-video__device-settings__button--active': menuShown,
+      })}
+      title="Toggle device menu"
+      icon="device-settings"
+      ref={ref}
+      // tabindex={0}
+    />
+  ),
+);

package/src/components/DeviceSettings/index.ts

@@ -0,0 +1,4 @@
+export * from './DeviceSettings';
+export * from './DeviceSelector';
+export * from './DeviceSelectorAudio';
+export * from './DeviceSelectorVideo';

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,11 @@
+import { clsx } from 'clsx';
+
+export type IconProps = {
+  icon: string;
+};
+
+export const Icon = ({ icon }: IconProps) => (
+  <span
+    className={clsx('str-video__icon', icon && `str-video__icon--${icon}`)}
+  />
+);

package/src/components/Icon/index.ts

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

package/src/components/LoadingIndicator/LoadingIndicator.tsx

@@ -0,0 +1,28 @@
+import clsx from 'clsx';
+
+export type LoadingIndicatorProps = {
+  className?: string;
+  /** String will be injected into class and later used to apply as a CSS mask-image to an element as data URL */
+  type?: string;
+  /** Text to be displayed under the loading indicator icon */
+  text?: string;
+  /** Tooltip to be displayed on hover */
+  tooltip?: string;
+};
+
+export const LoadingIndicator = ({
+  className,
+  type = 'spinner',
+  text,
+  tooltip,
+}: LoadingIndicatorProps) => {
+  return (
+    <div
+      className={clsx('str-video__loading-indicator', className)}
+      title={tooltip}
+    >
+      <div className={clsx('str-video__loading-indicator__icon', type)}></div>
+      {text && <p className="str-video__loading-indicator-text">{text}</p>}
+    </div>
+  );
+};

package/src/components/LoadingIndicator/index.ts

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

package/src/components/Menu/GenericMenu.tsx

@@ -0,0 +1,16 @@
+import { ComponentProps, PropsWithChildren } from 'react';
+
+export const GenericMenu = ({ children }: PropsWithChildren) => {
+  return <ul className="str-video__generic-menu">{children}</ul>;
+};
+
+export const GenericMenuButtonItem = ({
+  children,
+  ...rest
+}: Omit<ComponentProps<'button'>, 'ref'>) => {
+  return (
+    <li className="str-video__generic-menu--item">
+      <button {...rest}>{children}</button>
+    </li>
+  );
+};

package/src/components/Menu/MenuToggle.tsx

@@ -0,0 +1,81 @@
+import {
+  ComponentType,
+  PropsWithChildren,
+  useEffect,
+  useState,
+  ForwardedRef,
+} from 'react';
+import { Placement, Strategy } from '@floating-ui/react';
+
+import { useFloatingUIPreset } from '../../hooks';
+
+export type ToggleMenuButtonProps<E extends HTMLElement = HTMLButtonElement> = {
+  menuShown: boolean;
+  ref: ForwardedRef<E>;
+};
+
+export type MenuToggleProps<E extends HTMLElement> = PropsWithChildren<{
+  ToggleButton: ComponentType<ToggleMenuButtonProps<E>>;
+  placement?: Placement;
+  strategy?: Strategy;
+}>;
+
+export const MenuToggle = <E extends HTMLElement>({
+  ToggleButton,
+  placement = 'top-start',
+  strategy = 'absolute',
+  children,
+}: MenuToggleProps<E>) => {
+  const [menuShown, setMenuShown] = useState(false);
+
+  const { floating, domReference, refs, x, y } = useFloatingUIPreset({
+    placement,
+    strategy,
+  });
+
+  useEffect(() => {
+    const handleClick = (event: MouseEvent) => {
+      if (!floating && domReference?.contains(event.target as Node)) {
+        setMenuShown(true);
+      } else if (floating && !floating?.contains(event.target as Node)) {
+        setMenuShown(false);
+      }
+    };
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key.toLowerCase() === 'escape' &&
+        !event.altKey &&
+        !event.ctrlKey
+      ) {
+        setMenuShown(false);
+      }
+    };
+    document?.addEventListener('click', handleClick, { capture: true });
+    document?.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document?.removeEventListener('click', handleClick, { capture: true });
+      document?.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [floating, domReference]);
+
+  return (
+    <>
+      {menuShown && (
+        <div
+          className="str-video__menu-container"
+          ref={refs.setFloating}
+          style={{
+            position: strategy,
+            top: y ?? 0,
+            left: x ?? 0,
+            overflowY: 'auto',
+          }}
+        >
+          {children}
+        </div>
+      )}
+      <ToggleButton menuShown={menuShown} ref={refs.setReference} />
+    </>
+  );
+};

package/src/components/Menu/index.ts

@@ -0,0 +1,2 @@
+export * from './MenuToggle';
+export * from './GenericMenu';

package/src/components/Notification/Notification.tsx

@@ -0,0 +1,61 @@
+import { PropsWithChildren, ReactNode, useEffect } from 'react';
+import { Placement } from '@floating-ui/react';
+
+import { useFloatingUIPreset } from '../../hooks';
+
+export type NotificationProps = {
+  message?: ReactNode;
+  isVisible?: boolean;
+  visibilityTimeout?: number;
+  resetIsVisible?: () => void;
+  placement?: Placement;
+  iconClassName?: string | null;
+};
+
+export const Notification = (props: PropsWithChildren<NotificationProps>) => {
+  const {
+    isVisible,
+    message,
+    children,
+    visibilityTimeout,
+    resetIsVisible,
+    placement = 'top',
+    iconClassName = 'str-video__notification__icon',
+  } = props;
+
+  const { refs, x, y, strategy } = useFloatingUIPreset({
+    placement,
+    strategy: 'absolute',
+  });
+
+  useEffect(() => {
+    if (!isVisible || !visibilityTimeout || !resetIsVisible) return;
+
+    const timeout = setTimeout(() => {
+      resetIsVisible();
+    }, visibilityTimeout);
+
+    return () => clearTimeout(timeout);
+  }, [isVisible, resetIsVisible, visibilityTimeout]);
+
+  return (
+    <div ref={refs.setReference}>
+      {isVisible && (
+        <div
+          className="str-video__notification"
+          ref={refs.setFloating}
+          style={{
+            position: strategy,
+            top: y ?? 0,
+            left: x ?? 0,
+            overflowY: 'auto',
+          }}
+        >
+          {iconClassName && <i className={iconClassName} />}
+          <span className="str-video__notification__message">{message}</span>
+        </div>
+      )}
+      {children}
+    </div>
+  );
+};