@tribe-nest/forge 3.26.0 → 3.31.0

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

@@ -0,0 +1,536 @@
+import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { Maximize, Pause, Pin, Play, Send } from "lucide-react";
+import { io, type Socket } from "socket.io-client";
+import type { IBroadcastPass, ILiveBroadcast } from "../../../types/models";
+import { useForge } from "../../../provider/ForgeProvider";
+import { getForgeWebSocketUrl } from "../../../client/createForgeClient";
+import {
+  BroadcastChannelProvider,
+  useBroadcastAudience,
+  useBroadcastComments,
+  useBroadcastSessionApi,
+  type BroadcastComment,
+} from "../../../data/queries/useBroadcasts";
+import { useForgeT } from "../../../i18n";
+import { useForgeTheme } from "../../theme/ForgeThemeProvider";
+import { timeAgo } from "../community/util";
+import { buttonStyle } from "../Button";
+import { Loading } from "../Loading";
+
+/** The socket messages a watching browser sends and receives. */
+const SocketEvent = {
+  BroadcastChatMessage: "broadcastChatMessage",
+  BroadcastJoin: "broadcastJoin",
+  BroadcastPinComment: "broadcastPinComment",
+} as const;
+
+/**
+ * The simulcast layers a viewer can pin themselves to. The one-letter values are
+ * the encoder's rids, not labels: `f` full, `h` half, `q` quarter.
+ */
+const SIMULCAST_QUALITIES = [
+  { label: "forge.broadcast_player.quality_auto", value: "auto" },
+  { label: "forge.broadcast_player.quality_high", value: "f" },
+  { label: "forge.broadcast_player.quality_medium", value: "h" },
+  { label: "forge.broadcast_player.quality_low", value: "q" },
+] as const;
+
+const newId = (): string => {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") return crypto.randomUUID();
+  return `${Date.now()}-${Math.random().toString(16).slice(2)}`;
+};
+
+export interface BroadcastPlayerRenderProps {
+  /** The HLS playlist to play. */
+  src?: string;
+}
+
+export interface BroadcastPlayerProps {
+  broadcast: ILiveBroadcast;
+  /** The validated pass. Its name is what this viewer's chat messages are signed with. */
+  broadcastPass: IBroadcastPass;
+  /**
+   * How to play the HLS stream.
+   *
+   * Forge does not ship an HLS engine: a `<video src="…m3u8">` plays natively on
+   * Safari and on nothing else, so a site that wants Chrome and Firefox passes a
+   * player here (the starter passes `react-player`, which is exactly what
+   * apps/client uses). The bare `<video>` is the fallback rather than the
+   * default-and-only, so a missing renderer degrades to "plays on Safari"
+   * instead of to a blank rectangle everywhere.
+   */
+  renderPlayer?: (props: BroadcastPlayerRenderProps) => ReactNode;
+}
+
+/**
+ * The watch surface: the stream, who else is here, and the chat.
+ *
+ * Mounted ONLY behind a validated pass. Two playback paths, chosen by the
+ * broadcast itself: a WebRTC subscription when the broadcast carries a realtime
+ * config (sub-second, with a quality picker), and HLS otherwise.
+ */
+export function BroadcastPlayer({ broadcast, broadcastPass, renderPlayer }: BroadcastPlayerProps) {
+  const t = useForgeT();
+  const theme = useForgeTheme();
+  const { apiUrl, profileId } = useForge();
+  const sessionApi = useBroadcastSessionApi();
+
+  const [comments, setComments] = useState<BroadcastComment[]>([]);
+  const [comment, setComment] = useState("");
+  const [pinnedComment, setPinnedComment] = useState<BroadcastComment | null>(null);
+  const commentsContainerRef = useRef<HTMLDivElement>(null);
+  const socketRef = useRef<Socket | null>(null);
+
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const videoContainerRef = useRef<HTMLDivElement>(null);
+  const [isAudioLoaded, setIsAudioLoaded] = useState(false);
+  const [isVideoLoaded, setIsVideoLoaded] = useState(false);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [showControls, setShowControls] = useState(false);
+  const [currentQuality, setCurrentQuality] = useState<string>("auto");
+  const [realtimeSessionId, setRealtimeSessionId] = useState<string | null>(null);
+  const isSubscribingRef = useRef(false);
+
+  const isRealtime = useMemo(
+    () => !!broadcast.realtimeConfig && Object.keys(broadcast.realtimeConfig).length > 0,
+    [broadcast.realtimeConfig],
+  );
+
+  const { data: audienceData } = useBroadcastAudience(broadcast.id, !broadcast.endedAt);
+  const { data: initialComments } = useBroadcastComments(broadcast.id);
+
+  // The backlog seeds the list once; everything after it arrives over the socket.
+  useEffect(() => {
+    if (initialComments) setComments(initialComments);
+  }, [initialComments]);
+
+  useEffect(() => {
+    if (comments.length === 0) return;
+    commentsContainerRef.current?.scrollTo({
+      top: commentsContainerRef.current.scrollHeight,
+      behavior: "smooth",
+    });
+  }, [comments]);
+
+  // ── WebRTC subscription ────────────────────────────────────────────────────
+  useEffect(() => {
+    const config = broadcast.realtimeConfig;
+    if (!isRealtime || !config) return;
+    if (isSubscribingRef.current) return;
+    isSubscribingRef.current = true;
+
+    const subscribe = async () => {
+      const pc = new RTCPeerConnection({ iceServers: [{ urls: "stun:stun.cloudflare.com:3478" }] });
+      // The transceiver order is the contract with the server: video first,
+      // audio second. Swapping them silently hands the audio track to the video
+      // element and the viewer gets a black rectangle with sound.
+      pc.addTransceiver("video", { direction: "recvonly" });
+      pc.addTransceiver("audio", { direction: "recvonly" });
+
+      pc.ontrack = (event) => {
+        if (event.track.kind === "video" && videoRef.current && event.streams[0]) {
+          videoRef.current.srcObject = event.streams[0];
+          setIsVideoLoaded(true);
+        }
+        if (event.track.kind === "audio" && audioRef.current && event.streams[0]) {
+          const stream = new MediaStream();
+          stream.addTrack(event.track);
+          audioRef.current.srcObject = stream;
+          setIsAudioLoaded(true);
+        }
+      };
+
+      const offer = await pc.createOffer();
+      await pc.setLocalDescription(offer);
+      const local = pc.localDescription?.toJSON();
+
+      const answer = await sessionApi.subscribe({
+        sdp: local?.sdp,
+        type: local?.type,
+        trackIds: config.tracks.map((track) => track.trackName),
+        sessionId: config.sessionId,
+      });
+
+      setRealtimeSessionId(answer.sessionId);
+      await pc.setRemoteDescription(
+        new RTCSessionDescription({ sdp: answer.sessionDescription.sdp, type: "answer" }),
+      );
+    };
+
+    subscribe().catch(() => {
+      // Nothing useful to say to a viewer here: the spinner over the stage is
+      // already the honest report that no track arrived.
+      isSubscribingRef.current = false;
+    });
+    // `sessionApi` is rebuilt each render and is deliberately not a dependency:
+    // including it would re-negotiate the peer connection on every render.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isRealtime, broadcast.realtimeConfig]);
+
+  // ── Chat socket ────────────────────────────────────────────────────────────
+  useEffect(() => {
+    if (!profileId || !broadcast.id || socketRef.current) return;
+
+    const socket = io(getForgeWebSocketUrl(apiUrl), {
+      auth: { profileId },
+      transports: ["websocket"],
+    });
+
+    socket.on("connect", () => {
+      socket.emit(SocketEvent.BroadcastJoin, { broadcastId: broadcast.id });
+    });
+
+    socket.on("message", (message: { event: string; data: unknown }) => {
+      if (message.event === SocketEvent.BroadcastChatMessage) {
+        const data = message.data as { broadcastId: string; message: BroadcastComment };
+        setComments((prev) => [...prev, data.message]);
+        return;
+      }
+      if (message.event === SocketEvent.BroadcastPinComment) {
+        const data = message.data as { broadcastId: string; comment: BroadcastComment | null };
+        setPinnedComment(data.comment);
+      }
+    });
+
+    socketRef.current = socket;
+  }, [apiUrl, profileId, broadcast.id]);
+
+  const sendComment = () => {
+    if (!profileId || !socketRef.current || !comment.trim()) return;
+    socketRef.current.emit(SocketEvent.BroadcastChatMessage, {
+      broadcastId: broadcast.id,
+      message: {
+        id: newId(),
+        name: broadcastPass.name || t("forge.broadcast_player.anonymous"),
+        profileId,
+        content: comment,
+        publishedAt: new Date().toISOString(),
+        channelProvider: BroadcastChannelProvider.Website,
+      },
+    });
+    setComment("");
+  };
+
+  const togglePlay = () => {
+    if (!isRealtime || !isAudioLoaded || !isVideoLoaded) return;
+    if (isPlaying) {
+      audioRef.current?.pause();
+      videoRef.current?.pause();
+      setIsPlaying(false);
+      return;
+    }
+    void audioRef.current?.play();
+    void videoRef.current?.play();
+    if (audioRef.current) audioRef.current.volume = 1;
+    setIsPlaying(true);
+  };
+
+  const toggleFullscreen = () => {
+    if (!videoContainerRef.current) return;
+    if (document.fullscreenElement) void document.exitFullscreen();
+    else void videoContainerRef.current.requestFullscreen();
+  };
+
+  const changeQuality = async (quality: string) => {
+    const config = broadcast.realtimeConfig;
+    if (!config) return;
+    setCurrentQuality(quality);
+    const videoTrack = config.tracks.find((track) => track.mid === "0");
+    try {
+      await sessionApi.switchQuality({
+        track: {
+          ...videoTrack,
+          sessionId: realtimeSessionId,
+          ...(quality !== "auto"
+            ? {
+                simulcast: {
+                  preferredRid: quality,
+                  priorityOrdering: "asciibetical",
+                  ridNotAvailable: "asciibetical",
+                },
+              }
+            : {}),
+        },
+        sessionId: config.sessionId,
+      });
+    } catch {
+      // Falling back to whatever layer is already playing is better than
+      // stopping the stream to report a preference that did not take.
+      setCurrentQuality("auto");
+    }
+  };
+
+  const panel = {
+    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`,
+  } as const;
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexWrap: "wrap",
+        gap: 32,
+        padding: 16,
+        maxWidth: 1700,
+        marginInline: "auto",
+        flex: 1,
+        color: theme.colors.text,
+        fontFamily: theme.fontFamily,
+      }}
+    >
+      <div style={{ flex: "1 1 520px", minWidth: 0, ...panel }}>
+        {!isRealtime && (
+          <div data-testid="broadcast-hls-stage" style={{ aspectRatio: "16/9" }}>
+            {renderPlayer ? (
+              renderPlayer({ src: broadcast.liveUrl })
+            ) : (
+              <video
+                src={broadcast.liveUrl}
+                controls
+                autoPlay
+                playsInline
+                style={{ width: "100%", height: "100%", background: "#000" }}
+              />
+            )}
+          </div>
+        )}
+
+        {isRealtime && (
+          <div
+            ref={videoContainerRef}
+            data-testid="broadcast-realtime-stage"
+            onClick={togglePlay}
+            onMouseEnter={() => setShowControls(true)}
+            onMouseLeave={() => setShowControls(false)}
+            style={{ aspectRatio: "16/9", position: "relative", background: "#000", cursor: "pointer" }}
+          >
+            <video ref={videoRef} playsInline style={{ width: "100%", height: "100%" }} />
+            <audio ref={audioRef} />
+
+            {(!isAudioLoaded || !isVideoLoaded) && (
+              <div
+                style={{
+                  position: "absolute",
+                  top: "50%",
+                  left: "50%",
+                  transform: "translate(-50%, -50%)",
+                  pointerEvents: "none",
+                }}
+              >
+                <Loading />
+              </div>
+            )}
+
+            {isAudioLoaded && isVideoLoaded && !isPlaying && (
+              <div
+                style={{
+                  position: "absolute",
+                  inset: 0,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  background: "rgba(0, 0, 0, 0.2)",
+                  pointerEvents: "none",
+                }}
+              >
+                <Play size={64} color="#ffffff" fill="#ffffff" />
+              </div>
+            )}
+
+            {isAudioLoaded && isVideoLoaded && isPlaying && showControls && (
+              <div
+                style={{
+                  position: "absolute",
+                  top: "50%",
+                  left: "50%",
+                  transform: "translate(-50%, -50%)",
+                  pointerEvents: "none",
+                  opacity: 0.8,
+                }}
+              >
+                <Pause size={64} color="#ffffff" fill="#ffffff" />
+              </div>
+            )}
+
+            {isAudioLoaded && isVideoLoaded && (
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  toggleFullscreen();
+                }}
+                aria-label={t("forge.broadcast_player.fullscreen")}
+                style={{
+                  position: "absolute",
+                  bottom: 16,
+                  right: 16,
+                  padding: 8,
+                  borderRadius: 8,
+                  border: "none",
+                  cursor: "pointer",
+                  background: "rgba(0, 0, 0, 0.5)",
+                  color: "#ffffff",
+                  zIndex: 1,
+                }}
+              >
+                <Maximize size={20} />
+              </button>
+            )}
+          </div>
+        )}
+
+        <div
+          style={{
+            padding: 16,
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            gap: 16,
+            flexWrap: "wrap",
+          }}
+        >
+          <div>
+            <p style={{ fontSize: 22, fontWeight: 500 }}>{broadcast.title}</p>
+            <div style={{ display: "flex", alignItems: "center", gap: 24, marginTop: 8, fontSize: 14 }}>
+              <p>{t("forge.broadcast_player.watching_now", { count: audienceData?.count ?? 0 })}</p>
+              {broadcast.startedAt && (
+                <p>{t("forge.broadcast_player.started", { duration: timeAgo(broadcast.startedAt) })}</p>
+              )}
+            </div>
+          </div>
+
+          {isRealtime && (
+            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+              <label htmlFor="broadcast-quality">{t("forge.broadcast_player.quality")}</label>
+              <select
+                id="broadcast-quality"
+                value={currentQuality}
+                onChange={(e) => void changeQuality(e.target.value)}
+                style={{
+                  padding: 8,
+                  borderRadius: theme.cornerRadius,
+                  border: `1px solid ${theme.colors.primary}40`,
+                  background: theme.colors.background,
+                  color: theme.colors.text,
+                  fontFamily: theme.fontFamily,
+                }}
+              >
+                {SIMULCAST_QUALITIES.map((quality) => (
+                  <option key={quality.value} value={quality.value}>
+                    {t(quality.label)}
+                  </option>
+                ))}
+              </select>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div style={{ flex: "1 1 340px", maxWidth: 400, height: 600, position: "relative", overflow: "hidden", ...panel }}>
+        <p style={{ fontSize: 18, padding: 16, borderBottom: `1px solid ${theme.colors.primary}30` }}>
+          {t("forge.broadcast_player.chat")}
+        </p>
+
+        {pinnedComment && (
+          <div
+            data-testid="broadcast-pinned-comment"
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              margin: "8px 16px 0",
+              padding: 8,
+              backgroundColor: `${theme.colors.primary}15`,
+              border: `1px solid ${theme.colors.primary}50`,
+              borderRadius: theme.cornerRadius,
+            }}
+          >
+            <Pin size={14} style={{ color: theme.colors.primary, flexShrink: 0 }} />
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <span style={{ fontSize: 12, fontWeight: 500, color: theme.colors.primary }}>
+                {t("forge.broadcast_player.pinned")}
+              </span>
+              <span style={{ fontSize: 12, marginLeft: 8, opacity: 0.7 }}>{pinnedComment.name}</span>
+              <p style={{ fontSize: 14, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                {pinnedComment.content}
+              </p>
+            </div>
+          </div>
+        )}
+
+        <div ref={commentsContainerRef} style={{ overflowY: "auto", height: "100%", padding: "16px 16px 320px" }}>
+          {comments.map((item) => (
+            <div
+              key={item.id}
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                gap: 8,
+                padding: 8,
+                marginBottom: 8,
+                border: `1px solid ${theme.colors.primary}30`,
+                borderRadius: theme.cornerRadius,
+              }}
+            >
+              <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                <span style={{ fontSize: 14, opacity: 0.7 }}>{item.name}</span>
+                <span style={{ fontSize: 12, opacity: 0.6 }}>{timeAgo(item.publishedAt)}</span>
+              </div>
+              <div style={{ fontSize: 14 }}>{item.content}</div>
+            </div>
+          ))}
+        </div>
+
+        <div
+          style={{
+            position: "absolute",
+            bottom: 0,
+            left: 0,
+            right: 0,
+            padding: 16,
+            background: theme.colors.background,
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+          }}
+        >
+          <input
+            aria-label={t("forge.broadcast_player.message_label")}
+            value={comment}
+            onChange={(e) => setComment(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key !== "Enter") return;
+              e.preventDefault();
+              sendComment();
+            }}
+            style={{
+              flex: 1,
+              minWidth: 0,
+              padding: 10,
+              border: `1px solid ${theme.colors.primary}40`,
+              borderRadius: theme.cornerRadius,
+              background: theme.colors.background,
+              color: theme.colors.text,
+              fontFamily: theme.fontFamily,
+            }}
+          />
+          <button
+            type="button"
+            onClick={sendComment}
+            disabled={!comment.trim().length}
+            aria-label={t("forge.broadcast_player.send")}
+            style={buttonStyle(theme, { disabled: !comment.trim().length })}
+          >
+            <Send size={18} />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default BroadcastPlayer;

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

@@ -0,0 +1,74 @@
+import type { ILiveBroadcast } from "../../../types/models";
+import { useEvent } from "../../../data/queries/useEvents";
+import { useForgeT } from "../../../i18n";
+import { useForgeTheme } from "../../theme/ForgeThemeProvider";
+import { useAmountFormatter } from "../../format/useFormatCurrency";
+import { minTicketPrice } from "../../headless/broadcast/broadcastState";
+import { EventTickets } from "../EventTickets";
+
+export interface BroadcastTicketPurchaseProps {
+  broadcast: ILiveBroadcast;
+  /** Format a numeric amount for display. Defaults to the site's currency formatter. */
+  formatAmount?: (amount: number) => string;
+  /** Stripe return URL for a PAID purchase (forwarded to the ticket flow). */
+  finalisePath?: (slug: string, orderId: string) => string;
+  /** Host-owned navigation on FREE completion (forwarded to the ticket flow). */
+  onComplete?: (info: { slug: string; orderId: string }) => void;
+}
+
+/**
+ * The way IN for a viewer who does not have a ticket: the linked event's real
+ * checkout, opened from the paywall.
+ *
+ * Without this the pass box is a dead end. Someone who followed a link to a paid
+ * broadcast, has no code, and is looking at a locked page has no route to buy
+ * one, which is the difference between a paywall and a closed door.
+ *
+ * Renders nothing until the linked event resolves, so a broadcast whose event
+ * has been deleted shows a ticket box and no misleading buy button.
+ */
+export function BroadcastTicketPurchase({
+  broadcast,
+  formatAmount,
+  finalisePath,
+  onComplete,
+}: BroadcastTicketPurchaseProps) {
+  const t = useForgeT();
+  const theme = useForgeTheme();
+  const fmt = useAmountFormatter(formatAmount);
+  const { data: event } = useEvent(broadcast.events?.[0]?.eventId);
+
+  if (!event) return null;
+
+  const from = minTicketPrice(broadcast);
+
+  return (
+    <div
+      data-testid="broadcast-buy-tickets"
+      style={{
+        width: "100%",
+        display: "flex",
+        flexDirection: "column",
+        gap: 8,
+        padding: 16,
+        alignItems: "center",
+        flexShrink: 0,
+        color: theme.colors.text,
+        border: `1px solid ${theme.colors.primary}80`,
+        borderRadius: theme.cornerRadius,
+        backgroundColor: theme.colors.background,
+      }}
+    >
+      <EventTickets
+        slug={event.slug}
+        triggerText={t("forge.broadcast_ticket_purchase.buy_tickets")}
+        formatAmount={fmt}
+        finalisePath={finalisePath}
+        onComplete={onComplete}
+      />
+      {from !== null && <p>{t("forge.broadcast_ticket_purchase.from_price", { price: fmt(from) })}</p>}
+    </div>
+  );
+}
+
+export default BroadcastTicketPurchase;