@tribe-nest/forge 3.59.0 → 3.61.0

package/src/ui/styled/forge-utilities.css

@@ -50,6 +50,17 @@
   .fg\:pointer-events-none {
     pointer-events: none;
   }
+  .fg\:sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
   .fg\:absolute {
     position: absolute;
   }
@@ -65,6 +76,9 @@
   .fg\:inset-0 {
     inset: calc(var(--fg-spacing) * 0);
   }
+  .fg\:inset-x-0 {
+    inset-inline: calc(var(--fg-spacing) * 0);
+  }
   .fg\:top-2 {
     top: calc(var(--fg-spacing) * 2);
   }
@@ -134,6 +148,12 @@
   .fg\:mt-8 {
     margin-top: calc(var(--fg-spacing) * 8);
   }
+  .fg\:mt-10 {
+    margin-top: calc(var(--fg-spacing) * 10);
+  }
+  .fg\:-mr-4 {
+    margin-right: calc(var(--fg-spacing) * -4);
+  }
   .fg\:mb-1 {
     margin-bottom: calc(var(--fg-spacing) * 1);
   }
@@ -161,6 +181,15 @@
   .fg\:ml-2 {
     margin-left: calc(var(--fg-spacing) * 2);
   }
+  .fg\:ml-auto {
+    margin-left: auto;
+  }
+  .fg\:line-clamp-3 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+  }
   .fg\:block {
     display: block;
   }
@@ -179,6 +208,9 @@
   .fg\:inline-flex {
     display: inline-flex;
   }
+  .fg\:aspect-square {
+    aspect-ratio: 1 / 1;
+  }
   .fg\:h-0\.5 {
     height: calc(var(--fg-spacing) * 0.5);
   }
@@ -197,6 +229,9 @@
   .fg\:h-12 {
     height: calc(var(--fg-spacing) * 12);
   }
+  .fg\:h-16 {
+    height: calc(var(--fg-spacing) * 16);
+  }
   .fg\:h-\[70vh\] {
     height: 70vh;
   }
@@ -206,6 +241,9 @@
   .fg\:h-full {
     height: 100%;
   }
+  .fg\:max-h-\[90dvh\] {
+    max-height: 90dvh;
+  }
   .fg\:min-h-\[320px\] {
     min-height: 320px;
   }
@@ -224,6 +262,12 @@
   .fg\:w-10 {
     width: calc(var(--fg-spacing) * 10);
   }
+  .fg\:w-11 {
+    width: calc(var(--fg-spacing) * 11);
+  }
+  .fg\:w-16 {
+    width: calc(var(--fg-spacing) * 16);
+  }
   .fg\:w-52 {
     width: calc(var(--fg-spacing) * 52);
   }
@@ -242,6 +286,21 @@
   .fg\:max-w-6xl {
     max-width: var(--fg-container-6xl);
   }
+  .fg\:max-w-\[85\%\] {
+    max-width: 85%;
+  }
+  .fg\:max-w-\[220px\] {
+    max-width: 220px;
+  }
+  .fg\:max-w-\[420px\] {
+    max-width: 420px;
+  }
+  .fg\:max-w-\[720px\] {
+    max-width: 720px;
+  }
+  .fg\:max-w-full {
+    max-width: 100%;
+  }
   .fg\:max-w-md {
     max-width: var(--fg-container-md);
   }
@@ -251,12 +310,18 @@
   .fg\:min-w-0 {
     min-width: calc(var(--fg-spacing) * 0);
   }
+  .fg\:min-w-1 {
+    min-width: calc(var(--fg-spacing) * 1);
+  }
   .fg\:flex-1 {
     flex: 1;
   }
   .fg\:shrink-0 {
     flex-shrink: 0;
   }
+  .fg\:cursor-grab {
+    cursor: grab;
+  }
   .fg\:cursor-pointer {
     cursor: pointer;
   }
@@ -275,6 +340,9 @@
   .fg\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+  .fg\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
   .fg\:flex-col {
     flex-direction: column;
   }
@@ -284,6 +352,9 @@
   .fg\:flex-wrap {
     flex-wrap: wrap;
   }
+  .fg\:items-baseline {
+    align-items: baseline;
+  }
   .fg\:items-center {
     align-items: center;
   }
@@ -329,9 +400,15 @@
   .fg\:gap-6 {
     gap: calc(var(--fg-spacing) * 6);
   }
+  .fg\:gap-7 {
+    gap: calc(var(--fg-spacing) * 7);
+  }
   .fg\:gap-8 {
     gap: calc(var(--fg-spacing) * 8);
   }
