p3 p4

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

@@ -10,33 +10,50 @@ class Clappr extends Component{
     this.state={
     }
   }
+  componentWillUnmount() {
+    this['player'+this.props.id] && this['player'+this.props.id].destroy()
+  }
+  
   componentDidMount() {
     const source = this.props.source || "http://your.video/here.mp4"
-    const { id } = this.props
+    const { id, type } = this.props
     const _id = `#_player${id}`
+    if (!window['Clappr'] && window['ClapprLoading'] == true) {
+      setTimeout(() => {
+        this.componentDidMount()
+      }, 300)
+      return;
+    }
+    // && window['clappr-playback-rate-plugin']
     if (window['Clappr'] ) {
-        const player = new window.Clappr.Player({
+      // http://clappr.github.io/classes/Player.html#method_mute
+        this['player'+id] = new window.Clappr.Player({
             source: source, parentId: _id,
-            plugins: {
-                'core': [window.Clappr.MediaControl, window.Clappr.Playback]
-            }
+            height: type == 'mp3' ? 60 : 360,
+            hideMediaControl: type == 'mp3' ? false : true,
+            // plugins: {
+            //     'core': [window.Clappr.MediaControl, window['clappr-playback-rate-plugin'].default]
+            // }
         });
     } else {
+        window['ClapprLoading'] = true;
         $.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({
+                // $.getScript(
+                //     `${_url_origin}/javascripts/media/clappr-playback-rate-plugin.min.js`,
+                //     (data, textStatus, jqxhr) => {
+                        this['player'+id] = new window.Clappr.Player({
                             source: source, parentId: _id,
-                            plugins: {
-                                'core': [window.Clappr.MediaControl, window['clappr-playback-rate-plugin'].default]
-                            }
+                            height: type == 'mp3' ? 60 : 360,
+                            hideMediaControl: type == 'mp3' ? false : true,
+                            // plugins: {
+                            //     'core': [window.Clappr.MediaControl, window['clappr-playback-rate-plugin'].default]
+                            // }
                         });
 
-                })
+                // })
             
         });
 
@@ -62,7 +79,7 @@ class Clappr extends Component{
   
   render(){
     
-    let { source, id, className } = this.props;
+    let { source, id, className, type } = this.props;
     const _id = `_player${id}`
     return(
       <React.Fragment>
@@ -71,7 +88,7 @@ class Clappr extends Component{
                 margin-right: 16px;
             }
         `}</style>
-        <div id={_id} className={className}></div>
+        <div id={_id} className={className + ' ' + type}></div>
       </React.Fragment>
     )
   }

public/react/src/context/EvaluateSuccessEffectDisplay.js

@@ -1,4 +1,6 @@
 import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+
 import { Redirect } from 'react-router';
 
 import PropTypes from 'prop-types';
@@ -29,7 +31,11 @@ class EvaluateSuccessEffectDisplay extends Component {
         }
     }
     hidepicture = () => {
-        window.$('#picture_display').hide();
+        const dom = document.getElementById('picture_display');
+		ReactDOM.unmountComponentAtNode(dom)
+        // window.$('#picture_display').hide();
+
+        window.$('.data-tip-right').hide()
     }
     renderContent = () => {
 // qrcode
@@ -107,11 +113,11 @@ class EvaluateSuccessEffectDisplay extends Component {
                 <EffectDisplayContent
                     typeName="音频"
                     content1={ orignal_file[0] && orignal_file[0].file_url 
-                        ? <Clappr source={orignal_file[0].file_url} id="1" className="clappr"></Clappr> : null }
+                        ? <Clappr source={orignal_file[0].file_url} id="1" className="clappr" type="mp3"></Clappr> : null }
                     content2={ user_file[0] && user_file[0].file_url 
-                        ? <Clappr source={user_file[0].file_url} id="2" className="clappr"></Clappr> : null }
+                        ? <Clappr source={user_file[0].file_url} id="2" className="clappr" type="mp3"></Clappr> : null }
                     content3={ answer_file[0] && answer_file[0].file_url 
-                        ? <Clappr source={answer_file[0].file_url} id="3" className="clappr"></Clappr> : null }
+                        ? <Clappr source={answer_file[0].file_url} id="3" className="clappr" type="mp3"></Clappr> : null }
                 ></EffectDisplayContent>
             )
         } else if (type == 'mp4') {
@@ -119,11 +125,11 @@ class EvaluateSuccessEffectDisplay extends Component {
                 <EffectDisplayContent
                     typeName="视频"
                     content1={ orignal_file[0] && orignal_file[0].file_url 
-                        ? <Clappr source={orignal_file[0].file_url} id="1" className="clappr"></Clappr> : null }
+                        ? <Clappr source={orignal_file[0].file_url} id="1" className="clappr" type="mp4"></Clappr> : null }
                     content2={ user_file[0] && user_file[0].file_url 
-                        ? <Clappr source={user_file[0].file_url} id="2" className="clappr"></Clappr> : null }
+                        ? <Clappr source={user_file[0].file_url} id="2" className="clappr" type="mp4"></Clappr> : null }
                     content3={ answer_file[0] && answer_file[0].file_url 
-                        ? <Clappr source={answer_file[0].file_url} id="3" className="clappr"></Clappr> : null }
+                        ? <Clappr source={answer_file[0].file_url} id="3" className="clappr" type="mp4"></Clappr> : null }
                 ></EffectDisplayContent>
             )
         }