@dxos/plugin-thread 0.8.4-main.c85a9c8dae → 0.8.4-main.d9fc60f731

package/src/components/Participant/ParticipantGrid.tsx

@@ -1,89 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useEffect, useMemo, useState } from 'react';
-
-import { type ThemedClassName } from '@dxos/react-ui';
-
-import { type UserState } from '../../calls';
-import { ResponsiveGrid } from '../ResponsiveGrid';
-
-import { Participant, SCREENSHARE_SUFFIX } from './Participant';
-
-const getId = (user: UserState): string => user.id!;
-
-export type ParticipantGridProps = ThemedClassName<{
-  self: UserState;
-  users: UserState[];
-  fullscreen?: boolean;
-  debug?: boolean;
-}>;
-
-export const ParticipantGrid = ({ classNames, self, users, fullscreen, debug }: ParticipantGridProps) => {
-  const [pinned, setPinned] = useState<string | undefined>();
-
-  const allUsers = useMemo(() => {
-    const allUsers: (UserState & { isSelf?: boolean })[] = [];
-    users.forEach((user) => {
-      if (!user.joined) {
-        return;
-      }
-
-      allUsers.push({ ...user, isSelf: user.id === self.id });
-      if (user.tracks?.screenshareEnabled) {
-        const screenshare: UserState = {
-          ...user,
-          id: user.id + SCREENSHARE_SUFFIX,
-          tracks: {
-            ...user.tracks,
-            video: user.tracks.screenshare,
-            videoEnabled: user.tracks.screenshareEnabled,
-          } as any, // TODO(burdon): Remove cast.
-        };
-
-        allUsers.push(screenshare);
-      }
-    });
-
-    return allUsers;
-  }, [self, users]);
-
-  useEffect(() => {
-    if (pinned) {
-      // Check expanded user is still in call.
-      if (!allUsers.find((user) => user.id === pinned)) {
-        setPinned(undefined);
-      }
-    }
-  }, [pinned, allUsers]);
-
-  // TODO(burdon): Put self last.
-  const sortedUsers: UserState[] = allUsers.sort((a, b) => {
-    if (a.isSelf) {
-      return 1;
-    } else if (b.isSelf) {
-      return -1;
-    } else if (a.tracks?.screenshareEnabled) {
-      return -1;
-    } else if (b.tracks?.screenshareEnabled) {
-      return 1;
-    } else {
-      return 0;
-    }
-  });
-
-  // TODO(burdon): Show ghost view of user for a second before leaving.
-  return (
-    <ResponsiveGrid<UserState>
-      classNames={classNames}
-      Cell={Participant}
-      debug={debug}
-      getId={getId}
-      items={sortedUsers}
-      pinned={pinned}
-      autoHideGallery={fullscreen}
-      onPinnedChange={setPinned}
-    />
-  );
-};

package/src/components/Participant/index.ts

@@ -1,6 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export * from './Participant';
-export * from './ParticipantGrid';

package/src/components/ResponsiveGrid/ResponsiveContainer.stories.tsx

@@ -1,54 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React from 'react';
-
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
-
-import { translations } from '../../translations';
-import { VideoObject as VideoObjectComponent } from '../Media';
-
-import { ResponsiveContainer } from './ResponsiveContainer';
-
-const meta = {
-  title: 'plugins/plugin-thread/components/ResponsiveContainer',
-  component: ResponsiveContainer,
-  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
-  parameters: {
-    layout: 'fullscreen',
-    translations,
-  },
-} satisfies Meta<typeof ResponsiveContainer>;
-
-export default meta;
-
-type Story = StoryObj<typeof ResponsiveContainer>;
-
-export const Image: Story = {
-  args: {
-    children: <img src='https://placehold.co/3200x1800/333/999?font=roboto&text=X' />,
-  },
-};
-
-export const Video: Story = {
-  // NOTE: The video's max size is 1280x720.
-  args: {
-    children: (
-      <video
-        src='https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4'
-        playsInline
-        autoPlay
-        muted
-        loop
-      />
-    ),
-  },
-};
-
-export const VideoObject: Story = {
-  args: {
-    children: <VideoObjectComponent classNames='rounded-md outline outline-primary-500' />,
-  },
-};

package/src/components/ResponsiveGrid/ResponsiveContainer.tsx