+  .fg\:gap-10 {
+    gap: calc(var(--fg-spacing) * 10);
+  }
   .fg\:space-y-2 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -353,9 +430,15 @@
       margin-block-end: calc(calc(var(--fg-spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .fg\:gap-x-3 {
+    column-gap: calc(var(--fg-spacing) * 3);
+  }
   .fg\:gap-x-4 {
     column-gap: calc(var(--fg-spacing) * 4);
   }
+  .fg\:gap-x-5 {
+    column-gap: calc(var(--fg-spacing) * 5);
+  }
   .fg\:space-x-4 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -366,12 +449,20 @@
   .fg\:gap-y-2 {
     row-gap: calc(var(--fg-spacing) * 2);
   }
+  .fg\:truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   .fg\:overflow-hidden {
     overflow: hidden;
   }
   .fg\:overflow-x-auto {
     overflow-x: auto;
   }
+  .fg\:overflow-y-auto {
+    overflow-y: auto;
+  }
   .fg\:rounded {
     border-radius: 0.25rem;
   }
@@ -387,6 +478,10 @@
   .fg\:rounded-xl {
     border-radius: var(--fg-radius-xl);
   }
+  .fg\:rounded-t-\[var\(--cs-radius\)\] {
+    border-top-left-radius: var(--cs-radius);
+    border-top-right-radius: var(--cs-radius);
+  }
   .fg\:border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -463,6 +558,9 @@
   .fg\:p-8 {
     padding: calc(var(--fg-spacing) * 8);
   }
+  .fg\:px-0 {
+    padding-inline: calc(var(--fg-spacing) * 0);
+  }
   .fg\:px-2 {
     padding-inline: calc(var(--fg-spacing) * 2);
   }
@@ -472,6 +570,9 @@
   .fg\:px-4 {
     padding-inline: calc(var(--fg-spacing) * 4);
   }
+  .fg\:px-5 {
+    padding-inline: calc(var(--fg-spacing) * 5);
+  }
   .fg\:py-0\.5 {
     padding-block: calc(var(--fg-spacing) * 0.5);
   }
@@ -487,6 +588,9 @@
   .fg\:py-3 {
     padding-block: calc(var(--fg-spacing) * 3);
   }
+  .fg\:py-4 {
+    padding-block: calc(var(--fg-spacing) * 4);
+  }
   .fg\:py-5 {
     padding-block: calc(var(--fg-spacing) * 5);
   }
@@ -496,6 +600,9 @@
   .fg\:py-8 {
     padding-block: calc(var(--fg-spacing) * 8);
   }
+  .fg\:py-10 {
+    padding-block: calc(var(--fg-spacing) * 10);
+  }
   .fg\:py-12 {
     padding-block: calc(var(--fg-spacing) * 12);
   }
@@ -505,24 +612,39 @@
   .fg\:pt-2 {
     padding-top: calc(var(--fg-spacing) * 2);
   }
+  .fg\:pt-3 {
+    padding-top: calc(var(--fg-spacing) * 3);
+  }
   .fg\:pt-4 {
     padding-top: calc(var(--fg-spacing) * 4);
   }
   .fg\:pt-6 {
     padding-top: calc(var(--fg-spacing) * 6);
   }
+  .fg\:pr-4 {
+    padding-right: calc(var(--fg-spacing) * 4);
+  }
   .fg\:pb-4 {
     padding-bottom: calc(var(--fg-spacing) * 4);
   }
   .fg\:pb-6 {
     padding-bottom: calc(var(--fg-spacing) * 6);
   }
+  .fg\:pb-28 {
+    padding-bottom: calc(var(--fg-spacing) * 28);
+  }
   .fg\:pb-32 {
     padding-bottom: calc(var(--fg-spacing) * 32);
   }
+  .fg\:pb-\[calc\(72px\+env\(safe-area-inset-bottom\)\)\] {
+    padding-bottom: calc(72px + env(safe-area-inset-bottom));
+  }
   .fg\:text-center {
     text-align: center;
   }
+  .fg\:text-left {
+    text-align: left;
+  }
   .fg\:text-right {
     text-align: right;
   }
@@ -586,9 +708,15 @@
     --tw-tracking: var(--fg-tracking-wide);
     letter-spacing: var(--fg-tracking-wide);
   }
+  .fg\:break-words {
+    overflow-wrap: break-word;
+  }
   .fg\:whitespace-pre-line {
     white-space: pre-line;
   }
+  .fg\:whitespace-pre-wrap {
+    white-space: pre-wrap;
+  }
   .fg\:text-muted {
     color: var(--fg-color-muted);
   }
@@ -645,6 +773,11 @@
     -webkit-user-select: none;
     user-select: none;
   }
+  .fg\:first\:mt-0 {
+    &:first-child {
+      margin-top: calc(var(--fg-spacing) * 0);
+    }
+  }
   .fg\:focus\:border-primary {
     &:focus {
       border-color: var(--fg-color-primary);
@@ -680,6 +813,11 @@
       flex-direction: row;
     }
   }
+  .fg\:sm\:flex-wrap {
+    @media (width >= 40rem) {
+      flex-wrap: wrap;
+    }
+  }
   .fg\:sm\:items-center {
     @media (width >= 40rem) {
       align-items: center;
@@ -750,6 +888,11 @@
       width: calc(var(--fg-spacing) * 64);
     }
   }
+  .fg\:md\:w-\[240px\] {
+    @media (width >= 48rem) {
+      width: 240px;
+    }
+  }
   .fg\:md\:w-\[260px\] {
     @media (width >= 48rem) {
       width: 260px;
@@ -760,11 +903,21 @@
       width: 300px;
     }
   }
+  .fg\:md\:w-\[320px\] {
+    @media (width >= 48rem) {
+      width: 320px;
+    }
+  }
   .fg\:md\:w-\[360px\] {
     @media (width >= 48rem) {
       width: 360px;
     }
   }
+  .fg\:md\:max-w-\[70\%\] {
+    @media (width >= 48rem) {
+      max-width: 70%;
+    }
+  }
   .fg\:md\:shrink-0 {
     @media (width >= 48rem) {
       flex-shrink: 0;
@@ -790,6 +943,41 @@
       align-items: flex-start;
     }
   }
+  .fg\:md\:py-16 {
+    @media (width >= 48rem) {
+      padding-block: calc(var(--fg-spacing) * 16);
+    }
+  }
+  .fg\:lg\:sticky {
+    @media (width >= 64rem) {
+      position: sticky;
+    }
+  }
+  .fg\:lg\:inset-x-auto {
+    @media (width >= 64rem) {
+      inset-inline: auto;
+    }
+  }
+  .fg\:lg\:top-1\/2 {
+    @media (width >= 64rem) {
+      top: calc(1/2 * 100%);
+    }
+  }
+  .fg\:lg\:top-6 {
+    @media (width >= 64rem) {
+      top: calc(var(--fg-spacing) * 6);
+    }
+  }
+  .fg\:lg\:bottom-auto {
+    @media (width >= 64rem) {
+      bottom: auto;
+    }
+  }
+  .fg\:lg\:left-1\/2 {
+    @media (width >= 64rem) {
+      left: calc(1/2 * 100%);
+    }
+  }
   .fg\:lg\:col-span-1 {
     @media (width >= 64rem) {
       grid-column: span 1 / span 1;
@@ -800,6 +988,11 @@
       grid-column: span 2 / span 2;
     }
   }
+  .fg\:lg\:block {
+    @media (width >= 64rem) {
+      display: block;
+    }
+  }
   .fg\:lg\:flex {
     @media (width >= 64rem) {
       display: flex;
@@ -810,6 +1003,28 @@
       display: none;
     }
   }
+  .fg\:lg\:max-h-\[88vh\] {
+    @media (width >= 64rem) {
+      max-height: 88vh;
+    }
+  }
+  .fg\:lg\:w-\[min\(560px\,calc\(100vw-32px\)\)\] {
+    @media (width >= 64rem) {
+      width: min(560px, calc(100vw - 32px));
+    }
+  }
+  .fg\:lg\:-translate-x-1\/2 {
+    @media (width >= 64rem) {
+      --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .fg\:lg\:-translate-y-1\/2 {
+    @media (width >= 64rem) {
+      --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
   .fg\:lg\:grid-cols-3 {
     @media (width >= 64rem) {
       grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -830,6 +1045,21 @@
       gap: calc(var(--fg-spacing) * 8);
     }
   }
+  .fg\:lg\:gap-12 {
+    @media (width >= 64rem) {
+      gap: calc(var(--fg-spacing) * 12);
+    }
+  }
+  .fg\:lg\:rounded-\[var\(--cs-radius-lg\)\] {
+    @media (width >= 64rem) {
+      border-radius: var(--cs-radius-lg);
+    }
+  }
+  .fg\:lg\:p-6 {
+    @media (width >= 64rem) {
+      padding: calc(var(--fg-spacing) * 6);
+    }
+  }
   .fg\:lg\:p-8 {
     @media (width >= 64rem) {
       padding: calc(var(--fg-spacing) * 8);
@@ -840,6 +1070,11 @@
       padding-block: calc(var(--fg-spacing) * 12);
     }
   }
+  .fg\:lg\:pb-0 {
+    @media (width >= 64rem) {
+      padding-bottom: calc(var(--fg-spacing) * 0);
+    }
+  }
   .fg\:lg\:text-3xl {
     @media (width >= 64rem) {
       font-size: var(--fg-text-3xl);
@@ -939,6 +1174,21 @@
   inherits: false;
   initial-value: 0 0 #0000;
 }
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
@@ -962,6 +1212,9 @@
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
     }
   }
 }

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

@@ -0,0 +1,182 @@
+import { useState, type CSSProperties } from "react";
+import { Download, FileText, Loader2, PlayCircle } from "lucide-react";
+import { useQueryClient } from "@tanstack/react-query";
+import { useForgeT } from "../../../i18n";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import { useForge } from "../../../provider/ForgeProvider";
+import {
+  fetchMemberCallTranscript,
+  memberCallTranscriptKey,
+  type MemberCallTranscript,
+  type MyMembershipCall,
+} from "../../../data/queries/useMembershipCalls";
+import { downloadTranscript } from "./callTranscriptText";
+
+/**
+ * The rewatch pieces of a past call, shared by every surface that lists calls
+ * a member attended: the members calendar's details modal and the community
+ * calendar's agenda. One set of pieces, so a recording reads the same wherever
+ * it is found.
+ */
+
+/** A call's recording as the attendee reads return it. */
+export type CallRecording = NonNullable<MyMembershipCall["recording"]>;
+
+/** Whether a recording can be watched now. */
+export function callRecordingWatchable(recording: CallRecording | null | undefined): boolean {
+  return recording?.status === "ready" && !!recording.watchUrl;
+}
+
+export interface CallRecordingWatchLinkProps {
+  recording: CallRecording;
+  /** Drawn as a secondary action, when a stronger one (Join) sits beside it. */
+  secondary?: boolean;
+}
+
+/** "Watch recording", opening the signed video address in a new tab. Renders nothing until it is ready. */
+export function CallRecordingWatchLink({ recording, secondary }: CallRecordingWatchLinkProps) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  if (!callRecordingWatchable(recording)) return null;
+  const minutes = recording.durationSeconds ? Math.round(recording.durationSeconds / 60) : null;
+  return (
+    <a
+      data-testid="call-recording-watch"
+      href={recording.watchUrl!}
+      target="_blank"
+      rel="noreferrer"
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 6,
+        padding: "10px 20px",
+        borderRadius: t.cornerRadius,
+        background: secondary ? "transparent" : t.primary,
+        border: secondary ? `1px solid ${t.border}` : "none",
+        color: secondary ? t.text : t.textPrimary,
+        fontSize: 14,
+        fontWeight: 700,
+        textDecoration: "none",
+      }}
+    >
+      <PlayCircle size={16} />
+      {minutes ? tr("forge.call_recording_actions.watch_minutes", { minutes }) : tr("forge.call_recording_actions.watch")}
+    </a>
+  );
+}
+
+/** The recording is still being put together: come back shortly, not an error. */
+export function CallRecordingProcessing() {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  return (
+    <span
+      data-testid="call-recording-processing"
+      style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 14, color: t.muted, fontWeight: 600 }}
+    >
+      <Loader2 size={15} />
+      {tr("forge.call_recording_actions.processing")}
+    </span>
+  );
+}
+
+/**
+ * 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 or a list. "Read transcript" opens them beside the video
+ * (`onRead`), 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.
+ */
+export function CallTranscriptPanel({
+  recordingId,
+  transcript,
+  onRead,
+}: {
+  recordingId: string;
+  transcript: MemberCallTranscript;
+  onRead: () => void;
+}) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  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} />
+          {tr("forge.call_recording_actions.transcript")}
+        </span>
+        <span style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 14, color: t.muted }} role="status">
+          <Loader2 size={15} />
+          {tr("forge.call_recording_actions.transcript_processing")}
+        </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} />
+        {tr("forge.call_recording_actions.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 : tr("forge.call_recording_actions.transcript_ready")}
+      </p>
+      <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
+        <button type="button" onClick={onRead} style={button}>
+          <FileText size={15} />
+          {tr("forge.call_recording_actions.read_transcript")}
+        </button>
+        <button type="button" onClick={() => void download()} disabled={downloading} style={button}>
+          {downloading ? <Loader2 size={15} /> : <Download size={15} />}
+          {tr("forge.call_recording_actions.download")}
+        </button>
+      </div>
+    </div>
+  );
+}