offscreen.js

// Keep track of active audio elements by tabId so we can change routes later
const activeTabs = new Map();

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'GET_TAB_STATE') {
    const tabState = activeTabs.get(message.tabId);
    if (tabState) {
      sendResponse({ deviceId: tabState.sinkId || 'default', volume: tabState.volume });
    } else {
      sendResponse(null);
    }
    return true; // Keep channel open for sendResponse
  }

  if (message.action === 'CHECK_TAB_CAPTURED') {
    sendResponse({ isCaptured: activeTabs.has(message.tabId) });
    return true;
  }
  
  if (message.action === 'CHANGE_SINK') {
    const tabState = activeTabs.get(message.tabId);
    if (tabState && tabState.ctx) {
      tabState.ctx.setSinkId(message.deviceId)
        .then(() => {
          tabState.sinkId = message.deviceId;
          console.log(`Changed sink for tab ${message.tabId} to ${message.deviceId}`);
        })
        .catch(console.error);
    }
    return;
  }
  
  if (message.action === 'CHANGE_VOLUME') {
    const tabState = activeTabs.get(message.tabId);
    if (tabState && tabState.gainNode) {
      tabState.gainNode.gain.value = message.volume;
      tabState.volume = message.volume;
      console.log(`Changed volume for tab ${message.tabId} to ${message.volume}`);
    }
    return;
  }

  if (message.action === 'PLAY_STREAM_ON_DEVICE') {
    routeStreamToDevice(message.streamId, message.tabId, message.deviceId, message.volume);
  }
});

async function routeStreamToDevice(streamId, tabId, deviceId, volume) {
  try {
    // 1. Capture the tab audio stream using the streamId
    const stream = await navigator.mediaDevices.getUserMedia({
      audio: {
        mandatory: {
          chromeMediaSource: 'tab',
          chromeMediaSourceId: streamId
        }
      },
      video: false
    });

    // 2. Create or reuse an AudioContext for low-latency playback
    let tabState = activeTabs.get(tabId);
    if (!tabState) {
      const ctx = new AudioContext({ latencyHint: 'interactive' });
      const source = ctx.createMediaStreamSource(stream);
      const gainNode = ctx.createGain();
      
      source.connect(gainNode);
      gainNode.connect(ctx.destination);
      
      tabState = {
        ctx,
        gainNode,
        sinkId: 'default',
        volume: 1.0
      };
      activeTabs.set(tabId, tabState);
      
      // Clean up if the stream ends (e.g. tab is closed)
      stream.getTracks()[0].onended = () => {
        tabState.ctx.close();
        activeTabs.delete(tabId);
      };
    }

    // 3. Route the audio to the selected speaker deviceId and set volume
    if (volume !== undefined) {
      tabState.gainNode.gain.value = volume;
      tabState.volume = volume;
    }
    
    await tabState.ctx.setSinkId(deviceId);
    tabState.sinkId = deviceId;
    
    if (tabState.ctx.state === 'suspended') {
      await tabState.ctx.resume();
    }
    
    console.log(`Successfully routed stream for tab ${tabId} to device ${deviceId} at volume ${tabState.volume}`);
  } catch (error) {
    console.error('Error routing tab audio:', error);
  }
}