@tribe-nest/forge 3.29.0 → 3.34.0

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,