@dxos/plugin-thread 0.8.4-main.c1de068 → 0.8.4-main.c351d160a8

package/src/components/Call/Toolbar.tsx

@@ -2,28 +2,31 @@
 // Copyright 2024 DXOS.org
 //
 
+import { useAtomValue } from '@effect-atom/atom-react';
 import React from 'react';
 
-import { useAppGraph, useCapability } from '@dxos/app-framework';
-import { useNode, useActions } from '@dxos/plugin-graph';
-import { fullyQualifiedId } from '@dxos/react-client/echo';
+import { useCapability } from '@dxos/app-framework/ui';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
+import { Obj } from '@dxos/echo';
+import { Node, useActionRunner } from '@dxos/plugin-graph';
+import { useActions, useNode } from '@dxos/plugin-graph';
 import {
   Icon,
   IconButton,
   type IconButtonProps,
+  Toolbar as NaturalToolbar,
   type ThemedClassName,
-  Toolbar as NativeToolbar,
   toLocalizedString,
   useTranslation,
 } from '@dxos/react-ui';
-import { groupHoverControlItemWithTransition, mx } from '@dxos/react-ui-theme';
+import { groupHoverControlItemWithTransition, mx } from '@dxos/ui-theme';
 
-import { ThreadCapabilities } from '../../capabilities';
 import { meta } from '../../meta';
