You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
2.7 KiB
76 lines
2.7 KiB
import React, { useEffect, useRef } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { TreeSelect, Tree, Form, Button, Popover, Tag, Switch, Input, Row, Col } from '@douyinfe/semi-ui';
|
|
import { VideoPlay } from "$components";
|
|
import { useState } from 'react';
|
|
|
|
|
|
const Container = ({ videoObj, pageSize, showHeader, videoPlay, mould }) => {
|
|
const [videoWidth, setVideoWidth] = useState()
|
|
const [videoHeight, setVideoHeight] = useState()
|
|
// console.log(videoObj);
|
|
useEffect(() => {
|
|
|
|
// const resize_ = async () => {
|
|
// try {
|
|
// let video = document.getElementById('video' + videoObj.key)
|
|
// if (video) {
|
|
// await setVideoWidth(video.clientWidth)
|
|
// await setVideoHeight(video.clientHeight)
|
|
// }
|
|
// } catch (error) {
|
|
// console.error(error)
|
|
// }
|
|
// }
|
|
// resize_()
|
|
// window.addEventListener('resize', resize_); //只要窗口殴大小发生像素变化就会触发
|
|
// return () => {
|
|
// window.removeEventListener('resize', resize_);
|
|
// }
|
|
|
|
}, [])
|
|
useEffect(() => {
|
|
try {
|
|
let video = document.getElementById('video' + videoObj.key)
|
|
if (video) {
|
|
setVideoWidth(video.clientWidth)
|
|
setVideoHeight(video.clientHeight)
|
|
}
|
|
} catch (error) {
|
|
console.error(error)
|
|
}
|
|
}, [pageSize, showHeader])
|
|
// console.log(videoWidth, videoHeight);
|
|
return (
|
|
<div style={{ width: videoWidth || '100%', height: videoHeight || '100%', padding: 5 }}>
|
|
{videoWidth && videoHeight ? videoPlay ?
|
|
<VideoPlay sizeWh={{
|
|
width: videoWidth - 10,
|
|
height: videoHeight - 30,
|
|
parentWidth: videoWidth - 10,
|
|
parentHeight: videoHeight - 30,
|
|
// width: 300,
|
|
// height: 200,
|
|
// parentWidth: 300,
|
|
// parentHeight: 200,
|
|
}}
|
|
videoObj={videoObj.camera}
|
|
videoStyle='true'
|
|
containerId={videoObj.key}
|
|
local={true} /> :
|
|
<img src={`${__webpack_public_path__}assets/images/openness/${pageSize == 1 || pageSize == 4 ? mould('blue2', 'white2', 'black2') : mould('blue1.5', 'white1.5', 'black1.5')}.png`} style={{
|
|
display: 'inline-block', width: videoWidth - 10, height: videoHeight - 30,
|
|
}} /> : ""}
|
|
<div style={{ lineHeight: '30px', paddingLeft: 6, color: mould('#FFFFFF', '#615E5E', '#FFFFFF') }}>{videoObj?.label}</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function mapStateToProps (state) {
|
|
const { auth } = state;
|
|
return {
|
|
user: auth.user,
|
|
};
|
|
}
|
|
|
|
export default connect(mapStateToProps)(Container)
|
|
|