@dxos/plugin-thread 0.8.2-main.fbd8ed0 → 0.8.2-staging.4d6ad0f

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

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