-import { type ChannelType } from '../../types';
+import { ThreadCapabilities } from '../../types';
+import { type Channel } from '../../types';
 
 export type ToolbarProps = ThemedClassName<{
-  channel?: ChannelType;
+  channel?: Channel.Channel;
   participants?: number;
   autoHideControls?: boolean;
   isInRoom?: boolean;
@@ -42,40 +45,43 @@ export const Toolbar = ({
 }: ToolbarProps) => {
   const { t } = useTranslation(meta.id);
   const { graph } = useAppGraph();
+  const runAction = useActionRunner();
   const call = useCapability(ThreadCapabilities.CallManager);
+  const media = useAtomValue(call.mediaAtom);
+  const joined = useAtomValue(call.joinedAtom);
+  const raisedHand = useAtomValue(call.raisedHandAtom);
 
   // Channel app graph node.
-  const node = useNode(graph, channel && fullyQualifiedId(channel));
+  const node = useNode(graph, channel && Obj.getDXN(channel).toString());
   const actions = useActions(graph, node?.id).filter((action) => action.properties.disposition === 'toolbar');
 
   // Screen sharing.
-  const isScreensharing = call.media.screenshareTrack !== undefined;
+  const isScreensharing = media.screenshareTrack !== undefined;
   const canSharescreen =
     typeof navigator.mediaDevices !== 'undefined' && navigator.mediaDevices.getDisplayMedia !== undefined;
 
   // TODO(wittjosiah): In order to use toolbar, need to update to actually use the graph action callbacks directly.
   return (
     <div className={mx('z-20 flex justify-center m-8', autoHideControls && groupHoverControlItemWithTransition)}>
-      <NativeToolbar.Root classNames={['p-2 bg-modalSurface rounded-md shadow-md', classNames]}>
+      <NaturalToolbar.Root classNames={['p-2 bg-modal-surface rounded-md shadow-md', classNames]}>
         <ToggleButton
-          active={call.media.audioEnabled}
+          active={media.audioEnabled}
           state={{
             on: {
               icon: 'ph--microphone--regular',
               label: t('mic off'),
               onClick: () => call.turnAudioOff(),
-              classNames: 'bg-callActive',
+              classNames: 'bg-call-active',
             },
             off: {
               icon: 'ph--microphone-slash--duotone',
               label: t('mic on'),
               onClick: () => call.turnAudioOn(),
-              classNames: [call.joined && 'bg-callAlert'],
             },
           }}
         />
         <ToggleButton
-          active={call.media.videoEnabled}
+          active={media.videoEnabled}
           state={{
             on: {
               icon: 'ph--video-camera--regular',
@@ -91,13 +97,13 @@ export const Toolbar = ({
         />
 
         {(participants !== undefined && (
-          <div className='flex justify-center items-center gap-2 is-[5rem] text-xs text-subdued'>
+          <div className='flex justify-center items-center gap-2 w-[5rem] text-xs text-subdued'>
             <Icon icon='ph--users--regular' size={4} />
             <div>{participants}</div>
           </div>
-        )) || <NativeToolbar.Separator variant='gap' />}
+        )) || <NaturalToolbar.Separator variant='gap' />}
 
-        {call.joined && (
+        {joined && (
           <>
             <ToggleButton
               disabled={!canSharescreen}
@@ -117,25 +123,26 @@ export const Toolbar = ({
             />
 
             {/* Companion actions. */}
-            {actions.map((action) => (
-              <IconButton
-                key={action.id}
-                {...defaultButtonProps}
-                icon={action.properties.icon}
-                label={toLocalizedString(action.properties.label, t)}
-                classNames={action.properties.classNames}
-                onClick={() => action.data({ node })}
-              />
-            ))}
+            {actions
+              .filter((action): action is Node.Action => Node.isAction(action))
+              .map((action) => (
+                <IconButton
+                  key={action.id}
+                  {...defaultButtonProps}
+                  icon={action.properties.icon}
+                  label={toLocalizedString(action.properties.label, t)}
+                  classNames={action.properties.classNames}
+                  onClick={() => node && void runAction(action, { parent: node })}
+                />
+              ))}
 
             <ToggleButton
-              active={call.raisedHand}
+              active={raisedHand}
               state={{
                 on: {
                   icon: 'ph--hand-waving--regular',
                   label: t('lower hand'),
                   onClick: () => call.setRaisedHand(false),
-                  classNames: [call.joined && 'bg-callAlert'],
                 },
                 off: {
                   icon: 'ph--hand-palm--duotone',
@@ -146,12 +153,12 @@ export const Toolbar = ({
             />
           </>
         )}
-        {call.joined ? (
+        {joined ? (
           <IconButton variant='destructive' icon='ph--phone-x--regular' label={t('leave call')} onClick={onLeave} />
         ) : (
           <IconButton variant='primary' icon='ph--phone-incoming--regular' label={t('join call')} onClick={onJoin} />
         )}
-      </NativeToolbar.Root>
+      </NaturalToolbar.Root>
     </div>
   );
 };
@@ -174,7 +181,7 @@ const defaultButtonProps: Partial<IconButtonProps> = {
 const ToggleButton = ({ active, state }: ToolbarButtonProps) => (
   <IconButton
     {...defaultButtonProps}
-    classNames={[active ? (state.on.classNames ?? 'bg-callActive') : state.off.classNames]}
+    classNames={[active ? (state.on.classNames ?? 'bg-call-active') : state.off.classNames]}
     icon={active ? state.on.icon : state.off.icon}
     label={active ? state.on.label : state.off.label}
     onClick={active ? state.on.onClick : state.off.onClick}

package/src/components/CommentsPanel/CommentsPanel.stories.tsx

@@ -0,0 +1,93 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import React from 'react';
+
+import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { Obj, Query, Relation } from '@dxos/echo';
+import { TestSchema } from '@dxos/echo/testing';
+import { ClientPlugin } from '@dxos/plugin-client';
+import { faker } from '@dxos/random';
+import { useDatabase, useQuery } from '@dxos/react-client/echo';
+import { useIdentity } from '@dxos/react-client/halo';
+import { useAsyncEffect } from '@dxos/react-ui';
+import { withLayout, withTheme, Loading } from '@dxos/react-ui/testing';
+import { AnchoredTo, Message, Thread } from '@dxos/types';
+
+import { translations } from '../../translations';
+
+import { CommentsPanel } from './CommentsPanel';
+import { createCommentThread, createProposalThread } from '../../testing/data';
+
+faker.seed(1);
+
+const DefaultStory = () => {
+  const identity = useIdentity();
+  const db = useDatabase();
+  const anchors = useQuery(db, Query.type(AnchoredTo.AnchoredTo));
+
+  useAsyncEffect(async () => {
+    if (identity && db) {
+      const object = db.add(Obj.make(TestSchema.Expando, {}));
+      const thread1 = db.add(createCommentThread(identity));
+      const thread2 = db.add(createProposalThread(identity));
+      db.add(
+        Relation.make(AnchoredTo.AnchoredTo, {
+          [Relation.Source]: thread1,
+          [Relation.Target]: object,
+          anchor: 'test',
+        }),
+      );
+      db.add(
+        Relation.make(AnchoredTo.AnchoredTo, {
+          [Relation.Source]: thread2,
+          [Relation.Target]: object,
+          anchor: 'test',
+        }),
+      );
+    }
+  }, [identity, db]);
+
+  if (!identity || !db || !anchors) {
+    return <Loading data={{ identity: !!identity, db: !!db, anchors: !!anchors }} />;
+  }
+
+  return <CommentsPanel anchors={anchors} onThreadDelete={console.log} onAcceptProposal={console.log} />;
+};
+
+const meta = {
+  title: 'plugins/plugin-thread/components/Comments',
+  render: DefaultStory,
+  decorators: [
+    withTheme(),
+    withLayout({ layout: 'column' }),
+    // TODO(wittjosiah): This shouldn't depend on app framework (use withClientProvider instead).
+    //  Currently this is required due to useOnEditAnalytics.
+    withPluginManager({
+      plugins: [
+        OperationPlugin(),
+        RuntimePlugin(),
+        ClientPlugin({
+          types: [Message.Message, Thread.Thread, AnchoredTo.AnchoredTo],
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              yield* Effect.promise(() => client.halo.createIdentity());
+            }),
+        }),
+      ],
+    }),
+  ],
+  parameters: {
+    translations,
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/CommentsPanel/CommentsPanel.tsx

@@ -0,0 +1,71 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useEffect } from 'react';
+
+import { Obj, Relation } from '@dxos/echo';
+import { Icon, Message, Trans, useTranslation } from '@dxos/react-ui';
+import { type AnchoredTo, type Thread } from '@dxos/types';
+
+import { meta } from '../../meta';
+
+import { CommentsThread, type CommentsThreadProps } from './CommentsThread';
+
+export type CommentsPanelProps = Omit<CommentsThreadProps, 'anchor' | 'current'> & {
+  anchors: AnchoredTo.AnchoredTo[];
+  currentId?: string;
+  showResolvedThreads?: boolean;
+};
+
+/**
+ * Root container for collection of comment threads.
+ */
+export const CommentsPanel = ({ anchors, currentId, showResolvedThreads, ...props }: CommentsPanelProps) => {
+  const { t } = useTranslation(meta.id);
+
+  // TODO(wittjosiah): There seems to be a race between thread and anchor being deleted.
+  const filteredAnchors = showResolvedThreads
+    ? anchors.filter((anchor) => !!Relation.getSource(anchor))
+    : anchors.filter((anchor) => {
+        const thread = Relation.getSource(anchor);
+        // TODO(dmaretskyi): Do Obj.instanceOf check instead.
+        return thread && (thread as any).status !== 'resolved';
+      });
+
+  useEffect(() => {
+    if (currentId) {
+      document.getElementById(currentId)?.scrollIntoView({ behavior: 'smooth', block: 'end' });
+    }
+  }, [currentId]);
+
+  if (filteredAnchors.length === 0) {
+    return (
+      <div role='none' className='p-form-padding'>
+        <Message.Root>
+          <Message.Title>
+            <Trans
+              {...{
+                t,
+                i18nKey: 'no comments message',
+                components: {
+                  commentIcon: <Icon icon='ph--chat-text--regular' size={4} classNames='w-block' />,
+                },
+              }}
+            />
+          </Message.Title>
+        </Message.Root>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {filteredAnchors.map((anchor) => {
+        const thread = Relation.getSource(anchor) as Thread.Thread;
+        const threadId = Obj.getDXN(thread).toString();
+        return <CommentsThread key={threadId} anchor={anchor} current={currentId === threadId} {...props} />;
+      })}
+    </div>
+  );
+};

package/src/components/{CommentsThreadContainer.tsx → CommentsPanel/CommentsThread.tsx}

@@ -4,36 +4,39 @@
 
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 
-import { Ref, Relation } from '@dxos/echo';
-import { fullyQualifiedId, getSpace, useMembers } from '@dxos/react-client/echo';
+import { Obj, Relation } from '@dxos/echo';
+import { useObject } from '@dxos/echo-react';
+import { getSpace, useMembers } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
 import { IconButton, Tag, Tooltip, useThemeContext, useTranslation } from '@dxos/react-ui';
-import { createBasicExtensions, createThemeExtensions, listener } from '@dxos/react-ui-editor';
-import { hoverableControlItem, hoverableControls, hoverableFocusedWithinControls, mx } from '@dxos/react-ui-theme';
-import { MessageTextbox, type MessageTextboxProps, Thread, type ThreadRootProps } from '@dxos/react-ui-thread';
-import { type AnchoredTo } from '@dxos/schema';
-import { isNonNullable } from '@dxos/util';
-
-import { MessageContainer } from './MessageContainer';
-import { command } from './command-extension';
-import { useStatus } from '../hooks';
-import { meta } from '../meta';
-import { type ThreadType } from '../types';
-import { getMessageMetadata } from '../util';
-
-// TODO(burdon): Remove need for p-1.
-export const commentControlClassNames = '!p-1 transition-opacity';
-
-export type CommentsThreadContainerProps = {
-  anchor: AnchoredTo;
-  onAttend?: (anchor: AnchoredTo) => void;
-  onComment?: (anchor: AnchoredTo, message: string) => void;
-  onResolve?: (anchor: AnchoredTo) => void;
-  onMessageDelete?: (anchor: AnchoredTo, messageId: string) => void;
-  onThreadDelete?: (anchor: AnchoredTo) => void;
+import {
+  MessageTextbox,
+  type MessageTextboxProps,
+  Thread as ThreadComponent,
+  type ThreadRootProps,
+} from '@dxos/react-ui-thread';
+import { type AnchoredTo, type Thread } from '@dxos/types';
+import { createBasicExtensions, createThemeExtensions, listener } from '@dxos/ui-editor';
+import { hoverableControlItem, hoverableControls, hoverableFocusedWithinControls, mx } from '@dxos/ui-theme';
+
+import { useStatus } from '../../hooks';
+import { meta } from '../../meta';
+import { getMessageMetadata } from '../../util';
+
+import { command } from '../../extensions/command';
+import { MessagePanel, buttonClassNames, buttonGroupClassNames } from '../MessagePanel';
+
+export type CommentsThreadProps = {
+  anchor: AnchoredTo.AnchoredTo;
+  onAttend?: (anchor: AnchoredTo.AnchoredTo) => void;
+  onComment?: (anchor: AnchoredTo.AnchoredTo, message: string) => void;
+  onResolve?: (anchor: AnchoredTo.AnchoredTo) => void;
+  onMessageDelete?: (anchor: AnchoredTo.AnchoredTo, messageId: string) => void;
+  onThreadDelete?: (anchor: AnchoredTo.AnchoredTo) => void;
+  onAcceptProposal?: (anchor: AnchoredTo.AnchoredTo, messageId: string) => void;
 } & Pick<ThreadRootProps, 'current'>;
 
-export const CommentsThreadContainer = ({
+export const CommentsThread = ({
   anchor,
   current,
   onAttend,
@@ -41,30 +44,32 @@ export const CommentsThreadContainer = ({
   onResolve,
   onMessageDelete,
   onThreadDelete,
-}: CommentsThreadContainerProps) => {
+  onAcceptProposal,
+}: CommentsThreadProps) => {
+  const { themeMode } = useThemeContext();
   const { t } = useTranslation(meta.id);
   const identity = useIdentity()!;
   const space = getSpace(anchor);
-  const members = useMembers(space?.key);
+  const members = useMembers(space?.id);
   const detached = !anchor.anchor;
-  const thread = Relation.getSource(anchor) as ThreadType;
-  const activity = useStatus(space, fullyQualifiedId(thread));
+  const thread = Relation.getSource(anchor) as Thread.Thread;
+  const [messages] = useObject(thread, 'messages');
+  const activity = useStatus(space, Obj.getDXN(thread).toString());
   const threadScrollRef = useRef<HTMLDivElement | null>(null);
-  const { themeMode } = useThemeContext();
 
-  const textboxMetadata = getMessageMetadata(fullyQualifiedId(thread), identity);
+  const textboxMetadata = getMessageMetadata(Obj.getDXN(thread).toString(), identity);
+
   // TODO(wittjosiah): This is a hack to reset the editor after a message is sent.
-  const [_count, _setCount] = useState(0);
-  const rerenderEditor = () => _setCount((count) => count + 1);
+  const [state, setState] = useState({});
   const messageRef = useRef('');
   const extensions = useMemo(
     () => [
       createBasicExtensions({ placeholder: t('message placeholder') }),
       createThemeExtensions({ themeMode }),
-      listener({ onChange: (text) => (messageRef.current = text) }),
+      listener({ onChange: ({ text }) => (messageRef.current = text) }),
       command,
     ],
-    [_count],
+    [state],
   );
 
   // TODO(thure): Factor out.
@@ -75,6 +80,7 @@ export const CommentsThreadContainer = ({
   const handleResolve = useCallback(() => onResolve?.(anchor), [onResolve, anchor]);
   const handleMessageDelete = useCallback((id: string) => onMessageDelete?.(anchor, id), [onMessageDelete, anchor]);
   const handleThreadDelete = useCallback(() => onThreadDelete?.(anchor), [onThreadDelete, anchor]);
+  const handleAcceptProposal = useCallback((id: string) => onAcceptProposal?.(anchor, id), [onAcceptProposal, anchor]);
 
   const handleComment: MessageTextboxProps['onSend'] = useCallback(() => {
     if (!messageRef.current) {
@@ -84,15 +90,15 @@ export const CommentsThreadContainer = ({
     onComment?.(anchor, messageRef.current);
     messageRef.current = '';
     scrollToEnd('instant');
-    rerenderEditor();
+    setState({});
 
     return true;
   }, [anchor, identity]);
 
   return (
-    <Thread.Root
-      id={fullyQualifiedId(thread)}
-      classNames='pbs-2 border-be border-subduedSeparator last:border-none'
+    <ThreadComponent.Root
+      id={Obj.getDXN(thread).toString()}
+      classNames='pt-2 border-b border-subdued-separator last:border-none'
       current={current}
       onClickCapture={handleAttend}
       onFocusCapture={handleAttend}
@@ -100,19 +106,19 @@ export const CommentsThreadContainer = ({
       <div
         role='none'
         className={mx(
-          'col-span-2 grid grid-cols-[var(--rail-size)_1fr_min-content]',
+          'col-span-2 grid grid-cols-[var(--dx-rail-size)_1fr_min-content]',
           hoverableControls,
           hoverableFocusedWithinControls,
         )}
       >
         {detached ? (
           <Tooltip.Trigger asChild content={t('detached thread label')} side='top'>
-            <Thread.Header detached>{thread.name}</Thread.Header>
+            <ThreadComponent.Header detached>{thread.name}</ThreadComponent.Header>
           </Tooltip.Trigger>
         ) : (
-          <Thread.Header>{thread.name}</Thread.Header>
+          <ThreadComponent.Header>{thread.name}</ThreadComponent.Header>
         )}
-        <div className='flex flex-row items-center gap-0.5'>
+        <div role='none' className={buttonGroupClassNames}>
           {thread.status === 'staged' && <Tag palette='neutral'>{t('draft button')}</Tag>}
           {onResolve && !(thread?.status === 'staged') && (
             <IconButton
@@ -121,7 +127,7 @@ export const CommentsThreadContainer = ({
               icon={thread?.status === 'resolved' ? 'ph--check--fill' : 'ph--check--regular'}
               iconOnly
               label={t('resolve thread label')}
-              classNames={[commentControlClassNames, thread?.status !== 'resolved' && hoverableControlItem]}
+              classNames={[buttonClassNames, thread?.status !== 'resolved' && hoverableControlItem]}
               onClick={handleResolve}
             />
           )}
@@ -132,21 +138,21 @@ export const CommentsThreadContainer = ({
               icon='ph--x--regular'
               iconOnly
               label={t('delete thread label')}
-              classNames={[commentControlClassNames, hoverableControlItem]}
+              classNames={[buttonClassNames, hoverableControlItem]}
               onClick={handleThreadDelete}
             />
           )}
         </div>
       </div>
 
-      {/** TODO(dmaretskyi): How's `thread.messages` undefined? */}
-      {Ref.Array.targets(thread.messages?.filter(isNonNullable) ?? []).map((message) => (
-        <MessageContainer
-          key={message.id}
+      {messages?.map((ref) => (
+        <MessagePanel
+          key={ref.dxn.toString()}
           editable
-          message={message}
+          message={ref}
           members={members}
           onDelete={handleMessageDelete}
+          onAcceptProposal={handleAcceptProposal}
         />
       ))}
 
@@ -158,10 +164,9 @@ export const CommentsThreadContainer = ({
       */}
       <MessageTextbox extensions={extensions} onSend={handleComment} {...textboxMetadata} />
 
-      <Thread.Status activity={activity}>{t('activity message')}</Thread.Status>
+      <ThreadComponent.Status activity={activity}>{t('activity message')}</ThreadComponent.Status>
 
-      {/* NOTE(thure): This can’t also be the `overflow-anchor` because `ScrollArea` injects an interceding node that contains this necessary ref’d element. */}
-      <div role='none' className='bs-px -mbs-px' ref={threadScrollRef} />
-    </Thread.Root>
+      <div role='none' className='h-px -mt-px' ref={threadScrollRef} />
+    </ThreadComponent.Root>
   );
 };

package/src/components/CommentsPanel/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './CommentsPanel';
+export * from './CommentsThread';

package/src/components/Lobby/Lobby.tsx

@@ -2,17 +2,18 @@
 // Copyright 2024 DXOS.org
 //
 
+import { useAtomValue } from '@effect-atom/atom-react';
 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 { useCapability } from '@dxos/app-framework/ui';
+import { type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { mx } from '@dxos/ui-theme';
 
-import { ThreadCapabilities } from '../../capabilities';
 import { meta } from '../../meta';
+import { ThreadCapabilities } from '../../types';
 import { Toolbar, type ToolbarProps } from '../Call';
 import { VideoObject } from '../Media';
-import { ResponsiveContainer } from '../ResponsiveGrid';
+import { ResponsivePanel } from '../ResponsiveGrid';
 
 // TODO(wittjosiah): Repurpose lobby for preview.
 
@@ -39,9 +40,10 @@ type LobbyPreviewProps = {};
 const LobbyPreview: FC<LobbyPreviewProps> = () => {
   const { t } = useTranslation(meta.id);
   const call = useCapability(ThreadCapabilities.CallManager);
+  const media = useAtomValue(call.mediaAtom);
   const [classNames, setClassNames] = useState('');
   useEffect(() => {
-    if (!call.media.videoEnabled) {
+    if (!media.videoEnabled) {
       setClassNames('');
       return;
     }
@@ -52,14 +54,14 @@ const LobbyPreview: FC<LobbyPreviewProps> = () => {
     }, 500);
 
     return () => clearTimeout(timeout);
-  }, [call.media.videoEnabled]);
+  }, [media.videoEnabled]);
 
   return (
     <div className='grid grow p-4'>
-      <ResponsiveContainer>
-        {(call.media.videoEnabled && (
+      <ResponsivePanel>
+        {(media.videoEnabled && (
           <VideoObject
-            videoStream={call.media.videoStream}
+            videoStream={media.videoStream}
             flip
             muted
             classNames={mx(
@@ -68,7 +70,7 @@ const LobbyPreview: FC<LobbyPreviewProps> = () => {
             )}
           />
         )) || <div className='p-4 outline outline-separator rounded-md'>{t('camera off label')}</div>}
-      </ResponsiveContainer>
+      </ResponsivePanel>
     </div>
   );
 };

package/src/components/Media/AudioStream.tsx

@@ -46,13 +46,13 @@ export const AudioStream: FC<AudioStreamProps> = ({ tracks }) => {
   );
 };
 
-type AudioTrackProps = {
+type AudioTrackParams = {
   track: MediaStreamTrack;
   mediaStream: MediaStream;
   resetSrcObject: () => void;
 };
 
-const AudioTrack = ({ track, mediaStream, resetSrcObject }: AudioTrackProps) => {
+const AudioTrack = ({ track, mediaStream, resetSrcObject }: AudioTrackParams) => {
   useEffect(() => {
     const currentTrack = track;
     mediaStream.addTrack(currentTrack);