ps-tcplayer/src/tccomponents/RateComponent/index.js

Tencent Cloud Player component with Vue2/Vue3 compatibility

import rateHtml from './index.html'
import './index.scss'
import { parseDom } from '../../utils'

/**
 * 倍速播放组件
 */
export default class RateComponent {
  /**
   * @constructor 倍速播放组件构造函数
   */
  constructor(player) {
    this.html = parseDom(rateHtml)
    this.player = player
    this.hasCreated = false
    this.rate = this.getRate()
  }

  createEl(el) {
    try {
      if (!el) {
        console.warn('RateComponent: DOM元素不存在');
        return;
      }
      
      let eleControlbar = el.querySelector('.vjs-control-bar');
      if (!eleControlbar) {
        console.warn('RateComponent: 无法找到控制栏元素，尝试添加到根元素');
        el.appendChild(this.html);
        return;
      }
      
      eleControlbar.appendChild(this.html);
    } catch (err) {
      console.error('RateComponent创建DOM元素失败:', err);
    }
  }

  created() {
    if (this.hasCreated == false) {
      if (this.rate) {
        this.player.playbackRate(parseFloat(this.rate))
        
        let li_target_current = this.html.querySelector(`li[class="current"]`)
        if (li_target_current) {
          li_target_current.className = ''
        }
        let li_target = this.html.querySelector(`li[data-rate="${this.rate}"]`)
        if (li_target) {
          li_target.className = 'current'
        }
      } else {
        this.rate = '1.0'
      }
      let currentRateEle = this.html.querySelector('.current-rate')
      currentRateEle.innerText = this.rate + 'x'
    }
    this.hasCreated = true
  }

  ready() {
    let currentRateEle = this.html.querySelector('.current-rate')
    let rateListEle = this.html.querySelector('.rate-list')
    let timeId = null

    let settingRate = document.querySelector('.vcp-rate')
    if (settingRate) {
      settingRate.style.display = 'none'
    }

    currentRateEle.onclick = () => {
      rateListEle.style.display = 'block'
    }
    currentRateEle.onmouseleave = () => {
      timeId = setTimeout(() => {
        rateListEle.style.display = 'none'
      }, 100)
    }

    rateListEle.onmouseenter = () => {
      clearTimeout(timeId)
    }
    rateListEle.onmouseleave = () => {
      rateListEle.style.display = 'none'
    }

    rateListEle.onclick = ({ target }) => {
      let rate = target.dataset.rate
      if (rate) {
        this.player.playbackRate(parseFloat(rate))
        
        if (target.className !== 'current') {
          let currentEle = rateListEle.querySelector('.current')
          if (currentEle) {
            currentEle.className = ''
          }
          target.className = 'current'
        }
        rateListEle.style.display = 'none'
        currentRateEle.innerText = rate + 'x'
        this.setRate(rate)
      }
    }
  }
  
  setRate(Rate) {
    localStorage.setItem("cto_video_Rate", Rate)
  }
  
  getRate() {
    return localStorage.getItem("cto_video_Rate")
  }
}