@dxos/plugin-thread 0.8.4-main.fcfe5033a5 → 0.8.4-staging.60fe92afc8

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' />,
-  },
-};

package/src/components/ResponsiveGrid/ResponsivePanel.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
- * <ResponsivePanel>
- *   <VideoObject />
- * </ResponsivePanel>
- */
-export const ResponsivePanel = ({ children }: PropsWithChildren) => {
-  return (
-    // Outer container that takes full size of parent.
-    <div role='none' className='dx-expander relative flex'>
-      {/* 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/index.ts

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

package/src/components/ThreadSettings/ThreadSettings.stories.tsx

@@ -1,31 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
-
-import { translations } from '../../translations';
-import { ThreadSettings } from './ThreadSettings';
-
-const meta = {
-  title: 'plugins/plugin-thread/components/ThreadSettings',
-  component: ThreadSettings,
-  tags: ['settings'],
-  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
-  parameters: {
-    layout: 'fullscreen',
-    translations,
-  },
-} satisfies Meta<typeof ThreadSettings>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    settings: {},
-  },
-};

package/src/components/ThreadSettings/ThreadSettings.tsx

@@ -1,20 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React from 'react';
-
-import { type AppSurface } from '@dxos/app-toolkit/ui';
-import { useTranslation } from '@dxos/react-ui';
-import { Settings as SettingsForm } from '@dxos/react-ui-form';
-
-import { meta } from '#meta';
-import { type Settings } from '#types';
-
-export type ThreadSettingsProps = AppSurface.SettingsArticleProps<Settings.Settings>;
-
-// TODO(burdon): Settings.
-export const ThreadSettings = ({ settings: _settings }: ThreadSettingsProps) => {
-  const { t: _t } = useTranslation(meta.id);
-  return <SettingsForm.Viewport></SettingsForm.Viewport>;
-};

package/src/components/ThreadSettings/index.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export { ThreadSettings as default } from './ThreadSettings';

package/src/containers/CallDebugPanel/CallDebugPanel.tsx

@@ -1,173 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { WebRTCStats, type WebRTCStatsEvent } from '@peermetrics/webrtc-stats';
-import React, { useEffect, useMemo, useState } from 'react';
-
-import { truncateKey } from '@dxos/debug';
-import { JsonView, Panel } from '@dxos/devtools';
-import { log } from '@dxos/log';
-import { IconButton, Input, type ThemedClassName, useTranslation } from '@dxos/react-ui';
-
-import { meta } from '#meta';
-
-import { type EncodedTrackName, type GlobalState } from '../../calls';
-
-export type CallDebugPanelProps = ThemedClassName<{ state?: GlobalState }>;
-
-export const CallDebugPanel = ({ state }: CallDebugPanelProps) => {
-  const { t } = useTranslation(meta.id);
-
-  const [open, setOpen] = useState(false);
-  const handleToggle = () => setOpen(!open);
-  const [showServiceHistory, setShowServiceHistory] = useState(false);
-  const handleToggleServiceHistory = () => setShowServiceHistory(!showServiceHistory);
-
-  const handleCopyRaw = async () => {
-    await navigator.clipboard.writeText(JSON.stringify({ users: state?.call?.users, stats }, null, 2));
-  };
-
-  const [showDetailedWebRTCStats, setShowDetailedWebRTCStats] = useState(false);
-  const handleShowDetailedWebRTCStats = () => setShowDetailedWebRTCStats(!showDetailedWebRTCStats);
-
-  const webrtcStats = useMemo(
-    () =>
-      new WebRTCStats({
-        getStatsInterval: 1000,
-      }),
-    [],
-  );
-  const [stats, setStats] = useState<WebRTCStatsEvent['data']>();
-
-  useEffect(() => {
-    const pc = state?.media.peer?.session?.peerConnection;
-    const handleStats = (stats: WebRTCStatsEvent) => {
-      setStats(stats.data);
-    };
-    let added = false;
-    if (pc && showDetailedWebRTCStats) {
-      webrtcStats.addConnection({ pc, peerId: 1, connectionId: '1' });
-      webrtcStats.on('stats', handleStats as never);
-      added = true;
-    }
-    return () => {
-      try {
-        if (pc && added) {
-          webrtcStats.removeConnection({ pc });
-          webrtcStats.removeListener('stats', handleStats as never);
-        }
-      } catch (error) {
-        log.error('error removing webrtc stats', { error, pc, peerId: 1, connectionId: '1' });
-      }
-    };
-  }, [state?.media.peer?.session?.peerConnection, showDetailedWebRTCStats]);
-
-  const rows = useMemo(() => getCallStatusTable(state), [state?.call.users, state?.media.pulledAudioTracks]);
-
-  return (
-    <Panel
-      id='meeting-status'
-      icon='ph--video-conference--regular'
-      open={open}
-      onToggle={handleToggle}
-      title={t('meeting-status.title')}
-      info={<div className='flex items-center gap-2'> {state?.call.joined ? 'Active' : 'Inactive'}</div>}
-      maxHeight={0}
-    >
-      <div className='flex flex-col w-full text-xs'>
-        <div className='flex items-center gap-2 items-center'>
-          <Input.Root>
-            <Input.Switch checked={showDetailedWebRTCStats} onCheckedChange={handleShowDetailedWebRTCStats} />
-            <Input.Label>{t('show-webrtc-stats.title')}</Input.Label>
-          </Input.Root>
-        </div>
-        <div className='flex items-center gap-2 items-center'>
-          <Input.Root>
-            <Input.Switch checked={showServiceHistory} onCheckedChange={handleToggleServiceHistory} />
-            <Input.Label>{t('show-calls-history.title')}</Input.Label>
-          </Input.Root>
-        </div>
-        <div className='flex items-center gap-2 items-center'>
-          <IconButton icon='ph--copy--regular' label={'copy raw'} onClick={handleCopyRaw} />
-        </div>
-        <Table rows={rows} />
-        {showDetailedWebRTCStats && <JsonView data={{ stats }} />}
-        {showServiceHistory && <JsonView data={{ history: state?.media.peer?.history.get() }} />}
-      </div>
-    </Panel>
-  );
-};
-
-const getCallStatusTable = (state?: GlobalState): TableProps['rows'] => {
-  if (!state || !state.call?.users) {
-    return [];
-  }
-
-  const self = state.call.self;
-  const users = state.call.users
-    .filter((user) => user.id !== self!.id)
-    .map((user) => {
-      const isOk = {
-        audio:
-          user.tracks?.audio &&
-          state.media.pulledAudioTracks[user.tracks?.audio as EncodedTrackName]?.ctx.disposed === false,
-        video:
-          user.tracks?.video &&
-          state.media.pulledVideoStreams[user.tracks?.video as EncodedTrackName]?.ctx.disposed === false,
-        screenshare:
-          user.tracks?.screenshare &&
-          state.media.pulledVideoStreams[user.tracks?.screenshare as EncodedTrackName]?.ctx.disposed === false,
-      };
-
-      return {
-        ...user,
-        isOk,
-      };
-    });
-
-  return [
-    ['users', state.call.users.length ?? 0],
-    [
-      '*self* ' + (self?.name ?? truncateKey(self!.id, 8)),
-      self?.tracks?.audio && state.media.pushedAudioTrack ? 'AUD ✅' : 'AUD ❌',
-      self?.tracks?.video && state.media.pushedVideoTrack ? 'VID ✅' : 'VID ❌',
-      self?.tracks?.screenshareEnabled
-        ? self.tracks.screenshareEnabled && state.media.pushedScreenshareTrack
-          ? 'SCR ✅'
-          : 'SCR ❌'
-        : undefined,
-    ],
-
-    ...users.map((user) => [
-      user.name ?? truncateKey(user.id, 8),
-      user.isOk.audio ? 'AUD ✅' : 'AUD ❌',
-      user.isOk.video ? 'VID ✅' : 'VID ❌',
-      user.tracks?.screenshareEnabled ? (user.isOk.screenshare ? 'SCR ✅' : 'SCR ❌') : undefined,
-    ]),
-    ['ICE', state.media.peer?.session?.peerConnection.iceConnectionState ?? 'no connection'],
-  ];
-};
-
-export namespace Unit {
-  export const KB = (n?: number) => ((n ?? 0) / 1_000).toFixed(2);
-}
-
-export type TableProps = {
-  rows: (string | number | undefined)[][];
-};
-
-export const Table = ({ rows }: TableProps) => {
-  return (
-    <div className='w-full text-xs font-mono'>
-      {rows.map(([prefix, label, value, unit], i) => (
-        <div key={i} className='grid grid-cols-[3fr_1fr_1fr_1fr]'>
-          <div className='p-1'>{prefix}</div>
-          <div className='p-1'>{label}</div>
-          <div className='p-1'>{value}</div>
-          <div className='p-1'>{unit}</div>
-        </div>
-      ))}
-    </div>
-  );
-};

package/src/containers/CallDebugPanel/index.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-export { CallDebugPanel as default } from './CallDebugPanel';

package/src/containers/CallSidebar/CallSidebar.tsx

@@ -1,18 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { useAtomValue } from '@effect-atom/atom-react';
-import React from 'react';
-
-import { useCapability } from '@dxos/app-framework/ui';
-
-import { ThreadCapabilities } from '#types';
-
-import ChannelContainer from '../ChannelContainer';
-
-export const CallSidebar = () => {
-  const call = useCapability(ThreadCapabilities.CallManager);
-  const roomId = useAtomValue(call.roomIdAtom);
-  return <ChannelContainer subject={undefined} attendableId={roomId ?? ''} roomId={roomId} role='article' />;
-};

package/src/containers/CallSidebar/index.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-export { CallSidebar as default } from './CallSidebar';

package/src/containers/ChannelContainer/ChannelContainer.stories.tsx

@@ -1,61 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React from 'react';
-
-import { Capability } from '@dxos/app-framework';
-import { withPluginManager } from '@dxos/app-framework/testing';
-import { AppCapabilities } from '@dxos/app-toolkit';
-import { Query, useDatabase, useQuery } from '@dxos/react-client/echo';
-import { withLayout, withTheme, Loading } from '@dxos/react-ui/testing';
-import { Message, Thread } from '@dxos/types';
-
-import { createThreadPlugins } from '#testing';
-import { Channel } from '#types';
-
-import { translations } from '../../translations';
-import { ChannelContainer, type ChannelContainerProps } from './ChannelContainer';
-
-// TODO(wittjosiah): Channel doesn't render full height.
-const DefaultStory = ({ roomId }: ChannelContainerProps) => {
-  const db = useDatabase();
-  const [channel] = useQuery(db, Query.type(Channel.Channel));
-  if (!channel) {
-    return <Loading data={{ db: !!db, channel: !!channel }} />;
-  }
-
-  return <ChannelContainer subject={channel} attendableId='story' roomId={roomId} role='article' />;
-};
-
-const meta = {
-  title: 'plugins/plugin-thread/containers/ChannelContainer',
-  component: ChannelContainer,
-  render: DefaultStory,
-  decorators: [
-    withTheme(),
-    withLayout({ layout: 'column' }),
-    withPluginManager({
-      plugins: [...(await createThreadPlugins())],
-      capabilities: [Capability.contributes(AppCapabilities.Schema, [Channel.Channel, Thread.Thread, Message.Message])],
-    }),
-  ],
-  parameters: {
-    translations,
-  },
-} satisfies Meta<typeof ChannelContainer>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    // Fixed room for testing.
-    subject: undefined,
-    attendableId: 'story',
-    role: 'article',
-    roomId: '04a1d1911703b8e929d0649021a965',
-  },
-};