copy iconfont

public/react/src/common/course/ActionBtn.js

@@ -20,7 +20,7 @@ class ActionBtn extends Component {
             className={"Actionbtn "+`${map[style || 'blue']} ${this.props.className}`}
           >{children}</a>
           :
-          <Link to={to} className={"btn "+`${map[this.props.style]} ${this.props.className}`}>{this.props.children}</Link>
+          <Link to={to} className={"btn "+`${map[this.props.style]} ${this.props.className}`} {...others}>{this.props.children}</Link>
         }
       </React.Fragment>
     )

public/react/src/modules/user/usersInfo/common/HeadlessModal.js

@@ -32,8 +32,8 @@ function HeadlessModal (props) {
                 }
                 .headless .closeBtn {
                     position: absolute;
-                    top: -18px;
+                    top: -20px;
-                    right: -12px;
+                    right: -14px;
                     font-size: 24px !important;
                     color: ${theme.foreground_select}
                 }

public/react/src/modules/user/usersInfo/video/InfosVideo.js

@@ -8,6 +8,7 @@ import EditVideoModal from './EditVideoModal'
 import './InfosVideo.css'
 import InfoTab from '../common/InfoTab'
 import HeadlessModal from '../common/HeadlessModal'
+import ClipboardJS from 'clipboard'
 
 function useModal(initValue) {
     const [visible, setVisible] = useState(initValue)
@@ -38,8 +39,10 @@ function usePagination() {
     }
 }
 const PAGE_SIZE = 3
+const DEFAULT_VIDEO_WIDTH_IN_MD = "90%" // 400
+const DEFAULT_VIDEO_HEIGHT_IN_MD = "55%" // 400
 let videoId = {};
-
+let _clipboard = null;
 function InfoVideo (props) {
     const [videoes, setVideoes] = useState([])
     const [reviewVideoes, setReviewVideoes] = useState([])
@@ -53,7 +56,7 @@ function InfoVideo (props) {
     const editModalEl = useRef(null);
     const videoEl = useRef(null);
     
-
+    const { showNotification } = props;
     const username = props.match.params.username
 
     function fetchVideoes() {
@@ -107,10 +110,26 @@ function InfoVideo (props) {
         if (videoModalObj.visible == false) {
             // 关闭视频
             videoEl.current && videoEl.current.pause()
+            if (_clipboard) {
+                _clipboard.destroy();
+                _clipboard = null;
+            }
         } else {
+            setTimeout(() => {
+                if (!_clipboard) {
+                    _clipboard = new ClipboardJS('.copybtn');
+                    _clipboard.on('success', (e) => {
+                        showNotification('复制成功')
+                    });                    
+                }
+            }, 200)            
         }
     }, [videoModalObj.visible])
 
+    useEffect(() => {
+        
+    }, [])
+
     function editSuccess() {
         fetchVideoes()
     }
@@ -128,11 +147,16 @@ function InfoVideo (props) {
         videoId = { 
             videoId: item.id,
             title: item.title,
-            file_url: item.file_url
+            file_url: item.file_url,
+            cover_url: item.cover_url
+            
         }
         videoModalObj.setVisible(true)
     }
-    const _inputValue = `<video src="${videoId.file_url}" controls="true" controlslist="nodownload" width="400">您的浏览器不支持 video 标签。</video>`
+    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>`
+    }
+    const _inputValue = getCopyText(videoId.file_url, videoId.cover_url)
     return (
         <div className="educontent infoVideo">
             <EditVideoModal {...props} {...editModalObj}
@@ -154,7 +178,7 @@ function InfoVideo (props) {
                     <Input value={_inputValue}
                         className="dark"
                     ></Input>
-                    <ActionBtn>复制视频地址</ActionBtn>
+                    <ActionBtn className="copybtn" data-clipboard-text={_inputValue}>复制视频地址</ActionBtn>
                 </div>
             </HeadlessModal>
             <style>{`
@@ -233,6 +257,7 @@ function InfoVideo (props) {
                         key={item.id}
                         onEditVideo={onEditVideo}
                         onMaskClick={onMaskClick}
+                        getCopyText={getCopyText}
                         
                     >
                     </VideoInReviewItem>)

public/react/src/modules/user/usersInfo/video/VideoInReviewItem.js

@@ -4,6 +4,7 @@ import { getUrl2, isDev, CBreadcrumb, ActionBtn, ThemeContext } from 'educoder'
 import axios from 'axios'
 import moment from 'moment'
 import playIcon from './images/play.png'
+import ClipboardJS from 'clipboard'
 
 /**
 cover_url: "http://video.educoder.net/f6ba49c3944b43ee98736898e31b7d88/snapshots/12da3f7df07c499b8f0fc6dc410094e9-00005.jpg"
@@ -14,11 +15,22 @@ published_at: "2019-08-12 15:38:00"
 title: "测试标题"
 updated_at: "2019-08-12 17:17:09"
  */
+let _clipboard = null;
 function VideoInReviewItem (props) {
     const theme = useContext(ThemeContext);
-    const { history, cover_url, title, created_at, isReview
+    const { history, file_url, cover_url, title, created_at, isReview, id
-        , onEditVideo, onMaskClick } = props;
+        , onEditVideo, onMaskClick, getCopyText, showNotification } = props;
-    
+    useEffect(()=> {
+        if (!isReview) {
+            _clipboard = new ClipboardJS(`.copybtn_item_${id}`);
+            _clipboard.on('success', (e) => {
+                showNotification('复制成功')
+            });    
+        }
+        return () => {
+            _clipboard && _clipboard.destroy();
+        }
+    }, [])
     const username = props.match.params.username
     function toList() {
         history.push(`/users/${username}/videoes`)
@@ -43,10 +55,12 @@ function VideoInReviewItem (props) {
                     <span className="time">{moment(created_at).format('YYYY-MM-DD HH:mm:ss')}</span>
                     { isReview != true && <div>
                         <Tooltip title="编辑">
-                            <i className="icon-fuzhi iconfont" onClick={() => onEditVideo(props)}></i>
+                            <i className="icon-bianji1 iconfont" onClick={() => onEditVideo(props)}
+                                style={{    marginTop: '1px', display: 'inline-block'}}
+                            ></i>
                         </Tooltip>
                         <Tooltip title="复制视频地址">
-                            <i className="icon-fuzhi iconfont"></i>
+                            <i className={`icon-fuzhi iconfont copybtn_item_${id}`} data-clipboard-text={getCopyText(file_url, cover_url)}></i>
                         </Tooltip>
                     </div> }
                 </div>