@twentyhq/call-recorder 1.0.0

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

@@ -0,0 +1,52 @@
+import styled from '@emotion/styled';
+import { memo, type SyntheticEvent } from 'react';
+
+import { recordingThemeCssVariables } from 'src/front-components/constants/recording-theme-css-variables';
+
+const DEFAULT_VIDEO_ASPECT_RATIO = '16 / 9';
+
+const StyledVideoViewport = styled.div`
+  aspect-ratio: ${DEFAULT_VIDEO_ASPECT_RATIO};
+  background: ${recordingThemeCssVariables.background.primary};
+  border-radius: ${recordingThemeCssVariables.border.radiusSm};
+  overflow: hidden;
+  width: 100%;
+`;
+
+const StyledVideo = styled.video`
+  accent-color: ${recordingThemeCssVariables.accent.primary};
+  background: ${recordingThemeCssVariables.background.primary};
+  color-scheme: light dark;
+  display: block;
+  height: 100%;
+  object-fit: contain;
+  width: 100%;
+`;
+
+type RecordingVideoPlayerProps = {
+  src: string | undefined;
+  onTimeUpdate: (currentTimeSeconds: number) => void;
+};
+
+const RecordingVideoPlayerComponent = ({
+  src,
+  onTimeUpdate,
+}: RecordingVideoPlayerProps) => {
+  const handleTimeUpdate = (event: SyntheticEvent<HTMLVideoElement>) => {
+    onTimeUpdate(event.currentTarget.currentTime);
+  };
+
+  return (
+    <StyledVideoViewport>
+      <StyledVideo
+        controls
+        playsInline
+        preload="metadata"
+        src={src}
+        onTimeUpdate={handleTimeUpdate}
+      />
+    </StyledVideoViewport>
+  );
+};
+
+export const RecordingVideoPlayer = memo(RecordingVideoPlayerComponent);

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

