@twentyhq/call-recorder 1.0.0

package/src/constants/__tests__/call-recording-field-universal-identifiers.test.ts

@@ -0,0 +1,19 @@
+import { STANDARD_OBJECT_UNIVERSAL_IDENTIFIERS } from 'twenty-sdk/define';
+import { describe, expect, it } from 'vitest';
+
+import { CALL_RECORDING_AUDIO_FIELD_UNIVERSAL_IDENTIFIER } from 'src/constants/call-recording-audio-field-universal-identifier';
+import { CALL_RECORDING_VIDEO_FIELD_UNIVERSAL_IDENTIFIER } from 'src/constants/call-recording-video-field-universal-identifier';
+
+// This test is nothing more than a sanity check to ensure that the universal identifiers for the call recording media fields are correct.
+describe('call recording field universal identifiers', () => {
+  it('matches the standard CallRecording media field identifiers', () => {
+    expect(CALL_RECORDING_AUDIO_FIELD_UNIVERSAL_IDENTIFIER).toBe(
+      STANDARD_OBJECT_UNIVERSAL_IDENTIFIERS.callRecording.fields.audio
+        .universalIdentifier,
+    );
+    expect(CALL_RECORDING_VIDEO_FIELD_UNIVERSAL_IDENTIFIER).toBe(
+      STANDARD_OBJECT_UNIVERSAL_IDENTIFIERS.callRecording.fields.video
+        .universalIdentifier,
+    );
+  });
+});

package/src/constants/app-description.ts

@@ -0,0 +1,2 @@
+export const APP_DESCRIPTION =
+  'Capture every customer conversation automatically. A call recorder joins eligible meetings and records calls for you.';

package/src/constants/app-display-name.ts

@@ -0,0 +1 @@
+export const APP_DISPLAY_NAME = 'Call Recorder';

package/src/constants/application-universal-identifier.ts

@@ -0,0 +1,2 @@
+export const APPLICATION_UNIVERSAL_IDENTIFIER =
+  '8da4b8b5-5edf-4880-b51f-ab6e679ec617';

package/src/constants/calendar-event-reconciliation-logic-function-universal-identifier.ts

@@ -0,0 +1,2 @@
+export const CALENDAR_EVENT_RECONCILIATION_LOGIC_FUNCTION_UNIVERSAL_IDENTIFIER =
+  '1f28c477-6423-4911-85bf-2296ef112be9';

package/src/constants/calendar-event-record-page-layout-universal-identifier.ts

@@ -0,0 +1,2 @@
+export const CALENDAR_EVENT_RECORD_PAGE_LAYOUT_UNIVERSAL_IDENTIFIER =
+  'b9b10e40-9ce2-4704-8ac6-c6e92e2563c1';

package/src/constants/calendar-event-recording-front-component-universal-identifier.ts

@@ -0,0 +1,2 @@
+export const CALENDAR_EVENT_RECORDING_FRONT_COMPONENT_UNIVERSAL_IDENTIFIER =
+  '445d742e-1c27-46ee-a9ab-4a1dde65adcf';

package/src/constants/calendar-event-recording-page-layout-tab-universal-identifier.ts

@@ -0,0 +1,2 @@
+export const CALENDAR_EVENT_RECORDING_PAGE_LAYOUT_TAB_UNIVERSAL_IDENTIFIER =
+  '10c2c22d-952b-42ea-81fe-2e93e7d30f86';

package/src/constants/calendar-event-recording-page-layout-widget-universal-identifier.ts

@@ -0,0 +1,2 @@
+export const CALENDAR_EVENT_RECORDING_PAGE_LAYOUT_WIDGET_UNIVERSAL_IDENTIFIER =
+  '29c2315b-2ee6-41df-91b7-42f58f6c1a53';

package/src/constants/call-recorder-everyone-left-timeout-seconds-app-variable-universal-identifier.ts

@@ -0,0 +1,2 @@
+export const CALL_RECORDER_EVERYONE_LEFT_TIMEOUT_SECONDS_APP_VARIABLE_UNIVERSAL_IDENTIFIER =
+  'c866ddd4-fb7b-4cb4-8ad1-5599755e495c';

package/src/constants/call-recorder-failure-reason-on-call-recording-field-universal-identifier.ts

