joywok-material-components
Version:
<h1 align="center"> Joywok Material Components </h1>
901 lines (854 loc) • 34.5 kB
JavaScript
import React from 'react';
import request from '../utils/request';
import {JwTabs, JwTab, EditImage} from '../';
import { Button, LinearProgress, FormControlLabel, RadioGroup, Radio, TextField } from '@material-ui/core';
import AloneTip from '../tips/aloneTip';
import Uploader from './fuploader';
require('./style/video.css');
const jwFormatFSize = (fileSize)=> {
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';
}
}
class UploadVideo extends React.Component{
constructor(props) {
super(props);
let tmp = {
defaultCoverUrl: '',
default_tab: "1",
videoUrl: "",
tab_items: [
{id: "1", label: i18n('label.video-local')},
{id: "2", label: i18n('label.video-link')},
],
fileSize: 0,
uploaded: 0,
ps: 0,
open: true,
inputVal: "",
fileId: 'file'+ parseInt(Math.random()*100000),
quantity: 'auto',
transing: false,
videoUploading: 0, // 0 未选择文件 1 正在上传 2 上传完成
videoFile: null,
videoPlaying: false,
cancelFile: false,
format: ['.mp4'],
startMD5: false
}
this.state = tmp;
}
componentDidMount(){
let self = this;
$("body").addClass('overflow-hidden')
$(window).resize(function () {
self.setState({
rand: Math.random()
})
})
}
close = ()=>{
$("body").removeClass('overflow-hidden')
this.props.onClose && this.props.onClose()
}
getData(){
let self = this;
request(basurl + '/subscribe/readarticle?app_type=jw_app_subscribe&id='+self.props.id+'&type=1&is_from_admin=1',{
method:"GET"
}).then(function(resp){
if(resp.data.data && resp.data.data.current && resp.data.data.current.errcode){
}else{
}
})
}
handleChange(){
}
changeTab(item){
let self = this;
if(item.id != self.state.default_tab){
self.setState({
default_tab: item.id
})
}
}
// 获取 tsha1
getSha1(file) {
let self = this;
return new Promise((resl, rej) => {
new jwFSha1({
file: file,
cb: function (tsha1) {
self.fileExist(file, tsha1)
}
})
})
}
// fileExist(file, tsha1){
// let self = this;
// let url = "/api/file/fileifexist?tsha1="+tsha1+"&jwfile="+file.name+"&size="+file.size+"&app_type=jw_app_joychat"
// let uplpadFileAjax = request(url,{
// method:"GET",
// }).then(function(resp){
// if(resp.data.data && resp.data.data.errcode){
// console.log('请联系管理员')
// }else{
// if(resp.data.JMFlag === false){
// self.uploadFileSlipt(file, 1, tsha1)
// }else{
// self.setState({
// loading: false,
// progress: false,
// uplpadFileAjax: uplpadFileAjax,
// videoUrl: resp.data.JMAttachment.url+"&access_token="+jw_sid,
// localFileInfo: resp.data.JMAttachment,
// defaultCoverUrl: resp.data.JMAttachment.preview.url
// });
// self.setVideoQua( resp.data.JMAttachment );
// }
// }
// })
// }
// 生成参数
createClientFormData(jwfile,app_id, app_type, total_index, cur_index, tsha1, filename){
let self = this;
return
}
uploadFileSlipt(file, num, tsha1){
let self = this;
// let blockSize = 1024 * 1000;
let blockSize = 20 * 1024 * 1024;
// let blockSize = 2 * 1024 * 1024;
let blockNum = Math.ceil(file.size / blockSize);
let nextSize = Math.min(num * blockSize, file.size);
let fileData = file.slice((num - 1) * blockSize, nextSize);
let appType = this.props.appType || '';
let appId = this.props.appId || '';
//生成formdata
new jwFSha1({
file: fileData,
cb: function (sha1) {
let form = new FormData();
form.append("jwfile", fileData, file.name); //slice方法用于切出文件的一部分
form.append("total_index", blockNum); //总片数
form.append("cur_index", num);
form.append("app_id", appId);
form.append("type", appType);
form.append("app_type", appType);
form.append("sha1", sha1);
form.append("tsha1", tsha1);
form.append("access_token", jw_sid)
let uplpadFileAjax = $.ajax({
url: '/api/file/sectionupload?type=loginthumb',
type: 'post',
dataType: 'json',
data: form,
processData: false,
contentType: false,
beforeSend: function() {
self.setState({
// ps: 0,
progress: true,
formName: file.name,
fileSize: parseInt((file.size/1024/1024)*100)/100
})
},
xhr: function(resp) {
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', function (e) {
// let uploadsi = parseInt(((e.loaded + (num-1)*20*1024*1024)/1024/1024)*100)/100;
let uploadsi = parseInt(((e.loaded + (num-1)*blockSize)/1024/1024)*100)/100;
let ps = Math.ceil( ((num-1)*blockSize + e.loaded)/file.size*100 );
let willset = {
ps: ps,
uploaded: uploadsi
};
if(ps===100){
willset.transing = true;
}
self.setState(willset)
});
return xhr;
},
success: function (resp) {
self.setState({transing: false});
if(resp.JMStatus.code > 0){
AloneTip({ type: 'error', duration: 3000, hasclose: false, autoHideDuration: 3000, message: resp.JMStatus.errmemo })
self.setState({
loading: false
})
}else{
// if (file.size <= nextSize) {
if (num === blockNum) {
self.setState({
loading: false,
progress: false,
videoUrl: resp.JMAttachment.url+"&access_token="+jw_sid,
localFileInfo: resp.JMAttachment,
defaultCoverUrl: resp.JMAttachment.preview.url
});
self.setVideoQua( resp.JMAttachment );
// AloneTip({ type: 'success', duration: 3000, hasclose: false, autoHideDuration: 3000, message: '上传成功' })
return;
}else{
self.uploadFileSlipt(file, ++num, tsha1);//递归调用
}
}
},
error: function (resp) {
// AloneTip({ type: 'error', duration: 3000, hasclose: false, autoHideDuration: 3000, message: resp.JMStatus.errmemo })
}
})
self.setState({
uplpadFileAjax: uplpadFileAjax
})
}
})
}
uploadFile(file){
let self = this;
let form = new FormData();
form.append("jwfile", file, file.name);
form.append("app_id", "");
form.append("type", "jw_app_joychat");
let uplpadFileAjax = $.ajax({
url: '/joychat/pubsubvideoupload?app_type=jw_app_joychat&app_id=&type=loginthumb',
type: 'post',
dataType: 'json',
data: form,
processData: false,
contentType: false,
beforeSend: function() {
self.setState({
// ps: 0,
progress: true,
formName: file.name,
fileSize: parseInt((file.size/1024/1024)*100)/100
})
},
xhr: function() {
self.setState({transing: false});
var xhr = new XMLHttpRequest();
//使用XMLHttpRequest.upload监听上传过程，注册progress事件，打印回调函数中的event事件
xhr.upload.addEventListener('progress', function (e) {
let uploadsi = parseInt((e.loaded/1024/1024)*100)/100;
let ps = Math.ceil( e.loaded/file.size*100 );
let willset = {
uploaded: uploadsi,
ps: ps>100?100:ps
}
if(willset.ps===100){
willset.transing = true;
}
self.setState(willset);
})
return xhr;
},
success: function (resp) {
if(resp.errcode){
AloneTip({ type: 'error', duration: 3000, hasclose: false, autoHideDuration: 3000, message: resp.errmemo })
self.setState({
loading: false,
progress: false
})
}else{
self.setState({
loading: false,
progress: false,
videoUrl: resp.url+"&access_token="+jw_sid,
defaultCoverUrl: resp.preview.url,
localFileInfo: resp
});
self.setVideoQua( resp );
AloneTip({ type: 'success', duration: 3000, hasclose: false, autoHideDuration: 3000, message: '上传成功' })
}
},
error: function () {
// AloneTip({ type: 'error', duration: 3000, hasclose: false, autoHideDuration: 3000, message: resp.errmemo })
}
})
self.setState({
uplpadFileAjax: uplpadFileAjax
})
}
chooseVideo(){
$('.insertVideoInput').click();
// let self = this;
// $('#'+self.state.fileId).click()
// $('#'+self.state.fileId).unbind('input porpertychange').bind('input porpertychange', function(e){
// let file = e.currentTarget.files[0];
// // let size = file.size;
// self.getSha1(file)
// // if(size < 20 * 1024 * 1024){
// // self.uploadFile(file)
// // }else{
// // self.getSha1(file)
// // }
// });
}
urlInputChange(e){
let self = this;
let val = e.target.value;
self.setState({
inputVal: val
})
if(val.indexOf('v.qq.com') != -1){
setTimeout(function(){
self.getIfram(val);
}, 500)
}else{
this.setState({urlData: window.undefined});
if(val != ""){
$('.alone-tips').remove();
AloneTip({ type: 'error', duration: 3000, hasclose: false, autoHideDuration: 3000, message: i18n('label.pubsub-video-link-error') })
}
}
}
getIfram(val){
let self = this;
if(val != self.state.inputVal ){
return
}
let obj = {};
obj.url = self.state.inputVal
request('/api/subscribe/getttvid',{
method:"POST",
body: JSON.stringify(obj)
}).then(function(resp){
if(resp.data.JMStatus && resp.data.JMStatus.code > 0){
self.setState({
loading: false,
urlData: window.undefined
})
AloneTip({ type: 'error', duration: 3000, hasclose: false, autoHideDuration: 3000, message: resp.data.JMStatus.errmemo })
}else{
resp.data = {"code":0,"systime":1595272785,"data":{"url":resp.data.url,"title":resp.data.title, 'cover':resp.data.cover},"msg":{"msg":[],"cur_domain":"0SvtS2hJJSvZL0Fa","as":"0"}};
let obj2 = {
urlData: resp.data.data.url===''?window.undefined:resp.data.data
}
self.setState(obj2)
}
})
}
openUploadCover(type){
let self = this;
let obj = {};
obj[type+'CoverFlag'] = true
self.setState(obj)
}
closeEditImage(type){
let self = this;
let obj = {};
obj[type+'CoverFlag'] = false
self.setState(obj)
}
submitUrl = (e)=>{
$("body").removeClass('overflow-hidden');
if( $(e.currentTarget).hasClass('submit-disabled')===true ){
return;
}
let self = this;
let obj = {watermark: 0};
obj.videoUrl = self.state.inputVal
obj.coverUrl = self.state.urlCover && self.state.urlCover.JMAttachment ? self.state.urlCover.JMAttachment.link : ""
$("body").removeClass('overflow-hidden')
self.setState({
open: false
})
self.props.submit && self.props.submit(self.state)
}
open(){
let self = this;
self.setState({
open: true
})
}
submit(){
$("body").removeClass('overflow-hidden');
let self = this;
let obj = {watermark: 0 };
obj.videoUrl = this.state.videoFile.response.link===undefined?this.state.videoFile.response.url + '':this.state.videoFile.response.link+'';
obj.videoUrl = obj.videoUrl.replace('/api2', '');
obj.videoUrl = obj.videoUrl.replace('/api', '');
obj.coverUrl = self.state.localCover && self.state.localCover.JMAttachment ? self.state.localCover.JMAttachment.link : '';
if( _.isEmpty(obj.coverUrl) ){
obj.coverUrl = this.state.videoFile.response.cover;
}
console.log('==', this.state.videoFile.response.link, obj.coverUrl, this.state.videoFile, this.state.localCover);
self.setState({
open: false
});
$("body").removeClass('overflow-hidden');
// console.log(obj, 'objjjjjjjjjj')
self.props.submit && self.props.submit(obj)
}
EditImageCallback(data){
let self = this;
let obj = {}
if(self.state.urlCoverFlag){
obj['urlCover'] = data;
obj.urlCoverFlag = false
}else if(self.state.localCoverFlag){
obj['localCover'] = data;
obj.localCoverFlag = false
}
self.setState(obj)
}
handleClose(){
let self = this;
self.setState({
open: false
})
}
onMouse(type, flag){
// console.log(type, flag)
let self = this;
let obj = {}
obj[type+'CoverOnFlag'] = flag
self.setState(obj)
}
getVid(url){
let qq_reg = /https?:\/\/v.qq.com(.*\/)?(.{11})\.html/;
let matches = qq_reg.exec(url);
return matches[2];
}
render(){
let self = this;
let style = {}
// let ps = parseInt((self.state.uploaded/self.state.fileSize)*1000)/10;
// let ps = this.state.ps===undefined?0:this.state.ps;
let ps = 0;
if( this.state.videoUploading===1 ){
if( this.state.videoFile.percent===undefined ) this.state.videoFile.percent = 0;
ps = Math.floor(this.state.videoFile.percent*100)/100;
}
ps = ps>100?100:ps;
if(ps == 0){
style ={width: "1px"};
}else{
style ={width: ps+"%"};
}
let videoStyle = {minHeight: 200}
// let height = $(window).height();
// videoStyle['maxHeight'] = height - 178 - 96 - 20;
// console.log(this.state.videoUrl, 'videoUrl', self.state.videoUrl != "");
let transVideo = this.state.transing === true || !this.state.videoFile?true:false;
return <div className="fdialog-bg">
<div className="fdialog-w">
<div className="fdialog-ww upload-video-c">
{
this.state.transing===true||this.state.startMD5===true?<LinearProgress className="transing-prog" color="primary" />:''
}
<div className="fdialog-header upload-video-t">{i18n('label.subscribe-uploadVideo-title')}</div>
<div className="fdialog-content">
<div className="upload-video-tabs">
<JwTabs
onChange={(e,value)=>self.handleChange(e,value)}
value={self.state['default_tab']}
TabIndicatorProps={{
style: {
backgroundColor: " #3297fc"
}
}}
>
{
_.map(self.state['tab_items'],function(i){
return <JwTab key={i.id} onClick={self.changeTab.bind(self, i)} label={i.label} value={i['id']} className={(self.state.default_tab == i.id) ? "tab_item active" : "tab_item"} classes={{
selected:{
color:'#333',
}
}}/>
})
}
</JwTabs>
</div>
{
self.state.default_tab == "1" ? <div className="local-video" style={videoStyle}>
<div className="local-video-c">
{
self.state.openCancelTipsFlag ? <div className="upload-cancel-msg">
<div className="cancel-bg"> </div>
<div className="cancel-c">
<div className="title">{i18n('label.console.iam.tips')}</div>
<div>{i18n('label.subscribe-uploadVideo-msg')}</div>
<div className="btns">
<div className='btn sure' onClick={self.uploadCancel.bind(self)}>{i18n('label.subscribe-uploadVideo-submit')}</div>
<div className='btn cancel' onClick={self.uploadCancelFlag.bind(self, false)}>{i18n('label.subscribe-uploadVideo-cancel')}</div>
</div>
</div>
</div> : ""
}
<div className="label">{i18n('label.subscribe-uploadVideo-local-label')}</div>
<div className="value">
<div className="desc">{i18n('label.sub-upvideo-tip1')}</div>
{
this.state.videoUploading===0?<Button className={!self.state.videoFile? "upload-btn" : "upload-btn hide"} onClick={self.chooseVideo.bind(self)}>{i18n('label.subscribe-uploadVideo-title')}</Button>:''
}
{
this.state.videoUploading===1?<div className="progress">
<div className="progress-title"><div className="file-name">{self.state.videoFile.name}</div> <div className="progress-cancel" onClick={self.uploadCancelFlag.bind(self, true)}>{i18n('label.subscribe-uploadVideo-cancel-upload')}</div> <div className="progress-num">{ps+"%"}</div></div>
<div className="progress-bar"><div className="progress-bg" style={style}> </div></div>
<div className="progress-info">{i18n('label.subscribe-uploadVideo-local-uploaded')}：
{jwFormatFSize(this.state.videoFile.loaded)}/{jwFormatFSize(this.state.videoFile.size)}
</div>
</div>:''
}
<Uploader className="insertVideoInput" maxSize={ 1024 * 1024 *1024 } multiple={false} beforeUpload={this.beforeUploadVideo} onChange={this.uploadVideoChange} action="/api/file/upload" accept={this.state.format} />
{
this.state.videoUploading===2?self.renderVideoInfo():''
}
</div>
</div>
<div className="jmc-up-v-size">
<div className="jmc-up-label">{i18n('label.sub-upvideo-tip2')}</div>
<div className="jmc-up-value">
<RadioGroup row name="jmcvsize" value={this.state.quantity} onChange={self.changeVQuantity}>
<FormControlLabel value={'360'} label="360P" control={<Radio disabled={transVideo} color="primary" />} />
<FormControlLabel value={'480'} label="480P" control={<Radio disabled={transVideo} color="primary" />} />
<FormControlLabel value={'720'} label="720P" control={<Radio disabled={transVideo} color="primary" />} />
<FormControlLabel value={'1080'} label="1080P" control={<Radio disabled={transVideo} color="primary" />} />
</RadioGroup>
</div>
</div>
<div className="upload-video-cover">
<div className="label">{i18n('label.subscribe-uploadVideo-addCover')}</div>
{
self.state.localCoverFlag ? <EditImage
title={i18n("label.subscribe-uploadVideo-addCover1")}
cutHeight={360}
cutWidth={640}
zoom={2}
desc={i18n('label.subscribe-uploadVideo-recommend')}
border={500}
cutfileUrl="/api/file/:id/cutfile?type=subscribe"
callback={self.EditImageCallback.bind(self)}
uploadUrl="/api/file/uploadcutfile?appid=&apptype=jw_app_profile&type=subscribe"
close={self.closeEditImage.bind(self, 'local')}
/> : ""
}
<div className="value">
{
self.state.localCover && self.state.localCover.JMAttachment && self.state.localCover.JMAttachment.link ?
<div className="cover-c-s" onFocus={()=>0} onMouseLeave={self.onMouse.bind(self, 'local', false)} onMouseOver={self.onMouse.bind(self, 'local', true)}>
<img src={self.state.localCover.JMAttachment.link}/>
{
self.state.localCoverOnFlag ? <div className="cover-hover">
<div className="cover-hover-bg"> </div>
<i onClick={self.openUploadCover.bind(self, 'local')} className="icon icon-camera"></i>
</div> : ""
}
</div> : <div className="cover-c" onClick={self.openUploadCover.bind(self, 'local')}>
+
</div>
}
<div className="desc">{i18n('label.subscribe-uploadVideo-recommend')}</div>
</div>
</div>
</div> : ""
}
{
self.state.default_tab == "2" ? <div className="url-video" style={videoStyle}>
<div className="url-c">
<div className="label">{i18n('label.subscribe-uploadVideo-url-label')}</div>
<div className="value">
<TextField placeholder={i18n('label.subscribe-uploadVideo-url-placeholder')} className="value-input" onChange={self.urlInputChange.bind(self)} value={self.state.inputVal}/>
<div className={self.state.urlData && self.state.urlData.url ? "value-c" : "value-c hide"}>
{
self.state.urlData && self.state.urlData.url ? <iframe frameborder="0" width="300" height="150" allow="autoplay; fullscreen" allowfullscreen="true" src={"//v.qq.com/txp/iframe/player.html?origin="+encodeURIComponent(location.origin)+"&vid="+this.getVid(self.state.urlData.url)+"&autoplay=false&show1080p=false&isDebugIframe=false"}>
</iframe> : ""
}
{
self.state.urlData && self.state.urlData.url ? <div className="url-video-title">{self.state.urlData.title}</div> : ""
}
</div>
</div>
</div>
<div className="url-video-cover">
<div className="label">{i18n('label.subscribe-uploadVideo-addCover')}</div>
{
self.state.urlCoverFlag ? <EditImage
title={i18n("label.subscribe-uploadVideo-addCover1")}
cutfileUrl="/api/file/:id/cutfile?type=subscribe"
cutHeight={360}
cutWidth={640}
zoom={1}
desc={i18n('label.subscribe-uploadVideo-recommend')}
border={500}
callback={self.EditImageCallback.bind(self)}
uploadUrl="/api/file/uploadcutfile?appid=&apptype=jw_app_profile&type=subscribe"
close={self.closeEditImage.bind(self, 'url')}
/> : ""
}
<div className="value">
{
self.state.urlCover && self.state.urlCover.JMAttachment && self.state.urlCover.JMAttachment.link ?
<div className="cover-c-s" onFocus={()=>0} onMouseLeave={self.onMouse.bind(self, 'url', false)} onMouseOver={self.onMouse.bind(self, 'url', true)}>
<img src={self.state.urlCover.JMAttachment.link}/>
{
self.state.urlCoverOnFlag ?
<div className="cover-hover">
<div className="cover-hover-bg"> </div>
<i onClick={self.openUploadCover.bind(self, 'url')} className="icon icon-camera"></i>
</div> : ""
}
</div> : <div className="cover-c" onClick={self.openUploadCover.bind(self, 'url')}>
+
</div>
}
<div className="desc">{i18n('label.subscribe-uploadVideo-recommend')}</div>
</div>
</div>
</div> : ""
}
</div>
<div className="fdialog-actions">
{
self.state.default_tab == "2" ? <div className="upload-video-btns">
<Button className="cancel" onClick={self.cancel.bind(self)}>{i18n('label.subscribe-uploadVideo-cancel')}</Button>
<Button className={self.state.urlData ? "submit" : "submit submit-disabled"} onClick={this.submitUrl}>{i18n('label.subscribe-uploadVideo-submit')}</Button>
</div> : <div className="upload-video-btns">
<Button className="cancel" onClick={self.cancel.bind(self)}>{i18n('label.subscribe-uploadVideo-cancel')}</Button>
{
self.state.videoFile && this.state.transing===false ?
<Button className="submit" onClick={self.submit.bind(self)}>{i18n('label.subscribe-uploadVideo-submit')}</Button> :
<Button className="submit submit-disabled">{i18n('label.subscribe-uploadVideo-submit')}</Button>
}
</div>
}
</div>
</div>
</div>
</div>
}
renderVideoInfo(){
// if(this.state.videoUploading===2){
// cover = this.state.videoFile.response.cover;
// }
let file = this.state.videoFile.response;
return <div className="value-c">
{
this.state.transing===true?<div className="value-c-transing"><div className="transing-loader"></div>
<div className="transing-loader-tip">{i18n('label.converting')}</div>
</div>:''
}
<div class="jmc-v-bg" style={{'backgroundImage': 'url('+file.preview.url.replace('/api2', '')+')'}}><span>{file.media.duration}</span></div>
<div class="jmc-v-name">{(file.name||file.show_name) +'.'+ file.ext_name}</div>
<div class="jmc-v-size">{ jwFormatFSize(file.file_size) } <span>{(file.media.resolution && file.media.resolution.width||0) +' * ' + (file.media.resolution && file.media.resolution.height || 0)}</span> px</div>
</div>
}
uploadCancelFlag(flag){
this.setState({
openCancelTipsFlag: flag
});
}
cancel(){
// let self = this;
// if(self.state.uplpadFileAjax){
// self.setState({
// closeFlag: true
// });
// if( this.state.default_tab*1===2 ){
// this.props.cancel && self.props.cancel();
// this.setState({ open: false });
// }else{
// setTimeout(function(){
// self.uploadCancelFlag(true);
// })
// }
// }else{
// $("body").removeClass('overflow-hidden');
// self.props.cancel && self.props.cancel();
// self.setState({
// open: false
// });
// }
if( this.state.default_tab*1===2 ){
if(this.state.videoFile && this.state.videoFile.ajax) this.state.videoFile.ajax.abort();
this.props.cancel && this.props.cancel();
this.setState({ open: false });
}else{
if( this.state.videoFile ){
this.uploadCancelFlag(true);
}else{
$("body").removeClass('overflow-hidden');
this.props.cancel && this.props.cancel();
this.setState({
open: false
});
}
}
}
uploadCancel(){
if(this.state.videoFile && this.state.videoFile.ajax) this.state.videoFile.ajax.abort();
this.setState({
videoFile: null, videoUploading: 0, cancelFile: true, openCancelTipsFlag: false
});
if(this.state.closeFlag){
setTimeout(function(){
this.cancel();
})
}
// let self = this;
// self.state.uplpadFileAjax && typeof self.state.uplpadFileAjax==='function' && self.state.uplpadFileAjax.abort()
// $('#'+self.state.fileId).val("")
// self.setState({
// ps: 0,
// progress: false,
// uplpadFileAjax: null,
// openCancelTipsFlag: false
// })
// if(self.state.closeFlag){
// self.setState({
// uplpadFileAjax: null
// })
// setTimeout(function(){
// self.cancel();
// })
// }
}
changeVQuantity = (e, v)=>{
let y = this.state.quantity;
console.log(this.state, this.state.default_tab, this.state.yfile.id, 'state')
if( this.state.default_tab==='1' ){
if(this.state.yfile && this.state.yfile.id){
this.setState({quantity: v + '', transing: true});
AloneTip({ type: 'success', duration: 1000, hasclose: false, autoHideDuration: 1000, message: i18n('label.converting') })
request('/api/file/videoconversion?id='+ this.state.yfile.id +'&resolution='+e.target.value, {method: 'GET'}).then((resp)=>{
if( resp.data && resp.data.JMVideoInfo ){
let file = this.state.videoFile;
file.response = resp.data.JMVideoInfo;
if( file.response.cover===undefined ){
if( file.response.preview ){
file.response.cover = file.response.preview.url;
}else{
file.response.cover = file.response.thumbnail.url;
}
}
file.response.cover = file.response.cover.replace('/api2', '');
file.response.cover = file.response.cover.replace('/api', '');
this.setState({videoUrl: resp.data.JMVideoInfo.url+"&access_token="+jw_sid, videoFile: file, transing: false}, ()=>{
this.setVideoQua( file.response, true );
});
}else{
// 设置不成功就还原
if(y===undefined) y = 'auto';
this.setState({quantity: y + '', transing:false });
}
})
}
}
}
setVideoQua( response, copy ){
if(copy!==true){
this.setState({yfile: response});
}
let quantity = this.state.quantity;
if( this.state.default_tab==='1' ){
if( response && response.media && response.media.resolution && response.media.resolution.height){
quantity = response.media.resolution.height + '';
}
}
this.setState({quantity: quantity, transing: false});
}
beforeUploadVideo = (file)=>{
var that = this;
file.loaded = 0;
this.setState({videoUploading: 1, videoFile: file, cancelFile: false});
return this.checkFile( file, response=>{
if( response.cover===undefined ){
if( response.preview ){
response.cover = response.preview.url;
}else{
response.cover = response.thumbnail.url;
}
}
response.cover = response.cover.replace('/api2', '');
response.cover = response.cover.replace('/api', '');
file.response = response;
file.loaded = file.size;
that.setState({
videoUploading: 2,
status: 'done',
videoFile: file,
videoUrl: response.url+"&access_token=" + jw_sid,
localFileInfo: response,
defaultCoverUrl: response.cover
}, ()=>{
that.setVideoQua( response );
console.log(that.state, 'hat state')
});
});
}
checkFile( file, callback ){
let that = this;
return new Promise((res, rej)=>{
that.setState({startMD5: true});
new jwFSha1({
file: file,
cb: function (tsha1) {
that.setState({startMD5: false});
// res(1);
// return;
let url = "/api/file/fileifexist?tsha1="+tsha1+"&jwfile="+encodeURIComponent(encodeURIComponent(file.name))+"&size="+file.size+"&app_type=jw_app_joychat";
// let url = "/api/file/fileifexist?tsha1="+tsha1+"&jwfile="+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){
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);
}
}
})
}
})
});
}
uploadVideoChange = (e)=>{
if( this.state.cancelFile===true ){
if( e.file && e.file.ajax){
this.setState({
videoUploading: 0,
videoFile: null
});
e.file.ajax.abort();
}
return;
}
if(e.file.status==='start' || e.file.status==='uploading'){
let opt = {videoFile: e.file, videoUploading: 1};
if( e.file.status==='uploading' && this.state.videoFile.percent===100 ){
opt.transing = true;
}
this.setState( opt );
}else if(e.file.status==='done'){
e.file.response.cover = e.file.response.preview.url;
this.setState({videoFile: e.file, yfile: e.file.response, videoUploading: 2, transing: false });
}else if(e.file.status==='error'){
console.log(e, 'xxae');
}else if(e.file.status==='cancel'){
this.setState({
videoUploading: 0,
videoFile: null
});
}
}
}
export default UploadVideo;