@tribe-nest/forge 3.29.0 → 3.31.0

package/src/ui/styled/BroadcastWatch.tsx

@@ -0,0 +1,107 @@
+import type { ReactNode } from "react";
+import { X } from "lucide-react";
+import { useForgeT } from "../../i18n";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { useBroadcastWatch } from "../headless/broadcast/useBroadcastWatch";
+import { Loading } from "./Loading";
+import { BroadcastPassValidation } from "./broadcast/BroadcastPassValidation";
+import { BroadcastTicketPurchase } from "./broadcast/BroadcastTicketPurchase";
+import { BroadcastPlayer, type BroadcastPlayerRenderProps } from "./broadcast/BroadcastPlayer";
+import { EndedBroadcast } from "./broadcast/EndedBroadcast";
+
+export interface BroadcastWatchProps {
+  broadcastId: string;
+  /** Host-owned navigation. Falls back to a full page load. */
+  navigate?: (href: string) => void;
+  /** Where leaving lands. Default `/i/live`. */
+  livePath?: string;
+  /** How to play the HLS stream. See `BroadcastPlayer` for why this is a prop. */
+  renderPlayer?: (props: BroadcastPlayerRenderProps) => ReactNode;
+  /** Format a numeric amount for display (the "from ..." line on the paywall). */
+  formatAmount?: (amount: number) => string;
+  /** Stripe return URL for a PAID ticket purchase made from the paywall. */
+  finalisePath?: (slug: string, orderId: string) => string;
+  /** Host-owned navigation on FREE ticket completion. */
+  onComplete?: (info: { slug: string; orderId: string }) => void;
+}
+
+/**
+ * The watch page for one live broadcast.
+ *
+ * What is on screen is decided entirely by `useBroadcastWatch().screen`, which
+ * is computed by a pure function. The order those states are checked in is the
+ * whole safety property of this page: a broadcast that has ENDED shows the ended
+ * screen, a broadcast that is GATED shows the ticket box, and only a viewer past
+ * both gets a component that knows the playback URL.
+ */
+export function BroadcastWatch({
+  broadcastId,
+  navigate,
+  livePath = "/i/live",
+  renderPlayer,
+  formatAmount,
+  finalisePath,
+  onComplete,
+}: BroadcastWatchProps) {
+  const t = useForgeT();
+  const theme = useForgeTheme();
+  const watch = useBroadcastWatch(broadcastId);
+  const { broadcast, screen } = watch;
+
+  const leave = () => {
+    watch.leave();
+    if (navigate) navigate(livePath);
+    else if (typeof window !== "undefined") window.location.assign(livePath);
+  };
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        flex: 1,
+        color: theme.colors.text,
+        fontFamily: theme.fontFamily,
+      }}
+    >
+      <div style={{ padding: "0 16px 8px" }}>
+        <button
+          type="button"
+          onClick={leave}
+          data-testid="broadcast-leave"
+          aria-label={t("forge.broadcast_watch.leave")}
+          style={{ background: "transparent", border: "none", padding: 0, cursor: "pointer" }}
+        >
+          <X size={28} color={theme.colors.primary} />
+        </button>
+      </div>
+
+      {screen.showLoading && <Loading fullPage />}
+
+      {screen.view === "error" && <div data-testid="broadcast-load-error">{t("forge.broadcast_watch.load_error")}</div>}
+
+      {screen.view === "ended" && broadcast && <EndedBroadcast broadcast={broadcast} />}
+
+      {screen.view === "player" && broadcast && watch.pass && (
+        <BroadcastPlayer broadcast={broadcast} broadcastPass={watch.pass} renderPlayer={renderPlayer} />
+      )}
+
+      {screen.view === "pass" && broadcast && (
+        <BroadcastPassValidation
+          broadcast={broadcast}
+          onValidate={(ticketCode) => watch.validate(ticketCode).catch(() => undefined)}
+          isValidating={watch.isValidating}
+          error={watch.error}
+          buyTickets={
+            <BroadcastTicketPurchase
+              broadcast={broadcast}
+              formatAmount={formatAmount}
+              finalisePath={finalisePath}
+              onComplete={onComplete}
+            />
+          }
+        />
+      )}
+    </div>
+  );
+}

package/src/ui/styled/ForgotPasswordForm.tsx

