Add experimental Presentation API presenter plugin

[LeaVerou]

Summary

Introduces a new experimental presenter plugin (presenter2) built on the W3C Presentation API as an alternative to the classic window.open-based presenter. This allows presenters to render slides on secondary displays or Cast devices with automatic reconnection support.

Key Changes

• New presenter2/plugin.js: Experimental presenter plugin using the Presentation API instead of window.open(). Features include:

  • Controller/receiver pattern for presenter and audience views
  • Message-based synchronization of slide and item navigation
  • Automatic reconnection when presenter view is reloaded via sessionStorage
  • Ctrl+P keyboard shortcut to initiate presentation
  • Graceful fallback for unsupported browsers

• New presenter/presenter-ui.js: Extracted transport-independent presenter UI logic shared between classic and experimental plugins:

  • enterPresenterView(): Initializes presenter view styling and opens speaker notes
  • onPresenterSlidechange(): Handles speaker notes display and timing calculations
  • Works with both window.open and Presentation API transports

• Updated presenter/plugin.js: Refactored to use shared UI functions from presenter-ui.js, reducing code duplication

• Updated plugin-autoload.js: Added conditional autoloading:

  • Classic presenter plugin loads when details.notes exist and experimental-presentation-api class is absent
  • New presenter2 plugin loads when details.notes exist and experimental-presentation-api class is present
  • Ensures only one presenter plugin runs per deck

• Updated details-notes/plugin.js: Extended presenter detection to recognize both Inspire.projector and the presenter class on body

• New presenter2/README.md: Documentation covering usage, benefits, requirements, and limitations

• New presenter2/plugin.css: Stylesheet that reuses classic presenter styling via import

Implementation Details

• Uses PresentationRequest API for display selection and PresentationConnection for bidirectional messaging
• Implements a guard (applyingRemote) to prevent echoing remote updates back to the other view
• Stores presentation connection ID in sessionStorage to enable silent reconnection after reload
• Syncs only slide/item navigation (via slide IDs), not keyboard/mouse events
• Requires secure context (HTTPS or localhost) and Chromium-based browser support

https://claude.ai/code/session_01PLrW3z9316nvWakLoqYaY5

[DmitrySharabin]

Review

The core design is sound — I verified against @inspirejs/core that:

• goto() accepts bare string slide ids ✓
• slidechange hook fires synchronously inside goto(), so the applyingRemote echo-suppression guard works ✓
• All slides get auto-generated ids in init(), so Inspire.currentSlide.id is always a non-empty string ✓
• gotoItem also fires its hook synchronously, so item sync is echo-safe too ✓

The shared presenter-ui.js extraction is clean, and the autoload selector trick is clever.

Two issues worth discussing before merging, one functional and one dead-code.

[DmitrySharabin]

Bug: cancelled picker leaves presenter view stuck

enterPresenterView() runs on line 115 before start() resolves. If the user cancels the display picker (or no display is available), the .catch(() => {}) on line 122 silently swallows the rejection — but the body already has presenter + show-next classes and notes are open, with no audience view and no way to revert short of reloading.

The same gap exists on disconnect: drop() (line 72) nulls transport and clears sessionStorage, but never reverts the presenter UI.

Suggested fix — move enterPresenterView() into the .then() (like the reconnect path already does correctly on line 100), and add a leavePresenterView() counterpart called from drop() when isController:

// keyup handler
new PresentationRequest([location.href]).start()
    .then(connection => {
        enterPresenterView();
        wireConnection(connection, true);
        window.focus();
    })
    .catch(() => {}); // picker cancelled — no UI change needed now

For drop(), something like:

let drop = () => {
    transport = null;
    if (isController) {
        sessionStorage.removeItem(STORAGE_KEY);
        document.body.classList.remove("presenter", "show-next");
    }
};

[DmitrySharabin]

Likely dead code — this check can never be true at evaluation time

This module runs at import time (top-level for loop, no hooks). At that point, neither Inspire.projector nor the presenter body class is set — both are added later by user interaction (Ctrl+P) or by the init-end hook (reconnect path).

The original Inspire.projector check had the same problem, so this isn't a regression — but adding a second never-true condition makes it look intentional. In practice, notes are opened by enterPresenterView() and onPresenterSlidechange() in the presenter plugins, so this line is redundant.

Worth either removing the whole if block (since it's always false) or, if the intent is to support late-loaded plugins where the class might already be set, adding a comment explaining the scenario.