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

Tencent Cloud Player component with Vue2/Vue3 compatibility

import playerNextHtml from './index.html';
import './index.css';
import nextIcon from './next.png';
import {parseDom, afterinsert} from '../../utils'

export default class PlayerNextComponent {
    constructor(player, clickHandle) {
        this.player = player;
        this.clickHandle = clickHandle;
        this.$html = parseDom(playerNextHtml);
    }
    createEl(el) {
        if (this.clickHandle) {
            this.$html.onclick = () => {
                console.log('this.clickHandle', this.clickHandle)
                if(typeof this.clickHandle == 'function') {
                    this.clickHandle()
                }else if(typeof this.clickHandle == 'string'){
                    window.location.href = this.clickHandle;
                }
            }
            this.$html.style.backgroundImage = `url(${nextIcon})`;
            
            const beforeNode = el.querySelector('.vjs-play-control')
            afterinsert(this.$html, beforeNode)
        }
    }
    dispose(){
        this.$html.parentNode.removeChild(this.$html)
    }
}