@tribe-nest/forge 3.34.0 → 3.36.0

package/src/ui/styled/FilmLibrary.tsx

@@ -0,0 +1,291 @@
+import type { CSSProperties } from "react";
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+import { usePublicAuth } from "../../contexts/PublicAuthContext";
+import { rentalWindowLabel } from "./FilmCatalog";
+import { Loading } from "./Loading";
+import {
+  splitRemainingMs,
+  useMyFilmRentals,
+  type FilmWatchProgressEntry,
+  type MyFilmRental,
+} from "../../data/queries/useFilms";
+import { useForgeT, type ForgeT } from "../../i18n";
+
+export interface FilmRentalListProps {
+  /** Where films live. Default `/i/films`. */
+  basePath?: string;
+  /** SPA navigation adapter. Defaults to a full-page visit. */
+  navigate?: (href: string) => void;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/** The page takes exactly what the list takes: it adds a heading, nothing else. */
+export type FilmLibraryProps = FilmRentalListProps;
+
+/**
+ * The rentals themselves, with no page furniture around them.
+ *
+ * Split out of `FilmLibrary` so the account dashboard's Rentals tab renders the
+ * SAME rows as `/i/films/library` rather than a second implementation of "is
+ * this window still open". Two answers to that question is one answer too many:
+ * the divergent copy would appear on whichever surface was edited second, and
+ * the fan would be told two different things about the same rental.
+ *
+ * It fetches its own data. `useMyFilmRentals` is keyed on the account, so a host
+ * that already read it (the dashboard does, to decide whether to draw the tab at
+ * all) shares one request through react-query rather than making a second.
+ */
+export function FilmRentalList({ basePath = "/i/films", navigate, className, style }: FilmRentalListProps) {
+  const t = useForgeT();
+  const tokens = useThemeTokens();
+  const { user, isInitialized } = usePublicAuth();
+  const { data, isLoading } = useMyFilmRentals(user?.id);
+  const go = navigate ?? ((href: string) => window.location.assign(href));
+
+  if (!isInitialized || isLoading) return <Loading />;
+
+  const rentals = data?.data ?? [];
+
+  const notice: CSSProperties = {
+    padding: "28px 20px",
+    borderRadius: tokens.cornerRadius,
+    border: `1px solid ${tokens.border}`,
+    background: tokens.surface,
+    color: tokens.muted,
+    textAlign: "center",
+    fontSize: 14,
+  };
+
+  return (
+    <div
+      className={className}
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: 16,
+        color: tokens.text,
+        fontFamily: tokens.fontFamily,
+        ...style,
+      }}
+    >
+      {rentals.length === 0 && (
+        <div style={notice}>
+          <p style={{ marginBottom: 12 }}>{t("forge.film_library.empty")}</p>
+          <button
+            type="button"
+            onClick={() => go(basePath)}
+            style={{
+              padding: "10px 18px",
+              borderRadius: tokens.cornerRadius,
+              border: "none",
+              background: tokens.primary,
+              color: tokens.textPrimary,
+              fontSize: 14,
+              fontWeight: 700,
+              cursor: "pointer",
+            }}
+          >
+            {t("forge.film_library.browse")}
+          </button>
+        </div>
+      )}
+
+      {rentals.map((rental) => (
+        <RentalRow key={rental.id} rental={rental} t={t} basePath={basePath} go={go} />
+      ))}
+    </div>
+  );
+}
+
+/**
+ * The fan's own rentals as a PAGE: what is running, what has not been started,
+ * and what has run out.
+ *
+ * Expired rentals are here deliberately. The library is where a fan re-rents,
+ * and a rental that vanishes on expiry reads as "you were robbed" rather than
+ * "that ended" - so an expired row keeps its title, states plainly that the
+ * window closed, and offers the way back.
+ *
+ * A row states one fact the reader must act on, so it stays visible rather than
+ * going behind a `?`: how long is left. There is no "what was bought" line any
+ * more, because a rental is always the whole title and the title is the row.
+ */
+export function FilmLibrary({ basePath, navigate, className, style }: FilmLibraryProps) {
+  const t = useForgeT();
+  const tokens = useThemeTokens();
+
+  return (
+    <div
+      className={className}
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: 16,
+        maxWidth: 900,
+        margin: "0 auto",
+        color: tokens.text,
+        fontFamily: tokens.fontFamily,
+        ...style,
+      }}
+    >
+      <h1
+        style={{
+          fontSize: 24,
+          fontWeight: 800,
+          fontFamily: tokens.headingFontFamily || tokens.fontFamily,
+        }}
+      >
+        {t("forge.film_library.heading")}
+      </h1>
+
+      <FilmRentalList basePath={basePath} navigate={navigate} />
+    </div>
+  );
+}
+
+/** Where the fan got to in the episode they should resume, or null. */
+function resumeTarget(rental: MyFilmRental): { episodeId: string; entry: FilmWatchProgressEntry } | null {
+  // The furthest-along INCOMPLETE episode: resuming a finished one is how a
+  // binge gets stuck on the episode it just watched.
+  const candidates = rental.progress.filter((entry) => !entry.completedAt && entry.positionSec > 30);
+  const best = candidates.reduce<FilmWatchProgressEntry | null>(
+    (acc, entry) => (!acc || entry.positionSec > acc.positionSec ? entry : acc),
+    null,
+  );
+  return best ? { episodeId: best.episodeId, entry: best } : null;
+}
+
+function RentalRow({
+  rental,
+  t,
+  basePath,
+  go,
+}: {
+  rental: MyFilmRental;
+  t: ForgeT;
+  basePath: string;
+  go: (href: string) => void;
+}) {
+  const tokens = useThemeTokens();
+  const remaining = splitRemainingMs(rental.msRemaining);
+  const resume = resumeTarget(rental);
+
+  const windowLabel = !rental.isLive
+    ? rental.refundedAt
+      ? t("forge.film_library.window_refunded")
+      : t("forge.film_library.window_expired")
+    : rental.msRemaining == null
+      ? t("forge.film_library.window_not_started", { window: rentalWindowLabel(t, rental.rentalDurationHours) })
+      : remaining && remaining.days > 0
+        ? t("forge.film_library.window_days_left", { days: remaining.days, hours: remaining.hours })
+        : remaining && remaining.hours > 0
+          ? t("forge.film_library.window_hours_left", { hours: remaining.hours, minutes: remaining.minutes })
+          : t("forge.film_library.window_minutes_left", { minutes: remaining?.minutes ?? 0 });
+
+  // Only continue-watching can name an episode from here: `my-rentals` carries
+  // the title, not its episode list. With nothing to resume the row sends the
+  // fan to the title page, which knows where to start.
+  const watchTarget = resume?.episodeId ?? null;
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        gap: 14,
+        alignItems: "center",
+        flexWrap: "wrap",
+        padding: 14,
+        borderRadius: tokens.cornerRadius,
+        border: `1px solid ${tokens.border}`,
+        background: tokens.surface,
+        opacity: rental.isLive ? 1 : 0.85,
+      }}
+    >
+      {rental.film.cover?.url && (
+        <img
+          src={rental.film.cover.url}
+          alt=""
+          style={{
+            width: 64,
+            aspectRatio: "2/3",
+            objectFit: "cover",
+            borderRadius: tokens.cornerRadius,
+            // The one accepted literal: a letterbox behind artwork.
+            background: "#000",
+          }}
+        />
+      )}
+
+      <div style={{ flex: "1 1 220px", minWidth: 0, display: "flex", flexDirection: "column", gap: 4 }}>
+        <span style={{ fontSize: 16, fontWeight: 700 }}>{rental.film.title}</span>
+        {/* State the reader must act on: visible, never behind a `?`. */}
+        <span style={{ fontSize: 13, fontWeight: rental.isLive ? 600 : 400 }}>{windowLabel}</span>
+      </div>
+
+      <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
+        {rental.isLive && watchTarget && (
+          <button
+            type="button"
+            onClick={() => go(`${basePath}/${rental.film.slug}/watch/${watchTarget}`)}
+            style={{
+              padding: "9px 16px",
+              borderRadius: tokens.cornerRadius,
+              border: "none",
+              background: tokens.primary,
+              color: tokens.textPrimary,
+              fontSize: 13,
+              fontWeight: 700,
+              cursor: "pointer",
+            }}
+          >
+            {resume ? t("forge.film_library.resume") : t("forge.film_library.watch")}
+          </button>
+        )}
+
+        {rental.isLive && !watchTarget && (
+          <button
+            type="button"
+            onClick={() => go(`${basePath}/${rental.film.slug}`)}
+            style={{
+              padding: "9px 16px",
+              borderRadius: tokens.cornerRadius,
+              border: "none",
+              background: tokens.primary,
+              color: tokens.textPrimary,
+              fontSize: 13,
+              fontWeight: 700,
+              cursor: "pointer",
+            }}
+          >
+            {t("forge.film_library.watch")}
+          </button>
+        )}
+
+        {!rental.isLive && (
+          <button
+            type="button"
+            // An archived title no longer sells, so the honest move is still to
+            // send them to the page and let it say so, rather than to draw a
+            // button here that promises a purchase we cannot complete.
+            onClick={() => go(`${basePath}/${rental.film.slug}`)}
+            style={{
+              padding: "9px 16px",
+              borderRadius: tokens.cornerRadius,
+              border: `1px solid ${tokens.primary}`,
+              background: "transparent",
+              color: tokens.primary,
+              fontSize: 13,
+              fontWeight: 600,
+              cursor: "pointer",
+            }}
+          >
+            {t("forge.film_library.rent_again")}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default FilmLibrary;