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

Tencent Cloud Player component with Vue2/Vue3 compatibility

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

export default class WideScreenComponent {
 
  constructor(player, onWideScreenChange) {
    this.player = player
    this.html = parseDom(wideScreenHtml)
    this.isWideScreen = false
    this.onWideScreenChange = onWideScreenChange
    
    this.handleToggle = this.handleToggle.bind(this)
    this.handleKeydown = this.handleKeydown.bind(this)
  }

  createEl(el) {
    const controlBar = el.querySelector('.vjs-control-bar');
    if (controlBar) {
      const fullscreenControl = controlBar.querySelector('.vjs-fullscreen-control')
      if (fullscreenControl) {
        controlBar.insertBefore(this.html, fullscreenControl)
      } else {
        controlBar.appendChild(this.html)
      }
    } else {
      console.warn('找不到播放器控制栏，尝试添加到根元素');
      el.appendChild(this.html);
    }
  }

  ready() {
    this.html.addEventListener('click', this.handleToggle)
    
    document.addEventListener('keydown', this.handleKeydown)
  }

  handleToggle() {
    if (this.isWideScreen) {
      this.exitWideScreen()
    } else {
      this.enterWideScreen()
    }
  }

  enterWideScreen() {
    if (this.isWideScreen) {
      return
    }

    this.isWideScreen = true
    
    this.html.classList.add('wide-screen')
    
    this.player.trigger('widescreenchange', { isWideScreen: true })
    
    if (this.onWideScreenChange && typeof this.onWideScreenChange === 'function') {
      this.onWideScreenChange(true, this.player)
    }
    
  }

  exitWideScreen() {
    if (!this.isWideScreen) {
      return
    }

    this.isWideScreen = false
    
    this.html.classList.remove('wide-screen')
    
    this.player.trigger('widescreenchange', { isWideScreen: false })
    
    if (this.onWideScreenChange && typeof this.onWideScreenChange === 'function') {
      this.onWideScreenChange(false, this.player)
    }
    
  }

  handleKeydown(event) {
    // Ctrl+W 或 Cmd+W 切换宽屏模式
    if ((event.ctrlKey || event.metaKey) && event.key === 'w') {
      this.handleToggle()
      event.preventDefault()
    }
  }


  getWideScreenState() {
    return this.isWideScreen
  }

  setWideScreenState(isWideScreen) {
    if (isWideScreen && !this.isWideScreen) {
      this.enterWideScreen()
    } else if (!isWideScreen && this.isWideScreen) {
      this.exitWideScreen()
    }
  }


  destroy() {
    if (this.isWideScreen) {
      this.exitWideScreen()
    }
    
    if (this.html) {
      this.html.removeEventListener('click', this.handleToggle)
    }
    document.removeEventListener('keydown', this.handleKeydown)
    
    this.player = null
    this.html = null
    this.onWideScreenChange = null
  }
}