|
|
|
@ -1,6 +1,6 @@
|
|
|
|
import React, { useState, useEffect, useContext, useRef, memo } from 'react';
|
|
|
|
import React, { useState, useEffect, useContext, useRef, memo } from 'react';
|
|
|
|
import {Link} from 'react-router-dom';
|
|
|
|
import {Link} from 'react-router-dom';
|
|
|
|
import { Pagination, Input, Button } from 'antd'
|
|
|
|
import {Pagination, Input, Button} from 'antd'
|
|
|
|
import { getUrl2, isDev, ThemeContext, ActionBtn, NoneData } from 'educoder'
|
|
|
|
import { getUrl2, isDev, ThemeContext, ActionBtn, NoneData } from 'educoder'
|
|
|
|
import axios from 'axios'
|
|
|
|
import axios from 'axios'
|
|
|
|
import VideoInReviewItem from './VideoInReviewItem'
|
|
|
|
import VideoInReviewItem from './VideoInReviewItem'
|
|
|
|
@ -55,7 +55,7 @@ function InfoVideo (props) {
|
|
|
|
const [count, setCount] = useState(0)
|
|
|
|
const [count, setCount] = useState(0)
|
|
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
const [sortKey, setSortKey] = useState(_items[0].key)
|
|
|
|
const [sortKey, setSortKey] = useState(_items[0].key)
|
|
|
|
|
|
|
|
|
|
|
|
const editModalObj = useModal(false)
|
|
|
|
const editModalObj = useModal(false)
|
|
|
|
const videoModalObj = useModal(false)
|
|
|
|
const videoModalObj = useModal(false)
|
|
|
|
const categoryObj = useCategory('all')
|
|
|
|
const categoryObj = useCategory('all')
|
|
|
|
@ -64,7 +64,7 @@ function InfoVideo (props) {
|
|
|
|
const theme = useContext(ThemeContext);
|
|
|
|
const theme = useContext(ThemeContext);
|
|
|
|
const editModalEl = useRef(null);
|
|
|
|
const editModalEl = useRef(null);
|
|
|
|
const videoEl = useRef(null);
|
|
|
|
const videoEl = useRef(null);
|
|
|
|
|
|
|
|
|
|
|
|
const { showNotification, history } = props;
|
|
|
|
const { showNotification, history } = props;
|
|
|
|
const username = props.match.params.username
|
|
|
|
const username = props.match.params.username
|
|
|
|
|
|
|
|
|
|
|
|
@ -74,19 +74,19 @@ function InfoVideo (props) {
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
props.showProfessionalCertificationDialog()
|
|
|
|
props.showProfessionalCertificationDialog()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function fetchvideos() {
|
|
|
|
function fetchvideos() {
|
|
|
|
const fetchUrl = `/users/${username}/videos.json`
|
|
|
|
const fetchUrl = `/users/${username}/videos.json`
|
|
|
|
const sorts = sortKey.split('-')
|
|
|
|
const sorts = sortKey.split('-')
|
|
|
|
setLoading(true)
|
|
|
|
setLoading(true)
|
|
|
|
axios.get(fetchUrl, {
|
|
|
|
axios.get(fetchUrl, {
|
|
|
|
params: {
|
|
|
|
params: {
|
|
|
|
page: pageObj.current,
|
|
|
|
page: pageObj.current,
|
|
|
|
per_page: PAGE_SIZE,
|
|
|
|
per_page: PAGE_SIZE,
|
|
|
|
sort_by: sorts[0],
|
|
|
|
sort_by: sorts[0],
|
|
|
|
sort_direction: sorts[1],
|
|
|
|
sort_direction: sorts[1],
|
|
|
|
//
|
|
|
|
//
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
.then((response) => {
|
|
|
|
.then((response) => {
|
|
|
|
@ -96,14 +96,14 @@ function InfoVideo (props) {
|
|
|
|
setCount(response.data.count)
|
|
|
|
setCount(response.data.count)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}).catch(() => {
|
|
|
|
}).catch(() => {
|
|
|
|
|
|
|
|
setLoading(false)
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function fetchReviewvideos() {
|
|
|
|
function fetchReviewvideos() {
|
|
|
|
const fetchUrl = `/users/${username}/videos/review.json`
|
|
|
|
const fetchUrl = `/users/${username}/videos/review.json`
|
|
|
|
const sorts = sortKey.split('-')
|
|
|
|
const sorts = sortKey.split('-')
|
|
|
|
setLoading(true)
|
|
|
|
setLoading(true)
|
|
|
|
axios.get(fetchUrl, {
|
|
|
|
axios.get(fetchUrl, {
|
|
|
|
params: {
|
|
|
|
params: {
|
|
|
|
page: pageObj.current,
|
|
|
|
page: pageObj.current,
|
|
|
|
per_page: PAGE_SIZE,
|
|
|
|
per_page: PAGE_SIZE,
|
|
|
|
@ -121,7 +121,7 @@ function InfoVideo (props) {
|
|
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
useEffect(() => {
|
|
|
|
if (pageObj.current == 1) {
|
|
|
|
if (pageObj.current == 1) {
|
|
|
|
if (categoryObj.category == 'all') {
|
|
|
|
if (categoryObj.category == 'all') {
|
|
|
|
@ -158,22 +158,22 @@ function InfoVideo (props) {
|
|
|
|
_clipboard = new ClipboardJS('.copybtn');
|
|
|
|
_clipboard = new ClipboardJS('.copybtn');
|
|
|
|
_clipboard.on('success', (e) => {
|
|
|
|
_clipboard.on('success', (e) => {
|
|
|
|
showNotification('复制成功')
|
|
|
|
showNotification('复制成功')
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}, 200)
|
|
|
|
}, 200)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}, [videoModalObj.visible])
|
|
|
|
}, [videoModalObj.visible])
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
useEffect(() => {
|
|
|
|
|
|
|
|
|
|
|
|
}, [])
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
|
|
|
|
function editSuccess() {
|
|
|
|
function editSuccess() {
|
|
|
|
fetchvideos()
|
|
|
|
fetchvideos()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function onEditVideo(item) {
|
|
|
|
function onEditVideo(item) {
|
|
|
|
videoId = {
|
|
|
|
videoId = {
|
|
|
|
videoId: item.id,
|
|
|
|
videoId: item.id,
|
|
|
|
title: item.title
|
|
|
|
title: item.title
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -182,12 +182,12 @@ function InfoVideo (props) {
|
|
|
|
// this.refs['editVideoModal'].setVisible(true, video);
|
|
|
|
// this.refs['editVideoModal'].setVisible(true, video);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function onMaskClick(item) {
|
|
|
|
function onMaskClick(item) {
|
|
|
|
videoId = {
|
|
|
|
videoId = {
|
|
|
|
videoId: item.id,
|
|
|
|
videoId: item.id,
|
|
|
|
title: item.title,
|
|
|
|
title: item.title,
|
|
|
|
file_url: item.file_url,
|
|
|
|
file_url: item.file_url,
|
|
|
|
cover_url: item.cover_url
|
|
|
|
cover_url: item.cover_url
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
videoModalObj.setVisible(true)
|
|
|
|
videoModalObj.setVisible(true)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -201,20 +201,23 @@ function InfoVideo (props) {
|
|
|
|
function getCopyText (file_url, cover_url) {
|
|
|
|
function getCopyText (file_url, cover_url) {
|
|
|
|
return `<video src="${file_url}" controls="true" controlslist="nodownload" width="${DEFAULT_VIDEO_WIDTH_IN_MD}" height="${DEFAULT_VIDEO_HEIGHT_IN_MD}" poster="${cover_url}">您的浏览器不支持 video 标签。</video>`
|
|
|
|
return `<video src="${file_url}" controls="true" controlslist="nodownload" width="${DEFAULT_VIDEO_WIDTH_IN_MD}" height="${DEFAULT_VIDEO_HEIGHT_IN_MD}" poster="${cover_url}">您的浏览器不支持 video 标签。</video>`
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const _inputValue = getCopyText(videoId.file_url, videoId.cover_url)
|
|
|
|
|
|
|
|
|
|
|
|
const _inputValue = getCopyText(videoId.file_url, videoId.cover_url);
|
|
|
|
|
|
|
|
const sorts = sortKey.split('-')
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<div className="educontent infoVideo">
|
|
|
|
<div className="educontent infoVideo">
|
|
|
|
<EditVideoModal {...props} {...editModalObj}
|
|
|
|
<EditVideoModal {...props} {...editModalObj}
|
|
|
|
editSuccess={editSuccess}
|
|
|
|
editSuccess={editSuccess}
|
|
|
|
{...videoId}
|
|
|
|
{...videoId}
|
|
|
|
></EditVideoModal>
|
|
|
|
></EditVideoModal>
|
|
|
|
|
|
|
|
|
|
|
|
<HeadlessModal
|
|
|
|
<HeadlessModal
|
|
|
|
{...videoModalObj}
|
|
|
|
{...videoModalObj}
|
|
|
|
className="showVideoModal"
|
|
|
|
className="showVideoModal"
|
|
|
|
width={800 - 1}
|
|
|
|
width={800 - 1}
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<video
|
|
|
|
<video
|
|
|
|
autoplay="true"
|
|
|
|
autoplay="true"
|
|
|
|
ref={videoEl}
|
|
|
|
ref={videoEl}
|
|
|
|
src={videoId.file_url} controls="true" controlslist="nodownload">
|
|
|
|
src={videoId.file_url} controls="true" controlslist="nodownload">
|
|
|
|
@ -274,14 +277,16 @@ function InfoVideo (props) {
|
|
|
|
<Button type="primary" icon="upload"
|
|
|
|
<Button type="primary" icon="upload"
|
|
|
|
onClick={() => { toUpload() }}
|
|
|
|
onClick={() => { toUpload() }}
|
|
|
|
className="toUploadBtn"
|
|
|
|
className="toUploadBtn"
|
|
|
|
|
|
|
|
|
|
|
|
>
|
|
|
|
>
|
|
|
|
上传视频
|
|
|
|
上传视频
|
|
|
|
</Button>
|
|
|
|
</Button>
|
|
|
|
}
|
|
|
|
}
|
|
|
|
></InfoTab>
|
|
|
|
></InfoTab>
|
|
|
|
|
|
|
|
|
|
|
|
<div className="toolbarRow mt20 df">
|
|
|
|
<div className="toolbarRow df" style={{
|
|
|
|
|
|
|
|
lineHeight: "40px",
|
|
|
|
|
|
|
|
}}>
|
|
|
|
<span>
|
|
|
|
<span>
|
|
|
|
共
|
|
|
|
共
|
|
|
|
<span style={{color: theme.foreground_orange1}}> {count} </span>
|
|
|
|
<span style={{color: theme.foreground_orange1}}> {count} </span>
|
|
|
|
@ -297,21 +302,58 @@ function InfoVideo (props) {
|
|
|
|
|
|
|
|
|
|
|
|
{categoryObj.category == 'all' &&<div className="fr">
|
|
|
|
{categoryObj.category == 'all' &&<div className="fr">
|
|
|
|
<li className="drop_down">
|
|
|
|
<li className="drop_down">
|
|
|
|
<span className="color-grey-9 font-12">{sortKey=="published_at-desc"?"最新上传":"最早上传"}</span><i className="iconfont icon-xiajiantou font-12 ml2 color-grey-6"></i>
|
|
|
|
<span className="color-grey-9 font-12" style={{
|
|
|
|
<ul className="drop_down_normal">
|
|
|
|
marginRight: " 5px",
|
|
|
|
<li onClick={()=>onSortChange("published_at-desc",0)}>最新上传</li>
|
|
|
|
}}>{"最新上传"}</span>
|
|
|
|
<li onClick={()=>onSortChange("published_at-asc",1)}>最早上传</li>
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
<sapn className="relativef fr"
|
|
|
|
|
|
|
|
style={{
|
|
|
|
|
|
|
|
display: "flex",
|
|
|
|
|
|
|
|
flexDirection: "column",
|
|
|
|
|
|
|
|
height: "40px",
|
|
|
|
|
|
|
|
lineHeight: "40px",
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<span
|
|
|
|
|
|
|
|
style={{
|
|
|
|
|
|
|
|
flexDirection: "column",
|
|
|
|
|
|
|
|
textAlign: "center",
|
|
|
|
|
|
|
|
height: "10px",
|
|
|
|
|
|
|
|
lineHeight: "10px",
|
|
|
|
|
|
|
|
display: "table",
|
|
|
|
|
|
|
|
marginTop: "9px",
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<i className={sorts[1] === "asc" ?
|
|
|
|
|
|
|
|
"iconfont icon-sanjiaoxing-up font-12 color-blue h10 " : "iconfont icon-sanjiaoxing-up font-12 h10"}
|
|
|
|
|
|
|
|
onClick={() => onSortChange("published_at-asc", 0)}></i>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<span
|
|
|
|
|
|
|
|
style={{
|
|
|
|
|
|
|
|
flexDirection: "column",
|
|
|
|
|
|
|
|
height: "10px",
|
|
|
|
|
|
|
|
lineHeight: "10px",
|
|
|
|
|
|
|
|
textAlign: "center",
|
|
|
|
|
|
|
|
display: "table",
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<i className={sorts[1] === "desc" ?
|
|
|
|
|
|
|
|
"iconfont icon-sanjiaoxing-down font-12 yslbottomsj color-blue h10" : "iconfont icon-sanjiaoxing-down font-12 yslbottomsj h10"}
|
|
|
|
|
|
|
|
onClick={() => onSortChange("published_at-desc", 0)}></i>
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
</sapn>
|
|
|
|
</li>
|
|
|
|
</li>
|
|
|
|
</div>}
|
|
|
|
</div>}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{categoryObj.category == 'all' ?
|
|
|
|
{categoryObj.category == 'all' ?
|
|
|
|
<div className="itemWrap">
|
|
|
|
<div className="itemWrap">
|
|
|
|
{
|
|
|
|
{
|
|
|
|
videos == undefined ? '' :
|
|
|
|
videos == undefined ? '' :
|
|
|
|
videos.length ?
|
|
|
|
videos.length ?
|
|
|
|
videos.map((item, index) => {
|
|
|
|
videos.map((item, index) => {
|
|
|
|
return (<VideoInReviewItem
|
|
|
|
return (<VideoInReviewItem
|
|
|
|
{...props}
|
|
|
|
{...props}
|
|
|
|
@ -321,8 +363,8 @@ function InfoVideo (props) {
|
|
|
|
onEditVideo={onEditVideo}
|
|
|
|
onEditVideo={onEditVideo}
|
|
|
|
onMaskClick={onMaskClick}
|
|
|
|
onMaskClick={onMaskClick}
|
|
|
|
getCopyText={getCopyText}
|
|
|
|
getCopyText={getCopyText}
|
|
|
|
|
|
|
|
|
|
|
|
>
|
|
|
|
>
|
|
|
|
</VideoInReviewItem>)
|
|
|
|
</VideoInReviewItem>)
|
|
|
|
})
|
|
|
|
})
|
|
|
|
: <NoneData style={{width: '100%'}}></NoneData>
|
|
|
|
: <NoneData style={{width: '100%'}}></NoneData>
|
|
|
|
@ -332,7 +374,7 @@ function InfoVideo (props) {
|
|
|
|
<div className="itemWrap">
|
|
|
|
<div className="itemWrap">
|
|
|
|
{
|
|
|
|
{
|
|
|
|
reviewvideos == undefined ? '' :
|
|
|
|
reviewvideos == undefined ? '' :
|
|
|
|
reviewvideos.length ?
|
|
|
|
reviewvideos.length ?
|
|
|
|
reviewvideos.map((item, index) => {
|
|
|
|
reviewvideos.map((item, index) => {
|
|
|
|
return (<VideoInReviewItem
|
|
|
|
return (<VideoInReviewItem
|
|
|
|
{...props}
|
|
|
|
{...props}
|
|
|
|
@ -348,18 +390,18 @@ function InfoVideo (props) {
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{/* categoryObj.category == 'all' && */}
|
|
|
|
{/* categoryObj.category == 'all' && */}
|
|
|
|
{
|
|
|
|
{
|
|
|
|
count > PAGE_SIZE &&
|
|
|
|
count > PAGE_SIZE &&
|
|
|
|
<div className="mt30 mb50 edu-txt-center">
|
|
|
|
<div className="mt30 mb50 edu-txt-center">
|
|
|
|
<Pagination showQuickJumper total={count} pageSize={PAGE_SIZE}
|
|
|
|
<Pagination showQuickJumper total={count} pageSize={PAGE_SIZE}
|
|
|
|
{...pageObj}
|
|
|
|
{...pageObj}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@ -370,4 +412,4 @@ export default InfoVideo
|
|
|
|
您的浏览器不支持 video 标签。
|
|
|
|
您的浏览器不支持 video 标签。
|
|
|
|
</video>
|
|
|
|
</video>
|
|
|
|
|
|
|
|
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
|
