@connectycube/react-ui-kit 0.0.8 → 0.0.11

package/src/components/connectycube-ui/stream-view.tsx

@@ -1,77 +1,246 @@
 import type React from 'react';
-import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import type { LucideProps } from 'lucide-react';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { Maximize, Minimize, PictureInPicture2 } from 'lucide-react';
 import { cn, getRandomString } from './utils';
 
-export type StreamViewProps = {
-  id?: string;
-  stream?: MediaStream;
+interface StreamViewProps extends React.ComponentProps<'video'> {
+  stream?: MediaStream | null;
   mirror?: boolean;
-} & React.VideoHTMLAttributes<HTMLVideoElement>;
+}
 
-export type StreamViewRef = {
-  id: string;
-  element: HTMLVideoElement | null;
-};
+function StreamViewBase(
+  { id, stream, mirror, className, muted, ...props }: StreamViewProps,
+  ref: React.Ref<HTMLVideoElement>
+) {
+  const innerRef = useRef<HTMLVideoElement>(null);
+  const elementId = useMemo(() => id ?? `stream-${getRandomString()}`, [id]);
+  const isMuted = typeof muted === 'boolean' ? muted : false;
+  const defaultClassName = 'size-full object-contain';
+  const mirrorClassName = mirror ? 'scale-x-[-1]' : '';
 
-export const StreamView = forwardRef<StreamViewRef, StreamViewProps>(
-  ({ id, stream, mirror, className, muted, ...props }, ref) => {
-    const videoRef = useRef<HTMLVideoElement>(null);
-    const elementId = useMemo(() => id ?? `stream-${getRandomString()}`, [id]);
-    const isMuted = typeof muted === 'boolean' ? muted : true;
-    const defaultClassName = 'size-full object-contain';
-    const mirrorClassName = mirror ? 'scale-x-[-1]' : '';
-
-    useImperativeHandle(
-      ref,
-      () => ({
-        id: elementId,
-        element: videoRef.current,
-      }),
-      [elementId]
-    );
-
-    useEffect(() => {
-      if (videoRef.current && stream) {
-        videoRef.current.srcObject = stream;
-
-        const playVideo = () => {
-          try {
-            videoRef.current?.play();
-          } catch (error) {
-            console.error('<StreamView/> play():', error);
-          }
-        };
-
-        videoRef.current.onloadedmetadata = () => {
-          setTimeout(playVideo, 100);
-        };
-      }
-    }, [stream]);
-
-    return stream ? (
-      <video
-        ref={videoRef}
-        id={elementId}
-        className={cn(defaultClassName, mirrorClassName, className)}
-        muted={isMuted}
-        autoPlay
-        playsInline
-        {...props}
-      />
-    ) : null;
-  }
-);
-
-export const LocalStreamView = forwardRef<StreamViewRef, StreamViewProps>(({ muted, mirror, ...props }, ref) => {
+  useImperativeHandle(ref, () => innerRef.current!);
+
+  useEffect(() => {
+    if (innerRef.current && stream) {
+      innerRef.current.srcObject = stream;
+
+      const playVideo = () => {
+        try {
+          innerRef.current?.play();
+        } catch (error) {
+          console.error('Error playing video:', error);
+        }
+      };
+
+      innerRef.current.onloadedmetadata = () => {
+        queueMicrotask(playVideo);
+      };
+    }
+  }, [stream]);
+
+  if (!stream) return null;
+
+  return (
+    <video
+      ref={innerRef}
+      id={elementId}
+      autoPlay
+      playsInline
+      muted={isMuted}
+      className={cn(defaultClassName, mirrorClassName, className)}
+      {...props}
+    />
+  );
+}
+
+const StreamView = forwardRef<HTMLVideoElement, StreamViewProps>(StreamViewBase);
+
+StreamView.displayName = 'StreamView';
+
+function LocalStreamViewBase({ muted, mirror, ...props }: StreamViewProps, ref: React.Ref<HTMLVideoElement>) {
   const isMuted = typeof muted === 'boolean' ? muted : true;
   const isMirror = typeof mirror === 'boolean' ? mirror : true;
 
   return <StreamView ref={ref} muted={isMuted} mirror={isMirror} {...props} />;
-});
+}
 
