From 2f1d102b44d6e668582ff82f67ab6f67c42c8f7b Mon Sep 17 00:00:00 2001 From: Cyril Date: Wed, 21 Jan 2026 09:32:11 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=90(i18n)=20add=20PiP=20labels=20for?= =?UTF-8?q?=20each=20supported=20language?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit add labels for PiP in each supported language --- .../features/rooms/livekit/components/DocumentPiPPortal.tsx | 3 +++ .../src/features/rooms/livekit/components/PipView.tsx | 3 +++ .../src/features/rooms/livekit/hooks/useDocumentPiP.ts | 1 + src/frontend/src/locales/de/rooms.json | 4 ++++ src/frontend/src/locales/en/rooms.json | 4 ++++ src/frontend/src/locales/fr/rooms.json | 4 ++++ src/frontend/src/locales/nl/rooms.json | 4 ++++ 7 files changed, 23 insertions(+) diff --git a/src/frontend/src/features/rooms/livekit/components/DocumentPiPPortal.tsx b/src/frontend/src/features/rooms/livekit/components/DocumentPiPPortal.tsx index f40d604e..ce1e8f08 100644 --- a/src/frontend/src/features/rooms/livekit/components/DocumentPiPPortal.tsx +++ b/src/frontend/src/features/rooms/livekit/components/DocumentPiPPortal.tsx @@ -2,6 +2,7 @@ import { useEffect, useMemo, useRef, useState } from 'react' import { createPortal } from 'react-dom' import { useDocumentPiP } from '../hooks/useDocumentPiP' +// Minimal base styles so the PiP window renders correctly on first paint. const ensureBaseStyles = (target: Document) => { if (target.getElementById('pip-base-styles')) return const style = target.createElement('style') @@ -13,6 +14,7 @@ const ensureBaseStyles = (target: Document) => { target.head.appendChild(style) } +// Clone existing styles to keep the PiP window visually consistent. const copyStyles = (source: Document, target: Document) => { if (target.getElementById('pip-style-clone')) return const marker = target.createElement('meta') @@ -81,6 +83,7 @@ export const DocumentPiPPortal = ({ useEffect(() => { if (!pipWindow) return const handleClose = () => { + // Reset container so reopening PiP mounts a fresh root. containerRef.current = null setContainer(null) onClose?.() diff --git a/src/frontend/src/features/rooms/livekit/components/PipView.tsx b/src/frontend/src/features/rooms/livekit/components/PipView.tsx index 23213ce4..05610b6f 100644 --- a/src/frontend/src/features/rooms/livekit/components/PipView.tsx +++ b/src/frontend/src/features/rooms/livekit/components/PipView.tsx @@ -15,6 +15,7 @@ import { ParticipantTile } from './ParticipantTile' const pickTrackForPip = ( tracks: TrackReferenceOrPlaceholder[] ): TrackReferenceOrPlaceholder | undefined => { + // Prefer screen share when present; otherwise fallback to first available track. const screenShareTrack = tracks .filter(isTrackReference) .find((track) => track.publication.source === Track.Source.ScreenShare) @@ -39,9 +40,11 @@ export const PipView = () => { return ( + {/* Keep stage height stable to avoid layout shifting on track changes. */} + {/* Compact control bar for PiP; extend here when adding more actions. */} diff --git a/src/frontend/src/features/rooms/livekit/hooks/useDocumentPiP.ts b/src/frontend/src/features/rooms/livekit/hooks/useDocumentPiP.ts index bc8f3d4a..418da7a2 100644 --- a/src/frontend/src/features/rooms/livekit/hooks/useDocumentPiP.ts +++ b/src/frontend/src/features/rooms/livekit/hooks/useDocumentPiP.ts @@ -26,6 +26,7 @@ export const useDocumentPiP = ({ if (!isSupported) return null if (pipWindow && !pipWindow.closed) return pipWindow + // Request a new PiP window from the browser API. const pip = (window as WindowWithDocumentPiP).documentPictureInPicture if (!pip) return null diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json index 2582c353..fbfab76b 100644 --- a/src/frontend/src/locales/de/rooms.json +++ b/src/frontend/src/locales/de/rooms.json @@ -241,6 +241,10 @@ "username": "Deinen Namen aktualisieren", "effects": "Effekte anwenden", "switchCamera": "Kamera wechseln", + "pictureInPicture": { + "enter": "Bild-im-Bild", + "exit": "Bild-im-Bild schließen" + }, "fullscreen": { "enter": "Vollbild", "exit": "Vollbildmodus verlassen" diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json index c09beded..1d8fb61d 100644 --- a/src/frontend/src/locales/en/rooms.json +++ b/src/frontend/src/locales/en/rooms.json @@ -241,6 +241,10 @@ "username": "Update Your Name", "effects": "Backgrounds and Effects", "switchCamera": "Switch camera", + "pictureInPicture": { + "enter": "Picture-in-picture", + "exit": "Close picture-in-picture" + }, "fullscreen": { "enter": "Fullscreen", "exit": "Exit fullscreen mode" diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json index d0a64e42..1430afd3 100644 --- a/src/frontend/src/locales/fr/rooms.json +++ b/src/frontend/src/locales/fr/rooms.json @@ -241,6 +241,10 @@ "username": "Choisir votre nom", "effects": "Arrière-plans et effets", "switchCamera": "Changer de caméra", + "pictureInPicture": { + "enter": "Image dans l'image", + "exit": "Fermer l'image dans l'image" + }, "fullscreen": { "enter": "Plein écran", "exit": "Quitter le mode plein écran" diff --git a/src/frontend/src/locales/nl/rooms.json b/src/frontend/src/locales/nl/rooms.json index 57896e25..b5e19d03 100644 --- a/src/frontend/src/locales/nl/rooms.json +++ b/src/frontend/src/locales/nl/rooms.json @@ -241,6 +241,10 @@ "username": "Verander uw naam", "effects": "Pas effecten toe", "switchCamera": "Selecteer camera", + "pictureInPicture": { + "enter": "Picture-in-picture", + "exit": "Picture-in-picture sluiten" + }, "fullscreen": { "enter": "Volledig scherm", "exit": "Stop volledig scherm stand"