improve img and add reply lazyload

.gitignore

@@ -1,3 +1,3 @@
 /.idea/
 node_modules/
-
+/build/

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;

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 {

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>
             ))}