-export const RemoteStreamView = forwardRef<StreamViewRef, StreamViewProps>(({ muted, mirror, ...props }, ref) => {
+const LocalStreamView = forwardRef<HTMLVideoElement, StreamViewProps>(LocalStreamViewBase);
+
+LocalStreamView.displayName = 'LocalStreamView';
+
+function RemoteStreamViewBase({ muted, mirror, ...props }: StreamViewProps, ref: React.Ref<HTMLVideoElement>) {
   const isMuted = typeof muted === 'boolean' ? muted : false;
   const isMirror = typeof mirror === 'boolean' ? mirror : false;
 
   return <StreamView ref={ref} muted={isMuted} mirror={isMirror} {...props} />;
-});
+}
+
+const RemoteStreamView = forwardRef<HTMLVideoElement, StreamViewProps>(RemoteStreamViewBase);
+
+RemoteStreamView.displayName = 'RemoteStreamView';
+
+interface FullscreenStreamViewProps extends React.ComponentProps<'div'> {
+  element: React.ReactElement<StreamViewProps>;
+  pipElement?: React.ReactElement<StreamViewProps>;
+  navElement?: React.ReactElement<HTMLElement>;
+  hideIconElement?: React.ReactElement;
+  showIconElement?: React.ReactElement;
+  containerClassName?: string;
+  fullscreenButtonClassName?: string;
+  fullscreenButtonIconClassName?: string;
+  pipContainerClassName?: string;
+  pipButtonClassName?: string;
+  pipButtonIconClassName?: string;
+  containerProps?: React.ComponentProps<'div'>;
+  fullscreenButtonProps?: React.ComponentProps<'button'>;
+  fullscreenButtonIconProps?: LucideProps;
+  pipContainerProps?: React.ComponentProps<'div'>;
+  pipButtonProps?: React.ComponentProps<'button'>;
+  pipButtonIconProps?: LucideProps;
+}
+
+interface FullscreenStreamViewRef extends React.ComponentRef<'div'> {
+  isFullscreen: boolean;
+  isPictureInPicture: boolean;
+  toggleFullscreen: () => Promise<void>;
+  togglePictureInPicture: () => void;
+}
+
+function FullscreenStreamViewBase(
+  {
+    element,
+    pipElement,
+    navElement,
+    hideIconElement,
+    showIconElement,
+    containerClassName,
+    fullscreenButtonClassName,
+    fullscreenButtonIconClassName,
+    pipContainerClassName,
+    pipButtonClassName,
+    pipButtonIconClassName,
+    containerProps,
+    fullscreenButtonProps,
+    fullscreenButtonIconProps,
+    pipContainerProps,
+    pipButtonProps,
+    pipButtonIconProps,
+  }: FullscreenStreamViewProps,
+  ref: React.Ref<FullscreenStreamViewRef>
+) {
+  const innerRef = useRef<HTMLDivElement>(null);
+  const [isFullscreen, setIsFullscreen] = useState<boolean>(false);
+  const [isPictureInPicture, setIsPictureInPicture] = useState<boolean>(false);
+  const toggleFullscreen = useCallback(async () => {
+    const container = innerRef.current;
+
+    if (!container) return;
+
+    try {
+      if (!document.fullscreenElement) {
+        await container.requestFullscreen();
+        setIsFullscreen(true);
+        setIsPictureInPicture(true);
+      } else {
+        await document.exitFullscreen();
+        setIsFullscreen(false);
+        setIsPictureInPicture(false);
+      }
+    } catch (err) {
+      console.error('Fullscreen error:', err);
+    }
+  }, []);
+  const togglePictureInPicture = useCallback(() => {
+    if (pipElement) {
+      setIsPictureInPicture((prevState) => !prevState);
+    }
+  }, [pipElement]);
+
+  useImperativeHandle(
+    ref,
+    () =>
+      Object.assign(innerRef.current!, {
+        isFullscreen,
+        isPictureInPicture,
+        toggleFullscreen,
+        togglePictureInPicture,
+      }),
+    [isFullscreen, isPictureInPicture, toggleFullscreen, togglePictureInPicture]
+  );
+
+  useEffect(() => {
+    const onFullscreenChange = () => {
+      setIsFullscreen(!!document.fullscreenElement);
+      setIsPictureInPicture(!!document.fullscreenElement);
+    };
+
+    document.addEventListener('fullscreenchange', onFullscreenChange);
+
+    return () => document.removeEventListener('fullscreenchange', onFullscreenChange);
+  }, []);
+
+  return (
+    <div
+      ref={innerRef}
+      className={cn('relative flex items-center justify-center size-full', containerClassName)}
+      {...containerProps}
+    >
+      {element}
+      <button
+        onClick={toggleFullscreen}
+        className={cn(
+          'absolute top-2 right-2 p-1 rounded-md bg-black/50 text-white hover:bg-black/80 z-10 shadow-xs shadow-white/25',
+          fullscreenButtonClassName
+        )}
+        {...fullscreenButtonProps}
+      >
+        {isFullscreen
+          ? hideIconElement || <Minimize className={fullscreenButtonIconClassName} {...fullscreenButtonIconProps} />
+          : showIconElement || <Maximize className={fullscreenButtonIconClassName} {...fullscreenButtonIconProps} />}
+      </button>
+      <div className="absolute size-full p-2 flex flex-col justify-end items-center">
+        {isFullscreen && pipElement && (
+          <div className="relative size-full flex items-end justify-end">
+            {isPictureInPicture && (
+              <div
+                className={cn(
+                  'max-w-1/4 max-h-1/4 aspect-4/3 overflow-hidden rounded-md shadow-md shadow-white/25',
+                  pipContainerClassName
+                )}
+                {...pipContainerProps}
+              >
+                {pipElement}
+              </div>
+            )}
+            <button
+              onClick={togglePictureInPicture}
+              className={cn(
+                'absolute bottom-2 right-2 p-1 rounded-md bg-black/50 text-white hover:bg-black/80 z-10 shadow-xs shadow-white/25',
+                pipButtonClassName
+              )}
+              {...pipButtonProps}
+            >
+              <PictureInPicture2 className={pipButtonIconClassName} {...pipButtonIconProps} />
+            </button>
+          </div>
+        )}
+        {isFullscreen && navElement}
+      </div>
+    </div>
+  );
+}
+
+const FullscreenStreamView = forwardRef<FullscreenStreamViewRef, FullscreenStreamViewProps>(FullscreenStreamViewBase);
+
+FullscreenStreamView.displayName = 'FullscreenStreamView';
+
+export {
+  StreamView,
+  LocalStreamView,
+  RemoteStreamView,
+  FullscreenStreamView,
+  type StreamViewProps,
+  type FullscreenStreamViewProps,
+  type FullscreenStreamViewRef,
+};

