snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

packages/ui-voip/src/components/Cards/StreamCard/StreamCard.tsx

@@ -0,0 +1,54 @@
+import type { ReactNode } from 'react';
+
+import Card from '../Card';
+import StreamCardOpenInRoomButton from './StreamCardOpenInRoom';
+import StreamCardPin from './StreamCardPin';
+import StreamCardStopSharingButton from './StreamCardStopSharingButton';
+
+export type StreamCardProps = {
+	children: ReactNode;
+	own?: boolean;
+	onClickFocusStream?: () => void;
+	onClickStopSharing?: () => void;
+	onClickOpenInRoom?: () => void;
+	focused?: boolean;
+	autoHeight?: boolean;
+	maxHeight?: number;
+	showStopSharingOnHover?: boolean;
+};
+
+const alternateSizeProps = {
+	maxWidth: '100%',
+	maxHeight: '100%',
+	height: undefined,
+	width: undefined,
+};
+
+const StreamCard = ({
+	children,
+	own,
+	onClickFocusStream,
+	onClickStopSharing,
+	onClickOpenInRoom,
+	focused,
+	autoHeight,
+	maxHeight,
+	showStopSharingOnHover = false,
+}: StreamCardProps) => {
+	return (
+		<Card
+			variant={own ? 'highlighted' : 'default'}
+			{...(focused ? alternateSizeProps : {})}
+			height={focused || autoHeight ? 'fit-content' : undefined}
+			minHeight={autoHeight ? 0 : undefined}
+			maxHeight={maxHeight || '100%'}
+		>
+			{onClickFocusStream && <StreamCardPin focused={focused} onClick={onClickFocusStream} position='bottomRight' />}
+			{own && onClickStopSharing && <StreamCardStopSharingButton onClick={onClickStopSharing} showOnHover={showStopSharingOnHover} />}
+			{onClickOpenInRoom && <StreamCardOpenInRoomButton onClick={onClickOpenInRoom} showOnHover={true} />}
+			{children}
+		</Card>
+	);
+};
+
+export default StreamCard;

packages/ui-voip/src/components/Cards/StreamCard/StreamCardOpenInRoom.tsx

@@ -0,0 +1,22 @@
+import { Button } from '@rocket.chat/fuselage';
+import { useTranslation } from 'react-i18next';
+
+import CardSlotContainer from '../CardSlot';
+
+export type StreamCardOpenInRoomButtonProps = {
+	onClick: () => void;
+	showOnHover?: boolean;
+};
+
+const StreamCardOpenInRoomButton = ({ onClick, showOnHover = false }: StreamCardOpenInRoomButtonProps) => {
+	const { t } = useTranslation();
+	return (
+		<CardSlotContainer position='middle' variant='transparent' showOnHover={showOnHover} margin={0}>
+			<Button primary small icon='arrow-expand' onClick={onClick}>
+				{t('Open_in_room')}
+			</Button>
+		</CardSlotContainer>
+	);
+};
+
+export default StreamCardOpenInRoomButton;

packages/ui-voip/src/components/Cards/StreamCard/StreamCardPin.tsx

@@ -0,0 +1,22 @@
+import { IconButton } from '@rocket.chat/fuselage';
+import { useTranslation } from 'react-i18next';
+
+import CardSlotContainer from '../CardSlot';
+import type { SlotPosition } from '../CardSlot';
+
+export type CardSlotPinProps = {
+	onClick: () => void;
+	focused?: boolean;
+	position?: SlotPosition;
+};
+
+const CardSlotPin = ({ focused, onClick, position = 'bottomRight' }: CardSlotPinProps) => {
+	const { t } = useTranslation();
+	return (
+		<CardSlotContainer position={position} variant='transparent'>
+			<IconButton tiny secondary={true} icon={focused ? 'pin-filled' : 'pin'} onClick={onClick} title={focused ? t('Unpin') : t('Pin')} />
+		</CardSlotContainer>
+	);
+};
+
+export default CardSlotPin;

packages/ui-voip/src/components/Cards/StreamCard/StreamCardStopSharingButton.tsx

@@ -0,0 +1,22 @@
+import { Button } from '@rocket.chat/fuselage';
+import { useTranslation } from 'react-i18next';
+
+import CardSlotContainer from '../CardSlot';
+
+export type CardSlotStopSharingProps = {
+	onClick: () => void;
+	showOnHover?: boolean;
+};
+
+const CardSlotStopSharing = ({ onClick, showOnHover = false }: CardSlotStopSharingProps) => {
+	const { t } = useTranslation();
+	return (
+		<CardSlotContainer position='middle' variant='transparent' showOnHover={showOnHover} margin={0}>
+			<Button danger small icon='desktop-cross' onClick={onClick}>
+				{t('Stop_sharing')}
+			</Button>
+		</CardSlotContainer>
+	);
+};
+
+export default CardSlotStopSharing;

packages/ui-voip/src/components/Cards/StreamCard/index.ts

@@ -0,0 +1,3 @@
+export { default as StreamCard } from './StreamCard';
+export { default as StreamCardPin } from './StreamCardPin';
+export { default as StreamCardStopSharingButton } from './StreamCardStopSharingButton';