@dxos/plugin-thread 0.8.4-main.422d1c7879 → 0.8.4-main.4668b7de9b

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

@@ -1,157 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useEffect, useState } from 'react';
-
-import { random } 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 DefaultStoryProps = ResponsiveGridProps<TestItem> & { random?: boolean; autoHideGallery?: boolean };
-
-const DefaultStory = (props: DefaultStoryProps) => {
-  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 = random.string.uuid();
-  return {
-    id,
-    type,
-    name: random.person.fullName(),
-    imageUrl: `https://placehold.co/3200x1800/333/999?font=roboto&text=${id.slice(0, 2)}`,
-    videoUrl: random.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 { type ResponsiveGridItemProps } from './ResponsiveGridItem';
-import { ResponsivePanel } from './ResponsivePanel';
-
-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('dx-expander relative', 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 (
-    <ResponsivePanel>
-      <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>
-    </ResponsivePanel>
-  );
-};
-
-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

@@ -1,134 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { type CSSProperties, type PropsWithChildren, useEffect, useState } from 'react';
-
-import { Icon, IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';
-import { Waveform } from '@dxos/react-ui-sfx';
-import { groupHoverControlItemWithTransition, mx } from '@dxos/ui-theme';
-
-import { meta } 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(meta.id);
-  const iconProps: Record<string, { icon: string; label: string; classNames?: string }> = {
-    wave: {
-      icon: 'ph--hand-waving--duotone',
-      label: t('icon-wave.label'),
-      classNames: 'animate-pulse bg-orange-500',
-    },
-    mute: {
-      icon: 'ph--microphone-slash--regular',
-      label: t('icon-muted.label'),
-    },
-  };
-
-  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(
-        'dx-expander relative 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-h-1 rounded-sm', groupHoverControlItemWithTransition)}
-            iconOnly
-            icon={pinned ? 'ph--x--regular' : 'ph--arrows-out--regular'}
-            size={pinned ? 5 : 4}
-            label={pinned ? t('icon-unpin.label') : t('icon-pin.label')}
-            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-sm',
-              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-h-1 rounded-sm', props?.classNames)}
-              icon={props?.icon}
-              label={props?.label}
-              size={pinned ? 5 : 4}
-              iconOnly
-            />
-          ))}
-      </div>
-    </div>
-  );
-};

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

@@ -1,53 +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 { ResponsivePanel } from './ResponsivePanel';
-
-const meta = {
-  title: 'plugins/plugin-thread/components/ResponsivePanel',
-  component: ResponsivePanel,
-  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
-  parameters: {
-    layout: 'fullscreen',
-    translations,
-  },
-} satisfies Meta<typeof ResponsivePanel>;
-
-export default meta;
-
-type Story = StoryObj<typeof ResponsivePanel>;
-
-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' />,
-  },
-};