@quicktvui/web-renderer 1.0.0

package/src/index.js

@@ -0,0 +1,246 @@
+// Web Renderer Module
+// Main entry point for web renderer components and utilities
+
+// Core modules
+export * from './core'
+
+// Components
+export * from './components'
+
+// Create component registry for web renderer
+import { HippyWebEngine } from '@hippy/web-renderer'
+import { QtView, createNamedComponent } from './components/QtView'
+import { QtText } from './components/QtText'
+import { QtImage } from './components/QtImage'
+import { QtTransitionImage } from './components/QtTransitionImage'
+import { QtPageRootView } from './components/QtPageRootView'
+import { QtFastListView } from './components/QtFastListView'
+import { QtLoadingView } from './components/QtLoadingView'
+import { QtAnimationView } from './components/QtAnimationView'
+import { QtWebView } from './components/QtWebView'
+import { QtQRCode } from './components/QtQRCode'
+import { QtProgressBar } from './components/QtProgressBar'
+import { QtSeekBar } from './components/QtSeekBar'
+import { QtItemFrame } from './components/QtItemFrame'
+import { QtItemStoreView } from './components/QtItemStoreView'
+import { QtRippleView } from './components/QtRippleView'
+import { QtFlexView } from './components/QtFlexView'
+import { QtItemView } from './components/QtItemView'
+import { TabsView } from './components/TabsView'
+import { ViewPager } from './components/ViewPager'
+import { Modal } from './components/Modal'
+import { QtListView, QtListViewItem } from './components/QtListView'
+import { QtPlayMark } from './components/QtPlayMark'
+import { APP_NAME } from './core/constants'
+import { ESModule } from './modules/ESModule'
+import { ESLocalStorageModule } from './modules/ESLocalStorageModule'
+import { EsNativeModule } from './modules/EsNativeModule'
+import { AndroidSharedPreferencesModule } from './modules/AndroidSharedPreferencesModule'
+import { AndroidDevelopModule } from './modules/AndroidDevelopModule'
+import { AndroidNetworkModule } from './modules/AndroidNetworkModule'
+import { ESToastModule } from './modules/ESToastModule'
+import { RuntimeDeviceModule } from './modules/RuntimeDeviceModule'
+import { ESIJKAudioPlayerModule } from './modules/ESIJKAudioPlayerModule'
+import { ESLogModule } from './modules/ESLogModule'
+import { FastListModule } from './modules/FastListModule'
+import { FocusModule } from './modules/FocusModule'
+import { ESDeviceInfoModule } from './modules/ESDeviceInfoModule'
+import { ESGroupDataModule } from './modules/ESGroupDataModule'
+import { TextV2Component } from './components/plugins'
+import { IJKPlayerComponent } from './adapters/es3-video-player'
+// Create named versions of base components
+const QtViewNamed = createNamedComponent(QtView, 'View')
+const QtTextNamed = createNamedComponent(QtText, 'Text')
+const QtImageNamed = createNamedComponent(QtImage, 'Image')
+
+// Component registry for HippyWebEngine
+// ListView and ListViewItem are overridden with QtListView/QtListViewItem
+// to support TV-specific features like fadingEdgeLength, horizontalFadingEdgeEnabled, etc.
+export const quicktvuiComponents = {
+  // Core Hippy native components (overriding some defaults)
+  View: QtViewNamed,
+  Text: QtTextNamed,
+  Image: QtImageNamed,
+  // Override ListView and ListViewItem with TV-specific adapters
+  ListView: QtListView,
+  ListViewItem: QtListViewItem,
+  ScrollView: createNamedComponent(QtView, 'ScrollView'),
+  TextInput: createNamedComponent(QtView, 'TextInput'),
+  WebView: QtWebView,
+  ViewPager: createNamedComponent(QtView, 'ViewPager'),
+  FastListView: QtFastListView,
+  TextView: QtTextNamed,
+
+  // ESRouter native components
+  ESPageRouterView: createNamedComponent(QtView, 'ESPageRouterView'),
+  ESPageRootView: QtPageRootView,
+  ESSlotRootView: createNamedComponent(QtView, 'ESSlotRootView'),
+  ESSlotView: createNamedComponent(QtView, 'ESSlotView'),
+
+  // Loading component
+  LoadingViewComponent: QtLoadingView,
+
+  // Animation component
+  AnimationViewComponent: QtAnimationView,
+
+  // WebView component
+  ESWebViewComponent: QtWebView,
+
+  // X5WebView component (uses same implementation as WebView)
+  ESX5WebViewComponent: QtWebView,
+
+  // QR Code component
+  QrCodeComponent: QtQRCode,
+
+  // ProgressBar component
+  TVProgressBarViewComponent: QtProgressBar,
+
+  // SeekBar component
+  TVSeekBarViewComponent: QtSeekBar,
+
+  // GridView/List component - both use QtFastListView with spanCount
+  TVListViewComponent: QtFastListView,
+
+  // ItemFrame component (simple container for qt-poster)
+  ItemFrameComponent: QtItemFrame,
+
+  // ItemStoreView component (shared item templates for waterfall)
+  ItemStoreView: QtItemStoreView,
+
+  // RippleView component
+  RippleViewComponent: QtRippleView,
+
+  // FlexView component (for tv-flex / waterfall)
+  FastFlexView: QtFlexView,
+
+  // ItemView component (for tv-item / waterfall sections)
+  FastItemView: QtItemView,
+
+  // Tabs component (for qt-tabs)
+  TabsView: TabsView,
+
+  // RecyclerViewPager component (for qt-tabs content)
+  RecyclerViewPager: ViewPager,
+
+  // Modal component (for qt-dialog)
+  Modal: Modal,
+
+  // Plugin components
+  TextV2Component: TextV2Component,
+
+  // TransitionImage component (for img-transition)
+  TransitionImageComponent: QtTransitionImage,
+
+  // Video player component (IJKPlayer for web)
+  IJKPlayerComponent: IJKPlayerComponent,
+
+  // PlayMark component
+  ESPlayMarkViewComponent: QtPlayMark,
+}
+
+// Create and configure the web engine
+export function createWebEngine() {
+  console.log('[Web Renderer] Creating HippyWebEngine...')
+
+  const engine = HippyWebEngine.create({
+    modules: {
+      ESModule,
+      ESLocalStorageModule,
+      EsNativeModule,
+      AndroidSharedPreferencesModule,
+      AndroidDevelopModule,
+      AndroidNetworkModule,
+      ESToastModule,
+      RuntimeDeviceModule,
+      ESIJKAudioPlayerModule,
+      ESLogModule,
+      FastListModule,
+      FocusModule,
+      ESDeviceInfoModule,
+      ESGroupDataModule,
+    },
+    components: quicktvuiComponents,
+  })
+
+  console.log('[Web Renderer] Engine created')
+
+  // Register ListView and ListViewItem (override Hippy's built-in)
+  // These support TV-specific features like fadingEdgeLength, horizontalFadingEdgeEnabled
+  engine.registerComponent('ListView', QtListView)
+  engine.registerComponent('ListViewItem', QtListViewItem)
+
+  // Override built-in Image component
+  engine.registerComponent('Image', QtImage)
+
+  // Register ESWebViewComponent
+  engine.registerComponent('ESWebViewComponent', QtWebView)
+
+  // Register ESX5WebViewComponent
+  engine.registerComponent('ESX5WebViewComponent', QtWebView)
+
+  // Register QrCodeComponent
+  engine.registerComponent('QrCodeComponent', QtQRCode)
+
+  // Register TVProgressBarViewComponent
+  engine.registerComponent('TVProgressBarViewComponent', QtProgressBar)
+
+  // Register TVSeekBarViewComponent
+  engine.registerComponent('TVSeekBarViewComponent', QtSeekBar)
+
+  // Register TVListViewComponent (for qt-grid-view) - uses QtFastListView
+  engine.registerComponent('TVListViewComponent', QtFastListView)
+
+  // Register ItemFrameComponent (simple container for qt-poster)
+  engine.registerComponent('ItemFrameComponent', QtItemFrame)
+
+  // Register ItemStoreView (shared item templates for waterfall)
+  engine.registerComponent('ItemStoreView', QtItemStoreView)
+
+  // Register RippleViewComponent
+  engine.registerComponent('RippleViewComponent', QtRippleView)
+
+  // Register FastFlexView (for tv-flex / waterfall)
+  engine.registerComponent('FastFlexView', QtFlexView)
+
+  // Register FastItemView (for tv-item / waterfall sections)
+  engine.registerComponent('FastItemView', QtItemView)
+
+  // Register TabsView (for qt-tabs)
+  engine.registerComponent('TabsView', TabsView)
+
+  // Register RecyclerViewPager (for qt-tabs content)
+  engine.registerComponent('RecyclerViewPager', ViewPager)
+
+  // Register Modal (for qt-dialog)
+  engine.registerComponent('Modal', Modal)
+
+  // Register Plugin components
+  engine.registerComponent('TextV2Component', TextV2Component)
+
+  // Register TransitionImageComponent
+  engine.registerComponent('TransitionImageComponent', QtTransitionImage)
+
+  // Register IJKPlayerComponent (video player)
+  engine.registerComponent('IJKPlayerComponent', IJKPlayerComponent)
+
+  // Register ESPlayMarkViewComponent (play mark animation)
+  engine.registerComponent('ESPlayMarkViewComponent', QtPlayMark)
+
+  return engine
+}
+
+// Start the web engine
+export function startWebEngine(engine) {
+  engine.start({
+    id: 'app',
+    name: APP_NAME,
+    params: {
+      business: APP_NAME,
+      data: {},
+    },
+  })
+
+  console.log('[Web Renderer] Engine started')
+}
+
+export { APP_NAME }

