@connectycube/react-ui-kit 0.0.14 → 0.0.15

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

@@ -1,246 +0,0 @@
-import type React 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';
-
-interface StreamViewProps extends React.ComponentProps<'video'> {
-  stream?: MediaStream | null;
-  mirror?: boolean;
-}
-
-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]' : '';
-
-  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} />;
-}
-
-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

@@ -1,30 +0,0 @@
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs) {
-  return twMerge(clsx(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

@@ -1,28 +0,0 @@
-import { clsx, type ClassValue } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-
-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',
-}