@@ -0,0 +1,2 @@
+export const CALL_RECORDER_FAILURE_REASON_ON_CALL_RECORDING_FIELD_UNIVERSAL_IDENTIFIER =
+  '33a577e4-02f5-48bd-8bed-d365949caa72';

package/src/constants/call-recorder-join-early-minutes-app-variable-universal-identifier.ts

@@ -0,0 +1,2 @@
+export const CALL_RECORDER_JOIN_EARLY_MINUTES_APP_VARIABLE_UNIVERSAL_IDENTIFIER =
+  '0568ebb2-3f64-47de-8c0d-d367dfbb7462';

package/src/constants/call-recorder-name-app-variable-universal-identifier.ts

@@ -0,0 +1,2 @@
+export const CALL_RECORDER_NAME_APP_VARIABLE_UNIVERSAL_IDENTIFIER =
+  'c54cbacd-ad10-40b4-9056-7aaf23846d64';

package/src/constants/call-recorder-noone-joined-timeout-seconds-app-variable-universal-identifier.ts

@@ -0,0 +1,2 @@
+export const CALL_RECORDER_NOONE_JOINED_TIMEOUT_SECONDS_APP_VARIABLE_UNIVERSAL_IDENTIFIER =
+  '241180e8-d864-4160-ad02-db44a9e8d395';

package/src/constants/call-recorder-preference-off-option-id.ts

@@ -0,0 +1,2 @@
+export const CALL_RECORDER_PREFERENCE_OFF_OPTION_ID =
+  'cc7de62a-08b6-46c8-aa69-f8117e7dd722';

package/src/constants/call-recorder-preference-on-calendar-event-field-universal-identifier.ts

@@ -0,0 +1,2 @@
+export const CALL_RECORDER_PREFERENCE_ON_CALENDAR_EVENT_FIELD_UNIVERSAL_IDENTIFIER =
+  '8ee9444a-2437-4def-8e61-6e493862a4fd';

package/src/constants/call-recorder-preference-on-calendar-event-view-field-universal-identifier.ts

@@ -0,0 +1,2 @@
+export const CALL_RECORDER_PREFERENCE_ON_CALENDAR_EVENT_VIEW_FIELD_UNIVERSAL_IDENTIFIER =
+  'e8c7e9c5-2b4f-4a75-ae46-ea331809106c';

package/src/constants/call-recorder-preference-on-option-id.ts

@@ -0,0 +1,2 @@
+export const CALL_RECORDER_PREFERENCE_ON_OPTION_ID =
+  '72431216-49c4-47c8-99af-de4c3831b0be';

package/src/constants/call-recorder-preference.ts

@@ -0,0 +1,4 @@
+export enum CallRecorderPreference {
+  ON = 'ON',
+  OFF = 'OFF',
+}

package/src/constants/call-recorder-waiting-room-timeout-seconds-app-variable-universal-identifier.ts

@@ -0,0 +1,2 @@
+export const CALL_RECORDER_WAITING_ROOM_TIMEOUT_SECONDS_APP_VARIABLE_UNIVERSAL_IDENTIFIER =
+  '12e4e14d-d539-4d07-b477-4773539dd20b';

package/src/constants/call-recording-audio-field-universal-identifier.ts

@@ -0,0 +1,2 @@
+export const CALL_RECORDING_AUDIO_FIELD_UNIVERSAL_IDENTIFIER =
+  '2eafc2d0-8fec-430c-a939-65ca5fbc0f08';

package/src/constants/call-recording-video-field-universal-identifier.ts

@@ -0,0 +1,2 @@
+export const CALL_RECORDING_VIDEO_FIELD_UNIVERSAL_IDENTIFIER =
+  'bb9523d3-457e-4f4b-8c79-27a77afb87da';

package/src/constants/default-role-universal-identifier.ts

@@ -0,0 +1,2 @@
+export const DEFAULT_ROLE_UNIVERSAL_IDENTIFIER =
+  '5fcf4d3a-0aca-42d9-9beb-7387f43ec180';

package/src/constants/process-recall-webhook-logic-function-universal-identifier.ts

