@agent-native/core 0.140.0 → 0.141.0

package/corpus/templates/calendar/server/lib/booking-emails.ts

@@ -11,12 +11,6 @@ import {
   DEFAULT_BOOKING_TIMEZONE,
   safeBookingTimeZone,
 } from "./booking-timezone.js";
-import {
-  CALENDAR_BOOKING_CANCELLED_EMAIL_ID,
-  CALENDAR_BOOKING_CANCELLED_HOST_EMAIL_ID,
-  CALENDAR_BOOKING_CONFIRMED_EMAIL_ID,
-  CALENDAR_BOOKING_RECEIVED_EMAIL_ID,
-} from "./emails.js";
 
 function stripCrlf(value: string | undefined): string {
   return (value ?? "").replace(/[\r\n]+/g, " ").trim();
@@ -63,128 +57,6 @@ async function sendBestEffort(
   }
 }
 
-export function renderBookingConfirmedEmail({
-  title,
-  when,
-  host,
-  manageUrl,
-  meetingLink,
-}: {
-  title: string;
-  when: string;
-  host: string;
-  manageUrl: string;
-  meetingLink?: string | null;
-}) {
-  const paragraphs = [
-    `You're booked for ${emailStrong(title)} with ${emailStrong(host)}.`,
-    `Time: ${emailStrong(when)}.`,
-  ];
-  if (meetingLink) {
-    paragraphs.push(`Meeting link: ${emailLink("Join meeting", meetingLink)}.`);
-  }
-
-  return {
-    subject: `Confirmed: ${title}`,
-    ...renderEmail({
-      preheader: `You're booked for ${title} on ${when}.`,
-      heading: "Your meeting is booked",
-      paragraphs,
-      cta: { label: "Manage booking", url: manageUrl },
-      footer:
-        "Use the manage link if you need to cancel or reschedule this meeting.",
-    }),
-  };
-}
-
-export function renderBookingReceivedEmail({
-  title,
-  when,
-  attendeeName,
-  attendee,
-  manageUrl,
-  meetingLink,
-}: {
-  title: string;
-  when: string;
-  attendeeName: string;
-  attendee: string;
-  manageUrl: string;
-  meetingLink?: string | null;
-}) {
-  return {
-    subject: `New booking: ${title}`,
-    ...renderEmail({
-      preheader: `${attendeeName} booked ${title} on ${when}.`,
-      heading: "New booking",
-      paragraphs: [
-        `${emailStrong(attendeeName)} booked ${emailStrong(title)}.`,
-        `Time: ${emailStrong(when)}.`,
-        `Guest: ${emailStrong(attendee)}.`,
-        ...(meetingLink
-          ? [`Meeting link: ${emailLink("Join meeting", meetingLink)}.`]
-          : []),
-      ],
-      cta: { label: "View booking", url: manageUrl },
-      footer: "This booking was created from your calendar booking link.",
-    }),
-  };
-}
-
-export function renderBookingCancelledEmail({
-  title,
-  when,
-  host,
-  bookAgainUrl,
-}: {
-  title: string;
-  when: string;
-  host: string;
-  bookAgainUrl?: string;
-}) {
-  return {
-    subject: `Cancelled: ${title}`,
-    ...renderEmail({
-      preheader: `${title} on ${when} was cancelled.`,
-      heading: "Your meeting was cancelled",
-      paragraphs: [
-        `${emailStrong(title)} with ${emailStrong(host || "the host")} has been cancelled.`,
-        `Original time: ${emailStrong(when)}.`,
-      ],
-      cta: bookAgainUrl
-        ? { label: "Book another time", url: bookAgainUrl }
-        : undefined,
-      footer: "If this was unexpected, contact the meeting host.",
-    }),
-  };
-}
-
-export function renderBookingCancelledHostEmail({
-  title,
-  when,
-  attendeeName,
-  attendee,
-}: {
-  title: string;
-  when: string;
-  attendeeName: string;
-  attendee: string;
-}) {
-  return {
-    subject: `Cancelled booking: ${title}`,
-    ...renderEmail({
-      preheader: `${attendeeName}'s booking for ${title} was cancelled.`,
-      heading: "Booking cancelled",
-      paragraphs: [
-        `${emailStrong(attendeeName)}'s booking for ${emailStrong(title)} was cancelled.`,
-        `Original time: ${emailStrong(when)}.`,
-        `Guest: ${emailStrong(attendee)}.`,
-      ],
-      footer: "No further action is needed.",
-    }),
-  };
-}
-
 export async function sendBookingConfirmationEmails({
   booking,
   hostEmail,
@@ -202,31 +74,54 @@ export async function sendBookingConfirmationEmails({
   const attendee = stripCrlf(booking.email);
   const attendeeName = stripCrlf(booking.name) || "there";
 
+  const attendeeParagraphs = [
+    `You're booked for ${emailStrong(title)} with ${emailStrong(host)}.`,
+    `Time: ${emailStrong(when)}.`,
+  ];
+  if (booking.meetingLink) {
+    attendeeParagraphs.push(
+      `Meeting link: ${emailLink("Join meeting", booking.meetingLink)}.`,
+    );
+  }
+
+  const attendeeEmail = renderEmail({
+    preheader: `You're booked for ${title} on ${when}.`,
+    heading: "Your meeting is booked",
+    paragraphs: attendeeParagraphs,
+    cta: { label: "Manage booking", url: manageUrl },
+    footer:
+      "Use the manage link if you need to cancel or reschedule this meeting.",
+  });
+
   await sendBestEffort("attendee confirmation", {
     to: attendee,
-    ...renderBookingConfirmedEmail({
-      title,
-      when,
-      host,
-      manageUrl,
-      meetingLink: booking.meetingLink,
-    }),
+    subject: `Confirmed: ${title}`,
+    html: attendeeEmail.html,
+    text: attendeeEmail.text,
     replyTo: host,
-    templateId: CALENDAR_BOOKING_CONFIRMED_EMAIL_ID,
+  });
+
+  const hostEmailMessage = renderEmail({
+    preheader: `${attendeeName} booked ${title} on ${when}.`,
+    heading: "New booking",
+    paragraphs: [
+      `${emailStrong(attendeeName)} booked ${emailStrong(title)}.`,
+      `Time: ${emailStrong(when)}.`,
+      `Guest: ${emailStrong(attendee)}.`,
+      ...(booking.meetingLink
+        ? [`Meeting link: ${emailLink("Join meeting", booking.meetingLink)}.`]
+        : []),
+    ],
+    cta: { label: "View booking", url: manageUrl },
+    footer: "This booking was created from your calendar booking link.",
   });
 
   await sendBestEffort("host notification", {
     to: host,
-    ...renderBookingReceivedEmail({
-      title,
-      when,
-      attendeeName,
-      attendee,
-      manageUrl,
-      meetingLink: booking.meetingLink,
-    }),
+    subject: `New booking: ${title}`,
+    html: hostEmailMessage.html,
+    text: hostEmailMessage.text,
     replyTo: attendee,
-    templateId: CALENDAR_BOOKING_RECEIVED_EMAIL_ID,
   });
 }
 
@@ -247,24 +142,45 @@ export async function sendBookingCancellationEmails({
   const attendee = stripCrlf(booking.email);
   const attendeeName = stripCrlf(booking.name) || "The guest";
 
+  const attendeeEmail = renderEmail({
+    preheader: `${title} on ${when} was cancelled.`,
+    heading: "Your meeting was cancelled",
+    paragraphs: [
+      `${emailStrong(title)} with ${emailStrong(host || "the host")} has been cancelled.`,
+      `Original time: ${emailStrong(when)}.`,
+    ],
+    cta: bookAgainUrl
+      ? { label: "Book another time", url: bookAgainUrl }
+      : undefined,
+    footer: "If this was unexpected, contact the meeting host.",
+  });
+
   await sendBestEffort("attendee cancellation", {
     to: attendee,
-    ...renderBookingCancelledEmail({ title, when, host, bookAgainUrl }),
+    subject: `Cancelled: ${title}`,
+    html: attendeeEmail.html,
+    text: attendeeEmail.text,
     replyTo: host || undefined,
-    templateId: CALENDAR_BOOKING_CANCELLED_EMAIL_ID,
   });
 
   if (!host) return;
 
+  const hostEmailMessage = renderEmail({
+    preheader: `${attendeeName}'s booking for ${title} was cancelled.`,
+    heading: "Booking cancelled",
+    paragraphs: [
+      `${emailStrong(attendeeName)}'s booking for ${emailStrong(title)} was cancelled.`,
+      `Original time: ${emailStrong(when)}.`,
+      `Guest: ${emailStrong(attendee)}.`,
+    ],
+    footer: "No further action is needed.",
+  });
+
   await sendBestEffort("host cancellation notification", {
     to: host,
-    ...renderBookingCancelledHostEmail({
-      title,
-      when,
-      attendeeName,
-      attendee,
-    }),
+    subject: `Cancelled booking: ${title}`,
+    html: hostEmailMessage.html,
+    text: hostEmailMessage.text,
     replyTo: attendee,
-    templateId: CALENDAR_BOOKING_CANCELLED_HOST_EMAIL_ID,
   });
 }

package/corpus/templates/calendar/server/lib/event-guest-notifications.ts

@@ -6,10 +6,6 @@ import {
 } from "@agent-native/core/server";
 
 import type { CalendarEvent, DeleteEventScope } from "../../shared/api.js";
-import {
-  CALENDAR_EVENT_CANCELLATION_NOTE_EMAIL_ID,
-  CALENDAR_EVENT_UPDATE_NOTE_EMAIL_ID,
-} from "./emails.js";
 
 export interface GuestNotificationResult {
   requested: boolean;
@@ -100,53 +96,6 @@ function scopeLabel(scope: DeleteEventScope | undefined): string | undefined {
   return "this and following events";
 }
 
-export function renderEventGuestNote({
-  title,
-  organizer,
-  message,
-  when,
-  kind,
-  appliesTo,
-  htmlLink,
-}: {
-  title: string;
-  organizer: string;
-  message: string;
-  when: string;
-  kind: GuestNotificationKind;
-  appliesTo?: string;
-  htmlLink?: string | null;
-}) {
-  const heading =
-    kind === "cancellation" ? "Event cancellation note" : "Event update note";
-  const subjectPrefix =
-    kind === "cancellation" ? "Cancellation note" : "Update note";
-  const eventAction = kind === "cancellation" ? "cancelling" : "updating";
-  const paragraphs = [
-    `${emailStrong(organizer)} added this note while ${eventAction} ${emailStrong(title)}.`,
-    messageParagraph(message),
-    `When: ${emailStrong(when)}.`,
-  ];
-  if (appliesTo) {
-    paragraphs.push(`Applies to: ${emailStrong(appliesTo)}.`);
-  }
-
-  return {
-    subject: `${subjectPrefix}: ${title}`,
-    ...renderEmail({
-      preheader: `${subjectPrefix}: ${title}`,
-      heading,
-      paragraphs,
-      cta:
-        kind === "update" && htmlLink
-          ? { label: "Open in Google Calendar", url: htmlLink }
-          : undefined,
-      footer:
-        "Google Calendar sends the calendar update separately. This message carries the organizer note.",
-    }),
-  };
-}
-
 export async function sendEventGuestNotificationNote({
   event,
   organizerEmail,
@@ -189,14 +138,33 @@ export async function sendEventGuestNotificationNote({
     };
   }
 
-  const rendered = renderEventGuestNote({
-    title: stripCrlf(event.title) || "Calendar event",
-    organizer: stripCrlf(event.organizer?.displayName) || organizerEmail,
-    message: normalizedMessage,
-    when: formatWhen(event),
-    kind,
-    appliesTo: scopeLabel(scope),
-    htmlLink: event.htmlLink,
+  const title = stripCrlf(event.title) || "Calendar event";
+  const organizer = stripCrlf(event.organizer?.displayName) || organizerEmail;
+  const heading =
+    kind === "cancellation" ? "Event cancellation note" : "Event update note";
+  const subjectPrefix =
+    kind === "cancellation" ? "Cancellation note" : "Update note";
+  const eventAction = kind === "cancellation" ? "cancelling" : "updating";
+  const paragraphs = [
+    `${emailStrong(organizer)} added this note while ${eventAction} ${emailStrong(title)}.`,
+    messageParagraph(normalizedMessage),
+    `When: ${emailStrong(formatWhen(event))}.`,
+  ];
+  const appliesTo = scopeLabel(scope);
+  if (appliesTo) {
+    paragraphs.push(`Applies to: ${emailStrong(appliesTo)}.`);
+  }
+
+  const rendered = renderEmail({
+    preheader: `${subjectPrefix}: ${title}`,
+    heading,
+    paragraphs,
+    cta:
+      kind === "update" && event.htmlLink
+        ? { label: "Open in Google Calendar", url: event.htmlLink }
+        : undefined,
+    footer:
+      "Google Calendar sends the calendar update separately. This message carries the organizer note.",
   });
 
   let sentCount = 0;
@@ -206,14 +174,10 @@ export async function sendEventGuestNotificationNote({
       try {
         await sendEmail({
           to,
-          subject: rendered.subject,
+          subject: `${subjectPrefix}: ${title}`,
           html: rendered.html,
           text: rendered.text,
           replyTo: organizerEmail,
-          templateId:
-            kind === "cancellation"
-              ? CALENDAR_EVENT_CANCELLATION_NOTE_EMAIL_ID
-              : CALENDAR_EVENT_UPDATE_NOTE_EMAIL_ID,
         });
         sentCount += 1;
       } catch (error) {

package/corpus/templates/clips/actions/get-recording-player-data.ts

@@ -326,6 +326,7 @@ export default defineAction({
         editsJson: rec.editsJson,
         videoUrl: resolvedVideoUrl,
         videoFormat: rec.videoFormat,
+        videoSizeBytes: rec.videoSizeBytes ?? null,
         width: rec.width,
         height: rec.height,
         hasAudio: Boolean(rec.hasAudio),

package/corpus/templates/clips/actions/invite-member.ts

@@ -24,7 +24,6 @@ import { and, eq, sql } from "drizzle-orm";
 import { z } from "zod";
 
 import { getDb } from "../server/db/index.js";
-import { CLIPS_ORGANIZATION_INVITE_EMAIL_ID } from "../server/lib/emails.js";
 import {
   getCurrentOwnerEmail,
   nanoid,
@@ -68,36 +67,6 @@ async function fetchOrgName(orgId: string): Promise<string> {
   return row?.name ?? "Organization";
 }
 
-export function renderClipsInviteEmail({
-  appName,
-  orgName,
-  inviter,
-  role,
-  inviteUrl,
-}: {
-  appName: string;
-  orgName: string;
-  inviter: string;
-  role: "admin" | "member";
-  inviteUrl: string;
-}) {
-  return {
-    subject: `You're invited to ${orgName} on ${appName}`,
-    ...renderEmail({
-      brandName: appName,
-      preheader: `${inviter} invited you to ${orgName} on ${appName}.`,
-      heading: `You're invited to join ${orgName}`,
-      paragraphs: [
-        `${emailStrong(inviter)} invited you to the ${emailStrong(orgName)} organization on ${emailStrong(appName)} as ${emailStrong(role)}.`,
-        `Click the button below to accept the invite and start collaborating.`,
-      ],
-      cta: { label: "Accept invite", url: inviteUrl },
-      // guard:allow-raw-color — email HTML cannot reference CSS theme tokens; mail clients don't support custom properties.
-      brandColor: "#18181B",
-    }),
-  };
-}
-
 export default defineAction({
   description:
     "Invite someone to the active organization by email. Creates a pending invitation. Role 'admin' maps to admin; all other Clips roles collapse to 'member'. Sends an email when a provider is configured.",
@@ -154,17 +123,25 @@ export default defineAction({
     const orgName = await fetchOrgName(organizationId);
     const inviteUrl = `${baseUrl()}/invite/${token}`;
 
+    const appName = getAppName();
+    const { html, text } = renderEmail({
+      brandName: appName,
+      preheader: `${inviter} invited you to ${orgName} on ${appName}.`,
+      heading: `You're invited to join ${orgName}`,
+      paragraphs: [
+        `${emailStrong(inviter)} invited you to the ${emailStrong(orgName)} organization on ${emailStrong(appName)} as ${emailStrong(role)}.`,
+        `Click the button below to accept the invite and start collaborating.`,
+      ],
+      cta: { label: "Accept invite", url: inviteUrl },
+      // guard:allow-raw-color - email HTML cannot reference CSS theme tokens.
+      brandColor: "#18181B",
+    });
     try {
       await sendEmail({
-        ...renderClipsInviteEmail({
-          appName: getAppName(),
-          orgName,
-          inviter,
-          role,
-          inviteUrl,
-        }),
         to: args.email,
-        templateId: CLIPS_ORGANIZATION_INVITE_EMAIL_ID,
+        subject: `You're invited to ${orgName} on ${appName}`,
+        html,
+        text,
       });
     } catch (err) {
       console.warn("[invite-member] email send failed:", err);

package/corpus/templates/clips/app/components/player/comments-panel.tsx

@@ -31,6 +31,7 @@ import {
 import { Textarea } from "@/components/ui/textarea";
 import { cn } from "@/lib/utils";
 
+import { REACTION_EMOJIS } from "./reaction-emojis";
 import { msToClock } from "./scrubber";
 
 function makeTempId() {
@@ -60,8 +61,6 @@ const defaultLens: CommentsLens = {
     data ? { ...(data as object), comments: next } : data,
 };
 
-const COMMENT_EMOJIS = ["👍", "❤️", "🔥", "👏", "🎉", "😂"];
-
 export interface Comment {
   id: string;
   threadId: string;
@@ -928,7 +927,7 @@ function CommentCard({
                 </PopoverTrigger>
                 <PopoverContent side="top" align="start" className="p-1 w-auto">
                   <div className="flex gap-0.5">
-                    {COMMENT_EMOJIS.map((e) => (
+                    {REACTION_EMOJIS.map((e) => (
                       <button
                         key={e}
                         onClick={() => {

package/corpus/templates/clips/app/components/player/reaction-emojis.ts

@@ -0,0 +1,10 @@
+export const REACTION_EMOJIS = [
+  "👍",
+  "❤️",
+  "🔥",
+  "👏",
+  "🎉",
+  "😂",
+  "🤯",
+  "👀",
+] as const;

package/corpus/templates/clips/app/components/player/reactions-tray.tsx

@@ -7,7 +7,7 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
-const EMOJIS = ["👍", "❤️", "🔥", "👏", "🎉", "😂", "🤯"] as const;
+import { REACTION_EMOJIS } from "./reaction-emojis";
 
 export interface ReactionsTrayProps {
   onReact: (emoji: string) => void;
@@ -38,7 +38,7 @@ export function ReactionsTray({ onReact, disabled }: ReactionsTrayProps) {
 
   return (
     <div className="relative flex w-fit max-w-full items-center gap-0.5 rounded-full border border-border bg-card px-1.5 py-1 shadow-sm sm:gap-1 sm:px-2">
-      {EMOJIS.map((emoji) => (
+      {REACTION_EMOJIS.map((emoji) => (
         <Tooltip key={emoji}>
           <TooltipTrigger asChild>
             <button

package/corpus/templates/clips/app/components/player/video-player.tsx

@@ -156,6 +156,8 @@ export interface VideoPlayerHandle {
 export interface VideoPlayerProps {
   recordingId: string;
   videoUrl: string | null | undefined;
+  /** Version of the stored media bytes, used when a stable URL is replaced. */
+  mediaVersion?: string | number | null;
   /**
    * Container format of `videoUrl`, when known. Used only to pick an accurate
    * `canPlayType` MIME check (e.g. Safari cannot play `video/webm`) — Clips
@@ -228,6 +230,7 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
     const t = useT();
     const {
       videoUrl,
+      mediaVersion,
       videoFormat,
       embedProvider,
       durationMs,
@@ -261,10 +264,21 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
       onCommentClick,
     } = props;
 
-    const resolvedVideoSrc = useMemo(
-      () => resolveLocalUrl(videoUrl),
-      [videoUrl],
-    );
+    const resolvedVideoSrc = useMemo(() => {
+      const localUrl = resolveLocalUrl(videoUrl);
+      if (
+        !localUrl ||
+        mediaVersion == null ||
+        embedProvider === "loom" ||
+        isLoomEmbedUrl(localUrl)
+      ) {
+        return localUrl;
+      }
+      // Some storage providers keep the public URL stable while replacing the
+      // object behind it. Keep the player source identity aligned with the
+      // recording row so a repaired asset cannot stay cached in the player.
+      return setUrlSearchParam(localUrl, "media", String(mediaVersion));
+    }, [embedProvider, mediaVersion, videoUrl]);
     const videoRef = useRef<HTMLVideoElement | null>(null);
     const [playbackVideoEl, setPlaybackVideoEl] =
       useState<HTMLVideoElement | null>(null);
@@ -569,11 +583,11 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
         return;
       }
 
-      if (recoveringFromErrorRef.current) return;
-
       const v = videoRef.current;
       const sameResource =
         activeVideoSourceIdentity === incomingVideoSourceIdentity;
+      if (recoveringFromErrorRef.current && sameResource) return;
+
       const playbackActive =
         playAttemptPendingRef.current ||
         isPlayPending ||

package/corpus/templates/clips/app/routes/embed.$shareId.tsx

@@ -20,6 +20,8 @@ export function meta() {
 }
 
 const STORAGE_KEY_PREFIX = "clips-share-pw-";
+const READY_MEDIA_SETTLE_POLL_MS = 20 * 1000;
+const READY_MEDIA_SETTLE_POLL_INTERVAL_MS = 1000;
 
 /**
  * Parse `t` URL param into ms (supports plain seconds or `1m20s` / `1h2m3s`).
@@ -78,6 +80,7 @@ export default function EmbedRoute() {
     }
   });
   const [pwError, setPwError] = useState<string | null>(null);
+  const readyMediaPollRef = useRef<{ key: string; until: number } | null>(null);
 
   useEffect(() => {
     if (typeof document === "undefined") return;
@@ -121,6 +124,32 @@ export default function EmbedRoute() {
       return { ok: res.ok, status: res.status, data };
     },
     enabled: !!shareId,
+    refetchInterval: (q) => {
+      const payload = (q.state.data as { data?: any } | undefined)?.data;
+      const rec = payload?.recording;
+      if (!rec) return false;
+      if (rec.status !== "ready" || !rec.videoUrl) {
+        readyMediaPollRef.current = null;
+        return 2000;
+      }
+      const mediaKey = [
+        rec.id,
+        rec.durationMs ?? "",
+        rec.videoSizeBytes ?? "",
+        rec.videoFormat ?? "",
+      ].join(":");
+      const now = Date.now();
+      if (readyMediaPollRef.current?.key !== mediaKey) {
+        readyMediaPollRef.current = {
+          key: mediaKey,
+          until: now + READY_MEDIA_SETTLE_POLL_MS,
+        };
+      }
+      return now < readyMediaPollRef.current.until
+        ? READY_MEDIA_SETTLE_POLL_INTERVAL_MS
+        : false;
+    },
+    refetchIntervalInBackground: false,
   });
 
   const recording = dataQ.data?.data?.recording;
@@ -196,6 +225,10 @@ export default function EmbedRoute() {
         onVideoElementChange={setTrackedVideoEl}
         recordingId={recording.id}
         videoUrl={recording.videoUrl}
+        mediaVersion={[
+          recording.videoSizeBytes ?? "",
+          recording.updatedAt ?? "",
+        ].join(":")}
         videoFormat={recording.videoFormat}
         embedProvider={isLoomEmbedBacked ? "loom" : null}
         durationMs={recording.durationMs}

package/corpus/templates/clips/app/routes/r.$recordingId.tsx

@@ -348,9 +348,9 @@ export default function RecordingPage() {
         // without requiring a manual refresh.
         const mediaKey = [
           rec.id,
-          rec.videoUrl,
           rec.durationMs ?? "",
           rec.videoSizeBytes ?? "",
+          rec.videoFormat ?? "",
         ].join(":");
         const now = Date.now();
         if (readyMediaPollRef.current?.key !== mediaKey) {
@@ -1601,6 +1601,10 @@ export default function RecordingPage() {
                   onVideoElementChange={setTrackedVideoEl}
                   recordingId={recording.id}
                   videoUrl={recording.videoUrl}
+                  mediaVersion={[
+                    recording.videoSizeBytes ?? "",
+                    recording.updatedAt ?? "",
+                  ].join(":")}
                   videoFormat={recording.videoFormat}
                   embedProvider={isLoomEmbedBacked ? "loom" : null}
                   durationMs={recording.durationMs}