🚧(frontend) debug transcript segment organization

for the big monday demo, push a draft commit.

CHANGELOG.md

@@ -22,6 +22,8 @@ and this project adheres to
 - ♿(frontend) improve contrast for selected options #863
 - ♿️(frontend) announce copy state in invite dialog #877
 - 📝(frontend) align close dialog label in rooms locale #878
+- 🩹(backend) use case-insensitive email matching in the external api #887
+- 🐛(frontend) ensure transcript segments are sorted by their timestamp #899
 
 ## [1.3.0] - 2026-01-13
 

src/backend/core/external_api/viewsets.py

@@ -5,7 +5,7 @@ from logging import getLogger
 
 from django.conf import settings
 from django.contrib.auth.hashers import check_password
-from django.core.exceptions import ValidationError
+from django.core.exceptions import SuspiciousOperation, ValidationError
 from django.core.validators import validate_email
 
 import jwt
@@ -93,7 +93,7 @@ class ApplicationViewSet(viewsets.GenericViewSet):
             )
 
         try:
-            user = models.User.objects.get(email=email)
+            user = models.User.objects.get(email__iexact=email)
         except models.User.DoesNotExist as e:
             if (
                 settings.APPLICATION_ALLOW_USER_CREATION
@@ -123,6 +123,10 @@ class ApplicationViewSet(viewsets.GenericViewSet):
                 )
             else:
                 raise drf_exceptions.NotFound("User not found.") from e
+        except models.User.MultipleObjectsReturned as e:
+            raise SuspiciousOperation(
+                "Multiple user accounts share a common email."
+            ) from e
 
         now = datetime.now(timezone.utc)
         scope = " ".join(application.scopes or [])

src/backend/core/tests/test_external_api_token.py

@@ -22,7 +22,7 @@ pytestmark = pytest.mark.django_db
 def test_api_applications_generate_token_success(settings):
     """Valid credentials should return a JWT token."""
     settings.APPLICATION_JWT_SECRET_KEY = "devKey"
-    user = UserFactory(email="user@example.com")
+    UserFactory(email="User.Family@example.com")
     application = ApplicationFactory(
         active=True,
         scopes=[ApplicationScope.ROOMS_LIST, ApplicationScope.ROOMS_CREATE],
@@ -40,7 +40,7 @@ def test_api_applications_generate_token_success(settings):
             "client_id": application.client_id,
             "client_secret": plain_secret,
             "grant_type": "client_credentials",
-            "scope": user.email,
+            "scope": "user.family@example.com",
         },
         format="json",
     )

src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx

@@ -7,7 +7,6 @@ import { EffectsMenuItem } from './EffectsMenuItem'
 import { SupportMenuItem } from './SupportMenuItem'
 import { TranscriptMenuItem } from './TranscriptMenuItem'
 import { ScreenRecordingMenuItem } from './ScreenRecordingMenuItem'