@@ -0,0 +1,2 @@
+export const PROCESS_RECALL_WEBHOOK_LOGIC_FUNCTION_UNIVERSAL_IDENTIFIER =
+  '13d9c427-447e-494a-8d3c-1af5d0bacb82';

package/src/constants/recall-webhook-logic-function-universal-identifier.ts

@@ -0,0 +1,2 @@
+export const RECALL_WEBHOOK_LOGIC_FUNCTION_UNIVERSAL_IDENTIFIER =
+  '9215afe6-1497-4149-a49d-e608e239bbaf';

package/src/constants/stale-bot-state-logic-function-universal-identifier.ts

@@ -0,0 +1,2 @@
+export const STALE_BOT_STATE_LOGIC_FUNCTION_UNIVERSAL_IDENTIFIER =
+  'e362aa9b-52c6-4b7e-bb20-927e0e8d7cbe';

package/src/default-role.ts

@@ -0,0 +1,69 @@
+import {
+  STANDARD_OBJECT_UNIVERSAL_IDENTIFIERS,
+  SystemPermissionFlag,
+  defineApplicationRole,
+} from 'twenty-sdk/define';
+
+import { APP_DISPLAY_NAME } from 'src/constants/app-display-name';
+import { DEFAULT_ROLE_UNIVERSAL_IDENTIFIER } from 'src/constants/default-role-universal-identifier';
+
+export default defineApplicationRole({
+  universalIdentifier: DEFAULT_ROLE_UNIVERSAL_IDENTIFIER,
+  label: `${APP_DISPLAY_NAME} default role`,
+  description:
+    'Reads calendar events to decide whether the call recorder should attend a meeting; writes the resulting CallRecording records, uploads recording media, and fills transcripts.',
+  canReadAllObjectRecords: false,
+  canUpdateAllObjectRecords: false,
+  canSoftDeleteAllObjectRecords: false,
+  canDestroyAllObjectRecords: false,
+  canUpdateAllSettings: false,
+  canBeAssignedToAgents: false,
+  canBeAssignedToUsers: false,
+  canBeAssignedToApiKeys: false,
+  objectPermissions: [
+    {
+      objectUniversalIdentifier:
+        STANDARD_OBJECT_UNIVERSAL_IDENTIFIERS.calendarEvent.universalIdentifier,
+      canReadObjectRecords: true,
+      canUpdateObjectRecords: false,
+      canSoftDeleteObjectRecords: false,
+      canDestroyObjectRecords: false,
+    },
+    {
+      objectUniversalIdentifier:
+        STANDARD_OBJECT_UNIVERSAL_IDENTIFIERS.calendarEventParticipant
+          .universalIdentifier,
+      canReadObjectRecords: true,
+      canUpdateObjectRecords: false,
+      canSoftDeleteObjectRecords: false,
+      canDestroyObjectRecords: false,
+    },
+    {
+      objectUniversalIdentifier:
+        STANDARD_OBJECT_UNIVERSAL_IDENTIFIERS.callRecording.universalIdentifier,
+      canReadObjectRecords: true,
+      canUpdateObjectRecords: true,
+      canSoftDeleteObjectRecords: false,
+      canDestroyObjectRecords: false,
+    },
+    {
+      objectUniversalIdentifier:
+        STANDARD_OBJECT_UNIVERSAL_IDENTIFIERS.person.universalIdentifier,
+      canReadObjectRecords: true,
+      canUpdateObjectRecords: false,
+      canSoftDeleteObjectRecords: false,
+      canDestroyObjectRecords: false,
+    },
+    {
+      objectUniversalIdentifier:
+        STANDARD_OBJECT_UNIVERSAL_IDENTIFIERS.workspaceMember
+          .universalIdentifier,
+      canReadObjectRecords: true,
+      canUpdateObjectRecords: false,
+      canSoftDeleteObjectRecords: false,
+      canDestroyObjectRecords: false,
+    },
+  ],
+  fieldPermissions: [],
+  permissionFlagUniversalIdentifiers: [SystemPermissionFlag.UPLOAD_FILE],
+});

package/src/fields/call-recorder-failure-reason-on-call-recording.field.ts