@@ -1,31 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { type PropsWithChildren } from 'react';
-
-import { mx } from '@dxos/ui-theme';
-
-/**
- * A container component that maintains the child's aspect ratio while centering its content.
- * The container will scale to fit within its parent's bounds while preserving the aspect ratio.
- *
- * @example
- * <ResponsiveContainer>
- *   <VideoObject />
- * </ResponsiveContainer>
- */
-export const ResponsiveContainer = ({ children }: PropsWithChildren) => {
-  return (
-    // Outer container that takes full size of parent.
-    <div role='none' className='relative flex w-full h-full'>
-      {/* Absolute positioning layer for centering content. */}
-      <div role='none' className='absolute inset-0 flex justify-center items-center'>
-        {/* Content container that maintains given aspect ratio and proper scaling. */}
-        <div role='none' className={mx('max-h-full max-w-full w-auto h-auto aspect-video')}>
-          {children}
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/components/ResponsiveGrid/ResponsiveGrid.stories.tsx

@@ -1,158 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useEffect, useState } from 'react';
-
-import { faker } from '@dxos/random';
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
-
-import { translations } from '../../translations';
-
-import { ResponsiveGrid, type ResponsiveGridProps } from './ResponsiveGrid';
-import { ResponsiveGridItem, type ResponsiveGridItemProps } from './ResponsiveGridItem';
-
-type TestItem = {
-  id: string;
-  name: string;
-  type?: 'image' | 'video';
-  imageUrl?: string;
-  videoUrl?: string;
-};
-
-const TestCell = ({ item, ...props }: ResponsiveGridItemProps<TestItem>) => {
-  const [speaking, setSpeaking] = useState(false);
-  const [wave, setWave] = useState(false);
-  const [mute, setMute] = useState(false);
-  useEffect(() => {
-    const interval = setInterval(() => {
-      const mute = Math.random() > 0.7;
-      setMute(() => mute);
-      setSpeaking(() => !mute && Math.random() > 0.5);
-      setWave(() => Math.random() > 0.7);
-    }, 3_000);
-
-    return () => clearInterval(interval);
-  }, []);
-
-  return (
-    <ResponsiveGridItem {...props} item={item} name={item.name} mute={mute} speaking={speaking} wave={wave}>
-      {item.type === 'image' && <img className='aspect-video object-contain' src={item.imageUrl} />}
-      {item.type === 'video' && (
-        <video
-          className='w-full aspect-video object-cover rounded-md'
-          src={item.videoUrl}
-          playsInline
-          autoPlay
-          loop
-          muted
-        />
-      )}
-    </ResponsiveGridItem>
-  );
-};
-
-type StoryProps = ResponsiveGridProps<TestItem> & { random?: boolean; autoHideGallery?: boolean };
-
-const DefaultStory = (props: StoryProps) => {
-  const [pinned, setPinned] = useState<string | undefined>(
-    (props.pinned ?? props.items.length > 1) ? props.items[0]?.id : undefined,
-  );
-  const [items, setItems] = useState<TestItem[]>(props.items);
-  useEffect(() => {
-    if (!props.random) {
-      return;
-    }
-
-    const interval = setInterval(() => {
-      setItems((items) => {
-        const p = Math.random();
-        if (p < 0.5) {
-          return items;
-        } else if (p < 0.99 && items.length > 1) {
-          return items.slice(0, -1);
-        } else {
-          return [...items, createItem(items[0]?.type)];
-        }
-      });
-    }, 3_000);
-
-    return () => clearInterval(interval);
-  }, []);
-
-  return (
-    <div className='grid grow p-4'>
-      <ResponsiveGrid {...props} Cell={TestCell} items={items} pinned={pinned} onPinnedChange={setPinned} />
-    </div>
-  );
-};
-
-const meta = {
-  title: 'plugins/plugin-thread/components/ResponsiveGrid',
-  component: ResponsiveGrid as any,
-  render: DefaultStory,
-  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
-  parameters: {
-    layout: 'fullscreen',
-    translations,
-  },
-} satisfies Meta<typeof DefaultStory>;
-
-const videoUrls = [
-  'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4',
-  'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4',
-  'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4',
-  'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4',
-];
-
-const createItem = (type?: 'image' | 'video') => {
-  const id = faker.string.uuid();
-  return {
-    id,
-    type,
-    name: faker.person.fullName(),
-    imageUrl: `https://placehold.co/3200x1800/333/999?font=roboto&text=${id.slice(0, 2)}`,
-    videoUrl: faker.helpers.arrayElement(videoUrls),
-  };
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-// TODO(burdon): Story to join/leave repeatedly to test stable position.
-
-export const Default: Story = {
-  args: {
-    random: true,
-    items: Array.from({ length: 8 }, (_, i) => createItem('video')),
-  },
-};
-
-export const Fullscreen: Story = {
-  args: {
-    random: true,
-    autoHideGallery: true,
-    items: Array.from({ length: 8 }, (_, i) => createItem('video')),
-  },
-};
-
-export const Images: Story = {
-  args: {
-    debug: true,
-    items: Array.from({ length: 8 }, (_, i) => createItem('image')),
-  },
-};
-
-export const Solo: Story = {
-  args: {
-    items: Array.from({ length: 1 }, (_, i) => createItem('image')),
-  },
-};
-
-export const TwoUp: Story = {
-  args: {
-    items: Array.from({ length: 2 }, (_, i) => createItem('image')),
-  },
-};

package/src/components/ResponsiveGrid/ResponsiveGrid.tsx

@@ -1,341 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { type ComponentType, type FC, useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
-import { useResizeDetector } from 'react-resize-detector';
-
-import { invariant } from '@dxos/invariant';
-import { type ThemedClassName } from '@dxos/react-ui';
-import { type Size } from '@dxos/react-ui-dnd';
-import { mx } from '@dxos/ui-theme';
-
-import { ResponsiveContainer } from './ResponsiveContainer';
-import { type ResponsiveGridItemProps } from './ResponsiveGridItem';
-
-const ASPECT_RATIO = 16 / 9;
-const MIN_GALLERY_HEIGHT = 250;
-
-const DEFAULT_GAP = 8;
-
-const maxImageSize = 'w-[2560px] h-[1440px]';
-
-/**
- * Props for the ResponsiveGrid component.
- */
-export type ResponsiveGridProps<T extends object = any> = ThemedClassName<{
-  /** Cell component. */
-  Cell: ComponentType<ResponsiveGridItemProps<T>>;
-
-  /** Space between grid items in pixels. */
-  gap?: number;
-
-  /** Function to get the ID of an item. */
-  getId?: (item: T) => string;
-
-  /** Array of items to display in the grid. */
-  items: T[];
-
-  /** ID of the pinned item. */
-  pinned?: string;
-
-  /** Whether to hide the gallery (unpinned items) when an item is pinned. */
-  autoHideGallery?: boolean;
-
-  /** Whether the divider is resizable. */
-  resizable?: boolean;
-
-  /** Debug mode. */
-  debug?: boolean;
-
-  /** Callback when the pinned item changes. */
-  onPinnedChange?: (pinned: string | undefined) => void;
-}>;
-
-const defaultGetId: ResponsiveGridProps<any>['getId'] = (item: any) => item.id;
-
-/**
- * A responsive grid component that automatically adjusts its layout to optimize space usage.
- * Maintains aspect ratio of items while ensuring uniform gaps between them.
- */
-export const ResponsiveGrid = <T extends object = any>({
-  classNames,
-  Cell,
-  gap = DEFAULT_GAP,
-  getId = defaultGetId,
-  items,
-  pinned,
-  autoHideGallery = false,
-  debug,
-  onPinnedChange,
-}: ResponsiveGridProps<T>) => {
-  const {
-    width: containerWidth = 0,
-    height: containerHeight = 0,
-    ref: containerRef,
-  } = useResizeDetector<HTMLDivElement>({ refreshRate: 100 });
-  const [dividerHeight, setDividerHeight] = useState<Size>(0);
-  useEffect(() => {
-    if (containerWidth && containerHeight) {
-      const { height } = fitAspectRatio(containerWidth, containerHeight, ASPECT_RATIO);
-      setDividerHeight(Math.min(height, containerHeight - MIN_GALLERY_HEIGHT));
-    }
-  }, [containerWidth, containerHeight]);
-
-  const pinnedItem = useMemo(() => items.find((item) => getId(item) === pinned), [items, pinned]);
-  const mainItems = useMemo(() => items.filter((item) => getId(item) !== pinned), [items, pinned]);
-  const hideGallery = autoHideGallery && pinnedItem !== undefined;
-
-  //
-  // Recalculate optimal layout when container size or items change.
-  //
-  const [{ time, columns, cellWidth }, setLayout] = useState<Layout>({ time: 0, columns: 0, cellWidth: 0 });
-  const { width = 0, height = 0, ref: gridContainerRef } = useResizeDetector<HTMLDivElement>({ refreshRate: 200 });
-  useEffect(() => {
-    if (containerHeight && width && height) {
-      const layout = calculateLayout(width, height, mainItems.length, gap);
-      setLayout({ time: Date.now(), ...layout });
-    }
-  }, [containerHeight, width, height, mainItems.length, gap, pinned]);
-
-  //
-  // We use the browser to layout invisible divs and then calculate the absolute position of these items,
-  // which are animated into position.
-  //
-  const [bounds, setBounds] = useState<[T, DOMRectBounds][]>([]);
-  useLayoutEffect(() => {
-    if ((!hideGallery && !gridContainerRef.current) || !containerHeight) {
-      return;
-    }
-
-    // TODO(burdon): Consider directly setting bounds on DOM elementsinstead of state update?
-    const t = setTimeout(() => {
-      setBounds(
-        items
-          .filter((item) => !hideGallery || item === pinnedItem)
-          .map((item) => {
-            invariant(containerRef.current);
-            const el = containerRef.current.querySelector(`[data-grid-item="${getId(item)}"]`);
-            if (!el) {
-              return null;
-            }
-
-            const bounds = getRelativeBounds(containerRef.current, el as HTMLElement);
-            return [item, bounds];
-          })
-          .filter((item): item is [T, DOMRectBounds] => item !== null),
-      );
-    });
-
-    return () => clearTimeout(t);
-  }, [containerHeight, items, pinnedItem, hideGallery, time]);
-
-  const handleClick = useCallback(
-    (item: T) => onPinnedChange?.(getId(item) === pinned ? undefined : getId(item)),
-    [pinned, onPinnedChange],
-  );
-
-  return (
-    <div ref={containerRef} className={mx('relative w-full h-full', classNames)}>
-      {/* Placeholder elements to calculate layout. */}
-      <div className='absolute inset-0 flex flex-col grow gap-2'>
-        {/* Pinned item. */}
-        {pinnedItem && (
-          <div
-            className={mx('flex grow-[2] shrink overflow-hidden justify-center items-center', hideGallery && 'h-full')}
-            style={hideGallery ? {} : { height: dividerHeight }}
-          >
-            <SoloItem id={getId(pinnedItem)} debug={debug} />
-          </div>
-        )}
-
-        {/* Gallery. */}
-        {!hideGallery && (
-          <div
-            ref={gridContainerRef}
-            className='flex grow-[1] overflow-hidden justify-center items-center'
-            style={hideGallery ? {} : { minHeight: MIN_GALLERY_HEIGHT }}
-          >
-            {mainItems.length === 1 && (
-              <div style={{ width: cellWidth }} className='flex h-full'>
-                <SoloItem id={getId(mainItems[0])} debug={debug} />
-              </div>
-            )}
-
-            {mainItems.length > 1 && columns > 0 && (
-              <div
-                role='grid'
-                style={{
-                  display: 'grid',
-                  gridTemplateColumns: `repeat(${columns}, ${cellWidth}px)`,
-                  gap: `${gap}px`,
-                }}
-              >
-                {mainItems.map((item) => (
-                  <div
-                    key={getId(item)}
-                    {...{ 'data-grid-item': getId(item) }}
-                    className={mx(
-                      'aspect-video max-h-full max-w-full w-auto h-auto',
-                      debug && 'border border-primary-500',
-                    )}
-                  />
-                ))}
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-
-      {/* Absolutely positioned items. */}
-      <div className={mx(debug && 'opacity-10')}>
-        {bounds.map(([item, bounds]) => (
-          <Cell
-            key={getId(item)}
-            classNames='absolute transition-all duration-500'
-            item={item}
-            style={bounds}
-            pinned={getId(item) === pinned}
-            onClick={items.length > 1 ? handleClick : undefined}
-          />
-        ))}
-      </div>
-    </div>
-  );
-};
-
-const SoloItem: FC<Pick<ResponsiveGridProps, 'debug'> & { id: string }> = ({ debug, id }) => {
-  return (
-    <ResponsiveContainer>
-      <div
-        {...{ 'data-grid-item': id }}
-        className={mx('aspect-video overflow-hidden', debug && 'z-20 border-2 border-primary-500')}
-      >
-        {/* Maximum size placeholder image forces aspect ratio. */}
-        <img alt='placeholder video' className={mx('opacity-0', maxImageSize)} />
-      </div>
-    </ResponsiveContainer>
-  );
-};
-
-type DOMRectBounds = Pick<DOMRect, 'top' | 'left' | 'width' | 'height'>;
-
-// TODO(burdon): Reconcile with react-ui-gameboard.
-const getRelativeBounds = (container: HTMLElement, el: HTMLElement): DOMRectBounds => {
-  const containerRect = container.getBoundingClientRect();
-  const elementRect = el.getBoundingClientRect();
-  return {
-    top: elementRect.top - containerRect.top,
-    left: elementRect.left - containerRect.left,
-    width: elementRect.width,
-    height: elementRect.height,
-  };
-};
-
-type Layout = {
-  time?: number;
-  columns: number;
-  cellWidth: number;
-};
-
-/**
- * Calculates the optimal number of columns for a grid layout that minimizes wasted space.
- * @param containerWidth - Width of the container in pixels.
- * @param containerHeight - Height of the container in pixels.
- * @param count - Total number of items to display.
- * @param gap - Space between items in pixels.
- * @param aspectRatio - Desired aspect ratio of items (width/height).
- * @returns The optimal number of columns.
- */
-const calculateLayout = (
-  containerWidth: number,
-  containerHeight: number,
-  count: number,
-  gap: number,
-  aspectRatio = ASPECT_RATIO,
-): Layout => {
-  if (count === 0) {
-    return { columns: 1, cellWidth: 1 };
-  }
-
-  let minWastedSpace = Infinity;
-  let bestColumns = 1;
-  let cellWidth = 0;
-
-  // Try different rows counts to find the optimal layout that minimizes wasted space.
-  for (let rows = 1; rows <= count; rows++) {
-    const cols = Math.ceil(count / rows);
-
-    // Calculate available space accounting for gaps.
-    const { width: itemWidth, height: itemHeight } = fitItemsToGrid(
-      containerWidth,
-      containerHeight,
-      cols,
-      rows,
-      aspectRatio,
-      gap,
-    );
-
-    // Calculate total wasted space for this configuration.
-    const usedWidth = itemWidth * cols + gap * cols - 1;
-    const usedHeight = itemHeight * rows + gap * rows - 1;
-
-    // Determine if optimal.
-    const wastedSpace = containerWidth * containerHeight - usedWidth * usedHeight;
-    if (wastedSpace < minWastedSpace) {
-      minWastedSpace = wastedSpace;
-      bestColumns = cols;
-      cellWidth = itemWidth;
-    }
-  }
-
-  return { columns: bestColumns, cellWidth };
-};
-
-/**
- * Returns the size of the largest rectangle with the given aspect ration that fits within the grid.
- */
-const fitItemsToGrid = (
-  outerWidth: number,
-  outerHeight: number,
-  numCols: number,
-  numRows: number,
-  aspectRatio: number,
-  gap: number,
-): { width: number; height: number } => {
-  // Calculate available space accounting for gaps.
-  const availableWidth = outerWidth - gap * (numCols - 1);
-  const availableHeight = outerHeight - gap * (numRows - 1);
-
-  // Calculate max dimensions.
-  const maxCellWidth = availableWidth / numCols;
-  const maxCellHeight = availableHeight / numRows;
-
-  // Use fitAspectRatio to get dimensions that fit within max cell size while maintaining the desired aspect ratio
-  return fitAspectRatio(maxCellWidth, maxCellHeight, aspectRatio);
-};
-
-/**
- * Returns the size of the largest rectangle the given aspect ratio that fits within the outer rectangle.
- */
-const fitAspectRatio = (
-  outerWidth: number,
-  outerHeight: number,
-  aspectRatio: number,
-): { width: number; height: number } => {
-  if (outerWidth <= 0 || outerHeight <= 0 || aspectRatio <= 0) {
-    return { width: 0, height: 0 };
-  }
-
-  // First try fitting to width.
-  let width = outerWidth;
-  let height = width / aspectRatio;
-
-  // If too tall, fit to height instead.
-  if (height > outerHeight) {
-    height = outerHeight;
-    width = height * aspectRatio;
-  }
-
-  return { width, height };
-};