From f07c5633e1afac34dc348e8ea60058bb7f043657 Mon Sep 17 00:00:00 2001
From: xmcp <xiaoyuanan2000@sina.com>
Date: Thu, 23 Aug 2018 12:23:05 +0800
Subject: [PATCH] improve img and add reply lazyload

---
 .gitignore    | 2 +-
 src/Common.js | 2 +-
 src/Flows.css | 7 ++++++-
 src/Flows.js  | 8 +++++---
 4 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/.gitignore b/.gitignore
index 096e330..4173f7d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,3 @@
 /.idea/
 node_modules/
-
+/build/
diff --git a/src/Common.js b/src/Common.js
index 53c8c48..65aef47 100644
--- a/src/Common.js
+++ b/src/Common.js
@@ -10,7 +10,7 @@ import './Common.css';
 const chinese_format=buildFormatter(chineseStrings);
 
 const PID_RE=/(^|\D)([1-9]\d{4,5})(?=\D)/g;
-const NICKNAME_RE=/(^|\W)((?:(?: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|洞主)(?=\W)/gi;
+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|洞主)(?![A-Za-z])/gi;
 
 function pad2(x) {
     return x<10 ? '0'+x : ''+x;
diff --git a/src/Flows.css b/src/Flows.css
index 0dbdf4e..013a994 100644
--- a/src/Flows.css
+++ b/src/Flows.css
@@ -97,8 +97,13 @@
     margin-left: -10px;
 }
 
-.flow-item-row img {
+.flow-item-row p.img {
+    text-align: center;
+}
+p.img img {
     max-width: 100%;
+    max-height: 100vh;
+    box-shadow: 0 1px 5px rgba(0,0,0,.4);
 }
 
 .box-header-badge {
diff --git a/src/Flows.js b/src/Flows.js
index 8f3d281..c9ce6a9 100644
--- a/src/Flows.js
+++ b/src/Flows.js
@@ -40,7 +40,7 @@ function FlowItem(props) {
                 <Time stamp={props.info.timestamp} />
             </div>
             <HighlightedText text={props.info.text} color_picker={props.color_picker} />
-            {props.info.type==='image' ? <img src={IMAGE_BASE+props.info.url} /> : null}
+            {props.info.type==='image' ? <p className="img"><img src={IMAGE_BASE+props.info.url} /></p> : null}
             {props.info.type==='audio' ? <AudioWidget src={AUDIO_BASE+props.info.url} /> : null}
         </div>
     );
@@ -110,7 +110,9 @@ class FlowItemRow extends Component {
                 </div>
                 <FlowItem info={this.state.info} color_picker={this.color_picker} />
                 {this.state.replies.map((reply)=>(
-                    <Reply key={reply.cid} info={reply} color_picker={this.color_picker} />
+                    <LazyLoad offset={500} height="5em" overflow={true} once={true}>
+                        <Reply key={reply.cid} info={reply} color_picker={this.color_picker} />
+                    </LazyLoad>
                 ))}
             </div>
         );
@@ -146,7 +148,7 @@ function FlowChunk(props) {
         <div className="flow-chunk">
             <TitleLine text={props.title} />
             {props.list.map((info)=>(
-                <LazyLoad key={info.pid} offset={500} height="15em">
+                <LazyLoad key={info.pid} offset={500} height="15em" once={true} >
                     <FlowItemRow info={info} callback={props.callback} />
                 </LazyLoad>
             ))}