feat:线上课扩展格式

e9a67d8c · zhangleyuan · a48e984c · e9a67d8c · e9a67d8c · e9a67d8c
Commit e9a67d8c authored Jul 09, 2021 by zhangleyuan
8 changed files
--- a/src/bu-components/PreviewFileModal.less
+++ b/src/bu-components/PreviewFileModal.less
@@ -33,6 +33,7 @@
            }
        }
        .operate{
+            display:inline-block;
            margin-top:24px;
            .btn {
                padding:5px 12px;

--- a/src/common/constants/academic/lessonEnum.js
+++ b/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";

--- a/src/data-source/base/request-apis.ts
+++ b/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,

--- a/src/domains/basic-domain/baseService.ts
+++ b/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
--- a/src/modules/course-manage/video-course/AddVideoCourse.jsx
+++ b/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'

--- a/src/modules/course-manage/video-course/VideoCourseDetail.tsx
+++ b/src/modules/course-manage/video-course/VideoCourseDetail.tsx
 /*
 * @Author: wufan
 * @Date: 2020-04-28 18:05:30
- * @LastEditors: wufan
+ * @LastEditors: Please set LastEditors
- * @LastEditTime: 2021-07-05 10:36:15
+ * @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,9 +79,9 @@ function VideoCourseDetail(){
      setCourseChapterList(courseChapterVOList);
    })
  }
+  async function handleScanFileModal(fileType: string = "MP4", fileObj:any){
-  function handleScanFileModal(fileType: string = "MP4", fileObj: Object){
+    const {fileVersionId,name,mediaUrl,id} = fileObj;
+    if(fileType === "VIDEO"){
      const scanFileModal = (
        <ScanFileModal
          fileType={fileType}
@@ -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>
 }

--- a/src/modules/course-manage/video-course/components/ChapterList.jsx
+++ b/src/modules/course-manage/video-course/components/ChapterList.jsx
@@ -12,7 +12,9 @@ function ChapterList(props){
                        <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>
                })

--- a/src/modules/prepare-lesson/modal/SelectPrepareFileModal.jsx
+++ b/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;