@quicktvui/web-renderer 1.0.0

package/src/components/QtListView.js

@@ -0,0 +1,331 @@
+// QtListView - Adapter for Hippy's ListView with TV-specific features 标签对应ul标签
+import { QtBaseComponent } from './QtBaseComponent'
+import { registerComponent } from '../core/componentRegistry'
+
+export class QtListView extends QtBaseComponent {
+  constructor(context, id, pId) {
+    super(context, id, pId)
+    this.tagName = 'ListView'
+    this.dom = document.createElement('div')
+    this.dom.setAttribute('data-component-name', 'ListView')
+    registerComponent(id, this)
+
+    // TV-specific properties
+    this._horizontal = false
+    this._fadingEdgeLength = 0
+    this._horizontalFadingEdgeEnabled = false
+    this._verticalFadingEdgeEnabled = false
+    this._clipChildren = true
+
+    // Child items
+    this._children = []
+
+    // Gradient overlays for fading edge effect
+    this._startGradient = null
+    this._endGradient = null
+  }
+
+  defaultStyle() {
+    return {
+      display: 'flex',
+      flexDirection: this._horizontal ? 'row' : 'column',
+      flexShrink: 0,
+      boxSizing: 'border-box',
+      overflow: 'hidden',
+      position: 'relative',
+    }
+  }
+
+  updateProperty(key, value) {
+    switch (key) {
+      case 'horizontal':
+        this._horizontal = !!value
+        this._updateLayoutDirection()
+        break
+
+      case 'fadingEdgeLength':
+        this._fadingEdgeLength = value || 0
+        this._updateFadingEdge()
+        break
+
+      case 'horizontalFadingEdgeEnabled':
+        this._horizontalFadingEdgeEnabled = !!value
+        this._updateFadingEdge()
+        break
+
+      case 'verticalFadingEdgeEnabled':
+        this._verticalFadingEdgeEnabled = !!value
+        this._updateFadingEdge()
+        break
+
+      case 'clipChildren':
+        this._clipChildren = value !== false
+        this._updateClipChildren()
+        break
+
+      case 'scrollEnabled':
+        this._scrollEnabled = value !== false
+        this._updateScrollEnabled()
+        break
+
+      default:
+        if (typeof value === 'string' && value.startsWith('${')) {
+          this.dom.setAttribute(key, value)
+        }
+        super.updateProperty(key, value)
+    }
+  }
+
+  _updateLayoutDirection() {
+    if (!this.dom) return
+    this.dom.style.flexDirection = this._horizontal ? 'row' : 'column'
+    this._updateFadingEdge()
+  }
+
+  _updateClipChildren() {
+    if (!this.dom) return
+    this.dom.style.overflow = this._clipChildren ? 'hidden' : 'visible'
+  }
+
+  _updateScrollEnabled() {
+    if (!this.dom) return
+    this.dom.style.overflow = this._scrollEnabled ? 'auto' : 'hidden'
+  }
+
+  _updateFadingEdge() {
+    if (!this.dom) return
+
+    // Remove existing gradients
+    if (this._startGradient) {
+      this._startGradient.remove()
+      this._startGradient = null
+    }
+    if (this._endGradient) {
+      this._endGradient.remove()
+      this._endGradient = null
+    }
+
+    // Check if fading edge is enabled
+    const fadingEnabled = this._horizontal
+      ? this._horizontalFadingEdgeEnabled
+      : this._verticalFadingEdgeEnabled
+
+    if (!fadingEnabled || this._fadingEdgeLength <= 0) {
+      return
+    }
+
+    const length = this._fadingEdgeLength
+
+    // Create gradient overlays
+    if (this._horizontal) {
+      // Left gradient (start)
+      this._startGradient = document.createElement('div')
+      this._startGradient.style.cssText = `
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: ${length}px;
+        background: linear-gradient(to right, rgba(0,0,0,0.3), transparent);
+        pointer-events: none;
+        z-index: 10;
+      `
+      this.dom.appendChild(this._startGradient)
+
+      // Right gradient (end)
+      this._endGradient = document.createElement('div')
+      this._endGradient.style.cssText = `
+        position: absolute;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        width: ${length}px;
+        background: linear-gradient(to left, rgba(0,0,0,0.3), transparent);
+        pointer-events: none;
+        z-index: 10;
+      `
+      this.dom.appendChild(this._endGradient)
+    } else {
+      // Top gradient (start)
+      this._startGradient = document.createElement('div')
+      this._startGradient.style.cssText = `
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        height: ${length}px;
+        background: linear-gradient(to bottom, rgba(0,0,0,0.3), transparent);
+        pointer-events: none;
+        z-index: 10;
+      `
+      this.dom.appendChild(this._startGradient)
+
+      // Bottom gradient (end)
+      this._endGradient = document.createElement('div')
+      this._endGradient.style.cssText = `
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        height: ${length}px;
+        background: linear-gradient(to top, rgba(0,0,0,0.3), transparent);
+        pointer-events: none;
+        z-index: 10;
+      `
+      this.dom.appendChild(this._endGradient)
+    }
+  }
+
+  // Handle child components
+  insertChild(view, index) {
+    if (view && view.dom) {
+      // Insert before gradient overlays
+      if (this._endGradient) {
+        this.dom.insertBefore(view.dom, this._endGradient)
+      } else if (this._startGradient) {
+        this.dom.insertBefore(view.dom, this._startGradient)
+      } else {
+        this.dom.appendChild(view.dom)
+      }
+      this._children.push(view)
+    }
+  }
+
+  removeChild(view) {
+    if (view && view.dom && view.dom.parentNode === this.dom) {
+      this.dom.removeChild(view.dom)
+      const idx = this._children.indexOf(view)
+      if (idx > -1) {
+        this._children.splice(idx, 1)
+      }
+    }
+  }
+
+  // Scroll methods
+  scrollToIndex(index, animated = true) {
+    const child = this._children[index]
+    if (child && child.dom) {
+      child.dom.scrollIntoView({
+        behavior: animated ? 'smooth' : 'auto',
+        block: 'nearest',
+        inline: 'nearest',
+      })
+    }
+  }
+
+  scrollToPosition(position, offset = 0, animated = true) {
+    if (this._horizontal) {
+      this.dom.scrollTo({
+        left: position + offset,
+        behavior: animated ? 'smooth' : 'auto',
+      })
+    } else {
+      this.dom.scrollTo({
+        top: position + offset,
+        behavior: animated ? 'smooth' : 'auto',
+      })
+    }
+  }
+
+  // End batch - called by UIManagerModule after batch updates
+  endBatch() {
+    // No-op for now
+  }
+
+  destroy() {
+    if (this._startGradient) {
+      this._startGradient.remove()
+      this._startGradient = null
+    }
+    if (this._endGradient) {
+      this._endGradient.remove()
+      this._endGradient = null
+    }
+    this._children = []
+    super.destroy()
+  }
+}
+
+// QtListViewItem - Adapter for Hippy's ListViewItem，标签对应li标签
+export class QtListViewItem extends QtBaseComponent {
+  constructor(context, id, pId) {
+    super(context, id, pId)
+    this.tagName = 'ListViewItem'
+    this.dom = document.createElement('div')
+    this.dom.setAttribute('data-component-name', 'ListViewItem')
+    registerComponent(id, this)
+
+    // Height tracking for virtual list
+    this.height = 0
+    this.isDirty = false
+    this.dirtyListener = null
+  }
+
+  defaultStyle() {
+    return {
+      display: 'flex',
+      flexDirection: 'column',
+      flexShrink: 0,
+      boxSizing: 'border-box',
+    }
+  }
+
+  updateProperty(key, value) {
+    switch (key) {
+      case 'sticky':
+        this._sticky = !!value
+        this._updateSticky()
+        break
+
+      case 'type':
+        // Item type for recycling
+        this._type = value
+        break
+
+      default:
+        if (typeof value === 'string' && value.startsWith('${')) {
+          this.dom.setAttribute(key, value)
+        }
+        super.updateProperty(key, value)
+    }
+  }
+
+  _updateSticky() {
+    if (!this.dom) return
+    if (this._sticky) {
+      this.dom.style.position = 'sticky'
+      this.dom.style.top = '0'
+      this.dom.style.zIndex = '100'
+    } else {
+      this.dom.style.position = ''
+      this.dom.style.top = ''
+      this.dom.style.zIndex = ''
+    }
+  }
+
+  addDirtyListener(callback) {
+    this.dirtyListener = callback
+  }
+
+  getItemHeight() {
+    return this.dom?.clientHeight || 0
+  }
+
+  // End batch - called by UIManagerModule after batch updates
+  endBatch() {
+    // No-op for now
+  }
+
+  mounted() {
+    super.mounted()
+    // Update height after mount
+    requestAnimationFrame(() => {
+      this.height = this.getItemHeight()
+    })
+  }
+
+  destroy() {
+    this.dirtyListener = null
+    super.destroy()
+  }
+}

