Browse Source

尺寸问题解决

release_1.1.2
wenlele 2 years ago
parent
commit
d70ea89d19
  1. 135
      code/VideoAccess-VCMP/web/client/src/components/textScroll.jsx
  2. 93
      code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx
  3. 12
      code/VideoAccess-VCMP/web/client/src/components/videoPlayer/voiceHeader.jsx
  4. 1
      code/VideoAccess-VCMP/web/client/src/sections/monitor/containers/videoPlayCross.jsx

135
code/VideoAccess-VCMP/web/client/src/components/textScroll.jsx

@ -3,77 +3,80 @@ import moment from 'moment'
import './textScroll.less'
function TextScroll (props) {
const { content, duration,roll } = props
const [showContent, setShowContent] = useState('')
const showIndex = useRef(0)
const initialization = useRef(false)
const cancel = useRef(false)
useEffect(() => {
if (content.length) {
if(roll){
let contentParent = document.getElementById('marquee_box')
document.getElementById('contentPMakeUp').style.width = contentParent.clientWidth + 'px'
const contentP = document.getElementById('contentP')
contentP.style.visibility = 'visible'
setShowContent(content[0])
window.cancelAnimationFrame(cancel.current)
contentParent.scrollLeft = 0
initialization.current=false
showIndex.current = 0
}
else{
let repeatTime = moment()
let refreshTime = moment()
const scroll = () => {
let contentParent = document.getElementById('marquee_box')
document.getElementById('contentPMakeUp').style.width = contentParent.clientWidth + 'px'
//
// if(!showContent&&!initialization.current){
if(!initialization.current){
const { content, duration, roll } = props
console.log(content, roll);
const [showContent, setShowContent] = useState('')
const showIndex = useRef(0)
const initialization = useRef(false)
const cancel = useRef(false)
useEffect(() => {
if (content.length) {
if (roll) {
let contentParent = document.getElementById('marquee_box')
console.log(document.getElementById('contentPMakeUp'));
document.getElementById('contentPMakeUp').style.width = contentParent.clientWidth + 'px'
const contentP = document.getElementById('contentP')
contentParent.scrollLeft = 0
setShowContent(content[showIndex.current])
showIndex.current = (showIndex.current + 1) % content.length
contentP.style.visibility = 'visible'
initialization.current=true
setShowContent(content[0])
window.cancelAnimationFrame(cancel.current)
contentParent.scrollLeft = 0
initialization.current = false
showIndex.current = 0
}
else {
let repeatTime = moment()
let refreshTime = moment()
const scroll = () => {
let contentParent = document.getElementById('marquee_box')
console.log(document.getElementById('contentPMakeUp'));
document.getElementById('contentPMakeUp').style.width = contentParent.clientWidth + 'px'
//
// if(!showContent&&!initialization.current){
if (!initialization.current) {
const contentP = document.getElementById('contentP')
contentParent.scrollLeft = 0
setShowContent(content[showIndex.current])
showIndex.current = (showIndex.current + 1) % content.length
contentP.style.visibility = 'visible'
initialization.current = true
}
//
if (moment().diff(refreshTime) > 1000 / 60) {
const contentP = document.getElementById('contentP')
//
if (moment().diff(repeatTime) > 1000 * 1.5) {
contentP.style.visibility = 'visible'
}
//
if (moment().diff(repeatTime) > 1000 * 3) {
contentParent.scrollLeft = contentParent.scrollLeft + 1
}
//
if (contentParent.scrollLeft >= contentP.clientWidth + 24) {
contentParent.scrollLeft = 0
repeatTime = moment()
setShowContent(content[showIndex.current])
showIndex.current = (showIndex.current + 1) % content.length
contentP.style.visibility = 'hidden'
}
refreshTime = moment()
}
let text = null
text = window.requestAnimationFrame(scroll)
cancel.current = text
}
//
if (moment().diff(refreshTime) > 1000 / 60) {
const contentP = document.getElementById('contentP')
//
if (moment().diff(repeatTime) > 1000 * 1.5) {
contentP.style.visibility = 'visible'
}
//
if (moment().diff(repeatTime) > 1000 * 3) {
contentParent.scrollLeft = contentParent.scrollLeft + 1
}
//
if (contentParent.scrollLeft >= contentP.clientWidth + 24) {
contentParent.scrollLeft = 0
repeatTime = moment()
setShowContent(content[showIndex.current])
showIndex.current = (showIndex.current + 1) % content.length
contentP.style.visibility = 'hidden'
}
refreshTime = moment()
window.requestAnimationFrame(scroll)
}
let text = null
text=window.requestAnimationFrame(scroll)
cancel.current=text
}
window.requestAnimationFrame(scroll)
}
}
}, [content,roll])
return (
<div className="marquee_box" id='marquee_box' style={{ overflow: 'hidden',color:'#F9F9F9' }} >
<p style={{ position: 'relative', left: 24 }}>
<p id='contentP' style={{ display: 'inline-block', visibility: 'hidden' }}>{showContent}</p>
<p id='contentPMakeUp' style={{ width: 0, display: 'inline-block' }}></p>
</p>
</div>
)
}, [content, roll])
return (
<div className="marquee_box" id='marquee_box' style={{ overflow: 'hidden', color: '#F9F9F9' }} >
<div style={{ position: 'relative', left: 24 }}>
<div id='contentP' style={{ display: 'inline-block', visibility: 'hidden' }}>{showContent}</div>
<div id='contentPMakeUp' style={{ width: 0, display: 'inline-block' }}></div>
</div>
</div>
)
}
export default React.memo(TextScroll)

93
code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx

@ -92,14 +92,20 @@ const VideoPlay = ({
// ifream
const yingshiPrepareRef = useRef(null)
const playState = useRef(false) //
const player_ = useRef(null)
useEffect(() => {
setRoll(false)
}, [resolution,]);
}, [resolution]);
useEffect(() => {
setResolution(changeData?.hdChecked ? 'hd' : 'sd')
if (player) {
player.stop().then(() => {
player.play({ url: changeData?.hdChecked ? videoObj.playUrlHd : videoObj.playUrlSd })
})
}
}, [changeData?.hdChecked])
const changeSelectState = (key) => {
@ -318,8 +324,8 @@ const VideoPlay = ({
id: containerId, // ID
accessToken: videoObj?.yingshiToken,
url: videoObj.playUrlSd,
width: size?.width,
height: size?.height,
width: setupSize('width'),
height: setupSize('height'),
handleSuccess: () => { //
setRoll(true)
setVideoMask(false)
@ -330,6 +336,7 @@ const VideoPlay = ({
},
})
setPlayer(player)
player_.current = player
}
}
@ -368,52 +375,58 @@ const VideoPlay = ({
}
}
useEffect(async () => {
if (!operationRef.current?.fullScreen.select && player) {
if (videoObj.type == 'yingshi' && IsSize == 'true') {
} else {
console.log(11111111111);
console.log(sizeWh);
await setSize({ parentWidth: sizeWh?.parentWidth, parentHeight: sizeWh?.parentHeight, width: width || sizeWh?.parentWidth, height: height || sizeWh?.parentHeight })
player.reSize(width || sizeWh?.parentWidth, height || sizeWh?.parentHeight)
const setupSize = (data) => {
if (!operationRef.current?.fullScreen.select) {
console.log(sizeWh);
let containerWidth = sizeWh?.parentWidth //
let containerHeight = sizeWh?.parentHeight
let videoWidth = width || sizeWh?.width
let videoHeight = height || sizeWh?.height
if (IsSize == 'true') {
if (containerWidth >= videoWidth && containerHeight >= videoHeight) {
if (videoHeight / videoWidth >= 0.55 && videoHeight / videoWidth <= 0.57) {
} else {
console.warn('宽高不符合尺寸要求,故返回合适的尺寸')
if (videoWidth / 16 > videoHeight / 9) {
videoWidth = (videoHeight / 9) * 16
} else {
videoHeight = (videoWidth / 16) * 9
}
}
} else {
console.warn('传递宽高参数有误,请确认容器大小范围内')
if (containerWidth / 16 > containerHeight / 9) {
videoWidth = (containerHeight / 9) * 16
} else {
videoHeight = (containerWidth / 16) * 9
}
}
setSize({ parentWidth: containerWidth, parentHeight: containerHeight, width: videoWidth, height: videoHeight })
if (videoObj.type == 'yingshi' && player) {
player.reSize(videoWidth, videoHeight)
}
} else {
setSize({ parentWidth: sizeWh?.parentWidth, parentHeight: sizeWh?.parentHeight, width: width || sizeWh?.parentWidth, height: height || sizeWh?.parentHeight })
if (videoObj.type == 'yingshi' && player) {
player.reSize(width || sizeWh?.parentWidth, height || sizeWh?.parentHeight)
}
}
return data == 'width' ? videoWidth : data == 'height' ? videoHeight : ''
}
}
useEffect(() => {
setupSize()
}, [sizeWh])
// useEffect(() => {
// if (IsSize == 'true') {
// console.log(size?.parentWidth >= size?.width && size?.parentHeight >= size?.height);
// if (size?.parentWidth >= size?.width && size?.parentHeight >= size?.height) {
// if (size?.height / size?.width >= 0.55 && size?.height / size?.width <= 0.57) {
// } else {
// console.warn('')
// if (size?.width / 16 > size?.height / 9) {
// setSize({ ...size, width: (size?.height / 9) * 16, })
// } else {
// setSize({ ...size, height: (size?.width / 16) * 9 })
// }
// }
// } else {
// console.warn('')
// if (size?.parentWidth / 16 > size?.parentHeight / 9) {
// setSize({ ...size, width: (size?.parentHeight / 9) * 16, height: size?.parentHeight })
// } else {
// setSize({ ...size, width: size?.parentWidth, height: (size?.parentWidth / 16) * 9 })
// }
// }
// }
// }, [sizeWh])
return (
<>
<div className="vcmp_videoplay" style={{ width: size?.parentWidth || '100%', height: size?.parentHeight || '100%', backgroundColor: 'black', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center', }}>
<div id="vcmp_videoplay" style={{ position: 'relative', height: size?.height || '100%', width: size?.width || '100%', minWidth: 240, minHeight: 135, overflow: 'hidden' }}>
{/* 顶部信息 */}
{size?.parentWidth > 320 ? <VideoHeader
<VideoHeader
operationState={operationState} changeSelectState={changeSelectState}
histroyTime={histroyTime}
setoperationState={setoperationState} name={name}
@ -426,9 +439,8 @@ const VideoPlay = ({
player={player}
resolution={resolution}
playState={playState.current}
/> : ""}
/>
{/* 视频内容 */}
{
// <iframe
// frameBorder="0"
@ -448,7 +460,6 @@ const VideoPlay = ({
<div id={containerId} style={{ height: '100%', width: '100%', }}></div>
{videoMask ? <div style={{ height: size?.height || '100%', width: size?.width || '100%', minWidth: 400, minHeight: 225, overflow: 'hidden', position: 'absolute', top: '0', left: '0', zIndex: 99, backgroundColor: 'rgba(255,255,255,0.65)' }}>hhktyjr6tyr5</div> : ''}
{/* 下方操作栏 */}
{/* 显示操作功能条件(宽高) */}
{size?.parentWidth > 320 ?

12
code/VideoAccess-VCMP/web/client/src/components/videoPlayer/voiceHeader.jsx

@ -13,6 +13,9 @@ const VideoHeader = ({ operationState, changeSelectState, setProcessDisX, name,
const time = useRef(moment(showTime || undefined))
const upTimeInterval = useRef(null)
const [showTime_, setShowTime] = useState(' ')
console.log(11212111313131);
const updateTime = () => {
if (!showTime) {
setShowTime('')
@ -54,9 +57,12 @@ const VideoHeader = ({ operationState, changeSelectState, setProcessDisX, name,
}, [showTime])
const vcmp_videoplay = document.getElementById('vcmp_videoplay')?.clientHeight
const vcmp_videopla = document.getElementById('vcmp_videoplay')?.clientWidth
console.log(vcmp_videopla);
return (
<div>
{roll ?
{roll && vcmp_videopla > 320 ?
<div style={{
height: '12%', lineHeight: `${vcmp_videoplay * 0.12 > 42 ? 42 : vcmp_videoplay * 0.12 < 30 ? 30 : vcmp_videoplay * 0.12}px`, background: videoStyle == 'true' ? '#467ACD' : '#00000026', maxHeight: 42, minHeight: 30,
position: 'absolute', width: '100%', zIndex: 80,
@ -86,8 +92,6 @@ const VideoHeader = ({ operationState, changeSelectState, setProcessDisX, name,
} else {
player.play({ url: resolution == 'sd' ? videoObj?.playUrlSd : videoObj?.playUrlHd, })
}
}} />
</> : ''
}
@ -95,7 +99,7 @@ const VideoHeader = ({ operationState, changeSelectState, setProcessDisX, name,
</Col>
<Col span={videoStyle == 'true' ? 24 : 15} style={{}}>
<div style={{ paddingRight: 12 }}>
{content ? <TextScroll content={content || []} duration={6} /> : ""}
{content ? <TextScroll content={content || []} duration={6} roll={roll} /> : ""}
</div>
</Col>
</Row>

1
code/VideoAccess-VCMP/web/client/src/sections/monitor/containers/videoPlayCross.jsx

@ -47,6 +47,7 @@ const VideoPlayCross = (props) => {
window.removeEventListener('resize', resize_);
}
}, [])
console.log(videoParams);
return (
<>
{

Loading…
Cancel
Save