Events & Progress Tracking

Track player events and progress for analytics or resume features.

Events & Progress Tracking

The player can send watch progress events to the parent window. You can save this progress to localStorage or your own backend.

Available Events

  • play: Triggered when video starts playing
  • pause: Triggered when video is paused
  • seeked: Triggered when user seeks to a different timestamp
  • ended: Triggered when video playback ends
  • timeupdate: Triggered periodically during playback

Event Data Structure

{
  "type": "PLAYER_EVENT",
  "data": {
    "event": "play" | "pause" | "seeked" | "ended" | "timeupdate",
    "currentTime": number,
    "duration": number,
    "tmdbId": number,
    "mediaType": "movie" | "tv",
    "season?": number,
    "episode?": number
  }
}

Event Listener Implementation

Add this script where your iframe is located. For React/Next.js, place it in a useEffect hook.

window.addEventListener('message', ({ origin, data }) => {
  if (origin !== 'https://mappletv.uk' || !data) {
    return;
  }
  if (data.type === 'PLAYER_EVENT') {
    const { event, currentTime, duration } = data.data;
    console.log(`Player event: ${event} at ${currentTime}s of ${duration}s`);
    // Add custom event handling logic here
  }
});

Direct Media Data Event Listener

This simpler event listener directly captures and stores the complete media data structure:

window.addEventListener('message', ({ origin, data }) => {
  if (origin !== 'https://mappletv.uk' || !data) {
    return;
  }
  if (data.type === 'MEDIA_DATA') {
    localStorage.setItem('mapplePlayerProgress', JSON.stringify(data.data));
  }
});

Stored Data Structure Example

{
  "63174": {
    "id": 63174,
    "type": "tv",
    "title": "Lucifer",
    "poster_path": "/ekZobS8isE6mA53RAiGDG9hB9kA.jpg",
    "backdrop_path": "/hEjP1Twp1Z8BFFq8HvzAp4hFt.jpg",
    "progress": {
      "watched": 793.207692,
      "duration": 2695.3689
    },
    "last_season_watched": 1,
    "last_episode_watched": 1,
    "show_progress": {
      "s1e1": {
        "progress": {
          "watched": 793.207692,
          "duration": 2695.3689
        }
      }
    },
    "last_updated": 1742578021768
  },
  "533535": {
    "id": 533535,
    "type": "movie",
    "title": "Deadpool & Wolverine",
    "poster_path": "/bc8dVyu20EUxruj7yt4E6DMuBfo.jpg",
    "backdrop_path": "/by8a9F8eP7djQz1WzSDnptyT.jpg",
    "progress": {
      "watched": 353.582349,
      "duration": 7667.227
    },
    "last_updated": 174257064433
  }
}