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

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

@@ -0,0 +1,54 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type StoryObj, type Meta } from '@storybook/react';
+import React from 'react';
+
+import { withTheme, withLayout } from '@dxos/storybook-utils';
+
+import { ResponsiveContainer } from './ResponsiveContainer';
+import translations from '../../translations';
+import { VideoObject as VideoObjectComponent } from '../Media';
+
+const meta: Meta<typeof ResponsiveContainer> = {
+  title: 'plugins/plugin-thread/ResponsiveContainer',
+  component: ResponsiveContainer,
+  decorators: [withTheme, withLayout({ fullscreen: true })],
+  parameters: {
+    translations,
+  },
+};
+
+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

@@ -0,0 +1,31 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type PropsWithChildren } from 'react';
+
+import { mx } from '@dxos/react-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

@@ -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 };
+};