clean up code & improve debug Feature

.eslintrc

@@ -17,7 +17,10 @@
     "parser": "babel-eslint",
     "parserOptions": {
         "ecmaVersion": 6,
-        "sourceType": "module"
+        "sourceType": "module",
+        "ecmaFeatures": {
+            "jsx": true
+        }
     },
     "rules": {
         "comma-dangle": [1, "always-multiline"],
@@ -42,5 +45,10 @@
         "space-in-parens": 1,
         "space-infix-ops": 1,
         "valid-jsdo": 0
+    },
+    "settings": {
+        "react": {
+            "version": "16.4.1"
+        }
     }
 }

package.json

@@ -53,6 +53,7 @@
         "babel-preset-es2015": "^6.24.1",
         "babel-preset-react": "^6.24.1",
         "clean-webpack-plugin": "^0.1.19",
+        "concurrently": "^4.1.0",
         "copy-webpack-plugin": "^4.5.1",
         "css-loader": "^0.28.11",
         "cssnano": "^4.0.3",
@@ -81,8 +82,9 @@
     },
     "scripts": {
         "grunt": "grunt",
-        "watch": "webpack --config=webpack.config.development.js --watch --progress",
-        "build": "webpack --production --progress"
+        "watch": "webpack --env.DEBUG=true --config=webpack.config.development.js --watch --progress",
+        "build": "webpack --production --progress",
+        "build:test": "webpack --env.DEBUG=true --production --progress"
     },
     "author": "zacyu & ruo",
     "license": "MIT",

src/js/components/configPage/CheckBoxButton/index.js

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled, {ThemeProvider} from 'styled-components';
 import {theme} from 'Styles/theme';
 
 const {color} = theme;
@@ -36,18 +36,20 @@ const Bar = styled.div`
   }
 `;
 
-const Knob = styled.span.attrs({className: 'checkbox-knob'})`
+const Knob = styled.span.attrs({
+    className: `checkbox-knob`
+})`
   display: block;
-  width: 14px;
+  width: ${({theme}) => theme.mouseDown ? '17px' : '14px'};
   height: 14px;
   border-radius: 2px;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
   background-color: white;
   border: 1px solid transparent;
