nexshop-web-contents/src/component/preview/scene/scene-preview-detail-view.js

Nexshop Web Contents Project

import React, {Component} from 'react';
import PanelGroup from "react-panelgroup";
import PropTypes from 'prop-types';
import cloneDeep from 'lodash/cloneDeep';

class ScenePreviewDetailView extends Component {
    constructor(props) {
        super(props);

        this.createGroup = this.createGroup.bind(this);
        this.createPanel = this.createPanel.bind(this);
        this.getPreviewBaseSide = this.getPreviewBaseSide.bind(this);
        this.getPreviewRatio = this.getPreviewRatio.bind(this);

        this.ratio = this.getPreviewRatio(props.sceneLayoutSize, props.previewWindowSize);
    }

    getPreviewBaseSide(sceneRatio, windowRatio) {
        return sceneRatio < windowRatio ? 'height' : 'width';
    }

    getPreviewRatio(sceneSize, windowSize) {
        const baseSide = this.getPreviewBaseSide(sceneSize.width / sceneSize.height, windowSize.width / windowSize.height);

        return windowSize[baseSide] / sceneSize[baseSide];
    }

    createGroup(group) {
        let alignItems = [];
        let widths = [];

        group.panels.map((item) => {
            if (item.type === 'group') {
                alignItems.push(this.createGroup(item));
            } else {
                alignItems.push(this.createPanel(item));
            }

            let clonedDomAttribute = cloneDeep(item.domAttribute);
            clonedDomAttribute.resize = 'fixed';
            clonedDomAttribute.size = item.domAttribute.size * this.ratio;

            widths.push(clonedDomAttribute);
        });

        return (
            <PanelGroup key={group.id} direction={group.direction} panelWidths={widths} spacing={0}>
                {alignItems}
            </PanelGroup>
        );
    }

    createPanel(panel) {
        const contentItem = panel.contentItems[0];
        const videoWidth = panel.domAttribute.pixelWidth * this.ratio;
        const videoHeight = panel.domAttribute.pixelHeight * this.ratio;
        return (
            <div key={panel.id} className="layout-panel__body">
                {
                    contentItem.type === 'video' ?
                        <div className={`layout-panel__body__status--${contentItem.type}`}>
                            {
                                <video style={{
                                    width: videoWidth,
                                    height: videoHeight,
                                    objectFit: contentItem.fitMode,
                                    overflow: 'hidden'
                                }} preload="metadata" autoPlay controls loop
                                       src={contentItem.contentUrl} type="video/mp4"
                                />
                            }
                        </div>
                        :
                        <div id={panel.id}
                             className={`layout-panel__body__status--${contentItem.type}`}
                             style={{backgroundImage: `url(${contentItem.contentUrl})`, backgroundSize: contentItem.fitMode}}
                        />
                }
            </div>
        );
    }

    render() {
        const {scene, previewWindowSize, sceneLayoutSize} = this.props;
        let panelGroup = this.createGroup(scene);
        return (
            <div className="scene-preview" style={{width: previewWindowSize.width, height: previewWindowSize.height}}>
                <div style={{width: this.ratio * sceneLayoutSize.width, height: this.ratio * sceneLayoutSize.height}}>
                    {panelGroup}
                </div>
            </div>
        )
    }
}

export default ScenePreviewDetailView;

ScenePreviewDetailView.propTypes = {
    scene: PropTypes.object.isRequired,
};