Implement automatic preview-only mode for Notebook page with Chromium tab capture detection

[Copilot]

Adds an automatic "preview-only" mode to the Notebook page that activates when Chromium detects the tab is being captured (e.g., Chrome "Share this tab" feature), with URL parameter fallbacks for manual control.

What this PR does

When preview-only mode is active:

• Editor pane is completely hidden - no distracting code/markdown editor visible during screen sharing
• Preview pane expands to full width - maximizes the rendered content area
• Dock is hidden - removes the bottom navigation to avoid clutter during presentations

How it works

Automatic Detection

Uses Chromium's experimental capture detection APIs with safe feature detection:

• document.getCaptureState() - checks if tab is currently being captured
• document.hasCapture - alternative capture state property
• capturestatechange event - listens for real-time capture state changes

Manual Fallbacks

Supports URL parameters for manual control:

• ?preview=1 - forces preview-only mode
• ?stream=right - alternative parameter for the same behavior

Example Usage

# Normal notebook view
https://docerium.com/notebook

# Manual preview-only mode  
https://docerium.com/notebook?preview=1
https://docerium.com/notebook?stream=right

# Automatic mode when sharing tab in Chrome
# (activates automatically when user clicks "Share this tab")

Implementation Details

CSS Changes (src/styles/notebook.scss)

html.notebook--preview-only {
  .editor-pane {
    display: none;
  }
  .preview-pane {
    width: 100% !important;
    max-width: 100% !important;
    border-left: none !important;
  }
  .dock-container {
    display: none;
  }
}

React Changes (src/app/notebook/page.tsx)

• Added useEffect hook that detects capture state on mount and URL changes
• Safely feature-detects experimental Chromium APIs with try-catch blocks
• Toggles notebook--preview-only class on the HTML element
• Cleans up event listeners and CSS class on component unmount

Browser Compatibility

• Supporting browsers (Chromium-based): Automatic capture detection works
• Non-supporting browsers: Gracefully degrades, only manual URL parameters work
• No breaking changes: Existing functionality remains unchanged

Testing

Verified the implementation works correctly:

• ✅ URL parameter fallbacks (?preview=1 and ?stream=right)
• ✅ Feature detection doesn't break on non-supporting browsers
• ✅ UI correctly hides editor and dock, expands preview to full width
• ✅ CSS class cleanup on page navigation
• ✅ Responsive design maintained in preview mode

This enhancement makes Docerium's notebook perfect for live presentations and screen sharing, automatically providing a clean, distraction-free view of rendered content.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
docerium-com	Ready	Preview	Comment	Aug 17, 2025 11:46pm