-import { PiPMenuItem } from './PiPMenuItem'
 
 // @todo try refactoring it to use MenuList component
 export const OptionsMenuItems = () => {
@@ -21,7 +20,6 @@ export const OptionsMenuItems = () => {
       <MenuSection>
         <TranscriptMenuItem />
         <ScreenRecordingMenuItem />
-        <PiPMenuItem />
         <FullScreenMenuItem />
         <EffectsMenuItem />
       </MenuSection>

src/frontend/src/features/rooms/livekit/components/controls/Options/PiPMenuItem.tsx

@@ -1,126 +0,0 @@
-import { createRoot } from 'react-dom/client'
-import React from 'react'
-import { MenuItem } from 'react-aria-components'
-import { menuRecipe } from '@/primitives/menuRecipe.ts'
-import { useRoomContext } from '@livekit/components-react'
-import { Button } from '@/primitives'
-import { LeaveButton } from '@/features/rooms/livekit/components/controls/LeaveButton'
-import { RoomContext } from '@livekit/components-react'
-import { RiPictureInPicture2Line } from '@remixicon/react'
-import { css } from '@/styled-system/css'
-import { HandToggle } from '@/features/rooms/livekit/components/controls/HandToggle'
-import { Track } from 'livekit-client'
-import { ScreenShareToggle } from '@/features/rooms/livekit/components/controls/ScreenShareToggle.tsx'
-import { AudioDevicesControl } from '@/features/rooms/livekit/components/controls/Device/AudioDevicesControl.tsx'
-import { VideoDeviceControl } from '@/features/rooms/livekit/components/controls/Device/VideoDeviceControl.tsx'
-import { PiPOptionsButton } from '@/features/rooms/livekit/components/controls/Options/PiPOptionsMenuItems.tsx'
-
-// Composant à afficher dans le PiP
-const PiPContent = ({ room, onClose }) => {
-  return (
-    <RoomContext.Provider value={room}>
-      <div
-        className={css({
-          height: '100vh',
-          position: 'relative',
-          backgroundColor: 'primaryDark.50 !important',
-        })}
-      >
-        <h2>Room: {room?.name}</h2>
-        <Button onPress={onClose} variant="danger">
-          Close PiP
-        </Button>
-        <div
-          className={css({
-            position: 'absolute',
-            margin: '0.25rem',
-            marginBottom: '0.75rem',
-            width: 'calc(100% - 0.5rem)',
-            bottom: '0',
-            left: '0',
-            // border: '1px solid white',
-            display: 'flex',
-            justifyContent: 'center',
-            gap: '0.5rem',
-          })}
-        >
-          <AudioDevicesControl
-            hideMenu={true}
-            onDeviceError={(error) => console.log(error)}
-          />
-          <VideoDeviceControl
-            hideMenu={true}
-            onDeviceError={(error) => console.log(error)}
-          />
-          <ScreenShareToggle onDeviceError={(error) => console.log(error)} />
-          <HandToggle />
-          <LeaveButton />
-        </div>
-      </div>
-    </RoomContext.Provider>
-  )
-}
-
-export const PiPMenuItem = () => {
-  const room = useRoomContext()
-
-  const openDocumentPiP = async () => {
-    try {
-      if (!('documentPictureInPicture' in window)) {
-        alert('Document Picture-in-Picture not supported')
-        return
-      }
-
-      const pipWindow = await window.documentPictureInPicture.requestWindow({
-        width: 400,
-        height: 300,
-      })
-
-      // Copier les styles CSS
-      const allCSS = [...document.styleSheets]
-        .map((styleSheet) => {
-          try {
-            return [...styleSheet.cssRules].map((rule) => rule.cssText).join('')
-          } catch (e) {
-            return ''
-          }
-        })
-        .filter(Boolean)
-        .join('\n')
-
-      const styleElement = pipWindow.document.createElement('style')
-      styleElement.textContent = allCSS
-      pipWindow.document.head.appendChild(styleElement)
-
-      // Créer conteneur React
-      const container = pipWindow.document.createElement('div')
-      pipWindow.document.body.appendChild(container)
-
-      // Render avec la valeur room passée
-      const root = createRoot(container)
-      root.render(
-        <PiPContent
-          room={room} // Passer l'objet room
-          onClose={() => pipWindow.close()}
-        />
-      )
-
-      // Nettoyage
-      pipWindow.addEventListener('pagehide', () => {
-        root.unmount()
-      })
-    } catch (error) {
-      console.error('Failed to open PiP:', error)
-    }
-  }
-
-  return (
-    <MenuItem
-      onAction={openDocumentPiP}
-      className={menuRecipe({ icon: true, variant: 'dark' }).item}
-    >
-      <RiPictureInPicture2Line size={20} />
-      Open in PiP
-    </MenuItem>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/Options/PiPOptionsMenuItems.tsx

@@ -1,39 +0,0 @@
-import { Menu as RACMenu } from 'react-aria-components'
-
-import { useTranslation } from 'react-i18next'
-import { RiMore2Line } from '@remixicon/react'
-import { Button, Menu } from '@/primitives'
-import { OptionsMenuItems } from './OptionsMenuItems'
-import { EffectsMenuItem } from '@/features/rooms/livekit/components/controls/Options/EffectsMenuItem'
-
-// @todo try refactoring it to use MenuList component
-export const PiPOptionsMenuItems = () => {
-  return (
-    <RACMenu
-      style={{
-        minWidth: '150px',
-        width: '300px',
-      }}
-    >
-      <EffectsMenuItem />
-    </RACMenu>
-  )
-}
-
-export const PiPOptionsButton = () => {
-  const { t } = useTranslation('rooms')
-
-  return (
-    <Menu variant="dark">
-      <Button
-        size="xs"
-        variant="primaryDark"
-        aria-label={t('options.buttonLabel')}
-        tooltip={t('options.buttonLabel')}
-      >
-        <RiMore2Line />
-      </Button>
-      <PiPOptionsMenuItems />
-    </Menu>
-  )
-}

src/frontend/src/features/subtitle/component/Subtitles.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useSubtitles } from '../hooks/useSubtitles'
 import { css, cva } from '@/styled-system/css'
 import { styled } from '@/styled-system/jsx'
@@ -13,101 +13,63 @@ export interface TranscriptionSegment {
   id: string
   text: string
   language: string
-  startTime: number
+  startTime?: number
   endTime: number
   final: boolean
   firstReceivedTime: number
   lastReceivedTime: number
 }
 
+export interface TranscriptionSegmentWithParticipant
+  extends TranscriptionSegment {
+  participant: Participant
+}
+
 export interface TranscriptionRow {
   id: string
   participant: Participant
   segments: TranscriptionSegment[]
-  startTime: number
+  startTime?: number
   lastUpdateTime: number
+  lastReceivedTime: number
 }
 
 const useTranscriptionState = () => {
-  const [transcriptionRows, setTranscriptionRows] = useState<
-    TranscriptionRow[]
+  const [transcriptionSegments, setTranscriptionSegments] = useState<
+    TranscriptionSegmentWithParticipant[]
   >([])
-  const [lastActiveParticipantIdentity, setLastActiveParticipantIdentity] =
-    useState<string | null>(null)
 
-  const updateTranscriptions = (
+  const updateTranscriptionSegments = (
     segments: TranscriptionSegment[],
     participant?: Participant
   ) => {
+    console.log(participant, segments)
+
     if (!participant || segments.length === 0) return
 
-    setTranscriptionRows((prevRows) => {
-      const updatedRows = [...prevRows]
-      const now = Date.now()
+    if (segments.length > 1) {
+      console.warn('Unexpected error more segments')
+      return
+    }
 
-      const shouldAppendToLastRow =
-        lastActiveParticipantIdentity === participant.identity &&
-        updatedRows.length > 0
+    const segment = segments[0]
 
-      if (shouldAppendToLastRow) {
-        const lastRowIndex = updatedRows.length - 1
-        const lastRow = updatedRows[lastRowIndex]
-
-        const existingSegmentIds = new Set(lastRow.segments.map((s) => s.id))
-        const newSegments = segments.filter(
-          (segment) => !existingSegmentIds.has(segment.id)
-        )
-        const updatedSegments = lastRow.segments.map((existing) => {
-          const update = segments.find((s) => s.id === existing.id)
-          return update && update.final ? update : existing
-        })
-
-        updatedRows[lastRowIndex] = {
-          ...lastRow,
-          segments: [...updatedSegments, ...newSegments],
-          lastUpdateTime: now,
-        }
-      } else {
-        const newRow: TranscriptionRow = {
-          id: `${participant.identity}-${now}`,
-          participant,
-          segments: [...segments],
-          startTime: Math.min(...segments.map((s) => s.startTime)),
-          lastUpdateTime: now,
-        }
-        updatedRows.push(newRow)
-      }
-
-      return updatedRows
-    })
-
-    setLastActiveParticipantIdentity(participant.identity)
-  }
-
-  const clearTranscriptions = () => {
-    setTranscriptionRows([])
-    setLastActiveParticipantIdentity(null)
-  }
-
-  const updateParticipant = (_name: string, participant: Participant) => {
-    setTranscriptionRows((prevRows) => {
-      return prevRows.map((row) => {
-        if (row.participant.identity === participant.identity) {
-          return {
-            ...row,
-            participant,
-          }
-        }
-        return row
-      })
+    setTranscriptionSegments((prevSegments) => {
+      const existingSegmentIds = new Set(prevSegments.map((s) => s.id))
+      if (existingSegmentIds.has(segment.id)) return prevSegments
+      return [
+        ...prevSegments,
+        {
+          participant: participant,
+          ...segment,
+        },
+      ]
     })
   }
 
   return {
-    transcriptionRows,
-    updateTranscriptions,
-    clearTranscriptions,
-    updateParticipant,
+    updateTranscriptionSegments,
+    transcriptionSegments,
   }
 }
 
@@ -192,24 +154,54 @@ const SubtitlesWrapper = styled(
 export const Subtitles = () => {
   const { areSubtitlesOpen } = useSubtitles()
   const room = useRoomContext()
-  const { transcriptionRows, updateTranscriptions, updateParticipant } =
+
+  const { transcriptionSegments, updateTranscriptionSegments } =
     useTranscriptionState()
 
   useEffect(() => {
     if (!room) return
-    room.on(RoomEvent.TranscriptionReceived, updateTranscriptions)
+    room.on(RoomEvent.TranscriptionReceived, updateTranscriptionSegments)
     return () => {
-      room.off(RoomEvent.TranscriptionReceived, updateTranscriptions)
+      room.off(RoomEvent.TranscriptionReceived, updateTranscriptionSegments)
     }
-  }, [room, updateTranscriptions])
+  }, [room, updateTranscriptionSegments])
 
-  useEffect(() => {
-    if (!room) return
-    room.on(RoomEvent.ParticipantNameChanged, updateParticipant)
-    return () => {
-      room.off(RoomEvent.ParticipantNameChanged, updateParticipant)
+  const transcriptionRows = useMemo(() => {
+    if (transcriptionSegments.length === 0) return []
+
+    const rows: TranscriptionRow[] = []
+    let currentRow: TranscriptionRow | null = null
+
+    for (const segment of transcriptionSegments) {
+      const shouldStartNewRow =
+        !currentRow ||
+        currentRow.participant.identity !== segment.participant.identity
+
+      if (shouldStartNewRow) {
+        currentRow = {
+          id: `${segment.participant.identity}-${segment.firstReceivedTime}`,
+          participant: segment.participant,
+          segments: [segment],
+          startTime: segment.startTime,
+          lastUpdateTime: segment.lastReceivedTime,
+          lastReceivedTime: segment.lastReceivedTime,
+        }
+        rows.push(currentRow)
+      } else if (currentRow) {
+        currentRow.segments.push(segment)
+        currentRow.lastUpdateTime = Math.max(
+          currentRow.lastUpdateTime,
+          segment.lastReceivedTime
+        )
+        currentRow.lastReceivedTime = Math.max(
+          currentRow.lastReceivedTime,
+          segment.lastReceivedTime
+        )
+      }
     }
-  }, [room, updateParticipant])
+
+    return rows
+  }, [transcriptionSegments])
 
   return (
     <SubtitlesWrapper areOpen={areSubtitlesOpen}>