feat: add keep alive overlay for livekit view

client/web/src/plugin/component/index.tsx

@@ -77,3 +77,4 @@ export {
 } from '@/components/JumpToButton';
 export { NoData } from '@/components/NoData';
 export { NotFound } from '@/components/NotFound';
+export { withKeepAliveOverlay } from '@/components/KeepAliveOverlay/withKeepAliveOverlay';

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

@@ -1,4 +1,5 @@
 import { showErrorToasts, useEvent } from '@capital/common';
+import { withKeepAliveOverlay } from '@capital/component';
 import React, { useState } from 'react';
 import type { LocalUserChoices } from '@livekit/components-react';
 import { PreJoinView } from './lib/PreJoinView';
@@ -10,7 +11,7 @@ interface LivekitViewProps {
   roomName: string;
   url: string;
 }
-export const LivekitView: React.FC<LivekitViewProps> = React.memo((props) => {
+const _LivekitView: React.FC<LivekitViewProps> = React.memo((props) => {
   const [preJoinChoices, setPreJoinChoices] = useState<
     LocalUserChoices | undefined
   >(undefined);
@@ -54,4 +55,8 @@ export const LivekitView: React.FC<LivekitViewProps> = React.memo((props) => {
     </LivekitContainer>
   );
 });
-LivekitView.displayName = 'LivekitView';
+_LivekitView.displayName = 'LivekitView';
+
+export const LivekitView = withKeepAliveOverlay(_LivekitView, {
+  cacheId: (props) => props.url,
+});

server/plugins/com.msgbyte.livekit/web/plugins/com.msgbyte.livekit/src/group/LivekitPanel.tsx

@@ -10,7 +10,11 @@ export const LivekitGroupPanel: React.FC = React.memo(() => {
 
   return (
     <GroupPanelContainer groupId={groupId} panelId={panelId}>
-      <LivekitView roomName={roomName} url={url} />
+      <LivekitView
+        style={{ width: '100%', height: '100%' }}
+        roomName={roomName}
+        url={url}
+      />
     </GroupPanelContainer>
   );
 });