@tribe-nest/forge 3.26.0 → 3.31.0

package/src/ui/styled/broadcast/BroadcastPassValidation.tsx

@@ -0,0 +1,187 @@
+import { useState, type CSSProperties, type ReactNode } from "react";
+import type { ILiveBroadcast } from "../../../types/models";
+import { useForgeT } from "../../../i18n";
+import { useForgeTheme, type ForgeTheme } from "../../theme/ForgeThemeProvider";
+import { buttonStyle } from "../Button";
+
+/** Append an alpha to a 6-digit hex color (mirrors frontend-shared addAlphaToHexCode). */
+const a = (hex: string, alpha: number) => hex + Math.round(alpha * 255).toString(16).padStart(2, "0");
+
+const inputStyle = (t: ForgeTheme): CSSProperties => ({
+  width: "100%",
+  padding: 10,
+  border: `1px solid ${a(t.colors.primary, 0.25)}`,
+  borderRadius: t.cornerRadius,
+  background: t.colors.background,
+  color: t.colors.text,
+  fontFamily: t.fontFamily,
+  boxSizing: "border-box",
+});
+
+export interface BroadcastPassValidationProps {
+  broadcast: ILiveBroadcast;
+  /** Present a ticket code. Rejection comes back through `error`, not a throw the caller sees. */
+  onValidate: (ticketCode: string) => void | Promise<unknown>;
+  /** True while the code is in flight. */
+  isValidating?: boolean;
+  /** Why the last code was refused. Stays visible: it is a validation error. */
+  error?: string | null;
+  /**
+   * The buy-a-ticket panel, supplied by the caller so this component stays free
+   * of data hooks and can be rendered (and asserted on) without a provider tree.
+   */
+  buyTickets?: ReactNode;
+}
+
+/**
+ * THE PAYWALL. A broadcast with a linked event does not play a frame until a
+ * viewer has presented a ticket code that the server accepted.
+ *
+ * Everything a viewer can see before that point is deliberately worthless: the
+ * title and the thumbnail, which are already public on the list page. The video
+ * element is not mounted, the playback URL is not in the markup, and the chat
+ * socket is not opened, because the component that does all three is not
+ * rendered until `useBroadcastWatch` reports a validated pass.
+ *
+ * The refusal message says only that the code was not accepted. It never says
+ * which event a code IS valid for, which would turn this box into a way to test
+ * ticket ids against every broadcast on the site.
+ */
+export function BroadcastPassValidation({
+  broadcast,
+  onValidate,
+  isValidating,
+  error,
+  buyTickets,
+}: BroadcastPassValidationProps) {
+  const t = useForgeT();
+  const theme = useForgeTheme();
+  const [ticketCode, setTicketCode] = useState("");
+  const thumb = broadcast.thumbnailUrl || broadcast.generatedThumbnailUrl;
+
+  // Trimmed, because a ticket code is nearly always pasted and a pasted code
+  // nearly always brings a trailing space with it.
+  const trimmed = ticketCode.trim();
+  const canSubmit = !!trimmed && !isValidating;
+
+  const submit = () => {
+    if (!canSubmit || !broadcast.id) return;
+    void onValidate(trimmed);
+  };
+
+  return (
+    <div
+      data-testid="broadcast-pass-validation"
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: 16,
+        alignItems: "center",
+        padding: "0 16px",
+        color: theme.colors.text,
+        fontFamily: theme.fontFamily,
+      }}
+    >
+      <div
+        style={{
+          marginTop: 16,
+          maxWidth: 500,
+          width: "100%",
+          marginInline: "auto",
+          backgroundColor: theme.colors.background,
+          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`,
+          overflow: "hidden",
+        }}
+      >
+        <div
+          style={{
+            aspectRatio: "16/9",
+            position: "relative",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            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 }}
+            />
+          )}
+        </div>
+        <div style={{ padding: 16 }}>
+          <h3 style={{ fontWeight: 600 }}>{broadcast.title}</h3>
+        </div>
+      </div>
+
+      <div
+        style={{
+          marginTop: 16,
+          maxWidth: 500,
+          width: "100%",
+          marginInline: "auto",
+          display: "flex",
+          flexDirection: "column",
+          gap: 16,
+          alignItems: "center",
+        }}
+      >
+        <label htmlFor="broadcast-ticket-code" style={{ textAlign: "center" }}>
+          {t("forge.broadcast_pass_validation.prompt")}
+        </label>
+        <input
+          id="broadcast-ticket-code"
+          data-testid="broadcast-ticket-code"
+          placeholder={t("forge.broadcast_pass_validation.input_placeholder")}
+          value={ticketCode}
+          onChange={(e) => setTicketCode(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key !== "Enter") return;
+            e.preventDefault();
+            submit();
+          }}
+          aria-invalid={error ? true : undefined}
+          aria-describedby={error ? "broadcast-ticket-code-error" : undefined}
+          style={inputStyle(theme)}
+        />
+        {error && (
+          <p
+            id="broadcast-ticket-code-error"
+            data-testid="broadcast-pass-error"
+            role="alert"
+            // Refusal is the one place a non-theme colour is right: red is the
+            // convention for "this input is wrong", and the artist's primary
+            // could be any hue including a green.
+            style={{ color: "#ef4444", fontSize: 13, margin: 0, alignSelf: "flex-start" }}
+          >
+            {error}
+          </p>
+        )}
+        <button
+          type="button"
+          data-testid="broadcast-pass-submit"
+          onClick={submit}
+          disabled={!canSubmit}
+          style={buttonStyle(theme, { fullWidth: true, disabled: !canSubmit })}
+        >
+          {isValidating
+            ? t("forge.broadcast_pass_validation.validating")
+            : t("forge.broadcast_pass_validation.join")}
+        </button>
+
+        {buyTickets && (
+          <>
+            <p style={{ marginBlock: 16 }}>{t("forge.broadcast_pass_validation.or")}</p>
+            {buyTickets}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default BroadcastPassValidation;