@dxos/plugin-thread 0.8.4-main.c4373fc → 0.8.4-main.d9fc60f731

package/src/components/Media/AudioStream.tsx

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

@@ -1,60 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type StoryObj } from '@storybook/react-vite';
-import React, { useEffect, useState } from 'react';
-
-import { scheduleTask } from '@dxos/async';
-import { Context } from '@dxos/context';
-import { log } from '@dxos/log';
-import { withTheme } from '@dxos/react-ui/testing';
-
-import { getUserMediaTrack } from '../../calls';
-import { ResponsiveContainer } from '../ResponsiveGrid';
-
-import { VideoObject, type VideoObjectProps } from './VideoObject';
-
-const DefaultStory = (props: VideoObjectProps) => {
-  log.info('render');
-  const [videoStream, setVideoStream] = useState<MediaStream>();
-  useEffect(() => {
-    const ctx = new Context();
-    scheduleTask(ctx, async () => {
-      try {
-        const stream = new MediaStream();
-        stream.addTrack(await getUserMediaTrack('videoinput'));
-        setVideoStream(stream);
-      } catch (err) {
-        log.catch(err);
-      }
-    });
-
-    return () => {
-      void ctx.dispose();
-      videoStream?.getTracks().forEach((track) => track.stop());
-    };
-  }, []);
-
-  return (
-    <ResponsiveContainer>
-      <VideoObject videoStream={videoStream} flip {...props} />
-    </ResponsiveContainer>
-  );
-};
-
-const meta = {
-  title: 'plugins/plugin-thread/VideoObject',
-  component: VideoObject,
-  render: DefaultStory,
-  decorators: [withTheme],
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof VideoObject>;
-
-export const SelfView: Story = {};

package/src/components/Media/VideoObject.tsx

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

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

package/src/components/Participant/Participant.tsx

@@ -1,63 +0,0 @@
-//
-// 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 =
-    !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;
-
-  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;
-    }
-  }, [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

@@ -1,89 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useEffect, useMemo, useState } from 'react';
-
-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!;
-
-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

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

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

@@ -1,54 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React from 'react';
-
-import { withTheme } from '@dxos/react-ui/testing';
-
-import { translations } from '../../translations';
-import { VideoObject as VideoObjectComponent } from '../Media';
-
-import { ResponsiveContainer } from './ResponsiveContainer';
-
-const meta = {
-  title: 'plugins/plugin-thread/ResponsiveContainer',
-  component: ResponsiveContainer,
-  decorators: [withTheme],
-  parameters: {
-    layout: 'fullscreen',
-    translations,
-  },
-} satisfies Meta<typeof ResponsiveContainer>;
-
-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

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

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

@@ -1,158 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-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 { 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 StoryProps = ResponsiveGridProps<TestItem> & { random?: boolean; autoHideGallery?: boolean };
-
-const DefaultStory = (props: StoryProps) => {
-  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/ResponsiveGrid',
-  component: ResponsiveGrid as any,
-  render: DefaultStory,
-  decorators: [withTheme],
-  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 = faker.string.uuid();
-  return {
-    id,
-    type,
-    name: faker.person.fullName(),
-    imageUrl: `https://placehold.co/3200x1800/333/999?font=roboto&text=${id.slice(0, 2)}`,
-    videoUrl: faker.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')),
-  },
-};