🌐(i18n) add PiP labels for each supported language

add labels for PiP in each supported language

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?.()

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 (
     <PipContainer>
+      {/* Keep stage height stable to avoid layout shifting on track changes. */}
       <PipStage>
         <ParticipantTile trackRef={trackRef} disableMetadata />
       </PipStage>
+      {/* Compact control bar for PiP; extend here when adding more actions. */}
       <PipControlsBar
         showScreenShare={browserSupportsScreenSharing}
       />

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
 

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"

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"

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"

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"