From 3796a79fe04102bc157fc9e20f66a92e6e616334 Mon Sep 17 00:00:00 2001
From: caicai8 <1149225589@qq.com>
Date: Tue, 10 Mar 2020 15:56:57 +0800
Subject: [PATCH] issue

---
 .../react/src/modules/courses/Video/Video.js  |  2 +-
 .../user/usersInfo/video/VideoInReviewItem.js | 38 ++++++++++---------
 .../user/usersInfo/video/VideoUploadList.js   | 20 ++++++----
 3 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/public/react/src/modules/courses/Video/Video.js b/public/react/src/modules/courses/Video/Video.js
index e9a90c918..89c0a0c6f 100644
--- a/public/react/src/modules/courses/Video/Video.js
+++ b/public/react/src/modules/courses/Video/Video.js
@@ -94,7 +94,7 @@ class Video extends Component {
     let videoId = {
       videoId: item.id,
       title: item.title,
-      file_url: item.file_url,
+      file_url: (item.play_url || item.file_url),
       cover_url: item.cover_url
     }
     this.setState({
diff --git a/public/react/src/modules/user/usersInfo/video/VideoInReviewItem.js b/public/react/src/modules/user/usersInfo/video/VideoInReviewItem.js
index b045f54b8..6849db062 100644
--- a/public/react/src/modules/user/usersInfo/video/VideoInReviewItem.js
+++ b/public/react/src/modules/user/usersInfo/video/VideoInReviewItem.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useContext, memo } from 'react';
-import { Progress, Input, Tooltip } from 'antd'
+import { Progress, Input, Tooltip , Spin } from 'antd'
 import { getUrl2, isDev, CBreadcrumb, ActionBtn, ThemeContext } from 'educoder'
 import axios from 'axios'
 import moment from 'moment'
@@ -20,7 +20,7 @@ let _clipboard = null;
 const clipboardMap = {}
 function VideoInReviewItem (props) {
     const theme = useContext(ThemeContext);
-    const { history, file_url, cover_url, title, created_at, published_at, isReview, id
+    const { history, file_url , play_url , cover_url , transcoded , title, created_at, published_at, isReview, id
         , onEditVideo, onMaskClick, getCopyText, showNotification,vv,play_duration,operation , deleteVideo , moveVideo ,link} = props;
     useEffect(()=> {
         if (!isReview) {
@@ -44,24 +44,26 @@ function VideoInReviewItem (props) {
     function toUpload() {
         history.push(`/users/${username}/videos/upload`)
     }
+    const imgUrl = (!transcoded && !link) ? defaultImg : (cover_url || defaultImg);
     return (
         <div className={`${isReview ? 'videoInReviewItem' : 'nItem'} videoItem`}>
+            <Spin tip="正在转码，请稍等..." spinning={!transcoded && !link}>
+                <img className="cover" src={imgUrl} alt=""></img>
+                { link ? 
+                    <a href={link} target='_blank' className="otherLinkPanel">
+                        <span className="otherLink">外链</span>
+                    </a> 
+                    : "" 
+                }
 
-            <img className="cover" src={cover_url || defaultImg} alt=""></img>
-            { link ? 
-                <a href={link} target='_blank' className="otherLinkPanel">
-                    <span className="otherLink">外链</span>
-                </a> 
-                : "" 
-            }
-
-            {!isReview && <div className="mask" onClick={() => onMaskClick(props)}></div>}
-            {!isReview && !link &&
-            <div className="playWrap" onClick={() => onMaskClick(props)}>
-                <img className="play mp23" src={playIcon}></img>
-                {play_duration===0?"":<div className={"play_duration"}>累计学习时长：{play_duration} h</div>}
-            </div>
-            }
+                {!isReview && <div className="mask" onClick={() => onMaskClick(props)}></div>}
+                {!isReview && !link && transcoded &&
+                <div className="playWrap" onClick={() => onMaskClick(props)}>
+                    <img className="play mp23" src={playIcon}></img>
+                    {play_duration===0?"":<div className={"play_duration"}>累计学习时长：{play_duration} h</div>}
+                </div>
+                }
+            </Spin>
             <div className="square-main">
                 <div className="title overflowHidden1"
                     title={title && title.length > 20 ? title : ''}
@@ -106,7 +108,7 @@ function VideoInReviewItem (props) {
                         {
                             !link ?
                             <Tooltip title="复制视频地址" placement="bottom">
-                                <i className={`icon-fuzhi iconfont copybtn_item_${id}`} data-clipboard-text={getCopyText(file_url, cover_url)}></i>
+                                <i className={`icon-fuzhi iconfont copybtn_item_${id}`} data-clipboard-text={getCopyText((play_url || file_url), cover_url)}></i>
                             </Tooltip>:""
                         }
                         
diff --git a/public/react/src/modules/user/usersInfo/video/VideoUploadList.js b/public/react/src/modules/user/usersInfo/video/VideoUploadList.js
index 606ba9f32..3c053166a 100644
--- a/public/react/src/modules/user/usersInfo/video/VideoUploadList.js
+++ b/public/react/src/modules/user/usersInfo/video/VideoUploadList.js
@@ -57,9 +57,12 @@ function VideoUploadList (props) {
 
     }
     function onUploadChange (e) {
-        var file = e.target.files[0]
+        var file = e.target.files[0];
+        setLoading(true);
+
         if (!file) {
             // alert("请先选择需要上传的文件!")
+            setLoading(false);
             return
         }
         // avi、flv、f4v、m4v、mov、mp4、rmvb、swf、webm
@@ -71,6 +74,7 @@ function VideoUploadList (props) {
             && file.name.indexOf('.webm') == -1
         ) {
             showNotification(`不支持的视频格式`)
+            setLoading(false);
             clearInput()
             return;
         }
@@ -79,7 +83,8 @@ function VideoUploadList (props) {
 
         }else if (file.size >(parseInt(MAX_FILE_SIZE) * 1024 * 1024)) {
             // 超过500m TODO
-            clearInput()
+            clearInput();
+            setLoading(false);
             showNotification(`视频大小超过${MAX_FILE_SIZE}M`)
             return;
         }
@@ -91,7 +96,8 @@ function VideoUploadList (props) {
             }
         })
         if (gotTheSameFileName) {
-            clearInput()
+            clearInput();
+            setLoading(false);
             showNotification(`你不能上传同一个视频文件名称，请重新选择。`)
             return;
         }
@@ -106,7 +112,6 @@ function VideoUploadList (props) {
                 // 重新创建  才会用最新的 dispatch
                 create: !uploader,
                 addFileSuccess: (uploadInfo) => {
-                    setLoading(true);
                     const file = uploadInfo.file;
                     console.log('addFileSuccess', uploadInfo)
                     // const newvideos = [...videos, {
@@ -435,9 +440,10 @@ function VideoUploadList (props) {
                 >继续添加</ActionBtn>}
 
                 <div className={`description ${noUploads ? 'noUploads' : ''}`}>
-                    <div className="">视频大小：不支持断点续传，单个视频文件最大500M；单次最多支持3个视频文件上传 </div>
-                    <div className="">视频规格：avi、flv、f4v、m4v、mov、mp4、rmvb、swf、webm </div>
-                    <div className="">温馨提示：请勿上传违法视频。平台将为每一个视频分配一个地址，您可以通过引用该地址将视频使用在实训项目等模块</div>
+                <div class="description ">
+                    <div>上传说明：目前不支持断点续传，单个视频文件最大限制500M，单次最多支持3个视频文件上传 </div>
+                    <div>视频规格：avi、flv、f4v、m4v、mov、mp4、rmvb、swf、webm </div>
+                    <div>温馨提示：<span class="color-orange-tip">为了更好播放的体验，建议您优先上传MP4格式。如果您是自己录制视频，建议您保存的时候将视频编码设置为AVC(H264)</span></div></div>
                 </div>
 
                 {!noUploads && <React.Fragment>