package/src/modules/AndroidDevelopModule.js

@@ -0,0 +1,101 @@
+/**
+ * ESDevelopModule - Web平台适配器
+ * 提供应用开发信息（版本号、包名、渠道等）
+ */
+
+// 存储开发信息
+let developInfo = null
+
+function getPackageName() {
+  const g = globalThis
+  if (g && g.__CONFIG__ && g.__CONFIG__.packageName) {
+    return g.__CONFIG__.packageName
+  }
+  return 'web'
+}
+
+function ensureDevelopInfo() {
+  if (!developInfo) {
+    developInfo = {
+      versionCode: 1,
+      versionName: '1.0.0',
+      packageName: getPackageName(),
+      channel: 'web',
+    }
+  }
+  return developInfo
+}
+
+export class AndroidDevelopModule {
+  constructor(context) {
+    this.context = context
+    this.name = 'AndroidDevelopModule'
+  }
+
+  init(...args) {
+    const addon = args && args.length ? args[args.length - 1] : null
+    const info = ensureDevelopInfo()
+    if (addon && typeof addon.resolve === 'function') {
+      addon.resolve(info)
+    }
+    return info
+  }
+
+  destroy() {
+    developInfo = null
+  }
+
+  getDevelop(...args) {
+    const addon = args && args.length ? args[args.length - 1] : null
+    const info = ensureDevelopInfo()
+    if (addon && typeof addon.resolve === 'function') {
+      addon.resolve(info)
+    }
+    // 返回 Promise，与原生平台行为一致
+    return Promise.resolve(info)
+  }
+
+  getPackageName(...args) {
+    const addon = args && args.length ? args[args.length - 1] : null
+    const name = getPackageName()
+    if (addon && typeof addon.resolve === 'function') {
+      addon.resolve(name)
+    }
+    return name
+  }
+
+  getVersionName(...args) {
+    const addon = args && args.length ? args[args.length - 1] : null
+    const info = ensureDevelopInfo()
+    const value = info.versionName
+    if (addon && typeof addon.resolve === 'function') {
+      addon.resolve(value)
+    }
+    return value
+  }
+
+  getVersionCode(...args) {
+    const addon = args && args.length ? args[args.length - 1] : null
+    const info = ensureDevelopInfo()
+    const value = info.versionCode
+    if (addon && typeof addon.resolve === 'function') {
+      addon.resolve(value)
+    }
+    return value
+  }
+
+  getChannel(...args) {
+    const addon = args && args.length ? args[args.length - 1] : null
+    const info = ensureDevelopInfo()
+    const value = info.channel
+    if (addon && typeof addon.resolve === 'function') {
+      addon.resolve(value)
+    }
+    return value
+  }
+
+  // getVendor 是 getChannel 的别名
+  getVendor(...args) {
+    return this.getChannel(...args)
+  }
+}