@@ -0,0 +1,61 @@
+import styled from '@emotion/styled';
+import { useMemo } from 'react';
+
+import { TranscriptEntryListItem } from 'src/front-components/components/TranscriptEntryListItem';
+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 { type TranscriptEntry } from 'src/front-components/types/transcript-entry.type';
+import { buildCalendarEventParticipantBySpeakerName } from 'src/front-components/utils/build-calendar-event-participant-by-speaker-name.util';
+import { findActiveTranscriptEntryIndex } from 'src/front-components/utils/find-active-transcript-entry-index.util';
+import { getCalendarEventParticipantForSpeakerName } from 'src/front-components/utils/get-calendar-event-participant-for-speaker-name.util';
+
+const StyledTranscriptContainer = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: ${recordingThemeCssVariables.spacing[2]};
+  min-height: 0;
+`;
+
+type TranscriptEntryListProps = {
+  entries: TranscriptEntry[];
+  currentTimeSeconds: number;
+  calendarEventParticipants: CalendarEventRecordingParticipant[];
+};
+
+export const TranscriptEntryList = ({
+  entries,
+  currentTimeSeconds,
+  calendarEventParticipants,
+}: TranscriptEntryListProps) => {
+  const activeEntryIndex = findActiveTranscriptEntryIndex(
+    entries,
+    currentTimeSeconds,
+  );
+  const calendarEventParticipantBySpeakerName = useMemo(
+    () => buildCalendarEventParticipantBySpeakerName(calendarEventParticipants),
+    [calendarEventParticipants],
+  );
+
+  return (
+    <StyledTranscriptContainer>
+      {entries.map((entry, entryIndex) => {
+        const calendarEventParticipant =
+          getCalendarEventParticipantForSpeakerName({
+            speakerName: entry.speakerName,
+            calendarEventParticipantBySpeakerName,
+          });
+
+        return (
+          <TranscriptEntryListItem
+            key={entryIndex}
+            entry={entry}
+            isActive={entryIndex === activeEntryIndex}
+            currentTimeSeconds={currentTimeSeconds}
+            calendarEventParticipant={calendarEventParticipant}
+          />
+        );
+      })}
+    </StyledTranscriptContainer>
+  );
+};

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

@@ -0,0 +1,115 @@
+import styled from '@emotion/styled';
+import { isUndefined } from '@sniptt/guards';
+
+import { TranscriptSpeakerChip } from 'src/front-components/components/TranscriptSpeakerChip';
+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 {
+  type TranscriptEntry,
+  type TranscriptWord,
+} from 'src/front-components/types/transcript-entry.type';
+import { formatTranscriptTimestamp } from 'src/front-components/utils/format-transcript-timestamp.util';
+
+const StyledEntry = styled.div<{ $isActive: boolean }>`
+  align-items: flex-start;
+  background: ${({ $isActive }) =>
+    $isActive
+      ? recordingThemeCssVariables.background.transparentBlue
+      : 'transparent'};
+  border-radius: ${recordingThemeCssVariables.border.radiusSm};
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: ${recordingThemeCssVariables.spacing[2]};
+  justify-content: center;
+  padding: ${recordingThemeCssVariables.spacing[2]};
+  width: 100%;
+`;
+
+const StyledEntryHeader = styled.div`
+  align-items: center;
+  align-self: stretch;
+  display: flex;
+  gap: ${recordingThemeCssVariables.spacing[2]};
+  min-height: ${recordingThemeCssVariables.spacing[6]};
+  min-width: 0;
+`;
+
+const StyledTimestamp = styled.span`
+  color: ${recordingThemeCssVariables.font.colorTertiary};
+  font-size: ${recordingThemeCssVariables.font.sizeXs};
+  line-height: 1.4;
+`;
+
+const StyledEntryText = styled.p`
+  align-self: stretch;
+  color: ${recordingThemeCssVariables.font.colorSecondary};
+  font-size: ${recordingThemeCssVariables.font.sizeSm};
+  line-height: 1.4;
+  margin: 0;
+`;
+
+const StyledWord = styled.span<{ $isSpoken: boolean }>`
+  color: ${({ $isSpoken }) =>
+    $isSpoken
+      ? recordingThemeCssVariables.font.colorPrimary
+      : recordingThemeCssVariables.font.colorSecondary};
+  line-height: 1.4;
+  transition: color 0.15s ease;
+`;
+
+type TranscriptEntryListItemProps = {
+  entry: TranscriptEntry;
+  isActive: boolean;
+  currentTimeSeconds: number;
+  calendarEventParticipant: CalendarEventRecordingParticipant | undefined;
+};
+
+export const TranscriptEntryListItem = ({
+  entry,
+  isActive,
+  currentTimeSeconds,
+  calendarEventParticipant,
+}: TranscriptEntryListItemProps) => {
+  const speakerDisplayName =
+    calendarEventParticipant?.displayName ?? entry.speakerName;
+
+  return (
+    <StyledEntry $isActive={isActive}>
+      <StyledEntryHeader>
+        <TranscriptSpeakerChip
+          speakerName={speakerDisplayName}
+          avatarUrl={calendarEventParticipant?.avatarUrl}
+          placeholderColorSeed={
+            calendarEventParticipant?.placeholderColorSeed ?? speakerDisplayName
+          }
+        />
+        {!isUndefined(entry.startSeconds) && (
+          <StyledTimestamp>
+            {formatTranscriptTimestamp(entry.startSeconds)}
+          </StyledTimestamp>
+        )}
+      </StyledEntryHeader>
+      <StyledEntryText>
+        {entry.words.map((word, wordIndex) => (
+          <StyledWord
+            key={wordIndex}
+            $isSpoken={isWordSpoken({ word, currentTimeSeconds })}
+          >
+            {wordIndex > 0 ? ' ' : ''}
+            {word.text}
+          </StyledWord>
+        ))}
+      </StyledEntryText>
+    </StyledEntry>
+  );
+};
+
+const isWordSpoken = ({
+  word,
+  currentTimeSeconds,
+}: {
+  word: TranscriptWord;
+  currentTimeSeconds: number;
+}): boolean =>
+  !isUndefined(word.startSeconds) && currentTimeSeconds >= word.startSeconds;

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

@@ -0,0 +1,48 @@
+import styled from '@emotion/styled';
+
+import { recordingThemeCssVariables } from 'src/front-components/constants/recording-theme-css-variables';
+
+const StyledStateContainer = styled.div`
+  box-sizing: border-box;
+  font-family: ${recordingThemeCssVariables.font.family};
+  height: 100%;
+  padding: ${recordingThemeCssVariables.spacing[4]};
+`;
+
+const StyledErrorBox = styled.div`
+  background: ${recordingThemeCssVariables.background.transparentDanger};
+  border: 1px solid ${recordingThemeCssVariables.border.colorDanger};
+  border-radius: ${recordingThemeCssVariables.border.radiusMd};
+  display: flex;
+  flex-direction: column;
+  gap: ${recordingThemeCssVariables.spacing[1]};
+  padding: ${recordingThemeCssVariables.spacing[3]};
+`;
+
+const StyledErrorTitle = styled.span`
+  color: ${recordingThemeCssVariables.font.colorDanger};
+  font-size: ${recordingThemeCssVariables.font.sizeSm};
+  font-weight: ${recordingThemeCssVariables.font.weightMedium};
+`;
+
+const StyledErrorDescription = styled.span`
+  color: ${recordingThemeCssVariables.font.colorSecondary};
+  font-size: ${recordingThemeCssVariables.font.sizeSm};
+`;
+
+type TranscriptErrorBoxProps = {
+  title: string;
+  description: string;
+};
+
+export const TranscriptErrorBox = ({
+  title,
+  description,
+}: TranscriptErrorBoxProps) => (
+  <StyledStateContainer>
+    <StyledErrorBox>
+      <StyledErrorTitle>{title}</StyledErrorTitle>
+      <StyledErrorDescription>{description}</StyledErrorDescription>
+    </StyledErrorBox>
+  </StyledStateContainer>
+);

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

@@ -0,0 +1,141 @@
+// Duplicates minimal twenty-ui Avatar logic for this app.
+// Remove once twenty-ui can be imported safely in front components.
+import styled from '@emotion/styled';
+import { useState } from 'react';
+
+import { recordingThemeCssVariables } from 'src/front-components/constants/recording-theme-css-variables';
+import { isNonEmptyString } from 'src/logic-functions/utils/is-non-empty-string.util';
+
+const AVATAR_COLOR_NAMES = [
+  'red',
+  'ruby',
+  'crimson',
+  'tomato',
+  'orange',
+  'amber',
+  'yellow',
+  'lime',
+  'grass',
+  'green',
+  'jade',
+  'mint',
+  'turquoise',
+  'cyan',
+  'sky',
+  'blue',
+  'iris',
+  'violet',
+  'purple',
+  'plum',
+  'pink',
+  'bronze',
+  'gold',
+  'brown',
+  'gray',
+] as const;
+
+const StyledAvatar = styled.div<{
+  $backgroundColor: string;
+  $color: string;
+}>`
+  align-items: center;
+  background: ${({ $backgroundColor }) => $backgroundColor};
+  border-radius: 50px;
+  box-sizing: border-box;
+  color: ${({ $color }) => $color};
+  display: flex;
+  flex-shrink: 0;
+  font-size: ${recordingThemeCssVariables.font.sizeXs};
+  font-weight: ${recordingThemeCssVariables.font.weightMedium};
+  height: 16px;
+  justify-content: center;
+  line-height: 15px;
+  overflow: hidden;
+  width: 16px;
+`;
+
+const StyledAvatarImage = styled.img`
+  height: 100%;
+  object-fit: cover;
+  width: 100%;
+`;
+
+type TranscriptSpeakerAvatarProps = {
+  speakerName: string;
+  avatarUrl: string | undefined;
+  placeholderColorSeed: string;
+};
+
+const getSpeakerInitial = (speakerName: string) =>
+  speakerName.trim().charAt(0).toUpperCase() || '-';
+
+export const TranscriptSpeakerAvatar = ({
+  speakerName,
+  avatarUrl,
+  placeholderColorSeed,
+}: TranscriptSpeakerAvatarProps) => {
+  const [erroredAvatarUrl, setErroredAvatarUrl] = useState<string | undefined>(
+    undefined,
+  );
+
+  const shouldShowAvatarImage =
+    isNonEmptyString(avatarUrl) && erroredAvatarUrl !== avatarUrl;
+
+  const handleAvatarImageError = () => {
+    if (isNonEmptyString(avatarUrl)) {
+      setErroredAvatarUrl(avatarUrl);
+    }
+  };
+
+  const avatarPlaceholderColor = getAvatarPlaceholderColor({
+    placeholderColorSeed,
+    variant: 12,
+  });
+  const avatarPlaceholderBackgroundColor = getAvatarPlaceholderColor({
+    placeholderColorSeed,
+    variant: 4,
+  });
+
+  return (
+    <StyledAvatar
+      aria-hidden="true"
+      $backgroundColor={avatarPlaceholderBackgroundColor}
+      $color={avatarPlaceholderColor}
+    >
+      {shouldShowAvatarImage ? (
+        <StyledAvatarImage
+          src={avatarUrl}
+          alt=""
+          onError={handleAvatarImageError}
+        />
+      ) : (
+        getSpeakerInitial(speakerName)
+      )}
+    </StyledAvatar>
+  );
+};
+
+const getAvatarPlaceholderColor = ({
+  placeholderColorSeed,
+  variant,
+}: {
+  placeholderColorSeed: string;
+  variant: 4 | 12;
+}): string => {
+  const avatarColorName =
+    AVATAR_COLOR_NAMES[
+      Math.abs(hashString(placeholderColorSeed)) % AVATAR_COLOR_NAMES.length
+    ];
+
+  return `var(--t-color-${avatarColorName}${variant})`;
+};
+
+const hashString = (value: string): number => {
+  let hash = 0;
+
+  for (let valueIndex = 0; valueIndex < value.length; valueIndex++) {
+    hash = value.charCodeAt(valueIndex) + ((hash << 5) - hash);
+  }
+
+  return hash;
+};

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

@@ -0,0 +1,51 @@
+// Duplicates minimal twenty-ui Chip logic for this app.
+// Remove once twenty-ui can be imported safely in front components.
+import styled from '@emotion/styled';
+
+import { TranscriptSpeakerAvatar } from 'src/front-components/components/TranscriptSpeakerAvatar';
+import { recordingThemeCssVariables } from 'src/front-components/constants/recording-theme-css-variables';
+
+const StyledSpeakerChip = styled.span`
+  align-items: center;
+  border-radius: ${recordingThemeCssVariables.border.radiusSm};
+  color: ${recordingThemeCssVariables.font.colorPrimary};
+  display: inline-flex;
+  font-size: ${recordingThemeCssVariables.font.sizeSm};
+  font-weight: ${recordingThemeCssVariables.font.weightMedium};
+  gap: ${recordingThemeCssVariables.spacing[1]};
+  line-height: 1.4;
+  max-width: 100%;
+  min-width: 0;
+  text-decoration: none;
+  white-space: nowrap;
+`;
+
+const StyledSpeakerName = styled.span`
+  flex-shrink: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+type TranscriptSpeakerChipProps = {
+  speakerName: string;
+  avatarUrl: string | undefined;
+  placeholderColorSeed: string;
+};
+
+export const TranscriptSpeakerChip = ({
+  speakerName,
+  avatarUrl,
+  placeholderColorSeed,
+}: TranscriptSpeakerChipProps) => {
+  return (
+    <StyledSpeakerChip>
+      <TranscriptSpeakerAvatar
+        speakerName={speakerName}
+        avatarUrl={avatarUrl}
+        placeholderColorSeed={placeholderColorSeed}
+      />
+      <StyledSpeakerName>{speakerName}</StyledSpeakerName>
+    </StyledSpeakerChip>
+  );
+};

