Merge pull request #191 from xs9627/master

v1.2.5

CHANGELOG.md

@@ -1,3 +1,6 @@
+## [1.2.5] - 2020-11-28
+### Changed
+- Optimize back to read
 ## [1.2.4] - 2020-07-29
 ### Added
 - Import/Export OPML (#149)
@@ -82,6 +85,7 @@
 - Optimize channel list sorting
 - Handle feeds with no publish date
 
+[1.2.5]:https://github.com/xs9627/feedpop/compare/v1.2.4...v1.2.5
 [1.2.4]:https://github.com/xs9627/feedpop/compare/v1.2.3...v1.2.4
 [1.2.3]:https://github.com/xs9627/feedpop/compare/v1.2.2...v1.2.3
 [1.2.2]:https://github.com/xs9627/feedpop/compare/v1.2.1...v1.2.2

README.md

@@ -12,4 +12,4 @@ Install in chrome web store: https://chrome.google.com/webstore/detail/feedpop-s
 Load unpacked extension manually: https://github.com/xs9627/feedpop/releases
 
 [CHANGELOG]: ./CHANGELOG.md
-[version-badge]: https://img.shields.io/badge/version-1.2.4-blue.svg
+[version-badge]: https://img.shields.io/badge/version-1.2.5-blue.svg

config-overrides.js

@@ -33,7 +33,7 @@ module.exports = {
 		config.entry = {
 			main: [
 				isEnvDevelopment && paths.globalMocker,
-				...config.entry
+				config.entry,
 			].filter(Boolean),
 			background: paths.backgroundJs,
 		};

package.json

@@ -3,32 +3,32 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.11.0",
+    "@material-ui/core": "^4.11.1",
     "@material-ui/icons": "^4.9.1",
     "classnames": "^2.2.6",
     "i": "^0.3.6",
-    "i18next": "^19.6.3",
-    "i18next-browser-languagedetector": "^5.0.0",
+    "i18next": "^19.8.4",
+    "i18next-browser-languagedetector": "^6.0.1",
     "lodash.range": "^3.2.0",
-    "mdi-material-ui": "^6.17.0",
-    "npm": "^6.14.7",
+    "mdi-material-ui": "^6.20.0",
+    "npm": "^6.14.9",
     "opml-generator": "^1.1.1",
     "opml-to-json": "^0.0.3",
     "qrcode.react": "^1.0.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-i18next": "^11.7.0",
-    "react-scripts": "^3.4.1",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "react-i18next": "^11.7.3",
+    "react-scripts": "^4.0.1",
     "react-spring": "^8.0.27",
     "react-transition-group": "^4.4.1",
-    "react-use-gesture": "^7.0.15",
+    "react-use-gesture": "^8.0.1",
     "reactour": "https://github.com/xs9627/reactour/tarball/test",
     "redux-thunk": "^2.3.0",
-    "rss-parser": "https://github.com/xs9627/rss-parser/tarball/v3.8.0.0",
+    "rss-parser": "https://github.com/xs9627/rss-parser/tarball/v3.9.0.0",
     "sinon-chrome": "^3.0.1",
-    "styled-components": "^5.1.1",
+    "styled-components": "^5.2.1",
     "typeface-roboto-material": "0.0.1",
-    "uuid": "^8.3.0"
+    "uuid": "^8.3.1"
   },
   "scripts": {
     "start": "react-app-rewired start",
@@ -42,7 +42,7 @@
   "devDependencies": {
     "cross-env": "^7.0.2",
     "react-app-rewired": "^2.1.6",
-    "react-redux": "^7.2.1",
+    "react-redux": "^7.2.2",
     "redux": "^4.0.5"
   },
   "browserslist": [

public/manifest.json

@@ -19,5 +19,5 @@
     "48": "icon48.png",
     "128": "icon128.png"
   },
-  "version": "1.2.4"
+  "version": "1.2.5"
 }

src/background.js

@@ -1,6 +1,6 @@
 /* global chrome */
 import store from './store/index';
-import { syncState, updateAllChannelsFeed, updateLastActiveTime, cleanCache, markAllChannelAsRead, saveConfig, setFeedReadStatus } from './actions/index';
+import { syncState, updateAllChannelsFeed, updateLastActiveTime, cleanCache, markAllChannelAsRead, saveConfig, setFeedReadStatus, scrollFeedContent } from './actions/index';
 import { BACKGROUND_UPDATE_CHANNEL, CLEAR_NOTIFICATION } from './constants/action-types';
 import ChromeUtil from './utils/ChromeUtil';
 
@@ -50,9 +50,20 @@ chrome.notifications.onClicked.addListener(notificationId => {
 
 chrome.runtime.onConnect.addListener(externalPort => {
     ports.push(externalPort);
+    let feedContentTop
+    externalPort.onMessage.addListener(msg => {
+        switch(msg.key) {
+            case "setFeedContentTop": {
+                feedContentTop = msg.value
+                break
+            }
+            default:
+        }
+    })
     externalPort.onDisconnect.addListener(() => {
         ports.splice(ports.indexOf(externalPort), 1);
         store.dispatch(syncState()).then(() => {
+            store.dispatch(scrollFeedContent(feedContentTop));
             store.dispatch(updateLastActiveTime());
             store.dispatch(saveConfig());
         });

src/components/FeedContent.js

@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 import { makeStyles } from '@material-ui/core/styles';
 import ChromeUtil from '../utils/ChromeUtil';
 import Utils from '../utils/Utils';
-import { closeFeed, scrollFeedContent, setSettins } from '../actions/index'
+import { closeFeed, setSettins } from '../actions/index'
 
 import { useGesture } from 'react-use-gesture'
 import { useSpring, animated } from 'react-spring'
@@ -32,8 +32,10 @@ const mapStateToProps = state => {
 
 const mapDispatchToProps = dispatch => {
     return {
-        scrollFeedContent: top => dispatch(scrollFeedContent(top)),
-        closeFeed: () => dispatch(closeFeed()),
+        closeFeed: () => {
+            ChromeUtil.sendMessageToBackground({key: 'setFeedContentTop', value: 0})
+            dispatch(closeFeed())
+        },
         setSettins: settings => dispatch(setSettins(settings)),
     };
 };
@@ -106,45 +108,46 @@ const useStyles = makeStyles(theme => ({
 }));
 
 const FeedContent = props => {
+    console.log('renderd')
     const openFeed = url => {
         ChromeUtil.openTab(url);
     }
 
-    const { feed, t, feedContentTop, scrollFeedContent, feed: {link} } = props;
+    const { feed, t, feedContentTop, feed: {link} } = props;
     const classes = useStyles(props);
     const contentContainer = useRef(null)
     const contentHtml = {__html: feed['content:encoded'] ? feed['content:encoded'] : feed.content}
 
     useEffect(() => {
         const curContentContainer = contentContainer.current
-        if (feedContentTop > 0) {
+        if (feedContentTop > 0 && feedContentTop !== curContentContainer.scrollTop) {
             const imgList = curContentContainer.getElementsByTagName('img');
             if (imgList.length > 0) {
                 let count = imgList.length;
                 const countImg = () => {
                     count--;
-                    if (count === 0) {
+                    if (count === 0 && curContentContainer.scrollTop === 0) {
                         curContentContainer.scrollTop = feedContentTop;
                     }
                 }
                 for (let i = 0; i < imgList.length; i++) {
                     imgList[i].onload = countImg;
                     imgList[i].onerror = countImg;
                 }
+                return () => {
+                    for (let item of imgList) {
+                        item.onload = null
+                        item.onerror = null
+                    }
+                }
             } else {
                 curContentContainer.scrollTop = feedContentTop;
             }
         }
+    }, [feedContentTop])
 
-        const trackScrolling = (e) => {
-            const top  = e.target.scrollTop;
-            setTimeout(() => {
-                if (curContentContainer.scrollTop === top) {
-                    scrollFeedContent(top);
-                }
-            }, 500);
-        }
-
+    useEffect(() => {
+        const curContentContainer = contentContainer.current
         const handleClick = e => {
             if (curContentContainer.contains(e.target) && e.target.href !== undefined) {
                 let url = e.target.href
@@ -155,14 +158,11 @@ const FeedContent = props => {
                 ChromeUtil.openTab(url)
             }
         }
-
         document.addEventListener('click', handleClick);
-        curContentContainer.addEventListener('scroll', trackScrolling);
         return () => {
             document.removeEventListener('click', handleClick);
-            curContentContainer.removeEventListener('scroll', trackScrolling);
         }
-    }, [feedContentTop, scrollFeedContent, link])
+    }, [link])
 
     const [{ x, opacity }, set] = useSpring(() => ({ x: 0, opacity: 0 }))
     let xMove = 0
@@ -194,12 +194,17 @@ const FeedContent = props => {
         const ttitleOpacity = calTop > 0 ? 1 : 0
         return {titleOpacity: ttitleOpacity, titleCursor: ttitleOpacity === 1 ? 'auto': 'default'}
     }
-    const [{ titleOpacity, titleCursor }, contentScrollSet] = useSpring(() => (getTitleOpacity(feedContentTop)))
+    const [{ titleOpacity, titleCursor }, contentScrollSet] = useSpring(() => (getTitleOpacity(0)))
     const onContentScroll = (top) => {
         contentScrollSet(getTitleOpacity(top))
     }
     const contentContainerBind = useGesture({
-        onScroll: ({xy: [, y]}) => onContentScroll(y)
+        onScroll: ({xy: [, y], offset: [, yOffSet], vxvy: [, vy], distance}) => {
+            onContentScroll(y)
+            if (vy === 0 && distance > 10) {
+                ChromeUtil.sendMessageToBackground({key: 'setFeedContentTop', value: yOffSet})
+            }
+        }
     })
 
     return (

src/setupTests.js

@@ -22,12 +22,10 @@ jest.mock('react-i18next', () => ({
     },
 }));
 
-window.matchMedia = jest.fn().mockImplementation(query => {
-    return {
-        matches: false,
-        media: query,
-        onchange: null,
-        addListener: jest.fn(),
-        removeListener: jest.fn(),
-    };
+window.matchMedia = query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
 });

src/utils/ChromeUtil.js

@@ -1,4 +1,5 @@
 /* global chrome */
+let port
 let ChromeUtil = {
     get: key => {
         return new Promise((resolve, reject) => {
@@ -61,7 +62,7 @@ let ChromeUtil = {
         chrome.tabs.create({url, active});
     },
     connect: (state, receiveMessage) => {
-        const port = chrome.runtime.connect({name: "reader"});
+        port = chrome.runtime.connect({name: "reader"});
         port.state = state;
         port.onMessage.addListener(msg => {
             receiveMessage(msg);
@@ -112,6 +113,11 @@ let ChromeUtil = {
     },
     getMessage: (messageName, substitutions) => {
         return chrome.i18n.getMessage(messageName, substitutions)
+    },
+    sendMessageToBackground: message => {
+        if (port) {
+            port.postMessage(message)
+        }
     }
 };