watchparty/client/js/party.js

// Party REST + realtime - same origin as everything else, auth is the
// session cookie (see embyApi.js), so no headers/tokens to pass around here.
// Realtime is Socket.IO (window.io, loaded via <script> in index.html) -
// gives us automatic reconnection and, on the server side, heartbeat-based
// dead-connection detection for free (see server/src/socketHandler.js).
//
// No join codes: joining happens straight from the home page's live list
// (connectLobby below) by party id - see docs/architecture.md.

async function apiFetch(path, options = {}) {
  const res = await fetch(path, {
    credentials: 'same-origin',
    ...options,
    headers: { 'Content-Type': 'application/json', ...(options.headers || {}) }
  });
  if (!res.ok) {
    const body = await res.json().catch(() => ({}));
    throw new Error(body.error || `Request failed: ${res.status}`);
  }
  return res.json();
}

export function createParty(itemId) {
  return apiFetch('/api/parties', { method: 'POST', body: JSON.stringify({ itemId }) });
}

export function joinParty(partyId) {
  return apiFetch(`/api/parties/${encodeURIComponent(partyId)}/join`, { method: 'POST' });
}

export function leaveParty(partyId) {
  return apiFetch(`/api/parties/${partyId}/leave`, { method: 'POST' });
}

export function getParty(partyId) {
  return apiFetch(`/api/parties/${partyId}`);
}

/**
 * Live "watch parties en cours" feed for the home page. `onParties` gets
 * called with the full current list on subscribe, and again every time any
 * party anywhere changes (created, someone joined/left, host handed off).
 * Caller MUST call .disconnect() when navigating away (see home.js's router
 * cleanup) - same leak-prevention pattern as connectParty below.
 */
export function connectLobby(onParties) {
  const socket = window.io();
  socket.on('connect', () => socket.emit('subscribeLobby'));
  socket.on('parties', onParties);
  return {
    disconnect() {
      socket.disconnect();
    }
  };
}

/**
 * Opens the realtime connection for a party. Returns an object the caller
 * MUST eventually call .leave() on (e.g. from a router cleanup function -
 * see router.js/player.js) - otherwise the socket, and whatever it's
 * keeping alive via closures, never gets released.
 */
export function connectParty(partyId, { onMembers, onPlaystate, onItemChanged, onHostChanged, onError, onClose } = {}) {
  const socket = window.io();

  // Reconnects (Socket.IO retries automatically) re-fire "connect", so this
  // also covers rejoining after a transient network drop, not just the
  // first connection.
  socket.on('connect', () => {
    socket.emit('join', { partyId });
  });

  if (onMembers) socket.on('members', onMembers);
  if (onPlaystate) socket.on('playstate', onPlaystate);
  if (onItemChanged) socket.on('itemChanged', onItemChanged);
  if (onHostChanged) socket.on('hostChanged', onHostChanged);
  if (onError) socket.on('errorMessage', (msg) => onError(msg.message));
  if (onClose) socket.on('disconnect', onClose);

  return {
    sendPlaystate(isPaused, positionTicks) {
      socket.emit('playstate', { isPaused, positionTicks });
    },
    /** Host-only: advance the party's queue (e.g. to the next episode). */
    next() {
      socket.emit('next');
    },
    leave() {
      socket.emit('leave');
      socket.disconnect();
    }
  };
}