diff --git a/src/frontend/src/features/pip/components/DocumentPiPPortal.tsx b/src/frontend/src/features/pip/components/DocumentPiPPortal.tsx index 793e18fd..0fba10ec 100644 --- a/src/frontend/src/features/pip/components/DocumentPiPPortal.tsx +++ b/src/frontend/src/features/pip/components/DocumentPiPPortal.tsx @@ -36,6 +36,8 @@ const syncThemeAttribute = (source: Document, target: Document) => { const theme = source.documentElement.getAttribute('data-lk-theme') if (theme) { target.documentElement.setAttribute('data-lk-theme', theme) + } else { + target.documentElement.removeAttribute('data-lk-theme') } } diff --git a/src/frontend/src/features/pip/components/notifications/PipConnectionStateToast.tsx b/src/frontend/src/features/pip/components/notifications/PipConnectionStateToast.tsx index 9067c906..05a9cc54 100644 --- a/src/frontend/src/features/pip/components/notifications/PipConnectionStateToast.tsx +++ b/src/frontend/src/features/pip/components/notifications/PipConnectionStateToast.tsx @@ -16,12 +16,11 @@ export const PipConnectionStateToast = () => { keyPrefix: 'options.items.pictureInPicture.connection', }) - const label = - state === ConnectionState.Reconnecting - ? t('reconnecting') - : state === ConnectionState.Disconnected - ? t('disconnected') - : null + const connectionLabels: Partial> = { + [ConnectionState.Reconnecting]: t('reconnecting'), + [ConnectionState.Disconnected]: t('disconnected'), + } + const label = connectionLabels[state] ?? null if (!label) return null diff --git a/src/frontend/src/features/pip/hooks/useDocumentPiP.ts b/src/frontend/src/features/pip/hooks/useDocumentPiP.ts index fabead4b..e349a262 100644 --- a/src/frontend/src/features/pip/hooks/useDocumentPiP.ts +++ b/src/frontend/src/features/pip/hooks/useDocumentPiP.ts @@ -23,8 +23,8 @@ export const useDocumentPiP = ({ const pendingPiPRef = useRef | null>(null) const [isSupported] = useState(() => { - if (typeof window === 'undefined') return false - return 'documentPictureInPicture' in window + if (typeof globalThis === 'undefined') return false + return 'documentPictureInPicture' in globalThis }) const openPiP = useCallback(async () => { @@ -35,7 +35,8 @@ export const useDocumentPiP = ({ if (pendingPiPRef.current) return pendingPiPRef.current // Request a new PiP window from the browser API. - const pip = (window as WindowWithDocumentPiP).documentPictureInPicture + const pip = (globalThis as unknown as WindowWithDocumentPiP) + .documentPictureInPicture if (!pip) return null const requestPromise = (async () => { diff --git a/src/frontend/src/features/pip/hooks/usePipElementSize.ts b/src/frontend/src/features/pip/hooks/usePipElementSize.ts index 7008085c..f37042de 100644 --- a/src/frontend/src/features/pip/hooks/usePipElementSize.ts +++ b/src/frontend/src/features/pip/hooks/usePipElementSize.ts @@ -25,7 +25,7 @@ export const usePipElementSize = ( measure() const RO = - el.ownerDocument.defaultView?.ResizeObserver ?? window.ResizeObserver + el.ownerDocument.defaultView?.ResizeObserver ?? globalThis.ResizeObserver if (!RO) return const observer = new RO((entries) => { diff --git a/src/frontend/src/features/pip/hooks/useRoomPiP.tsx b/src/frontend/src/features/pip/hooks/useRoomPiP.tsx index 75880a37..f4b3094f 100644 --- a/src/frontend/src/features/pip/hooks/useRoomPiP.tsx +++ b/src/frontend/src/features/pip/hooks/useRoomPiP.tsx @@ -5,7 +5,7 @@ import { roomPiPStore } from '@/stores/roomPiP' export const useRoomPiP = () => { const { isOpen } = useSnapshot(roomPiPStore) const isSupported = - typeof window !== 'undefined' && 'documentPictureInPicture' in window + typeof globalThis !== 'undefined' && 'documentPictureInPicture' in globalThis const open = useCallback(() => { roomPiPStore.isOpen = true diff --git a/src/frontend/src/features/rooms/livekit/hooks/useSidePanel.ts b/src/frontend/src/features/rooms/livekit/hooks/useSidePanel.ts index c4bebb8f..8d1203bd 100644 --- a/src/frontend/src/features/rooms/livekit/hooks/useSidePanel.ts +++ b/src/frontend/src/features/rooms/livekit/hooks/useSidePanel.ts @@ -2,7 +2,7 @@ import { useSnapshot } from 'valtio' import { layoutStore } from '@/stores/layout' import { PanelId, SubPanelId } from '../types/panel' -export { PanelId, SubPanelId } +export { PanelId, SubPanelId } from '../types/panel' export type SidePanelStore = { activePanelId: PanelId | null