feat(modules.profile): add cameraSettings

packages/modules.calls/index.ts

@@ -1,6 +1,6 @@
 export { Call, CompactView, useModeSync, ModeSyncProvider } from './src';
 export { LiveKitProvider } from './src/providers/LiveKitProvider';
 export { RoomProvider } from './src/providers/RoomProvider';
-export { useCallStore } from './src/store/callStore';
-export { useStartCall } from './src/hooks';
-export { useUmamiActivityHeartbeat } from './src';
+export { useCallStore, usePermissionsStore } from './src/store';
+export { useStartCall, usePersistentUserChoices } from './src/hooks';
+export { useUmamiActivityHeartbeat, MediaDeviceMenu, UserTile } from './src';

packages/modules.calls/src/index.ts

@@ -1,4 +1,4 @@
-export { Call, CompactView } from './ui';
+export { Call, CompactView, MediaDeviceMenu, UserTile } from './ui';
 export { RoomProvider, LiveKitProvider, ModeSyncProvider } from './providers';
 export {
   useSize,
@@ -12,7 +12,8 @@ export {
   useSpeakingParticipant,
   useUmamiActivityHeartbeat,
   useNoiseCancellation,
+  usePersistentUserChoices,
   type UseNoiseCancellationOptions,
   type UseNoiseCancellationResult,
 } from './hooks';
-export { useCallStore } from './store';
+export { useCallStore, usePermissionsStore } from './store';

packages/modules.calls/src/store/index.ts

@@ -1 +1,2 @@
 export { useCallStore } from './callStore';
+export { usePermissionsStore } from './permissions';

packages/modules.calls/src/ui/PreJoin/components/MediaDevices/MediaDevices.tsx → packages/modules.calls/src/ui/MediaDevices/MediaDevices.tsx

@@ -1,18 +1,18 @@
 import { Button } from '@xipkg/button';
 import { MediaDeviceMenu } from './MediaDeviceMenu';
-import { usePersistentUserChoices } from '../../../../hooks/usePersistentUserChoices';
+import { usePersistentUserChoices } from '../../hooks/usePersistentUserChoices';
 import { useMemo } from 'react';
 import { LocalAudioTrack, LocalVideoTrack } from 'livekit-client';
-import { useCallStore } from '../../../../store/callStore';
-import { useRoom } from '../../../../providers/RoomProvider';
-import { usePermissionsStore } from '../../../../store/permissions';
+import { useCallStore } from '../../store/callStore';
+import { useRoom } from '../../providers/RoomProvider';
+import { usePermissionsStore } from '../../store/permissions';
 import { Alert, AlertIcon, AlertContainer, AlertDescription } from '@xipkg/alert';
 import { InfoCircle } from '@xipkg/icons';
 import { Label } from '@xipkg/label';
 import { Toggle } from '@xipkg/toggle';
 import { supportsBackgroundProcessors } from '@livekit/track-processors';
-import type { UseNoiseCancellationResult } from '../../../../hooks/useNoiseCancellation';
-import { NoiseCancellationSettings } from '../../../../ui/shared/NoiseCancellationSettings';
+import type { UseNoiseCancellationResult } from '../../hooks/useNoiseCancellation';
+import { NoiseCancellationSettings } from '../shared/NoiseCancellationSettings';
 
 interface MediaDevicesProps {
   audioTrack?: LocalAudioTrack;

packages/modules.calls/src/ui/MediaDevices/index.ts

@@ -0,0 +1,2 @@
+export { MediaDevices } from './MediaDevices';
+export { MediaDeviceMenu } from './MediaDeviceMenu';

packages/modules.calls/src/ui/PreJoin/PreJoin.tsx

@@ -1,5 +1,7 @@
 import { ScrollArea } from '@xipkg/scrollarea';
-import { Header, UserTile, MediaDevices } from './components';
+import { Header } from './components';
+import { UserTile } from '../UserTile';
+import { MediaDevices } from '../MediaDevices';
 import { useMemo, useRef, useEffect, useCallback, useState } from 'react';
 import {
   Track,

packages/modules.calls/src/ui/PreJoin/components/index.ts

@@ -1,3 +1 @@
 export { Header } from './Header/Header';
-export { UserTile } from './UserTile/UserTile';
-export { MediaDevices } from './MediaDevices/MediaDevices';

packages/modules.calls/src/ui/PreJoin/components/UserTile/Controls.tsx → packages/modules.calls/src/ui/UserTile/Controls.tsx

@@ -1,15 +1,16 @@
 import { LocalAudioTrack, LocalVideoTrack, Track } from 'livekit-client';
 import { useCallback, useMemo } from 'react';
 
-import { DevicesBar } from '../../../shared/DevicesBar';
-import { usePersistentUserChoices } from '../../../../hooks/usePersistentUserChoices';
+import { DevicesBar } from '../shared/DevicesBar';
+import { usePersistentUserChoices } from '../../hooks/usePersistentUserChoices';
 
 type ControlsProps = {
   audioTrack?: LocalAudioTrack;
   videoTrack?: LocalVideoTrack;
+  disableMicroToggle?: boolean;
 };
 
-export const Controls = ({ audioTrack, videoTrack }: ControlsProps) => {
+export const Controls = ({ audioTrack, videoTrack, disableMicroToggle = false }: ControlsProps) => {
   const {
     userChoices: { audioEnabled, videoEnabled },
     saveAudioInputEnabled,
@@ -83,11 +84,11 @@ export const Controls = ({ audioTrack, videoTrack }: ControlsProps) => {
   );
 
   return (
-    <div className="bg-gray-0 border-gray-10 flex h-[48px] w-[92px] items-center justify-center gap-1 rounded-[16px] border">
+    <div className="bg-gray-0 border-gray-10 flex h-[48px] items-center justify-center gap-1 rounded-[16px] border px-1">
       <DevicesBar
         microTrack={audioTrack}
         microEnabled={audioEnabled}
-        microTrackToggle={microTrackToggle}
+        microTrackToggle={disableMicroToggle ? undefined : microTrackToggle}
         videoTrack={videoTrack}
         videoEnabled={videoEnabled}
         videoTrackToggle={videoTrackToggle}

packages/modules.calls/src/ui/UserTile/UserTile.tsx

@@ -0,0 +1,143 @@
+import { useMemo, useRef, useEffect, useState } from 'react';
+import { facingModeFromLocalTrack, LocalVideoTrack, LocalAudioTrack } from 'livekit-client';
+import { useCurrentUser } from 'common.services';
+import { usePersistentUserChoices } from '../../hooks/usePersistentUserChoices';
+import { useCannotUseDevice } from '../../hooks/useCannotUseDevice';
+import { UserTileUI } from './UserTileUI';
+
+interface UserTileProps {
+  audioTrack?: LocalAudioTrack;
+  videoTrack?: LocalVideoTrack;
+  disableMicroToggle?: boolean;
+}
+
+export const UserTile = ({ audioTrack, videoTrack, disableMicroToggle = false }: UserTileProps) => {
+  const { data: user } = useCurrentUser();
+  const { userId } = user;
+
+  const {
+    userChoices: { videoEnabled },
+  } = usePersistentUserChoices();
+
+  const videoEl = useRef<HTMLVideoElement>(null);
+  const [isVideoInitiated, setIsVideoInitiated] = useState(false);
+
+  // Проверяем состояние разрешений
+  const isCameraDeniedOrPrompted = useCannotUseDevice('videoinput');
+  const isMicrophoneDeniedOrPrompted = useCannotUseDevice('audioinput');
+
+  const facingMode = useMemo(() => {
+    if (videoTrack) {
+      const { facingMode } = facingModeFromLocalTrack(videoTrack);
+      return facingMode;
+    }
+    return 'undefined';
+  }, [videoTrack]);
+
+  // Сбрасываем isVideoInitiated только при изменении videoEnabled на false
+  useEffect(() => {
+    if (!videoEnabled) {
+      console.log('UserTile: video disabled, setting isVideoInitiated to false');
+      setIsVideoInitiated(false);
+    }
+    // Не устанавливаем true здесь, так как это делается в обработчиках событий трека
+  }, [videoEnabled]);
+
+  // Отслеживаем изменение состояния muted трека
+  useEffect(() => {
+    if (videoTrack) {
+      const handleTrackMuted = () => {
+        console.log('UserTile: track muted, setting isVideoInitiated to false');
+        setIsVideoInitiated(false);
+      };
+
+      const handleTrackUnmuted = () => {
+        // Устанавливаем true только если videoEnabled тоже true
+        if (videoEnabled) {
+          console.log(
+            'UserTile: track unmuted and video enabled, setting isVideoInitiated to true',
+          );
+          setIsVideoInitiated(true);
+          // Трек уже прикреплен к элементу, просто обновляем opacity через стили
+        } else {
+          console.log('UserTile: track unmuted but video disabled, keeping isVideoInitiated false');
+        }
+      };
+
+      videoTrack.on('muted', handleTrackMuted);
+      videoTrack.on('unmuted', handleTrackUnmuted);
+
+      return () => {
+        videoTrack.off('muted', handleTrackMuted);
+        videoTrack.off('unmuted', handleTrackUnmuted);
+      };
+    }
+  }, [videoTrack, videoEnabled]);
+
+  // Прикрепляем видео трек к элементу с улучшенной обработкой
+  useEffect(() => {
+    const currentVideoEl = videoEl.current;
+    const currentVideoTrack = videoTrack;
+
+    const handleVideoLoaded = () => {
+      if (currentVideoEl && videoEnabled) {
+        console.log('UserTile: video loaded and enabled, setting isVideoInitiated to true');
+        setIsVideoInitiated(true);
+        currentVideoEl.style.opacity = '1';
+      } else if (currentVideoEl) {
+        console.log('UserTile: video loaded but disabled, keeping isVideoInitiated false');
+        currentVideoEl.style.opacity = '0';
+      }
+    };
+
+    const handleVideoError = () => {
+      console.error('Video track error');
+      setIsVideoInitiated(false);
+    };
+
+    if (currentVideoEl && currentVideoTrack && videoEnabled) {
+      console.log('UserTile: attaching video track', {
+        videoEnabled,
+        isMuted: currentVideoTrack.isMuted,
+        hasElement: !!currentVideoEl,
+      });
+      currentVideoTrack.attach(currentVideoEl);
+      currentVideoEl.addEventListener('loadedmetadata', handleVideoLoaded);
+      currentVideoEl.addEventListener('error', handleVideoError);
+    } else {
+      console.log('UserTile: not attaching video track', {
+        hasElement: !!currentVideoEl,
+        hasTrack: !!currentVideoTrack,
+        videoEnabled,
+        isMuted: currentVideoTrack?.isMuted,
+      });
+    }
+
+    return () => {
+      if (currentVideoTrack) {
+        currentVideoTrack.detach();
+      }
+      if (currentVideoEl) {
+        currentVideoEl.removeEventListener('loadedmetadata', handleVideoLoaded);
+        currentVideoEl.removeEventListener('error', handleVideoError);
+        currentVideoEl.style.opacity = '0';
+      }
+      // Не сбрасываем isVideoInitiated здесь, так как это может происходить при переподключении
+    };
+  }, [videoTrack, videoEnabled]);
+
+  return (
+    <UserTileUI
+      audioTrack={audioTrack}
+      videoTrack={videoTrack}
+      videoEnabled={videoEnabled}
+      facingMode={facingMode}
+      videoEl={videoEl}
+      userId={userId || 'unknown'}
+      isCameraDeniedOrPrompted={isCameraDeniedOrPrompted}
+      isMicrophoneDeniedOrPrompted={isMicrophoneDeniedOrPrompted}
+      isVideoInitiated={isVideoInitiated}
+      disableMicroToggle={disableMicroToggle}
+    />
+  );
+};