@mdcrtrs/player

Video player SDK for MediaCreators Streaming Community frontends. Drop-in React component with signed playback, theming, volume persistence, and optional watch progress tracking.

Install

npm install @mdcrtrs/player

Requires react and react-dom >= 18 as peer dependencies.

Usage

import { MediaCreatorsPlayer } from "@mdcrtrs/player"

function VideoPlayer() {
  return (
    <MediaCreatorsPlayer
      creatorId="your-project-public-id"
      asset={{
        assetId: "asset-id",
        playbackId: "playback-id",
        title: "Episode 1",
      }}
      theme={{ primaryColor: "#6366F1" }}
      onPlay={(currentTime) => console.log("Playing at", currentTime)}
    />
  )
}

With fan authentication and watch progress

<MediaCreatorsPlayer
  creatorId="your-project-public-id"
  asset={asset}
  auth={{ fanToken: "fan-session-token" }}
  autoResume
  onTimeUpdate={(currentTime, duration, pct) => {}}
  onQuartile={(q) => console.log(`Reached ${q}%`)}
  onComplete={() => console.log("Done")}
/>

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | creatorId | string | Yes | Project public ID | | asset | PlayerAsset | Yes | Asset to play (assetId, playbackId, title, optional duration) | | auth | { fanToken: string } | No | Fan authentication for personalized features | | theme | { primaryColor: string } | No | Brand color (CSS color value) | | playerTheme | string | No | Player chrome theme name | | poster | string | No | Poster image URL | | autoResume | boolean | No | Resume from last watched position (requires auth) | | className | string | No | CSS class for the player container |

Events

| Event | Signature | Description | |-------|-----------|-------------| | onReady | () => void | Player is ready | | onPlay | (currentTime: number) => void | Playback started | | onPause | (currentTime: number) => void | Playback paused | | onTimeUpdate | (currentTime, duration, pct) => void | Periodic time update | | onQuartile | (quartile: 25 \| 50 \| 75 \| 100) => void | Playback quartile reached | | onSeeked | (from: number, to: number) => void | User seeked | | onComplete | () => void | Playback completed | | onResume | (position: number) => void | Resumed from saved position | | onError | (error: { code: string, message: string }) => void | Playback error |

License

Proprietary - see LICENSE. Use permitted exclusively for MediaCreators platform customers.