@tribe-nest/forge 3.34.0 → 3.36.0

package/src/ui/styled/FilmCatalog.tsx

@@ -0,0 +1,278 @@
+import type { CSSProperties } from "react";
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+import { useFormatCurrency } from "../format/useFormatCurrency";
+import { useFilmCatalog, type UseFilmCatalogOptions } from "../headless/film/useFilmCatalog";
+import { filmFromPriceCents, splitRentalHours, type PublicFilmSummary } from "../../data/queries/useFilms";
+import { Loading } from "./Loading";
+import { useForgeT, type ForgeT } from "../../i18n";
+
+export interface FilmCatalogProps extends UseFilmCatalogOptions {
+  /** Where a title's detail page lives. Default `/i/films`. */
+  basePath?: string;
+  /** SPA navigation adapter. Defaults to a full-page visit. */
+  navigate?: (href: string) => void;
+  /** Draw the search box and the film/series filter. Default true. */
+  showFilters?: boolean;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * The public film and series catalogue.
+ *
+ * The state that trips people up is the third one. There is "loading", there is
+ * "this creator has no titles", and there is "film rentals are not switched on
+ * here" - and the last two are NOT the same sentence. `/i/films` ships to every
+ * site that takes a starter update, so a site whose owner has never heard of the
+ * feature will render this page; telling that owner their catalogue is empty
+ * sends them looking for a title they never created.
+ */
+export function FilmCatalog({
+  basePath = "/i/films",
+  navigate,
+  showFilters = true,
+  className,
+  style,
+  ...catalogOptions
+}: FilmCatalogProps) {
+  const t = useForgeT();
+  const tokens = useThemeTokens();
+  const catalog = useFilmCatalog(catalogOptions);
+  const go = navigate ?? ((href: string) => window.location.assign(href));
+
+  const notice: CSSProperties = {
+    padding: "28px 20px",
+    borderRadius: tokens.cornerRadius,
+    border: `1px solid ${tokens.border}`,
+    background: tokens.surface,
+    color: tokens.muted,
+    textAlign: "center",
+    fontSize: 14,
+  };
+
+  const control: CSSProperties = {
+    padding: "10px 12px",
+    borderRadius: tokens.cornerRadius,
+    border: `1px solid ${tokens.border}`,
+    background: tokens.background,
+    color: tokens.text,
+    fontFamily: tokens.fontFamily,
+    fontSize: 14,
+  };
+
+  if (catalog.isLoading) return <Loading fullPage />;
+
+  return (
+    <div
+      className={className}
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: 20,
+        maxWidth: 1200,
+        margin: "0 auto",
+        color: tokens.text,
+        fontFamily: tokens.fontFamily,
+        ...style,
+      }}
+    >
+      {showFilters && catalog.enabled && (
+        <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
+          <input
+            type="search"
+            value={catalog.query}
+            onChange={(e) => catalog.setQuery(e.target.value)}
+            placeholder={t("forge.film_catalog.search_placeholder")}
+            aria-label={t("forge.film_catalog.search_placeholder")}
+            style={{ ...control, flex: "1 1 220px", minWidth: 0 }}
+          />
+          <select
+            value={catalog.kind ?? ""}
+            onChange={(e) => catalog.setKind((e.target.value || undefined) as "film" | "series" | undefined)}
+            aria-label={t("forge.film_catalog.filter_kind")}
+            style={control}
+          >
+            <option value="">{t("forge.film_catalog.all_kinds")}</option>
+            <option value="film">{t("forge.film_catalog.kind_films")}</option>
+            <option value="series">{t("forge.film_catalog.kind_series")}</option>
+          </select>
+        </div>
+      )}
+
+      {catalog.isError && <p style={notice}>{t("forge.film_catalog.load_error")}</p>}
+
+      {/* Not the same as "no titles". See the component docblock. */}
+      {!catalog.isError && !catalog.enabled && <p style={notice}>{t("forge.film_catalog.not_enabled")}</p>}
+
+      {!catalog.isError && catalog.isEmpty && <p style={notice}>{t("forge.film_catalog.empty")}</p>}
+
+      {catalog.films.length > 0 && (
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))",
+            gap: 20,
+          }}
+        >
+          {catalog.films.map((film) => (
+            <FilmCard key={film.id} film={film} t={t} onOpen={() => go(`${basePath}/${film.slug}`)} />
+          ))}
+        </div>
+      )}
+
+      {catalog.pageCount > 1 && (
+        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 16 }}>
+          <button
+            type="button"
+            onClick={catalog.prevPage}
+            disabled={!catalog.hasPrevPage}
+            style={{
+              ...control,
+              cursor: catalog.hasPrevPage ? "pointer" : "default",
+              opacity: catalog.hasPrevPage ? 1 : 0.5,
+            }}
+          >
+            {t("forge.film_catalog.previous")}
+          </button>
+          <span style={{ fontSize: 13, color: tokens.muted }}>
+            {t("forge.film_catalog.page_of", { page: catalog.page, total: catalog.pageCount })}
+          </span>
+          <button
+            type="button"
+            onClick={catalog.nextPage}
+            disabled={!catalog.hasNextPage}
+            style={{
+              ...control,
+              cursor: catalog.hasNextPage ? "pointer" : "default",
+              opacity: catalog.hasNextPage ? 1 : 0.5,
+            }}
+          >
+            {t("forge.film_catalog.next")}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function FilmCard({ film, t, onOpen }: { film: PublicFilmSummary; t: ForgeT; onOpen: () => void }) {
+  const tokens = useThemeTokens();
+  const { formatCurrency } = useFormatCurrency();
+  /**
+   * A card prints ONE number, and for a title sold in several windows that
+   * number is the cheapest, said as "from".
+   *
+   * Dropping the "from" would be the mis-sell in miniature: a card reading "Rent
+   * $2" for a title whose 48-hour window is $5 has quoted a price the detail
+   * page then contradicts.
+   */
+  const priceCents = filmFromPriceCents(film);
+  const hasChoice = (film.rentalOptions?.length ?? 0) > 1;
+
+  return (
+    <button
+      type="button"
+      onClick={onOpen}
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: 8,
+        padding: 0,
+        border: "none",
+        background: "transparent",
+        color: tokens.text,
+        fontFamily: tokens.fontFamily,
+        textAlign: "left",
+        cursor: "pointer",
+      }}
+    >
+      <div
+        style={{
+          position: "relative",
+          width: "100%",
+          // A poster is 2:3 everywhere a poster has ever been printed; forcing
+          // 16:9 here is what makes a film catalogue look like a blog.
+          aspectRatio: "2/3",
+          borderRadius: tokens.cornerRadius,
+          overflow: "hidden",
+          // The one accepted literal: a letterbox behind artwork of unknown size.
+          background: "#000",
+          border: `1px solid ${tokens.border}`,
+        }}
+      >
+        {film.cover?.url && (
+          <img
+            src={film.cover.url}
+            alt=""
+            loading="lazy"
+            style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
+          />
+        )}
+        <span
+          style={{
+            position: "absolute",
+            top: 8,
+            left: 8,
+            padding: "2px 8px",
+            borderRadius: 999,
+            fontSize: 11,
+            fontWeight: 700,
+            background: tokens.primary,
+            color: tokens.textPrimary,
+          }}
+        >
+          {film.kind === "series" ? t("forge.film_catalog.badge_series") : t("forge.film_catalog.badge_film")}
+        </span>
+        {film.hasFreePreview && (
+          <span
+            style={{
+              position: "absolute",
+              bottom: 8,
+              left: 8,
+              padding: "2px 8px",
+              borderRadius: 999,
+              fontSize: 11,
+              fontWeight: 700,
+              background: tokens.surface,
+              color: tokens.text,
+              border: `1px solid ${tokens.border}`,
+            }}
+          >
+            {t("forge.film_catalog.free_preview")}
+          </span>
+        )}
+      </div>
+
+      <span style={{ fontSize: 15, fontWeight: 700, lineHeight: 1.3 }}>{film.title}</span>
+
+      <span style={{ fontSize: 12, color: tokens.muted }}>
+        {priceCents == null
+          ? t("forge.film_catalog.not_on_sale")
+          : t(hasChoice ? "forge.film_catalog.rent_from_price" : "forge.film_catalog.rent_price", {
+              price: formatCurrency(priceCents / 100, film.currency),
+            })}
+      </span>
+
+      {film.kind === "series" && (
+        <span style={{ fontSize: 12, color: tokens.muted }}>
+          {t("forge.film_catalog.episodes_available", { count: film.availableEpisodeCount })}
+        </span>
+      )}
+    </button>
+  );
+}
+
+/**
+ * "48 hours" or "2 days", from a whole-hours window.
+ *
+ * Shared by every block that has to state the window before the fan pays, which
+ * is all of them: a fan who buys a ten-episode series on a 48-hour clock and
+ * discovers it at expiry has been mis-sold.
+ */
+export function rentalWindowLabel(t: ForgeT, hours: number): string {
+  const { days, hours: rest } = splitRentalHours(hours);
+  if (days > 0 && rest === 0) return t("forge.film_detail.window_days", { days });
+  return t("forge.film_detail.window_hours", { hours });
+}
+
+export default FilmCatalog;