@quicktvui/web-renderer 1.0.0

package/src/components/QtProgressBar.js

@@ -0,0 +1,199 @@
+import { QtBaseComponent } from './QtBaseComponent'
+
+window.__HIPPY_COMPONENT_REGISTRY__ = window.__HIPPY_COMPONENT_REGISTRY__ || new Map()
+
+/**
+ * QtProgressBar Component for web platform
+ */
+export class QtProgressBar extends QtBaseComponent {
+  constructor(context, id, pId) {
+    super(context, id, pId)
+    this.tagName = 'TVProgressBarViewComponent'
+    this.dom = document.createElement('div')
+    this.dom.style.display = 'block'
+    this.dom.style.position = 'relative'
+    this.dom.style.overflow = 'hidden'
+    window.__HIPPY_COMPONENT_REGISTRY__.set(this.dom, this)
+
+    this._maxProgress = 100
+    this._progress = 0
+    this._secondaryProgress = 0
+    this._cornerRadius = 0
+    this._backgroundColor = '#CCCCCC'
+    this._progressColor = '#FF0000'
+
+    this._bgEl = null
+    this._secondaryEl = null
+    this._progressEl = null
+
+    this._initDOM()
+  }
+
+  _initDOM() {
+    // Background layer
+    this._bgEl = document.createElement('div')
+    this._bgEl.style.position = 'absolute'
+    this._bgEl.style.top = '0'
+    this._bgEl.style.left = '0'
+    this._bgEl.style.width = '100%'
+    this._bgEl.style.height = '100%'
+    this._bgEl.style.boxSizing = 'border-box'
+    this.dom.appendChild(this._bgEl)
+
+    // Secondary progress layer
+    this._secondaryEl = document.createElement('div')
+    this._secondaryEl.style.position = 'absolute'
+    this._secondaryEl.style.top = '0'
+    this._secondaryEl.style.left = '0'
+    this._secondaryEl.style.height = '100%'
+    this._secondaryEl.style.boxSizing = 'border-box'
+    this.dom.appendChild(this._secondaryEl)
+
+    // Progress layer
+    this._progressEl = document.createElement('div')
+    this._progressEl.style.position = 'absolute'
+    this._progressEl.style.top = '0'
+    this._progressEl.style.left = '0'
+    this._progressEl.style.height = '100%'
+    this._progressEl.style.boxSizing = 'border-box'
+    this.dom.appendChild(this._progressEl)
+  }
+
+  _updateStyles() {
+    const radius = this._cornerRadius + 'px'
+
+    // Background
+    this._bgEl.style.backgroundColor = this._backgroundColor
+    this._bgEl.style.borderRadius = radius
+
+    // Secondary progress
+    const secondaryWidth = (this._secondaryProgress / this._maxProgress) * 100 + '%'
+    this._secondaryEl.style.width = secondaryWidth
+    this._secondaryEl.style.backgroundColor = this._parseColor(this._progressColor, 0.3)
+    this._secondaryEl.style.borderRadius = radius
+
+    // Progress
+    const progressWidth = (this._progress / this._maxProgress) * 100 + '%'
+    this._progressEl.style.width = progressWidth
+    this._applyProgressColor()
+    this._progressEl.style.borderRadius = radius
+  }
+
+  _parseColor(color, alpha) {
+    if (typeof color === 'string') {
+      // If it's a hex color
+      if (color.startsWith('#')) {
+        const hex = color.slice(1)
+        const r = parseInt(hex.substr(0, 2), 16)
+        const g = parseInt(hex.substr(2, 2), 16)
+        const b = parseInt(hex.substr(4, 2), 16)
+        return `rgba(${r}, ${g}, ${b}, ${alpha})`
+      }
+      return color
+    }
+    return color
+  }
+
+  _applyProgressColor() {
+    const color = this._progressColor
+
+    if (color && typeof color === 'object' && color.startColor && color.endColor) {
+      // Gradient color
+      const type = color.type || 0 // 0: linear, 1: radial
+      const shape = color.shape || 0 // 0: rectangle, 1: oval
+      const start = color.startColor
+      const end = color.endColor
+
+      if (type === 0) {
+        // Linear gradient - horizontal
+        this._progressEl.style.background = `linear-gradient(to right, ${start}, ${end})`
+      } else {
+        // Radial gradient
+        this._progressEl.style.background = `radial-gradient(circle, ${start}, ${end})`
+      }
+    } else if (typeof color === 'string') {
+      this._progressEl.style.backgroundColor = color
+    } else if (typeof color === 'number') {
+      // Convert int color to hex
+      const a = ((color >> 24) & 0xff) / 255
+      const r = (color >> 16) & 0xff
+      const g = (color >> 8) & 0xff
+      const b = color & 0xff
+      this._progressEl.style.backgroundColor = `rgba(${r}, ${g}, ${b}, ${a})`
+    }
+  }
+
+  updateProperty(key, value) {
+    switch (key) {
+      case 'maxProgress':
+      case 'max-progress':
+        this._maxProgress = value || 100
+        this._updateStyles()
+        break
+      case 'progress':
+        this._progress = value || 0
+        this._updateStyles()
+        break
+      case 'secondaryProgress':
+      case 'secondary-progress':
+        this._secondaryProgress = value || 0
+        this._updateStyles()
+        break
+      case 'cornerRadius':
+      case 'corner-radius':
+        this._cornerRadius = value || 0
+        this._updateStyles()
+        break
+      case 'backgroundColor':
+      case 'background-color':
+        this._backgroundColor = value || '#CCCCCC'
+        this._updateStyles()
+        break
+      case 'color':
+        this._progressColor = value
+        this._updateStyles()
+        break
+      default:
+        super.updateProperty(key, value)
+    }
+  }
+
+  // API methods called via callUIFunction
+  setMaxProgress(params) {
+    this._maxProgress = params[0] || 100
+    this._updateStyles()
+  }
+
+  setProgress(params) {
+    this._progress = params[0] || 0
+    this._updateStyles()
+  }
+
+  setSecondaryProgress(params) {
+    this._secondaryProgress = params[0] || 0
+    this._updateStyles()
+  }
+
+  setProgressColor(params) {
+    this._progressColor = params[0]
+    this._updateStyles()
+  }
+
+  setProgressDefaultColor(params) {
+    this._backgroundColor = params[0]
+    this._updateStyles()
+  }
+
+  init(props) {
+    super.init(props)
+
+    if (props.maxProgress !== undefined) this._maxProgress = props.maxProgress
+    if (props.progress !== undefined) this._progress = props.progress
+    if (props.secondaryProgress !== undefined) this._secondaryProgress = props.secondaryProgress
+    if (props.cornerRadius !== undefined) this._cornerRadius = props.cornerRadius
+    if (props.backgroundColor !== undefined) this._backgroundColor = props.backgroundColor
+    if (props.color !== undefined) this._progressColor = props.color
+
+    this._updateStyles()
+  }
+}

