|
|
|
@ -4,63 +4,98 @@ import qs from "qs"; |
|
|
|
import { VideoPlay } from '$components' |
|
|
|
import '../style.less' |
|
|
|
import { useRef } from 'react'; |
|
|
|
import './videoPlayCross.less' |
|
|
|
|
|
|
|
const VideoPlayCross = (props) => { |
|
|
|
const [videoParams, setVideoParams] = useState(null) |
|
|
|
const [sizeWh, setSizeWh] = useState() |
|
|
|
const viideoData = useRef(videoParams) |
|
|
|
const { user, history } = props; |
|
|
|
const [videoParams, setVideoParams] = useState(null) |
|
|
|
const [sizeWh, setSizeWh] = useState() |
|
|
|
const viideoData = useRef(videoParams) |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
// console.log(props); |
|
|
|
if (props.location.search) { |
|
|
|
decodeURIComponent(props.location.search) |
|
|
|
const params = qs.parse(props.location.search.slice(1)) |
|
|
|
if (params.videoObj) { |
|
|
|
// params.videoObj = (new Function("return " + params.videoObj))() |
|
|
|
decodeURIComponent(params.videoObj) |
|
|
|
params.videoObj = JSON.parse(params.videoObj) |
|
|
|
// params.height = JSON.parse(params.height) |
|
|
|
setVideoParams(params) |
|
|
|
viideoData.current = params |
|
|
|
} |
|
|
|
} |
|
|
|
function messageListen (e) { |
|
|
|
// 此处需做 域名 验证 |
|
|
|
const { data } = e |
|
|
|
if (data && data.action) { |
|
|
|
if (data.action == 'init_video' || data.action == 'epidemic_video') { |
|
|
|
setVideoParams({ ...(viideoData.current || {}), ...data.params }) |
|
|
|
} |
|
|
|
useEffect(() => { |
|
|
|
// iframe 嵌套 |
|
|
|
if (props.location.search) { |
|
|
|
decodeURIComponent(props.location.search) |
|
|
|
const params = qs.parse(props.location.search.slice(1)) |
|
|
|
if (params.videoObj) { |
|
|
|
// params.videoObj = (new Function("return " + params.videoObj))() |
|
|
|
decodeURIComponent(params.videoObj) |
|
|
|
params.videoObj = JSON.parse(params.videoObj) |
|
|
|
// params.height = JSON.parse(params.height) |
|
|
|
setVideoParams(params) |
|
|
|
viideoData.current = params |
|
|
|
} |
|
|
|
} |
|
|
|
function messageListen (e) { |
|
|
|
// 此处需做 域名 验证 |
|
|
|
const { data } = e |
|
|
|
if (data && data.action) { |
|
|
|
if (data.action == 'init_video' || data.action == 'epidemic_video') { |
|
|
|
setVideoParams({ ...(viideoData.current || {}), ...data.params }) |
|
|
|
} |
|
|
|
} |
|
|
|
const resize_ = () => { |
|
|
|
} |
|
|
|
} |
|
|
|
const resize_ = () => { |
|
|
|
if (props.location.search) { |
|
|
|
const params = qs.parse(props.location.search.slice(1)) |
|
|
|
setSizeWh({ parentWidth: document.body.clientWidth, parentHeight: document.body.clientHeight, width: params.width || document.body.clientWidth, height: params.height || document.body.clientHeight }) |
|
|
|
} |
|
|
|
resize_() |
|
|
|
if (window.parent) { |
|
|
|
window.addEventListener('message', messageListen); |
|
|
|
} |
|
|
|
window.addEventListener('resize', resize_); //只要窗口殴大小发生像素变化就会触发 |
|
|
|
return () => { |
|
|
|
} |
|
|
|
} |
|
|
|
resize_() |
|
|
|
|
|
|
|
if (window.parent) { |
|
|
|
window.addEventListener('message', messageListen); |
|
|
|
} |
|
|
|
window.addEventListener('resize', resize_) //只要窗口殴大小发生像素变化就会触发 |
|
|
|
return () => { |
|
|
|
if (!history?.location?.query?.video) { |
|
|
|
window.removeEventListener('message', messageListen); |
|
|
|
window.removeEventListener('resize', resize_); |
|
|
|
} |
|
|
|
}, []) |
|
|
|
return ( |
|
|
|
<> |
|
|
|
{ |
|
|
|
videoParams && <VideoPlay {...videoParams} sizeWh={sizeWh} /> |
|
|
|
} |
|
|
|
</> |
|
|
|
) |
|
|
|
} |
|
|
|
window.removeEventListener('resize', resize_); |
|
|
|
} |
|
|
|
}, []) |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
|
|
let data = history?.location?.query |
|
|
|
console.log(data); |
|
|
|
|
|
|
|
// 微前端嵌入 |
|
|
|
|
|
|
|
const resize = () => { |
|
|
|
if (history?.location?.query) { |
|
|
|
setSizeWh({ |
|
|
|
parentWidth: document.getElementById('VcmpApp')?.clientWidth, |
|
|
|
parentHeight: document.getElementById('VcmpApp')?.clientHeight, |
|
|
|
width: data?.width || document.getElementById('VcmpApp')?.clientWidth, |
|
|
|
height: data?.height || document.getElementById('VcmpApp')?.clientHeight |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
resize() |
|
|
|
window.addEventListener('resize', resize) |
|
|
|
return () => { |
|
|
|
window.removeEventListener('resize', resize); |
|
|
|
} |
|
|
|
}, [history?.location?.query]) |
|
|
|
return ( |
|
|
|
<> |
|
|
|
{history?.location?.query?.video ? |
|
|
|
<div style={{ width: '100%', height: '100%' }}> |
|
|
|
{sizeWh && <VideoPlay videoObj={history?.location?.query?.videoObj || {}} sizeWh={sizeWh} />} |
|
|
|
</div> |
|
|
|
|
|
|
|
: videoParams && <VideoPlay {...videoParams} sizeWh={sizeWh} /> |
|
|
|
} |
|
|
|
</> |
|
|
|
) |
|
|
|
} |
|
|
|
|
|
|
|
function mapStateToProps (state) { |
|
|
|
const { auth } = state; |
|
|
|
return { |
|
|
|
user: auth.user, |
|
|
|
}; |
|
|
|
const { auth } = state; |
|
|
|
return { |
|
|
|
user: auth.user, |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
export default connect(mapStateToProps)(VideoPlayCross); |
