@mdcrtrs/player 0.3.0 → 0.4.0

package/README.md

@@ -51,11 +51,16 @@ function VideoPlayer() {
 |------|------|----------|-------------|
 | `creatorId` | `string` | Yes | Project public ID |
 | `asset` | `PlayerAsset` | Yes | Asset to play (`assetId`, `playbackId`, `title`, optional `duration`) |
+| `env` | `"production" \| "preview"` | No | Platform environment; `"preview"` calls `preview-api` / `preview-playback.mediacreators.io`. Default `"production"` |
 | `auth` | `{ fanToken: string }` | No | Fan authentication for personalized features |
 | `theme` | `{ primaryColor: string }` | No | Brand color (CSS color value) |
+| `branding` | `PlayerBrandingConfig` | No | Custom branding logo (URL, link, title, white filter) |
+| `config` | `PlayerConfig` | No | Player customization: controls visibility, accent color, languages |
 | `playerTheme` | `string` | No | Player chrome theme name |
 | `poster` | `string` | No | Poster image URL |
 | `autoResume` | `boolean` | No | Resume from last watched position (requires `auth`) |
+| `getSession` | `() => Promise<SessionToken>` | No | Host-minted session callback; skips internal session fetch |
+| `onAccessDenied` | `(state: PlayerAccessState) => void` | No | Called on 403 from playback service (`"access_denied"` or `"not_available"`) |
 | `className` | `string` | No | CSS class for the player container |
 
 ### Events
@@ -71,6 +76,7 @@ function VideoPlayer() {
 | `onComplete` | `() => void` | Playback completed |
 | `onResume` | `(position: number) => void` | Resumed from saved position |
 | `onError` | `(error: { code: string, message: string }) => void` | Playback error |
+| `onAccessDenied` | `(state: PlayerAccessState) => void` | Access denied by playback service |
 
 ## License
 

package/dist/index.cjs

@@ -1,7 +1,9 @@
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
@@ -19,6 +21,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -1116,11 +1119,19 @@ if (import_server_safe_globals.globalThis.customElements && !import_server_safe_
 var import_react = require("react");
 
 // src/types.ts
-var PLATFORM = {
-  apiBase: "https://api.mediacreators.io",
-  playbackBase: "https://playback.mediacreators.io",
-  dataEnvKey: "fhri2484lqcn6gk89r013ckmb"
+var PLATFORM_ENDPOINTS = {
+  production: {
+    apiBase: "https://api.mediacreators.io",
+    playbackBase: "https://playback.mediacreators.io"
+  },
+  preview: {
+    apiBase: "https://preview-api.mediacreators.io",
+    playbackBase: "https://preview-playback.mediacreators.io"
+  }
 };
+var PLATFORM = __spreadProps(__spreadValues({}, PLATFORM_ENDPOINTS.production), {
+  dataEnvKey: "fhri2484lqcn6gk89r013ckmb"
+});
 
 // src/lib/api.ts
 var ApiError = class extends Error {
@@ -1130,6 +1141,22 @@ var ApiError = class extends Error {
     this.name = "ApiError";
   }
 };
+var AccessDeniedError = class extends ApiError {
+  constructor(state) {
+    super(state === "not_available" ? "Content is not available" : "Access denied", 403);
+    this.state = state;
+    this.name = "AccessDeniedError";
+  }
+};
+async function readAccessState(res) {
+  try {
+    const body = await res.json();
+    const code = body == null ? void 0 : body.error;
+    return code === "access_denied" || code === "not_available" ? code : null;
+  } catch (e) {
+    return null;
+  }
+}
 async function fetchWithRetry(url, init, maxRetries = 3) {
   let lastError = new Error("Unknown fetch error");
   for (let attempt = 0; attempt < maxRetries; attempt++) {
@@ -1148,12 +1175,12 @@ async function fetchWithRetry(url, init, maxRetries = 3) {
   }
   throw lastError;
 }
-async function fetchSessionToken(creatorId, fanToken) {
+async function fetchSessionToken(creatorId, fanToken, env = "production") {
   const headers = {};
   if (fanToken) {
     headers["X-Fan-Token"] = fanToken;
   }
-  const url = `${PLATFORM.apiBase}/v1/mos/${encodeURIComponent(creatorId)}/playback-session`;
+  const url = `${PLATFORM_ENDPOINTS[env].apiBase}/v1/mos/${encodeURIComponent(creatorId)}/playback-session`;
   const res = await fetchWithRetry(url, { method: "POST", headers });
   if (!res.ok) {
     throw new ApiError(`Failed to fetch session token: ${res.status}`, res.status);
@@ -1161,12 +1188,16 @@ async function fetchSessionToken(creatorId, fanToken) {
   const json = await res.json();
   return { token: json.token, expiresAt: json.expires_at };
 }
-async function fetchPlaybackTokens(creatorId, playbackId, duration, sessionToken) {
+async function fetchPlaybackTokens(creatorId, playbackId, duration, sessionToken, env = "production") {
   const params = new URLSearchParams({ duration: String(duration) });
-  const url = `${PLATFORM.playbackBase}/v1/${encodeURIComponent(creatorId)}/tokens/${encodeURIComponent(playbackId)}?${params}`;
+  const url = `${PLATFORM_ENDPOINTS[env].playbackBase}/v1/${encodeURIComponent(creatorId)}/tokens/${encodeURIComponent(playbackId)}?${params}`;
   const res = await fetchWithRetry(url, {
     headers: { Authorization: `Bearer ${sessionToken}` }
   });
+  if (res.status === 403) {
+    const state = await readAccessState(res);
+    if (state) throw new AccessDeniedError(state);
+  }
   if (res.status === 401 || res.status === 403) {
     throw new ApiError("Session token invalid or expired", res.status);
   }
@@ -1181,8 +1212,8 @@ async function fetchPlaybackTokens(creatorId, playbackId, duration, sessionToken
     expiresIn: json.expires_in
   };
 }
-async function saveWatchProgress(creatorId, assetId, position, duration, fanToken, completed) {
-  const url = `${PLATFORM.apiBase}/v1/mos/${encodeURIComponent(creatorId)}/watch-progress/${encodeURIComponent(assetId)}`;
+async function saveWatchProgress(creatorId, assetId, position, duration, fanToken, completed, env = "production") {
+  const url = `${PLATFORM_ENDPOINTS[env].apiBase}/v1/mos/${encodeURIComponent(creatorId)}/watch-progress/${encodeURIComponent(assetId)}`;
   try {
     const res = await fetch(url, {
       method: "PUT",
@@ -1199,8 +1230,8 @@ async function saveWatchProgress(creatorId, assetId, position, duration, fanToke
     return { ok: false, status: 0 };
   }
 }
-async function getWatchProgress(creatorId, assetId, fanToken) {
-  const url = `${PLATFORM.apiBase}/v1/mos/${encodeURIComponent(creatorId)}/watch-progress/${encodeURIComponent(assetId)}`;
+async function getWatchProgress(creatorId, assetId, fanToken, env = "production") {
+  const url = `${PLATFORM_ENDPOINTS[env].apiBase}/v1/mos/${encodeURIComponent(creatorId)}/watch-progress/${encodeURIComponent(assetId)}`;
   try {
     const res = await fetch(url, {
       headers: { "X-Fan-Token": fanToken }
@@ -1234,10 +1265,13 @@ function cancelRefresh(timerRef) {
     timerRef.current = null;
   }
 }
-function usePlaybackSession(creatorId, playbackId, duration, fanToken) {
+function usePlaybackSession(creatorId, playbackId, duration, fanToken, env = "production", getSession) {
   const [tokens, setTokens] = (0, import_react.useState)(null);
   const [isLoading, setIsLoading] = (0, import_react.useState)(true);
   const [error, setError] = (0, import_react.useState)(null);
+  const [accessDenied, setAccessDenied] = (0, import_react.useState)(null);
+  const getSessionRef = (0, import_react.useRef)(getSession);
+  getSessionRef.current = getSession;
   const sessionTokenRef = (0, import_react.useRef)(null);
   const sessionExpiresAtRef = (0, import_react.useRef)(null);
   const tokensRef = (0, import_react.useRef)(null);
@@ -1249,30 +1283,48 @@ function usePlaybackSession(creatorId, playbackId, duration, fanToken) {
     setTokens(null);
     setIsLoading(true);
     setError(null);
+    setAccessDenied(null);
+    function mintSession() {
+      const hostSession = getSessionRef.current;
+      return hostSession ? hostSession() : fetchSessionToken(creatorId, fanToken, env);
+    }
+    function deny(err) {
+      if (cancelled) return;
+      cancelRefresh(timerRef);
+      tokensRef.current = null;
+      setTokens(null);
+      setError(null);
+      setAccessDenied(err.state);
+    }
     async function refresh() {
       if (!sessionTokenRef.current || !sessionExpiresAtRef.current) return;
-      const now = Date.now();
-      const sessionExpiry = sessionExpiresAtRef.current.getTime();
-      let sessionToken = sessionTokenRef.current;
-      if (sessionExpiry - now < 6e4) {
-        const newSession = await fetchSessionToken(creatorId, fanToken);
-        sessionToken = newSession.token;
-        sessionTokenRef.current = newSession.token;
-        sessionExpiresAtRef.current = new Date(newSession.expiresAt);
+      try {
+        const now = Date.now();
+        const sessionExpiry = sessionExpiresAtRef.current.getTime();
+        let sessionToken = sessionTokenRef.current;
+        if (sessionExpiry - now < 6e4) {
+          const newSession = await mintSession();
+          sessionToken = newSession.token;
+          sessionTokenRef.current = newSession.token;
+          sessionExpiresAtRef.current = new Date(newSession.expiresAt);
+        }
+        const nextTokens = await fetchPlaybackTokens(creatorId, playbackId, duration, sessionToken, env);
+        if (cancelled) return;
+        tokensRef.current = nextTokens;
+        setTokens(nextTokens);
+        scheduleRefresh(nextTokens.expiresIn, refresh, timerRef);
+      } catch (err) {
+        if (!(err instanceof AccessDeniedError)) throw err;
+        deny(err);
       }
-      const nextTokens = await fetchPlaybackTokens(creatorId, playbackId, duration, sessionToken);
-      if (cancelled) return;
-      tokensRef.current = nextTokens;
-      setTokens(nextTokens);
-      scheduleRefresh(nextTokens.expiresIn, refresh, timerRef);
     }
     async function initialize() {
       try {
-        const session = await fetchSessionToken(creatorId, fanToken);
+        const session = await mintSession();
         if (cancelled) return;
         sessionTokenRef.current = session.token;
         sessionExpiresAtRef.current = new Date(session.expiresAt);
-        const initialTokens = await fetchPlaybackTokens(creatorId, playbackId, duration, session.token);
+        const initialTokens = await fetchPlaybackTokens(creatorId, playbackId, duration, session.token, env);
         if (cancelled) return;
         tokensRef.current = initialTokens;
         setTokens(initialTokens);
@@ -1295,7 +1347,9 @@ function usePlaybackSession(creatorId, playbackId, duration, fanToken) {
         };
         document.addEventListener("visibilitychange", visibilityHandlerRef.current);
       } catch (err) {
-        if (!cancelled) {
+        if (err instanceof AccessDeniedError) {
+          deny(err);
+        } else if (!cancelled) {
           setError(err instanceof Error ? err : new Error(String(err)));
           setTokens(null);
         }
@@ -1314,8 +1368,8 @@ function usePlaybackSession(creatorId, playbackId, duration, fanToken) {
       sessionTokenRef.current = null;
       sessionExpiresAtRef.current = null;
     };
-  }, [creatorId, playbackId, duration, fanToken]);
-  return { tokens, isLoading, error };
+  }, [creatorId, playbackId, duration, fanToken, env]);
+  return { tokens, isLoading, error, accessDenied };
 }
 
 // src/hooks/use-player-events.ts
@@ -1408,7 +1462,7 @@ function useVolume() {
 // src/hooks/use-watch-progress.ts
 var import_react4 = require("react");
 var SAVE_DEBOUNCE_MS = 1e4;
-function useWatchProgress(creatorId, assetId, fanToken, autoResume, onResume) {
+function useWatchProgress(creatorId, assetId, fanToken, autoResume, onResume, env = "production") {
   const [resumePosition, setResumePosition] = (0, import_react4.useState)(null);
   const [authExpired, setAuthExpired] = (0, import_react4.useState)(false);
   const debounceTimer = (0, import_react4.useRef)(null);
@@ -1421,7 +1475,7 @@ function useWatchProgress(creatorId, assetId, fanToken, autoResume, onResume) {
     setResumePosition(null);
     if (!fanToken || !autoResume) return;
     let cancelled = false;
-    void getWatchProgress(creatorId, assetId, fanToken).then((record) => {
+    void getWatchProgress(creatorId, assetId, fanToken, env).then((record) => {
       var _a2;
       if (cancelled || !record || record.completed) return;
       if (record.position > 5) {
@@ -1436,14 +1490,14 @@ function useWatchProgress(creatorId, assetId, fanToken, autoResume, onResume) {
         debounceTimer.current = null;
       }
     };
-  }, [creatorId, assetId, fanToken, autoResume]);
+  }, [creatorId, assetId, fanToken, autoResume, env]);
   const saveProgress = (0, import_react4.useCallback)(
     (position, duration) => {
       if (!fanToken || stoppedRef.current) return;
       if (debounceTimer.current !== null) clearTimeout(debounceTimer.current);
       debounceTimer.current = setTimeout(() => {
         const completed = duration > 0 && position / duration >= 0.95;
-        void saveWatchProgress(creatorId, assetId, position, duration, fanToken, completed).then((result) => {
+        void saveWatchProgress(creatorId, assetId, position, duration, fanToken, completed, env).then((result) => {
           if (!result.ok && result.status === 401) {
             stoppedRef.current = true;
             setAuthExpired(true);
@@ -1451,11 +1505,49 @@ function useWatchProgress(creatorId, assetId, fanToken, autoResume, onResume) {
         });
       }, SAVE_DEBOUNCE_MS);
     },
-    [creatorId, assetId, fanToken]
+    [creatorId, assetId, fanToken, env]
   );
   return { resumePosition, saveProgress, authExpired };
 }
 
+// src/components/access-lock.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var LABELS = {
+  access_denied: "Locked",
+  not_available: "Not available"
+};
+var AccessLock = ({ state, poster, className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  "div",
+  {
+    className,
+    role: "img",
+    "aria-label": LABELS[state],
+    "data-mc-player-state": state,
+    style: {
+      position: "relative",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "100%",
+      aspectRatio: "16 / 9",
+      overflow: "hidden",
+      background: "#111"
+    },
+    children: [
+      poster ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "img",
+        {
+          src: poster,
+          alt: "",
+          "aria-hidden": "true",
+          style: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.3 }
+        }
+      ) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", width: "48", height: "48", fill: "#fff", "aria-hidden": "true", style: { position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z" }) })
+    ]
+  }
+);
+
 // src/components/player-branding.tsx
 function applyBranding(player, videoId, creatorId, config) {
   var _a2, _b2, _c, _d;
@@ -1636,7 +1728,7 @@ function deriveTheme(primaryColor) {
 }
 
 // src/components/player.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function decodeJwtSub(token) {
   try {
     const payloadPart = token.split(".")[1];
@@ -1652,6 +1744,7 @@ function decodeJwtSub(token) {
 var MediaCreatorsPlayer = (0, import_react5.memo)(function MediaCreatorsPlayer2({
   creatorId,
   asset,
+  env = "production",
   auth,
   theme,
   branding,
@@ -1660,6 +1753,8 @@ var MediaCreatorsPlayer = (0, import_react5.memo)(function MediaCreatorsPlayer2(
   metadata,
   autoResume,
   className,
+  getSession,
+  onAccessDenied,
   onTimeUpdate,
   onQuartile,
   onPause,
@@ -1672,7 +1767,14 @@ var MediaCreatorsPlayer = (0, import_react5.memo)(function MediaCreatorsPlayer2(
 }) {
   var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _k;
   const durationHint = (_a2 = asset.duration) != null ? _a2 : 3600;
-  const { tokens, isLoading, error } = usePlaybackSession(creatorId, asset.playbackId, durationHint, auth == null ? void 0 : auth.fanToken);
+  const { tokens, isLoading, error, accessDenied } = usePlaybackSession(
+    creatorId,
+    asset.playbackId,
+    durationHint,
+    auth == null ? void 0 : auth.fanToken,
+    env,
+    getSession
+  );
   const accentSource = (_c = (_b2 = config == null ? void 0 : config.accentColor) != null ? _b2 : theme == null ? void 0 : theme.primaryColor) != null ? _c : "#4ae9ab";
   const colors = (0, import_react5.useMemo)(() => deriveTheme(accentSource), [accentSource]);
   const { initialVolume, handleVolumeChange } = useVolume();
@@ -1708,7 +1810,8 @@ var MediaCreatorsPlayer = (0, import_react5.memo)(function MediaCreatorsPlayer2(
     asset.assetId,
     auth == null ? void 0 : auth.fanToken,
     autoResume,
-    onResume
+    onResume,
+    env
   );
   (0, import_react5.useEffect)(() => {
     import("media-chrome/dist/utils/i18n.js").then(({ setLanguage }) => {
@@ -1721,6 +1824,12 @@ var MediaCreatorsPlayer = (0, import_react5.memo)(function MediaCreatorsPlayer2(
       onError == null ? void 0 : onError({ code: "SESSION_ERROR", message: error.message });
     }
   }, [error, onError]);
+  const onAccessDeniedRef = (0, import_react5.useRef)(onAccessDenied);
+  onAccessDeniedRef.current = onAccessDenied;
+  (0, import_react5.useEffect)(() => {
+    var _a3;
+    if (accessDenied) (_a3 = onAccessDeniedRef.current) == null ? void 0 : _a3.call(onAccessDeniedRef, accessDenied);
+  }, [accessDenied]);
   (0, import_react5.useEffect)(() => {
     seekDoneRef.current = false;
   }, [asset.assetId]);
@@ -1757,10 +1866,13 @@ var MediaCreatorsPlayer = (0, import_react5.memo)(function MediaCreatorsPlayer2(
     [initialVolume]
   );
   const viewerUserId = (_g = (_f = (_e = metadata == null ? void 0 : metadata.viewerUserId) != null ? _e : (auth == null ? void 0 : auth.fanToken) ? decodeJwtSub(auth.fanToken) : null) != null ? _f : getSessionId()) != null ? _g : void 0;
+  if (accessDenied) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AccessLock, { state: accessDenied, poster, className });
+  }
   if (isLoading || !tokens) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, style: { width: "100%", aspectRatio: "16 / 9", background: "#111" } });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className, style: { width: "100%", aspectRatio: "16 / 9", background: "#111" } });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     import_mux_player_react.default,
     {
       ref: handlePlayerRef,