@mdcrtrs/player 0.3.0 → 0.4.0

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 import { FC } from 'react';
 
+/** Platform environment. `preview` targets the preview Workers; defaults to `production`. */
+type PlayerEnv = "production" | "preview";
 interface PlayerAsset {
     assetId: string;
     playbackId: string;
@@ -23,6 +25,8 @@ interface PlayerError {
     code: string;
     message: string;
 }
+/** Code the playback service answers a refused token request with (HTTP 403 `error`). */
+type PlayerAccessState = "access_denied" | "not_available";
 interface PlayerEvents {
     onTimeUpdate?: (currentTime: number, duration: number, pct: number) => void;
     onQuartile?: (quartile: 25 | 50 | 75 | 100) => void;
@@ -59,6 +63,8 @@ interface PlayerConfig {
 interface MediaCreatorsPlayerProps extends PlayerEvents {
     creatorId: string;
     asset: PlayerAsset;
+    /** Override the platform environment (e.g. `"preview"` on preview deploys). Defaults to `"production"`. */
+    env?: PlayerEnv;
     auth?: PlayerAuth;
     theme?: PlayerTheme;
     /** Custom branding override. Omit to show the default MediaCreators logo. */
@@ -70,6 +76,10 @@ interface MediaCreatorsPlayerProps extends PlayerEvents {
     metadata?: PlayerMetadata;
     autoResume?: boolean;
     className?: string;
+    /** Host-minted playback session (sc-one). When set, the SDK never calls POST /playback-session. */
+    getSession?: () => Promise<SessionToken>;
+    /** Called when the token endpoint answers 403 with code access_denied / not_available. */
+    onAccessDenied?: (state: PlayerAccessState) => void;
 }
 interface PlaybackTokens {
     video: string;
@@ -98,14 +108,16 @@ interface UsePlaybackSessionResult {
     tokens: PlaybackTokens | null;
     isLoading: boolean;
     error: Error | null;
+    /** Set when the playback service refused the viewer (403). Not an `error`: render a lock. */
+    accessDenied: PlayerAccessState | null;
 }
-declare function usePlaybackSession(creatorId: string, playbackId: string, duration: number, fanToken?: string): UsePlaybackSessionResult;
+declare function usePlaybackSession(creatorId: string, playbackId: string, duration: number, fanToken?: string, env?: PlayerEnv, getSession?: () => Promise<SessionToken>): UsePlaybackSessionResult;
 
 interface UseWatchProgressResult {
     resumePosition: number | null;
     saveProgress: (position: number, duration: number) => void;
     authExpired: boolean;
 }
-declare function useWatchProgress(creatorId: string, assetId: string, fanToken: string | undefined, autoResume: boolean | undefined, onResume?: (position: number) => void): UseWatchProgressResult;
+declare function useWatchProgress(creatorId: string, assetId: string, fanToken: string | undefined, autoResume: boolean | undefined, onResume?: (position: number) => void, env?: PlayerEnv): UseWatchProgressResult;
 
-export { MediaCreatorsPlayer, type MediaCreatorsPlayerProps, type PlaybackTokens, type PlayerAsset, type PlayerAuth, type PlayerBrandingConfig, type PlayerConfig, type PlayerControlsConfig, type PlayerError, type PlayerEvents, type PlayerMetadata, type PlayerTheme, type SessionToken, type WatchProgressRecord, usePlaybackSession, useWatchProgress };
+export { MediaCreatorsPlayer, type MediaCreatorsPlayerProps, type PlaybackTokens, type PlayerAccessState, type PlayerAsset, type PlayerAuth, type PlayerBrandingConfig, type PlayerConfig, type PlayerControlsConfig, type PlayerEnv, type PlayerError, type PlayerEvents, type PlayerMetadata, type PlayerTheme, type SessionToken, type WatchProgressRecord, usePlaybackSession, useWatchProgress };

package/dist/index.js

@@ -1,4 +1,6 @@
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -14,6 +16,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 
 // src/components/player.tsx
 import { memo, useCallback as useCallback3, useEffect as useEffect4, useMemo, useRef as useRef5 } from "react";
@@ -1081,11 +1084,19 @@ if (globalThis.customElements && !globalThis.customElements.get("media-theme-med
 import { useEffect, useRef, useState } from "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 {
@@ -1095,6 +1106,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++) {
@@ -1113,12 +1140,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);
@@ -1126,12 +1153,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);
   }
@@ -1146,8 +1177,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",
@@ -1164,8 +1195,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 }
@@ -1199,10 +1230,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] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
+  const [accessDenied, setAccessDenied] = useState(null);
+  const getSessionRef = useRef(getSession);
+  getSessionRef.current = getSession;
   const sessionTokenRef = useRef(null);
   const sessionExpiresAtRef = useRef(null);
   const tokensRef = useRef(null);
@@ -1214,30 +1248,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);
@@ -1260,7 +1312,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);
         }