package/src/components/QtQRCode.js

@@ -0,0 +1,78 @@
+import { QtBaseComponent } from './QtBaseComponent'
+
+window.__HIPPY_COMPONENT_REGISTRY__ = window.__HIPPY_COMPONENT_REGISTRY__ || new Map()
+
+// Cache for qrcode library
+let QRCodeLib = null
+
+/**
+ * QtQRCode Component using qrcode library (web only)
+ */
+export class QtQRCode extends QtBaseComponent {
+  constructor(context, id, pId) {
+    super(context, id, pId)
+    this.tagName = 'QrCodeComponent'
+    this.dom = document.createElement('div')
+    this.dom.style.display = 'block'
+    window.__HIPPY_COMPONENT_REGISTRY__.set(this.dom, this)
+    this._content = ''
+  }
+
+  async _render() {
+    if (!this._content || !this.dom) return
+
+    // Lazy load qrcode library (web platform only)
+    if (!QRCodeLib) {
+      try {
+        QRCodeLib = await import('qrcode').then((m) => m.default || m)
+      } catch (e) {
+        console.error('[QtQRCode] Failed to load qrcode library:', e)
+        return
+      }
+    }
+
+    const rect = this.dom.getBoundingClientRect()
+    const size = Math.max(rect.width || 200, rect.height || 200)
+
+    QRCodeLib.toDataURL(
+      this._content,
+      {
+        width: size,
+        margin: 2,
+        color: {
+          dark: '#000000',
+          light: '#FFFFFF',
+        },
+      },
+      (err, url) => {
+        if (err) {
+          console.error('[QtQRCode] Error:', err)
+          return
+        }
+
+        this.dom.innerHTML = ''
+        const img = document.createElement('img')
+        img.src = url
+        img.style.width = '100%'
+        img.style.height = '100%'
+        img.style.display = 'block'
+        this.dom.appendChild(img)
+      }
+    )
+  }
+
+  updateProperty(key, value) {
+    if (key === 'content') {
+      this._content = value || ''
+      this._render()
+    } else {
+      super.updateProperty(key, value)
+    }
+  }
+
+  init(props) {
+    super.init(props)
+    this._content = props.content || ''
+    this._render()
+  }
+}