@@ -21,6 +21,11 @@ export function ForgotPasswordForm({ loginHref }: ForgotPasswordFormProps) {
   const [isSuccess, setIsSuccess] = useState(false);
 
   const card: React.CSSProperties = {
+    // See `LoginForm`. The host layout is a COLUMN flex container, and an auto
+    // cross-axis margin disables `align-items: stretch`, so `maxWidth` alone
+    // leaves the card shrink-to-fit. The cap is unchanged: this fills the
+    // container UP TO 420 and no further.
+    width: "100%",
     maxWidth: 420,
     margin: "40px auto 0",
     padding: 24,

package/src/ui/styled/LiveBroadcastList.tsx

@@ -0,0 +1,171 @@
+import { Calendar, Play } from "lucide-react";
+import { useLiveBroadcasts } from "../../data/queries/useBroadcasts";
+import type { ILiveBroadcast } from "../../types/models";
+import { formatDateTime } from "../../utils/formatDateTime";
+import { useForgeT } from "../../i18n";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { broadcastListStatus } from "../headless/broadcast/broadcastState";
+import { Loading } from "./Loading";
+
+export interface LiveBroadcastListProps {
+  /** Host-owned navigation. Falls back to a full page load. */
+  navigate?: (href: string) => void;
+  /** Where a card leads. Default `/i/live/:broadcastId`. */
+  broadcastPath?: (broadcastId: string) => string;
+}
+
+/**
+ * What is on now: the tenant's live, upcoming and just-ended broadcasts.
+ *
+ * The list itself is public. The paywall is on the WATCH page, where a gated
+ * broadcast asks for a ticket before a single frame is mounted, so a card here
+ * gives away nothing but a title and a start time.
+ */
+export function LiveBroadcastList({ navigate, broadcastPath }: LiveBroadcastListProps) {
+  const t = useForgeT();
+  const theme = useForgeTheme();
+  const { data: broadcasts, isLoading, error } = useLiveBroadcasts();
+
+  const href = (id: string) => (broadcastPath ? broadcastPath(id) : `/i/live/${id}`);
+  const go = (id: string) => {
+    const path = href(id);
+    if (navigate) navigate(path);
+    else if (typeof window !== "undefined") window.location.assign(path);
+  };
+
+  const centered = (title: string, body: string) => (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        minHeight: 400,
+        color: theme.colors.text,
+        fontFamily: theme.fontFamily,
+      }}
+    >
+      <div style={{ textAlign: "center" }}>
+        <h3 style={{ fontSize: 18, fontWeight: 600, marginBottom: 8 }}>{title}</h3>
+        <p style={{ opacity: 0.8 }}>{body}</p>
+      </div>
+    </div>
+  );
+
+  if (isLoading) return <Loading fullPage />;
+
+  if (error) {
+    return centered(t("forge.live_broadcast_list.error_title"), t("forge.live_broadcast_list.error_body"));
+  }
+
+  if (!broadcasts || broadcasts.length === 0) {
+    return centered(t("forge.live_broadcast_list.empty_title"), t("forge.live_broadcast_list.empty_body"));
+  }
+
+  return (
+    <div
+      style={{
+        width: "100%",
+        padding: "24px 16px",
+        backgroundColor: theme.colors.background,
+        color: theme.colors.text,
+        fontFamily: theme.fontFamily,
+      }}
+    >
+      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
+        <div style={{ marginBottom: 32 }}>
+          <h1 style={{ fontSize: 32, fontWeight: 700, marginBottom: 8, fontFamily: theme.headingFontFamily }}>
+            {t("forge.live_broadcast_list.title")}
+          </h1>
+          <p style={{ opacity: 0.8 }}>{t("forge.live_broadcast_list.subtitle")}</p>
+        </div>
+
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
+            gap: 24,
+          }}
+        >
+          {broadcasts.map((broadcast: ILiveBroadcast) => {
+            const status = broadcastListStatus(broadcast);
+            const thumb = broadcast.thumbnailUrl || broadcast.generatedThumbnailUrl;
+
+            return (
+              <button
+                key={broadcast.id}
+                type="button"
+                onClick={() => go(broadcast.id)}
+                data-testid="live-broadcast-card"
+                style={{
+                  textAlign: "left",
+                  padding: 0,
+                  cursor: "pointer",
+                  overflow: "hidden",
+                  backgroundColor: theme.colors.background,
+                  color: theme.colors.text,
+                  borderRadius: theme.cornerRadius,
+                  boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+                  border: `1px solid ${theme.colors.primary}30`,
+                }}
+              >
+                <div style={{ position: "relative" }}>
+                  <div
+                    style={{
+                      aspectRatio: "16/9",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      position: "relative",
+                      background: `linear-gradient(135deg, ${theme.colors.primary}20, ${theme.colors.primary}10)`,
+                    }}
+                  >
+                    {thumb && (
+                      <img
+                        src={thumb}
+                        alt={broadcast.title}
+                        style={{
+                          width: "100%",
+                          height: "100%",
+                          objectFit: "cover",
+                          position: "absolute",
+                          top: 0,
+                          left: 0,
+                        }}
+                      />
+                    )}
+                    <Play size={40} style={{ color: theme.colors.primary, position: "relative", zIndex: 1 }} />
+                  </div>
+                  <div
+                    style={{
+                      position: "absolute",
+                      top: 8,
+                      left: 8,
+                      padding: "4px 8px",
+                      borderRadius: 999,
+                      fontSize: 12,
+                      fontWeight: 600,
+                      background: status.background,
+                      color: status.color,
+                    }}
+                  >
+                    {status.text}
+                  </div>
+                </div>
+
+                <div style={{ padding: 16 }}>
+                  <h3 style={{ fontWeight: 600, marginBottom: 8 }}>{broadcast.title}</h3>
+                  {broadcast.startDate && (
+                    <div style={{ display: "flex", alignItems: "center", gap: 4, fontSize: 13, opacity: 0.8 }}>
+                      <Calendar size={14} />
+                      <span>{formatDateTime(broadcast.startDate)}</span>
+                    </div>
+                  )}
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/ui/styled/LoginForm.tsx

@@ -18,6 +18,16 @@ export function LoginForm({ onSuccess, signupHref, forgotHref }: LoginFormProps)
   const flow = useLoginFlow({ onSuccess });
 
   const card: React.CSSProperties = {
+    // `width: 100%` is what stops this collapsing to its content.
+    //
+    // The host layout is a COLUMN flex container, and an auto cross-axis margin
+    // disables `align-items: stretch`. So `maxWidth` alone left the card
+    // shrink-to-fit and the auto margins centred whatever that came to. Sign-in
+    // has the least content of the auth forms (two fields, short labels), so it
+    // collapsed the furthest and looked broken next to signup.
+    //
+    // The cap is unchanged: this fills the container UP TO 420 and no further.
+    width: "100%",
     maxWidth: 420,
     margin: "40px auto 0",
     padding: 24,