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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
1x
1x
1x
1x
 
 
 
18x
 
18x
18x
18x
18x
 
18x
 
 
 
28x
 
 
 
22x
 
22x
 
 
 
34x
34x
 
34x
48x
16x
 
32x
 
 
48x
48x
48x
 
48x
 
 
34x
 
 
 
 
 
 
 
32x
32x
32x
32x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
18x
18x
18x
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
import React, {Component} from 'react';
import PanelGroup from "react-panelgroup";
import PropTypes from 'prop-types';
import _ from 'lodash';
 
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,
};