@quicktvui/web-renderer 1.0.0

package/src/components/QtImage.js

@@ -0,0 +1,203 @@
+// QtImage component for image handling
+import { QtBaseComponent } from './QtBaseComponent'
+import { registerComponent } from '../core/componentRegistry'
+
+export class QtImage extends QtBaseComponent {
+  constructor(context, id, pId) {
+    super(context, id, pId)
+    this.tagName = 'img'
+    this.dom = document.createElement('img')
+
+    // Default values - 默认拉伸填满
+    this._resizeMode = 'fill'
+    this._currentSrc = ''
+
+    // Default styles for images - 默认拉伸填满
+    this.dom.style.objectFit = 'fill'
+    this.dom.style.display = 'block'
+
+    // Register for callUIFunction support
+    registerComponent(id, this)
+  }
+
+  // Handle src attribute via setter (called by HippyWebView.updateProperty)
+  set src(value) {
+    this._setSrc(value)
+  }
+
+  get src() {
+    return this.dom.src
+  }
+
+  // Handle source attribute (React Native style)
+  set source(value) {
+    this._setSrc(value)
+  }
+
+  // Handle resizeMode
+  set resizeMode(value) {
+    this._setResizeMode(value)
+  }
+
+  // Handle src attribute
+  updateProperty(key, value) {
+    switch (key) {
+      case 'src':
+      case 'source':
+        this._setSrc(value)
+        break
+      case 'resizeMode':
+        this._setResizeMode(value)
+        break
+      case 'tintColor':
+        this.dom.style.filter = `drop-shadow(0 0 0 ${value})`
+        break
+      default:
+        if (typeof value === 'string' && value.startsWith('${')) {
+          this.dom.setAttribute(key, value)
+        }
+        super.updateProperty(key, value)
+    }
+  }
+
+  _setSrc(value) {
+    console.log('[QtImage] _setSrc called with:', value, 'type:', typeof value)
+
+    if (!value) {
+      this.dom.src = ''
+      this.dom.style.backgroundImage = ''
+      return
+    }
+
+    // Handle different src formats
+    let srcValue = ''
+    if (typeof value === 'string') {
+      // Handle file:// protocol - convert to relative path
+      if (value.startsWith('file://')) {
+        let rest = value.slice(7)
+        rest = rest.replace(/^\/+/, '')
+        if (rest.startsWith('./')) rest = rest.slice(2)
+        srcValue = './' + rest
+      }
+      // Handle assets/ prefix - convert to relative path for web
+      else if (value.startsWith('assets/')) {
+        srcValue = './' + value
+      }
+      // Direct URL or path
+      else if (
+        value.startsWith('data:') ||
+        value.startsWith('http') ||
+        value.startsWith('/') ||
+        value.startsWith('.')
+      ) {
+        srcValue = value
+      } else {
+        // Assume it's a URL
+        srcValue = value
+      }
+    } else if (typeof value === 'object') {
+      // Handle {uri: '...'} format (React Native style)
+      if (value.uri) {
+        srcValue = value.uri
+        // Handle file:// protocol in uri
+        if (srcValue.startsWith('file://')) {
+          let rest = srcValue.slice(7)
+          rest = rest.replace(/^\/+/, '')
+          if (rest.startsWith('./')) rest = rest.slice(2)
+          srcValue = './' + rest
+        }
+        // Handle assets/ prefix in uri
+        else if (srcValue.startsWith('assets/')) {
+          srcValue = './' + srcValue
+        }
+      }
+    }
+
+    // Store for later use (e.g., repeat mode)
+    this._currentSrc = srcValue
+
+    // Handle repeat mode specially - use background image
+    if (this._resizeMode === 'repeat') {
+      this.dom.style.backgroundImage = `url(${srcValue})`
+      this.dom.src =
+        'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' // 透明占位
+    } else {
+      this.dom.src = srcValue
+      this.dom.style.backgroundImage = ''
+    }
+
+    console.log('[QtImage] Set dom.src to:', this.dom.src)
+  }
+
+  _setResizeMode(value) {
+    // Store current resizeMode for reference in _setSrc
+    this._resizeMode = value
+
+    // Map resizeMode to CSS object-fit and related styles
+    // QTImageResizeMode enum values:
+    // - QT_IMAGE_RESIZE_MODE_CONTAIN = "contain"
+    // - QT_IMAGE_RESIZE_MODE_COVER = "cover"
+    // - QT_IMAGE_RESIZE_MODE_CENTER = "center"
+    // - QT_IMAGE_RESIZE_MODE_ORIGIN = "origin"
+    // - QT_IMAGE_RESIZE_MODE_FIT_XY = "fitxy"
+
+    // Reset position styles
+    this.dom.style.objectFit = ''
+    this.dom.style.objectPosition = ''
+    this.dom.style.backgroundSize = ''
+    this.dom.style.backgroundPosition = ''
+    this.dom.style.backgroundRepeat = ''
+
+    switch (value) {
+      case 'contain':
+        // 保持宽高比缩放，完整显示图片
+        this.dom.style.objectFit = 'contain'
+        break
+
+      case 'cover':
+        // 保持宽高比缩放，填满容器（可能裁剪）
+        this.dom.style.objectFit = 'cover'
+        break
+
+      case 'center':
+        // 居中显示，等比缩小适应容器（类似 contain，确保居中）
+        // Android 行为：如果图片大于容器则等比缩小，小于容器则原样居中
+        this.dom.style.objectFit = 'contain'
+        this.dom.style.objectPosition = 'center center'
+        break
+
+      case 'origin':
+        // 原始大小显示，从左上角开始
+        this.dom.style.objectFit = 'none'
+        this.dom.style.objectPosition = 'left top'
+        break
+
+      case 'fitxy':
+        // 拉伸填满容器，不保持宽高比
+        this.dom.style.objectFit = 'fill'
+        break
+
+      case 'stretch':
+        // 同 fitxy，拉伸填满
+        this.dom.style.objectFit = 'fill'
+        break
+
+      case 'repeat':
+        // 平铺重复 - 使用 CSS background 方式实现
+        if (this._currentSrc) {
+          this.dom.style.backgroundImage = `url(${this._currentSrc})`
+          this.dom.src =
+            'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' // 透明占位
+        }
+        this.dom.style.objectFit = 'none'
+        this.dom.style.backgroundSize = 'auto'
+        this.dom.style.backgroundPosition = 'left top'
+        this.dom.style.backgroundRepeat = 'repeat'
+        break
+
+      default:
+        // 默认使用 cover
+        this.dom.style.objectFit = 'cover'
+    }
+  }
+}

