7 changed files with 528 additions and 287 deletions
@ -0,0 +1,202 @@ |
|||
import React, { Component } from 'react'; |
|||
import './left.less'; |
|||
import { connect } from 'react-redux' |
|||
import { YSIframePlayer } from '../../../../../../components' |
|||
|
|||
class ReactCarousel extends Component { |
|||
chunk (arr, size) { |
|||
var arr1 = new Array(); |
|||
for (var i = 0; i < Math.ceil(arr.length / size); i++) { |
|||
arr1[i] = new Array(); |
|||
} |
|||
var j = 0; |
|||
var x = 0; |
|||
for (var i = 0; i < arr.length; i++) { |
|||
if (!((i % size == 0) && (i != 0))) { |
|||
arr1[j][x] = arr[i]; |
|||
x++; |
|||
} else { |
|||
j++; |
|||
x = 0; |
|||
arr1[j][x] = arr[i]; |
|||
x++; |
|||
} |
|||
} |
|||
return arr1; |
|||
} |
|||
|
|||
constructor() { |
|||
super(); |
|||
this.state = { |
|||
imgs: [], |
|||
showIndex: 0, //显示第几个图片
|
|||
timer: null, // 定时器
|
|||
show: false, // 前后按钮显示
|
|||
} |
|||
} |
|||
|
|||
renderVideo = (item, index) => { |
|||
return <YSIframePlayer |
|||
containerId={`yingshiPlay_lu_${index}`} |
|||
height='100%' |
|||
width="100%" |
|||
url={`ezopen://open.ys7.com/${item.deviceSerial}/${item.channelNo || '1'}.live`} |
|||
audio="0" |
|||
ysToken={item.token} |
|||
videoState={{ |
|||
status: item.status |
|||
}} |
|||
/> |
|||
} |
|||
|
|||
render () { |
|||
console.log(this.props); |
|||
const { imgs } = this.state |
|||
return ( |
|||
<div className="ReactCarousel" style={{ width: "100%", height: "100%" }}> |
|||
<div className="contain" |
|||
onMouseEnter={() => { this.stop() }} //鼠标进入停止自动播放
|
|||
onMouseLeave={() => { this.start() }} //鼠标退出自动播放
|
|||
> |
|||
<ul className="ul"> |
|||
{ |
|||
this.state.imgs.map((value, index) => { |
|||
return ( |
|||
<li style={{ position: "relative", left: "8%", width: "100%", height: "100%", top: "-5%", fontSize: "12px" }} className={index === this.state.showIndex ? 'show' : ''} |
|||
key={index} |
|||
> |
|||
{ |
|||
imgs.map((value, index) => { |
|||
if (index == 0) { |
|||
return value?.deviceSerial ? <div style={{ width: "45%", height: "40%", backgroundSize: 'cover', position: "absolute", left: "-3%", top: "5%" }}> |
|||
{this.renderVideo(value, index)} |
|||
<div style={{ width: "100%", height: "100%", position: "absolute", top: "80%" }}> |
|||
<div style={{ width: "100%", height: "20%", backgroundColor: "rgba(0,0,0,0.6)", overflow: "hiddden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}> |
|||
<img src='/assets/images/leadership/weizhis.png' style={{ width: "6%", height: "80%", marginLeft: "3%", marginRight: "3%" }} /> |
|||
{value?.deviceName} |
|||
</div> |
|||
</div> |
|||
</div> : '' |
|||
} else if (index == 1) { |
|||
return value?.deviceSerial ? <div style={{ width: "45%", height: "40%", backgroundSize: 'cover', position: "absolute", left: "45%", top: "5%" }}> |
|||
{this.renderVideo(value, index)} |
|||
<div style={{ width: "100%", height: "100%", position: "absolute", top: "80%" }}> |
|||
<div style={{ width: "100%", height: "20%", backgroundColor: "rgba(0,0,0,0.6)", overflow: "hiddden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}> |
|||
<img src='/assets/images/leadership/weizhis.png' style={{ width: "6%", height: "80%", marginLeft: "3%", marginRight: "3%" }} /> |
|||
{value?.deviceName} |
|||
</div> |
|||
</div> |
|||
</div> : "" |
|||
} else if (index == 2) { |
|||
return value?.deviceSerial ? <div style={{ width: "45%", height: "40%", backgroundSize: 'cover', position: "absolute", left: "-3%", top: "49%" }}> |
|||
{this.renderVideo(value, index)} |
|||
<div style={{ width: "100%", height: "100%", position: "absolute", top: "80%" }}> |
|||
<div style={{ width: "100%", height: "20%", backgroundColor: "rgba(0,0,0,0.6)", overflow: "hiddden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}> |
|||
<img src='/assets/images/leadership/weizhis.png' style={{ width: "6%", height: "80%", marginLeft: "3%", marginRight: "3%" }} /> |
|||
{value?.deviceName} |
|||
</div> |
|||
</div> |
|||
</div> : "" |
|||
} else if (index == 3) { |
|||
return value?.deviceSerial ? <div style={{ width: "45%", height: "40%", backgroundSize: 'cover', position: "absolute", left: "45%", top: "49%" }}> |
|||
{this.renderVideo(value, index)} |
|||
<div style={{ width: "100%", height: "100%", position: "absolute", top: "80%" }}> |
|||
<div style={{ width: "100%", height: "20%", backgroundColor: "rgba(0,0,0,0.6)", overflow: "hiddden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}> |
|||
<img src='/assets/images/leadership/weizhis.png' style={{ width: "6%", height: "80%", marginLeft: "3%", marginRight: "3%" }} /> |
|||
{value?.deviceName} |
|||
</div> |
|||
</div> |
|||
</div> : "" |
|||
} else { |
|||
return undefined |
|||
} |
|||
}) |
|||
} |
|||
</li> |
|||
) |
|||
}) |
|||
} |
|||
</ul> |
|||
{/* <div className="control" style={{ width: "100%", height: "10%" }}> |
|||
<span style={{ position: "absolute", top: "86%", width: "3%", height: "8%" }} className="left" onClick={(e) => { this.previous(e) }}> |
|||
<img src='/assets/images/leadership/zuofanye.png' style={{ width: "100%", height: "100%" }} /> |
|||
</span> |
|||
<span style={{ position: "absolute", top: "86%", width: "3%", height: "8%", right: "6%" }} className="right" onClick={(e) => { this.next(e) }}> |
|||
<img src='/assets/images/leadership/youofanye.png' style={{ width: "100%", height: "100%" }} /> |
|||
</span> |
|||
</div> */} |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
componentWillReceiveProps (nextProps, oldProps) { |
|||
if (nextProps.videoCenterList && nextProps.videoCenterList.length && (!oldProps.videoCenterList || !oldProps.videoCenterList.length)) { |
|||
this.setState({ |
|||
imgs: nextProps.videoCenterList.slice(-4) |
|||
}) |
|||
} |
|||
} |
|||
componentDidMount () { //一开始自动播放
|
|||
setTimeout(() => { |
|||
this.start(); |
|||
}, 0) |
|||
} |
|||
|
|||
componentWillUnmount () { //销毁前清除定时器
|
|||
this.stop(); |
|||
} |
|||
stop = () => { //暂停
|
|||
let { timer } = this.state; |
|||
clearInterval(timer); |
|||
} |
|||
start = () => { //开始
|
|||
let { timer } = this.state; |
|||
timer = setInterval(() => { |
|||
this.next(); |
|||
}, 300000); |
|||
this.setState({ |
|||
timer |
|||
}) |
|||
} |
|||
change = (index) => { //点击下面的按钮切换当前显示的图片
|
|||
let { showIndex } = this.state; |
|||
showIndex = index; |
|||
this.setState({ |
|||
showIndex |
|||
}) |
|||
} |
|||
previous = (e) => { //上一张
|
|||
let ev = e || window.event; |
|||
let { showIndex, imgs } = this.state; |
|||
if (showIndex <= 0) { |
|||
showIndex = imgs.length - 1; |
|||
} else { |
|||
showIndex--; |
|||
} |
|||
this.setState({ |
|||
showIndex |
|||
}) |
|||
} |
|||
next = (e) => { //下一张
|
|||
let ev = e || window.event; |
|||
let { showIndex, imgs } = this.state; |
|||
if (showIndex >= imgs.length - 1) { |
|||
showIndex = 0; |
|||
} else { |
|||
showIndex++; |
|||
} |
|||
this.setState({ |
|||
showIndex |
|||
}) |
|||
} |
|||
} |
|||
|
|||
function mapStateToProps (state) { |
|||
const { videoCenterList } = state |
|||
|
|||
return { |
|||
videoCenterList: videoCenterList.data || [] |
|||
} |
|||
} |
|||
export default connect(mapStateToProps)(ReactCarousel) |
|||
Loading…
Reference in new issue