add new post detection

src/Common.js

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 
 import TimeAgo from 'react-timeago';
-import Linkify, {linkify} from 'react-linkify';
+import Linkify from 'react-linkify';
 import chineseStrings from 'react-timeago/lib/language-strings/zh-CN';
 import buildFormatter from 'react-timeago/lib/formatters/buildFormatter';
 
@@ -9,8 +9,8 @@ import './Common.css';
 
 const chinese_format=buildFormatter(chineseStrings);
 
-const PID_RE=/(^|[^\d])([1-9]\d{4,5})(?!\d)/g;
+const PID_RE=/(^|\D)([1-9]\d{4,5})(?=\D)/g;
-const NICKNAME_RE=/((?:(?: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|洞主)/gi;
+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;
 
 function pad2(x) {
     return x<10 ? '0'+x : ''+x;

src/Flows.css

@@ -110,3 +110,15 @@
     font-family: Consolas, Courier, monospace;
     opacity: .6;
 }
+
+.flow-item-dot {
+    position: relative;
+    top: calc(-.5em - 5px);
+    left: calc(-.5em - 5px);
+    width: 10px;
+    height: 10px;
+    margin-bottom: -10px;
+    border-radius: 50%;
+    background-color: orange;
+    box-shadow: 0 0 5px rgba(0,0,0,.4);
+}

src/Flows.js

@@ -13,6 +13,8 @@ const SEARCH_PAGESIZE=50;
 const CLICKABLE_TAGS={a: true, audio: true};
 const PREVIEW_REPLY_COUNT=10;
 
+const LATEST_POST_ID=parseInt(localStorage['_LATEST_POST_ID'],10)||0;
+
 function Reply(props) {
     return (
         <div className={'flow-reply box'} style={props.info._display_color ? {
@@ -30,6 +32,7 @@ function Reply(props) {
 function FlowItem(props) {
     return (
         <div className="flow-item box">
+            {parseInt(props.info.pid,10)>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}★</span>}
                 {!!parseInt(props.info.reply,10) && <span className="box-header-badge">{props.info.reply}回复</span>}
@@ -179,6 +182,10 @@ export class Flow extends Component {
                     .then((json)=>{
                         if(json.code!==0)
                             throw new Error(json.code);
+                        json.data.forEach((x)=>{
+                            if(parseInt(x.pid,10)>(parseInt(localStorage['_LATEST_POST_ID'],10)||0))
+                                localStorage['_LATEST_POST_ID']=x.pid;
+                        });
                         this.setState((prev,props)=>({
                             chunks: prev.chunks.concat([{
                                 title: 'Page '+page,

src/Title.js

@@ -5,9 +5,10 @@ const HELP_TEXT=(
     <div className="box">
         <p>使用提示：</p>
         <ul>
-            <li>为保证使用体验，请使用 Chrome 浏览器 stable 分支最新版</li>
+            <li>为保证使用体验，请使用 Chrome 或 Mobile Safari 浏览器最新版</li>
-            <li>在列表中点击帖子可以显示全部回复</li>
+            <li>在列表中点击帖子可以展开全部回复</li>
             <li>在搜索框输入 #472865 等可以查看指定 ID 的树洞</li>
+            <li>新的帖子会在左上角显示一个圆点</li>
             <li>请注意：使用 HTTPS 访问本站可能会<b>大幅减慢</b>加载速度</li>
             <li>自定义背景图片请修改 localStorage['REPLACE_ERIRI_WITH_URL']</li>
         </ul>