diff --git a/apps/browser/src/types/electron-api.d.ts b/apps/browser/src/types/electron-api.d.ts index 6c17fdc..eff96e0 100644 --- a/apps/browser/src/types/electron-api.d.ts +++ b/apps/browser/src/types/electron-api.d.ts @@ -26,7 +26,7 @@ interface Bounds { height: number; } -interface ElectronAPI { +export interface ElectronAPI { platform: NodeJS.Platform; closeWindow: () => void; minimizeWindow: () => void; @@ -40,13 +40,20 @@ interface ElectronAPI { onWebviewReload: (callback: () => void) => () => void; // Theme detection - getSystemTheme: () => Promise<'light' | 'dark'>; - onThemeChanged: (callback: (theme: 'light' | 'dark') => void) => () => void; + getSystemTheme: () => Promise<"light" | "dark">; + onThemeChanged: (callback: (theme: "light" | "dark") => void) => () => void; // Orientation APIs - getOrientation: () => Promise<'portrait' | 'landscape'>; + getOrientation: () => Promise<"portrait" | "landscape">; toggleOrientation: () => Promise; - onOrientationChanged: (callback: (orientation: 'portrait' | 'landscape') => void) => () => void; + onOrientationChanged: ( + callback: (orientation: "portrait" | "landscape") => void + ) => () => void; + + // Fullscreen mode listener + onFullscreenModeChanged: ( + callback: (isFullscreen: boolean) => void + ) => () => void; // Tab management APIs tabs: { @@ -81,7 +88,9 @@ interface ElectronAPI { onDidNavigate: (callback: (url: string) => void) => () => void; onDidNavigateInPage: (callback: (url: string) => void) => () => void; onDomReady: (callback: () => void) => () => void; - onDidFailLoad: (callback: (errorCode: number, errorDescription: string) => void) => () => void; + onDidFailLoad: ( + callback: (errorCode: number, errorDescription: string) => void + ) => () => void; onRenderProcessGone: (callback: (details: any) => void) => () => void; }; } diff --git a/apps/browser/src/webview-preload.ts b/apps/browser/src/webview-preload.ts index afefe75..740ac0d 100644 --- a/apps/browser/src/webview-preload.ts +++ b/apps/browser/src/webview-preload.ts @@ -3,6 +3,173 @@ import { ipcRenderer } from "electron"; +// ============================================================================ +// Fullscreen API Polyfill (Plan 1.5 - Final) +// ============================================================================ +// We need to polyfill the Fullscreen API so web pages think they're in fullscreen +// even though the window doesn't actually go fullscreen + +console.log("[Preload] ✓ Loaded - Fullscreen API polyfill active"); + +// Track fullscreen state +let isFullscreenActive = false; +let fullscreenElement: Element | null = null; + +// Helper function to apply object-fit style to video elements +function applyVideoFitStyle(fitValue: string) { + const videos = document.querySelectorAll('video'); + videos.forEach((video) => { + if (fitValue) { + video.style.objectFit = fitValue; + } else { + video.style.objectFit = ''; + } + }); + + // Also observe for dynamically added videos + if (fitValue === 'contain') { + startVideoObserver(); + } else { + stopVideoObserver(); + } +} + +// MutationObserver to handle dynamically added videos +let videoObserver: MutationObserver | null = null; + +function startVideoObserver() { + if (videoObserver) return; + + videoObserver = new MutationObserver((mutations) => { + mutations.forEach((mutation) => { + mutation.addedNodes.forEach((node) => { + if (node instanceof HTMLVideoElement) { + node.style.objectFit = 'contain'; + } else if (node instanceof Element) { + const videos = node.querySelectorAll('video'); + videos.forEach((video) => { + (video as HTMLVideoElement).style.objectFit = 'contain'; + }); + } + }); + }); + }); + + videoObserver.observe(document.body, { + childList: true, + subtree: true, + }); +} + +function stopVideoObserver() { + if (videoObserver) { + videoObserver.disconnect(); + videoObserver = null; + } +} + +// Listen for fullscreen state from main process +ipcRenderer.on("set-fullscreen-state", (_event, state: boolean) => { + const wasFullscreen = isFullscreenActive; + isFullscreenActive = state; + + if (state && !wasFullscreen) { + // Entering fullscreen + fullscreenElement = document.documentElement; // Assume whole document + + // Apply object-fit: contain to all video elements to prevent cropping + applyVideoFitStyle('contain'); + + // Force a resize event to make sure the page knows about the new size + window.dispatchEvent(new Event('resize')); + + const event = new Event("fullscreenchange", { bubbles: true }); + document.dispatchEvent(event); + } else if (!state && wasFullscreen) { + // Exiting fullscreen + fullscreenElement = null; + + // Restore original object-fit style + applyVideoFitStyle(''); + + // Force a resize event + window.dispatchEvent(new Event('resize')); + + const event = new Event("fullscreenchange", { bubbles: true }); + document.dispatchEvent(event); + } +}); + +// Override fullscreenElement getter +Object.defineProperty(Document.prototype, "fullscreenElement", { + get: function(this: Document): Element | null { + return fullscreenElement; + }, + configurable: true, +}); + +// Override webkitFullscreenElement getter +Object.defineProperty(Document.prototype, "webkitFullscreenElement", { + get: function(this: Document): Element | null { + return fullscreenElement; + }, + configurable: true, +}); + +// Store original screen dimensions +const originalScreenWidth = window.screen.width; +const originalScreenHeight = window.screen.height; + +// Override screen.width and screen.height to match window size in fullscreen +Object.defineProperty(window.screen, "width", { + get: function(): number { + // In fullscreen mode, return window size instead of actual screen size + if (isFullscreenActive) { + return window.innerWidth; + } + return originalScreenWidth; + }, + configurable: true, +}); + +Object.defineProperty(window.screen, "height", { + get: function(): number { + // In fullscreen mode, return window size instead of actual screen size + if (isFullscreenActive) { + return window.innerHeight; + } + return originalScreenHeight; + }, + configurable: true, +}); + +// Also override availWidth and availHeight +Object.defineProperty(window.screen, "availWidth", { + get: function(): number { + if (isFullscreenActive) { + return window.innerWidth; + } + return originalScreenWidth; + }, + configurable: true, +}); + +Object.defineProperty(window.screen, "availHeight", { + get: function(): number { + if (isFullscreenActive) { + return window.innerHeight; + } + return originalScreenHeight; + }, + configurable: true, +}); + +console.log("[Preload] ✓ Fullscreen API polyfill installed (with screen size override)"); + +// ============================================================================ +// Theme Color Extraction +// ============================================================================ + // Extract theme color safely when DOM is ready function extractThemeColor(): string | null { try {