♻️(frontend) package checks in useHasTranscriptAccess hook

This hook will be used by the toggle and the sidepanel to make
sure the users have sufficient permissions to access the transcript
features.

src/frontend/src/features/rooms/livekit/components/controls/TranscriptToggle.tsx

@@ -1,11 +1,9 @@
 import { ToggleButton } from '@/primitives'
 import { RiBardLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
+import { useSidePanel } from '../../hooks/useSidePanel'
+import { useHasTranscriptAccess } from '../../hooks/useHasTranscriptAccess'
 import { css } from '@/styled-system/css'
-import { useFeatureFlagEnabled } from 'posthog-js/react'
-import { useIsAnalyticsEnabled } from '@/features/analytics/hooks/useIsAnalyticsEnabled'
-import { useIsTranscriptEnabled } from '@/features/rooms/livekit/hooks/useIsTranscriptEnabled'
 
 export const TranscriptToggle = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'controls.transcript' })
@@ -13,12 +11,9 @@ export const TranscriptToggle = () => {
   const { isTranscriptOpen, toggleTranscript } = useSidePanel()
   const tooltipLabel = isTranscriptOpen ? 'open' : 'closed'
 
-  const featureEnabled = useFeatureFlagEnabled('transcription-summary')
-  const isAnalyticsEnabled = useIsAnalyticsEnabled()
-  const isTranscriptEnabled = useIsTranscriptEnabled()
+  const hasTranscriptAccess = useHasTranscriptAccess()
 
-  if (!featureEnabled && isAnalyticsEnabled) return
-  if (!isTranscriptEnabled) return
+  if (!hasTranscriptAccess) return
 
   return (
     <div

src/frontend/src/features/rooms/livekit/hooks/useHasTranscriptAccess.ts

@@ -0,0 +1,17 @@
+import { useFeatureFlagEnabled } from 'posthog-js/react'
+import { useIsAnalyticsEnabled } from '@/features/analytics/hooks/useIsAnalyticsEnabled'
+import { useIsTranscriptEnabled } from './useIsTranscriptEnabled'
+import { useIsAdminOrOwner } from './useIsAdminOrOwner'
+
+export const useHasTranscriptAccess = () => {
+  const featureEnabled = useFeatureFlagEnabled('transcription-summary')
+  const isAnalyticsEnabled = useIsAnalyticsEnabled()
+  const isTranscriptEnabled = useIsTranscriptEnabled()
+  const isAdminOrOwner = useIsAdminOrOwner()
+
+  return (
+    (featureEnabled || !isAnalyticsEnabled) &&
+    isAdminOrOwner &&
+    isTranscriptEnabled
+  )
+}

src/frontend/src/features/rooms/livekit/hooks/useIsAdminOrOwner.ts

@@ -0,0 +1,6 @@
+import { useRoomData } from './useRoomData'
+
+export const useIsAdminOrOwner = () => {
+  const apiRoomData = useRoomData()
+  return apiRoomData?.is_administrable
+}