vedio

public/react/src/common/components/media/Clappr.js

@@ -0,0 +1,79 @@
+import React,{ Component } from "react";
+import { getUrl2 } from "educoder";
+
+const $ = window.$
+let _url_origin = getUrl2()
+
+class Clappr extends Component{
+  constructor(props){
+    super(props);
+    this.state={
+    }
+  }
+  componentDidMount() {
+    const source = this.props.source || "http://your.video/here.mp4"
+    const { id } = this.props
+    const _id = `#_player${id}`
+    if (window['Clappr']) {
+        const player = new window.Clappr.Player({
+            source: source, parentId: _id,
+            plugins: {
+                'core': [window.Clappr.MediaControl, window.Clappr.Playback]
+            }
+        });
+    } else {
+        $.getScript(
+            `${_url_origin}/javascripts/media/clappr.min.js`,
+            (data, textStatus, jqxhr) => {
+                window.clappr = window.Clappr
+                $.getScript(
+                    `${_url_origin}/javascripts/media/clappr-playback-rate-plugin.min.js`,
+                    (data, textStatus, jqxhr) => {
+                        const player = new window.Clappr.Player({
+                            source: source, parentId: _id,
+                            plugins: {
+                                'core': [window.Clappr.MediaControl, window['clappr-playback-rate-plugin'].default]
+                            }
+                        });
+
+                })
+            
+        });
+
+        //
+        // $.when(
+        //     $.getScript( `${_url_origin}/javascripts/media/clappr.min.js` ),
+        //     // $.getScript( `${_url_origin}/javascripts/media/clappr-thumbnails-plugin.js` ),
+        //     $.getScript( `${_url_origin}/javascripts/media/clappr-playback-rate-plugin.min.js` ),
+        //     $.Deferred(function( deferred ){
+        //         $( deferred.resolve );
+        //     })
+        // ).done(function(){
+        //     //place your code here, the scripts are all loaded
+        //     const player = new window.Clappr.Player({
+        //         source: source, parentId: _id,
+        //         plugins: {
+        //             'core': [window.Clappr.MediaControl, window.Clappr.Playback]
+        //         }
+        //     });
+        // }); 
+    }
+  }
+  
+  render(){
+    
+    let { source, id, className } = this.props;
+    const _id = `_player${id}`
+    return(
+      <React.Fragment>
+        <style>{`
+            .playback_rate {
+                margin-right: 16px;
+            }
+        `}</style>
+        <div id={_id} className={className}></div>
+      </React.Fragment>
+    )
+  }
+}
+export default Clappr;

public/react/src/common/educoder.js

@@ -53,6 +53,8 @@ export { default as MarkdownToHtml } from './components/markdown/MarkdownToHtml'
 
 export { default as DMDEditor } from './components/markdown/DMDEditor'
 
+export { default as Clappr } from './components/media/Clappr'
+
 
 
 export { default as ImageLayerHook } from './hooks/ImageLayerHook'

public/react/src/context/EffectDisplayContent.js

@@ -0,0 +1,50 @@
+import React, { Component } from 'react';
+
+class EffectDisplayContent extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+        }
+    }
+
+    render() {
+        const { typeName, content1, content2, content3 } = this.props;
+        return (
+            <div className="task-popup-content effectDisplay">
+                <style>{`
+                    .effectDisplay .content_title {
+                        flex: 1 1 0
+                    }
+                    .effectDisplay .content>div {
+                        flex: 1
+                    }
+                    .effectDisplay .clappr {
+                        display: flex;
+                        justify-content: center;
+                    }
+                    .effectDisplay .clappr>div {
+                        width: 400px !important;
+                    }
+                `}</style>
+                <div className="clearfix df">
+                    {content1 && <p className="content_title edu-txt-center fl  mr03precent font-18">原始{typeName}</p>}
+                    {content2 && <p className="content_title edu-txt-center fl font-18  mr03precent">实际输出{typeName}</p>}
+                    {content3 && <p className="content_title edu-txt-center fl font-18  mr03precent">预期输出{typeName}</p>}
+                </div>
+                <div className="clearfix df content" >
+                    {content1 && <div className="fl  mr03precent pt10 mb50">
+                        {content1}
+                    </div>}
+                    {content2 && <div className="fl  mr03precent pt10 mb50">
+                        {content2}
+                    </div>}
+                    {content3 && <div className="fl  mr03precent pt10 mb50">
+                        {content3}
+                    </div>}
+                </div>
+            </div> 
+        );
+    }
+}
+
+export default EffectDisplayContent;

public/react/src/context/EvaluateSuccessEffectDisplay.js

@@ -2,9 +2,9 @@ import React, { Component } from 'react';
 import { Redirect } from 'react-router';
 
 import PropTypes from 'prop-types';
-
+import { Clappr } from 'educoder'
 import axios from 'axios';
-
+import EffectDisplayContent from './EffectDisplayContent'
 class EvaluateSuccessEffectDisplay extends Component {
     constructor(props) {
         super(props)
@@ -35,7 +35,8 @@ class EvaluateSuccessEffectDisplay extends Component {
 // qrcode
         // const type = 'image' // 'qrcode'
         const { type, qrcode_str,
-            answer_picture, orignal_picture, user_picture, contents } = this.props;
+            answer_picture, orignal_picture, user_picture, contents,
+            user_file, answer_file, orignal_file } = this.props;
         if (type == 'qrcode') {
             // 单张图片，比如安卓评测完显示qrcode 
             return (
@@ -88,7 +89,31 @@ class EvaluateSuccessEffectDisplay extends Component {
             return (
                 <iframe id="_displayIframe"></iframe>
             )
-        }
+        } else if (type == 'mp3') {
+            return (
+                <EffectDisplayContent
+                    typeName="音频"
+                    content1={ orignal_file[0] && orignal_file[0].file_url 
+                        ? <Clappr source={orignal_file[0].file_url} id="1" className="clappr"></Clappr> : null }
+                    content2={ user_file[0] && user_file[0].file_url 
+                        ? <Clappr source={user_file[0].file_url} id="2" className="clappr"></Clappr> : null }
+                    content3={ answer_file[0] && answer_file[0].file_url 
+                        ? <Clappr source={answer_file[0].file_url} id="3" className="clappr"></Clappr> : null }
+                ></EffectDisplayContent>
+            )
+        } else if (type == 'mp4') {
+            return (
+                <EffectDisplayContent
+                    typeName="视频"
+                    content1={ orignal_file[0] && orignal_file[0].file_url 
+                        ? <Clappr source={orignal_file[0].file_url} id="1" className="clappr"></Clappr> : null }
+                    content2={ user_file[0] && user_file[0].file_url 
+                        ? <Clappr source={user_file[0].file_url} id="2" className="clappr"></Clappr> : null }
+                    content3={ answer_file[0] && answer_file[0].file_url 
+                        ? <Clappr source={answer_file[0].file_url} id="3" className="clappr"></Clappr> : null }
+                ></EffectDisplayContent>
+            )
+        } 
 
         /* <div className="with49 fr">
             <p className="font-18 mb20 edu-txt-center">预期输出</p>