package/src/modules/AndroidDeviceModule.js

@@ -0,0 +1,341 @@
+// Web platform adapter for AndroidDeviceModule
+// Provides simulated device information for web browser environment
+
+/**
+ * @typedef {Object} ESDeviceInfo
+ * @property {string} cid - Device ID
+ * @property {string} device_name - Device name
+ * @property {string} device_ip - Device IP address
+ * @property {string} eth_mac - Ethernet MAC address
+ * @property {string} wifi_mac - WiFi MAC address
+ * @property {number} total_memory - Total memory in bytes
+ * @property {number} avail_memory - Available memory in bytes
+ * @property {number} screen_width - Screen width in pixels
+ * @property {number} screen_height - Screen height in pixels
+ * @property {string} resolution - Screen resolution string
+ * @property {number} density - Screen density
+ * @property {number} density_dpi - Screen density DPI
+ * @property {number} scaled_density - Scaled density
+ * @property {string} build_version_release - Android version
+ * @property {string} build_model - Device model
+ * @property {string} build_brand - Device brand
+ * @property {string} build_device - Device name
+ * @property {string} build_board - Board name
+ * @property {string} build_product - Product name
+ * @property {string} build_hardware - Hardware name
+ * @property {string} build_manufacturer - Manufacturer name
+ */
+
+const TV_WIDTH = 1920
+const TV_HEIGHT = 1080
+
+class AndroidDeviceModuleClass {
+  constructor() {
+    this.name = 'AndroidDeviceModule'
+  }
+
+  /**
+   * Get complete device information
+   * @returns {Promise<ESDeviceInfo>}
+   */
+  async getAndroidDevice() {
+    const screen = this._getScreenInfo()
+    return {
+      cid: this._generateDeviceId(),
+      device_name: 'Web Browser',
+      device_ip: await this._getLocalIP(),
+      eth_mac: '',
+      wifi_mac: this._generateMAC(),
+      total_memory: this._estimateTotalMemory(),
+      avail_memory: this._estimateAvailMemory(),
+      screen_width: screen.width,
+      screen_height: screen.height,
+      resolution: `${screen.width}x${screen.height}`,
+      density: screen.density,
+      density_dpi: screen.densityDpi,
+      scaled_density: screen.scaledDensity,
+      build_version_release: 'Web',
+      build_model: this._getBrowserInfo(),
+      build_brand: 'Web',
+      build_device: 'Browser',
+      build_board: 'Web',
+      build_product: 'quicktvui-web',
+      build_hardware: 'Web',
+      build_manufacturer: 'quicktvui',
+    }
+  }
+
+  /**
+   * Get Ethernet MAC address
+   * @returns {Promise<string>}
+   */
+  async getEthMac() {
+    return ''
+  }
+
+  /**
+   * Get WiFi MAC address
+   * @returns {Promise<string>}
+   */
+  async getWifiMac() {
+    return this._generateMAC()
+  }
+
+  /**
+   * Get total memory in bytes
+   * @returns {Promise<number>}
+   */
+  async getTotalMemory() {
+    return this._estimateTotalMemory()
+  }
+
+  /**
+   * Get available memory in bytes
+   * @returns {Promise<number>}
+   */
+  async getAvailableMemory() {
+    return this._estimateAvailMemory()
+  }
+
+  /**
+   * Get screen width
+   * @returns {Promise<number>}
+   */
+  async getScreenWidth() {
+    return this._getScreenInfo().width
+  }
+
+  /**
+   * Get screen height
+   * @returns {Promise<number>}
+   */
+  async getScreenHeight() {
+    return this._getScreenInfo().height
+  }
+
+  /**
+   * Get screen resolution string
+   * @returns {Promise<string>}
+   */
+  async getResolution() {
+    const screen = this._getScreenInfo()
+    return `${screen.width}x${screen.height}`
+  }
+
+  /**
+   * Get screen density
+   * @returns {Promise<number>}
+   */
+  async getDensity() {
+    return this._getScreenInfo().density
+  }
+
+  /**
+   * Get screen density DPI
+   * @returns {Promise<number>}
+   */
+  async getDensityDpi() {
+    return this._getScreenInfo().densityDpi
+  }
+
+  /**
+   * Get scaled density
+   * @returns {Promise<number>}
+   */
+  async getScaledDensity() {
+    return this._getScreenInfo().scaledDensity
+  }
+
+  /**
+   * Get Android version (simulated for web)
+   * @returns {Promise<string>}
+   */
+  async getBuildVersionRelease() {
+    return 'Web'
+  }
+
+  /**
+   * Get device model
+   * @returns {Promise<string>}
+   */
+  async getBuildModel() {
+    return this._getBrowserInfo()
+  }
+
+  /**
+   * Get device brand
+   * @returns {Promise<string>}
+   */
+  async getBuildBrand() {
+    return 'Web'
+  }
+
+  /**
+   * Get device name
+   * @returns {Promise<string>}
+   */
+  async getBuildDevice() {
+    return 'Browser'
+  }
+
+  /**
+   * Get board name
+   * @returns {Promise<string>}
+   */
+  async getBuildBoard() {
+    return 'Web'
+  }
+
+  /**
+   * Get product name
+   * @returns {Promise<string>}
+   */
+  async getBuildProduct() {
+    return 'quicktvui-web'
+  }
+
+  /**
+   * Get hardware name
+   * @returns {Promise<string>}
+   */
+  async getBuildHardware() {
+    return 'Web'
+  }
+
+  /**
+   * Get manufacturer name
+   * @returns {Promise<string>}
+   */
+  async getBuildManufacturer() {
+    return 'quicktvui'
+  }
+
+  // ============ Private helper methods ============
+
+  /**
+   * Get screen information
+   * @private
+   */
+  _getScreenInfo() {
+    if (typeof window === 'undefined') {
+      return {
+        width: TV_WIDTH,
+        height: TV_HEIGHT,
+        density: 1,
+        densityDpi: 160,
+        scaledDensity: 1,
+      }
+    }
+
+    const dpr = window.devicePixelRatio || 1
+    return {
+      width: TV_WIDTH,
+      height: TV_HEIGHT,
+      density: dpr,
+      densityDpi: Math.round(dpr * 160),
+      scaledDensity: dpr,
+    }
+  }
+
+  /**
+   * Generate a random device ID
+   * @private
+   */
+  _generateDeviceId() {
+    // Try to get from localStorage for persistence
+    if (typeof localStorage !== 'undefined') {
+      let cid = localStorage.getItem('__ES_DEVICE_ID__')
+      if (!cid) {
+        cid = 'web-' + Math.random().toString(36).substring(2, 15)
+        localStorage.setItem('__ES_DEVICE_ID__', cid)
+      }
+      return cid
+    }
+    return 'web-' + Math.random().toString(36).substring(2, 15)
+  }
+
+  /**
+   * Generate a fake MAC address
+   * @private
+   */
+  _generateMAC() {
+    const hexDigits = '0123456789ABCDEF'
+    let mac = ''
+    for (let i = 0; i < 6; i++) {
+      if (i > 0) mac += ':'
+      mac += hexDigits.charAt(Math.floor(Math.random() * 16))
+      mac += hexDigits.charAt(Math.floor(Math.random() * 16))
+    }
+    return mac
+  }
+
+  /**
+   * Get local IP (returns empty string as we can't detect it in browser)
+   * @private
+   */
+  async _getLocalIP() {
+    // WebRTC can sometimes detect local IP, but it's not reliable
+    // Return empty string for simplicity
+    return ''
+  }
+
+  /**
+   * Estimate total memory using Performance API
+   * @private
+   */
+  _estimateTotalMemory() {
+    if (typeof performance !== 'undefined' && performance.memory) {
+      return performance.memory.jsHeapSizeLimit || 1073741824 // 1GB default
+    }
+    return 1073741824 // 1GB default for web
+  }
+
+  /**
+   * Estimate available memory using Performance API
+   * @private
+   */
+  _estimateAvailMemory() {
+    if (typeof performance !== 'undefined' && performance.memory) {
+      const limit = performance.memory.jsHeapSizeLimit || 1073741824
+      const used = performance.memory.usedJSHeapSize || 0
+      return Math.max(0, limit - used)
+    }
+    return 536870912 // 512MB default
+  }
+
+  /**
+   * Get browser information
+   * @private
+   */
+  _getBrowserInfo() {
+    if (typeof navigator === 'undefined') {
+      return 'Unknown Browser'
+    }
+
+    const ua = navigator.userAgent
+    let browserName = 'Unknown Browser'
+
+    if (ua.indexOf('Firefox') > -1) {
+      browserName = 'Firefox'
+    } else if (ua.indexOf('Edg') > -1) {
+      browserName = 'Edge'
+    } else if (ua.indexOf('Chrome') > -1) {
+      browserName = 'Chrome'
+    } else if (ua.indexOf('Safari') > -1) {
+      browserName = 'Safari'
+    } else if (ua.indexOf('Opera') > -1 || ua.indexOf('OPR') > -1) {
+      browserName = 'Opera'
+    }
+
+    // Extract version
+    const match = ua.match(/(Firefox|Chrome|Safari|Edg|OPR)\/(\d+)/)
+    if (match) {
+      return `${match[1]} ${match[2]}`
+    }
+
+    return browserName
+  }
+}
+
+// Create singleton instance and export
+export const AndroidDeviceModule = new AndroidDeviceModuleClass()