package/src/components/QtLoadingView.js

@@ -0,0 +1,55 @@
+// QtLoadingView component for web platform
+// Implements a loading spinner animation
+import { QtBaseComponent } from './QtBaseComponent'
+
+export class QtLoadingView extends QtBaseComponent {
+  constructor(context, id, pId) {
+    super(context, id, pId)
+    this.tagName = 'div'
+    this.dom = document.createElement('div')
+
+    // Create spinner element
+    this.spinner = document.createElement('div')
+    this.spinner.className = 'qt-loading-spinner'
+    this.dom.appendChild(this.spinner)
+
+    // Inject styles if not already present
+    this._injectStyles()
+  }
+
+  _injectStyles() {
+    const styleId = 'qt-loading-view-styles'
+    if (document.getElementById(styleId)) return
+
+    const style = document.createElement('style')
+    style.id = styleId
+    style.textContent = `
+      .qt-loading-spinner {
+        width: 100%;
+        height: 100%;
+        border: 5px solid rgba(200, 200, 200, 0.3);
+        border-top-color: #409eff;
+        border-radius: 50%;
+        animation: qt-loading-spin 0.8s linear infinite;
+        box-sizing: border-box;
+      }
+      @keyframes qt-loading-spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+    `
+    document.head.appendChild(style)
+  }
+
+  updateProperty(key, value) {
+    if (key === 'color') {
+      // Update spinner border color
+      if (value) {
+        this.spinner.style.borderTopColor = value
+      }
+    } else {
+      super.updateProperty(key, value)
+    }
+  }
+}