@@ -0,0 +1,22 @@
+import {
+  defineField,
+  FieldType,
+  STANDARD_OBJECT_UNIVERSAL_IDENTIFIERS,
+} from 'twenty-sdk/define';
+
+import { CALL_RECORDER_FAILURE_REASON_ON_CALL_RECORDING_FIELD_UNIVERSAL_IDENTIFIER } from 'src/constants/call-recorder-failure-reason-on-call-recording-field-universal-identifier';
+
+export default defineField({
+  universalIdentifier:
+    CALL_RECORDER_FAILURE_REASON_ON_CALL_RECORDING_FIELD_UNIVERSAL_IDENTIFIER,
+  objectUniversalIdentifier:
+    STANDARD_OBJECT_UNIVERSAL_IDENTIFIERS.callRecording.universalIdentifier,
+  type: FieldType.TEXT,
+  name: 'callRecorderFailureReason',
+  label: 'Call Recorder Failure Reason',
+  description:
+    'Provider-specific reason the call recorder could not produce a recording.',
+  icon: 'IconAlertTriangle',
+  isNullable: true,
+  isUIEditable: false,
+});

package/src/fields/call-recorder-preference-on-calendar-event.field.ts

@@ -0,0 +1,41 @@
+import {
+  defineField,
+  FieldType,
+  STANDARD_OBJECT_UNIVERSAL_IDENTIFIERS,
+} from 'twenty-sdk/define';
+
+import { CallRecorderPreference } from 'src/constants/call-recorder-preference';
+import { CALL_RECORDER_PREFERENCE_OFF_OPTION_ID } from 'src/constants/call-recorder-preference-off-option-id';
+import { CALL_RECORDER_PREFERENCE_ON_OPTION_ID } from 'src/constants/call-recorder-preference-on-option-id';
+import { CALL_RECORDER_PREFERENCE_ON_CALENDAR_EVENT_FIELD_UNIVERSAL_IDENTIFIER } from 'src/constants/call-recorder-preference-on-calendar-event-field-universal-identifier';
+
+export default defineField({
+  universalIdentifier:
+    CALL_RECORDER_PREFERENCE_ON_CALENDAR_EVENT_FIELD_UNIVERSAL_IDENTIFIER,
+  objectUniversalIdentifier:
+    STANDARD_OBJECT_UNIVERSAL_IDENTIFIERS.calendarEvent.universalIdentifier,
+  type: FieldType.SELECT,
+  name: 'callRecorderPreference',
+  label: 'Recording Bot',
+  description:
+    'Call recording is on by default when the app is installed. Turn it off for this event when needed.',
+  icon: 'IconRobot',
+  isNullable: false,
+  defaultValue: `'${CallRecorderPreference.ON}'`,
+  options: [
+    {
+      id: CALL_RECORDER_PREFERENCE_ON_OPTION_ID,
+      value: CallRecorderPreference.ON,
+      label: 'On',
+      position: 0,
+      color: 'green',
+    },
+    {
+      id: CALL_RECORDER_PREFERENCE_OFF_OPTION_ID,
+      value: CallRecorderPreference.OFF,
+      label: 'Off',
+      position: 1,
+      color: 'red',
+    },
+  ],
+});

package/src/front-components/calendar-event-recording.front-component.tsx

@@ -0,0 +1,13 @@
+import { defineFrontComponent } from 'twenty-sdk/define';
+
+import { CALENDAR_EVENT_RECORDING_FRONT_COMPONENT_UNIVERSAL_IDENTIFIER } from 'src/constants/calendar-event-recording-front-component-universal-identifier';
+import { CalendarEventRecording } from 'src/front-components/components/CalendarEventRecording';
+
+export default defineFrontComponent({
+  universalIdentifier:
+    CALENDAR_EVENT_RECORDING_FRONT_COMPONENT_UNIVERSAL_IDENTIFIER,
+  name: 'calendar-event-recording',
+  description:
+    'Read-only recording viewer with synced transcript for the calendar event record page.',
+  component: CalendarEventRecording,
+});

package/src/front-components/components/CalendarEventRecording.tsx

