@dxos/plugin-thread 0.8.2-main.fbd8ed0 → 0.8.2-staging.42af850

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

@@ -0,0 +1,156 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type StoryObj, type Meta } from '@storybook/react';
+import React, { useEffect, useState } from 'react';
+
+import { faker } from '@dxos/random';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
+
+import { ResponsiveGrid, type ResponsiveGridProps } from './ResponsiveGrid';
+import { ResponsiveGridItem, type ResponsiveGridItemProps } from './ResponsiveGridItem';
+import translations from '../../translations';
+
+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 meta: Meta<StoryProps> = {
+  title: 'plugins/plugin-thread/ResponsiveGrid',
+  component: ResponsiveGrid,
+  render: (args) => {
+    const [pinned, setPinned] = useState<string | undefined>(
+      args.pinned ?? args.items.length > 1 ? args.items[0]?.id : undefined,
+    );
+    const [items, setItems] = useState<TestItem[]>(args.items);
+    useEffect(() => {
+      if (!args.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 {...args} Cell={TestCell} items={items} pinned={pinned} onPinnedChange={setPinned} />
+      </div>
+    );
+  },
+  decorators: [withTheme, withLayout({ fullscreen: true, classNames: 'justify-center' })],
+  parameters: {
+    translations,
+  },
+};
+
+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<StoryProps>;
+
+// 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

@@ -0,0 +1,341 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type ComponentType, type FC, useLayoutEffect, useState, useEffect, useMemo, useCallback } 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/react-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 };
+};

package/src/components/ResponsiveGrid/ResponsiveGridItem.tsx

@@ -0,0 +1,131 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useEffect, useState, type CSSProperties, type PropsWithChildren } from 'react';
+
+import { Icon, IconButton, useTranslation, type ThemedClassName } from '@dxos/react-ui';
+import { Waveform } from '@dxos/react-ui-sfx';
+import { hoverableHidden, mx } from '@dxos/react-ui-theme';
+
+import { THREAD_PLUGIN } from '../../meta';
+
+export type ResponsiveGridItemProps<T extends object = any> = PropsWithChildren<
+  ThemedClassName<{
+    item: T;
+    style?: CSSProperties;
+    pinned?: boolean;
+    name?: string;
+    self?: boolean;
+    screenshare?: boolean;
+    video?: boolean;
+    mute?: boolean;
+    wave?: boolean;
+    speaking?: boolean;
+    debug?: boolean;
+    onClick?: (item: T) => void;
+  }>
+>;
+
+/**
+ * Cell container.
+ */
+export const ResponsiveGridItem = <T extends object = any>({
+  children,
+  classNames,
+  item,
+  style,
+  name,
+  self,
+  pinned,
+  screenshare,
+  video,
+  mute,
+  wave,
+  speaking,
+  onClick,
+}: ResponsiveGridItemProps<T>) => {
+  const { t } = useTranslation(THREAD_PLUGIN);
+  const iconProps: Record<string, { icon: string; label: string; classNames?: string }> = {
+    wave: {
+      icon: 'ph--hand-waving--duotone',
+      label: t('icon wave'),
+      classNames: 'animate-pulse bg-orange-500',
+    },
+    mute: {
+      icon: 'ph--microphone-slash--regular',
+      label: t('icon muted'),
+    },
+  };
+
+  const props = wave && !pinned ? iconProps.wave : mute ? iconProps.mute : speaking ? iconProps.speaking : undefined;
+
+  // Debounce speaking indicator.
+  const [speakingIndicator, setSpeakingIndicator] = useState(speaking);
+  useEffect(() => {
+    if (speaking) {
+      setSpeakingIndicator(true);
+    } else {
+      const timeout = setTimeout(() => {
+        setSpeakingIndicator(false);
+      }, 1_000);
+      return () => clearTimeout(timeout);
+    }
+  }, [speaking]);
+
+  return (
+    <div
+      className={mx(
+        'relative w-full h-full group',
+        'rounded-md outline outline-2 outline-neutral-900 transition-[outline-color] duration-500',
+        speakingIndicator ? 'outline-green-500' : !video && 'outline-separator',
+        classNames,
+      )}
+      style={style}
+    >
+      {children}
+
+      {/* Action. */}
+      {onClick && (
+        <div className='z-10 absolute top-1 right-1 flex'>
+          <IconButton
+            classNames={mx('p-1 min-bs-1 rounded', hoverableHidden)}
+            iconOnly
+            icon={pinned ? 'ph--x--regular' : 'ph--arrows-out--regular'}
+            size={pinned ? 5 : 4}
+            label={pinned ? t('icon unpin') : t('icon pin')}
+            onClick={() => onClick?.(item)}
+          />
+        </div>
+      )}
+
+      {/* Name. */}
+      {name && (
+        <div className='z-10 absolute bottom-1 left-8 right-1 flex justify-end gap-1 items-center'>
+          {/* TODO(burdon): Replace with avatar for everyone. */}
+          {/* {self && <Icon icon='ph--asterisk--regular' size={pinned ? 5 : 4} />} */}
+          {screenshare && <Icon icon='ph--broadcast--regular' size={pinned ? 5 : 4} />}
+          <div
+            className={mx('bg-neutral-800 text-neutral-100 py-0.5 truncate rounded', pinned ? 'px-2' : 'px-1 text-xs')}
+          >
+            {name}
+          </div>
+        </div>
+      )}
+
+      {/* Activity. */}
+      <div className='z-10 absolute bottom-1 left-1 flex'>
+        {(speaking && <Waveform active size={pinned ? 5 : 4} />) ||
+          (props && (
+            <IconButton
+              classNames={mx('p-1 min-bs-1 rounded', props?.classNames)}
+              icon={props?.icon}
+              label={props?.label}
+              size={pinned ? 5 : 4}
+              iconOnly
+            />
+          ))}
+      </div>
+    </div>
+  );
+};

package/src/components/ResponsiveGrid/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './ResponsiveContainer';
+export * from './ResponsiveGrid';
+export * from './ResponsiveGridItem';