package/src/components/QtPageRootView.js

@@ -0,0 +1,19 @@
+import { QtView } from './QtView'
+
+export class QtPageRootView extends QtView {
+  static componentName = 'ESPageRootView'
+
+  constructor(context, id, pId) {
+    super(context, id, pId)
+    this.dom.setAttribute('data-component-name', 'ESPageRootView')
+    this._originalComponentName = 'ESPageRootView'
+  }
+
+  defaultStyle() {
+    const style = super.defaultStyle ? super.defaultStyle() : {}
+    return {
+      ...style,
+      backgroundColor: '#000000', // default black background for TV root
+    }
+  }
+}

package/src/components/QtPlayMark.js

@@ -0,0 +1,168 @@
+// QtPlayMark - A play mark animation view component
+import { QtBaseComponent } from './QtBaseComponent'
+import { registerComponent } from '../core/componentRegistry'
+
+/**
+ * QtPlayMark Component for web platform
+ * Shows a playing indicator with animation
+ */
+export class QtPlayMark extends QtBaseComponent {
+  constructor(context, id, pId) {
+    super(context, id, pId)
+    this.tagName = 'ESPlayMarkViewComponent'
+    this.dom = document.createElement('div')
+    this.dom.setAttribute('data-component-name', 'QtPlayMark')
+
+    this.dom.style.cssText = `
+      display: block;
+      position: relative;
+      box-sizing: border-box;
+      overflow: hidden;
+    `
+
+    // Props
+    this._markColor = '#FF4E46'
+    this._gap = 2
+    this._showType = 0 // 0: bars, 1: dots
+    this._roundCorner = 0
+    this._startColor = null
+    this._endColor = null
+    this._isSupportGradient = false
+    this._animationFrame = null
+    this._bars = []
+
+    // Create bars immediately
+    this._createBars()
+
+    registerComponent(id, this)
+  }
+
+  defaultStyle() {
+    return {
+      display: 'block',
+      position: 'relative',
+      boxSizing: 'border-box',
+      overflow: 'hidden',
+    }
+  }
+
+  _createBars() {
+    const barCount = 4
+    for (let i = 0; i < barCount; i++) {
+      const bar = document.createElement('div')
+      bar.className = 'play-mark-bar'
+      bar.style.cssText = `
+        position: absolute;
+        bottom: 0;
+        background-color: ${this._markColor};
+        border-radius: ${this._roundCorner}px;
+      `
+      this.dom.appendChild(bar)
+      this._bars.push(bar)
+    }
+    this._startAnimation()
+  }
+
+  updateProperty(key, value) {
+    switch (key) {
+      case 'markColor':
+      case 'markcolor':
+        this._markColor = value || '#FF4E46'
+        this._updateMarkColor()
+        break
+      case 'gap':
+        this._gap = value !== undefined ? Number(value) : 2
+        break
+      case 'showType':
+      case 'showtype':
+        this._showType = value !== undefined ? Number(value) : 0
+        break
+      case 'roundCorner':
+      case 'roundcorner':
+        this._roundCorner = value !== undefined ? Number(value) : 0
+        this._bars.forEach((bar) => {
+          bar.style.borderRadius = `${this._roundCorner}px`
+        })
+        break
+      case 'startColor':
+      case 'startcolor':
+        this._startColor = value
+        this._updateMarkColor()
+        break
+      case 'endColor':
+      case 'endcolor':
+        this._endColor = value
+        this._updateMarkColor()
+        break
+      case 'isSupportGradient':
+      case 'issupportgradient':
+        this._isSupportGradient = value === true || value === 'true'
+        this._updateMarkColor()
+        break
+      default:
+        super.updateProperty(key, value)
+    }
+  }
+
+  _getBarColor() {
+    if (this._isSupportGradient && this._startColor && this._endColor) {
+      return this._startColor
+    }
+    return this._markColor
+  }
+
+  _updateMarkColor() {
+    const color = this._getBarColor()
+    this._bars.forEach((bar) => {
+      bar.style.backgroundColor = color
+    })
+  }
+
+  _startAnimation() {
+    // 使用固定周期实现完美循环动画
+    const cycleDuration = 60 // 60帧一个完整周期
+    let frame = 0
+
+    const animate = () => {
+      const rect = this.dom.getBoundingClientRect()
+      const containerWidth = rect.width || 26
+      const containerHeight = rect.height || 30
+      const barCount = this._bars.length
+
+      // 计算 bar 宽度，确保不超出容器
+      const totalGap = this._gap * (barCount - 1)
+      const barWidth = Math.floor((containerWidth - totalGap) / barCount)
+
+      // 循环帧计数
+      frame = (frame + 1) % cycleDuration
+      const t = (frame / cycleDuration) * Math.PI * 2
+
+      this._bars.forEach((bar, i) => {
+        // 每条线有不同的相位偏移，形成波浪式音乐节奏效果
+        const phaseOffset = (i / barCount) * Math.PI * 2
+        const wave = Math.sin(t * 2 + phaseOffset)
+
+        // 高度范围：最小 20%，最大 95%
+        const heightRatio = 0.2 + (wave + 1) * 0.375
+        const barHeight = Math.max(4, containerHeight * heightRatio)
+
+        bar.style.width = `${barWidth}px`
+        bar.style.height = `${barHeight}px`
+        bar.style.left = `${i * (barWidth + this._gap)}px`
+      })
+
+      this._animationFrame = requestAnimationFrame(animate)
+    }
+
+    animate()
+  }
+
+  destroy() {
+    if (this._animationFrame) {
+      cancelAnimationFrame(this._animationFrame)
+      this._animationFrame = null
+    }
+    this._bars = []
+    super.destroy()
+  }
+}