@@ -0,0 +1,39 @@
+import styled from '@emotion/styled';
+import { isUndefined } from '@sniptt/guards';
+import { useSelectedRecordIds } from 'twenty-sdk/front-component';
+
+import { CalendarEventRecordingContent } from 'src/front-components/components/CalendarEventRecordingContent';
+import { recordingThemeCssVariables } from 'src/front-components/constants/recording-theme-css-variables';
+
+const StyledCenteredState = styled.div`
+  align-items: center;
+  box-sizing: border-box;
+  color: ${recordingThemeCssVariables.font.colorTertiary};
+  display: flex;
+  font-family: ${recordingThemeCssVariables.font.family};
+  font-size: ${recordingThemeCssVariables.font.sizeSm};
+  height: 100%;
+  justify-content: center;
+  padding: ${recordingThemeCssVariables.spacing[4]};
+`;
+
+export const CalendarEventRecording = () => {
+  const selectedRecordIds = useSelectedRecordIds();
+  const calendarEventId =
+    selectedRecordIds.length === 1 ? selectedRecordIds[0] : undefined;
+
+  if (isUndefined(calendarEventId)) {
+    return (
+      <StyledCenteredState>
+        Open a calendar event to see its recording.
+      </StyledCenteredState>
+    );
+  }
+
+  return (
+    <CalendarEventRecordingContent
+      key={calendarEventId}
+      calendarEventId={calendarEventId}
+    />
+  );
+};

package/src/front-components/components/CalendarEventRecordingBody.tsx

@@ -0,0 +1,96 @@
+import styled from '@emotion/styled';
+import { isUndefined } from '@sniptt/guards';
+
+import { RecordingTranscript } from 'src/front-components/components/RecordingTranscript';
+import { RecordingVideoPlayer } from 'src/front-components/components/RecordingVideoPlayer';
+import { TranscriptErrorBox } from 'src/front-components/components/TranscriptErrorBox';
+import { recordingThemeCssVariables } from 'src/front-components/constants/recording-theme-css-variables';
+import { type CalendarEventRecordingParticipant } from 'src/front-components/types/calendar-event-recording-participant.type';
+
+const StyledCenteredState = styled.div`
+  align-items: center;
+  box-sizing: border-box;
+  color: ${recordingThemeCssVariables.font.colorTertiary};
+  display: flex;
+  font-family: ${recordingThemeCssVariables.font.family};
+  font-size: ${recordingThemeCssVariables.font.sizeSm};
+  justify-content: center;
+  min-height: 240px;
+  padding: ${recordingThemeCssVariables.spacing[4]};
+`;
+
+const StyledRecordingContainer = styled.div<{
+  $hasVideo?: boolean;
+}>`
+  display: grid;
+  gap: ${recordingThemeCssVariables.spacing[2]};
+  grid-template-rows: ${({ $hasVideo }) =>
+    $hasVideo ? 'auto minmax(0, 1fr)' : 'minmax(0, 1fr)'};
+  min-height: 0;
+`;
+
+type CalendarEventRecordingBodyProps = {
+  transcript: unknown;
+  videoFileUrl: string | undefined;
+  isCalendarEventRecordingQueryLoading: boolean;
+  errorMessage: string | undefined;
+  currentTimeSeconds: number;
+  calendarEventParticipants: CalendarEventRecordingParticipant[];
+  onVideoTimeUpdate: (videoCurrentTimeSeconds: number) => void;
+};
+
+export const CalendarEventRecordingBody = ({
+  transcript,
+  videoFileUrl,
+  isCalendarEventRecordingQueryLoading,
+  errorMessage,
+  currentTimeSeconds,
+  calendarEventParticipants,
+  onVideoTimeUpdate,
+}: CalendarEventRecordingBodyProps) => {
+  const hasVideo = !isUndefined(videoFileUrl);
+
+  if (!isUndefined(errorMessage)) {
+    return (
+      <TranscriptErrorBox
+        title="Failed to load the recording"
+        description={errorMessage}
+      />
+    );
+  }
+
+  if (isCalendarEventRecordingQueryLoading) {
+    return (
+      <StyledRecordingContainer $hasVideo={false}>
+        <RecordingVideoPlayer
+          src={undefined}
+          onTimeUpdate={onVideoTimeUpdate}
+        />
+      </StyledRecordingContainer>
+    );
+  }
+
+  if (isUndefined(transcript) && !hasVideo) {
+    return (
+      <StyledCenteredState>
+        No recording for this calendar event yet.
+      </StyledCenteredState>
+    );
+  }
+
+  return (
+    <StyledRecordingContainer $hasVideo={hasVideo}>
+      {hasVideo && (
+        <RecordingVideoPlayer
+          src={videoFileUrl}
+          onTimeUpdate={onVideoTimeUpdate}
+        />
+      )}
+      <RecordingTranscript
+        transcript={transcript}
+        currentTimeSeconds={currentTimeSeconds}
+        calendarEventParticipants={calendarEventParticipants}
+      />
+    </StyledRecordingContainer>
+  );
+};

