@tribe-nest/forge 3.31.0 → 3.35.0

package/src/ui/headless/film/FilmWatermark.tsx

@@ -0,0 +1,180 @@
+import { useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
+import type { FilmWatermarkPayload } from "../../../data/queries/useFilmPlaybackSession";
+
+/**
+ * The dynamic viewer overlay: this renter's name, email and rental reference,
+ * drawn over the player for a few seconds at a time in a moving position.
+ *
+ * ## What this layer does, and what it does not
+ *
+ * It deters the screen-record-and-share leak by NAMING the leaker. It stops
+ * nobody from recording, and it is the one protection layer a custom player can
+ * simply omit - which is why it ships as a droppable component rather than as
+ * something welded into a styled block. Keeping the layer costs one component;
+ * dropping it costs per-viewer traceability, and a leaked recording is then
+ * still traceable to the film (the platform watermark is burned into the pixels
+ * by the transcoder) but no longer to the person.
+ *
+ * ## Why it moves
+ *
+ * Constant placement invites cropping: a fixed corner is one rectangle to cut
+ * off, and a recording cropped once is clean for ever. Randomised position and
+ * timing contaminate the WHOLE recording instead, so there is no single edit
+ * that removes it.
+ *
+ * ## Why it watches itself
+ *
+ * A viewer with dev tools open can delete the node or set `display: none` on it.
+ * The overlay observes its own subtree and re-asserts the style it was given, so
+ * removing it takes more than one click. This is a speed bump, not a control: it
+ * is a client-side layer and everything client-side is ultimately editable. The
+ * layers that actually hold are on the server.
+ *
+ * Mount it INSIDE the element that has the video, positioned, so it shares the
+ * player surface. A sibling div is trivially hidden and, worse, is not captured
+ * by a screen recording of the video element alone.
+ */
+export interface FilmWatermarkProps extends Partial<FilmWatermarkPayload> {
+  /** How often a new placement appears, in ms. Default 45s, jittered. */
+  intervalMs?: number;
+  /** How long each placement stays up, in ms. Default 6s. */
+  visibleMs?: number;
+  /** 0..1. Default 0.42 - readable in a recording, unobtrusive while watching. */
+  opacity?: number;
+  className?: string;
+  /** Merged over the computed placement. Does not survive the tamper check. */
+  style?: CSSProperties;
+}
+
+/** The nine placements, as percentages of the player surface. Corners are avoided: they crop first. */
+const PLACEMENTS: { top: string; left: string }[] = [
+  { top: "12%", left: "8%" },
+  { top: "12%", left: "52%" },
+  { top: "38%", left: "18%" },
+  { top: "38%", left: "58%" },
+  { top: "62%", left: "10%" },
+  { top: "62%", left: "48%" },
+  { top: "80%", left: "22%" },
+  { top: "80%", left: "60%" },
+  { top: "50%", left: "34%" },
+];
+
+const pick = <T,>(items: T[]): T => items[Math.floor(Math.random() * items.length)] ?? items[0]!;
+
+export function FilmWatermark({
+  name,
+  email,
+  rentalRef,
+  intervalMs = 45_000,
+  visibleMs = 6_000,
+  opacity = 0.42,
+  className,
+  style,
+}: FilmWatermarkProps) {
+  const [visible, setVisible] = useState(false);
+  const [placement, setPlacement] = useState(() => PLACEMENTS[0]!);
+  /** Bumped by the tamper check to force React to re-apply the style it owns. */
+  const [assertion, setAssertion] = useState(0);
+  const nodeRef = useRef<HTMLDivElement | null>(null);
+
+  // Identify with whatever we were given. An empty overlay is worse than none:
+  // it draws attention to the mechanism while carrying no evidence.
+  const label = useMemo(
+    () =>
+      [name, email, rentalRef]
+        .map((part) => (part ?? "").trim())
+        .filter(Boolean)
+        .join("  ·  "),
+    [name, email, rentalRef],
+  );
+
+  // The show/hide cycle. Jittered so the interval itself is not a pattern
+  // somebody can cut around.
+  useEffect(() => {
+    if (!label) return;
+    let showTimer: ReturnType<typeof setTimeout>;
+    let hideTimer: ReturnType<typeof setTimeout>;
+
+    const cycle = () => {
+      setPlacement(pick(PLACEMENTS));
+      setVisible(true);
+      hideTimer = setTimeout(() => {
+        setVisible(false);
+        // 0.6x to 1.4x of the nominal interval.
+        showTimer = setTimeout(cycle, intervalMs * (0.6 + Math.random() * 0.8));
+      }, visibleMs);
+    };
+
+    // First appearance lands early, so a viewer who stops recording after 30
+    // seconds still has it, then settles into the cycle.
+    showTimer = setTimeout(cycle, 3_000 + Math.random() * 4_000);
+    return () => {
+      clearTimeout(showTimer);
+      clearTimeout(hideTimer);
+    };
+  }, [label, intervalMs, visibleMs]);
+
+  // The tamper check. Watches the node's own attributes and its parent's child
+  // list, and re-asserts by bumping state - React then rewrites the style it
+  // owns, whatever was done to it.
+  useEffect(() => {
+    if (!label || typeof MutationObserver === "undefined") return;
+    const node = nodeRef.current;
+    const parent = node?.parentElement;
+    if (!node || !parent) return;
+
+    const observer = new MutationObserver((records) => {
+      const touched = records.some(
+        (record) =>
+          (record.type === "attributes" && record.target === node) ||
+          (record.type === "childList" && [...record.removedNodes].includes(node)),
+      );
+      if (touched) setAssertion((n) => n + 1);
+    });
+    observer.observe(parent, { childList: true });
+    observer.observe(node, { attributes: true, attributeFilter: ["style", "class", "hidden"] });
+    return () => observer.disconnect();
+  }, [label, assertion]);
+
+  if (!label) return null;
+
+  return (
+    <div
+      ref={nodeRef}
+      key={assertion}
+      aria-hidden="true"
+      data-testid="film-watermark"
+      style={{
+        position: "absolute",
+        top: placement.top,
+        left: placement.left,
+        maxWidth: "70%",
+        // Never intercepts a click: the play/pause surface underneath has to
+        // keep working, and a viewer fighting an invisible box is a support
+        // ticket that reads as "the player is broken".
+        pointerEvents: "none",
+        userSelect: "none",
+        zIndex: 20,
+        opacity: visible ? opacity : 0,
+        transition: "opacity 900ms ease-in-out",
+        // Deliberate literals: this sits over video frames of unknown colour, so
+        // it cannot be a theme token. White text with a dark shadow is the only
+        // pair that stays readable over both a night scene and a snowfield.
+        color: "#ffffff",
+        textShadow: "0 1px 3px rgba(0,0,0,0.85)",
+        fontSize: "clamp(10px, 1.4vw, 14px)",
+        letterSpacing: "0.02em",
+        lineHeight: 1.4,
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        ...style,
+      }}
+      className={className}
+    >
+      {label}
+    </div>
+  );
+}
+
+export default FilmWatermark;