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.
96 lines
4.3 KiB
96 lines
4.3 KiB
import React, { useState, useEffect, useRef } from "react";
|
|
import { connect } from "react-redux";
|
|
import { ysptz, gbptz } from '$utils'
|
|
import './videoPlay.less';
|
|
|
|
const VideoOperationCloudControl = ({
|
|
videoObj, iotVideoServer
|
|
}) => {
|
|
|
|
const cloudControl = (ac) => {
|
|
if (videoObj.type == 'yingshi') {
|
|
ysptz(ac, videoObj)
|
|
} else {
|
|
gbptz(ac, videoObj, iotVideoServer)
|
|
}
|
|
}
|
|
const vcmpVideo = document.getElementsByClassName('vcmp_video'+videoObj.id)?.offsetHeight;
|
|
console.log(vcmpVideo);
|
|
return (
|
|
<div style={{
|
|
position: 'absolute', top: 'calc(50% - 105px)', left: 'calc(50% - 125px)',
|
|
width: 210, height: 250, backgroundColor: '#00000014', borderRadius: 68, transform: `scale(${vcmpVideo / 400 > 2.5 ? 2.5 : vcmpVideo / 400})`,
|
|
}}>
|
|
<div style={{
|
|
height: 148, width: 148, borderRadius: '100%', backgroundColor: '#2F53EA72', margin: '12px auto 18px',
|
|
position: 'relative',
|
|
}}>
|
|
{
|
|
[{
|
|
style: { top: 12, left: (148 - 24) / 2, },
|
|
click: () => { cloudControl('up') }
|
|
}, {
|
|
style: { right: 12, top: (148 - 24) / 2, },
|
|
click: () => { cloudControl('right') },
|
|
}, {
|
|
style: { bottom: 12, left: (148 - 24) / 2, },
|
|
click: () => { cloudControl('down') },
|
|
}, {
|
|
style: { left: 12, top: (148 - 24) / 2 },
|
|
click: () => { cloudControl('left') },
|
|
}].map((s, i) => {
|
|
return (
|
|
<img
|
|
src="/assets/images/background/up.png"
|
|
style={Object.assign({
|
|
height: 24, width: 24, display: 'inline-block', transform: `rotate(${i * 90}deg)`,
|
|
position: 'absolute'
|
|
}, s.style)}
|
|
onClick={s.click}
|
|
/>
|
|
)
|
|
})
|
|
}
|
|
<div style={{
|
|
height: 32, width: 32, border: '2px solid #ffffff24', borderRadius: '100%',
|
|
position: 'absolute', top: (148 - 34) / 2, left: (148 - 34) / 2
|
|
}} />
|
|
</div>
|
|
{
|
|
[
|
|
[{ n: '+', click: () => { cloudControl('focus_in') }, }, { n: '焦距' }, { n: '-', click: () => { cloudControl('focus_out') }, }],
|
|
[{ n: '+', click: () => { cloudControl('zoom_in') }, }, { n: '缩放' }, { n: '-', click: () => { cloudControl('zoom_out') }, }],
|
|
].map(s => {
|
|
return (
|
|
<div style={{
|
|
width: 110, height: 22, margin: '0 auto 6px', display: 'flex', alignContent: 'center', justifyContent: 'space-around',
|
|
backgroundColor: '#2F53EA72', color: '#fff'
|
|
}}>
|
|
{
|
|
s.map((m, mi) => {
|
|
return (
|
|
<div
|
|
style={{ textAlign: 'center', display: 'inline-block', cursor: mi != 1 ? 'pointer' : 'auto' }}
|
|
onClick={() => { m.click ? m.click() : null }}
|
|
>{m.n}</div>
|
|
)
|
|
})
|
|
}
|
|
</div>
|
|
)
|
|
})
|
|
}
|
|
</div>
|
|
)
|
|
|
|
}
|
|
|
|
function mapStateToProps (state) {
|
|
const { auth, global } = state;
|
|
return {
|
|
user: auth.user,
|
|
iotVideoServer: global.iotVideoServer,
|
|
};
|
|
}
|
|
|
|
export default connect(mapStateToProps)(VideoOperationCloudControl);
|