package/src/front-components/components/CalendarEventRecordingContent.tsx

@@ -0,0 +1,111 @@
+import styled from '@emotion/styled';
+import { useCallback, useState } from 'react';
+
+import { CalendarEventRecordingBody } from 'src/front-components/components/CalendarEventRecordingBody';
+import { recordingThemeCssVariables } from 'src/front-components/constants/recording-theme-css-variables';
+import { useCalendarEventParticipants } from 'src/front-components/hooks/use-calendar-event-participants';
+import { useCalendarEventRecording } from 'src/front-components/hooks/use-calendar-event-recording';
+
+const TRANSCRIPT_TIME_UPDATE_INTERVAL_SECONDS = 0.25;
+
+const StyledRecordingShell = styled.div`
+  background: ${recordingThemeCssVariables.background.primary};
+  border: 1px solid transparent;
+  border-bottom: 1px solid transparent;
+  border-radius: ${recordingThemeCssVariables.border.radiusMd};
+  box-sizing: border-box;
+  font-family: ${recordingThemeCssVariables.font.family};
+  padding: ${recordingThemeCssVariables.spacing[4]};
+  position: relative;
+  width: 100%;
+`;
+
+const StyledRecordingHeader = styled.div`
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  height: ${recordingThemeCssVariables.spacing[6]};
+`;
+
+const StyledRecordingTitle = styled.h2`
+  color: ${recordingThemeCssVariables.font.colorPrimary};
+  flex: 1;
+  font-size: ${recordingThemeCssVariables.font.sizeMd};
+  font-weight: ${recordingThemeCssVariables.font.weightMedium};
+  margin: 0;
+  overflow: hidden;
+  padding-inline: ${recordingThemeCssVariables.spacing[1]};
+  user-select: none;
+`;
+
+const StyledRecordingBody = styled.div`
+  box-sizing: border-box;
+  margin-top: ${recordingThemeCssVariables.spacing[2]};
+`;
+
+const StyledRecordingContentFrame = styled.div`
+  background-color: ${recordingThemeCssVariables.background.secondary};
+  border: 1px solid ${recordingThemeCssVariables.border.colorMedium};
+  border-radius: ${recordingThemeCssVariables.border.radiusMd};
+  box-sizing: border-box;
+  padding: ${recordingThemeCssVariables.spacing[2]};
+`;
+
+type CalendarEventRecordingContentProps = {
+  calendarEventId: string;
+};
+
+export const CalendarEventRecordingContent = ({
+  calendarEventId,
+}: CalendarEventRecordingContentProps) => {
+  const [currentTimeSeconds, setCurrentTimeSeconds] = useState(0);
+  const updateCurrentTimeSeconds = useCallback(
+    (videoCurrentTimeSeconds: number) => {
+      const nextCurrentTimeSeconds =
+        Math.floor(
+          videoCurrentTimeSeconds / TRANSCRIPT_TIME_UPDATE_INTERVAL_SECONDS,
+        ) * TRANSCRIPT_TIME_UPDATE_INTERVAL_SECONDS;
+
+      setCurrentTimeSeconds((previousCurrentTimeSeconds) =>
+        previousCurrentTimeSeconds === nextCurrentTimeSeconds
+          ? previousCurrentTimeSeconds
+          : nextCurrentTimeSeconds,
+      );
+    },
+    [],
+  );
+
+  const {
+    transcript,
+    videoFile,
+    isCalendarEventRecordingQueryLoading,
+    errorMessage,
+  } = useCalendarEventRecording(calendarEventId);
+  const { calendarEventParticipants } =
+    useCalendarEventParticipants(calendarEventId);
+
+  const videoFileUrl = videoFile?.url ?? undefined;
+
+  return (
+    <StyledRecordingShell>
+      <StyledRecordingHeader>
+        <StyledRecordingTitle>Recording and Transcript</StyledRecordingTitle>
+      </StyledRecordingHeader>
+      <StyledRecordingBody>
+        <StyledRecordingContentFrame>
+          <CalendarEventRecordingBody
+            transcript={transcript}
+            videoFileUrl={videoFileUrl}
+            isCalendarEventRecordingQueryLoading={
+              isCalendarEventRecordingQueryLoading
+            }
+            errorMessage={errorMessage}
+            currentTimeSeconds={currentTimeSeconds}
+            calendarEventParticipants={calendarEventParticipants}
+            onVideoTimeUpdate={updateCurrentTimeSeconds}
+          />
+        </StyledRecordingContentFrame>
+      </StyledRecordingBody>
+    </StyledRecordingShell>
+  );
+};