package/src/components/QtItemFrame.js

@@ -0,0 +1,239 @@
+// QtItemFrame - A simple container component for item-frame
+// Acts as a div wrapper, preserving all child elements
+import { QtBaseComponent } from './QtBaseComponent'
+import { registerComponent } from '../core/componentRegistry'
+
+export class QtItemFrame extends QtBaseComponent {
+  constructor(context, id, pId) {
+    super(context, id, pId)
+    this.tagName = 'ItemFrameComponent'
+    this.dom = document.createElement('div')
+    this.dom.setAttribute('data-component-name', 'QtItemFrame')
+
+    this.dom.style.display = 'block'
+    this.dom.style.position = 'relative'
+    this.dom.style.boxSizing = 'border-box'
+
+    registerComponent(id, this)
+  }
+
+  defaultStyle() {
+    return {
+      display: 'block',
+      position: 'relative',
+      boxSizing: 'border-box',
+    }
+  }
+
+  // Handle property updates from Hippy renderer
+  updateProperty(key, value) {
+    // Handle focusable property - enable keyboard focus
+    if (key === 'focusable') {
+      if (value === true || value === 'true') {
+        this.dom.setAttribute('tabindex', '0')
+        this.dom.setAttribute('focusable', 'true')
+        this._focusable = true
+      } else {
+        this.dom.removeAttribute('tabindex')
+        this.dom.setAttribute('focusable', 'false')
+        this._focusable = false
+      }
+      return
+    }
+
+    // Handle focusScale property - store for focus animation
+    if (key === 'focusScale' || key === 'focusscale') {
+      this._focusScale = typeof value === 'number' ? value : parseFloat(value) || 1.1
+      this.dom.setAttribute('data-focus-scale', String(this._focusScale))
+      if (!this._focusListenerAdded) {
+        this._setupFocusAnimation()
+      }
+      return
+    }
+
+    // Handle itemShowShimmer property
+    if (key === 'itemShowShimmer' || key === 'itemshowshimmer') {
+      this.dom.setAttribute('data-show-shimmer', String(value))
+      return
+    }
+
+    // Handle hideShadow property
+    if (key === 'hideShadow' || key === 'hideshadow') {
+      this.dom.setAttribute('data-hide-shadow', String(value))
+      return
+    }
+
+    // Handle shimmerSize property
+    if (key === 'shimmerSize' || key === 'shimmersize') {
+      this.dom.setAttribute('data-shimmer-size', String(value))
+      return
+    }
+
+    if (key === 'flexStyle' || key === 'flexstyle') {
+      if (typeof value === 'object' && value !== null) {
+        this._applyFlexStyle(value)
+      } else if (typeof value === 'string' && value.startsWith('${')) {
+        this.dom.setAttribute(key, value)
+      }
+      return
+    }
+
+    if (key === 'layout') {
+      if (typeof value === 'string' && value.startsWith('${')) {
+        this.dom.setAttribute(key, value)
+      } else {
+        this._applyLayout(value)
+      }
+      return
+    }
+
+    if (typeof value === 'string' && value.startsWith('${')) {
+      this.dom.setAttribute(key, value)
+    }
+    super.updateProperty(key, value)
+  }
+
+  // Setup focus animation for scale effect
+  _setupFocusAnimation() {
+    this._focusListenerAdded = true
+    this.dom.addEventListener('focus', () => {
+      if (this._focusScale && this._focusScale !== 1) {
+        this.dom.style.transform = `scale(${this._focusScale})`
+        this.dom.style.transition = 'transform 0.2s ease-out'
+        this.dom.style.zIndex = '10'
+      }
+    })
+    this.dom.addEventListener('blur', () => {
+      this.dom.style.transform = 'scale(1)'
+      this.dom.style.zIndex = ''
+    })
+  }
+
+  // Support flexStyle attribute
+  set flexStyle(styleObj) {
+    this.props.flexStyle = styleObj
+    this._applyFlexStyle(styleObj)
+  }
+
+  get flexStyle() {
+    return this.props.flexStyle
+  }
+
+  // Apply flexStyle object to DOM
+  _applyFlexStyle(styleObj) {
+    if (!styleObj || typeof styleObj !== 'object') return
+
+    Object.keys(styleObj).forEach((key) => {
+      let value = styleObj[key]
+
+      if (typeof value === 'number') {
+        const needsPx = [
+          'width',
+          'height',
+          'minWidth',
+          'minHeight',
+          'maxWidth',
+          'maxHeight',
+          'padding',
+          'paddingTop',
+          'paddingRight',
+          'paddingBottom',
+          'paddingLeft',
+          'margin',
+          'marginTop',
+          'marginRight',
+          'marginBottom',
+          'marginLeft',
+          'top',
+          'left',
+          'right',
+          'bottom',
+          'borderRadius',
+          'borderWidth',
+          'fontSize',
+          'lineHeight',
+          'letterSpacing',
+          'gap',
+          'rowGap',
+          'columnGap',
+        ].includes(key)
+
+        if (needsPx) {
+          value = value + 'px'
+        }
+      }
+
+      try {
+        if (key !== 'x' && key !== 'y') {
+          this.dom.style[key] = value
+        }
+      } catch (e) {
+        try {
+          if (key !== 'x' && key !== 'y') {
+            const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase()
+            this.dom.style.setProperty(cssKey, value)
+          }
+        } catch (err) {}
+      }
+    })
+  }
+
+  // Apply layout object/array to DOM
+  _applyLayout(layout) {
+    if (!layout) return
+
+    if (Array.isArray(layout)) {
+      const x = layout[0]
+      const y = layout[1]
+      const width = layout[2]
+      const height = layout[3]
+
+      if (x !== undefined && x !== null) {
+        this.dom.style.left = typeof x === 'number' ? `${x}px` : x
+      }
+      if (y !== undefined && y !== null) {
+        this.dom.style.top = typeof y === 'number' ? `${y}px` : y
+      }
+      if (width !== undefined && width !== null) {
+        this.dom.style.width = typeof width === 'number' ? `${width}px` : width
+      }
+      if (height !== undefined && height !== null) {
+        this.dom.style.height = typeof height === 'number' ? `${height}px` : height
+      }
+
+      if ((x !== undefined || y !== undefined) && !this.dom.style.position) {
+        this.dom.style.position = 'absolute'
+      }
+      // If position is relative (default for QtItemFrame), change to absolute if x/y are provided
+      if ((x !== undefined || y !== undefined) && this.dom.style.position === 'relative') {
+        this.dom.style.position = 'absolute'
+      }
+
+      return
+    }
+
+    if (typeof layout === 'object') {
+      const { x, y, width, height } = layout
+
+      if (x !== undefined && x !== null) {
+        this.dom.style.left = typeof x === 'number' ? `${x}px` : x
+      }
+      if (y !== undefined && y !== null) {
+        this.dom.style.top = typeof y === 'number' ? `${y}px` : y
+      }
+      if (width !== undefined && width !== null) {
+        this.dom.style.width = typeof width === 'number' ? `${width}px` : width
+      }
+      if (height !== undefined && height !== null) {
+        this.dom.style.height = typeof height === 'number' ? `${height}px` : height
+      }
+
+      if ((x !== undefined || y !== undefined) && !this.dom.style.position) {
+        this.dom.style.position = 'absolute'
+      }
+      if ((x !== undefined || y !== undefined) && this.dom.style.position === 'relative') {
+        this.dom.style.position = 'absolute'
+      }
+    }
+  }
+}