@@ -1279,8 +1333,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
@@ -1373,7 +1427,7 @@ function useVolume() {
 // src/hooks/use-watch-progress.ts
 import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef4, useState as useState2 } from "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] = useState2(null);
   const [authExpired, setAuthExpired] = useState2(false);
   const debounceTimer = useRef4(null);
@@ -1386,7 +1440,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) {
@@ -1401,14 +1455,14 @@ function useWatchProgress(creatorId, assetId, fanToken, autoResume, onResume) {
         debounceTimer.current = null;
       }
     };
-  }, [creatorId, assetId, fanToken, autoResume]);
+  }, [creatorId, assetId, fanToken, autoResume, env]);
   const saveProgress = useCallback2(
     (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);
@@ -1416,11 +1470,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
+import { jsx, jsxs } from "react/jsx-runtime";
+var LABELS = {
+  access_denied: "Locked",
+  not_available: "Not available"
+};
+var AccessLock = ({ state, poster, className }) => /* @__PURE__ */ 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__ */ jsx(
+        "img",
+        {
+          src: poster,
+          alt: "",
+          "aria-hidden": "true",
+          style: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.3 }
+        }
+      ) : null,
+      /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "48", height: "48", fill: "#fff", "aria-hidden": "true", style: { position: "relative" }, children: /* @__PURE__ */ 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;
@@ -1601,7 +1693,7 @@ function deriveTheme(primaryColor) {
 }
 
 // src/components/player.tsx
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 function decodeJwtSub(token) {
   try {
     const payloadPart = token.split(".")[1];
@@ -1617,6 +1709,7 @@ function decodeJwtSub(token) {
 var MediaCreatorsPlayer = memo(function MediaCreatorsPlayer2({
   creatorId,
   asset,
+  env = "production",
   auth,
   theme,
   branding,
@@ -1625,6 +1718,8 @@ var MediaCreatorsPlayer = memo(function MediaCreatorsPlayer2({
   metadata,
   autoResume,
   className,
+  getSession,
+  onAccessDenied,
   onTimeUpdate,
   onQuartile,
   onPause,
@@ -1637,7 +1732,14 @@ var MediaCreatorsPlayer = 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 = useMemo(() => deriveTheme(accentSource), [accentSource]);
   const { initialVolume, handleVolumeChange } = useVolume();
@@ -1673,7 +1775,8 @@ var MediaCreatorsPlayer = memo(function MediaCreatorsPlayer2({
     asset.assetId,
     auth == null ? void 0 : auth.fanToken,
     autoResume,
-    onResume
+    onResume,
+    env
   );
   useEffect4(() => {
     import("media-chrome/dist/utils/i18n.js").then(({ setLanguage }) => {
@@ -1686,6 +1789,12 @@ var MediaCreatorsPlayer = memo(function MediaCreatorsPlayer2({
       onError == null ? void 0 : onError({ code: "SESSION_ERROR", message: error.message });
     }
   }, [error, onError]);
+  const onAccessDeniedRef = useRef5(onAccessDenied);
+  onAccessDeniedRef.current = onAccessDenied;
+  useEffect4(() => {
+    var _a3;
+    if (accessDenied) (_a3 = onAccessDeniedRef.current) == null ? void 0 : _a3.call(onAccessDeniedRef, accessDenied);
+  }, [accessDenied]);
   useEffect4(() => {
     seekDoneRef.current = false;
   }, [asset.assetId]);
@@ -1722,10 +1831,13 @@ var MediaCreatorsPlayer = 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__ */ jsx2(AccessLock, { state: accessDenied, poster, className });
+  }
   if (isLoading || !tokens) {
-    return /* @__PURE__ */ jsx("div", { className, style: { width: "100%", aspectRatio: "16 / 9", background: "#111" } });
+    return /* @__PURE__ */ jsx2("div", { className, style: { width: "100%", aspectRatio: "16 / 9", background: "#111" } });
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     MuxPlayer,
     {
       ref: handlePlayerRef,