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

package/src/core/hooks/useTrackElementVisibility.ts

@@ -0,0 +1,44 @@
+import { useEffect } from 'react';
+import { ViewportTracker, VisibilityState } from '@stream-io/video-client';
+import { useCall } from '@stream-io/video-react-bindings';
+
+export const useTrackElementVisibility = <T extends HTMLElement>({
+  trackedElement,
+  viewportTracker: propsViewportTracker,
+  sessionId,
+}: {
+  trackedElement: T | null;
+  sessionId: string;
+  viewportTracker?: ViewportTracker;
+}) => {
+  const call = useCall();
+
+  const viewportTracker = propsViewportTracker ?? call?.viewportTracker;
+
+  useEffect(() => {
+    if (!trackedElement || !viewportTracker || !call) return;
+
+    const unobserve = viewportTracker.observe(trackedElement, (entry) => {
+      call.state.updateParticipant(sessionId, (p) => ({
+        ...p,
+        viewportVisibilityState:
+          // observer triggers when element is "moved" to be a fullscreen element
+          // keep it VISIBLE if that happens to prevent fullscreen with placeholder
+          entry.isIntersecting || document.fullscreenElement === trackedElement
+            ? 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, viewportTracker, call, sessionId]);
+};

package/src/core/hooks/useVideoPublisher.ts

@@ -0,0 +1,152 @@
+import { useCallback, useEffect } from 'react';
+import { map } from 'rxjs';
+import {
+  CallingState,
+  getVideoStream,
+  OwnCapability,
+  SfuModels,
+  VideoSettingsCameraFacingEnum,
+  watchForAddedDefaultVideoDevice,
+  watchForDisconnectedVideoDevice,
+} from '@stream-io/video-client';
+import {
+  useCall,
+  useCallCallingState,
+  useCallMetadata,
+  useCallState,
+  useLocalParticipant,
+} from '@stream-io/video-react-bindings';
+import { useDebugPreferredVideoCodec } from '../../components/Debug/useIsDebugMode';
+
+/**
+ * @internal
+ */
+export type VideoPublisherInit = {
+  initialVideoMuted?: boolean;
+  videoDeviceId?: string;
+};
+
+/**
+ * @internal
+ * @category Device Management
+ */
+export const useVideoPublisher = ({
+  initialVideoMuted,
+  videoDeviceId,
+}: VideoPublisherInit) => {
+  const call = useCall();
+  const callState = useCallState();
+  const callingState = useCallCallingState();
+  const participant = useLocalParticipant();
+  const { localParticipant$ } = callState;
+
+  const preferredCodec = useDebugPreferredVideoCodec();
+  const isPublishingVideo = participant?.publishedTracks.includes(
+    SfuModels.TrackType.VIDEO,
+  );
+
+  const metadata = useCallMetadata();
+  const videoSettings = metadata?.settings.video;
+  const targetResolution = videoSettings?.target_resolution;
+  const publishVideoStream = useCallback(async () => {
+    if (!call) return;
+    if (!call.permissionsContext.hasPermission(OwnCapability.SEND_VIDEO)) {
+      throw new Error(`No permission to publish video`);
+    }
+    try {
+      const videoStream = await getVideoStream({
+        deviceId: videoDeviceId,
+        width: targetResolution?.width,
+        height: targetResolution?.height,
+        facingMode: toFacingMode(videoSettings?.camera_facing),
+      });
+      await call.publishVideoStream(videoStream, { preferredCodec });
+    } catch (e) {
+      console.log('Failed to publish video stream', e);
+    }
+  }, [
+    call,
+    preferredCodec,
+    targetResolution?.height,
+    targetResolution?.width,
+    videoDeviceId,
+    videoSettings?.camera_facing,
+  ]);
+
+  useEffect(() => {
+    if (callingState === CallingState.JOINED && !initialVideoMuted) {
+      publishVideoStream().catch((e) => {
+        console.error('Failed to publish video stream', e);
+      });
+    }
+  }, [callingState, initialVideoMuted, publishVideoStream]);
+
+  useEffect(() => {
+    if (!localParticipant$) return;
+    const subscription = watchForDisconnectedVideoDevice(
+      localParticipant$.pipe(map((p) => p?.videoDeviceId)),
+    ).subscribe(async () => {
+      if (!call) return;
+      call.setVideoDevice(undefined);
+      await call.stopPublish(SfuModels.TrackType.VIDEO);
+    });
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [localParticipant$, call]);
+
+  useEffect(() => {
+    if (!participant?.videoStream || !call || !isPublishingVideo) return;
+
+    const [track] = participant.videoStream.getVideoTracks();
+    const selectedVideoDeviceId = track.getSettings().deviceId;
+
+    const republishDefaultDevice = watchForAddedDefaultVideoDevice().subscribe(
+      async () => {
+        if (
+          !(
+            call &&
+            participant.videoStream &&
+            selectedVideoDeviceId === 'default'
+          )
+        )
+          return;
+        // We need to stop the original track first in order
+        // we can retrieve the new default device stream
+        track.stop();
+        const videoStream = await getVideoStream({
+          deviceId: 'default',
+        });
+        await call.publishVideoStream(videoStream);
+      },
+    );
+
+    const handleTrackEnded = async () => {
+      if (selectedVideoDeviceId === videoDeviceId) {
+        const videoStream = await getVideoStream({
+          deviceId: videoDeviceId,
+        });
+        await call.publishVideoStream(videoStream);
+      }
+    };
+
+    track.addEventListener('ended', handleTrackEnded);
+    return () => {
+      track.removeEventListener('ended', handleTrackEnded);
+      republishDefaultDevice.unsubscribe();
+    };
+  }, [videoDeviceId, call, participant?.videoStream, isPublishingVideo]);
+
+  return publishVideoStream;
+};
+
+const toFacingMode = (value: VideoSettingsCameraFacingEnum | undefined) => {
+  switch (value) {
+    case VideoSettingsCameraFacingEnum.FRONT:
+      return 'user';
+    case VideoSettingsCameraFacingEnum.BACK:
+      return 'environment';
+    default:
+      return undefined;
+  }
+};

package/src/core/index.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './contexts';
+export * from './hooks';

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useFloatingUIPreset';
+export * from './useScrollPosition';

package/src/hooks/useFloatingUIPreset.ts

@@ -0,0 +1,50 @@
+import { useEffect } from 'react';
+import {
+  offset,
+  autoUpdate,
+  size,
+  useFloating,
+  shift,
+  flip,
+} from '@floating-ui/react';
+import type { UseFloatingProps } from '@floating-ui/react';
+
+export const useFloatingUIPreset = ({
+  placement,
+  strategy,
+}: Pick<UseFloatingProps, 'placement' | 'strategy'>) => {
+  const {
+    refs,
+    x,
+    y,
+    update,
+    elements: { domReference, floating },
+  } = useFloating({
+    placement,
+    strategy,
+    middleware: [
+      offset(10),
+      shift(),
+      flip(),
+      size({
+        padding: 10,
+        apply: ({ availableHeight, elements }) => {
+          Object.assign(elements.floating.style, {
+            maxHeight: `${availableHeight}px`,
+          });
+        },
+      }),
+    ],
+  });
+
+  // handle window resizing
+  useEffect(() => {
+    if (!domReference || !floating) return;
+
+    const cleanup = autoUpdate(domReference, floating, update);
+
+    return () => cleanup();
+  }, [domReference, floating, update]);
+
+  return { refs, x, y, domReference, floating, strategy };
+};

package/src/hooks/useScrollPosition.ts

@@ -0,0 +1,95 @@
+import { useEffect, useState } from 'react';
+
+const SCROLL_THRESHOLD = 10;
+
+/**
+ * Hook which observes element's scroll position and returns text value based on the
+ * position of the scrollbar (`top`, `bottom`, `between` and `null` if no scrollbar is available)
+ */
+export const useVerticalScrollPosition = (
+  scrollElement: HTMLElement | null,
+  threshold: number = SCROLL_THRESHOLD,
+) => {
+  const [scrollPosition, setScrollPosition] = useState<
+    'top' | 'bottom' | 'between' | null
+  >(null);
+
+  useEffect(() => {
+    if (!scrollElement) return;
+
+    const scrollHandler = () => {
+      const element = scrollElement;
+
+      const hasVerticalScrollbar = element.scrollHeight > element.clientHeight;
+
+      if (!hasVerticalScrollbar) return setScrollPosition(null);
+
+      const isAtTheTop = element.scrollTop <= threshold;
+      if (isAtTheTop) return setScrollPosition('top');
+
+      const isAtTheBottom =
+        Math.abs(
+          element.scrollHeight - element.scrollTop - element.clientHeight,
+        ) <= threshold;
+
+      if (isAtTheBottom) return setScrollPosition('bottom');
+
+      setScrollPosition('between');
+    };
+
+    const resizeObserver = new ResizeObserver(scrollHandler);
+    resizeObserver.observe(scrollElement);
+
+    scrollElement.addEventListener('scroll', scrollHandler);
+    return () => {
+      scrollElement.removeEventListener('scroll', scrollHandler);
+      resizeObserver.disconnect();
+    };
+  }, [scrollElement, threshold]);
+
+  return scrollPosition;
+};
+
+export const useHorizontalScrollPosition = (
+  scrollElement: HTMLElement | null,
+  threshold: number = SCROLL_THRESHOLD,
+) => {
+  const [scrollPosition, setScrollPosition] = useState<
+    'start' | 'end' | 'between' | null
+  >(null);
+
+  useEffect(() => {
+    if (!scrollElement) return;
+
+    const scrollHandler = () => {
+      const element = scrollElement;
+
+      const hasHorizontalScrollbar = element.scrollWidth > element.clientWidth;
+
+      if (!hasHorizontalScrollbar) return setScrollPosition(null);
+
+      const isAtTheStart = element.scrollLeft <= threshold;
+      if (isAtTheStart) return setScrollPosition('start');
+
+      const isAtTheEnd =
+        Math.abs(
+          element.scrollWidth - element.scrollLeft - element.clientWidth,
+        ) <= threshold;
+
+      if (isAtTheEnd) return setScrollPosition('end');
+
+      setScrollPosition('between');
+    };
+
+    const resizeObserver = new ResizeObserver(scrollHandler);
+    resizeObserver.observe(scrollElement);
+
+    scrollElement.addEventListener('scroll', scrollHandler);
+    return () => {
+      scrollElement.removeEventListener('scroll', scrollHandler);
+      resizeObserver.disconnect();
+    };
+  }, [scrollElement, threshold]);
+
+  return scrollPosition;
+};

package/src/types/components.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+
+export type ChildrenOnly = { children: ReactNode };
+
+export type Readable<T> = {
+  [k in keyof T]: T[k];
+} & {};

package/src/types/index.ts

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

package/src/utilities/applyElementToRef.ts

@@ -0,0 +1,12 @@
+import type { ForwardedRef } from 'react';
+
+export const applyElementToRef = <T extends HTMLElement | null>(
+  ref: ForwardedRef<T>,
+  element: T,
+) => {
+  if (!ref) return;
+
+  if (typeof ref === 'function') return ref(element);
+
+  ref.current = element;
+};

package/src/utilities/chunk.ts

@@ -0,0 +1,8 @@
+export const chunk = <T extends unknown[]>(array: T, size: number) => {
+  const chunkCount = Math.ceil(array.length / size);
+
+  return Array.from(
+    { length: chunkCount },
+    (_, index) => array.slice(size * index, size * index + size) as T,
+  );
+};

package/src/utilities/index.ts

@@ -0,0 +1,3 @@
+export * from './isComponentType';
+export * from './chunk';
+export * from './applyElementToRef';

package/src/utilities/isComponentType.ts

@@ -0,0 +1,9 @@
+import { ComponentType, isValidElement, ReactElement } from 'react';
+
+export const isComponentType = <T extends {}>(
+  elementOrComponent?: ComponentType<T> | ReactElement | null,
+): elementOrComponent is ComponentType<T> => {
+  return elementOrComponent === null
+    ? false
+    : !isValidElement(elementOrComponent);
+};