Skip to content

X
xiaomai-cloud-class-web
Commit e9a67d8c by zhangleyuan
Options

feat:线上课扩展格式

parent a48e984c
Showing with 117 additions and 41 deletions
src/bu-components/PreviewFileModal.less
......@@ -33,6 +33,7 @@
}
}
.operate{
display:inline-block;
margin-top:24px;
.btn {
padding:5px 12px;
......
src/common/constants/academic/lessonEnum.js
......@@ -133,13 +133,13 @@ const FileTypeIcon = {
PPTX: "https://image.xiaomaiketang.com/xm/847pFAdYGW.png",
PDF: "https://image.xiaomaiketang.com/xm/rrEJMNkhTG.png",
MP3: "https://image.xiaomaiketang.com/xm/ykjnSWDyQ6.png",
MP4: "https://image.xiaomaiketang.com/xm/TKwbQGYDBR.png",
MP4: "https://image.xiaomaiketang.com/xm/yK3ASiS8ch.png",
JPG: "https://image.xiaomaiketang.com/xm/XRkX8JBTPs.png",
JPEG: "https://image.xiaomaiketang.com/xm/XRkX8JBTPs.png",
PNG: "https://image.xiaomaiketang.com/xm/XRkX8JBTPs.png",
GIF: "https://image.xiaomaiketang.com/xm/XRkX8JBTPs.png",
BMP: "https://image.xiaomaiketang.com/xm/XRkX8JBTPs.png",
VIDEO: "https://image.xiaomaiketang.com/xm/TKwbQGYDBR.png"
VIDEO: 'https://image.xiaomaiketang.com/xm/yK3ASiS8ch.png'
};
const UploadIcon = "https://image.xiaomaiketang.com/xm/4DXNrZWWsd.png";
......
src/data-source/base/request-apis.ts
......@@ -2,7 +2,7 @@
* @Author: wufan
* @Date: 2020-12-01 17:21:21
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-06-22 14:56:34
* @LastEditTime: 2021-07-09 15:33:33
* @Description: Description
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -62,6 +62,9 @@ export function saveYoZoFileVersionId(params: object) {
export function yoZoUpload(ossUrl:String,appId:String,uploadSign:String){
return axios.post(`https://dmc.yozocloud.cn/api/file/http?fileUrl=${ossUrl}&appId=${appId}&sign=${uploadSign}`)
}
export function saveFileVersionIdByCourseChapter(params: object) {
return Service.Hades('public/hades/saveFileVersionIdByCourseChapter', params);
}
export const getOssClient = (
data: object,
instId: string,
......
src/domains/basic-domain/baseService.ts
......@@ -2,12 +2,12 @@
* @Author: wufan
* @Date: 2020-12-01 17:20:49
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-06-22 14:57:01
* @LastEditTime: 2021-07-09 15:33:59
* @Description: Description
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import { getUserStore, getUserPermission ,logout,getStoreUser,sendBizAuthCode,editUserPhone,checkBizAuthCode,sendNewPhoneAuthCode,sendLoginAuthCode,login,getLastedVersion, getEnterpriseUser,getWXWorkLoginNoCheck,getLesseeVersionMsg,getYoZoSign,saveYoZoFileVersionId,yoZoUpload} from '@/data-source/base/request-apis';
import { getUserStore, getUserPermission ,logout,getStoreUser,sendBizAuthCode,editUserPhone,checkBizAuthCode,sendNewPhoneAuthCode,sendLoginAuthCode,login,getLastedVersion, getEnterpriseUser,getWXWorkLoginNoCheck,getLesseeVersionMsg,getYoZoSign,saveYoZoFileVersionId,yoZoUpload,saveFileVersionIdByCourseChapter} from '@/data-source/base/request-apis';
export default class StoreService {
// 获取员工列表
......@@ -73,4 +73,7 @@ export default class StoreService {
static yoZoUpload(ossUrl:String,appId:String,uploadSign:String){
return yoZoUpload(ossUrl,appId,uploadSign);
}
static saveFileVersionIdByCourseChapter(params: any){
return saveFileVersionIdByCourseChapter(params);
}
}
\ No newline at end of file
src/modules/course-manage/video-course/AddVideoCourse.jsx
......@@ -2,7 +2,7 @@
* @Author: 吴文洁
* @Date: 2020-08-05 10:07:47
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-07-09 11:20:49
* @LastEditTime: 2021-07-09 16:17:21
* @Description: 线上课新增/编辑页
* @Copyright: 杭州杰竞科技有限公司 版权所有
*/
......@@ -136,7 +136,7 @@ class AddVideoCourse extends React.Component {
const { courseName, shelfState, whetherVisitorsJoin, courseMediaVOS, categoryOneName, categoryTwoName, categoryId, courseChapterVOList =[] } = result
let coverId
let coverUrl
let videoDuration
// let videoDuration
// let videoName
let scheduleMedia = []
let scheduleVideoUrl
......@@ -175,7 +175,7 @@ class AddVideoCourse extends React.Component {
coverId,
coverUrl,
// videoName,
videoDuration,
// videoDuration,
scheduleMedia,
courseName,
scheduleVideoUrl,
......@@ -201,9 +201,8 @@ class AddVideoCourse extends React.Component {
}
handleGoBack = () => {
const { coverId,videoDuration, courseName, scheduleMedia, courseChapterList, categoryId, shelfState, whetherVisitorsJoin } = this.state
const { coverId,courseName, scheduleMedia, courseChapterList, categoryId, shelfState, whetherVisitorsJoin } = this.state
if (
videoDuration ||
!courseChapterList.length ||
!_.isEqual(scheduleMedia, defaultScheduleMedia) ||
categoryId ||
......@@ -273,13 +272,11 @@ class AddVideoCourse extends React.Component {
// 显示预览弹窗
handleShowPreviewModal = () => {
const { coverUrl, scheduleVideoUrl, courseName, scheduleMedia, videoDuration, introduce, courseChapterList, categoryName } = this.state
const { coverUrl, scheduleVideoUrl, courseName, scheduleMedia,introduce, courseChapterList, categoryName } = this.state
const courseBasinInfo = {
coverUrl,
scheduleVideoUrl,
courseName,
videoDuration
}
const courseIntroInfo = {
liveCourseMediaRequests: scheduleMedia,
......@@ -316,8 +313,10 @@ class AddVideoCourse extends React.Component {
let _courseChapterList = [...courseChapterList];
selectedFileList.map((file,index) => {
console.log('')
const { ossUrl, resourceId, folderName, folderFormat, folderSize } = file;
if(folderFormat === 'VIDEO'){
console.log('folderFormat',folderFormat);
if(folderFormat === 'MP4'){
const videoDom = document.createElement('video')
videoDom.src = ossUrl
videoDom.onloadedmetadata = () => {
......@@ -340,7 +339,6 @@ class AddVideoCourse extends React.Component {
}
}else{
const suffix = _.last(folderName.split('.')).toUpperCase();
console.log('suffix',suffix);
_courseChapterList.push({
mediaContent: resourceId,
contentType: 'SCHEDULE',
......@@ -351,9 +349,6 @@ class AddVideoCourse extends React.Component {
sort: _courseChapterList.length
})
this.setState({
// size: folderSize,
// videoName: folderName,
// videoType: folderFormat,
courseChapterList: _courseChapterList
})
}
......@@ -413,7 +408,7 @@ class AddVideoCourse extends React.Component {
coverId,
pageType,
// videoName,
videoDuration,
// videoDuration,
courseName,
scheduleMedia,
categoryId,
......@@ -426,7 +421,7 @@ class AddVideoCourse extends React.Component {
const commonParams = {
// videoName,
videoDuration,
videoDuration:0, //后端的必要参数，不能传空
scheduleMedia: scheduleMedia.filter((item) => !!item.mediaContent),
categoryId,
courseName,
......@@ -840,7 +835,7 @@ class AddVideoCourse extends React.Component {
_.map(courseChapterList,(item,index) => {
return <div className='course-ware' key={index}>
<div className="course-ware__index">{`0${index + 1 } `}</div>
{/* <img className='course-ware__img' src={courseWareIcon} alt='' /> */}
<img className='course-ware__img' src={FileTypeIcon[item.mediaType]} alt='' />
<div className='course-ware__name'>{item.mediaName && item.mediaName.length > 24 ? <Tooltip title={item.mediaName}>{item.mediaName}</Tooltip>:item.mediaName}</div>
<div className="course-chapter__opt" id={item.id}>
<div className={`up ${Number(index) === 0 ? 'disabled':''}`} onClick={()=> this.handleChangeIndex(true,item.sort,item.id)}>上移</div>
......@@ -978,6 +973,7 @@ class AddVideoCourse extends React.Component {
operateType='select'
selectTypeList={selectTypeList}
accept={accept}
queryTypeEnum={'ONLINE'}
confirm={{
title: '文件过大，无法上传',
content: '为保障学员的观看体验，上传的视频大小不能超过2G'
......
src/modules/course-manage/video-course/VideoCourseDetail.tsx
/*
* @Author: wufan
* @Date: 2020-04-28 18:05:30
* @LastEditors: wufan
* @LastEditTime: 2021-07-05 10:36:15
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-07-09 15:32:13
* @Description: 线上课课程课节详情
*/
......@@ -12,12 +12,15 @@ import { withRouter } from "react-router-dom";
import CourseService from '@/domains/course-domain/CourseService'
import underscore from 'underscore';
import ScanFileModal from '@/modules/resource-disk/modal/ScanFileModal.jsx';
import { FileTypeIcon } from '@/common/constants/academic/lessonEnum'
import BaseService from "@/domains/basic-domain/baseService";
import {YZ_APPId,YZ_PREVIEW_URL} from '@/domains/basic-domain/constants';
import PreviewFileModal from '@/bu-components/PreviewFileModal';
import './VideoCourseDetail.less';
declare var getParameterByName: any;
declare var window: any;
const FileTypeIconMap:any = FileTypeIcon
function VideoCourseDetail(){
const courseId = window.getParameterByName("courseId"); // 课程ID
const [coverUrl,setCoverUrl] = useState("");
......@@ -27,7 +30,10 @@ function VideoCourseDetail(){
const [courseName,setCourseName] = useState("");
const [categoryName,setCategoryName] = useState("");
const [scanFileModal,setScanFileModal] = useState<any>(null);
const [showPreviewModal,setShowPreviewModal] = useState(false); //是否显示loading
const [previewing,setPreviewing] = useState(false); //是否正在预览
const [previewStatus,setPreviewStatus] = useState('UPLOAD'); //预览文件的生成状态
const [url,setUrl] = useState('');
useEffect(()=>{
handleFetchScheudleDetail(courseId);
},[courseId])
......@@ -73,10 +79,10 @@ function VideoCourseDetail(){
setCourseChapterList(courseChapterVOList);
})
}
function handleScanFileModal(fileType: string = "MP4", fileObj: Object){
const scanFileModal = (
async function handleScanFileModal(fileType: string = "MP4", fileObj:any){
const {fileVersionId,name,mediaUrl,id} = fileObj;
if(fileType === "VIDEO"){
const scanFileModal = (
<ScanFileModal
fileType={fileType}
item={fileObj}
......@@ -86,6 +92,64 @@ function VideoCourseDetail(){
/>
);
setScanFileModal(scanFileModal)
}else{
if(!fileVersionId){
setShowPreviewModal(true);
setPreviewing(true);
setPreviewStatus('UPLOAD');
const uploadParams ={
fileUrl:mediaUrl,
yoZoTypeEnum:'UPLOAD'
}
const uploadSign:any = await BaseService.getYoZoSign(uploadParams);
BaseService.yoZoUpload(mediaUrl,YZ_APPId,uploadSign).then(async function (response){
const saveParams ={
fileVersionId:response.data.data.fileVersionId,
courseChapterId:id
}
BaseService.saveFileVersionIdByCourseChapter(saveParams);
if(previewing){
const previewParams ={
fileVersionId:response.data.data.fileVersionId,
yoZoTypeEnum:'VIEW',
htmlTitle:name
}
const previewSign = await BaseService.getYoZoSign(previewParams);
const url = `${YZ_PREVIEW_URL}?fileVersionId=${response.data.data.fileVersionId}&appId=${YZ_APPId}&sign=${previewSign}&htmlTitle=${name}`
setPreviewStatus('UPLOAD_SUCCESS');
setUrl(url)
}
})
}else{
const previewParams ={
fileVersionId,
yoZoTypeEnum:'VIEW',
htmlTitle:name
}
const previewSign = await BaseService.getYoZoSign(previewParams);
const url = `${YZ_PREVIEW_URL}?fileVersionId=${fileVersionId}&appId=${YZ_APPId}&sign=${previewSign}&htmlTitle=${name}`
const a = document.createElement('a');
document.body.appendChild(a);
a.setAttribute('href', url);
a.setAttribute('target', '_blank');
a.click();
document.body.removeChild(a)
}
}
}
// function previewingSet(){
// return new Promise(async (resolve) => {
// setShowPreviewModal(true);
// setPreviewing(true);
// setPreviewStatus('UPLOAD');
// resolve(true);
// })
// }
function cancelPreview(){
setShowPreviewModal(false);
setPreviewing(false);
setPreviewStatus('UPLOAD');
}
......@@ -116,9 +180,9 @@ function VideoCourseDetail(){
<If condition={courseChapterList.length > 0}>
{
underscore.map(courseChapterList,(item: any,index: number) => {
return <div className='course-ware' onClick={()=>{handleScanFileModal("MP4",item)}} key={index}>
return <div className='course-ware' onClick={()=>{handleScanFileModal(item.mediaType,item)}} key={index}>
<div className="course-ware__index">{`${index > 9 ? index + 1 : `0${index + 1 }`} `}</div>
<img className='course-ware__img' src='https://image.xiaomaiketang.com/xm/TKwbQGYDBR.png' alt='' />
<img className='course-ware__img' src={FileTypeIconMap[item.mediaType]} alt='' />
<div className='course-ware__name'>{item.name}</div>
</div>
})
......@@ -127,6 +191,9 @@ function VideoCourseDetail(){
</div>
</div>
</div>
{ showPreviewModal &&
<PreviewFileModal onCancel={()=>cancelPreview()} previewStatus={previewStatus} url={url}/>
}
{scanFileModal}
</div>
}
......
src/modules/course-manage/video-course/components/ChapterList.jsx
......@@ -7,15 +7,17 @@ function ChapterList(props){
return <div className='chapter-list-component'>
<If condition={courseChapterList.length > 0}>
{
_.map(courseChapterList,(item,index) => {
return <div className='course-ware'>
<div className='course-ware__index'>{`0${index + 1 } `}</div>
<div className="course-ware__detail">
<div className='course-ware__detail__name'>{item.mediaName}</div>
<div className='course-ware__detail__duration'>{window.formatDuration(item.videoDuration)}</div>
_.map(courseChapterList,(item,index) => {
return <div className='course-ware'>
<div className='course-ware__index'>{`0${index + 1 } `}</div>
<div className="course-ware__detail">
<div className='course-ware__detail__name'>{item.mediaName}</div>
{ item.mediaType === 'VIDEO' &&
<div className='course-ware__detail__duration'>{window.formatDuration(item.videoDuration)}</div>
}
</div>
</div>
</div>
})
})
}
</If>
......
src/modules/prepare-lesson/modal/SelectPrepareFileModal.jsx
......@@ -101,7 +101,7 @@ class SelectPrepareFileModal extends React.Component {
// 获取文件列表
handleFetchFolderList = (params = {}, loadMore = false) => {
// 根据当前根节点获取文件列表
const { selectTypeList } = this.props;
const { selectTypeList,queryTypeEnum} = this.props;
const { query, folderList, currentRootDisk } = this.state;
const _params = {
...query,
......@@ -114,6 +114,9 @@ class SelectPrepareFileModal extends React.Component {
if (selectTypeList) {
_params.folderFileType = selectTypeList
}
if(queryTypeEnum){
_params.queryTypeEnum = queryTypeEnum
}
Service.Hades(FOLDERLIST_URL_MAP[currentRootDisk.disk], _params).then((res) => {
const { result = {} } = res;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment