Merge pull request #41 from yang991178/0.6.2

Version 0.6.2

.github/ISSUE_TEMPLATE/bug_report.md

@@ -23,16 +23,9 @@ A clear and concise description of what you expected to happen.
 **Screenshots**
 If applicable, add screenshots to help explain your problem.
 
-**Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
-
-**Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
+**Platform (please complete the following information):**
+ - OS: [e.g. Windows 10 2004]
+ - Version [e.g. 0.6.1]
 
 **Additional context**
 Add any other context about the problem here.

.github/workflows/release-linux.yml

@@ -24,7 +24,7 @@ jobs:
 
     - name: Get release
       id: get_release
-      uses: bruceadams/get-release@v1
+      uses: bruceadams/get-release@v1.2.0
 
     - name: Upload AppImage to release assets
       uses: actions/upload-release-asset@v1

dist/styles/cards.css

@@ -78,7 +78,7 @@
     position: absolute;
     top: 0;
     left: 0;
-    background: #0004;
+    background: #0003;
 }
 
 .default-card {

dist/styles/feeds.css

@@ -22,11 +22,16 @@
 }
 .article {
     height: 100%;
+    user-select: none;
 }
-.article webview {
+.article webview, .article .error-prompt {
     width: 100%;
     height: calc(100% - 36px);
     border: none;
+    color: var(--black);
+}
+.article webview.error {
+    display: none;
 }
 .article i.ms-Icon {
     color: var(--neutralDarker);
@@ -35,18 +40,31 @@
     color: var(--black);
     border-bottom: 1px solid var(--neutralQuaternaryAlt);
 }
-.article .actions .favicon {
-    margin-right: 8px;
+.article .actions .favicon, .article .actions .ms-Spinner {
+    margin: 8px 8px 11px 0;
+}
+.article .actions .ms-Spinner {
+    display: inline-block;
+    vertical-align: middle;
 }
 .article .actions .source-name {
     line-height: 35px;
     user-select: none;
-    max-width: 280px;
+    max-width: 320px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     display: inline-block;
 }
+.article .actions .creator {
+    color: var(--neutralSecondaryAlt);
+    user-select: text;
+}
+.article .actions .creator::before {
+    display: inline-block;
+    content: "/";
+    margin: 0 6px;
+}
 .side-article-wrapper, .side-logo-wrapper {
     flex-grow: 1;
     padding-top: var(--navHeight);

dist/styles/global.css

@@ -52,6 +52,9 @@ html, body {
     height: 100%;
 }
 
+.ms-Link {
+    user-select: none;
+}
 .ms-ContextualMenu-link, .ms-Button, .ms-ContextualMenu-item button {
     cursor: default;
     font-size: 13px;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluent-reader",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "A simplistic, modern desktop RSS reader",
   "main": "./dist/electron.js",
   "scripts": {
@@ -20,7 +20,10 @@
     "appId": "me.hyliu.fluentreader",
     "productName": "Fluent Reader",
     "copyright": "Copyright © 2020 Haoyuan Liu",
-    "files": "./dist/**/*",
+    "files": [
+      "./dist/**/*",
+      "!**/*.js.map"
+    ],
     "directories": {
       "output": "./bin/${platform}/${arch}/"
     },
@@ -91,6 +94,7 @@
     "electron-react-devtools": "^0.5.3",
     "electron-store": "^5.2.0",
     "electron-window-state": "^5.0.3",
+    "hard-source-webpack-plugin": "^0.13.1",
     "html-webpack-plugin": "^4.3.0",
     "nedb": "^1.8.0",
     "qrcode.react": "^1.0.0",

src/bridges/settings.ts

@@ -1,4 +1,4 @@
-import { SourceGroup, ViewType, ThemeSettings, SchemaTypes } from "../schema-types"
+import { SourceGroup, ViewType, ThemeSettings, SearchEngines } from "../schema-types"
 import { ipcRenderer } from "electron"
 
 const settingsBridge = {
@@ -75,6 +75,13 @@ const settingsBridge = {
         ipcRenderer.invoke("set-fetch-interval", interval)
     },
 
+    getSearchEngine: (): SearchEngines => {
+        return ipcRenderer.sendSync("get-search-engine")
+    },
+    setSearchEngine: (engine: SearchEngines) => {
+        ipcRenderer.invoke("set-search-engine", engine)
+    },
+
     getAll: () => {
         return ipcRenderer.sendSync("get-all-settings") as Object
     },

src/bridges/utils.ts

@@ -42,6 +42,12 @@ const utilsBridge = {
         await ipcRenderer.invoke("clear-cache")
     },
 
+    addMainContextListener: (callback: (pos: [number, number], text: string) => any) => {
+        ipcRenderer.removeAllListeners("window-context-menu")
+        ipcRenderer.on("window-context-menu", (_, pos, text) => {
+            callback(pos, text)
+        })
+    },
     addWebviewContextListener: (callback: (pos: [number, number], text: string) => any) => {
         ipcRenderer.removeAllListeners("webview-context-menu")
         ipcRenderer.on("webview-context-menu", (_, pos, text) => {
@@ -56,6 +62,13 @@ const utilsBridge = {
         })
     },
 
+    addWebviewErrorListener: (callback: (reason: string) => any) => {
+        ipcRenderer.removeAllListeners("webview-error")
+        ipcRenderer.on("webview-error", (_, reason) => {
+            callback(reason)
+        })
+    },
+
     writeClipboard: (text: string) => {
         ipcRenderer.invoke("write-clipboard", text)
     },

src/components/article.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import intl from "react-intl-universal"
 import { renderToString } from "react-dom/server"
 import { RSSItem } from "../scripts/models/item"
-import { Stack, CommandBarButton, IContextualMenuProps, FocusZone, ContextualMenuItemType } from "@fluentui/react"
+import { Stack, CommandBarButton, IContextualMenuProps, FocusZone, ContextualMenuItemType, Spinner, Icon, Link } from "@fluentui/react"
 import { RSSSource, SourceOpenTarget } from "../scripts/models/source"
 import { shareSubmenu } from "./context-menu"
 
@@ -25,6 +25,9 @@ type ArticleProps = {
 type ArticleState = {
     fontSize: number
     loadWebpage: boolean
+    loaded: boolean
+    error: boolean
+    errorDescription: string
 }
 
 class Article extends React.Component<ArticleProps, ArticleState> {
@@ -34,10 +37,14 @@ class Article extends React.Component<ArticleProps, ArticleState> {
         super(props)
         this.state = {
             fontSize: this.getFontSize(),
-            loadWebpage: this.props.source.openTarget === SourceOpenTarget.Webpage
+            loadWebpage: this.props.source.openTarget === SourceOpenTarget.Webpage,
+            loaded: false,
+            error: false,
+            errorDescription: "",
         }
         window.utils.addWebviewContextListener(this.contextMenuHandler)
         window.utils.addWebviewKeydownListener(this.keyDownHandler)
+        window.utils.addWebviewErrorListener(this.webviewError)
     }
 
     getFontSize = () => {
@@ -125,11 +132,26 @@ class Article extends React.Component<ArticleProps, ArticleState> {
         }
     }
 
+    webviewLoaded = () => {
+        this.setState({loaded: true})
+    }
+    webviewError = (reason: string) => {
+        this.setState({error: true, errorDescription: reason})
+    }
+    webviewReload = () => {
+        if (this.webview) {
+            this.setState({loaded: false, error: false})
+            this.webview.reload()
+        }
+    }
+
     componentDidMount = () => {
         let webview = document.getElementById("article") as Electron.WebviewTag
         if (webview != this.webview) {
             this.webview = webview
             webview.focus()
+            this.setState({loaded: false, error: false})
+            webview.addEventListener("did-stop-loading", this.webviewLoaded)
             let card = document.querySelector(`#refocus div[data-iid="${this.props.item._id}"]`) as HTMLElement
             // @ts-ignore
             if (card) card.scrollIntoViewIfNeeded()
@@ -172,8 +194,11 @@ class Article extends React.Component<ArticleProps, ArticleState> {
                 <Stack className="actions" grow horizontal tokens={{childrenGap: 12}}>
                     <Stack.Item grow>
                         <span className="source-name">
-                            {this.props.source.iconurl && <img className="favicon" src={this.props.source.iconurl} />}
+                            {this.state.loaded
+                                ? (this.props.source.iconurl && <img className="favicon" src={this.props.source.iconurl} />)
+                                : <Spinner size={1} />}
                             {this.props.source.name}
+                            {this.props.item.creator && <span className="creator">{this.props.item.creator}</span>}
                         </span>
                     </Stack.Item>
                     <CommandBarButton
@@ -212,10 +237,21 @@ class Article extends React.Component<ArticleProps, ArticleState> {
             </Stack>
             <webview 
                 id="article"
+                className={this.state.error ? "error" : ""}
                 key={this.props.item._id + (this.state.loadWebpage ? "_" : "")}
                 src={this.state.loadWebpage ? this.props.item.link : this.articleView()}
                 webpreferences="contextIsolation,disableDialogs,autoplayPolicy=document-user-activation-required"
-                partition="sandbox" />
+                partition={this.state.loadWebpage ? "sandbox" : undefined} />
+            {this.state.error && (
+                <Stack className="error-prompt" verticalAlign="center" horizontalAlign="center" tokens={{childrenGap: 12}}>
+                    <Icon iconName="HeartBroken" style={{fontSize: 32}} />
+                    <Stack horizontal horizontalAlign="center" tokens={{childrenGap: 7}}>
+                        <small>{intl.get("article.error")}</small>
+                        <small><Link onClick={this.webviewReload}>{intl.get("article.reload")}</Link></small>
+                    </Stack>
+                    <span style={{fontSize: 11}}>{this.state.errorDescription}</span>
+                </Stack>
+            )}
         </FocusZone>
     )
 }

src/components/cards/compact-card.tsx

@@ -5,7 +5,7 @@ import Time from "../utils/time"
 
 const className = (props: Card.Props) => {
     let cn = ["card", "compact-card"]
-    if (props.item.hasRead) cn.push("read")
+    if (props.item.hidden) cn.push("hidden")
     return cn.join(" ")
 }
 

src/components/context-menu.tsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 import intl from "react-intl-universal"
 import QRCode from "qrcode.react"
-import { cutText, googleSearch } from "../scripts/utils"
+import { cutText, webSearch, getSearchEngineName } from "../scripts/utils"
 import { ContextualMenu, IContextualMenuItem, ContextualMenuItemType, DirectionalHint } from "office-ui-fabric-react/lib/ContextualMenu"
 import { ContextMenuType } from "../scripts/models/app"
 import { RSSItem } from "../scripts/models/item"
@@ -45,6 +45,19 @@ const renderShareQR = (item: IContextualMenuItem) => (
     </div>
 )
 
+function getSearchItem(text: string): IContextualMenuItem {
+    const engine = window.settings.getSearchEngine()
+    return {
+        key: "searchText",
+        text: intl.get("context.search", {
+            text: cutText(text, 15),
+            engine: getSearchEngineName(engine)
+        }),
+        iconProps: { iconName: "Search" },
+        onClick: () => webSearch(text, engine)
+    }
+}
+
 export class ContextMenu extends React.Component<ContextMenuProps> {
     getItems = (): IContextualMenuItem[] => {
         switch (this.props.type) {
@@ -137,12 +150,7 @@ export class ContextMenu extends React.Component<ContextMenuProps> {
                     iconProps: { iconName: "Copy" },
                     onClick: () => { window.utils.writeClipboard(this.props.text) }
                 },
-                {
-                    key: "searchText",
-                    text: intl.get("context.search", { text: cutText(this.props.text, 15) }),
-                    iconProps: { iconName: "Search" },
-                    onClick: () => { googleSearch(this.props.text) }
-                }
+                getSearchItem(this.props.text)
             ]
             case ContextMenuType.View: return [
                 {

src/components/root.tsx

@@ -12,11 +12,7 @@ import { RootState } from "../scripts/reducer"
 const Root = ({ locale, dispatch }) => locale && (
     <div id="root" 
         key={locale}
-        onMouseDown={() => dispatch(closeContextMenu())}
-        onContextMenu={event => {
-            let text = document.getSelection().toString()
-            if (text) dispatch(openTextMenu(text, [event.clientX, event.clientY]))
-        }}>
+        onMouseDown={() => dispatch(closeContextMenu())}>
         <NavContainer />
         <PageContainer />
         <LogMenuContainer />

src/components/settings/app.tsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 import intl from "react-intl-universal"
-import { urlTest, byteToMB, calculateItemSize } from "../../scripts/utils"
-import { ThemeSettings } from "../../schema-types"
+import { urlTest, byteToMB, calculateItemSize, getSearchEngineName } from "../../scripts/utils"
+import { ThemeSettings, SearchEngines } from "../../schema-types"
 import { getThemeSettings, setThemeSettings, exportAll } from "../../scripts/settings"
 import { Stack, Label, Toggle, TextField, DefaultButton, ChoiceGroup, IChoiceGroupOption, loadTheme, Dropdown, IDropdownOption, PrimaryButton } from "@fluentui/react"
 import DangerButton from "../utils/danger-button"
@@ -73,6 +73,16 @@ class AppTab extends React.Component<AppTabProps, AppTabState> {
         this.props.setFetchInterval(item.key as number)
     }
 
+    searchEngineOptions = (): IDropdownOption[] => [
+        SearchEngines.Google, SearchEngines.Bing, SearchEngines.Baidu, SearchEngines.DuckDuckGo
+    ].map(engine => ({
+        key: engine,
+        text: getSearchEngineName(engine)
+    }))
+    onSearchEngineChanged = (item: IDropdownOption) => {
+        window.settings.setSearchEngine(item.key as number)
+    }
+
     deleteOptions = (): IDropdownOption[] => [
         { key: "7", text: intl.get("app.daysAgo", { days: 7 }) },
         { key: "14", text: intl.get("app.daysAgo", { days: 14 }) },
@@ -153,6 +163,17 @@ class AppTab extends React.Component<AppTabProps, AppTabState> {
                 </Stack.Item>
             </Stack>
 
+            <Label>{intl.get("searchEngine.name")}</Label>
+            <Stack horizontal>
+                <Stack.Item>
+                    <Dropdown 
+                        defaultSelectedKey={window.settings.getSearchEngine()}
+                        options={this.searchEngineOptions()}
+                        onChanged={this.onSearchEngineChanged}
+                        style={{width: 200}} />
+                </Stack.Item>
+            </Stack>
+
             <Stack horizontal verticalAlign="baseline">
                 <Stack.Item grow>
                     <Label>{intl.get("app.enableProxy")}</Label>

src/electron.ts

@@ -61,7 +61,7 @@ const winManager = new WindowManager()
 
 app.on("window-all-closed", () => {
     if (winManager.hasWindow()) {
-        winManager.mainWindow.webContents.session.clearStorageData({ storages: ["cookies"] })
+        winManager.mainWindow.webContents.session.clearStorageData({ storages: ["cookies", "localstorage"] })
     }
     winManager.mainWindow = null
     if (restarting) {