@dxos/plugin-thread 0.8.4-main.406dc2a → 0.8.4-main.422d1c7879

package/src/components/Participant/Participant.tsx

@@ -2,12 +2,14 @@
 // Copyright 2024 DXOS.org
 //
 
+import { useAtomValue } from '@effect-atom/atom-react';
 import React, { memo, useMemo } from 'react';
 
-import { useCapability } from '@dxos/app-framework';
+import { useCapability } from '@dxos/app-framework/ui';
+
+import { ThreadCapabilities } from '#types';
 
 import { type EncodedTrackName, type UserState } from '../../calls';
-import { ThreadCapabilities } from '../../capabilities';
 import { VideoObject } from '../Media';
 import { ResponsiveGridItem, type ResponsiveGridItemProps } from '../ResponsiveGrid';
 
@@ -15,27 +17,39 @@ export const SCREENSHARE_SUFFIX = '_screenshare';
 
 export const Participant = memo(({ item: user, debug, ...props }: ResponsiveGridItemProps<UserState>) => {
   const call = useCapability(ThreadCapabilities.CallManager);
-  const isSelf: boolean = call.self.id !== undefined && user.id !== undefined && user.id.startsWith(call.self.id);
+  const self = useAtomValue(call.selfAtom);
+  const media = useAtomValue(call.mediaAtom);
+  const isSelf: boolean = self.id !== undefined && user.id !== undefined && user.id.startsWith(self.id);
   const isScreenshare = user.id?.endsWith(SCREENSHARE_SUFFIX);
 
-  const pulledVideoStream =
-    !isSelf && isScreenshare && user.tracks?.screenshareEnabled
-      ? call.getVideoStream(user.tracks?.screenshare as EncodedTrackName)
-      : !isSelf && !isScreenshare && user.tracks?.videoEnabled
-        ? call.getVideoStream(user.tracks?.video as EncodedTrackName)
-        : undefined;
+  // Get pulled video stream for non-self users.
+  const pulledVideoStream = useMemo<MediaStream | undefined>(() => {
+    if (isSelf) {
+      return undefined;
+    }
+    const trackName =
+      isScreenshare && user.tracks?.screenshareEnabled
+        ? (user.tracks?.screenshare as EncodedTrackName)
+        : !isScreenshare && user.tracks?.videoEnabled
+          ? (user.tracks?.video as EncodedTrackName)
+          : undefined;
+    return trackName ? media.pulledVideoStreams[trackName]?.stream : undefined;
+  }, [
+    isSelf,
+    isScreenshare,
+    media.pulledVideoStreams,
+    user.tracks?.screenshare,
+    user.tracks?.video,
+    user.tracks?.screenshareEnabled,
+    user.tracks?.videoEnabled,
+  ]);
 
   const videoStream = useMemo<MediaStream | undefined>(() => {
     if (isSelf) {
-      if (isScreenshare) {
-        return call.media.screenshareVideoStream;
-      } else if (!isScreenshare) {
-        return call.media.videoStream;
-      }
-    } else if (!isSelf) {
-      return pulledVideoStream;
+      return isScreenshare ? media.screenshareVideoStream : media.videoStream;
     }
-  }, [isSelf, isScreenshare, call.media.videoStream, call.media.screenshareVideoStream, pulledVideoStream]);
+    return pulledVideoStream;
+  }, [isSelf, isScreenshare, media.videoStream, media.screenshareVideoStream, pulledVideoStream]);
 
   return (
     <ResponsiveGridItem
@@ -43,8 +57,8 @@ export const Participant = memo(({ item: user, debug, ...props }: ResponsiveGrid
       item={user}
       name={user.name}
       self={isSelf}
-      screenshare={!!call.media.screenshareVideoStream}
-      video={call.media.videoEnabled}
+      screenshare={!!media.screenshareVideoStream}
+      video={media.videoEnabled}
       mute={user ? !user.tracks?.audioEnabled : false}
       wave={user.raisedHand}
       speaking={user.speaking}

package/src/components/Participant/ParticipantGrid.tsx

@@ -8,7 +8,6 @@ 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!;

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

@@ -5,11 +5,10 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useEffect, useState } from 'react';
 
-import { faker } from '@dxos/random';
-import { withTheme } from '@dxos/react-ui/testing';
+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';
 
@@ -53,9 +52,9 @@ const TestCell = ({ item, ...props }: ResponsiveGridItemProps<TestItem>) => {
   );
 };
 
-type StoryProps = ResponsiveGridProps<TestItem> & { random?: boolean; autoHideGallery?: boolean };
+type DefaultStoryProps = ResponsiveGridProps<TestItem> & { random?: boolean; autoHideGallery?: boolean };
 
-const DefaultStory = (props: StoryProps) => {
+const DefaultStory = (props: DefaultStoryProps) => {
   const [pinned, setPinned] = useState<string | undefined>(
     (props.pinned ?? props.items.length > 1) ? props.items[0]?.id : undefined,
   );
@@ -89,10 +88,10 @@ const DefaultStory = (props: StoryProps) => {
 };
 
 const meta = {
-  title: 'plugins/plugin-thread/ResponsiveGrid',
+  title: 'plugins/plugin-thread/components/ResponsiveGrid',
   component: ResponsiveGrid as any,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
     translations,
@@ -107,13 +106,13 @@ const videoUrls = [
 ];
 
 const createItem = (type?: 'image' | 'video') => {
-  const id = faker.string.uuid();
+  const id = random.string.uuid();
   return {
     id,
     type,
-    name: faker.person.fullName(),
+    name: random.person.fullName(),
     imageUrl: `https://placehold.co/3200x1800/333/999?font=roboto&text=${id.slice(0, 2)}`,
-    videoUrl: faker.helpers.arrayElement(videoUrls),
+    videoUrl: random.helpers.arrayElement(videoUrls),
   };
 };
 

package/src/components/ResponsiveGrid/ResponsiveGrid.tsx

@@ -8,10 +8,10 @@ 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 { mx } from '@dxos/ui-theme';
 
-import { ResponsiveContainer } from './ResponsiveContainer';
 import { type ResponsiveGridItemProps } from './ResponsiveGridItem';
+import { ResponsivePanel } from './ResponsivePanel';
 
 const ASPECT_RATIO = 16 / 9;
 const MIN_GALLERY_HEIGHT = 250;
@@ -136,7 +136,7 @@ export const ResponsiveGrid = <T extends object = any>({
   );
 
   return (
-    <div ref={containerRef} className={mx('relative w-full h-full', classNames)}>
+    <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. */}
@@ -206,7 +206,7 @@ export const ResponsiveGrid = <T extends object = any>({
 
 const SoloItem: FC<Pick<ResponsiveGridProps, 'debug'> & { id: string }> = ({ debug, id }) => {
   return (
-    <ResponsiveContainer>
+    <ResponsivePanel>
       <div
         {...{ 'data-grid-item': id }}
         className={mx('aspect-video overflow-hidden', debug && 'z-20 border-2 border-primary-500')}
@@ -214,7 +214,7 @@ const SoloItem: FC<Pick<ResponsiveGridProps, 'debug'> & { id: string }> = ({ deb
         {/* Maximum size placeholder image forces aspect ratio. */}
         <img alt='placeholder video' className={mx('opacity-0', maxImageSize)} />
       </div>
-    </ResponsiveContainer>
+    </ResponsivePanel>
   );
 };
 

package/src/components/ResponsiveGrid/ResponsiveGridItem.tsx

@@ -6,9 +6,9 @@ import React, { type CSSProperties, type PropsWithChildren, useEffect, useState
 
 import { Icon, IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { Waveform } from '@dxos/react-ui-sfx';
-import { groupHoverControlItemWithTransition, mx } from '@dxos/react-ui-theme';
+import { groupHoverControlItemWithTransition, mx } from '@dxos/ui-theme';
 
-import { meta } from '../../meta';
+import { meta } from '#meta';
 
 export type ResponsiveGridItemProps<T extends object = any> = PropsWithChildren<
   ThemedClassName<{
@@ -49,12 +49,12 @@ export const ResponsiveGridItem = <T extends object = any>({
   const iconProps: Record<string, { icon: string; label: string; classNames?: string }> = {
     wave: {
       icon: 'ph--hand-waving--duotone',
-      label: t('icon wave'),
+      label: t('icon-wave.label'),
       classNames: 'animate-pulse bg-orange-500',
     },
     mute: {
       icon: 'ph--microphone-slash--regular',
-      label: t('icon muted'),
+      label: t('icon-muted.label'),
     },
   };
 
@@ -76,7 +76,7 @@ export const ResponsiveGridItem = <T extends object = any>({
   return (
     <div
       className={mx(
-        'relative w-full h-full group',
+        '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,
@@ -89,11 +89,11 @@ export const ResponsiveGridItem = <T extends object = any>({
       {onClick && (
         <div className='z-10 absolute top-1 right-1 flex'>
           <IconButton
-            classNames={mx('p-1 min-bs-1 rounded', groupHoverControlItemWithTransition)}
+            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') : t('icon pin')}
+            label={pinned ? t('icon-unpin.label') : t('icon-pin.label')}
             onClick={() => onClick?.(item)}
           />
         </div>
@@ -106,7 +106,10 @@ export const ResponsiveGridItem = <T extends object = any>({
           {/* {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')}
+            className={mx(
+              'bg-neutral-800 text-neutral-100 py-0.5 truncate rounded-sm',
+              pinned ? 'px-2' : 'px-1 text-xs',
+            )}
           >
             {name}
           </div>
@@ -118,7 +121,7 @@ export const ResponsiveGridItem = <T extends object = any>({
         {(speaking && <Waveform active size={pinned ? 5 : 4} />) ||
           (props && (
             <IconButton
-              classNames={mx('p-1 min-bs-1 rounded', props?.classNames)}
+              classNames={mx('p-1 min-h-1 rounded-sm', props?.classNames)}
               icon={props?.icon}
               label={props?.label}
               size={pinned ? 5 : 4}

package/src/components/ResponsiveGrid/{ResponsiveContainer.stories.tsx → ResponsivePanel.stories.tsx}

@@ -5,26 +5,25 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { translations } from '../../translations';
 import { VideoObject as VideoObjectComponent } from '../Media';
-
-import { ResponsiveContainer } from './ResponsiveContainer';
+import { ResponsivePanel } from './ResponsivePanel';
 
 const meta = {
-  title: 'plugins/plugin-thread/ResponsiveContainer',
-  component: ResponsiveContainer,
-  decorators: [withTheme],
+  title: 'plugins/plugin-thread/components/ResponsivePanel',
+  component: ResponsivePanel,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
     translations,
   },
-} satisfies Meta<typeof ResponsiveContainer>;
+} satisfies Meta<typeof ResponsivePanel>;
 
 export default meta;
 
-type Story = StoryObj<typeof ResponsiveContainer>;
+type Story = StoryObj<typeof ResponsivePanel>;
 
 export const Image: Story = {
   args: {

package/src/components/ResponsiveGrid/{ResponsiveContainer.tsx → ResponsivePanel.tsx}

@@ -4,21 +4,21 @@
 
 import React, { type PropsWithChildren } from 'react';
 
-import { mx } from '@dxos/react-ui-theme';
+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>
+ * <ResponsivePanel>
  *   <VideoObject />
- * </ResponsiveContainer>
+ * </ResponsivePanel>
  */
-export const ResponsiveContainer = ({ children }: PropsWithChildren) => {
+export const ResponsivePanel = ({ children }: PropsWithChildren) => {
   return (
     // Outer container that takes full size of parent.
-    <div role='none' className='relative flex w-full h-full'>
+    <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. */}

package/src/components/ResponsiveGrid/index.ts

@@ -2,6 +2,6 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './ResponsiveContainer';
+export * from './ResponsivePanel';
 export * from './ResponsiveGrid';
 export * from './ResponsiveGridItem';

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

@@ -0,0 +1,31 @@
+//
+// 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

@@ -0,0 +1,20 @@
+//
+// 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

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

package/src/components/index.ts

@@ -2,17 +2,10 @@
 // Copyright 2023 DXOS.org
 //
 
-import { lazy } from 'react';
+import { type ComponentType, lazy } from 'react';
 
-export const ChannelContainer = lazy(() => import('./ChannelContainer'));
-export const ChatContainer = lazy(() => import('./ChatContainer'));
-
-// TODO(wittjosiah): Suspense boundary for sidebar?
 export * from './Call';
-export * from './CallDebugPanel';
-export * from './CallSidebar';
-export * from './CommentsContainer';
-export * from './CommentsThreadContainer';
-export * from './MessageContainer';
-export * from './ThreadComplementary';
-export * from './ThreadSettings';
+export * from './CommentsPanel';
+export * from './MessagePanel';
+
+export const ThreadSettings: ComponentType<any> = lazy(() => import('./ThreadSettings'));

package/src/{components → containers/CallDebugPanel}/CallDebugPanel.tsx

@@ -10,12 +10,11 @@ import { JsonView, Panel } from '@dxos/devtools';
 import { log } from '@dxos/log';
 import { IconButton, Input, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 
-import { type EncodedTrackName, type GlobalState } from '../calls';
-import { meta } from '../meta';
+import { meta } from '#meta';
 
-export type CallDebugPanelProps = ThemedClassName<{
-  state?: GlobalState;
-}>;
+import { type EncodedTrackName, type GlobalState } from '../../calls';
+
+export type CallDebugPanelProps = ThemedClassName<{ state?: GlobalState }>;
 
 export const CallDebugPanel = ({ state }: CallDebugPanelProps) => {
   const { t } = useTranslation(meta.id);
@@ -72,25 +71,25 @@ export const CallDebugPanel = ({ state }: CallDebugPanelProps) => {
       icon='ph--video-conference--regular'
       open={open}
       onToggle={handleToggle}
-      title={t('meeting status title')}
-      maxHeight={false}
+      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 gap-2 text-xs'>
-        <div className='flex items-center gap-2'>
+      <div className='flex flex-col w-full text-xs'>
+        <div className='flex items-center gap-2 items-center'>
           <Input.Root>
-            <Input.Label classNames={'text-sm'}>{t('show webrtc stats title')}</Input.Label>
-            <Input.Checkbox checked={showDetailedWebRTCStats} onCheckedChange={handleShowDetailedWebRTCStats} />
+            <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'>
+        <div className='flex items-center gap-2 items-center'>
           <Input.Root>
-            <Input.Label classNames={'text-sm'}>{t('show calls history title')}</Input.Label>
-            <Input.Checkbox checked={showServiceHistory} onCheckedChange={handleToggleServiceHistory} />
+            <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'>
-          <IconButton classNames={'text-sm'} icon='ph--copy--regular' label={'copy raw'} onClick={handleCopyRaw} />
+        <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 }} />}

package/src/containers/CallDebugPanel/index.ts

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

package/src/containers/CallSidebar/CallSidebar.tsx

@@ -0,0 +1,18 @@
+//
+// 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

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

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

@@ -0,0 +1,61 @@
+//
+// 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',
+  },
+};