@twentyhq/call-recorder 1.0.1 → 1.0.2

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

@@ -1,141 +0,0 @@
-// 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

@@ -1,51 +0,0 @@
-// 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

@@ -1,40 +0,0 @@
-// 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

@@ -1,172 +0,0 @@
-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);

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

@@ -1,155 +0,0 @@
-import { isUndefined } from '@sniptt/guards';
-import { useEffect, useState } from 'react';
-import { CoreApiClient } from 'twenty-client-sdk/core';
-
-type CalendarEventRecordingState = {
-  transcript: unknown;
-  videoFile: CalendarEventRecordingVideoFile | undefined;
-  isCalendarEventRecordingQueryLoading: boolean;
-  errorMessage: string | undefined;
-};
-
-type CalendarEventRecordingVideoFile = {
-  fileId: string;
-  label: string | null;
-  url: string | null;
-  extension: string | null;
-};
-
-type CalendarEventRecordingCallRecordingNode = {
-  id: string;
-  transcript: unknown;
-  video: CalendarEventRecordingVideoFile[] | null;
-};
-
-type CalendarEventRecordingCallRecordingEdge = {
-  node: CalendarEventRecordingCallRecordingNode;
-};
-
-const CALENDAR_EVENT_RECORDING_LOOKUP_LIMIT = 10;
-const CALENDAR_EVENT_RECORDING_ERROR_MESSAGE = 'Please try again later.';
-
-export const useCalendarEventRecording = (
-  calendarEventId: string | undefined,
-): CalendarEventRecordingState => {
-  const [state, setState] = useState<CalendarEventRecordingState>({
-    transcript: undefined,
-    videoFile: undefined,
-    isCalendarEventRecordingQueryLoading: !isUndefined(calendarEventId),
-    errorMessage: undefined,
-  });
-
-  useEffect(() => {
-    if (isUndefined(calendarEventId)) {
-      setState({
-        transcript: undefined,
-        videoFile: undefined,
-        isCalendarEventRecordingQueryLoading: false,
-        errorMessage: undefined,
-      });
-      return;
-    }
-
-    let cancelled = false;
-
-    const fetchRecording = async () => {
-      setState({
-        transcript: undefined,
-        videoFile: undefined,
-        isCalendarEventRecordingQueryLoading: true,
-        errorMessage: undefined,
-      });
-
-      try {
-        const client = new CoreApiClient();
-        const queryResult = await client.query({
-          callRecordings: {
-            __args: {
-              filter: { calendarEventId: { eq: calendarEventId } },
-              orderBy: [{ startedAt: 'DescNullsLast' }],
-              first: CALENDAR_EVENT_RECORDING_LOOKUP_LIMIT,
-            },
-            edges: {
-              node: {
-                id: true,
-                transcript: true,
-                video: {
-                  fileId: true,
-                  label: true,
-                  url: true,
-                  extension: true,
-                },
-              },
-            },
-          },
-        });
-
-        if (cancelled) {
-          return;
-        }
-
-        const callRecordingEdges = (queryResult.callRecordings?.edges ??
-          []) as CalendarEventRecordingCallRecordingEdge[];
-        const callRecordingNodes = callRecordingEdges.map(
-          (callRecordingEdge) => callRecordingEdge.node,
-        );
-        const callRecordingNode =
-          selectCalendarEventRecording(callRecordingNodes);
-
-        setState({
-          transcript: callRecordingNode?.transcript ?? undefined,
-          videoFile: isUndefined(callRecordingNode)
-            ? undefined
-            : getVideoFile(callRecordingNode),
-          isCalendarEventRecordingQueryLoading: false,
-          errorMessage: undefined,
-        });
-      } catch {
-        if (cancelled) {
-          return;
-        }
-
-        setState({
-          transcript: undefined,
-          videoFile: undefined,
-          isCalendarEventRecordingQueryLoading: false,
-          errorMessage: CALENDAR_EVENT_RECORDING_ERROR_MESSAGE,
-        });
-      }
-    };
-
-    fetchRecording();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [calendarEventId]);
-
-  return state;
-};
-
-const hasTranscript = (
-  callRecordingNode: CalendarEventRecordingCallRecordingNode,
-): boolean =>
-  !isUndefined(callRecordingNode.transcript) &&
-  callRecordingNode.transcript !== null;
-
-const getVideoFile = (
-  callRecordingNode: CalendarEventRecordingCallRecordingNode,
-): CalendarEventRecordingVideoFile | undefined =>
-  callRecordingNode.video?.find(
-    (videoFile) => !isUndefined(videoFile.url) && videoFile.url !== null,
-  );
-
-const selectCalendarEventRecording = (
-  callRecordingNodes: CalendarEventRecordingCallRecordingNode[],
-): CalendarEventRecordingCallRecordingNode | undefined =>
-  callRecordingNodes.find(
-    (callRecordingNode) =>
-      hasTranscript(callRecordingNode) &&
-      !isUndefined(getVideoFile(callRecordingNode)),
-  ) ??
-  callRecordingNodes.find(hasTranscript) ??
-  callRecordingNodes.find(
-    (callRecordingNode) => !isUndefined(getVideoFile(callRecordingNode)),
-  );

package/src/front-components/types/calendar-event-participant-by-speaker-name.type.ts

@@ -1,6 +0,0 @@
-import { type CalendarEventRecordingParticipant } from 'src/front-components/types/calendar-event-recording-participant.type';
-
-export type CalendarEventParticipantBySpeakerName = Map<
-  string,
-  CalendarEventRecordingParticipant
->;

package/src/front-components/types/calendar-event-recording-participant.type.ts

@@ -1,7 +0,0 @@
-export type CalendarEventRecordingParticipant = {
-  id: string;
-  avatarUrl: string | undefined;
-  displayName: string | undefined;
-  nameCandidates: string[];
-  placeholderColorSeed: string;
-};

package/src/front-components/types/transcript-entry.type.ts

@@ -1,13 +0,0 @@
-export type TranscriptWord = {
-  text: string;
-  startSeconds: number | undefined;
-  endSeconds: number | undefined;
-};
-
-export type TranscriptEntry = {
-  speakerName: string;
-  startSeconds: number | undefined;
-  endSeconds: number | undefined;
-  text: string;
-  words: TranscriptWord[];
-};

package/src/front-components/utils/__tests__/find-active-transcript-entry-index.test.ts

@@ -1,66 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import { type TranscriptEntry } from 'src/front-components/types/transcript-entry.type';
-import { findActiveTranscriptEntryIndex } from 'src/front-components/utils/find-active-transcript-entry-index.util';
-
-const makeTranscriptEntry = ({
-  startSeconds,
-  endSeconds,
-}: {
-  startSeconds: number | undefined;
-  endSeconds: number | undefined;
-}): TranscriptEntry => ({
-  speakerName: 'Ada Lovelace',
-  startSeconds,
-  endSeconds,
-  text: 'Hello',
-  words: [{ text: 'Hello', startSeconds, endSeconds }],
-});
-
-describe('findActiveTranscriptEntryIndex', () => {
-  it('does not keep an open-ended entry active after the next entry starts', () => {
-    expect(
-      findActiveTranscriptEntryIndex(
-        [
-          makeTranscriptEntry({ startSeconds: 1, endSeconds: undefined }),
-          makeTranscriptEntry({ startSeconds: 10, endSeconds: 20 }),
-        ],
-        25,
-      ),
-    ).toBe(-1);
-  });
-
-  it('uses the next known start as the boundary for entries without an end time', () => {
-    expect(
-      findActiveTranscriptEntryIndex(
-        [
-          makeTranscriptEntry({ startSeconds: 1, endSeconds: undefined }),
-          makeTranscriptEntry({ startSeconds: 10, endSeconds: 20 }),
-        ],
-        9,
-      ),
-    ).toBe(0);
-
-    expect(
-      findActiveTranscriptEntryIndex(
-        [
-          makeTranscriptEntry({ startSeconds: 1, endSeconds: undefined }),
-          makeTranscriptEntry({ startSeconds: 10, endSeconds: 20 }),
-        ],
-        10,
-      ),
-    ).toBe(1);
-  });
-
-  it('keeps the final open-ended entry active after it starts', () => {
-    expect(
-      findActiveTranscriptEntryIndex(
-        [
-          makeTranscriptEntry({ startSeconds: 1, endSeconds: 2 }),
-          makeTranscriptEntry({ startSeconds: 10, endSeconds: undefined }),
-        ],
-        25,
-      ),
-    ).toBe(1);
-  });
-});

package/src/front-components/utils/__tests__/format-transcript-timestamp.test.ts

@@ -1,29 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import { formatTranscriptTimestamp } from 'src/front-components/utils/format-transcript-timestamp.util';
-
-describe('formatTranscriptTimestamp', () => {
-  it('formats sub-hour durations as minutes and padded seconds', () => {
-    expect(formatTranscriptTimestamp(0)).toBe('0:00');
-    expect(formatTranscriptTimestamp(5)).toBe('0:05');
-    expect(formatTranscriptTimestamp(65)).toBe('1:05');
-    expect(formatTranscriptTimestamp(3599)).toBe('59:59');
-  });
-
-  it('adds an hour part with padded minutes past one hour', () => {
-    expect(formatTranscriptTimestamp(3600)).toBe('1:00:00');
-    expect(formatTranscriptTimestamp(3725)).toBe('1:02:05');
-    expect(formatTranscriptTimestamp(7322)).toBe('2:02:02');
-  });
-
-  it('floors fractional seconds', () => {
-    expect(formatTranscriptTimestamp(1.9)).toBe('0:01');
-    expect(formatTranscriptTimestamp(59.999)).toBe('0:59');
-  });
-
-  it('clamps negative and non-finite input to zero', () => {
-    expect(formatTranscriptTimestamp(-12)).toBe('0:00');
-    expect(formatTranscriptTimestamp(Number.NaN)).toBe('0:00');
-    expect(formatTranscriptTimestamp(Number.POSITIVE_INFINITY)).toBe('0:00');
-  });
-});