@dxos/plugin-thread 0.8.2-staging.7ac8446 → 0.8.2

package/src/components/CommentsContainer.tsx

@@ -5,21 +5,18 @@
 import { ChatText } from '@phosphor-icons/react';
 import React, { useEffect } from 'react';
 
-import { type ThreadType } from '@dxos/plugin-space/types';
+import { RelationSourceId } from '@dxos/echo-schema';
 import { fullyQualifiedId } from '@dxos/react-client/echo';
 import { useTranslation, Trans } from '@dxos/react-ui';
-import { descriptionText, mx } from '@dxos/react-ui-theme';
+import { descriptionMessage, mx } from '@dxos/react-ui-theme';
+import { type AnchoredTo } from '@dxos/schema';
 
-import { CommentContainer } from './CommentContainer';
-import { type ThreadContainerProps } from './types';
+import { CommentContainer, type CommentContainerProps } from './CommentContainer';
 import { THREAD_PLUGIN } from '../meta';
+import { type ThreadType } from '../types';
 
-export type ThreadsContainerProps = Omit<ThreadContainerProps, 'thread' | 'detached' | 'current' | 'autoFocus'> & {
-  threads: ThreadType[];
-  /**
-   * Threads that are no longer anchored to a position in the object.
-   */
-  detached?: string[];
+export type ThreadsContainerProps = Omit<CommentContainerProps, 'anchor' | 'current'> & {
+  anchors: AnchoredTo[];
   currentId?: string;
   showResolvedThreads?: boolean;
 };
@@ -27,15 +24,15 @@ export type ThreadsContainerProps = Omit<ThreadContainerProps, 'thread' | 'detac
 /**
  * Comment threads.
  */
-export const CommentsContainer = ({
-  threads,
-  detached = [],
-  currentId,
-  showResolvedThreads,
-  ...props
-}: ThreadsContainerProps) => {
+export const CommentsContainer = ({ anchors, currentId, showResolvedThreads, ...props }: ThreadsContainerProps) => {
   const { t } = useTranslation(THREAD_PLUGIN);
-  const filteredThreads = showResolvedThreads ? threads : threads.filter((thread) => !(thread?.status === 'resolved'));
+  // TODO(wittjosiah): There seems to be a race between thread and anchor being deleted.
+  const filteredAnchors = showResolvedThreads
+    ? anchors.filter((anchor) => !!anchor[RelationSourceId])
+    : anchors.filter((anchor) => {
+        const thread = anchor[RelationSourceId];
+        return thread && thread.status !== 'resolved';
+      });
 
   useEffect(() => {
     if (currentId) {
@@ -45,27 +42,14 @@ export const CommentsContainer = ({
 
   return (
     <>
-      {filteredThreads.length > 0 ? (
-        filteredThreads.map((thread) => {
+      {filteredAnchors.length > 0 ? (
+        filteredAnchors.map((anchor) => {
+          const thread = anchor[RelationSourceId] as ThreadType;
           const threadId = fullyQualifiedId(thread);
-          return (
-            <CommentContainer
-              key={threadId}
-              thread={thread}
-              current={currentId === threadId}
-              detached={detached.includes(threadId)}
-              {...props}
-            />
-          );
+          return <CommentContainer key={threadId} anchor={anchor} current={currentId === threadId} {...props} />;
         })
       ) : (
-        <div
-          role='alert'
-          className={mx(
-            descriptionText,
-            'place-self-center border border-dashed border-unAccent rounded-lg text-center p-4 m-4',
-          )}
-        >
+        <div role='alert' className={mx(descriptionMessage, 'place-self-center rounded-lg text-center m-4')}>
           <h2 className='mbe-2 font-medium text-baseText'>{t('no comments title')}</h2>
           <p>
             <Trans

package/src/components/Lobby/Lobby.tsx

@@ -0,0 +1,119 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { type FC, type PropsWithChildren, useEffect, useState } from 'react';
+
+import { useCapability } from '@dxos/app-framework';
+import { useTranslation, type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+import { ThreadCapabilities } from '../../capabilities';
+import { meta } from '../../meta';
+import { Toolbar, type ToolbarProps } from '../Call';
+import { VideoObject } from '../Media';
+import { ResponsiveContainer } from '../ResponsiveGrid';
+
+// TODO(wittjosiah): Repurpose lobby for preview.
+
+const SWARM_PEEK_INTERVAL = 1_000;
+
+//
+// Root
+//
+
+type LobbyRootProps = PropsWithChildren<ThemedClassName>;
+
+const LobbyRoot: FC<LobbyRootProps> = ({ children }) => {
+  return <div className='relative flex flex-col grow overflow-hidden group'>{children}</div>;
+};
+
+LobbyRoot.displayName = 'LobbyRoot';
+
+//
+// Preview
+//
+
+type LobbyPreviewProps = {};
+
+const LobbyPreview: FC<LobbyPreviewProps> = () => {
+  const { t } = useTranslation(meta.id);
+  const call = useCapability(ThreadCapabilities.CallManager);
+  const [classNames, setClassNames] = useState('');
+  useEffect(() => {
+    if (!call.media.videoEnabled) {
+      setClassNames('');
+      return;
+    }
+
+    // Video element will expand once the stream is available.
+    const timeout = setTimeout(() => {
+      setClassNames('outline-neutral-900 opacity-100');
+    }, 500);
+
+    return () => clearTimeout(timeout);
+  }, [call.media.videoEnabled]);
+
+  return (
+    <div className='grid grow p-4'>
+      <ResponsiveContainer>
+        {(call.media.videoEnabled && (
+          <VideoObject
+            videoStream={call.media.videoStream}
+            flip
+            muted
+            classNames={mx(
+              'rounded-md outline outline-2 outline-transparent opacity-0 transition-all duration-500',
+              classNames,
+            )}
+          />
+        )) || <div className='p-4 outline outline-separator rounded-md'>{t('camera off label')}</div>}
+      </ResponsiveContainer>
+    </div>
+  );
+};
+
+LobbyPreview.displayName = 'LobbyPreview';
+
+//
+// Toolbar
+//
+
+type LobbyToolbarProps = ThemedClassName<
+  {
+    roomId: string;
+  } & Pick<ToolbarProps, 'onJoin'>
+>;
+
+const LobbyToolbar: FC<LobbyToolbarProps> = ({ roomId, ...props }) => {
+  const call = useCapability(ThreadCapabilities.CallManager);
+  const [count, setCount] = useState<number>(0);
+
+  // TODO(wittjosiah): Leaving the room doesn't remove you from the swarm.
+  useEffect(() => {
+    void call.peek(roomId).then((count) => setCount(count));
+    const interval = setInterval(() => {
+      void call.peek(roomId).then((count) => setCount(count));
+    }, SWARM_PEEK_INTERVAL);
+
+    return () => clearInterval(interval);
+  }, [call, roomId]);
+
+  return (
+    <div className='absolute bottom-0 left-0 right-0 flex justify-center'>
+      <Toolbar participants={count} isInRoom={false} {...props} />
+    </div>
+  );
+};
+
+LobbyToolbar.displayName = 'LobbyToolbar';
+
+//
+// Export
+//
+
+export const Lobby = {
+  Root: LobbyRoot,
+  Preview: LobbyPreview,
+  Toolbar: LobbyToolbar,
+};

package/src/components/Lobby/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './Lobby';

package/src/components/Media/AudioStream.tsx

@@ -0,0 +1,67 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { type FC, useEffect, useRef } from 'react';
+
+export type AudioStreamProps = {
+  tracks: MediaStreamTrack[];
+};
+
+export const AudioStream: FC<AudioStreamProps> = ({ tracks }) => {
+  const mediaStreamRef = useRef(new MediaStream());
+  const ref = useRef<HTMLAudioElement>(null);
+
+  useEffect(() => {
+    const audio = ref.current;
+    if (!audio) {
+      return;
+    }
+
+    const mediaStream = mediaStreamRef.current;
+    audio.srcObject = mediaStream;
+  }, []);
+
+  const resetSrcObject = () => {
+    const audio = ref.current;
+    const mediaStream = mediaStreamRef.current;
+    if (!audio || !mediaStream) {
+      return;
+    }
+
+    // Need to set srcObject again in Chrome and call play() again for Safari
+    // https://www.youtube.com/live/Tkx3OGrwVk8?si=K--P_AzNnAGrjraV&t=2533
+    // Calling play() this way to make Chrome happy otherwise it throws an error.
+    audio.addEventListener('canplay', () => audio.play(), { once: true });
+    audio.srcObject = mediaStream;
+  };
+
+  return (
+    <>
+      <audio ref={ref} autoPlay />
+      {tracks.map((track) => (
+        <AudioTrack key={track.id} track={track} mediaStream={mediaStreamRef.current} resetSrcObject={resetSrcObject} />
+      ))}
+    </>
+  );
+};
+
+type AudioTrackProps = {
+  track: MediaStreamTrack;
+  mediaStream: MediaStream;
+  resetSrcObject: () => void;
+};
+
+const AudioTrack = ({ track, mediaStream, resetSrcObject }: AudioTrackProps) => {
+  useEffect(() => {
+    const currentTrack = track;
+    mediaStream.addTrack(currentTrack);
+    resetSrcObject();
+    return () => {
+      mediaStream.removeTrack(currentTrack);
+      resetSrcObject();
+    };
+  }, [track, mediaStream]);
+
+  return null;
+};

package/src/components/Media/VideoObject.stories.tsx

@@ -0,0 +1,52 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type StoryObj, type Meta } from '@storybook/react';
+import React, { useEffect, useState } from 'react';
+
+import { scheduleTask } from '@dxos/async';
+import { Context } from '@dxos/context';
+import { log } from '@dxos/log';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
+
+import { VideoObject } from './VideoObject';
+import { getUserMediaTrack } from '../../calls';
+import { ResponsiveContainer } from '../ResponsiveGrid';
+
+const meta: Meta<typeof VideoObject> = {
+  title: 'plugins/plugin-thread/VideoObject',
+  component: VideoObject,
+  render: (args) => {
+    log.info('render');
+    const [videoStream, setVideoStream] = useState<MediaStream>();
+    useEffect(() => {
+      const ctx = new Context();
+      scheduleTask(ctx, async () => {
+        const stream = new MediaStream();
+        stream.addTrack(await getUserMediaTrack('videoinput'));
+        setVideoStream(stream);
+      });
+
+      return () => {
+        void ctx.dispose();
+        videoStream?.getTracks().forEach((track) => track.stop());
+      };
+    }, []);
+
+    return (
+      <ResponsiveContainer>
+        <VideoObject videoStream={videoStream} {...args} flip />
+      </ResponsiveContainer>
+    );
+  },
+  decorators: [withTheme, withLayout({ fullscreen: true, classNames: 'justify-center' })],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof VideoObject>;
+
+export const SelfView: Story = {};

package/src/components/Media/VideoObject.tsx

@@ -0,0 +1,58 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { type JSX, forwardRef, memo, useEffect, useRef } from 'react';
+
+import { type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+export type VideoObjectProps = Omit<JSX.IntrinsicElements['video'], 'className' | 'ref'> &
+  ThemedClassName<{
+    videoStream?: MediaStream;
+    flip?: boolean;
+    // TODO(burdon): If screenshare then contain.
+    contain?: boolean;
+  }>;
+
+export const VideoObject = memo(
+  forwardRef<HTMLVideoElement, VideoObjectProps>(({ videoStream, classNames, flip, contain, ...rest }, ref) => {
+    const internalRef = useRef<HTMLVideoElement | null>(null);
+
+    useEffect(() => {
+      const video = internalRef.current;
+      if (video && videoStream) {
+        video.srcObject = videoStream;
+        video.setAttribute('autoplay', 'true');
+        video.setAttribute('playsinline', 'true');
+      }
+    }, [videoStream, internalRef.current]);
+
+    // NOTE: The video element typically has a max size of 1280x720.
+    return (
+      <video
+        className={mx(
+          'w-full aspect-video',
+          flip && 'scale-x-[-1]',
+          contain ? 'object-contain' : 'object-cover',
+          classNames,
+        )}
+        ref={(v) => {
+          internalRef.current = v;
+          if (ref === null) {
+            return;
+          }
+
+          if (typeof ref === 'function') {
+            ref(v);
+          } else {
+            ref.current = v;
+          }
+        }}
+        {...rest}
+      />
+    );
+  }),
+);
+
+VideoObject.displayName = 'VideoObject';

package/src/components/Media/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './AudioStream';
+export * from './VideoObject';

package/src/components/MessageContainer.tsx

@@ -9,7 +9,7 @@ import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'rea
 import { Surface } from '@dxos/app-framework';
 import { RefArray } from '@dxos/live-object';
 import { PublicKey } from '@dxos/react-client';
-import { type ReactiveEchoObject, type Expando, type SpaceMember } from '@dxos/react-client/echo';
+import { type AnyLiveObject, type Expando, type SpaceMember } from '@dxos/react-client/echo';
 import { useIdentity, type Identity } from '@dxos/react-client/halo';
 import { Button, ButtonGroup, Tooltip, useOnTransition, useThemeContext, useTranslation } from '@dxos/react-ui';
 import { createBasicExtensions, createThemeExtensions, useTextEditor } from '@dxos/react-ui-editor';
@@ -21,7 +21,7 @@ import {
   mx,
 } from '@dxos/react-ui-theme';
 import { MessageHeading, MessageRoot } from '@dxos/react-ui-thread';
-import { type TextContentBlock, type MessageType } from '@dxos/schema';
+import { type DataType } from '@dxos/schema';
 
 import { command } from './command-extension';
 import { useOnEditAnalytics } from '../hooks';
@@ -31,17 +31,14 @@ import { getMessageMetadata } from '../util';
 // TODO(thure): #8149
 const messageControlClassNames = ['!p-1 !min-bs-0 transition-opacity', hoverableControlItem];
 
-export const MessageContainer = ({
-  message,
-  members,
-  editable = false,
-  onDelete,
-}: {
-  message: MessageType;
+export type MessageContainerProps = {
+  message: DataType.Message;
   members: SpaceMember[];
   editable?: boolean;
   onDelete?: (id: string) => void;
-}) => {
+};
+
+export const MessageContainer = ({ message, members, editable = false, onDelete }: MessageContainerProps) => {
   const senderIdentity = members.find(
     (member) =>
       (message.sender.identityDid && member.identity.did === message.sender.identityDid) ||
@@ -64,46 +61,30 @@ export const MessageContainer = ({
       <MessageHeading authorName={messageMetadata.authorName} timestamp={messageMetadata.timestamp}>
         <ButtonGroup classNames='mie-1'>
           {userIsAuthor && editable && (
-            <Tooltip.Root>
-              <Tooltip.Trigger asChild>
-                <Button
-                  variant='ghost'
-                  data-testid={editing ? 'thread.message.save' : 'thread.message.edit'}
-                  classNames={messageControlClassNames}
-                  onClick={() => setEditing((editing) => !editing)}
-                >
-                  <span className='sr-only'>{editLabel}</span>
-                  {editing ? <Check className={getSize(4)} /> : <PencilSimple className={getSize(4)} />}
-                </Button>
-              </Tooltip.Trigger>
-              <Tooltip.Portal>
-                <Tooltip.Content>
-                  {editLabel}
-                  <Tooltip.Arrow />
-                </Tooltip.Content>
-              </Tooltip.Portal>
-            </Tooltip.Root>
+            <Tooltip.Trigger asChild content={editLabel}>
+              <Button
+                variant='ghost'
+                data-testid={editing ? 'thread.message.save' : 'thread.message.edit'}
+                classNames={messageControlClassNames}
+                onClick={() => setEditing((editing) => !editing)}
+              >
+                <span className='sr-only'>{editLabel}</span>
+                {editing ? <Check className={getSize(4)} /> : <PencilSimple className={getSize(4)} />}
+              </Button>
+            </Tooltip.Trigger>
           )}
           {onDelete && (
-            <Tooltip.Root>
-              <Tooltip.Trigger asChild>
-                <Button
-                  variant='ghost'
-                  data-testid='thread.message.delete'
-                  classNames={messageControlClassNames}
-                  onClick={() => handleDelete()}
-                >
-                  <span className='sr-only'>{deleteLabel}</span>
-                  <X className={getSize(4)} />
-                </Button>
-              </Tooltip.Trigger>
-              <Tooltip.Portal>
-                <Tooltip.Content>
-                  {deleteLabel}
-                  <Tooltip.Arrow />
-                </Tooltip.Content>
-              </Tooltip.Portal>
-            </Tooltip.Root>
+            <Tooltip.Trigger asChild content={deleteLabel}>
+              <Button
+                variant='ghost'
+                data-testid='thread.message.delete'
+                classNames={messageControlClassNames}
+                onClick={() => handleDelete()}
+              >
+                <span className='sr-only'>{deleteLabel}</span>
+                <X className={getSize(4)} />
+              </Button>
+            </Tooltip.Trigger>
           )}
         </ButtonGroup>
       </MessageHeading>
@@ -124,7 +105,7 @@ const TextboxBlock = ({
   isAuthor,
   editing,
 }: {
-  block: TextContentBlock;
+  block: DataType.MessageBlock.Text;
   editing?: boolean;
   isAuthor?: boolean;
   identity?: Identity;
@@ -166,7 +147,7 @@ const TextboxBlock = ({
   return <div role='none' ref={parentRef} className='mie-4' {...focusAttributes} />;
 };
 
-const MessageBlockObjectTile = forwardRef<HTMLDivElement, { subject: ReactiveEchoObject<any> }>(
+const MessageBlockObjectTile = forwardRef<HTMLDivElement, { subject: AnyLiveObject<any> }>(
   ({ subject }, forwardedRef) => {
     let title = subject.name ?? subject.title ?? subject.type ?? 'Object';
     if (typeof title !== 'string') {

package/src/components/Participant/Participant.tsx

@@ -0,0 +1,57 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { memo, useMemo } from 'react';
+
+import { useCapability } from '@dxos/app-framework';
+
+import { type EncodedTrackName, type UserState } from '../../calls';
+import { ThreadCapabilities } from '../../capabilities';
+import { VideoObject } from '../Media';
+import { ResponsiveGridItem, type ResponsiveGridItemProps } from '../ResponsiveGrid';
+
+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 isScreenshare = user.id?.endsWith(SCREENSHARE_SUFFIX);
+  const pulledVideoStream = call.getVideoStream(
+    isScreenshare || !isSelf ? (user.tracks?.video as EncodedTrackName) : undefined,
+  );
+
+  const videoStream = useMemo<MediaStream | undefined>(() => {
+    if (isSelf && !isScreenshare) {
+      return call.media.videoStream;
+    } else if (isSelf && isScreenshare) {
+      return call.media.screenshareVideoStream;
+    } else if (!isSelf) {
+      return pulledVideoStream;
+    }
+  }, [isSelf, isScreenshare, call.media.videoStream, call.media.screenshareVideoStream, pulledVideoStream]);
+
+  return (
+    <ResponsiveGridItem
+      {...props}
+      item={user}
+      name={user.name}
+      self={isSelf}
+      screenshare={!!call.media.screenshareVideoStream}
+      video={call.media.videoEnabled}
+      mute={user ? !user.tracks?.audioEnabled : false}
+      wave={user.raisedHand}
+      speaking={user.speaking}
+      debug={debug}
+    >
+      <VideoObject
+        videoStream={videoStream}
+        flip={isSelf && !isScreenshare}
+        contain={!!isScreenshare}
+        classNames='rounded-md'
+      />
+    </ResponsiveGridItem>
+  );
+});
+
+Participant.displayName = 'Participant';

package/src/components/Participant/ParticipantGrid.tsx

@@ -0,0 +1,88 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { type ThemedClassName } from '@dxos/react-ui';
+
+import { Participant, SCREENSHARE_SUFFIX } from './Participant';
+import { type UserState } from '../../calls';
+import { ResponsiveGrid } from '../ResponsiveGrid';
+
+const getId = (user: UserState): string => user.id!;
+
+export type ParticipantGridProps = ThemedClassName<{
+  self: UserState;
+  users: UserState[];
+  fullscreen?: boolean;
+  debug?: boolean;
+}>;
+
+export const ParticipantGrid = ({ classNames, self, users, fullscreen, debug }: ParticipantGridProps) => {
+  const [pinned, setPinned] = useState<string | undefined>();
+
+  const allUsers = useMemo(() => {
+    const allUsers: (UserState & { isSelf?: boolean })[] = [];
+    users.forEach((user) => {
+      if (!user.joined) {
+        return;
+      }
+
+      allUsers.push({ ...user, isSelf: user.id === self.id });
+      if (user.tracks?.screenshareEnabled) {
+        const screenshare: UserState = {
+          ...user,
+          id: user.id + SCREENSHARE_SUFFIX,
+          tracks: {
+            ...user.tracks,
+            video: user.tracks.screenshare,
+            videoEnabled: user.tracks.screenshareEnabled,
+          } as any, // TODO(burdon): Remove cast.
+        };
+
+        allUsers.push(screenshare);
+      }
+    });
+
+    return allUsers;
+  }, [self, users]);
+
+  useEffect(() => {
+    if (pinned) {
+      // Check expanded user is still in call.
+      if (!allUsers.find((user) => user.id === pinned)) {
+        setPinned(undefined);
+      }
+    }
+  }, [pinned, allUsers]);
+
+  // TODO(burdon): Put self last.
+  const sortedUsers: UserState[] = allUsers.sort((a, b) => {
+    if (a.isSelf) {
+      return 1;
+    } else if (b.isSelf) {
+      return -1;
+    } else if (a.tracks?.screenshareEnabled) {
+      return -1;
+    } else if (b.tracks?.screenshareEnabled) {
+      return 1;
+    } else {
+      return 0;
+    }
+  });
+
+  // TODO(burdon): Show ghost view of user for a second before leaving.
+  return (
+    <ResponsiveGrid<UserState>
+      classNames={classNames}
+      Cell={Participant}
+      debug={debug}
+      getId={getId}
+      items={sortedUsers}
+      pinned={pinned}
+      autoHideGallery={fullscreen}
+      onPinnedChange={setPinned}
+    />
+  );
+};

package/src/components/Participant/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './Participant';
+export * from './ParticipantGrid';