package/src/front-components/constants/recording-theme-css-variables.ts

@@ -0,0 +1,40 @@
+// Avoid the SDK UI entrypoint until its bundle is safe for the browser runtime.
+export const recordingThemeCssVariables = {
+  accent: {
+    primary: 'var(--t-accent-accent9)',
+  },
+  background: {
+    primary: 'var(--t-background-primary)',
+    secondary: 'var(--t-background-secondary)',
+    transparentBlue: 'var(--t-background-transparent-blue)',
+    transparentDanger: 'var(--t-background-transparent-danger)',
+  },
+  border: {
+    colorDanger: 'var(--t-border-color-danger)',
+    colorLight: 'var(--t-border-color-light)',
+    colorMedium: 'var(--t-border-color-medium)',
+    radiusMd: 'var(--t-border-radius-md)',
+    radiusSm: 'var(--t-border-radius-sm)',
+  },
+  boxShadow: {
+    light: 'var(--t-box-shadow-light)',
+  },
+  font: {
+    colorDanger: 'var(--t-font-color-danger)',
+    colorPrimary: 'var(--t-font-color-primary)',
+    colorSecondary: 'var(--t-font-color-secondary)',
+    colorTertiary: 'var(--t-font-color-tertiary)',
+    family: 'var(--t-font-family)',
+    sizeMd: 'var(--t-font-size-md)',
+    sizeSm: 'var(--t-font-size-sm)',
+    sizeXs: 'var(--t-font-size-xs)',
+    weightMedium: 'var(--t-font-weight-medium)',
+  },
+  spacing: {
+    1: 'var(--t-spacing-1)',
+    2: 'var(--t-spacing-2)',
+    3: 'var(--t-spacing-3)',
+    4: 'var(--t-spacing-4)',
+    6: 'var(--t-spacing-6)',
+  },
+} as const;

