@quicktvui/web-renderer 1.0.2 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quicktvui/web-renderer",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Web renderer for QuickTVUI - provides web browser rendering support",
   "author": "QuickTVUI Team",
   "license": "Apache-2.0",

package/src/index.js

@@ -7,6 +7,15 @@ export * from './core'
 // Components
 export * from './components'
 
+// Import functions needed for initWebRenderer
+import {
+  setupSceneBuilder,
+  applyAllPatches,
+  TVFocusManager,
+  initAutoProxy,
+  initAsyncLocalStorage
+} from './core'
+
 // Create component registry for web renderer
 import { HippyWebEngine } from '@hippy/web-renderer'
 import { QtView, createNamedComponent } from './components/QtView'
@@ -249,6 +258,7 @@ let _webEngine = null
 /**
  * Initialize the web renderer (convenience function)
  * Creates and prepares the engine, applies patches
+ * This matches the initialization flow in main-web.js
  */
 export function initWebRenderer() {
   if (_webEngine) {
@@ -256,11 +266,54 @@ export function initWebRenderer() {
     return _webEngine
   }
 
-  console.log('[Web Renderer] Initializing...')
+  console.log('[Web Renderer] === Starting initialization ===')
+
+  // Step 0: Initialize async localStorage (must be first)
+  initAsyncLocalStorage()
+
+  // Step 0.1: Initialize auto proxy for development
+  initAutoProxy()
+
+  // Step 0.2: Register IJKPlayerComponent for web video
+  global.__WEB_COMPONENT__ = global.__WEB_COMPONENTS__ || {}
+  global.__WEB_COMPONENTS__['IJKPlayerComponent'] = IJKPlayerComponent
+
+  // Step 1: Setup SceneBuilder (must be done before main.ts loads)
+  setupSceneBuilder()
+
+  console.log('[Web Renderer] Component mappings:', Object.keys(quicktvuiComponents))
+
+  // Step 2: Create the web engine
   _webEngine = createWebEngine()
 
-  // Apply all patches (from core exports)
-  // These patches are auto-applied by core/index.js
+  // Step 3: Apply all patches BEFORE starting
+  applyAllPatches(_webEngine)
+
+  // Step 4: Initialize TV Focus Manager
+  const focusManager = new TVFocusManager()
+  global.__TV_FOCUS_MANAGER__ = focusManager
+  console.log('[Web Renderer] TVFocusManager initialized')
+
+  // Step 5: Inject global CSS to match Android layout behavior
+  const styleEl = document.createElement('style')
+  styleEl.id = 'web-platform-reset'
+  styleEl.textContent = `
+  /* Web-Android Layout Compatibility Reset */
+  
+  /* Disable flex cross-axis stretching (Android behavior) */
+  /* In Android, children don't auto-fill parent's cross dimension */
+  #app,
+  #app * {
+    align-items: flex-start;
+  }
+  
+  /* Elements with explicit style should override the reset */
+  [style*="align-items"] {
+    align-items: var(--align-items, center) !important;
+  }
+`
+  document.head.appendChild(styleEl)
+  console.log('[Web Renderer] Global CSS reset injected for Android-compatible layout')
 
   console.log('[Web Renderer] Initialization complete')
   return _webEngine
@@ -272,10 +325,11 @@ export function initWebRenderer() {
  */
 export function startWebRenderer() {
   if (!_webEngine) {
-    console.log('[Web Renderer] No engine found, creating one...')
-    _webEngine = createWebEngine()
+    console.log('[Web Renderer] No engine found, initializing...')
+    initWebRenderer()
   }
 
+  console.log('[Web Renderer] Starting engine...')
   startWebEngine(_webEngine)
   return _webEngine
 }