fix: Missing "Open in room" button on widget's shared screen

.changeset/little-cars-love.md

@@ -0,0 +1,6 @@
+---
+"@rocket.chat/i18n": minor
+"@rocket.chat/ui-voip": minor
+---
+
+Adds "Open in room" button to shared screen card on voice call widget

packages/i18n/src/locales/en.i18n.json

@@ -4055,6 +4055,7 @@
   "Open_conversations": "Open Conversations",
   "Open_days_of_the_week": "Open Days of the Week",
   "Open_directory": "Open directory",
+  "Open_in_room": "Open in room",
   "Open_settings": "Open settings",
   "Open_sidebar": "Open sidebar",
   "Open_thread": "Open Thread",

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

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 
 import Card from '../Card';
+import StreamCardOpenInRoomButton from './StreamCardOpenInRoom';
 import StreamCardPin from './StreamCardPin';
 import StreamCardStopSharingButton from './StreamCardStopSharingButton';
 
@@ -9,6 +10,7 @@ type StreamCardProps = {
 	own?: boolean;
 	onClickFocusStream?: () => void;
 	onClickStopSharing?: () => void;
+	onClickOpenInRoom?: () => void;
 	focused?: boolean;
 	autoHeight?: boolean;
 	maxHeight?: number;
@@ -27,6 +29,7 @@ const StreamCard = ({
 	own,
 	onClickFocusStream,
 	onClickStopSharing,
+	onClickOpenInRoom,
 	focused,
 	autoHeight,
 	maxHeight,
@@ -42,6 +45,7 @@ const StreamCard = ({
 		>
 			{onClickFocusStream && <StreamCardPin focused={focused} onClick={onClickFocusStream} position='bottomRight' />}
 			{own && onClickStopSharing && <StreamCardStopSharingButton onClick={onClickStopSharing} showOnHover={showStopSharingOnHover} />}
+			{onClickOpenInRoom && <StreamCardOpenInRoomButton onClick={onClickOpenInRoom} showOnHover={true} />}
 			{children}
 		</Card>
 	);

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';
+
+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/views/MediaCallWidget/OngoingCallWithScreen.tsx

@@ -66,7 +66,7 @@ const OngoingCall = () => {
 					<PeerInfo {...peerInfo} slots={remoteSlots} remoteMuted={remoteMuted} />
 
 					{remoteScreen?.active && (
-						<StreamCard autoHeight maxHeight={120}>
+						<StreamCard autoHeight maxHeight={120} onClickOpenInRoom={onClickDirectMessage}>
 							<video preload='metadata' style={{ objectFit: 'contain', height: '100%', width: '100%' }} ref={remoteStreamRefCallback}>
 								<track kind='captions' />
 							</video>