package/src/components/connectycube-ui/utils.js

@@ -8,3 +8,23 @@ export function cn(...inputs) {
 export function getRandomString(length = 8) {
   return (Date.now() / Math.random()).toString(36).replace('.', '').slice(0, length);
 }
+
+export function getInitialsFromName(name) {
+  const words = name?.trim().split(/\s+/).filter(Boolean) ?? [];
+  const result = words.length > 1 ? `${words[0]?.[0]}${words[1]?.[0]}` : (words[0]?.slice(0, 2) ?? 'NA');
+
+  return result.toUpperCase();
+}
+
+export function capitalize(str) {
+  return typeof str === 'string' && str.length > 0 ? `${str[0]?.toUpperCase()}${str.slice(1)}` : '';
+}
+
+export let UserPresence = /*#__PURE__*/ (function (UserPresence) {
+  UserPresence['AVAILABLE'] = 'available';
+  UserPresence['BUSY'] = 'busy';
+  UserPresence['AWAY'] = 'away';
+  UserPresence['UNKNOWN'] = 'unknown';
+
+  return UserPresence;
+})({});

package/src/components/connectycube-ui/utils.ts

@@ -8,3 +8,21 @@ export function cn(...inputs: ClassValue[]) {
 export function getRandomString(length = 8): string {
   return (Date.now() / Math.random()).toString(36).replace('.', '').slice(0, length);
 }
+
+export function getInitialsFromName(name?: string): string {
+  const words = name?.trim().split(/\s+/).filter(Boolean) ?? [];
+  const result = words.length > 1 ? `${words[0]?.[0]}${words[1]?.[0]}` : (words[0]?.slice(0, 2) ?? 'NA');
+
+  return result.toUpperCase();
+}
+
+export function capitalize(str?: string): string {
+  return typeof str === 'string' && str.length > 0 ? `${str[0]?.toUpperCase()}${str.slice(1)}` : '';
+}
+
+export enum UserPresence {
+  AVAILABLE = 'available',
+  BUSY = 'busy',
+  AWAY = 'away',
+  UNKNOWN = 'unknown',
+}

package/src/components/dismiss-layer.tsx

@@ -0,0 +1,74 @@
+import type React from 'react';
+import { useCallback, useEffect, useRef, useImperativeHandle, memo, forwardRef } from 'react';
+import { cn } from './utils';
+
+interface DismissLayerProps extends React.ComponentProps<'div'> {
+  active: boolean;
+  onDismiss: () => void;
+  disableClickOutside?: boolean;
+  disableEscKeyPress?: boolean;
+  disabled?: boolean;
+}
+
+function DismissLayerBase(
+  {
+    active,
+    onDismiss,
+    disableClickOutside = false,
+    disableEscKeyPress = false,
+    disabled,
+    className,
+    ...props
+  }: DismissLayerProps,
+  ref: React.Ref<HTMLDivElement>
+) {
+  const innerRef = useRef<HTMLDivElement>(null);
+
+  useImperativeHandle(ref, () => innerRef.current!);
+
+  const handleClickOrTouch = useCallback(
+    (e: React.MouseEvent | React.TouchEvent) => {
+      if (!disableClickOutside && active && e.target === innerRef.current) {
+        onDismiss();
+      }
+    },
+    [disableClickOutside, active, onDismiss]
+  );
+  const handleKeyEvent = useCallback(
+    (ev: KeyboardEvent) => {
+      if (!disableEscKeyPress && active && ev.key === 'Escape') {
+        onDismiss();
+      }
+    },
+    [disableEscKeyPress, active, onDismiss]
+  );
+
+  useEffect(() => {
+    if (!disableEscKeyPress && active) {
+      document.addEventListener('keydown', handleKeyEvent);
+
+      return () => document.removeEventListener('keydown', handleKeyEvent);
+    }
+
+    return;
+  }, [disableEscKeyPress, active, handleKeyEvent]);
+
+  if (disabled || !active) return null;
+
+  return (
+    <div
+      ref={innerRef}
+      onClick={handleClickOrTouch}
+      onTouchStart={handleClickOrTouch}
+      className={cn('fixed top-0 left-0 z-40 size-full bg-black/20', className)}
+      aria-hidden
+      {...props}
+    />
+  );
+}
+
+const DismissLayer = memo(forwardRef<HTMLDivElement, DismissLayerProps>(DismissLayerBase));
+
+DismissLayer.displayName = 'DismissLayer';
+
+export { DismissLayer, type DismissLayerProps };

package/src/components/placeholder-text.tsx

@@ -0,0 +1,28 @@
+import type React from 'react';
+import { forwardRef, memo } from 'react';
+import { cn } from './utils';
+
+interface PlaceholderTextProps extends React.ComponentProps<'div'> {
+  title?: string;
+  titles?: string[];
+}
+
+function PlaceholderTextBase({ title, titles = [], className }: PlaceholderTextProps, ref: React.Ref<HTMLDivElement>) {
+  const rows = typeof title === 'string' ? [title, ...titles] : titles;
+
+  return (
+    <div ref={ref} className={cn('absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2', className)}>
+      {rows.map((row, index) => (
+        <div key={`placeholder-text-${index}`} className="text-center">
+          {row}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+const PlaceholderText = memo(forwardRef(PlaceholderTextBase));
+
+PlaceholderText.displayName = 'PlaceholderText';
+
+export { PlaceholderText, type PlaceholderTextProps };

package/src/components/presence.tsx

@@ -0,0 +1,55 @@
+import type React from 'react';
+import type { LucideProps } from 'lucide-react';
+import { memo } from 'react';
+import { CircleCheck, CircleMinus, CircleQuestionMark, Clock } from 'lucide-react';
+import { capitalize, cn, UserPresence } from './utils';
+
+type PresenceStatus = UserPresence | 'available' | 'busy' | 'away' | 'unknown' | undefined;
+
+interface PresenceBadgeProps extends LucideProps {
+  status: PresenceStatus;
+}
+
+interface PresenceProps extends React.ComponentProps<'div'> {
+  badge?: boolean;
+  status: PresenceStatus;
+  label: string;
+}
+
+function PresenceBadgeBase({ status, className, ...props }: PresenceBadgeProps) {
+  switch (status) {
+    case UserPresence.AVAILABLE || 'available':
+      return <CircleCheck className={cn('rounded-full text-white bg-green-600 size-4.5', className)} {...props} />;
+    case UserPresence.BUSY || 'busy':
+      return <CircleMinus className={cn('rounded-full text-white bg-red-600 size-4.5', className)} {...props} />;
+    case UserPresence.AWAY || 'away':
+      return <Clock className={cn('rounded-full text-white bg-yellow-500 size-4.5', className)} {...props} />;
+    case UserPresence.UNKNOWN || 'unknown':
+      return (
+        <CircleQuestionMark className={cn('rounded-full text-white bg-gray-500 size-4.5', className)} {...props} />
+      );
+    default:
+      return null;
+  }
+}
+
+const PresenceBadge = memo(PresenceBadgeBase);
+
+PresenceBadge.displayName = 'PresenceBadge';
+
+function PresenceBase({ badge = true, status, label, className, ...props }: PresenceProps) {
+  const presence = capitalize(label || status);
+
+  return (
+    <div className={cn('flex items-center gap-2', className)} {...props}>
+      {badge && <PresenceBadge status={status} />}
+      <span>{presence}</span>
+    </div>
+  );
+}
+
+const Presence = memo(PresenceBase);
+
+Presence.displayName = 'Presence';
+
+export { Presence, PresenceBadge, type PresenceStatus, type PresenceProps, type PresenceBadgeProps };