User Events

{
  time: 5.2,           // Current playback time
  session_id: "abc123" // Device/session identifier
}

player.on('interact', function (event) {
  console.log('User first interacted at', event.detail.time);
});

{
  time: 67.8,          // Current playback time
  session_id: "abc123" // Device/session identifier
}

player.on('enter-fullscreen', function (event) {
  console.log('Entered fullscreen at', event.detail.time);
  // Hide elements that should not show in fullscreen
  document.querySelectorAll('.hide-on-fullscreen').forEach(el => {
    el.style.display = 'none';
  });
});

{
  time: 89.1,          // Current playback time
  session_id: "abc123" // Device/session identifier
}

player.on('exit-fullscreen', function (event) {
  console.log('Exited fullscreen at', event.detail.time);
  // Restore hidden elements
  document.querySelectorAll('.hide-on-fullscreen').forEach(el => {
    el.style.removeProperty('display');
  });
});

document.addEventListener('TrackPlayReady', function (e) {
  let player = e.detail.player;
  
  // Listen to user interaction events
  player.on('interact', function (event) {
    console.log('User first interacted at', event.detail.time);
  });
  
  player.on('enter-fullscreen', function (event) {
    console.log('Entered fullscreen at', event.detail.time);
    document.body.classList.add('fullscreen-mode');
  });
  
  player.on('exit-fullscreen', function (event) {
    console.log('Exited fullscreen at', event.detail.time);
    document.body.classList.remove('fullscreen-mode');
  });
});