player.js

export class Player {
    constructor(options) {
        this.demuxDecodeWorker = null;
        this.canvas = null; 
        this.$container = options.container;
        this.offscreen = null;
        this._initCanvas();
        this.showVbps = options.showVbps;

        this.demuxDecodeWorker = new Worker("./demux_decode_worker.js");
        this.demuxDecodeWorker.postMessage({ canvas: this.offscreen, type: "init"}, [this.offscreen]);
        this.demuxDecodeWorker.addEventListener('message', this.handleMessageFromWorker);
    }

    _initCanvas() {
        this.canvas = document.createElement('canvas');
        this.$container.appendChild(this.canvas);
        this.offscreen = this.canvas.transferControlToOffscreen();
    }

    play(uri) {
        this.demuxDecodeWorker.postMessage({ uri: uri, type: "play"});
        if (this.showVbps) {
            this.demuxDecodeWorker.postMessage({type: "showVbps"});
        }
        console.log("Player start play");
    }

    pause() {
    }

    destroy() {
        if (this.demuxDecodeWorker) {
            this.demuxDecodeWorker.postMessage({type: "destroy"});
            // Give it a moment to cleanup internal resources if needed, 
            // but usually terminate is immediate. 
            // Since we are creating a new player immediately after, we should terminate.
            this.demuxDecodeWorker.terminate(); 
            this.demuxDecodeWorker = null;
        }
        this.$container.replaceChildren();
        console.log("Player destroyed");
    }

    handleMessageFromWorker(msg) {
        // console.log('incoming message from worker, msg:', msg);
        switch (msg.data.type) {
            case 'updateStatus':
                console.log('updateStatus:', msg.data.status);
                break;
            default:
                throw 'no aTopic on incoming message to ChromeWorker';
        }
    }

}