Merge pull request #21 from xs9627/master

V1.1.4 Release (close #19 )

CHANGELOG.md

@@ -1,3 +1,7 @@
+## [1.1.4] - 2020-01-05
+### Added
+- Keep historic feeds setting
+- Show feed title when scroll down
 ## [1.1.3] - 2019-11-27
 ### Chaged
 - Optimize go back gesture detection
@@ -51,6 +55,7 @@
 - Optimize channel list sorting
 - Handle feeds with no publish date
 
+[1.1.4]:https://github.com/xs9627/feedpop/compare/v1.1.3...v1.1.4
 [1.1.3]:https://github.com/xs9627/feedpop/compare/v1.1.2...v1.1.3
 [1.1.2]:https://github.com/xs9627/feedpop/compare/v1.1.1...v1.1.2
 [1.1.1]:https://github.com/xs9627/feedpop/compare/v1.1.0...v1.1.1

README.md

@@ -1,5 +1,7 @@
 ## FeedPop: Simple RSS feed reader
 [![version][version-badge]][CHANGELOG]
+[![CircleCI](https://img.shields.io/circleci/build/github/xs9627/feedpop/master.svg)](https://circleci.com/gh/xs9627/feedpop/tree/master)
+[![Dependabot Status](https://api.dependabot.com/badges/status?host=github&repo=xs9627/feedpop)](https://dependabot.com)
 
 A simple way to read RSS feeds in a popup window.
 
@@ -10,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.1.3-blue.svg
+[version-badge]: https://img.shields.io/badge/version-1.1.4-blue.svg

package.json

@@ -3,20 +3,20 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.7.0",
+    "@material-ui/core": "^4.8.2",
     "@material-ui/icons": "^4.5.1",
     "classnames": "^2.2.6",
     "i": "^0.3.6",
     "i18next": "^19.0.1",
     "i18next-browser-languagedetector": "^4.0.1",
     "lodash.range": "^3.2.0",
-    "mdi-material-ui": "^6.9.0",
-    "npm": "^6.13.1",
+    "mdi-material-ui": "^6.10.0",
+    "npm": "^6.13.4",
     "qrcode.react": "^1.0.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "react-i18next": "^11.2.2",
-    "react-scripts": "^3.2.0",
+    "react-i18next": "^11.2.7",
+    "react-scripts": "^3.3.0",
     "react-spring": "^8.0.27",
     "react-transition-group": "^4.3.0",
     "react-use-gesture": "^6.0.14",
@@ -41,7 +41,7 @@
     "cross-env": "^6.0.3",
     "react-app-rewired": "^2.1.5",
     "react-redux": "^7.1.3",
-    "redux": "^4.0.4"
+    "redux": "^4.0.5"
   },
   "browserslist": [
     ">0.2%",

public/manifest.json

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

src/components/FeedContent.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef }  from 'react'
+import React, { useEffect, useRef }  from 'react'
 import { connect } from "react-redux";
 import { makeStyles } from '@material-ui/core/styles';
 import ChromeUtil from '../utils/ChromeUtil';
@@ -94,6 +94,9 @@ const useStyles = makeStyles(theme => ({
         borderRadius: '50%',
         backgroundColor: 'rgba(255, 255, 255, 0.1)',
         padding: 12,
+    },
+    headerTitle: {
+        minWidth: 0
     }
 }));
 
@@ -106,26 +109,25 @@ const FeedContent = props => {
     const classes = useStyles(props);
     const contentContainer = useRef(null)
     const contentHtml = {__html: feed['content:encoded'] ? feed['content:encoded'] : feed.content}
-    const [lastFeedContentTop] = useState(feedContentTop)
 
     useEffect(() => {
         const curContentContainer = contentContainer.current
-        if (lastFeedContentTop > 0) {
+        if (feedContentTop > 0) {
             const imgList = curContentContainer.getElementsByTagName('img');
             if (imgList.length > 0) {
                 let count = imgList.length;
                 const countImg = () => {
                     count--;
                     if (count === 0) {
-                        curContentContainer.scrollTop = lastFeedContentTop;
+                        curContentContainer.scrollTop = feedContentTop;
                     }
                 }
                 for (let i = 0; i < imgList.length; i++) {
                     imgList[i].onload = countImg;
                     imgList[i].onerror = countImg;
                 }
             } else {
-                curContentContainer.scrollTop = lastFeedContentTop;
+                curContentContainer.scrollTop = feedContentTop;
             }
         }
 
@@ -150,7 +152,7 @@ const FeedContent = props => {
             document.removeEventListener('click', handleClick);
             curContentContainer.removeEventListener('scroll', trackScrolling);
         }
-    }, [lastFeedContentTop, scrollFeedContent])
+    }, [feedContentTop, scrollFeedContent])
 
     const [{ x, opacity }, set] = useSpring(() => ({ x: 0, opacity: 0 }))
     let xMove = 0
@@ -176,14 +178,45 @@ const FeedContent = props => {
         onWheel: ({ delta: [xDelta], direction: [xDirection], active }) => onBackGesture(xDelta, xDirection, active)
     })
 
+    const getTitleOpacity = (top) => {
+        const showTitleTop = 50
+        const showDelta = 50
+        const calTop = top - showTitleTop
+        const ttitleOpacity = calTop > 0 ? (calTop < showDelta ? calTop / showTitleTop : 1) : 0
+        return {titleOpacity: ttitleOpacity, titleCursor: ttitleOpacity === 1 ? 'auto': 'default'}
+    }
+    const [{ titleOpacity, titleCursor }, contentScrollSet] = useSpring(() => (getTitleOpacity(feedContentTop)))
+    const onContentScroll = (top) => {
+        contentScrollSet(getTitleOpacity(top))
+    }
+    const contentContainerBind = useGesture({
+        onScroll: ({xy: [, y]}) => onContentScroll(y)
+    })
+
     return (
         <div {...bind()} className={classes.root}>
             <Paper square={true} className={classes.actionContainer}>
                 <Grid container wrap="nowrap">
                     <Grid item xs zeroMinWidth>
-                        <IconButton key="close" className={classes.icon} onClick={props.closeFeed}>
-                            <ArrowBackIcon />
-                        </IconButton>
+                        <Grid container>
+                            <Grid item>
+                                <IconButton key="close" className={classes.icon} onClick={props.closeFeed}>
+                                    <ArrowBackIcon />
+                                </IconButton>
+                            </Grid>
+                            <Grid item xs zeroMinWidth container alignItems="center">
+                                <animated.div className={classes.headerTitle} style={{
+                                    opacity: titleOpacity,
+                                    cursor: titleCursor,
+                                }}>
+                                    <Tooltip title={feed.title} enterDelay={300} PopperProps={{disablePortal: true}}>
+                                        <Typography noWrap>
+                                            {feed.title}
+                                        </Typography>
+                                    </Tooltip>
+                                </animated.div>
+                            </Grid>
+                        </Grid>
                     </Grid>
                     <Grid item>
                         <Tooltip classes={{tooltip: classes.qrCodeTip}} title={
@@ -203,7 +236,7 @@ const FeedContent = props => {
                     </Grid>
                 </Grid>
             </Paper>
-            <div className={ classes.contentContainer } ref={contentContainer}>
+            <div className={ classes.contentContainer } ref={contentContainer} {...contentContainerBind()}>
                 { feed.deleted ? <div class={classes.emptyMsg}>
                     <Typography variant="caption">{t("Feed has been deleted")}</Typography> 
                 </div> :

src/components/header/ReaderSettings.js

@@ -26,9 +26,9 @@ import { setSettins, cleanCache, toggleShowRecentUpdate, downloadConfig, restore
 import { withTranslation } from 'react-i18next';
 
 const mapStateToProps = state => {
-    const { theme, fontSize, maxFeedsCount, refreshPeriod, source, version, showRecentUpdate } = state;
+    const { theme, fontSize, maxFeedsCount, refreshPeriod, source, version, showRecentUpdate, keepHistoricFeeds } = state;
     return {
-        config: { theme, fontSize, maxFeedsCount, refreshPeriod, source, version, showRecentUpdate },
+        config: { theme, fontSize, maxFeedsCount, refreshPeriod, source, version, showRecentUpdate, keepHistoricFeeds },
         logs: state.logs,
         showRestoreResult: state.tmp.showRestoreResult,
         restoreSuccess: state.tmp.restoreSuccess,
@@ -70,6 +70,11 @@ class Settings extends Component {
         this.props.setSettins({ fontSize });
     }
 
+    handleChangeKeepHistoricFeeds = event => {
+        const keepHistoricFeeds = event.target.checked;
+        this.props.setSettins({ keepHistoricFeeds });
+    }
+
     handleChangeShowRecentUpdate = event => {
         const showRecentUpdate = event.target.checked;
         this.props.toggleShowRecentUpdate(showRecentUpdate);
@@ -205,6 +210,16 @@ class Settings extends Component {
                             </Select>
                         </ListItemSecondaryAction>
                     </ListItem>
+                    <ListItem>
+                        <ListItemText primary={t("Keep historic feeds")}></ListItemText>
+                        <ListItemSecondaryAction>
+                            <Switch
+                                checked={this.props.config.keepHistoricFeeds}
+                                onChange={this.handleChangeKeepHistoricFeeds}
+                                color="primary"
+                            />
+                        </ListItemSecondaryAction>
+                    </ListItem>
                     <ListItem>
                         <ListItemText primary={t("Show recent updates")}></ListItemText>
                         <ListItemSecondaryAction>

src/locales/cn/translation.json

@@ -32,6 +32,7 @@
     "Source": "源代码",
     "Version": "版本号",
     "Delete all saved feeds?": "是否删除缓存内容？",
+    "Keep historic feeds": "保留历史内容",
     "Show recent updates": "显示最近更新",
     "Mark as unread": "标记为未读",
     "Mark as read": "标记为已读",

src/locales/en/translation.json

@@ -32,6 +32,7 @@
     "Source": "Source",
     "Version": "Version",
     "Delete all saved feeds?": "Delete all saved feeds?",
+    "Keep historic feeds": "Keep historic feeds",
     "Show recent updates": "Show recent updates",
     "Mark as unread": "Mark as unread",
     "Mark as read": "Mark as read",

src/reducers/index.js

@@ -3,10 +3,10 @@ import {ChannelFixedID} from "../constants/index";
 import ChromeUtil from "../utils/ChromeUtil";
 
 const recentCount = 30;
-const mergeFeed = (oldFeed, newFeed) => {
+const mergeFeed = (oldFeed, newFeed, keepHistoricFeeds) => {
     const uuidv4 = require('uuid/v4');
     if (oldFeed) {
-        const mergedItems = [...oldFeed.items];
+        const mergedItems = !keepHistoricFeeds ? [...oldFeed.items.filter(i => newFeed.items.some(j => i.link === j.link))] : [...oldFeed.items];
         newFeed.items.forEach((ni, i) => {
             if (!mergedItems.find(mi => mi.link === ni.link)) {
                 mergedItems.push({
@@ -119,6 +119,7 @@ const initialState = {
     allUnreadCount: 0,
     refreshPeriod: 15,
     recentChannelIndex: 0,
+    keepHistoricFeeds: true,
     showRecentUpdate: true,
     currentChannelId: ChannelFixedID.RECENT,
     tourOption: {},
@@ -295,7 +296,7 @@ const rootReducer = (state = initialState, action) => {
             const oldFeedsWithRecent = recentChannelFeeds ? 
             (oldFeeds ? {...recentChannelFeeds.feed, items: [...recentChannelFeeds.feed.items, ...oldFeeds.items]} : recentChannelFeeds.feed)
             : oldFeeds;
-            mergeFeed(oldFeedsWithRecent, feeds);
+            mergeFeed(oldFeedsWithRecent, feeds, state.keepHistoricFeeds);
             if (state.maxFeedsCount && state.maxFeedsCount > 0) {
                 feeds.items = feeds.items.slice(0, state.maxFeedsCount);
             }