package/src/components/QtItemStoreView.js

@@ -0,0 +1,93 @@
+// QtItemStoreView - A container component for shared item templates
+// Used in waterfall to provide shared item templates across sections
+import { QtBaseComponent } from './QtBaseComponent'
+import { registerComponent } from '../core/componentRegistry'
+
+function _qtGetSharedTemplateStore() {
+  const w = window
+  if (!w.__QT_SHARED_TEMPLATES__) {
+    w.__QT_SHARED_TEMPLATES__ = new Map()
+  }
+  return w.__QT_SHARED_TEMPLATES__
+}
+
+export class QtItemStoreView extends QtBaseComponent {
+  constructor(context, id, pId) {
+    super(context, id, pId)
+    this.tagName = 'ItemStoreView'
+    this.dom = document.createElement('div')
+    this.dom.setAttribute('data-component-name', 'QtItemStoreView')
+
+    this.dom.style.display = 'none' // Item store templates are hidden by default
+    this.dom.style.position = 'relative'
+    this.dom.style.boxSizing = 'border-box'
+
+    this._templateChildren = []
+
+    registerComponent(id, this)
+  }
+
+  defaultStyle() {
+    return {
+      display: 'none',
+      position: 'relative',
+      boxSizing: 'border-box',
+    }
+  }
+
+  // Get all template children for this item store
+  getTemplateChildren() {
+    return this._templateChildren
+  }
+
+  // Add a template child
+  addTemplateChild(template) {
+    if (template && template.dom && !this._templateChildren.some((t) => t.dom === template.dom)) {
+      // Extract type from the template
+      let type = null
+      if (template.props && template.props.type !== undefined) {
+        type = template.props.type
+      } else if (template.dom.hasAttribute('type')) {
+        const typeAttr = template.dom.getAttribute('type')
+        type = typeAttr !== null ? (isNaN(Number(typeAttr)) ? typeAttr : Number(typeAttr)) : null
+      }
+
+      this._templateChildren.push({
+        dom: template.dom,
+        tagName: template.tagName,
+        component: template,
+        type: type,
+      })
+
+      if (type !== null && type !== undefined) {
+        const store = _qtGetSharedTemplateStore()
+        store.set(type, {
+          dom: template.dom,
+          tagName: template.tagName,
+          component: template,
+          type,
+        })
+      }
+
+      template.dom.setAttribute('data-template', 'true')
+      template.dom.setAttribute('data-shared-template', 'true')
+      template.dom.style.display = 'none'
+    }
+  }
+
+  // Handle child mount - collect templates
+  async beforeChildMount(child, childPosition) {
+    if (child && child.dom) {
+      this.addTemplateChild(child)
+    }
+    await super.beforeChildMount(child, childPosition)
+  }
+
+  // Handle property updates from Hippy renderer
+  updateProperty(key, value) {
+    if (typeof value === 'string' && value.startsWith('${')) {
+      this.dom.setAttribute(key, value)
+    }
+    super.updateProperty(key, value)
+  }
+}

