From df716f72d5d6040d58e98bc28ce7d9c3408c8121 Mon Sep 17 00:00:00 2001
From: xmcp <xiaoyuanan2000@sina.com>
Date: Sat, 23 Feb 2019 17:45:52 +0800
Subject: [PATCH] add variant

---
 src/Flows.js     | 148 ++++++++++++++++++++++++++++++-----------------
 src/Title.css    |   9 ++-
 src/Title.js     |  19 +++---
 src/flows_api.js |   1 +
 4 files changed, 116 insertions(+), 61 deletions(-)

diff --git a/src/Flows.js b/src/Flows.js
index d7be3cd..1b61e82 100644
--- a/src/Flows.js
+++ b/src/Flows.js
@@ -54,67 +54,80 @@ function load_single_meta(show_sidebar,token) {
     };
 }
 
-function Reply(props) {
-    return (
-        <div className={'flow-reply box'} style={props.info._display_color ? {
-            backgroundColor: props.info._display_color,
-        } : null}>
-            <div className="box-header">
-                <code className="box-id">#{props.info.cid}</code>&nbsp;
-                <Time stamp={props.info.timestamp} />
-            </div>
-            <div className="box-content">
-                <HighlightedText text={props.info.text} color_picker={props.color_picker} show_pid={props.show_pid} />
+class Reply extends PureComponent {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <div className={'flow-reply box'} style={this.props.info._display_color ? {
+                backgroundColor: this.props.info._display_color,
+            } : null}>
+                <div className="box-header">
+                    <code className="box-id">#{this.props.info.cid}</code>&nbsp;
+                    <Time stamp={this.props.info.timestamp} />
+                </div>
+                <div className="box-content">
+                    <HighlightedText text={this.props.info.text} color_picker={this.props.color_picker} show_pid={this.props.show_pid} />
+                </div>
             </div>
-        </div>
-    );
+        );
+    }
 }
 
