|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 1.6 MiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 347 B |
|
After Width: | Height: | Size: 325 B |
|
After Width: | Height: | Size: 411 B |
|
After Width: | Height: | Size: 321 B |
|
After Width: | Height: | Size: 27 KiB |
@ -0,0 +1,52 @@ |
|||
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 }) => { |
|||
const [videoWidth, setVideoWidth] = useState() |
|||
const [videoHeight, setVideoHeight] = useState() |
|||
useEffect(() => { |
|||
|
|||
const resize_ = () => { |
|||
setVideoWidth(document.getElementById('videoo').clientWidth) |
|||
setVideoHeight(document.getElementById('videoo').clientHeight) |
|||
} |
|||
resize_() |
|||
window.addEventListener('resize', resize_); //只要窗口殴大小发生像素变化就会触发 |
|||
return () => { |
|||
window.removeEventListener('resize', resize_); |
|||
} |
|||
|
|||
}, []) |
|||
useEffect(() => { |
|||
setVideoWidth(document.getElementById('videoo').clientWidth) |
|||
setVideoHeight(document.getElementById('videoo').clientHeight) |
|||
}, [pageSize]) |
|||
console.log(videoWidth, videoHeight); |
|||
return ( |
|||
<div style={{ width: videoWidth || '100%', height: videoHeight || '100%', padding: 5 }}> |
|||
<VideoPlay sizeWh={{ |
|||
width: videoWidth - 10, |
|||
height: videoHeight - 10, |
|||
parentWidth: videoWidth - 10, |
|||
parentHeight: videoHeight - 10, |
|||
}} |
|||
videoObj={videoObj} |
|||
videoStyle='true' |
|||
containerId={videoObj.name} |
|||
local={true} /> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
function mapStateToProps (state) { |
|||
const { auth } = state; |
|||
return { |
|||
user: auth.user, |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(Container) |
|||
@ -0,0 +1,52 @@ |
|||
import React, { useEffect, useRef,useState } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { TreeSelect, Tree, Form, Button, Popover, Tag, Switch, Input, Row, Col } from '@douyinfe/semi-ui'; |
|||
import Container from "./container"; |
|||
|
|||
|
|||
const VideoCard = ({ data, pageSize }) => { |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
let span = 8 |
|||
let rowsCount = 2 |
|||
if (pageSize === 1) { |
|||
span = 24 |
|||
rowsCount = 1 |
|||
} |
|||
if (pageSize === 4) { |
|||
span = 12 |
|||
rowsCount = 2 |
|||
} |
|||
if (pageSize == 6) { |
|||
span = 8 |
|||
rowsCount = 2 |
|||
} |
|||
if (pageSize == 12) { |
|||
span = 6 |
|||
rowsCount = 3 |
|||
} |
|||
let cheight = Math.floor(100 / rowsCount) + "%" |
|||
console.log(pageSize,span,cheight); |
|||
return ( |
|||
<> |
|||
<Col id="videoo" span={span} style={{ height: cheight, }}> |
|||
<Container |
|||
videoObj={data} |
|||
pageSize={pageSize} |
|||
/> |
|||
</Col> |
|||
</> |
|||
) |
|||
} |
|||
|
|||
function mapStateToProps (state) { |
|||
const { auth } = state; |
|||
return { |
|||
user: auth.user, |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(VideoCard) |
|||
@ -0,0 +1,18 @@ |
|||
.KJBlue { |
|||
.semi-tree-option, |
|||
.semi-icon, |
|||
.semi-form-field-label-text { |
|||
color: #fff; |
|||
} |
|||
.semi-checkbox-inner-display { |
|||
//树状多选框 |
|||
border: 1px solid #fff; |
|||
} |
|||
input { |
|||
background: #01185f; |
|||
box-shadow: inset 0px 0px 5px 1px rgba(28, 96, 254, 0.4); |
|||
} |
|||
input::placeholder { |
|||
color: #fff; |
|||
} |
|||
} |
|||