package/src/components/QtItemView.js

@@ -0,0 +1,125 @@
+// QtItemView - An item view container for waterfall sections
+// Used by tv-item and FastItemView components
+import { QtBaseComponent } from './QtBaseComponent'
+import { registerComponent } from '../core/componentRegistry'
+
+export class QtItemView extends QtBaseComponent {
+  constructor(context, id, pId) {
+    super(context, id, pId)
+    this.tagName = 'FastItemView'
+    this.dom = document.createElement('div')
+    this.dom.setAttribute('data-component-name', 'QtItemView')
+
+    this.dom.style.cssText = `
+      display: block;
+      position: relative;
+      box-sizing: border-box;
+    `
+
+    this.props = {}
+
+    registerComponent(id, this)
+  }
+
+  defaultStyle() {
+    return {
+      display: 'block',
+      position: 'relative',
+      boxSizing: 'border-box',
+    }
+  }
+
+  // Handle child elements (slot content)
+  insertChild(child, index) {
+    if (child && child.dom && !this.dom.contains(child.dom)) {
+      this.dom.appendChild(child.dom)
+    }
+  }
+
+  // Handle child elements before mount
+  async beforeChildMount(child, childPosition) {
+    if (child && child.dom && !this.dom.contains(child.dom)) {
+      this.dom.appendChild(child.dom)
+    }
+    await super.beforeChildMount(child, childPosition)
+  }
+
+  updateProperty(key, value) {
+    switch (key) {
+      case 'singleton':
+        // Store singleton flag for QtFastListView to detect
+        this.props = this.props || {}
+        this.props.singleton = true
+        this.dom.setAttribute('singleton', 'true')
+        break
+      case 'type':
+        // Store type for singleton templates to match with data
+        this.props = this.props || {}
+        this.props.type = value
+        this.dom.setAttribute('type', value)
+        break
+      case 'flexStyle':
+      case 'flexstyle':
+        if (typeof value === 'object' && value !== null) {
+          this._applyFlexStyle(value)
+        }
+        break
+      default:
+        super.updateProperty(key, value)
+    }
+  }
+
+  _applyFlexStyle(styleObj) {
+    if (!styleObj || typeof styleObj !== 'object') return
+
+    Object.keys(styleObj).forEach((key) => {
+      let value = styleObj[key]
+
+      if (typeof value === 'number') {
+        const needsPx = [
+          'width',
+          'height',
+          'minWidth',
+          'minHeight',
+          'maxWidth',
+          'maxHeight',
+          'padding',
+          'paddingTop',
+          'paddingRight',
+          'paddingBottom',
+          'paddingLeft',
+          'margin',
+          'marginTop',
+          'marginRight',
+          'marginBottom',
+          'marginLeft',
+          'top',
+          'left',
+          'right',
+          'bottom',
+          'borderRadius',
+          'borderWidth',
+          'fontSize',
+          'lineHeight',
+          'letterSpacing',
+          'gap',
+          'rowGap',
+          'columnGap',
+        ].includes(key)
+
+        if (needsPx) {
+          value = value + 'px'
+        }
+      }
+
+      try {
+        this.dom.style[key] = value
+      } catch (e) {
+        try {
+          const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase()
+          this.dom.style.setProperty(cssKey, value)
+        } catch (err) {}
+      }
+    })
+  }
+}