-  transition: transform linear 80ms, background-color linear 80ms;
+  transition: transform linear 80ms, background-color linear 80ms, width linear 80ms;
   z-index: 1;
   .checked & {
-    transform: translate3d(20px, 0, 0);
+    transform: translate3d(${({theme}) => theme.mouseDown ? '17px' : '20px'}, 0, 0);
   }
 `;
 
@@ -78,17 +80,19 @@ export class CheckBoxButton extends React.Component {
 
     render() {
         const {on, onClick, disable} = this.props;
-        //const {mouseDown} = this.state;
+        const {mouseDown} = this.state;
         return (
+            <ThemeProvider theme={{mouseDown}}>
             <View className={on ? 'checked' : ''} onClick={onClick}>
-                <Bar>
-                    <Knob
-                        onMouseDown={!disable ? this.handleOnMouseDown : null}
-                        onMouseUp={!disable ? this.handleOnMouseUp : null}
-                        onMouseLeave={!disable ? this.handleOnMouseUp : null}
-                    />
+                <Bar
+                    onMouseDown={!disable ? this.handleOnMouseDown : null}
+                    onMouseUp={!disable ? this.handleOnMouseUp : null}
+                    onMouseLeave={!disable ? this.handleOnMouseUp : null}
+                >
+                    <Knob/>
                 </Bar>
             </View>
+            </ThemeProvider>
         );
     }
 };

src/js/components/configPage/index.js

@@ -14,5 +14,3 @@ export {CheckBoxGroup} from './CheckBoxGroup';
 export {UpdateList} from './UpdateList';
 export {SubPage} from './SubPage';
 export {CheckBoxButton} from './CheckBoxButton';
-
-//export {Helper} from './Helper';

src/js/libs/feature.js

@@ -76,7 +76,8 @@ export class Feature {
     // 初始化配置
     initSetting = (sets) => {
         return new Promise(resolve => {
-            const settings = sets || store.get(this.optionStoreName) || {}; // 缓存配置
+            const localOptions = this.settings.toggle ? {} : store.get(this.optionStoreName);
+            const settings = sets || localOptions || {}; // 缓存配置
             this.settings = this.mergeSetting(this.settings, settings);
             store.set(this.optionStoreName, this.simplifySetting(this.settings));
             resolve(this);

src/js/libs/permissionManager/index.js

@@ -43,7 +43,7 @@ export class PermissionManager {
     };
 
     checkAll = () => {
-        const promiseMap = _.map(PERMISSION_STATUS, (value, permissionName) => {
+        const promiseArray = _.map(PERMISSION_STATUS, (value, permissionName) => {
             return new Promise((resolve) => {
                 switch (permissionName) {
                     case 'login':
@@ -64,7 +64,7 @@ export class PermissionManager {
                 this.permissionMap[permissionName] = res;
             });
         });
-        return Promise.all(promiseMap, () => {
+        return Promise.all(promiseArray, () => {
             this.hasCheckAll = true;
         });
     };
@@ -81,7 +81,6 @@ export class PermissionManager {
                 this.typeMap[permissionName].push(feature);
 
                 return this.permissionMap[permissionName];
-                //return this.permissionMap[permissionName]
             })).then(checkResults => {
                 const res = _.filter(checkResults, ({pass}) => !pass);
                 if (res.length > 0) resolve({pass: false, data: res});

src/js/modules/danmu/UI/danmu.js

@@ -389,13 +389,13 @@ export class Danmu extends React.Component {
                     <DownloadBtn title="下载 XML 格式弹幕文件" onClick={() => this.handleDownloadClick('ass')}>XML</DownloadBtn>
                 </Title>
                 <DanmuList>
-                    {loaded && danmuJSON.count > 0 ? _.map(danmuJSON.list, (danmuData, index) => {
-                        const {danmu, authorHash, time} = danmuData;
+                    {loaded && danmuJSON.count > 0 ? _.map(danmuJSON.list, (danmuData) => {
+                        const {danmu, authorHash, time, rowId} = danmuData;
                         const uids = authorHashMap[authorHash];
                         let authorNames = _.map(uids, (uid) => this.userMap[uid] ? this.userMap[uid].name : '');
                         return (
                             <DanmuListLine
-                                key={index}
+                                key={`${rowId}`}
                                 title={`[${time}] ${danmu} ${authorNames ? `by:${authorNames.join(',')}` : ''}`}
                                 onClick={() => uids ? this.handleAuthorClick(uids) : this.handleDanmuLineClick(authorHash)}
                                 hasQueried={!_.isEmpty(authorNames)}

src/js/modules/debug/index.js

@@ -1,3 +1,4 @@
+/* global process */
 /**
  * Author: DrowsyFlesh
  * Create: 2018/10/24
@@ -12,8 +13,8 @@ export class Debug extends Feature {
             name: 'debug',
             kind: 'other',
             settings: {
-                on: true,
-                toggle: false,
+                on: process.env.DEBUG || false,
+                toggle: !process.env.DEBUG,
                 title: '调试模式',
                 description: '测试版中该选项无法关闭。开启后会在控制台输出更多信息，并执行更多用于测试的代码',
             },

src/js/modules/menu/index.js

@@ -20,8 +20,8 @@ export class Menu extends Feature {
                 hasUI: true,
                 description: '选择您需要在扩展菜单中显示的常用功能',
                 options: [
-                    {key: 'showIcon', title: '图标按钮', on: false},
-                    {key: 'oldWatchPage', title: '旧关注页面', on: false, description: '开启后菜单按钮将显示为图标'},
+                    {key: 'showIcon', title: '图标按钮', on: false, description: '开启后菜单按钮将显示为图标'},
+                    {key: 'oldWatchPage', title: '旧关注页面', on: false},
                 ],
                 subPage: {
                     title: '启用菜单栏',
@@ -37,4 +37,4 @@ export class Menu extends Feature {
             },
         });
     }
-}
+}

src/js/modules/videoDownload/UI/videoDownload.js

@@ -165,6 +165,8 @@ export class VideoDownload extends React.Component {
         const {videoData, currentCid} = this.state;
         let oldType = false;
         let morePart = false;
+        const partDOM = document.querySelector('#v_multipage a.on, #multi_page .cur-list li.on a');
+        const partName = partDOM ? partDOM.innerHTML : '';
         return (
             <React.Fragment>
                 <Title>视频下载 - 切换清晰度来获取视频连接</Title>
@@ -187,7 +189,6 @@ export class VideoDownload extends React.Component {
                                             referrerPolicy="unsafe-url"
                                             href={o.url}
                                             onClick={() => this.handleOnClickDownload(o.url)}
-                                            download
                                         >{title}</a>
                                     </React.Fragment>
                                 );

src/js/modules/videoDownload/index.js

@@ -113,4 +113,4 @@ export class VideoDownload extends Feature {
             urls: ['*://*.acgvideo.com/*'],
         }, ['responseHeaders', 'blocking']);
     };
-}
+}

src/js/pages/config/index.js

@@ -56,7 +56,7 @@ const Figure = styled.figure`
   }
 `;
 const Alipay = styled.img`
-  width: 60px;
+  width: 100px;
 `;
 
 const Header = styled.div`
@@ -141,7 +141,7 @@ class PageConfig extends React.Component {
             popup: {title: '菜单栏', map: {}},
             other: {title: '其他', map: {}},
         };
-        this.defaultBroadcast = '如果您的版本显示为测试版或者出现了问题，请尝试卸载本扩展后重新安装';
+        this.defaultBroadcast = '';
         this.state = {
             modalTitle: null,
             modalBody: null,
@@ -271,7 +271,6 @@ class PageConfig extends React.Component {
                                                                                               on={on}/>;
 
                     let errorDescription = [];
-                    console.warn(featureName, permissionMap);
                     const permissionList = _.map(permissions, (name) => {
                         if ((name in permissionMap && permissionMap[name].pass === false) || permissionMap[name] === undefined) {
                             errorDescription.push(
@@ -438,10 +437,11 @@ class PageConfig extends React.Component {
                     <sub>{`version ${version}（${debug === true ? '测试' : '正式'}版）`}</sub>
                     {/*<Cat iconfont="cat"/>*/}
                 </Header>
-                <Broadcast>
+                {(!debug || broadcast) && <Broadcast>
+                    {!debug && '如果您的版本显示为测试版或者出现了问题，请尝试卸载本扩展后重新安装'}<br/>
                     {broadcast}<br/>
                     {/*调试模式下会显示该标志<PermissionTag>Name</PermissionTag>，代表功能需要拥有的相关权限或浏览器特性*/}
-                </Broadcast>
+                </Broadcast>}
                 <SubPage
                     on={subPageOn}
                     title={subPageTitle}