package/src/front-components/hooks/use-calendar-event-participants.ts

@@ -0,0 +1,172 @@
+import { useEffect, useState } from 'react';
+import { CoreApiClient } from 'twenty-client-sdk/core';
+
+import { type CalendarEventRecordingParticipant } from 'src/front-components/types/calendar-event-recording-participant.type';
+import { getAbsoluteAvatarUrl } from 'src/front-components/utils/get-absolute-avatar-url.util';
+import { isNonEmptyString } from 'src/logic-functions/utils/is-non-empty-string.util';
+
+const CALENDAR_EVENT_PARTICIPANT_LOOKUP_LIMIT = 100;
+
+type CalendarEventParticipantName = {
+  firstName?: string | null;
+  lastName?: string | null;
+};
+
+type CalendarEventParticipantRelatedRecord = {
+  id?: string | null;
+  avatarUrl?: string | null;
+  name?: CalendarEventParticipantName | null;
+};
+
+type CalendarEventParticipantNode = {
+  id: string;
+  displayName?: string | null;
+  handle?: string | null;
+  personId?: string | null;
+  workspaceMemberId?: string | null;
+  person?: CalendarEventParticipantRelatedRecord | null;
+  workspaceMember?: CalendarEventParticipantRelatedRecord | null;
+};
+
+type CalendarEventParticipantEdge = {
+  node: CalendarEventParticipantNode;
+};
+
+type UseCalendarEventParticipantsReturn = {
+  calendarEventParticipants: CalendarEventRecordingParticipant[];
+};
+
+export const useCalendarEventParticipants = (
+  calendarEventId: string | undefined,
+): UseCalendarEventParticipantsReturn => {
+  const [calendarEventParticipants, setCalendarEventParticipants] = useState<
+    CalendarEventRecordingParticipant[]
+  >([]);
+
+  useEffect(() => {
+    if (!isNonEmptyString(calendarEventId)) {
+      setCalendarEventParticipants([]);
+      return;
+    }
+
+    let cancelled = false;
+
+    const fetchCalendarEventParticipants = async () => {
+      try {
+        const client = new CoreApiClient();
+        const queryResult = await client.query({
+          calendarEventParticipants: {
+            __args: {
+              filter: { calendarEventId: { eq: calendarEventId } },
+              first: CALENDAR_EVENT_PARTICIPANT_LOOKUP_LIMIT,
+            },
+            edges: {
+              node: {
+                id: true,
+                displayName: true,
+                handle: true,
+                personId: true,
+                workspaceMemberId: true,
+                person: {
+                  id: true,
+                  avatarUrl: true,
+                  name: {
+                    firstName: true,
+                    lastName: true,
+                  },
+                },
+                workspaceMember: {
+                  id: true,
+                  avatarUrl: true,
+                  name: {
+                    firstName: true,
+                    lastName: true,
+                  },
+                },
+              },
+            },
+          },
+        });
+
+        if (cancelled) {
+          return;
+        }
+
+        const calendarEventParticipantEdges = (queryResult
+          .calendarEventParticipants?.edges ??
+          []) as CalendarEventParticipantEdge[];
+
+        setCalendarEventParticipants(
+          calendarEventParticipantEdges.map((calendarEventParticipantEdge) =>
+            mapCalendarEventParticipantNode(calendarEventParticipantEdge.node),
+          ),
+        );
+      } catch {
+        if (cancelled) {
+          return;
+        }
+
+        setCalendarEventParticipants([]);
+      }
+    };
+
+    fetchCalendarEventParticipants();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [calendarEventId]);
+
+  return { calendarEventParticipants };
+};
+
+const mapCalendarEventParticipantNode = (
+  calendarEventParticipantNode: CalendarEventParticipantNode,
+): CalendarEventRecordingParticipant => {
+  const personName = readFullName(calendarEventParticipantNode.person?.name);
+  const workspaceMemberName = readFullName(
+    calendarEventParticipantNode.workspaceMember?.name,
+  );
+  const calendarDisplayName = readOptionalString(
+    calendarEventParticipantNode.displayName,
+  );
+  const handle = readOptionalString(calendarEventParticipantNode.handle);
+
+  return {
+    id: calendarEventParticipantNode.id,
+    avatarUrl: getAbsoluteAvatarUrl(
+      calendarEventParticipantNode.person?.avatarUrl ??
+        calendarEventParticipantNode.workspaceMember?.avatarUrl,
+    ),
+    displayName:
+      personName ?? workspaceMemberName ?? calendarDisplayName ?? handle,
+    nameCandidates: [
+      calendarDisplayName,
+      personName,
+      workspaceMemberName,
+      handle,
+    ].filter((nameCandidate): nameCandidate is string =>
+      isNonEmptyString(nameCandidate),
+    ),
+    placeholderColorSeed:
+      calendarEventParticipantNode.workspaceMemberId ??
+      calendarEventParticipantNode.personId ??
+      calendarEventParticipantNode.id,
+  };
+};
+
+const readFullName = (
+  name: CalendarEventParticipantName | null | undefined,
+): string | undefined => {
+  const firstName = readOptionalString(name?.firstName);
+  const lastName = readOptionalString(name?.lastName);
+  const fullName = [firstName, lastName]
+    .filter((namePart): namePart is string => isNonEmptyString(namePart))
+    .join(' ');
+
+  return isNonEmptyString(fullName) ? fullName : undefined;
+};
+
+const readOptionalString = (
+  value: string | null | undefined,
+): string | undefined => (isNonEmptyString(value) ? value.trim() : undefined);