user2/hole_thu_frontend
1
0
Fork 0
forked from newthuhole/hole_thu_frontend
Code Issues Pull Requests Projects Releases Wiki Activity

update

Browse Source 
- add image quality indicator
- add error tip
- minor enhancement
This commit is contained in:
xmcp
2019-03-25 00:49:31 +08:00
parent 5f0e3780fc
commit 47be6d49f6
5 changed files with 104 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/Flows.js
View File

@@ -48,7 +48,8 @@ function load_single_meta(show_sidebar,token) {
show_sidebar(
'帖子详情',
<div className="box box-tip">
<a onClick={()=>load_single_meta(show_sidebar,token)}>重新加载</a>
<p><a onClick={()=>load_single_meta(show_sidebar,token)()}>重新加载</a></p>
<p>{''+e}</p>
</div>
);
})
@@ -139,6 +140,7 @@ class FlowSidebar extends PureComponent {
info: props.info,
replies: props.replies,
loading_status: 'done',
error_msg: null,
};
this.color_picker=props.color_picker;
this.show_pid=load_single_meta(this.props.show_sidebar,this.props.token);
@@ -172,6 +174,7 @@ class FlowSidebar extends PureComponent {
load_replies(update_count=true) {
this.setState({
loading_status: 'loading',
error_msg: null,
});
API.load_replies(this.state.info.pid,this.props.token,this.color_picker)
.then((json)=>{
@@ -182,6 +185,7 @@ class FlowSidebar extends PureComponent {
}) : prev.info,
attention: !!json.attention,
loading_status: 'done',
error_msg: null,
}), ()=>{
this.syncState({
replies: this.state.replies,
@@ -195,6 +199,7 @@ class FlowSidebar extends PureComponent {
this.setState({
replies: [],
loading_status: 'done',
error_msg: ''+e,
});
});
}
@@ -240,8 +245,13 @@ class FlowSidebar extends PureComponent {
show_reply_bar(name,event) {
if(this.reply_ref.current && event.target.tagName.toLowerCase()!=='a') {
let text=this.reply_ref.current.get();
if(/^\s*(Re (洞主|\b[A-Z][a-z]+){0,2}:)?\s*$/.test(text)) // text is nearly empty so we can replace it
this.reply_ref.current.set('Re '+name+': ');
if(/^\s*(Re (洞主|\b[A-Z][a-z]+){0,2}:)?\s*$/.test(text)) {// text is nearly empty so we can replace it
let should_text='Re '+name+': ';
if(should_text===this.reply_ref.current.get())
this.reply_ref.current.set('');
else
this.reply_ref.current.set(should_text);
}
}
}
@@ -278,7 +288,13 @@ class FlowSidebar extends PureComponent {
set_variant={(variant)=>{this.set_variant(null,variant);}}
/>
</ClickHandler>
{(this.props.deletion_detect && parseInt(this.state.info.reply)>this.state.replies.length) &&
{!!this.state.error_msg &&
<div className="box box-tip flow-item box-danger">
<p>回复加载失败</p>
<p>{this.state.error_msg}</p>
</div>
}
{(this.props.deletion_detect && parseInt(this.state.info.reply)>this.state.replies.length) && !!this.state.replies.length &&
<div className="box box-tip flow-item box-danger">
{parseInt(this.state.info.reply)-this.state.replies.length} 条回复被删除
</div>
@@ -422,6 +438,7 @@ export class Flow extends PureComponent {
data: [],
},
loading_status: 'done',
error_msg: null,
};
this.on_scroll_bound=this.on_scroll.bind(this);
window.LATEST_POST_ID=parseInt(localStorage['_LATEST_POST_ID'],10)||0;
@@ -433,6 +450,7 @@ export class Flow extends PureComponent {
this.setState((prev,props)=>({
loaded_pages: prev.loaded_pages-1,
loading_status: 'failed',
error_msg: ''+err,
}));
};
@@ -508,6 +526,7 @@ export class Flow extends PureComponent {
this.setState((prev,props)=>({
loaded_pages: prev.loaded_pages+1,
loading_status: 'loading',
error_msg: null,
}));
}
}
@@ -540,7 +559,8 @@ export class Flow extends PureComponent {
/>
{this.state.loading_status==='failed' &&
<div className="box box-tip aux-margin">
<a onClick={()=>{this.load_page(this.state.loaded_pages+1)}}>重新加载</a>
<p><a onClick={()=>{this.load_page(this.state.loaded_pages+1)}}>重新加载</a></p>
<p>{this.state.error_msg}</p>
</div>
}
<TitleLine text={

5
src/UserAction.css
View File

@@ -42,6 +42,11 @@
.post-form-bar button {
flex: 0 0 8em;
}
.post-form-img-tip {
font-size: small;
margin-top: -.5em;
margin-bottom: .5em;
}
.post-form textarea {
resize: vertical;
width: 100%;

82
src/UserAction.js
View File

@@ -7,8 +7,8 @@ import './UserAction.css';
import {API_BASE} from './Common';
const LOGIN_BASE=PKUHELPER_ROOT+'services/login';
const MAX_IMG_PX=2000;
const MAX_IMG_FILESIZE=256000;
const MAX_IMG_PX=2500;
const MAX_IMG_FILESIZE=300000;
const ISOP_APPKEY='0feb3a8a831e11e8933a0050568508a5';
const ISOP_APPCODE='0fec960a831e11e8933a0050568508a5';
@@ -265,10 +265,12 @@ export class PostForm extends Component {
this.state={
text: '',
loading_status: 'done',
img_tip: null,
};
this.img_ref=React.createRef();
this.area_ref=React.createRef();
this.on_change_bound=this.on_change.bind(this);
this.on_img_change_bound=this.on_img_change.bind(this);
}
componentDidMount() {
@@ -327,7 +329,7 @@ export class PostForm extends Component {
if(idx===-1)
throw new Error('img not base64 encoded');
resolve(url.substr(idx+8));
return url.substr(idx+8);
}
let reader=new FileReader();
@@ -339,13 +341,16 @@ export class PostForm extends Component {
image.onload=(()=>{
let width=image.width;
let height=image.height;
let compressed=false;
if(width>MAX_IMG_PX) {
height=height*MAX_IMG_PX/width;
width=MAX_IMG_PX;
compressed=true;
}
if(height>MAX_IMG_PX) {
width=width*MAX_IMG_PX/height;
height=MAX_IMG_PX;
compressed=true;
}
let canvas=document.createElement('canvas');
@@ -354,23 +359,58 @@ export class PostForm extends Component {
canvas.height=height;
ctx.drawImage(image,0,0,width,height);
for(let quality=.9;quality>0;quality-=0.1) {
const url=canvas.toDataURL('image/jpeg',quality);
console.log('quality',quality,'size',url.length);
if(url.length<=MAX_IMG_FILESIZE) {
let quality_l=.1,quality_r=.9,quality,new_url;
while(quality_r-quality_l>=.06) {
quality=(quality_r+quality_l)/2;
new_url=canvas.toDataURL('image/jpeg',quality);
console.log(quality_l,quality_r,'trying quality',quality,'size',new_url.length);
if(new_url.length<=MAX_IMG_FILESIZE)
quality_l=quality;
else
quality_r=quality;
}
if(quality_l>=.101) {
console.log('chosen img quality',quality);
return return_url(url);
resolve({
img: return_url(new_url),
quality: quality,
width: Math.round(width),
height: Math.round(height),
compressed: compressed,
});
} else {
reject('图片过大，无法上传');
}
}
// else
alert('图片过大，无法上传');
reject('img too large');
});
});
reader.readAsDataURL(file);
});
}
on_img_change() {
if(this.img_ref.current && this.img_ref.current.files.length)
this.setState({
img_tip: '（正在处理图片……）'
},()=>{
this.proc_img(this.img_ref.current.files[0])
.then((d)=>{
this.setState({
img_tip: `（${d.compressed?'压缩到':'尺寸'} ${d.width}*${d.height} / `+
`质量 ${Math.floor(d.quality*100)}% / ${Math.floor(d.img.length/1000)}KB）`,
});
})
.catch((e)=>{
this.setState({
img_tip: `图片无效：${e}`,
});
});
});
else
this.setState({
img_tip: null,
});
}
on_submit(event) {
if(event) event.preventDefault();
if(this.state.loading_status==='loading')
@@ -380,12 +420,15 @@ export class PostForm extends Component {
loading_status: 'processing',
});
this.proc_img(this.img_ref.current.files[0])
.then((img)=>{
.then((d)=>{
this.setState({
loading_status: 'loading',
});
this.do_post(this.state.text,img);
this.do_post(this.state.text,d.img);
})
.catch((e)=>{
alert(e);
});
} else {
this.setState({
loading_status: 'loading',
@@ -400,8 +443,9 @@ export class PostForm extends Component {
<div className="post-form-bar">
<label>
图片
<input ref={this.img_ref} type="file" accept="image/*"
{...this.state.loading_status!=='done' ? {disabled: true} : {}} />
<input ref={this.img_ref} type="file" accept="image/*" disabled={this.state.loading_status!=='done'}
onChange={this.on_img_change_bound}
/>
</label>
{this.state.loading_status!=='done' ?
<button disabled="disabled">
@@ -414,6 +458,12 @@ export class PostForm extends Component {
</button>
}
</div>
{!!this.state.img_tip &&
<p className="post-form-img-tip">
<a onClick={()=>{this.img_ref.current.value=""; this.on_img_change();}}>删除图片</a>
{this.state.img_tip}
</p>
}
<SafeTextarea ref={this.area_ref} id="new_post" on_change={this.on_change_bound} on_submit={this.on_submit.bind(this)} />
</form>
)

10
src/flows_api.js
View File

@@ -17,8 +17,10 @@ export const API={
)
.then((res)=>res.json())
.then((json)=>{
if(json.code!==0)
throw new Error(json);
if(json.code!==0) {
if(json.msg) throw new Error(json.msg);
else throw new Error(json);
}
json.data=json.data
.sort((a,b)=>{
@@ -121,8 +123,8 @@ export const API={
.then((res)=>res.json())
.then((json)=>{
if(json.code!==0) {
if(json.msg) alert(json.msg);
throw new Error(json);
if(json.msg) throw new Error(json.msg);
else throw new Error(json);
}
return json;
});

2
src/text_splitter.js
View File

@@ -1,6 +1,6 @@
export const PID_RE=/(^|[^\d])([1-9]\d{4,5})(?!\d|\u20e3)/g;
export const NICKNAME_RE=/(^|[^A-Za-z])((?:(?:Angry|Baby|Crazy|Diligent|Excited|Fat|Greedy|Hungry|Interesting|Japanese|Kind|Little|Magic|Naïve|Old|Powerful|Quiet|Rich|Superman|THU|Undefined|Valuable|Wifeless|Xiangbuchulai|Young|Zombie)\s)?(?:Alice|Bob|Carol|Dave|Eve|Francis|Grace|Hans|Isabella|Jason|Kate|Louis|Margaret|Nathan|Olivia|Paul|Queen|Richard|Susan|Thomas|Uma|Vivian|Winnie|Xander|Yasmine|Zach)|You Win(?: \d+)?|洞主)(?![A-Za-z])/gi;
export const URL_RE=/(?:^|\b)((?:https?:\/\/)?(?:[\w-]+\.)+[a-zA-Z]{2,3}(?::\d{1,5})?(?:\/[\w~!@#$%^&*()-_=+[\];,./?]*)?)(?:$|\b)/gi;
export const URL_RE=/(?:^|\b)((?:https?:\/\/)?(?:[\w-]+\.)+[a-zA-Z]{2,3}(?::\d{1,5})?(?:\/[\w~!@#$%^&*()-_=+[\];,./?]*)?)/gi;
export function split_text(txt,rules) {
// rules: [['name',/regex/],...]