joywok-material-components
Version:
<h1 align="center"> Joywok Material Components </h1>
289 lines (285 loc) • 19.5 kB
JavaScript
import React from 'react';
import request from '../utils/request';
import EditImage from '../editimage';
import Jwfuploader from './fuploader';
import { Button, Grid, LinearProgress } from '@material-ui/core';
require('./style/audio.css');
class UploadAudio extends React.Component{
jwFormatFSize = (fileSize)=> {
if( fileSize==undefined ) return '0B';
if (fileSize < 1024) {
return fileSize + 'B';
} else if (fileSize < (1024*1024)) {
var temp = fileSize / 1024;
temp = temp.toFixed(2);
return temp + 'KB';
} else if (fileSize < (1024*1024*1024)) {
var temp = fileSize / (1024*1024);
temp = temp.toFixed(2);
return temp + 'MB';
} else {
var temp = fileSize / (1024*1024*1024);
temp = temp.toFixed(2);
return temp + 'GB';
}
}
formatAudioTime = (time)=>{
var ret = time%60;
var minute = time%3600;
var hours = time%86400;
if(time>3600) minute = time%3600;
if(time>86400) hours = time%86400;
ret = Math.floor(minute/60)+':'+ret;
if(time>3600) ret = Math.floor(hours/3600)+':'+ret;
ret = (ret+'').replace(/\b(\w)\b/g,'0$1');
if(time>86400) ret = Math.floor(time/86400)+'D '+ret;
return ret;
}
defaultCover(){
return 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAN4AAACYCAYAAACLZlfGAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAA3qADAAQAAAABAAAAmAAAAAATLdwrAAAWk0lEQVR4Ae1dbW8dRxUeX9vxS+w4dZo0lKRpoUWlKqBKCIkP8Mv4BUh8QeITAoFAAiGBAPFegUSbtirQVhRQX1NM0zShcVM3ThzH1y/sc4+fO7N7d+/uztwsu54zkT2z83LOmWfOM2d2711n6qlnvnZgNCkCikBjCCxMzzzQa0ybKlIEFIEhAkq8IRRaUASaQ0CJ1xzWqkkRGCKgxBtCoQVFoDkElHjNYa2aFIEhAkq8IRRaUASaQ0CJ1xzWqkkRGCKgxBtCoQVFoDkElHjNYa2aFIEhAkq8IRRaUASaQ0CJ1xzWqkkRGCKgxBtCoQVFoDkElHjNYa2aFIEhAkq8IRRaUASaQ0CJ1xzWqkkRGCKgxBtCoQVFoDkElHjNYa2aFIEhAkq8IRRaUASaQ0CJ1xzWqkkRGCKgxBtCoQVFoDkElHjNYa2aFIEhAkq8IRRaUASaQ0CJ1xzWqkkRGCKgxBtCoQVFoDkEZppTpZomgcDUwqwxq4tmanHWHGz3zcGNO8bc3pmEaJXRIAJKvAbBDlXVO7dipi/cZ0xvKhGFPwCe5Bf2zf57N83e2keh4nV8gwgo8RoEO0TV9OpxM/PIaiICpEM6zKemTe98QsbtXbN3bVOa9HfrEdB7vNYvkRg489BJ0xv8SwJeUtVLiGfzKTNzHqTU1BUElHgdWKmpqYRYx+cOyQbCTQ3iHXPEvpn55PAyO92B2aiJQECPml3wg+SertfDHsljJoxG+fA+D5dJ6s30zH5/Ty70d6sRUOK1enmscYhuo8RDO8mYJqEdqaU2IqDEa+Oq5NgE4gm1SLRsnjNIq1qLgBKvtUuTNgwPVtIJNEQdciSJiVLW321HQInX9hVK7ENsE9qhRKJlIx6vOzAhNVEfrnTFB/Lv8eTwKXMgIbsyo7jt1IjXkfW3B0k3srll26MjU4raTCVeR5Zf7vGyEQ7EY6RzSdiRSUVsphKvI4tv7/FoMB+sSEv2Mz320rydCCjx2rkuI1bZe7xshNNINwJWByqUeB1YJJhoj5puhGPUQw/5GhlKmtqPgBKv/WuUWChfiE5/bsdIl807MaHojVTidcAFQK38iIcWHj07MBE1cYgAzy3DCi2EITBzbNbMLS4YvFEwyTQ9iHpTBrmUe8McpMQ94CQ04svYc8cXTW9a33SY5PplZWnEyyLieb1034o5++h5Mzt/bCDhYP/AbFy9bv679r452N/3lGqHgVQutUgym4ftoTPHjiX2P2SWV5cTRSJ16+Ztc+2td83dreTPS2iaKAJhqzVRU7orbOX0qrnw5KNmfn5+EHkQfaaTyHHqkw8k9Y8lEyM9/OcImYxsUpb38lgWDX56ZmZmzKef+qxZObWS/FWJ5I32wb8ps3RiOal/fBDB/S3XkXkIKPHyUKlR1+tNm3OPXhgQDhGJRKDzLq+cMKfOnq4hMb+ryMW9HnXI8VL0SNmPdsacfeS8OZYcka0OuaeEc0z3Zsy5xx7ON0prvRFQ4nlDJwMXlhcNIoZ1WhKDJDFm+WRyfAtMkC+xaFQ+FhHtvulEckwW+0lm6LD2H18+fvgirq8GHZdFQO/xsojUvObxctyw+YWFcc2V2kgs3uchP0j+8RplnzQ1lTxMmZP7UhmfQ+Dknm8uOUbf2dryUaFjchBQ4uWAUqeKx8s8ImTr6sjN9iXx3HqSDnUSo9zWquWDJLohvoG4IF0+gSf8kLaqcUe2nxJvAktLUqSJIJEDdWwPUVVFRk6sqqRS7jc4mnmlodrJEwElnidwHAY3LSNFWTtlFeV5OrLRVI6afqQJta/Ibq0vRkCJV4xNpZbiiAYSyPHNjYSVhOZ0yiOHK9ct5wwfW5UnOzvAj9JZKXpNBJR4RMIzh0PimyT5d0jirnKU81RwOKyMHCCeHznyj8KQ5j68mcRnkWEIHK3RSrzA9RSHt06f5/xlpKliwiRk5OmBvUWy7azyRmpdCAJKvBD0DscWOS5FT8KBoQMkyX/mSE1+eZn9kJq3ofhp01FAQIkX6AfjIgZFV3Fs9i3KeZzlsTX/aFs0enx9nn0kuRJuPHa+rUo8X+QOxyEOudGIjuoSI8+x66qFHsrGWJaZu3V1ZRfZ58quK1P7j0dAiTcen9JWOCcd13VUlpGnKVMqMqdD/gOQ0Y7UOtoyrqZs48BYP8njtMbdFj3xZmdmTX+37+0F1SKet/jBQDg9vqfpPmVkWT6/C5NftnGI9MlQD99r3d3dDTP4CIyOknizyeI//sij5syp02Zudtbs9Pvm6vp18+a/3zb9vfpOUea44RFPIo4rh2Wb+0cl3j+CWkUPb0Joh1ekHrvwKfPgmbNmLnnvr58Qb/2jG+a1S2+au/04/xvp6IgH0n3lqS+ZhXl8cVnuxOZmj5mHP/FJc/rkqrn4yl/Mbg3y4WFHmeOSmCEb9agM9y4Skv2pAfJyNPMQW92x+BL2l7/wRbOyZN/QmEtOGedOPyB4v/yiubNz1x0SRZkPyaKYLCb55Kc+Y5bmkz9tkLha+jWbKbO8sGieeAQvrlZP+BMPkAUgbS5kJClBzNAksqnL2o45cB6+OrKycQ2bmYfY/5nzD5vVpRNDWdQFqs8nG97nH3vC1+xOj4uOeGdXzyRLLo7F3HWyT5w6U29Bk8ADOXwVFblbRltINKIxJIHruCjzn5TZu17uzr9Ivu/WATwFH7GU8pmfuW918LZ+PYu73zuqo+bCsbnBLstlc52JX/paTO5BjiVHoZ3KD1wkMlBmXg4nC00iw75/B4k8bEI2yr5JKCHSBAdIymrwk75yfGkQ7YpG409NLC0smY9v3yzqciTroyJe7/BYiJXMuhVdepDXePkMckCKUXkiEU8dJ3GsEOJBi03ulehwa2y/shIinjt/29+V55Ztj7LSTHKPJwnj7VbhXk3XwLtMX1faoyIeFsWNPq4rsYyc5SqLiL6U6Y6TshDSra8iM6+PS+689pA6iXgiocjWovoyvcTGomol2VKZlKPXHh3x+KCAe2/IEQ3uAKeViGGjKOt5eMPDj9BEB6azIuccIFs+1/PTQtl+o8eP4tyJRSje47V1pzUy4tm9HVSAE5ASvh9IgwBWanpfJzHQHpIwWshBiSLNlRqiQzYOezS20tP6fOZAUo/iC+tFvjsPHx1dHBMV8awDy1K5C07HZV51MdE/L+LBqUQW8vAkDlwsqbilXDfsFFtlE8EIyOMMeI28bqJdeAQlEmWrS8tnr7rSu9s/KuJhmYqOmuIIjFj1HEHclrs3ciQbU7nrS73fb9ddIQE6GUVwHRKbYF96/iKPM4B834SPVpBEPumdll8PbV9L2jUuOuKRBHRa5JLElUm9qssEpxEy030kd2lInVVl5vWTzwYlZrDdunFdqylBclKDH6mgNj0bt0bGVP3tzp0yXWluXVWZR6FfdMSjs2Zzdw+u4wyQI7IYc4TIrLPtYe7C+zA6clobZLOmnh7MVaISxtsYB7u5OUFiHUzQn4n2YrxrIWXbjY8j4sijIh4W3x41sw8T6HSy/1ddfnFcoZc4lrgoy+LOUldVZl4/0SNvKKDdJTavfbXIjEfnLzryrKleR+KJjXac2CoafO220rpXiop47uKPv9mvt5DiuHAiu6ezjHwSjsWoJHbTvklIlogHSe7DFGpg7qvJbmOigbHTooV6X+m0rnt5dMQr/lyJbgfyVE9wIPf+y7oQS3jqad2vumS3J5+cSoRwW1gOObJJVPKbP/UX5Zy7HC1txJaYzXNB0eijWx8Z8eC4Qojswcq6HQlTbdHROy/i2TsaSA5LGC8/+M2NgWXksEHywUXNX3L/KMgUW+snn6OwOYF8ErmJjpwLapp7JLpHRjySBGsHR7NHQ5eIdJYqKwwp2NW5d5MW9viEHnUk5mt1o6r0gCZajRp/LRhJSbKJgBiyFTGS+s6ARMta6OrzlQ2ZXU1REQ8LXOXoU2cxIRPRZtRRbR0f6NSRm+0rhABFhNqgiuiUFkv47Mjy67RsoYHMKSySQjPnDvsg2dppzxjoF1uKinhYXMaFrGPRibnD13EEiRhCCR75IIfHK3HlOhJH+45GPDsX9BbtfpokYoMI7j2YEIWW+Em2MgR3kk1sFzKixVc6reteHh3xZHfHQmG5uQ/TQeq7AFwmL2KIK4m8+lJHHYl200XFeuvItjQ6tqwGslx7pT9qLD5lMorauRGJvYI6+srGhBWwMbBIxlGsj5B4pAkWnw6HpbUubcvlSw4JbjSiFO7myOl85dKKe9j7SOnjRlTUhOiQ4yAtl9y1v9iq8hZrF7EW+aifFDblVrSvR1TEw5JbRyDtsPz+SWRivN3T5Yp1jIi49k+0nRGCj0Mkr7NVjNogVEjXCzFwXJZW0ibdq/zKHU8yY5Qb8fL0l0vudo+oiIelsjf74kqgXzaN1mR72GtIybtH4v2SxEMeFO24uiVxYOv+KGUduY7drn73yaOtBzKwO2xjsg+zZNOjNLHVzsfqjaMUGfHsQmd3dOzA4sx0jeoOACeiZDcnMbjrV5c42lPIAYkkcZoYjHyjI8trsBll5+9uHOUSintw7ln5Mg/Ox3fLKNbb9paoiIflpSNgYUgSKcvuXteBIYO7OuQwyVEq/ZSQbXVz2C3ksDaT1MiR3LlITfXfsnGk54862YpEDq59EsfRPjfnHNjHR35Xx0RFPCwSSSKLbg9SWUeruqAYl+c4PKYhzz/KVdUg/USPPfpBJsmNHowo9aRKb8jKzl9khz915NxFvsUK+EMrNw4fu7s8JjriMeLRUZEz5RGIbUV5UcST/iJxumhwjXrYjX+0lmXkSIhOvomHV1dCltiWMvW02HtqeVBDvIV0UufqrSe9u72jIx4XOetYLhHZp+qy1u1fVa7bjw9wGEFgL+eAfiE2ULaQWaidJbavfI6jrUX2u3ONoRwd8exRM+u49h6HUaWKA8Cx4EzIMY6O5hKZUbaKvKI+1MOI4R5lMYZ6i8aPq8fYrDyJofZoO278uDbOPUtkwYoRPMT6cdrb2xYV8TZ37pj9/b3kT4bjACSL7eZwht29PbPVr/6faECKHNWsa2G5Xel0PtT7JkYlN2KALCQi5Pq5L6TAdiEB8bDS/KRynje3t8zJ+eODSytbNitG7Y27t9g9mpzH+ygmvHewb65s3hg8YIGzwZmRi+PJzf67Nz9IOXMZMPxPS0BlkQm5Ips5yVIma1w77WRO25GzPG58UZtsHEIJ4oC6vJ8iGePqr2yuD+2jnaJH8Ppwa9Pc7m+PE3Ek26IiHlbwV5deNAf7BylnoEOg/tfv/LXeQidhkmRwc9ehUQ5LQgzYmUcI1KHNN3H+zKGFZeT48U2/W3sp+T8H+wMZtFNkJzYf9MwvL73gK7rT4/wR7ei0r9z+0Hz3X0+bje1bKSfGkeg7//y9ubb1Ua2Z4f9jgCPRqUgM1KCMPBRkK0eihMhMl0UvftdPGOXOwS2LXERAP9k3tjfNd/7xB7O+dfMQC7F7e2fH/PC1P5m3Nt6vb/ARGBHVPR7X662NK+brf/upObd0yty/sGKu39kwV27dMLsHe+xSOYc7ggjphwXiqHzAMqmjJpwfepCk7H7ELfU+v7lJpKVhu4C20G3DmLXND8w3Xv6ZefD4KfPA4knzUULGy7fWzc5+/f9912d+bRwTJfGwECAZHAI/QSnxTSHf6AfaIJyQL0jDYLCQwyWePHdkHCIhfTQhwsmDDsh3JVG6j9T0GNxfX751ffCTbonzKlriTWq5EXnyIgajB3K0hybK4JEvG/FCCA7rXLmwFXWgIC1njjZN4Qgo8QIxhEPi6WXWVYUIEkHo1CGqEJVcKkiEsh8nhBxnRXbaOpGfjYDpPnrlj4ASzx+7w5GglVCLUQ4NLE8q4gm1LdFI5mzuM528aMZjsiV0Xi8fbToGCCjxAv0A7ph3j4SjIaMGj4khqiADukBkJFwxquIaZXswRE31ZGVbCZAmcxA5SrvqeFbpqcSrgtKYPnBI+bGEQHchhuSTIB6Os0IGMSZLDJJHWuv9Lts46knT3lUQUOJVQWlMHxAsff8FSsjdGCPGJKJFVha0QK5oE4JDr08q2zh8ZOqY8Qgo8cbjU6mVsU46yxUfhSAPjXgkBmVCjxBRXqvBtRw1Uaqfih4O8T4PEmVW9WXriHwElHj5uFSuhUPmOa7EIrRaclQWmtMRRON9HZpFMmqY3DLrquV2pJXGCBu6aVSzIL5eSrzANYfT5jmujRG2NUSVvQ9D3JMIx6gXIhdjef8oZBZpsNp9eGPnE6pNxwMBJV6gH8BZ8yIenZZ5oJpBZHOPfqMRyUarurpAMh5jhdYSr6kD8vyl17Umjv5KvMB13uzfSZxSoho/u4NIlpHfmsBrL4xKPPrJU00hiJ1CfXrgq3N3d/tmcWZuYHURxW4m7zJqmhwC3OAmJzEySZc2/2t6B4gY+Mccr9JIGfk7m9eCURknX3QJ+X0UvZPMAZTlBiJloSDKHyZfat7o3/YRrWMKEFDiFQBTtRoO+ZsrLw+OakI8+T4/nBjgfryzZX575ZWq4gr7gQAgGEkBXSiLTn6kUTh8bMNP1p5PQqe8owgd2Z8fr10cO14b6yOgxKuP2ciIH609Z55+/9XBi50kAvKrybt9X//XL8zN3fBjmisXZSG25PJ7xKzKFW/fuma++fpvB0di6oFM/BmMH7zzjHnu+huVZWnHagjoPV41nMb2wn3Sty/90fzu6t/NZ088aJZnF8xa8grMqxv/Mf2kLTRZktl7OtSlH9zwy2R+2l5Yf9P8c+Nd87mTD5lzi6fMB9sfJ9eXzfrOpp9AHTUWASXeWHjqNV7eWjf4uReJUQ5kQ8Ixkw9wcB1GO0gwZnN32zyfEFDTvUdAiXfvMZ6IBhAPCZGOeTbiCR0Hzfqr5Qgo8Vq+QDQPDzzcJB8nyBenUU9Cun203F4ElHjtXZuUZSCWHC+lGk/F+FkeO6apyVrN24iAEq+Nq5Jjk9zjuQ9XpEyyyZ1fzkCtaiUCSrxWLsuoUThqZiNcthdJmK3X6/YhoMRr35rkWoSIB+KRXCwz0rE+d7BWtg4BJV7rlmTUIJAKd3i8r0MPlvkNCBJwdLTWtBEBJV4bVyXHpuxTzZwuWtUhBJR4HVmssqMmpqEfKXRkMRMzlXgdWSscN4V8cqhkGbmm7iGgxOvAmm3v9wf/w1GvJ68eWZMt6UDHzQl8GdvK1tK9RID35vdSh8oORGA3+X8H3r6dvPc3eMCChyyjP/hS80Z/K1CTDm8KASVeU0gH6vneu88evo8n32EB+eRJp5Dw+5efDdSgw5tEQInXJNoBup658br51r+fTo6c+8MXYgdPOpMXWH9w+aL5+bWXAqTr0KYR0Hu8phEP0Pf99y6aP3/4uvnq6uPm4cX7zXvbN8xzN94yb9y+GiBVh/4/EFDi/T9QD9C5dmfdrF25GCBBh7YBAT1qtmEV1IboEFDiRbfkOuE2IKDEa8MqqA3RIaDEi27JdcJtQECJ14ZVUBuiQ0CJF92S64TbgIASrw2roDZEh4ASL7ol1wm3AQElXhtWQW2IDgElXnRLrhNuAwJKvDasgtoQHQJKvOiWXCfcBgSUeG1YBbUhOgSUeNEtuU64DQgo8dqwCmpDdAgo8aJbcp1wGxBQ4rVhFdSG6BBQ4kW35DrhNiCgxGvDKqgN0SGgxItuyXXCbUBAideGVVAbokNAiRfdkuuE24CAEq8Nq6A2RIeAEi+6JdcJtwGB/wEeTgn5LyKokgAAAABJRU5ErkJggg==';
}
constructor(props){
super(props);
this.state = {
audioUploading: 0, // 0 未选择文件 1 正在上传 2 上传完成
audioFile: null,
audioPlaying: false,
showAudioCoverDilog: false,
audioDefaultCover: this.defaultCover(),
transing: false,
format: this.props.format || ['.mp3'], // ['.mp3', '.wav', '.aac', '.ogg', '.ape', '.flac', '.ra', '.midi', '.mid', '.rmi', '.xmi', '.vqf', '.tvq', '.au', '.aiff', '.mod', '.cda', '.wma', '.asf']
editImageConfig: {
cutWidth: 288,
cutHeight: 198,
zoom: 1,
image: '',
cutfileUrl: "/api/file/:id/cutfile",
uploadUrl: "/api/file/uploadcutfile",
title: i18n('label-subscribe-upcover'),
desc: '',
colorSystem: 'gray',
height: 600,
width: 800,
}
}
}
render(){
// console.log('111111', this.state)
var p = '', cover = '';
if( this.state.audioUploading===1 ){
if( this.state.audioFile.percent===undefined ) this.state.audioFile.percent = 0;
p = Math.floor(this.state.audioFile.percent*100)/100;
}
if(this.state.audioUploading===2){
cover = this.state.audioFile.response.cover;
if(cover===undefined || cover===''){
cover = this.state.audioDefaultCover;
}
}
return <div className="fdialog-bg jmc-editor-audio">
<div className="fdialog-w">
<div className="fdialog-ww">
<div className="fdialog-header jmc-editor-audio-title">
{
this.state.transing===true?<LinearProgress className="transing-prog" color="primary" />:''
}
{i18n('label.editor-audio-title')}
</div>
<div className="fdialog-content jmc-editor-audio-content">
{
this.state.showAudioCoverDilog===true?<EditImage callback={resp=>{ this.uploadAuidoCover(resp); }} close={()=>this.setState({showAudioCoverDilog: false})} {...this.state.editImageConfig} />:''
}
<div className="jmc-editor-audio-content-tab"><span>{i18n('label.editor-audio-tip1')}</span></div>
<Grid container className="jmc-editor-audio-content-item">
<Grid item sm={2} className="jmc-editor-audio-content-label">{i18n('label.editor-audio-upload-btn')}</Grid>
<Grid item>
<div className="jmc-editor-audio-tip">{i18n('label.editor-audio-upload-tip')}</div>
{
this.state.audioUploading===0?<div className="jmc-editor-audio-selbtn">
<Button variant="outlined" onClick={this.selectAudioFile}>{i18n('label.editor-audio-btn-select')}</Button>
</div>:''
}
{
this.state.audioUploading===1?<div className="jmc-editor-audio-uploading">
<div className="jmc-ea-progress">
<b>{this.state.audioFile.name}</b><del onClick={this.cancelAudioFile}>{i18n('label.subscribe-uploadVideo-cancel-upload')}</del><var>{ p }%</var>
</div>
<div className="jmc-ea-progress-bar"><div style={{width: p + '%'}}></div></div>
<div className="jmc-ea-upinfo">
{i18n('label.subscribe-uploadVideo-local-uploaded')}：{this.jwFormatFSize(this.state.audioFile.loaded)}/{this.jwFormatFSize(this.state.audioFile.size)}
</div>
</div>:''
}
{
this.state.audioUploading===2?<div class={this.state.audioPlaying===true?'jmc-ea-info playing':'jmc-ea-info'}>
<i onClick={this.playAudio} style={{'backgroundImage': 'url('+cover+')'}}></i>
<h5>{this.state.audioFile.name}</h5>
<p>{this.formatAudioTime(this.state.audioFile.response.audio_time)} | {this.jwFormatFSize(this.state.audioFile.size)}</p>
</div>:''
}
</Grid>
</Grid>
<Grid container className="jmc-editor-audio-content-item jmc-editor-audio-content-item2">
<Grid item xs={2} className="jmc-editor-audio-content-label">{i18n('label.pubaccount-video-cover-tip1')}</Grid>
<Grid item>
<div className="jmc-ea-cover" onClick={()=>this.setState({showAudioCoverDilog: true})} style={{'backgroundImage': 'url('+this.state.audioDefaultCover+')'}}>
<div className="jmc-ea-cover-bg"></div>
</div>
<div className="jmc-editor-audio-tip jmc-editor-audio-tip2">{i18n('label.editor-audio-upload-tip2')}</div>
</Grid>
</Grid>
<Jwfuploader appType={this.props.appType} appId={this.props.appId} className="insertAudioInput" maxSize={ 1024 * 1024 *1024 } multiple={false} beforeUpload={this.beforeUploadAudio} onChange={this.uploadAudioChange} action="/api/file/upload" accept={this.state.format} />
</div>
<div className="fdialog-actions jmc-editor-audio-button">
<Button variant="contained" onClick={this.cancel}>{i18n('btn.cancel')}</Button>
<Button variant="contained" color="primary" disabled={this.state.audioUploading===2?false:true} onClick={this.onOk}>{i18n('btn.ok')}</Button>
</div>
</div>
</div>
</div>;
}
uploadAudioChange = (e)=>{
if( this.state.cancelFile===true ){
if( e.file && e.file.ajax){
this.setState({
audioUploading: 0,
audioFile: null,
audioPlaying: false,
showAudioCoverDilog: false,
audioDefaultCover: this.defaultCover(),
});
e.file.ajax.abort();
}
return;
}
if(e.file.status==='start' || e.file.status==='uploading'){
let opt = {audioFile: e.file, audioUploading: 1};
if( e.file.status==='uploading' && this.state.audioFile.percent===100 ){
opt.transing = true;
}
this.setState( opt );
}else if(e.file.status==='done'){
e.file.response.cover = this.state.audioDefaultCover;
e.file.response.mp3 = this.fixAudioUrl( e.file.response.mp3 );
this.setState({audioFile: e.file, audioUploading: 2, transing: false});
}else if(e.file.status==='error'){
console.log(e, 'xxae');
}else if(e.file.status==='cancel'){
this.setState({
audioUploading: 0,
audioFile: null,
audioPlaying: false,
showAudioCoverDilog: false,
audioDefaultCover: this.defaultCover(),
});
}
}
uploadAuidoCover = (resp)=>{
let file = resp.JMAttachment;
let af = this.state.audioFile;
let set = {};
if(af===null){
this.setState({showAudioCoverDilog: false, audioDefaultCover: file.link});
}else{
if( af.response===undefined ){
this.setState({showAudioCoverDilog: false, audioDefaultCover: file.link});
}else{
af.response.cover = file.link;
set = {audioFile: af};
this.setState({audioFile: af, showAudioCoverDilog: false, audioDefaultCover: file.link});
}
}
}
selectAudioFile = ()=>{
$('.insertAudioInput').click();
}
fixAudioUrl(url){
url = url.replace('/api2', '');
url = url.replace('/api', '');
return url;
// if( url.indexOf( 'access_token' )===-1 ){
// url = url + '&access_token=' + window.token;
// }
// return url;
}
playAudio = ()=>{
let self = this;
var url = this.fixAudioUrl( this.state.audioFile.response.mp3 );
if( $('#A_' + this.state.audioFile.uid).length===0 ){
$('body').append('<audio src="'+url+'" id="A_'+this.state.audioFile.uid+'"></audio>');
$('#A_' + this.state.audioFile.uid).on('canplay', function(){
this.play();
}).on('play', function(){
self.setState({audioPlaying: true});
}).on('stop pause', function(){
self.setState({audioPlaying: false});
});
}else{
if( this.state.audioPlaying===true ){
$('#A_' + this.state.audioFile.uid).get(0).pause();
}else{
$('#A_' + this.state.audioFile.uid).get(0).play();
}
}
}
beforeUploadAudio = (file)=>{
var that = this;
this.setState({audioUploading: 1, audioFile: file, cancelFile: false});
return this.checkFile( file, (response)=>{
file.response = response;
that.setState({audioUploading: 2, status: 'done', audioFile: file});
});
}
removeAudio(){
if(this.state.audioFile){
if( $('#A_' + this.state.audioFile.uid).length===1 ) $('#A_' + this.state.audioFile.uid).get(0).pause();
$('#A_' + this.state.audioFile.uid).remove();
}
}
cancelAudioFile = ()=>{
if(this.state.audioFile && this.state.audioFile.ajax) this.state.audioFile.ajax.abort();
this.removeAudio();
this.setState({ audioFile: null, audioUploading: 0, cancelFile: true });
}
cancel = ()=>{
if( this.state.audioFile ) this.state.audioFile.status = 'cancel';
this.removeAudio();
this.props.cancel();
}
onOk = ()=>{
let f = this.state.audioFile;
if( f.response.cover===undefined ) f.response.cover = this.state.audioDefaultCover;
this.removeAudio();
this.props.onOk( f );
}
checkFile( file, callback ){
let that = this;
return new Promise((res, rej)=>{
that.setState({transing: true});
new jwFSha1({
file: file,
cb: function (tsha1) {
that.setState({transing: false});
let url = "/api/file/fileifexist?tsha1="+tsha1+"&jwfile="+encodeURIComponent(encodeURIComponent(file.name))+"&size="+file.size+"&app_type=jw_n_subscribe";
request(url, {method: 'GET'}).then(d=>{
if(d && d.data && d.data.JMAttachment && d.data.JMAttachment.id){
d.data.JMAttachment.mp3 = that.fixAudioUrl( d.data.JMAttachment.mp3 );
callback( d.data.JMAttachment );
// console.log('333');
rej({error: 'has file', file: d.data.JMAttachment});
}else{
if( d && d.data && d.data.errcode && d.data.errcode==='no-network' ){
// console.log('222');
rej({error: d.data.errmemo});
}else{
// console.log('111');
res(1);
}
}
})
}
})
});
}
}
export default UploadAudio;