web
/
syzx
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix bug

Browse Source
master
zhengpengju 3 years ago
parent 8e4dd72592
commit 5f0eccb660
5 changed files with 125 additions and 129 deletions
Show Stats Download Patch File Download Diff File

16
admin/src/pages/examinationrules/normal/components/AutoSelector.tsx
Unescape View File

@ -78,7 +78,7 @@ const AutoSelector = (props: any, ref: any) => {
//key: 'code',
dataIndex: `type${item?.code}`,
render: ( item, { defaultRender, ...rest }, form) => {
return <Form.Item style={{margin:0}} ><InputNumber min={0} defaultValue={1}
return <Form.Item style={{margin:0}} ><InputNumber min={0} max={3} defaultValue={1} type='number'
onChange={(value)=>{
//
const _data = [];
@ -140,20 +140,6 @@ const AutoSelector = (props: any, ref: any) => {
// setDataSource
}}
toolBarRender={false}
/*
editable={{
type: 'multiple',
//editableKeys,
actionRender: (row, config, defaultDoms) => {
return [defaultDoms.delete];
},
onValuesChange: (record, recordList) => {
console.log('rrrr',record, recordList)
// setDataSource(recordList);
},
//onChange: setEditableRowKeys,
}}
*/
/>
</>
);

2
admin/src/pages/questionbank/index.tsx
Unescape View File

@ -664,7 +664,7 @@ const QuestionBank = () => {
valueType: 'select',
dataIndex: 'tag_ids',
fieldProps: {
mode: "multiple"
//mode: "multiple"
},
request: async () => {
const { data: Items } = await queryTagList({});

80
web/src/pages/course/components/VideoJS.tsx
Unescape View File

@ -0,0 +1,80 @@
import React, {forwardRef, useEffect,useImperativeHandle,useState} from "react";
import videojs from "video.js";
import "video.js/dist/video-js.css";
import "videojs-contrib-hls";
// React.forwardRef 接受渲染函数作为参数。React 将使用 props 和 ref 作为参数来调用此函数。此函数应返回 React 节点。
const VideoJS = ( props: any, ref: any) => {
//const [count,setCount]=useState(0);
//const countRef=React.useRef(count);
const videoRef = React.useRef(null);
const playerRef = React.useRef<any>(null);
const { options, onReady, } = props;
useEffect(() => {
if (!playerRef.current) {
const videoElement = videoRef.current;
if (!videoElement) return;
const player = playerRef.current = videojs(videoElement, options, () => {
// console.log("player is ready");
onReady && onReady(player);
});
} else {
// you can update player here [update player through props]
const player = playerRef.current;
player.src(options.sources[0].src);
// player.autoplay(true);
videoRef.current.addEventListener('play',()=>{
console.log('播放');
//setCount(player.currentTime());
//playerRef.current.currentTime(count)
// player.currentTime(count)
// getTime(player.currentTime());
// saveLearning();
});
videoRef.current.addEventListener('pause',()=>{
console.log('停止了')
})
}
}, [options]);
// useEffect(()=>{
// videoRef.current.addEventListener()
// },[]);
/*
useEffect(()=>{
countRef.current=count;
},[count])
*/
/*
if(count!==0){
if(countRef.current.toFixed(2)!==count.toFixed(2)){
// console.log('countRef.current前一次',countRef.current.toFixed(2));
// console.log('count这一次',count.toFixed(2))
getTime(count.toFixed(2));
saveLearning(count);
}
}
*/
// 暴露组件的方法 接受外部获取的ref
useImperativeHandle(ref, () => ({
// 构造ref的获取数据方法
currentTime: (time: number) => {
if(time){
playerRef?.current?.currentTime(time)
}
return playerRef?.current?.currentTime() || 0
},
}));
return (
<div data-vjs-player>
<video style={{
width:'100%',
height:'auto'
}} ref={videoRef} className="video-js vjs-big-play-centered" />
</div>
);
}
// forwardRef这个组件能够将其接受的 ref 属性转发到其组件树下
export default forwardRef( VideoJS );

68
web/src/pages/course/components/VideoJS/index.tsx
Unescape View File

@ -1,68 +0,0 @@
import React, {useEffect,useState} from "react";
import videojs from "video.js";
import "video.js/dist/video-js.css";
import "videojs-contrib-hls";
export const VideoJS = ( props: any ) => {
const [count,setCount]=useState(0);
const countRef=React.useRef(count);
const videoRef = React.useRef(null);
const playerRef = React.useRef<any>(null);
const { options, onReady,saveLearning,getTime } = props;
React.useEffect(() => {
if (!playerRef.current) {
const videoElement = videoRef.current;
if (!videoElement) return;
const player = playerRef.current = videojs(videoElement, options, () => {
// console.log("player is ready");
onReady && onReady(player);
});
} else {
// you can update player here [update player through props]
const player = playerRef.current;
player.src(options.sources[0].src);
// player.autoplay(true);
videoRef.current.addEventListener('play',()=>{
console.log('播放');
setCount(player.currentTime());
playerRef.current.currentTime(count)
// player.currentTime(count)
// getTime(player.currentTime());
// saveLearning();
});
videoRef.current.addEventListener('pause',()=>{
console.log('停止了')
})
}
}, [options]);
// useEffect(()=>{
// videoRef.current.addEventListener()
// },[]);
React.useEffect(()=>{
countRef.current=count;
},[count])
if(count!==0){
if(countRef.current.toFixed(2)!==count.toFixed(2)){
// console.log('countRef.current前一次',countRef.current.toFixed(2));
// console.log('count这一次',count.toFixed(2))
getTime(count.toFixed(2));
saveLearning(count);
}
}
return (
<div data-vjs-player>
<video style={{
width:'100%',
height:'auto'
}} ref={videoRef} className="video-js vjs-big-play-centered" />
</div>
);
}

88
web/src/pages/course/detail/index.tsx
Unescape View File

@ -9,10 +9,11 @@ import styles from './style.less';
import { Content } from 'antd/lib/layout/layout';
import Sider from 'antd/lib/layout/Sider';
import SubMenu from 'antd/lib/menu/SubMenu';
import { VideoJS } from '../components/VideoJS';
import { useRef } from 'react';
import {listMyLearningChapterCourse1, viewCourseGetMyLearning,saveMyLearning} from './service';
import cookie from 'react-cookies';
import VideoJS from '../components/VideoJS';
const { Paragraph } = Typography;
const CardList = () => {
@ -64,7 +65,6 @@ const CardList = () => {
});
});
/** 首次页面 当data 变化 执行run， chapterCourse 变化 进行currentCourse赋值 */
useEffect(() => {
if(data !== undefined && data !== null){
@ -162,52 +162,50 @@ const CardList = () => {
</Col>
<Col span={18} style={{background:'#ffffff', padding:24}}>
{
videoInfo.url && <VideoJS
options={{
controls: true,
playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
autoplay: false, // 如果true,浏览器准备好时开始回放。
muted: false, // 默认情况下将会消除任何音频。
loop: true, // 导致视频一结束就重新开始。
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
language: 'zh-CN',
aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
sources: [
{
// src: 'http://10.10.24.121:8000/dsideal_yy/html/'+videoInfo.url,
src: videoInfo.url,
type: 'application/x-mpegURL'
}
],
poster: videoInfo.img, // 你的封面地址
width: document.documentElement.clientWidth,
notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: true,
fullscreenToggle: true // 全屏按钮
}
}}
onReady={(play: any)=>{
console.log('play====',play);
videoRef.current = play;
play.play()
}}
saveLearning={()=>{saveLearning()}}
getTime={(info)=>{
// setTime(info);
time=info;
console.log('接收的秒数',info)
}}
/>
}
videoInfo.url && <VideoJS
options={{
controls: true,
playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
autoplay: false, // 如果true,浏览器准备好时开始回放。
muted: false, // 默认情况下将会消除任何音频。
loop: true, // 导致视频一结束就重新开始。
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
language: 'zh-CN',
aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
sources: [
{
// src: 'http://10.10.24.121:8000/dsideal_yy/html/'+videoInfo.url,
src: videoInfo.url,
type: 'application/x-mpegURL'
}
],
poster: videoInfo.img, // 你的封面地址
width: document.documentElement.clientWidth,
notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: true,
fullscreenToggle: true // 全屏按钮
}
}}
ref={videoRef}
/>
}
</Col>
</Row>
<a onClick={()=>{
const data = videoRef?.current?.currentTime();
console.log('getData', data)
}}>videoRef get</a>
<a onClick={()=>{
const data = videoRef?.current?.currentTime(300);
console.log('setData', data)
}}>videoRef set</a>
</PageContainer>
);
};

Write Preview
Loading…
Cancel
Save