feat: add fullscreen btn to make dom full screen

server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/components/FullScreenBtn.tsx

@@ -0,0 +1,32 @@
+import { Icon } from '@capital/component';
+import React from 'react';
+import styled from 'styled-components';
+
+const Root = styled.div.attrs({
+  className: 'lk-button',
+})`
+  position: absolute;
+  top: 0.25rem;
+  right: 2.25rem;
+  padding: 0.125rem;
+  font-size: 20px;
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: calc(var(--lk-border-radius) / 2);
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+  transition-delay: 0.2s;
+
+  .lk-participant-tile:hover & {
+    opacity: 1;
+  }
+`;
+
+export const FullScreenBtn: React.FC<React.HTMLAttributes<HTMLDivElement>> =
+  React.memo((props) => {
+    return (
+      <Root {...props}>
+        <Icon icon="mdi:fullscreen" />
+      </Root>
+    );
+  });
+FullScreenBtn.displayName = 'FullScreenBtn';

server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/components/lib/FocusLayout.tsx

@@ -0,0 +1,10 @@
+import type { FocusLayoutProps } from '@livekit/components-react';
+import React from 'react';
+import { ParticipantTile } from './ParticipantTile';
+
+export const FocusLayout: React.FC<FocusLayoutProps> = React.memo(
+  ({ track, ...htmlProps }) => {
+    return <ParticipantTile {...track} {...htmlProps} />;
+  }
+);
+FocusLayout.displayName = 'FocusLayout';

server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/components/lib/ParticipantTile.tsx

@@ -35,6 +35,8 @@ import { ScreenShareIcon } from './icons/ScreenShareIcon';
 import { useSize } from '../../utils/useResizeObserver';
 import { Translate } from '../../translate';
 import { useMemo } from 'react';
+import { FullScreenBtn } from '../FullScreenBtn';
+import { useEvent } from '@capital/common';
 
 /** @public */
 export type ParticipantTileProps = React.HTMLAttributes<HTMLDivElement> & {
@@ -176,6 +178,16 @@ export const ParticipantTile = ({
     [trackRef.participant, layoutContext, trackRef.source]
   );
 
+  const handleFullScreen = useEvent(() => {
+    if (containerEl.current) {
+      if (checkIsFullscreen()) {
+        document.exitFullscreen();
+      } else {
+        containerEl.current.requestFullscreen();
+      }
+    }
+  });
+
   const { width, height } = useSize(containerEl);
   const avatarSize = useMemo(() => {
     const min = Math.min(width, height);
@@ -237,8 +249,21 @@ export const ParticipantTile = ({
             </div>
           </>
         )}
+
         <FocusToggle trackSource={trackRef.source} />
+
+        <FullScreenBtn onClick={handleFullScreen} />
       </ParticipantContextIfNeeded>
     </div>
   );
 };
+
+function checkIsFullscreen(): boolean {
+  return (
+    document.fullscreenElement ||
+    (document as any).msFullscreenElement ||
+    (document as any).mozFullScreenElement ||
+    (document as any).webkitFullscreenElement ||
+    false
+  );
+}

server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/components/lib/VideoConference.tsx

@@ -14,7 +14,6 @@ import { RoomEvent, Track } from 'livekit-client';
 import type { TrackReferenceOrPlaceholder } from '@livekit/components-core';
 import {
   ConnectionStateToast,
-  FocusLayout,
   FocusLayoutContainer,
   GridLayout,
   LayoutContextProvider,
@@ -28,6 +27,7 @@ import { ParticipantTile } from './ParticipantTile';
 import { CarouselLayout } from './CarouselLayout';
 import { ControlBar } from './ControlBar';
 import { Chat } from './Chat';
+import { FocusLayout } from './FocusLayout';
 
 /**
  * @public
@@ -137,6 +137,7 @@ export const VideoConference: React.FC<VideoConferenceProps> = React.memo(
                     <CarouselLayout tracks={carouselTracks}>
                       <ParticipantTile />
                     </CarouselLayout>
+
                     {focusTrack && <FocusLayout track={focusTrack} />}
                   </FocusLayoutContainer>
                 </div>