@quicktvui/web-renderer 1.0.0

package/src/components/QtSeekBar.js

@@ -0,0 +1,409 @@
+import { QtBaseComponent } from './QtBaseComponent'
+
+window.__HIPPY_COMPONENT_REGISTRY__ = window.__HIPPY_COMPONENT_REGISTRY__ || new Map()
+
+/**
+ * QtSeekBar Component for web platform
+ * Supports single and range seek bar with draggable thumb
+ */
+export class QtSeekBar extends QtBaseComponent {
+  constructor(context, id, pId) {
+    super(context, id, pId)
+    this.tagName = 'TVSeekBarViewComponent'
+    this.dom = document.createElement('div')
+    this.dom.style.display = 'block'
+    this.dom.style.position = 'relative'
+    this.dom.style.cursor = 'pointer'
+    window.__HIPPY_COMPONENT_REGISTRY__.set(this.dom, this)
+
+    // Properties
+    this._progress = 0
+    this._maxProgress = 100
+    this._minProgress = 0
+    this._progressHeight = 10
+    this._progressRadius = 5
+    this._progressColor = '#FF0000'
+    this._progressDefaultColor = '#CCCCCC'
+    this._seekBarMode = 0 // 0: single, 1: range
+    this._gravity = 1 // 0: top, 1: center, 2: bottom
+
+    // Range mode
+    this._leftProgress = 0
+    this._rightProgress = 100
+
+    // Thumb
+    this._thumbWidth = 30
+    this._thumbHeight = 30
+    this._thumbColor = '#FFFFFF'
+
+    // DOM elements
+    this._trackEl = null
+    this._progressEl = null
+    this._thumbEl = null
+    this._leftThumbEl = null
+    this._rightThumbEl = null
+
+    // State
+    this._isDragging = false
+    this._draggingThumb = null // 'main', 'left', 'right'
+
+    this._initDOM()
+    this._bindEvents()
+  }
+
+  _initDOM() {
+    // Track (background) - pointer-events: none to allow click to pass through
+    this._trackEl = document.createElement('div')
+    this._trackEl.style.position = 'absolute'
+    this._trackEl.style.left = '0'
+    this._trackEl.style.width = '100%'
+    this._trackEl.style.boxSizing = 'border-box'
+    this._trackEl.style.pointerEvents = 'none'
+    this.dom.appendChild(this._trackEl)
+
+    // Progress
+    this._progressEl = document.createElement('div')
+    this._progressEl.style.position = 'absolute'
+    this._progressEl.style.left = '0'
+    this._progressEl.style.boxSizing = 'border-box'
+    this._progressEl.style.pointerEvents = 'none'
+    this.dom.appendChild(this._progressEl)
+
+    // Main thumb (single mode)
+    this._thumbEl = document.createElement('div')
+    this._thumbEl.style.position = 'absolute'
+    this._thumbEl.style.boxSizing = 'border-box'
+    this._thumbEl.style.borderRadius = '50%'
+    this._thumbEl.style.display = 'none'
+    this._thumbEl.style.zIndex = '10'
+    this._thumbEl.style.pointerEvents = 'none'
+    this.dom.appendChild(this._thumbEl)
+
+    // Left thumb (range mode)
+    this._leftThumbEl = document.createElement('div')
+    this._leftThumbEl.style.position = 'absolute'
+    this._leftThumbEl.style.boxSizing = 'border-box'
+    this._leftThumbEl.style.borderRadius = '50%'
+    this._leftThumbEl.style.display = 'none'
+    this._leftThumbEl.style.zIndex = '10'
+    this._leftThumbEl.style.pointerEvents = 'none'
+    this.dom.appendChild(this._leftThumbEl)
+
+    // Right thumb (range mode)
+    this._rightThumbEl = document.createElement('div')
+    this._rightThumbEl.style.position = 'absolute'
+    this._rightThumbEl.style.boxSizing = 'border-box'
+    this._rightThumbEl.style.borderRadius = '50%'
+    this._rightThumbEl.style.display = 'none'
+    this._rightThumbEl.style.zIndex = '10'
+    this._rightThumbEl.style.pointerEvents = 'none'
+    this.dom.appendChild(this._rightThumbEl)
+  }
+
+  _bindEvents() {
+    const onPointerDown = (e) => {
+      this._isDragging = true
+      this._handlePointerEvent(e)
+      document.addEventListener('pointermove', onPointerMove)
+      document.addEventListener('pointerup', onPointerUp)
+    }
+
+    const onPointerMove = (e) => {
+      if (this._isDragging) {
+        this._handlePointerEvent(e)
+      }
+    }
+
+    const onPointerUp = () => {
+      this._isDragging = false
+      this._draggingThumb = null
+      document.removeEventListener('pointermove', onPointerMove)
+      document.removeEventListener('pointerup', onPointerUp)
+    }
+
+    this.dom.addEventListener('pointerdown', onPointerDown)
+  }
+
+  _handlePointerEvent(e) {
+    const rect = this.dom.getBoundingClientRect()
+    const x = e.clientX - rect.left
+    const percentage = Math.max(0, Math.min(1, x / rect.width))
+
+    if (this._seekBarMode === 1) {
+      // Range mode - determine which thumb to move
+      const leftPercent = this._leftProgress / this._maxProgress
+      const rightPercent = this._rightProgress / this._maxProgress
+
+      if (!this._draggingThumb) {
+        const distToLeft = Math.abs(percentage - leftPercent)
+        const distToRight = Math.abs(percentage - rightPercent)
+        this._draggingThumb = distToLeft < distToRight ? 'left' : 'right'
+      }
+
+      if (this._draggingThumb === 'left') {
+        this._leftProgress = Math.min(percentage * this._maxProgress, this._rightProgress - 1)
+      } else {
+        this._rightProgress = Math.max(percentage * this._maxProgress, this._leftProgress + 1)
+      }
+    } else {
+      // Single mode
+      this._progress = percentage * this._maxProgress
+    }
+
+    this._updateStyles()
+    this._dispatchChangeEvent()
+  }
+
+  _dispatchChangeEvent() {
+    const event = new CustomEvent('onSeekBarChange', {
+      detail: {
+        progress: this._progress,
+        leftProgress: this._leftProgress,
+        rightProgress: this._rightProgress,
+        fromUser: true,
+      },
+    })
+    this.dom.dispatchEvent(event)
+  }
+
+  _updateStyles() {
+    if (!this._trackEl || !this._progressEl) {
+      console.warn('[QtSeekBar] _updateStyles called before DOM elements ready')
+      return
+    }
+
+    const height = this._progressHeight
+    const radius = this._progressRadius + 'px'
+    const rect = this.dom.getBoundingClientRect()
+    const containerHeight = rect.height || 200
+    console.log(
+      '[QtSeekBar] _updateStyles - containerHeight:',
+      containerHeight,
+      'rect:',
+      rect.width,
+      'x',
+      rect.height
+    )
+
+    // Calculate vertical position based on gravity
+    let top
+    if (this._gravity === 0) {
+      top = 0
+    } else if (this._gravity === 2) {
+      top = containerHeight - height
+    } else {
+      top = (containerHeight - height) / 2
+    }
+
+    // Track
+    this._trackEl.style.top = top + 'px'
+    this._trackEl.style.height = height + 'px'
+    this._trackEl.style.borderRadius = radius
+    this._trackEl.style.backgroundColor = this._progressDefaultColor
+
+    // Progress
+    this._progressEl.style.top = top + 'px'
+    this._progressEl.style.height = height + 'px'
+    this._progressEl.style.borderRadius = radius
+    this._progressEl.style.backgroundColor = this._progressColor
+
+    if (this._seekBarMode === 1) {
+      // Range mode
+      const leftPercent = (this._leftProgress / this._maxProgress) * 100
+      const rightPercent = (this._rightProgress / this._maxProgress) * 100
+      console.log(
+        '[QtSeekBar] _updateStyles RANGE mode - leftPercent:',
+        leftPercent,
+        'rightPercent:',
+        rightPercent
+      )
+
+      this._progressEl.style.left = leftPercent + '%'
+      this._progressEl.style.width = rightPercent - leftPercent + '%'
+
+      // Hide main thumb
+      this._thumbEl.style.display = 'none'
+
+      // Left thumb
+      this._leftThumbEl.style.display = 'block'
+      this._leftThumbEl.style.width = this._thumbWidth + 'px'
+      this._leftThumbEl.style.height = this._thumbHeight + 'px'
+      this._leftThumbEl.style.backgroundColor = this._thumbColor
+      this._leftThumbEl.style.left = `calc(${leftPercent}% - ${this._thumbWidth / 2}px)`
+      this._leftThumbEl.style.top = top + height / 2 - this._thumbHeight / 2 + 'px'
+
+      // Right thumb
+      this._rightThumbEl.style.display = 'block'
+      this._rightThumbEl.style.width = this._thumbWidth + 'px'
+      this._rightThumbEl.style.height = this._thumbHeight + 'px'
+      this._rightThumbEl.style.backgroundColor = this._thumbColor
+      this._rightThumbEl.style.left = `calc(${rightPercent}% - ${this._thumbWidth / 2}px)`
+      this._rightThumbEl.style.top = top + height / 2 - this._thumbHeight / 2 + 'px'
+    } else {
+      // Single mode
+      const percent = Math.min(100, (this._progress / this._maxProgress) * 100)
+      console.log(
+        '[QtSeekBar] _updateStyles - progress:',
+        this._progress,
+        'maxProgress:',
+        this._maxProgress,
+        'percent:',
+        percent
+      )
+
+      this._progressEl.style.left = '0'
+      this._progressEl.style.width = percent + '%'
+
+      // Show main thumb
+      this._thumbEl.style.display = 'block'
+      this._thumbEl.style.width = this._thumbWidth + 'px'
+      this._thumbEl.style.height = this._thumbHeight + 'px'
+      this._thumbEl.style.backgroundColor = this._thumbColor
+      this._thumbEl.style.left = `calc(${percent}% - ${this._thumbWidth / 2}px)`
+      this._thumbEl.style.top = top + height / 2 - this._thumbHeight / 2 + 'px'
+
+      // Hide range thumbs
+      this._leftThumbEl.style.display = 'none'
+      this._rightThumbEl.style.display = 'none'
+    }
+  }
+
+  updateProperty(key, value) {
+    switch (key) {
+      case 'progress':
+        this._progress = value || 0
+        this._updateStyles()
+        break
+      case 'maxProgress':
+      case 'max-progress':
+        this._maxProgress = value || 100
+        this._updateStyles()
+        break
+      case 'progressHeight':
+      case 'progress-height':
+        this._progressHeight = value || 10
+        this._updateStyles()
+        break
+      case 'progressRadius':
+      case 'progress-radius':
+        this._progressRadius = value || 5
+        this._updateStyles()
+        break
+      case 'progressColor':
+      case 'progress-color':
+        this._progressColor = value || '#FF0000'
+        this._updateStyles()
+        break
+      case 'progressDefaultColor':
+      case 'progress-default-color':
+        this._progressDefaultColor = value || '#CCCCCC'
+        this._updateStyles()
+        break
+      case 'seekBarMode':
+      case 'seek-bar-mode':
+        this._seekBarMode = value || 0
+        this._updateStyles()
+        break
+      case 'gravity':
+        this._gravity = value || 1
+        this._updateStyles()
+        break
+      case 'thumbWidth':
+      case 'thumb-width':
+        this._thumbWidth = value || 30
+        this._updateStyles()
+        break
+      case 'thumbHeight':
+      case 'thumb-height':
+        this._thumbHeight = value || 30
+        this._updateStyles()
+        break
+      default:
+        super.updateProperty(key, value)
+    }
+  }
+
+  // API methods (called via callUIFunction with params array)
+  setProgress(params) {
+    const value = params[0]
+    console.log('[QtSeekBar] setProgress called with:', value, 'params:', params)
+    this._progress = value || 0
+    // In range mode, also update right progress
+    if (this._seekBarMode === 1) {
+      this._rightProgress = this._progress
+    }
+    this._updateStyles()
+  }
+
+  setMaxProgress(params) {
+    this._maxProgress = params[0] || 100
+    this._updateStyles()
+  }
+
+  setProgressHeight(params) {
+    this._progressHeight = params[0] || 10
+    this._updateStyles()
+  }
+
+  setProgressRadius(params) {
+    this._progressRadius = params[0] || 5
+    this._updateStyles()
+  }
+
+  setProgressColor(params) {
+    this._progressColor = params[0] || '#FF0000'
+    this._updateStyles()
+  }
+
+  setProgressDefaultColor(params) {
+    this._progressDefaultColor = params[0] || '#CCCCCC'
+    this._updateStyles()
+  }
+
+  setSeekBarMode(params) {
+    this._seekBarMode = params[0] || 0
+    this._updateStyles()
+  }
+
+  setGravity(params) {
+    this._gravity = params[0] || 1
+    this._updateStyles()
+  }
+
+  setRangeProgress(params) {
+    this._leftProgress = params[0] || 0
+    this._rightProgress = params[1] || 100
+    this._updateStyles()
+  }
+
+  setRange(params) {
+    this._minProgress = params[0] || 0
+    this._maxProgress = params[1] || 100
+    // params[2] is minInterval
+    this._updateStyles()
+  }
+
+  resetSeekbar() {
+    this._progress = 0
+    this._leftProgress = 0
+    this._rightProgress = this._maxProgress
+    this._updateStyles()
+  }
+
+  init(props) {
+    super.init(props)
+
+    if (props.progress !== undefined) this._progress = props.progress
+    if (props.maxProgress !== undefined) this._maxProgress = props.maxProgress
+    if (props.progressHeight !== undefined) this._progressHeight = props.progressHeight
+    if (props.progressRadius !== undefined) this._progressRadius = props.progressRadius
+    if (props.progressColor !== undefined) this._progressColor = props.progressColor
+    if (props.progressDefaultColor !== undefined)
+      this._progressDefaultColor = props.progressDefaultColor
+    if (props.seekBarMode !== undefined) this._seekBarMode = props.seekBarMode
+    if (props.gravity !== undefined) this._gravity = props.gravity
+
+    // Delayed render to ensure container has dimensions
+    requestAnimationFrame(() => this._updateStyles())
+  }
+}