package/src/components/QtReplaceChild.js

@@ -0,0 +1,149 @@
+// QtReplaceChild - Web adapter for qt-replace-child
+// In native Android, this component marks a placeholder position for view replacement
+// On web platform, we simplify it as a container with SID support
+
+import { QtBaseComponent } from './QtBaseComponent'
+import {
+  registerComponent,
+  registerComponentBySid,
+  unregisterComponentBySid,
+} from '../core/componentRegistry'
+
+export class QtReplaceChild extends QtBaseComponent {
+  constructor(context, id, pId) {
+    super(context, id, pId)
+    this.tagName = 'QtReplaceChild'
+
+    // Create a div as placeholder container
+    this.dom = document.createElement('div')
+    this.dom.style.cssText = `
+      position: absolute;
+      width: 1920px;
+      height: 1080px;
+      background-color: transparent;
+    `
+
+    // State
+    this._markChildSID = ''
+    this._replaceOnVisibilityChanged = false
+    this._currentSid = null
+
+    // Register component
+    registerComponent(id, this)
+  }
+
+  /**
+   * Mark child SID - the target view that will be replaced into this position
+   * In native, this enables the replacement mechanism
+   * On web, we just store it for reference
+   */
+  setMarkChildSID(sid) {
+    this._markChildSID = sid
+    console.log('[QtReplaceChild] markChildSID set to:', sid)
+  }
+
+  /**
+   * Set child SID dynamically - triggers view replacement
+   * In native, this moves the target view to this placeholder
+   * On web, we can simulate by finding and cloning the target
+   */
+  setChildSID(sid) {
+    console.log('[QtReplaceChild] setChildSID:', sid)
+
+    if (!sid) return
+
+    // Find the target component by SID
+    const targetComponent = this._findComponentBySID(sid)
+
+    if (targetComponent && targetComponent.dom) {
+      console.log('[QtReplaceChild] Found target component, cloning to placeholder')
+
+      // Clear current content
+      this.dom.innerHTML = ''
+
+      // Clone the target DOM and append
+      const clonedDom = targetComponent.dom.cloneNode(true)
+      this.dom.appendChild(clonedDom)
+    } else {
+      console.log('[QtReplaceChild] Target component not found for SID:', sid)
+    }
+  }
+
+  /**
+   * Set replace on visibility changed
+   */
+  setReplaceOnVisibilityChanged(value) {
+    this._replaceOnVisibilityChanged = value
+  }
+
+  /**
+   * Handle property updates
+   */
+  updateProperty(key, value) {
+    // Handle sid (string id) property - register to sidRegistry
+    if (key === 'sid') {
+      // Unregister previous sid if exists
+      if (this._currentSid) {
+        unregisterComponentBySid(this._currentSid)
+      }
+
+      // Register new sid
+      this._currentSid = value
+      if (value) {
+        registerComponentBySid(value, this)
+        // Also set as DOM attribute for debugging
+        this.dom.setAttribute('sid', String(value))
+      } else {
+        this.dom.removeAttribute('sid')
+      }
+      return
+    }
+
+    switch (key) {
+      case 'markChildSID':
+      case 'markChildSid':
+        this.setMarkChildSID(value)
+        break
+      case 'replaceOnVisibilityChanged':
+        this.setReplaceOnVisibilityChanged(value)
+        break
+      default:
+        super.updateProperty(key, value)
+    }
+  }
+
+  /**
+   * Find component by SID from global registry
+   */
+  _findComponentBySID(sid) {
+    // Import findComponentBySid from componentRegistry
+    const { findComponentBySid } = require('../core/componentRegistry')
+
+    // First try using the official registry
+    const component = findComponentBySid(sid)
+    if (component) {
+      return component
+    }
+
+    // Fallback: Try to find from DOM by sid attribute
+    const domElement = document.querySelector(`[sid="${sid}"]`)
+    if (domElement) {
+      return { dom: domElement }
+    }
+
+    return null
+  }
+
+  // Called when component is unmounted - cleanup sid registration
+  beforeUnmount() {
+    if (this._currentSid) {
+      unregisterComponentBySid(this._currentSid)
+      this._currentSid = null
+    }
+  }
+
+  // Legacy destroy method
+  destroy() {
+    this.beforeUnmount?.()
+  }
+}

package/src/components/QtRippleView.js

