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

Tencent Cloud Player component with Vue2/Vue3 compatibility

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

/**
 * 网页全屏组件
 */
export default class WebFullscreenComponent {
  constructor(player) {
    this.player = player
    this.html = parseDom(webFullscreenHtml)
    this.isWebFullscreen = false
    
    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)
    
    // 添加键盘快捷键监听 (Ctrl+Enter 或 Cmd+Enter)
    document.addEventListener('keydown', this.handleKeydown)
  }

  handleToggle() {
    if (this.isWebFullscreen) {
      this.exitWebFullscreen()
    } else {
      this.enterWebFullscreen()
    }
  }

  enterWebFullscreen() {
    const playerEl = this.player.el_
    if (!playerEl) {
      console.error('播放器元素不存在')
      return
    }

    this.originalStyles = {
      position: playerEl.style.position,
      top: playerEl.style.top,
      left: playerEl.style.left,
      width: playerEl.style.width,
      height: playerEl.style.height,
      zIndex: playerEl.style.zIndex,
      backgroundColor: playerEl.style.backgroundColor
    }

    playerEl.style.position = 'fixed'
    playerEl.style.top = '0'
    playerEl.style.left = '0'
    playerEl.style.width = '100vw'
    playerEl.style.height = '100vh'
    playerEl.style.zIndex = '9999'
    playerEl.style.backgroundColor = '#000'
    
    playerEl.classList.add('prism-web-fullscreen')
    this.html.classList.add('web-fullscreen')
    
    document.body.style.overflow = 'hidden'
    
    this.isWebFullscreen = true
    
    this.player.trigger('webfullscreenchange', { isWebFullscreen: true })
    
    console.log('进入网页全屏模式')
  }

  exitWebFullscreen() {
    const playerEl = this.player.el_
    if (!playerEl) {
      console.error('播放器元素不存在')
      return
    }

    if (this.originalStyles) {
      Object.keys(this.originalStyles).forEach(key => {
        playerEl.style[key] = this.originalStyles[key] || ''
      })
    }
    
    playerEl.classList.remove('prism-web-fullscreen')
    this.html.classList.remove('web-fullscreen')
    
    document.body.style.overflow = ''
    
    this.isWebFullscreen = false
    
    this.player.trigger('webfullscreenchange', { isWebFullscreen: false })
    
    console.log('退出网页全屏模式')
  }

  handleKeydown(event) {
    if (event.key === 'Escape' && this.isWebFullscreen) {
      this.exitWebFullscreen()
      event.preventDefault()
    }
    
    if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
      this.handleToggle()
      event.preventDefault()
    }
  }

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