@tribe-nest/forge 3.58.0 → 3.60.0

package/src/ui/styled/members/CallTranscriptViewer.tsx

@@ -0,0 +1,424 @@
+import { useEffect, useMemo, useRef, useState, type CSSProperties, type ReactNode } from "react";
+import { Download, Search, X } from "lucide-react";
+
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import { useMeasuredWidth } from "../../media/hooks/useMeasuredWidth";
+import { useMemberCallTranscript, type MemberCallTranscriptSegment } from "../../../data/queries/useMembershipCalls";
+import { Loading } from "../Loading";
+import { activeSegmentIndex, downloadTranscript, formatOffset } from "./callTranscriptText";
+
+/** How long after the member scrolls the transcript themselves it stops following playback. */
+const FOLLOW_PAUSE_MS = 4_000;
+/** Below this width the video sits above the transcript instead of beside it. */
+const STACK_BELOW_PX = 860;
+
+/** `text` with every case-insensitive match of `term` highlighted. */
+function highlight(text: string, term: string, color: string): ReactNode {
+  if (!term) return text;
+  const lower = text.toLowerCase();
+  const needle = term.toLowerCase();
+  const out: ReactNode[] = [];
+  let from = 0;
+  for (let at = lower.indexOf(needle); at !== -1; at = lower.indexOf(needle, from)) {
+    out.push(
+      text.slice(from, at),
+      <mark key={at} style={{ background: color, color: "inherit", borderRadius: 2 }}>
+        {text.slice(at, at + needle.length)}
+      </mark>,
+    );
+    from = at + needle.length;
+  }
+  out.push(text.slice(from));
+  return out;
+}
+
+/**
+ * A recorded call's transcript beside its video, full-screen.
+ *
+ * A viewer rather than a route: members' calls render on hosted `/i/` pages,
+ * on code-built sites and in the client app, and an overlay works on all of
+ * them without a new page on each. The same layout as the creator's transcript
+ * page: the video plays on one side, the line being spoken highlights and
+ * follows along, clicking a line seeks, and there is a search and a Summary
+ * tab.
+ *
+ * The video address is signed for sixty seconds on purpose. When playback
+ * fails after that, the viewer fetches a fresh one and resumes where the member
+ * was.
+ */
+export function CallTranscriptViewer({ recordingId, onClose }: { recordingId: string; onClose: () => void }) {
+  const t = useThemeTokens();
+  const query = useMemberCallTranscript(recordingId);
+
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent) => event.key === "Escape" && onClose();
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose]);
+
+  const shell: CSSProperties = {
+    position: "fixed",
+    inset: 0,
+    zIndex: 1001,
+    display: "flex",
+    flexDirection: "column",
+    background: t.background,
+    color: t.text,
+    fontFamily: t.fontFamily,
+  };
+
+  if (query.isLoading) {
+    return (
+      <div role="dialog" aria-modal="true" aria-label="Transcript" style={shell}>
+        <Loading />
+      </div>
+    );
+  }
+  if (query.error || !query.data) {
+    return (
+      <div role="dialog" aria-modal="true" aria-label="Transcript" style={{ ...shell, padding: 24, gap: 12 }}>
+        <p style={{ margin: 0, color: t.muted }}>We could not open this transcript just now.</p>
+        <button type="button" onClick={onClose} style={buttonStyle(t)}>
+          Close
+        </button>
+      </div>
+    );
+  }
+
+  return <ViewerBody detail={query.data} refetch={query.refetch} onClose={onClose} shell={shell} />;
+}
+
+type Tokens = ReturnType<typeof useThemeTokens>;
+
+function buttonStyle(t: Tokens): CSSProperties {
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 6,
+    padding: "8px 14px",
+    borderRadius: t.cornerRadius,
+    border: `1px solid ${t.border}`,
+    background: "transparent",
+    color: t.text,
+    fontFamily: t.fontFamily,
+    fontSize: 14,
+    fontWeight: 600,
+    cursor: "pointer",
+  };
+}
+
+function ViewerBody({
+  detail,
+  refetch,
+  onClose,
+  shell,
+}: {
+  detail: NonNullable<ReturnType<typeof useMemberCallTranscript>["data"]>;
+  refetch: ReturnType<typeof useMemberCallTranscript>["refetch"];
+  onClose: () => void;
+  shell: CSSProperties;
+}) {
+  const t = useThemeTokens();
+  const { segments, summary } = detail.transcript;
+  const [bodyRef, width] = useMeasuredWidth<HTMLDivElement>();
+  const stacked = width > 0 && width < STACK_BELOW_PX;
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+  const [watchUrl, setWatchUrl] = useState(detail.watchUrl);
+  const [currentMs, setCurrentMs] = useState(0);
+  const [term, setTerm] = useState("");
+  const [tab, setTab] = useState<"summary" | "transcript">(summary ? "summary" : "transcript");
+  const lastManualScroll = useRef(0);
+  const resume = useRef<{ atSec: number; play: boolean } | null>(null);
+  const lastRefresh = useRef(0);
+
+  const active = activeSegmentIndex(segments, currentMs);
+  const needle = term.trim();
+  const matches = useMemo(() => {
+    const lower = needle.toLowerCase();
+    if (!lower) return null;
+    return segments
+      .map((segment, index) => ({ segment, index }))
+      .filter(({ segment }) => `${segment.name} ${segment.text}`.toLowerCase().includes(lower));
+  }, [segments, needle]);
+  const shown = matches ?? segments.map((segment, index) => ({ segment, index }));
+
+  useEffect(() => {
+    if (tab !== "transcript" || matches || active < 0) return;
+    if (Date.now() - lastManualScroll.current < FOLLOW_PAUSE_MS) return;
+    listRef.current
+      ?.querySelector<HTMLElement>(`[data-index="${active}"]`)
+      ?.scrollIntoView?.({ block: "nearest", behavior: "smooth" });
+  }, [active, matches, tab]);
+
+  const recover = async () => {
+    const video = videoRef.current;
+    if (!video || Date.now() - lastRefresh.current < 5_000) return;
+    lastRefresh.current = Date.now();
+    resume.current = { atSec: video.currentTime, play: !video.paused || video.seeking };
+    const fresh = await refetch();
+    if (fresh.data?.watchUrl) setWatchUrl(fresh.data.watchUrl);
+  };
+
+  const seek = (segment: MemberCallTranscriptSegment) => {
+    const video = videoRef.current;
+    if (!video) return;
+    video.currentTime = segment.startMs / 1000;
+    setCurrentMs(segment.startMs);
+    void video.play()?.catch(() => undefined);
+  };
+
+  const tabStyle = (selected: boolean): CSSProperties => ({
+    padding: "6px 12px",
+    border: "none",
+    borderBottom: `2px solid ${selected ? t.primary : "transparent"}`,
+    background: "transparent",
+    color: selected ? t.text : t.muted,
+    fontFamily: t.fontFamily,
+    fontSize: 14,
+    fontWeight: 600,
+    cursor: "pointer",
+  });
+
+  return (
+    <div role="dialog" aria-modal="true" aria-label={`Transcript: ${detail.title}`} style={shell}>
+      <header
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 12,
+          padding: "12px 16px",
+          borderBottom: `1px solid ${t.border}`,
+        }}
+      >
+        <div style={{ minWidth: 0, flex: 1 }}>
+          <h2
+            style={{
+              margin: 0,
+              fontSize: 17,
+              fontWeight: 700,
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+            }}
+          >
+            {detail.title}
+          </h2>
+          <span style={{ fontSize: 13, color: t.muted }}>
+            {new Date(detail.startsAt).toLocaleString("en-US", {
+              dateStyle: "long",
+              timeStyle: "short",
+              timeZone: detail.timezone || undefined,
+            })}
+          </span>
+        </div>
+        <button type="button" onClick={() => downloadTranscript(detail)} style={buttonStyle(t)}>
+          <Download size={15} />
+          Download
+        </button>
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label="Close"
+          style={{ background: "transparent", border: "none", cursor: "pointer", color: t.muted, padding: 4 }}
+        >
+          <X size={20} />
+        </button>
+      </header>
+
+      <div
+        ref={bodyRef}
+        style={{
+          flex: 1,
+          minHeight: 0,
+          display: "flex",
+          flexDirection: stacked ? "column" : "row",
+          gap: 16,
+          padding: 16,
+          overflow: stacked ? "auto" : "hidden",
+        }}
+      >
+        <div style={{ flex: stacked ? "none" : 3, minWidth: 0 }}>
+          {watchUrl ? (
+            <video
+              ref={videoRef}
+              src={watchUrl}
+              controls
+              preload="metadata"
+              data-testid="member-transcript-video"
+              style={{ width: "100%", aspectRatio: "16 / 9", background: "#000", borderRadius: t.cornerRadius }}
+              onTimeUpdate={(event) => setCurrentMs(event.currentTarget.currentTime * 1000)}
+              onError={() => void recover()}
+              onLoadedMetadata={(event) => {
+                const pending = resume.current;
+                if (!pending) return;
+                resume.current = null;
+                event.currentTarget.currentTime = pending.atSec;
+                if (pending.play) void event.currentTarget.play()?.catch(() => undefined);
+              }}
+            />
+          ) : (
+            <div
+              style={{
+                width: "100%",
+                aspectRatio: "16 / 9",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                border: `1px solid ${t.border}`,
+                borderRadius: t.cornerRadius,
+                color: t.muted,
+                fontSize: 14,
+              }}
+            >
+              The video is not available.
+            </div>
+          )}
+        </div>
+
+        <div
+          style={{
+            flex: stacked ? "none" : 2,
+            minWidth: 0,
+            minHeight: 0,
+            display: "flex",
+            flexDirection: "column",
+            gap: 10,
+          }}
+        >
+          <div role="tablist" style={{ display: "flex", gap: 4, borderBottom: `1px solid ${t.border}` }}>
+            <button
+              type="button"
+              role="tab"
+              aria-selected={tab === "summary"}
+              onClick={() => setTab("summary")}
+              style={tabStyle(tab === "summary")}
+            >
+              Summary
+            </button>
+            <button
+              type="button"
+              role="tab"
+              aria-selected={tab === "transcript"}
+              onClick={() => setTab("transcript")}
+              style={tabStyle(tab === "transcript")}
+            >
+              Transcript
+            </button>
+          </div>
+
+          {tab === "summary" ? (
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                gap: 12,
+                fontSize: 14,
+                lineHeight: 1.5,
+                overflowY: "auto",
+              }}
+            >
+              {summary ? (
+                <>
+                  <p style={{ margin: 0 }}>{summary.summary}</p>
+                  {[
+                    ["Decisions", summary.decisions],
+                    ["Action items", summary.actionItems],
+                  ].map(
+                    ([label, items]) =>
+                      (items as string[]).length > 0 && (
+                        <div key={label as string}>
+                          <span style={{ fontWeight: 600 }}>{label as string}</span>
+                          <ul style={{ margin: "4px 0 0", paddingLeft: 20 }}>
+                            {(items as string[]).map((item, i) => (
+                              <li key={i}>{item}</li>
+                            ))}
+                          </ul>
+                        </div>
+                      ),
+                  )}
+                </>
+              ) : (
+                <p style={{ margin: 0, color: t.muted }}>There is no summary for this call.</p>
+              )}
+            </div>
+          ) : (
+            <>
+              <label style={{ position: "relative", display: "block" }}>
+                <Search size={15} style={{ position: "absolute", left: 10, top: 10, color: t.muted }} />
+                <input
+                  value={term}
+                  onChange={(event) => setTerm(event.target.value)}
+                  placeholder="Search the transcript"
+                  aria-label="Search the transcript"
+                  style={{
+                    width: "100%",
+                    boxSizing: "border-box",
+                    padding: "8px 10px 8px 32px",
+                    borderRadius: t.cornerRadius,
+                    border: `1px solid ${t.border}`,
+                    background: t.surface,
+                    color: t.text,
+                    fontFamily: t.fontFamily,
+                    fontSize: 14,
+                  }}
+                />
+              </label>
+              {matches && (
+                <span role="status" style={{ fontSize: 12, color: t.muted }}>
+                  {matches.length === 1 ? "1 match" : `${matches.length} matches`}
+                </span>
+              )}
+              <div
+                ref={listRef}
+                data-testid="member-transcript-lines"
+                onWheel={() => (lastManualScroll.current = Date.now())}
+                onTouchMove={() => (lastManualScroll.current = Date.now())}
+                style={{
+                  flex: 1,
+                  minHeight: stacked ? 320 : 0,
+                  maxHeight: stacked ? 480 : undefined,
+                  overflowY: "auto",
+                  border: `1px solid ${t.border}`,
+                  borderRadius: t.cornerRadius,
+                }}
+              >
+                {shown.map(({ segment, index }) => (
+                  <button
+                    type="button"
+                    key={index}
+                    data-index={index}
+                    aria-current={index === active ? "true" : undefined}
+                    onClick={() => seek(segment)}
+                    style={{
+                      display: "flex",
+                      gap: 10,
+                      width: "100%",
+                      padding: "8px 10px",
+                      border: "none",
+                      textAlign: "left",
+                      background: index === active ? t.surface : "transparent",
+                      color: t.text,
+                      fontFamily: t.fontFamily,
+                      fontSize: 14,
+                      lineHeight: 1.5,
+                      cursor: "pointer",
+                    }}
+                  >
+                    <span style={{ width: 56, flexShrink: 0, fontFamily: "monospace", fontSize: 12, color: t.primary }}>
+                      {formatOffset(segment.startMs)}
+                    </span>
+                    <span style={{ minWidth: 0 }}>
+                      <span style={{ fontWeight: 600 }}>{highlight(segment.name, needle, t.border)}</span>{" "}
+                      {highlight(segment.text, needle, t.border)}
+                    </span>
+                  </button>
+                ))}
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/ui/styled/members/MemberCallsCalendar.tsx

@@ -3,6 +3,7 @@ import {
   CalendarDays,
   ChevronLeft,
   ChevronRight,
+  Download,
   FileText,
   Loader2,
   MessageSquare,
@@ -14,7 +15,16 @@ import {
 } from "lucide-react";
 import { useThemeTokens } from "../../theme/ForgeThemeProvider";
 import { useMemberCalls, type UseMemberCallsOptions } from "../../headless/memberHome/useMemberCalls";
-import type { MyMembershipCall } from "../../../data/queries/useMembershipCalls";
+import { useQueryClient } from "@tanstack/react-query";
+import { useForge } from "../../../provider/ForgeProvider";
+import {
+  fetchMemberCallTranscript,
+  memberCallTranscriptKey,
+  type MemberCallTranscript,
+  type MyMembershipCall,
+} from "../../../data/queries/useMembershipCalls";
+import { CallTranscriptViewer } from "./CallTranscriptViewer";
+import { downloadTranscript } from "./callTranscriptText";
 import { Loading } from "../Loading";
 
 export interface MemberCallsCalendarProps extends UseMemberCallsOptions {
@@ -119,6 +129,8 @@ export function MemberCallsCalendar({
   // The call whose details modal is open. Clicking an event opens it, the way
   // Google Calendar opens an event rather than jumping straight into it.
   const [selected, setSelected] = useState<MyMembershipCall | null>(null);
+  // The recording whose transcript is open full-screen, beside its video.
+  const [readingRecordingId, setReadingRecordingId] = useState<string | null>(null);
 
   if (calendar.isLoading) return <Loading />;
 
@@ -302,13 +314,23 @@ export function MemberCallsCalendar({
 
       {selected && (
         <CallDetailsModal
-          call={selected}
+          // Re-read from the latest fetch, not the snapshot taken on click, so
+          // a transcript that finishes while the modal is open appears in it.
+          call={calendar.calls.find((call) => call.id === selected.id) ?? selected}
           now={now}
           tokens={t}
           onClose={() => setSelected(null)}
           onJoin={() => selected.callPublicId && go(getCallHref(selected.callPublicId))}
+          onReadTranscript={(recordingId) => {
+            setSelected(null);
+            setReadingRecordingId(recordingId);
+          }}
         />
       )}
+
+      {readingRecordingId && (
+        <CallTranscriptViewer recordingId={readingRecordingId} onClose={() => setReadingRecordingId(null)} />
+      )}
     </div>
   );
 }
@@ -370,10 +392,10 @@ function EmptyMonth({
  * particulars and everything you can DO with it, without leaving the month.
  *
  * This is where the actions moved when the chronological list was removed:
- * Join while the room is open, Watch once the recording is ready. It is also
- * the home for the two things still to come - a transcript and the chat
- * history of the call - which are shown as clearly-labelled placeholders
- * rather than hidden, so the shape a member will grow into is already visible.
+ * Join while the room is open, Watch once the recording is ready, and read
+ * the transcript and summary once they are written. The chat history of the
+ * call is still to come, and is shown as a clearly-labelled placeholder rather
+ * than hidden, so the shape a member will grow into is already visible.
  */
 function CallDetailsModal({
   call,
@@ -381,12 +403,14 @@ function CallDetailsModal({
   tokens: t,
   onClose,
   onJoin,
+  onReadTranscript,
 }: {
   call: MyMembershipCall;
   now: Date;
   tokens: ReturnType<typeof useThemeTokens>;
   onClose: () => void;
   onJoin: () => void;
+  onReadTranscript: (recordingId: string) => void;
 }) {
   const canJoin = call.isOpen && !!call.callPublicId;
   const hasEnded = new Date(call.closesAt).getTime() < now.getTime();
@@ -576,14 +600,122 @@ function CallDetailsModal({
           )}
         </div>
 
-        {/* What is coming: the transcript and the chat history of the call. Shown
-            so a member knows the modal is where they will live, not hidden until
-            the day they ship. */}
+        {call.recording?.transcript && (
+          <TranscriptPanel
+            recordingId={call.recording.id}
+            transcript={call.recording.transcript}
+            tokens={t}
+            onRead={() => onReadTranscript(call.recording!.id)}
+          />
+        )}
+
+        {/* What is coming: the chat history of the call. Shown so a member knows
+            the modal is where it will live, not hidden until the day it ships. */}
         <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
-          {comingSoon(<FileText size={16} />, "Transcript", "A searchable transcript of what was said.")}
           {comingSoon(<MessageSquare size={16} />, "Chat history", "The messages sent during the call.")}
         </div>
       </div>
     </div>
   );
 }
+
+/**
+ * The call's summary, and the way into its transcript.
+ *
+ * The lines are NOT here: a two-hour meeting is thousands of them, which is
+ * unusable in a modal. "Read transcript" opens them beside the video, and
+ * Download reads them once without opening anything. A member sees the
+ * finished thing or that it is being prepared, never a failure: why one could
+ * not be made is the business's problem, not its audience's.
+ */
+function TranscriptPanel({
+  recordingId,
+  transcript,
+  tokens: t,
+  onRead,
+}: {
+  recordingId: string;
+  transcript: MemberCallTranscript;
+  tokens: ReturnType<typeof useThemeTokens>;
+  onRead: () => void;
+}) {
+  const { client, profileId } = useForge();
+  const queryClient = useQueryClient();
+  const [downloading, setDownloading] = useState(false);
+  const heading: CSSProperties = { display: "flex", alignItems: "center", gap: 8, fontSize: 14, fontWeight: 700 };
+  const button: CSSProperties = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 6,
+    padding: "8px 14px",
+    borderRadius: t.cornerRadius,
+    border: `1px solid ${t.border}`,
+    background: "transparent",
+    color: t.text,
+    fontFamily: t.fontFamily,
+    fontSize: 14,
+    fontWeight: 600,
+    cursor: "pointer",
+  };
+
+  if (transcript.status === "processing") {
+    return (
+      <div style={{ display: "flex", flexDirection: "column", gap: 6 }} data-testid="member-call-transcript">
+        <span style={heading}>
+          <FileText size={16} />
+          Transcript
+        </span>
+        <span style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 14, color: t.muted }} role="status">
+          <Loader2 size={15} />
+          The transcript is being prepared
+        </span>
+      </div>
+    );
+  }
+
+  const download = async () => {
+    setDownloading(true);
+    try {
+      const detail = await queryClient.fetchQuery({
+        queryKey: memberCallTranscriptKey(profileId, recordingId),
+        queryFn: () => fetchMemberCallTranscript(client, profileId, recordingId),
+      });
+      downloadTranscript(detail);
+    } finally {
+      setDownloading(false);
+    }
+  };
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 10 }} data-testid="member-call-transcript">
+      <span style={heading}>
+        <FileText size={16} />
+        Summary
+      </span>
+      <p
+        style={{
+          margin: 0,
+          fontSize: 14,
+          lineHeight: 1.5,
+          display: "-webkit-box",
+          WebkitLineClamp: 4,
+          WebkitBoxOrient: "vertical",
+          overflow: "hidden",
+          color: transcript.summary ? t.text : t.muted,
+        }}
+      >
+        {transcript.summary ? transcript.summary.summary : "The transcript is ready."}
+      </p>
+      <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
+        <button type="button" onClick={onRead} style={button}>
+          <FileText size={15} />
+          Read transcript
+        </button>
+        <button type="button" onClick={() => void download()} disabled={downloading} style={button}>
+          {downloading ? <Loader2 size={15} /> : <Download size={15} />}
+          Download
+        </button>
+      </div>
+    </div>
+  );
+}