@@ -0,0 +1,166 @@
+// QtRippleView - A ripple animation view component
+import { QtBaseComponent } from './QtBaseComponent'
+import { registerComponent } from '../core/componentRegistry'
+
+export class QtRippleView extends QtBaseComponent {
+  constructor(context, id, pId) {
+    super(context, id, pId)
+    this.tagName = 'RippleViewComponent'
+    this.dom = document.createElement('div')
+    this.dom.setAttribute('data-component-name', 'QtRippleView')
+
+    this.dom.style.cssText = `
+      display: block;
+      position: relative;
+      box-sizing: border-box;
+      overflow: hidden;
+    `
+
+    this._isShowRipple = false
+    this._rippleVisible = 'visible'
+    this._color = '#FF4E46'
+    this._animationFrame = null
+
+    registerComponent(id, this)
+  }
+
+  defaultStyle() {
+    return {
+      display: 'block',
+      position: 'relative',
+      boxSizing: 'border-box',
+      overflow: 'hidden',
+    }
+  }
+
+  updateProperty(key, value) {
+    switch (key) {
+      case 'isShowRipple':
+      case 'isshowripple':
+        this._isShowRipple = value === true || value === 'true'
+        this._updateRippleAnimation()
+        break
+      case 'rippleVisible':
+      case 'ripplevisible':
+        this._rippleVisible = value || 'visible'
+        this.dom.style.visibility = this._rippleVisible
+        break
+      case 'color':
+        this._color = value || '#FF4E46'
+        this._updateRippleColor()
+        break
+      case 'delayLoad':
+      case 'delayload':
+        if (value > 0) {
+          setTimeout(() => {
+            this._startRippleAnimation()
+          }, value)
+        } else {
+          this._startRippleAnimation()
+        }
+        break
+      default:
+        super.updateProperty(key, value)
+    }
+  }
+
+  _updateRippleAnimation() {
+    if (this._isShowRipple) {
+      this._startRippleAnimation()
+    } else {
+      this._stopRippleAnimation()
+    }
+  }
+
+  _updateRippleColor() {
+    const ripples = this.dom.querySelectorAll('.ripple-circle')
+    ripples.forEach((ripple) => {
+      ripple.style.backgroundColor = this._color
+    })
+  }
+
+  _startRippleAnimation() {
+    if (!this._isShowRipple) return
+
+    this._clearRipples()
+
+    const rect = this.dom.getBoundingClientRect()
+    const size = Math.max(rect.width, rect.height)
+    const centerX = rect.width / 2
+    const centerY = rect.height / 2
+
+    for (let i = 0; i < 3; i++) {
+      setTimeout(() => {
+        if (!this._isShowRipple) return
+        this._createRippleCircle(centerX, centerY, size, i)
+      }, i * 300)
+    }
+  }
+
+  _createRippleCircle(centerX, centerY, size, index) {
+    const ripple = document.createElement('div')
+    ripple.className = 'ripple-circle'
+    ripple.style.cssText = `
+      position: absolute;
+      left: ${centerX}px;
+      top: ${centerY}px;
+      width: 0;
+      height: 0;
+      border-radius: 50%;
+      background-color: ${this._color};
+      opacity: 0.6;
+      transform: translate(-50%, -50%);
+      pointer-events: none;
+    `
+    this.dom.appendChild(ripple)
+
+    let progress = 0
+    const maxProgress = size * 1.5
+    const duration = 1500 + index * 200
+
+    const animate = () => {
+      if (!this._isShowRipple) {
+        ripple.remove()
+        return
+      }
+
+      progress += (maxProgress / duration) * 16
+
+      if (progress < maxProgress) {
+        const opacity = 0.6 * (1 - progress / maxProgress)
+
+        ripple.style.width = `${progress}px`
+        ripple.style.height = `${progress}px`
+        ripple.style.opacity = opacity.toString()
+
+        this._animationFrame = requestAnimationFrame(animate)
+      } else {
+        ripple.style.width = '0'
+        ripple.style.height = '0'
+        ripple.style.opacity = '0.6'
+        progress = 0
+        this._animationFrame = requestAnimationFrame(animate)
+      }
+    }
+
+    animate()
+  }
+
+  _stopRippleAnimation() {
+    if (this._animationFrame) {
+      cancelAnimationFrame(this._animationFrame)
+      this._animationFrame = null
+    }
+    this._clearRipples()
+  }
+
+  _clearRipples() {
+    const ripples = this.dom.querySelectorAll('.ripple-circle')
+    ripples.forEach((ripple) => ripple.remove())
+  }
+
+  destroy() {
+    this._stopRippleAnimation()
+    super.destroy()
+  }
+}