-function FlowItem(props) {
-    function copy_link(event) {
+class FlowItem extends PureComponent {
+    constructor(props) {
+        super(props);
+    }
+
+    copy_link(event) {
         event.preventDefault();
         copy(
             `${event.target.href}\n`+
-            `${props.info.text}${props.info.type==='image'?' [图片]':props.info.type==='audio'?' [语音]':''}\n`+
-            `（${format_time(new Date(props.info.timestamp*1000))} ${props.info.likenum}关注 ${props.info.reply}回复）\n`+
-            props.replies.map((r)=>(r.text)).join('\n')
+            `${this.props.info.text}${this.props.info.type==='image'?' [图片]':this.props.info.type==='audio'?' [语音]':''}\n`+
+            `（${format_time(new Date(this.props.info.timestamp*1000))} ${this.props.info.likenum}关注 ${this.props.info.reply}回复）\n`+
+            this.props.replies.map((r)=>(r.text)).join('\n')
         );
     }
 
-    return (
-        <div className="flow-item box">
-            {parseInt(props.info.pid,10)>window.LATEST_POST_ID && <div className="flow-item-dot" /> }
-            <div className="box-header">
-                {!!parseInt(props.info.likenum,10) &&
-                    <span className="box-header-badge">
-                        {props.info.likenum}&nbsp;
-                        <span className={'icon icon-'+(props.attention ? 'star-ok' : 'star')} />
-                    </span>
-                }
-                {!!parseInt(props.info.reply,10) &&
-                    <span className="box-header-badge">
-                        {props.info.reply}&nbsp;
-                        <span className="icon icon-reply" />
-                    </span>
-                }
-                <code className="box-id"><a href={'##'+props.info.pid} onClick={copy_link}>#{props.info.pid}</a></code>
-                &nbsp;
-                <Time stamp={props.info.timestamp} />
-            </div>
-            <div className="box-content">
-                <HighlightedText text={props.info.text} color_picker={props.color_picker} show_pid={props.show_pid} />
-                {props.info.type==='image' &&
-                    <p className="img">
-                        {props.img_clickable ?
-                            <a href={IMAGE_BASE+props.info.url} target="_blank"><img src={IMAGE_BASE+props.info.url} /></a> :
-                            <img src={IMAGE_BASE+props.info.url} />
-                        }
-                    </p>
-                }
-                {props.info.type==='audio' && <AudioWidget src={AUDIO_BASE+props.info.url} />}
+    render() {
+        let props=this.props;
+        return (
+            <div className="flow-item box">
+                {parseInt(props.info.pid,10)>window.LATEST_POST_ID && <div className="flow-item-dot" /> }
+                <div className="box-header">
+                    {!!parseInt(props.info.likenum,10) &&
+                        <span className="box-header-badge">
+                            {props.info.likenum}&nbsp;
+                            <span className={'icon icon-'+(props.attention ? 'star-ok' : 'star')} />
+                        </span>
+                    }
+                    {!!parseInt(props.info.reply,10) &&
+                        <span className="box-header-badge">
+                            {props.info.reply}&nbsp;
+                            <span className="icon icon-reply" />
+                        </span>
+                    }
+                    <code className="box-id"><a href={'##'+props.info.pid} onClick={this.copy_link}>#{props.info.pid}</a></code>
+                    &nbsp;
+                    <Time stamp={props.info.timestamp} />
+                </div>
+                <div className="box-content">
+                    <HighlightedText text={props.info.text} color_picker={props.color_picker} show_pid={props.show_pid} />
+                    {props.info.type==='image' &&
+                        <p className="img">
+                            {props.img_clickable ?
+                                <a href={IMAGE_BASE+props.info.url} target="_blank"><img src={IMAGE_BASE+props.info.url} /></a> :
+                                <img src={IMAGE_BASE+props.info.url} />
+                            }
+                        </p>
+                    }
+                    {props.info.type==='audio' && <AudioWidget src={AUDIO_BASE+props.info.url} />}
+                </div>
             </div>
-        </div>
-    );
+        );
+    }
 }
 
 class FlowSidebar extends PureComponent {
@@ -131,6 +144,29 @@ class FlowSidebar extends PureComponent {
         this.syncState=props.sync_state||(()=>{});
     }
 
+    set_variant(cid,variant) {
+        this.setState((prev)=>{
+            if(cid)
+                return {
+                    replies: prev.replies.map((reply)=>{
+                        if(reply.cid===cid)
+                            return Object.assign({},reply,{variant: variant});
+                        else
+                            return reply;
+                    }),
+                };
+            else
+                return {
+                    info: Object.assign({},prev.info,{variant: variant}),
+                }
+        },function() {
+            this.syncState({
+                info: this.state.info,
+                replies: this.state.replies,
+            });
+        });
+    }
+
     load_replies(update_count=true) {
         this.setState({
             loading_status: 'loading',
@@ -251,7 +287,9 @@ class FlowSidebar extends PureComponent {
                     }
                 </div>
                 <FlowItem info={this.state.info} attention={this.state.attention} img_clickable={true}
-                    color_picker={this.color_picker} show_pid={this.show_pid} replies={this.state.replies} />
+                    color_picker={this.color_picker} show_pid={this.show_pid} replies={this.state.replies}
+                    set_variant={(variant)=>{this.set_variant(null,variant);}}
+                />
                 {(this.props.deletion_detect && parseInt(this.state.info.reply)>this.state.replies.length) &&
                     <div className="box box-tip flow-item box-danger">
                         {parseInt(this.state.info.reply)-this.state.replies.length} 条回复被删除
@@ -259,7 +297,10 @@ class FlowSidebar extends PureComponent {
                 }
                 {this.state.replies.map((reply)=>(
                     <LazyLoad key={reply.cid} offset={500} height="5em" overflow={true} once={true}>
-                        <Reply info={reply} color_picker={this.color_picker} show_pid={this.show_pid} />
+                        <Reply
+                            info={reply} color_picker={this.color_picker} show_pid={this.show_pid}
+                            set_variant={(variant)=>{this.set_variant(reply.cid,variant);}}
+                        />
                     </LazyLoad>
                 ))}
                 {!!this.props.token ?
@@ -280,6 +321,7 @@ class FlowItemRow extends PureComponent {
             info: props.info,
             attention: false,
         };
+        this.state.info.variant={};
         this.color_picker=new ColorPicker();
         this.show_pid=load_single_meta(this.props.show_sidebar,this.props.token);
     }
diff --git a/src/Title.css b/src/Title.css
index 1fe9d78..7d49956 100644
--- a/src/Title.css
+++ b/src/Title.css
@@ -12,9 +12,16 @@
 
 .title {
     font-size: 1.5em;
-    line-height: 4em;
+    height: 4em;
+    padding-top: 1em;
     text-align: center;
 }
+.title .title-small {
+    opacity: .6;
+    padding-top: .5em;
+    font-size: .5em;
+    line-height: .5em;
+}
 
 .control-bar {
     display: flex;
diff --git a/src/Title.js b/src/Title.js
index a663f98..35b0a2a 100644
--- a/src/Title.js
+++ b/src/Title.js
@@ -156,13 +156,18 @@ export function Title(props) {
     return (
         <div className="title-bar">
             <div className="aux-margin">
-                <p className="title centered-line">
-                    P大树洞
-                    &nbsp;
-                    <a href="https://github.com/xmcp/ashole" target="_blank">
-                        <span className="icon icon-github" />
-                    </a>
-                </p>
+                <div className="title">
+                    <p className="centered-line">
+                        P大树洞
+                        &nbsp;
+                        <a href="https://github.com/xmcp/ashole" target="_blank">
+                            <span className="icon icon-github" />
+                        </a>
+                    </p>
+                    <p className="title-small">
+                        非官方网页版 by @xmcp
+                    </p>
+                </div>
                 <ControlBar show_sidebar={props.show_sidebar} set_mode={props.set_mode} />
             </div>
         </div>
diff --git a/src/flows_api.js b/src/flows_api.js
index 1903dcf..af1df1d 100644
--- a/src/flows_api.js
+++ b/src/flows_api.js
@@ -22,6 +22,7 @@ export const API={
                     })
                     .map((info)=>{
                         info._display_color=color_picker.get(info.name);
+                        info.variant={};
                         return info;
                     });