Enhancement: Integrated Audio Sidebar & PIP Toggle for Active Media Sources

[logicsec]

Overview

We want to add an integrated audio player that:

• Can toggle between the native Picture-in-Picture (PIP) video player and a minimized sidebar audio player.
• Automatically appears for audio-only sources (e.g., Spotify).
• Only appears when the user navigates away from the tab with the active audio source, and disappears when the user navigates back to that tab.
• Can be enabled/disabled via a user setting.
• Displays the favicon of the source app.
• Handles multiple active audio sources gracefully.

The audio player should appear above the workspace icons, which are currently at the bottom of the window.

Where to Add the Audio Player

1. New Component: ZenAudioPlayer

• Location: Create a new module, e.g. ZenAudioPlayer.mjs, inside src/browser/base/zen-components/.
• Responsibilities:
  • Render the UI for audio controls (play, pause, metadata, favicon).
  • Listen for active audio sources using APIs (like tab.audible and the Media Session API).
  • Support switching between multiple audio sources (e.g., via tabs or a dropdown).
  • PIP View Toggle: Provide controls to switch between the native PIP view and the sidebar audio player.
  • Navigation-Based Visibility: Detect when the user navigates away from the tab that is currently playing audio, and only then display the audio player. When the user navigates back to that tab, the audio player should automatically disappear.

2. Integration into the Main Layout

• File to Modify:
  • Locate the main browser window layout. This might be in a file like browser.xhtml (or its Zen-specific equivalent) within src/browser/base/content/.
• UI Placement:
  • Identify the container that holds the workspace icons at the bottom.
  • Insert a new container (e.g., a <vbox> with an ID like zen-audio-player) above the workspace icons container.
• CSS Adjustments:
  • Update or add styles to ensure that the audio player container positions itself above the workspace icons and integrates smoothly with the rest of the UI.

What to Add

A. ZenAudioPlayer Module

• File: src/browser/base/zen-components/ZenAudioPlayer.mjs
• Key Features:
  • Audio Controls: Basic play, pause, and seek controls.
  • Metadata Display: Show track information and the favicon of the audio source.
  • Source Handling:
    • Monitor active audio tabs using the tab.audible property.
    • Use the Media Session API to retrieve metadata and handle media control events.
    • For capturing or processing the actual audio (if needed), consider leveraging internal Firefox APIs or Web Audio API techniques.
    • For multiple sources, either auto-switch to the most recent or offer a tabbed/dropdown interface.
  • Toggle Functionality:
    • Ability to switch between the native PIP view and the sidebar audio player.
    • When a video is playing in PIP mode, the user should be able to toggle to the sidebar audio view—and vice versa.
  • Navigation-Based Visibility:
    • Monitor navigation events (e.g., using browser tab events) to detect when the user leaves the tab that is playing audio.
    • Display the audio player only when the user navigates away from the audio source tab, and hide it when the user returns.
  • Settings Hook: Check user preferences (e.g., zen.audioPlayer.enabled and zen.audioPlayer.pipToggleEnabled) to determine whether the audio player and the PIP toggle should be visible.

B. Main Layout Modifications

• File: Likely within src/browser/base/content/browser.xhtml or another Zen-specific layout file.
• Changes:
  • Insert the audio player container above the workspace icons section.
  • Example insertion (pseudo-code):

    <vbox id="main-content" flex="1">
      <!-- Other UI components -->
    
      <!-- Insert the new audio player above workspace icons -->
      <vbox id="zen-audio-player" flex="0">
        <!-- ZenAudioPlayer will render its content here -->
      </vbox>
    
      <!-- Existing workspace icons container -->
      <hbox id="zen-workspace-icons" flex="0">
        <!-- Workspace icons go here -->
      </hbox>
    </vbox>

  • Styling: Ensure the audio player has a defined height and is styled to match the browser's aesthetic.

C. Settings Integration

• Preference Options:
  • Add a setting (e.g., zen.audioPlayer.enabled) so users can enable or disable the audio sidebar feature.
  • Add a secondary setting (e.g., zen.audioPlayer.pipToggleEnabled) for controlling the PIP view toggle functionality.
• Implementation:
  • Read these settings in both the ZenAudioPlayer module and the main layout logic to conditionally render the player and the PIP toggle control.

D. PIP View Toggle Integration

• PIP Toggle UI:
  • Integrate a dedicated control (e.g., a button or switch) within the ZenAudioPlayer UI.
• Toggle Functionality:
  • When activated:
    • If a video source is active in PIP mode, the toggle should minimize or hide the PIP view and display the audio player in the sidebar.
    • If toggled back, the audio sidebar should hide and restore the native PIP view.
• Implementation Considerations:
  • Use Firefox's native PIP API (or internal interfaces) to manage view state transitions.
  • Ensure smooth transitions between the two modes with appropriate UI feedback.
  • Store the user's PIP toggle preference and restore the last active state on browser restart.

E. Audio Source Acquisition

• Detection:
  • Leverage the tab.audible property from the browser's tab API to detect which tabs are playing audio.
  • Use the Media Session API to capture media metadata and control events from supported sites.
• Capture (if needed):
  • For advanced use cases (such as visualizations or processing the audio stream), investigate Firefox’s internal audio stream interfaces or use the Web Audio API.
  • Note that while Chromium offers a tabCapture API, Firefox may require different methods or be subject to feature flags for direct audio capture.