@mdcrtrs/player 0.1.3

package/dist/index.js

@@ -0,0 +1,628 @@
+// src/components/player.tsx
+import { memo, useCallback as useCallback3, useEffect as useEffect4, useMemo, useRef as useRef5 } from "react";
+import MuxPlayer from "@mux/mux-player-react";
+import "player.style/sutro";
+
+// src/hooks/use-playback-session.ts
+import { useEffect, useRef, useState } from "react";
+
+// src/types.ts
+var PLATFORM = {
+  apiBase: "https://api.mediacreators.io",
+  playbackBase: "https://playback.mediacreators.io",
+  dataEnvKey: "fhri2484lqcn6gk89r013ckmb"
+};
+
+// src/lib/api.ts
+var ApiError = class extends Error {
+  constructor(message, status) {
+    super(message);
+    this.status = status;
+    this.name = "ApiError";
+  }
+};
+async function fetchWithRetry(url, init, maxRetries = 3) {
+  let lastError = new Error("Unknown fetch error");
+  for (let attempt = 0; attempt < maxRetries; attempt++) {
+    try {
+      const res = await fetch(url, init);
+      if (res.ok || res.status < 500) {
+        return res;
+      }
+      lastError = new ApiError(`HTTP ${res.status}`, res.status);
+    } catch (err) {
+      lastError = err instanceof Error ? err : new Error(String(err));
+    }
+    if (attempt < maxRetries - 1) {
+      await new Promise((resolve) => setTimeout(resolve, 2 ** attempt * 500));
+    }
+  }
+  throw lastError;
+}
+async function fetchSessionToken(creatorId, fanToken) {
+  const headers = {};
+  if (fanToken) {
+    headers["X-Fan-Token"] = fanToken;
+  }
+  const url = `${PLATFORM.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);
+  }
+  const json = await res.json();
+  return { token: json.token, expiresAt: json.expires_at };
+}
+async function fetchPlaybackTokens(creatorId, playbackId, duration, sessionToken) {
+  const params = new URLSearchParams({ duration: String(duration) });
+  const url = `${PLATFORM.playbackBase}/v1/${encodeURIComponent(creatorId)}/tokens/${encodeURIComponent(playbackId)}?${params}`;
+  const res = await fetchWithRetry(url, {
+    headers: { Authorization: `Bearer ${sessionToken}` }
+  });
+  if (res.status === 401 || res.status === 403) {
+    throw new ApiError("Session token invalid or expired", res.status);
+  }
+  if (!res.ok) {
+    throw new ApiError(`Failed to fetch playback tokens: ${res.status}`, res.status);
+  }
+  const json = await res.json();
+  return {
+    video: json.tokens.video,
+    thumbnail: json.tokens.thumbnail,
+    storyboard: json.tokens.storyboard,
+    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)}`;
+  try {
+    const res = await fetch(url, {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Fan-Token": fanToken
+      },
+      body: JSON.stringify({ position, duration, completed: completed != null ? completed : false }),
+      keepalive: true
+    });
+    if (!res.ok) return { ok: false, status: res.status };
+    return { ok: true };
+  } catch (e) {
+    return { ok: false, status: 0 };
+  }
+}
+async function getWatchProgress(creatorId, assetId, fanToken) {
+  const url = `${PLATFORM.apiBase}/v1/mos/${encodeURIComponent(creatorId)}/watch-progress/${encodeURIComponent(assetId)}`;
+  try {
+    const res = await fetch(url, {
+      headers: { "X-Fan-Token": fanToken }
+    });
+    if (res.status === 401 || res.status === 404) return null;
+    if (!res.ok) return null;
+    const json = await res.json();
+    return json.data;
+  } catch (e) {
+    return null;
+  }
+}
+
+// src/hooks/use-playback-session.ts
+function scheduleRefresh(expiresIn, refreshFn, timerRef) {
+  if (timerRef.current !== null) {
+    clearTimeout(timerRef.current);
+  }
+  const refreshAtMs = expiresIn * 0.8 * 1e3;
+  timerRef.current = setTimeout(async () => {
+    try {
+      await refreshFn();
+    } catch (err) {
+      console.error("[player/session] Scheduled refresh failed:", err);
+    }
+  }, refreshAtMs);
+}
+function cancelRefresh(timerRef) {
+  if (timerRef.current !== null) {
+    clearTimeout(timerRef.current);
+    timerRef.current = null;
+  }
+}
+function usePlaybackSession(creatorId, playbackId, duration, fanToken) {
+  const [tokens, setTokens] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const sessionTokenRef = useRef(null);
+  const sessionExpiresAtRef = useRef(null);
+  const tokensRef = useRef(null);
+  const timerRef = useRef(null);
+  const visibilityHandlerRef = useRef(null);
+  useEffect(() => {
+    let cancelled = false;
+    tokensRef.current = null;
+    setTokens(null);
+    setIsLoading(true);
+    setError(null);
+    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);
+      }
+      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);
+        if (cancelled) return;
+        sessionTokenRef.current = session.token;
+        sessionExpiresAtRef.current = new Date(session.expiresAt);
+        const initialTokens = await fetchPlaybackTokens(creatorId, playbackId, duration, session.token);
+        if (cancelled) return;
+        tokensRef.current = initialTokens;
+        setTokens(initialTokens);
+        scheduleRefresh(initialTokens.expiresIn, refresh, timerRef);
+        visibilityHandlerRef.current = () => {
+          if (document.visibilityState !== "visible") return;
+          const current = tokensRef.current;
+          if (!sessionTokenRef.current || !sessionExpiresAtRef.current || !current) return;
+          const now = Date.now();
+          const sessionExpiry = sessionExpiresAtRef.current.getTime();
+          const approxTokenExpiry = now + current.expiresIn * 1e3;
+          const sessionExpired = sessionExpiry <= now;
+          const tokenNearExpiry = approxTokenExpiry - now < current.expiresIn * 0.2 * 1e3;
+          if (sessionExpired || tokenNearExpiry) {
+            cancelRefresh(timerRef);
+            refresh().catch((err) => {
+              if (!cancelled) setError(err);
+            });
+          }
+        };
+        document.addEventListener("visibilitychange", visibilityHandlerRef.current);
+      } catch (err) {
+        if (!cancelled) {
+          setError(err instanceof Error ? err : new Error(String(err)));
+          setTokens(null);
+        }
+      } finally {
+        if (!cancelled) setIsLoading(false);
+      }
+    }
+    void initialize();
+    return () => {
+      cancelled = true;
+      cancelRefresh(timerRef);
+      if (visibilityHandlerRef.current) {
+        document.removeEventListener("visibilitychange", visibilityHandlerRef.current);
+        visibilityHandlerRef.current = null;
+      }
+      sessionTokenRef.current = null;
+      sessionExpiresAtRef.current = null;
+    };
+  }, [creatorId, playbackId, duration, fanToken]);
+  return { tokens, isLoading, error };
+}
+
+// src/hooks/use-player-events.ts
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+var QUARTILES = [25, 50, 75, 100];
+function usePlayerEvents(events, assetId) {
+  const firedQuartiles = useRef2(/* @__PURE__ */ new Set());
+  const prevTime = useRef2(0);
+  const eventsRef = useRef2(events);
+  eventsRef.current = events;
+  useEffect2(() => {
+    firedQuartiles.current = /* @__PURE__ */ new Set();
+    prevTime.current = 0;
+  }, [assetId]);
+  return {
+    handleTimeUpdate: (currentTime, duration) => {
+      var _a, _b, _c, _d, _e, _f;
+      if (!duration || duration <= 0) return;
+      const pct = currentTime / duration * 100;
+      (_b = (_a = eventsRef.current).onTimeUpdate) == null ? void 0 : _b.call(_a, currentTime, duration, pct);
+      for (const q of QUARTILES) {
+        if (pct >= q && !firedQuartiles.current.has(q)) {
+          firedQuartiles.current.add(q);
+          (_d = (_c = eventsRef.current).onQuartile) == null ? void 0 : _d.call(_c, q);
+        }
+      }
+      const delta = Math.abs(currentTime - prevTime.current);
+      if (delta > 2 && prevTime.current > 0) {
+        (_f = (_e = eventsRef.current).onSeeked) == null ? void 0 : _f.call(_e, prevTime.current, currentTime);
+      }
+      prevTime.current = currentTime;
+    },
+    handlePause: (currentTime) => {
+      var _a, _b;
+      (_b = (_a = eventsRef.current).onPause) == null ? void 0 : _b.call(_a, currentTime);
+    },
+    handlePlay: (currentTime) => {
+      var _a, _b;
+      (_b = (_a = eventsRef.current).onPlay) == null ? void 0 : _b.call(_a, currentTime);
+    },
+    handleComplete: () => {
+      var _a, _b, _c, _d;
+      if (!firedQuartiles.current.has(100)) {
+        firedQuartiles.current.add(100);
+        (_b = (_a = eventsRef.current).onQuartile) == null ? void 0 : _b.call(_a, 100);
+      }
+      (_d = (_c = eventsRef.current).onComplete) == null ? void 0 : _d.call(_c);
+    },
+    handleReady: () => {
+      var _a, _b;
+      (_b = (_a = eventsRef.current).onReady) == null ? void 0 : _b.call(_a);
+    },
+    handleError: (message) => {
+      var _a, _b;
+      (_b = (_a = eventsRef.current).onError) == null ? void 0 : _b.call(_a, { code: "PLAYER_ERROR", message });
+    }
+  };
+}
+
+// src/hooks/use-volume.ts
+import { useCallback, useRef as useRef3 } from "react";
+var STORAGE_KEY = "mc-player-volume";
+function getStoredVolume() {
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY);
+    if (raw === null) return null;
+    const parsed = parseFloat(raw);
+    if (Number.isNaN(parsed) || parsed < 0 || parsed > 1) return null;
+    return parsed;
+  } catch (e) {
+    return null;
+  }
+}
+function saveVolume(volume) {
+  try {
+    window.localStorage.setItem(STORAGE_KEY, String(volume));
+  } catch (e) {
+  }
+}
+function useVolume() {
+  const initialVolume = useRef3(getStoredVolume());
+  const debounceTimer = useRef3(null);
+  const handleVolumeChange = useCallback((volume) => {
+    if (debounceTimer.current !== null) clearTimeout(debounceTimer.current);
+    debounceTimer.current = setTimeout(() => saveVolume(volume), 500);
+  }, []);
+  return { initialVolume: initialVolume.current, handleVolumeChange };
+}
+
+// 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) {
+  const [resumePosition, setResumePosition] = useState2(null);
+  const [authExpired, setAuthExpired] = useState2(false);
+  const debounceTimer = useRef4(null);
+  const onResumeRef = useRef4(onResume);
+  onResumeRef.current = onResume;
+  const stoppedRef = useRef4(false);
+  useEffect3(() => {
+    stoppedRef.current = false;
+    setAuthExpired(false);
+    setResumePosition(null);
+    if (!fanToken || !autoResume) return;
+    let cancelled = false;
+    void getWatchProgress(creatorId, assetId, fanToken).then((record) => {
+      var _a;
+      if (cancelled || !record || record.completed) return;
+      if (record.position > 5) {
+        setResumePosition(record.position);
+        (_a = onResumeRef.current) == null ? void 0 : _a.call(onResumeRef, record.position);
+      }
+    });
+    return () => {
+      cancelled = true;
+      if (debounceTimer.current !== null) {
+        clearTimeout(debounceTimer.current);
+        debounceTimer.current = null;
+      }
+    };
+  }, [creatorId, assetId, fanToken, autoResume]);
+  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) => {
+          if (!result.ok && result.status === 401) {
+            stoppedRef.current = true;
+            setAuthExpired(true);
+          }
+        });
+      }, SAVE_DEBOUNCE_MS);
+    },
+    [creatorId, assetId, fanToken]
+  );
+  return { resumePosition, saveProgress, authExpired };
+}
+
+// src/lib/session.ts
+var SESSION_STORAGE_KEY = "mc-player-session";
+function getSessionId() {
+  try {
+    const existing = window.sessionStorage.getItem(SESSION_STORAGE_KEY);
+    if (existing) return existing;
+    const generated = crypto.randomUUID();
+    window.sessionStorage.setItem(SESSION_STORAGE_KEY, generated);
+    return generated;
+  } catch (e) {
+    return null;
+  }
+}
+
+// src/lib/theme.ts
+function normalizeHex(hex) {
+  const sanitized = hex.trim().replace(/^#/, "");
+  if (!/^[0-9a-fA-F]{3}$|^[0-9a-fA-F]{6}$/.test(sanitized)) {
+    return "#1a1a1a";
+  }
+  if (sanitized.length === 3) {
+    return `#${sanitized.split("").map((c) => c + c).join("")}`;
+  }
+  return `#${sanitized}`;
+}
+function hexToRgb(hex) {
+  const full = normalizeHex(hex).slice(1);
+  return {
+    r: parseInt(full.slice(0, 2), 16),
+    g: parseInt(full.slice(2, 4), 16),
+    b: parseInt(full.slice(4, 6), 16)
+  };
+}
+function relativeLuminance(hex) {
+  const { r, g, b } = hexToRgb(hex);
+  const linear = [r, g, b].map((channel) => {
+    const s = channel / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * linear[0] + 0.7152 * linear[1] + 0.0722 * linear[2];
+}
+function hexToHSL(hex) {
+  const { r, g, b } = hexToRgb(hex);
+  const rNorm = r / 255;
+  const gNorm = g / 255;
+  const bNorm = b / 255;
+  const max = Math.max(rNorm, gNorm, bNorm);
+  const min = Math.min(rNorm, gNorm, bNorm);
+  const delta = max - min;
+  let h = 0;
+  if (delta !== 0) {
+    if (max === rNorm) {
+      h = (gNorm - bNorm) / delta % 6;
+    } else if (max === gNorm) {
+      h = (bNorm - rNorm) / delta + 2;
+    } else {
+      h = (rNorm - gNorm) / delta + 4;
+    }
+    h = Math.round(h * 60);
+    if (h < 0) h += 360;
+  }
+  const l = (max + min) / 2;
+  const s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+  return {
+    h,
+    s: Math.round(s * 100),
+    l: Math.round(l * 100)
+  };
+}
+function hslToHex({ h, s, l }) {
+  const sNorm = s / 100;
+  const lNorm = l / 100;
+  const c = (1 - Math.abs(2 * lNorm - 1)) * sNorm;
+  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  const m = lNorm - c / 2;
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  if (h < 60) {
+    ;
+    [r, g, b] = [c, x, 0];
+  } else if (h < 120) {
+    ;
+    [r, g, b] = [x, c, 0];
+  } else if (h < 180) {
+    ;
+    [r, g, b] = [0, c, x];
+  } else if (h < 240) {
+    ;
+    [r, g, b] = [0, x, c];
+  } else if (h < 300) {
+    ;
+    [r, g, b] = [x, 0, c];
+  } else {
+    ;
+    [r, g, b] = [c, 0, x];
+  }
+  const toHex = (v) => Math.round((v + m) * 255).toString(16).padStart(2, "0");
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function deriveColors(primaryHex) {
+  const brand = normalizeHex(primaryHex);
+  const hsl = hexToHSL(brand);
+  const lum = relativeLuminance(brand);
+  const accentL = clamp(hsl.l < 42 ? 50 : hsl.l > 78 ? 70 : hsl.l, 38, 72);
+  const accent = hslToHex({
+    h: hsl.h,
+    s: clamp(hsl.s, 0, 100),
+    l: accentL
+  });
+  let primary;
+  if (lum >= 0.72) {
+    primary = "#1a1a1a";
+  } else if (lum >= 0.58 && hsl.s < 22) {
+    primary = brand;
+  } else {
+    primary = "#ffffff";
+  }
+  const secondary = lum >= 0.72 ? "rgba(0, 0, 0, 0.1)" : "rgba(255, 255, 255, 0.14)";
+  return { primary, secondary, accent };
+}
+function deriveTheme(primaryColor) {
+  return deriveColors(primaryColor);
+}
+
+// src/components/player.tsx
+import { jsx } from "react/jsx-runtime";
+function decodeJwtSub(token) {
+  try {
+    const payloadPart = token.split(".")[1];
+    if (!payloadPart) return null;
+    const padded = payloadPart + "==".slice((payloadPart.length % 4 || 4) - 2);
+    const base64 = padded.replace(/-/g, "+").replace(/_/g, "/");
+    const json = JSON.parse(atob(base64));
+    return typeof json.sub === "string" ? json.sub : null;
+  } catch (e) {
+    return null;
+  }
+}
+var MediaCreatorsPlayer = memo(function MediaCreatorsPlayer2({
+  creatorId,
+  asset,
+  auth,
+  theme,
+  playerTheme,
+  poster,
+  metadata,
+  autoResume,
+  className,
+  onTimeUpdate,
+  onQuartile,
+  onPause,
+  onPlay,
+  onSeeked,
+  onComplete,
+  onError,
+  onReady,
+  onResume
+}) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const durationHint = (_a = asset.duration) != null ? _a : 3600;
+  const { tokens, isLoading, error } = usePlaybackSession(creatorId, asset.playbackId, durationHint, auth == null ? void 0 : auth.fanToken);
+  const colors = useMemo(() => {
+    var _a2;
+    return deriveTheme((_a2 = theme == null ? void 0 : theme.primaryColor) != null ? _a2 : "#1a1a1a");
+  }, [theme == null ? void 0 : theme.primaryColor]);
+  const { initialVolume, handleVolumeChange } = useVolume();
+  const playerRef = useRef5(null);
+  const seekDoneRef = useRef5(false);
+  const events = usePlayerEvents(
+    { onTimeUpdate, onQuartile, onPause, onPlay, onSeeked, onComplete, onError, onReady, onResume },
+    asset.assetId
+  );
+  const { resumePosition, saveProgress } = useWatchProgress(
+    creatorId,
+    asset.assetId,
+    auth == null ? void 0 : auth.fanToken,
+    autoResume,
+    onResume
+  );
+  useEffect4(() => {
+    if (error) {
+      onError == null ? void 0 : onError({ code: "SESSION_ERROR", message: error.message });
+    }
+  }, [error, onError]);
+  useEffect4(() => {
+    seekDoneRef.current = false;
+  }, [asset.assetId]);
+  useEffect4(() => {
+    if (seekDoneRef.current) return;
+    if (resumePosition === null || !playerRef.current) return;
+    const el = playerRef.current;
+    if (typeof el.currentTime === "number") {
+      el.currentTime = resumePosition;
+      seekDoneRef.current = true;
+    }
+  }, [resumePosition, tokens]);
+  const handlePlayerRef = useCallback3(
+    (el) => {
+      playerRef.current = el;
+      if (el && initialVolume !== null) {
+        ;
+        el.volume = initialVolume;
+      }
+    },
+    [initialVolume]
+  );
+  const viewerUserId = (_d = (_c = (_b = metadata == null ? void 0 : metadata.viewerUserId) != null ? _b : (auth == null ? void 0 : auth.fanToken) ? decodeJwtSub(auth.fanToken) : null) != null ? _c : getSessionId()) != null ? _d : void 0;
+  if (isLoading || !tokens) {
+    return /* @__PURE__ */ jsx("div", { className, style: { width: "100%", aspectRatio: "16 / 9", background: "#111" } });
+  }
+  return /* @__PURE__ */ jsx(
+    MuxPlayer,
+    {
+      ref: handlePlayerRef,
+      className,
+      theme: playerTheme,
+      playbackId: asset.playbackId,
+      poster,
+      envKey: PLATFORM.dataEnvKey,
+      tokens: {
+        playback: tokens.video,
+        thumbnail: tokens.thumbnail,
+        storyboard: tokens.storyboard
+      },
+      primaryColor: colors.primary,
+      secondaryColor: colors.secondary,
+      accentColor: colors.accent,
+      metadata: {
+        video_id: asset.assetId,
+        video_title: asset.title,
+        video_stream_type: "on-demand",
+        viewer_user_id: viewerUserId,
+        sub_property_id: creatorId,
+        player_name: (_e = metadata == null ? void 0 : metadata.playerName) != null ? _e : "mediacreators-sdk",
+        custom_1: (_f = metadata == null ? void 0 : metadata.custom1) != null ? _f : creatorId,
+        custom_2: (_g = metadata == null ? void 0 : metadata.custom2) != null ? _g : "sdk"
+      },
+      playsInline: true,
+      style: { width: "100%", aspectRatio: "16 / 9" },
+      onLoadedData: () => events.handleReady(),
+      onTimeUpdate: (e) => {
+        const el = e.target;
+        if (!el) return;
+        events.handleTimeUpdate(el.currentTime, el.duration);
+        if (auth == null ? void 0 : auth.fanToken) {
+          saveProgress(el.currentTime, el.duration);
+        }
+      },
+      onPause: (e) => {
+        var _a2;
+        const el = e.target;
+        events.handlePause((_a2 = el == null ? void 0 : el.currentTime) != null ? _a2 : 0);
+      },
+      onPlay: (e) => {
+        var _a2;
+        const el = e.target;
+        events.handlePlay((_a2 = el == null ? void 0 : el.currentTime) != null ? _a2 : 0);
+      },
+      onEnded: () => events.handleComplete(),
+      onVolumeChange: (e) => {
+        const el = e.target;
+        if (el && typeof el.volume === "number") {
+          handleVolumeChange(el.volume);
+        }
+      },
+      onError: () => events.handleError("Playback error")
+    }
+  );
+});
+export {
+  MediaCreatorsPlayer,
+  usePlaybackSession,
+  useWatchProgress
+};
+//# sourceMappingURL=index.js.map