@antv/s2/esm/renderer/VideoRenderer.js

effective spreadsheet render core lib

import { __awaiter } from "tslib";
// 视频渲染器
import { Rect } from '@antv/g';
import { GuiIcon } from '../common/icons';
import { BaseRenderer } from './BaseRenderer';
const defaultVideoConfig = {
    loop: true,
    autoplay: true,
    crossOrigin: true,
    controls: false,
    muted: true,
};
export class VideoRenderer extends BaseRenderer {
    prepare(renderer, cell) {
        return __awaiter(this, void 0, void 0, function* () {
            const text = yield this.prepareText(renderer, cell);
            return new Promise((resolve) => {
                const { height, width } = this.getCellInfo(cell);
                const { timeout = 10000, fallback = '' } = renderer;
                if (BaseRenderer.mediaCache.has(text)) {
                    const video = BaseRenderer.mediaCache.get(text);
                    resolve(video);
                    return;
                }
                const video = document.createElement('video');
                const fallbackTimer = setTimeout(() => {
                    resolve(fallback);
                }, timeout);
                const config = Object.assign(Object.assign({ height,
                    width, src: text }, defaultVideoConfig), renderer.videoConfig);
                Object.assign(video, config);
                video.onloadeddata = () => {
                    clearTimeout(fallbackTimer);
                    BaseRenderer.mediaCache.set(text, video);
                    resolve(video);
                };
                const onError = () => {
                    clearTimeout(fallbackTimer);
                    resolve(fallback);
                };
                // 错误处理
                ['error', 'abort', 'stalled'].forEach((eventName) => {
                    video.addEventListener(eventName, onError);
                });
            });
        });
    }
    generateConfig(renderer, cell, element) {
        const { x, y, width, height } = this.getCellInfo(cell);
        let transform = '';
        if (element instanceof HTMLVideoElement) {
            const scaleX = width / element.videoWidth;
            const scaleY = height / element.videoHeight;
            transform = `scale(${scaleX}, ${scaleY})`;
        }
        // https://g.antv.antgroup.com/api/css/pattern
        return {
            style: Object.assign({ x,
                y,
                width,
                height, fill: {
                    image: element,
                    repetition: 'no-repeat',
                    transform,
                } }, renderer.config),
        };
    }
    render(cell, config) {
        const rect = new Rect(config);
        const { x, y, width, height } = this.getCellInfo(cell);
        const calcSize = Math.min(width, height) * 0.25;
        rect.appendChild(new GuiIcon({
            name: 'Play',
            width: calcSize,
            height: calcSize,
            x: x + width / 2 - calcSize / 2,
            y: y + height / 2 - calcSize / 2,
            pointerEvents: 'none',
            cursor: 'pointer',
        }));
        cell.appendChild(rect);
    }
}
//# sourceMappingURL=VideoRenderer.js.map