package/src/front-components/components/RecordingTranscript.tsx

@@ -0,0 +1,92 @@
+import styled from '@emotion/styled';
+import { isUndefined } from '@sniptt/guards';
+import { useMemo } from 'react';
+
+import { TranscriptEntryList } from 'src/front-components/components/TranscriptEntryList';
+import { TranscriptErrorBox } from 'src/front-components/components/TranscriptErrorBox';
+import { recordingThemeCssVariables } from 'src/front-components/constants/recording-theme-css-variables';
+import { type CalendarEventRecordingParticipant } from 'src/front-components/types/calendar-event-recording-participant.type';
+import { parseTranscriptEntries } from 'src/front-components/utils/parse-transcript-entries.util';
+import { parseTranscriptMarker } from 'src/logic-functions/domain/parse-transcript-marker.util';
+import { isNonEmptyString } from 'src/logic-functions/utils/is-non-empty-string.util';
+
+const StyledTranscriptCenteredState = styled.div`
+  align-items: center;
+  color: ${recordingThemeCssVariables.font.colorTertiary};
+  display: flex;
+  flex: 1;
+  font-size: ${recordingThemeCssVariables.font.sizeSm};
+  justify-content: center;
+`;
+
+type RecordingTranscriptProps = {
+  transcript: unknown;
+  currentTimeSeconds: number;
+  calendarEventParticipants: CalendarEventRecordingParticipant[];
+};
+
+export const RecordingTranscript = ({
+  transcript,
+  currentTimeSeconds,
+  calendarEventParticipants,
+}: RecordingTranscriptProps) => {
+  const marker = useMemo(() => parseTranscriptMarker(transcript), [transcript]);
+  const entries = useMemo(
+    () => parseTranscriptEntries(transcript),
+    [transcript],
+  );
+
+  if (isUndefined(transcript)) {
+    return (
+      <StyledTranscriptCenteredState>
+        No transcript for this calendar event yet.
+      </StyledTranscriptCenteredState>
+    );
+  }
+
+  if (marker?.status === 'PENDING') {
+    return (
+      <StyledTranscriptCenteredState>
+        The transcript is being generated. Check back in a few minutes.
+      </StyledTranscriptCenteredState>
+    );
+  }
+
+  if (marker?.status === 'FAILED') {
+    return (
+      <TranscriptErrorBox
+        title="Transcription failed"
+        description={
+          isNonEmptyString(marker.subCode)
+            ? `The transcription provider could not process this recording (${marker.subCode}).`
+            : 'The transcription provider could not process this recording.'
+        }
+      />
+    );
+  }
+
+  if (isUndefined(entries)) {
+    return (
+      <TranscriptErrorBox
+        title="Unrecognized transcript format"
+        description="The stored transcript does not match the expected diarized format."
+      />
+    );
+  }
+
+  if (entries.length === 0) {
+    return (
+      <StyledTranscriptCenteredState>
+        The transcript is empty.
+      </StyledTranscriptCenteredState>
+    );
+  }
+
+  return (
+    <TranscriptEntryList
+      entries={entries}
+      currentTimeSeconds={currentTimeSeconds}
+      calendarEventParticipants={calendarEventParticipants}
+    />
+  );
+};