diff --git a/src/frontend/src/features/recording/hooks/useIsRecordingActive.ts b/src/frontend/src/features/recording/hooks/useIsRecordingActive.ts new file mode 100644 index 00000000..b4fefeec --- /dev/null +++ b/src/frontend/src/features/recording/hooks/useIsRecordingActive.ts @@ -0,0 +1,22 @@ +import { useSnapshot } from 'valtio' +import { RecordingStatus, recordingStore } from '@/stores/recording' +import { RecordingMode } from '@/features/recording' + +export const useIsRecordingActive = (mode: RecordingMode) => { + const recordingSnap = useSnapshot(recordingStore) + + switch (mode) { + case RecordingMode.Transcript: + return [ + RecordingStatus.TRANSCRIPT_STARTED, + RecordingStatus.TRANSCRIPT_STARTING, + RecordingStatus.TRANSCRIPT_STOPPING, + ].includes(recordingSnap.status) + case RecordingMode.ScreenRecording: + return [ + RecordingStatus.SCREEN_RECORDING_STARTED, + RecordingStatus.SCREEN_RECORDING_STARTING, + RecordingStatus.SCREEN_RECORDING_STOPPING, + ].includes(recordingSnap.status) + } +} diff --git a/src/frontend/src/features/recording/index.ts b/src/frontend/src/features/recording/index.ts index d83f9ab2..b2c29a0e 100644 --- a/src/frontend/src/features/recording/index.ts +++ b/src/frontend/src/features/recording/index.ts @@ -2,6 +2,7 @@ export { useIsRecordingModeEnabled } from './hooks/useIsRecordingModeEnabled' export { useIsRecordingTransitioning } from './hooks/useIsRecordingTransitioning' export { useHasRecordingAccess } from './hooks/useHasRecordingAccess' +export { useIsRecordingActive } from './hooks/useIsRecordingActive' // api export { useStartRecording } from './api/startRecording' diff --git a/src/frontend/src/features/rooms/livekit/components/Tools.tsx b/src/frontend/src/features/rooms/livekit/components/Tools.tsx index 194e5fb6..ea0f8dae 100644 --- a/src/frontend/src/features/rooms/livekit/components/Tools.tsx +++ b/src/frontend/src/features/rooms/livekit/components/Tools.tsx @@ -10,10 +10,9 @@ import { useIsRecordingModeEnabled, RecordingMode, useHasRecordingAccess, -} from '@/features/recording' -import { TranscriptSidePanel, ScreenRecordingSidePanel, + useIsRecordingActive, } from '@/features/recording' import { FeatureFlags } from '@/features/analytics/enums' @@ -23,6 +22,7 @@ export interface ToolsButtonProps { description: string onPress: () => void isBetaFeature?: boolean + isActive?: boolean } const ToolButton = ({ @@ -31,6 +31,7 @@ const ToolButton = ({ description, onPress, isBetaFeature = false, + isActive = false, }: ToolsButtonProps) => { return (
- + {title} + {isActive && ( +
+ )} {description} @@ -100,15 +116,22 @@ export const Tools = () => { const { openTranscript, openScreenRecording, activeSubPanelId } = useSidePanel() const { t } = useTranslation('rooms', { keyPrefix: 'moreTools' }) + const isTranscriptEnabled = useIsRecordingModeEnabled( RecordingMode.Transcript ) + const isTranscriptActive = useIsRecordingActive(RecordingMode.Transcript) + const hasScreenRecordingAccess = useHasRecordingAccess( RecordingMode.ScreenRecording, FeatureFlags.ScreenRecording ) + const isScreenRecordingActive = useIsRecordingActive( + RecordingMode.ScreenRecording + ) + switch (activeSubPanelId) { case SubPanelId.TRANSCRIPT: return @@ -149,6 +172,7 @@ export const Tools = () => { description={t('tools.transcript.body')} onPress={() => openTranscript()} isBetaFeature + isActive={isTranscriptActive} /> )} {hasScreenRecordingAccess && ( @@ -158,6 +182,7 @@ export const Tools = () => { description={t('tools.screenRecording.body')} onPress={() => openScreenRecording()} isBetaFeature + isActive={isScreenRecordingActive} /> )}