feat: add ICP & disable autoplay bgm

package.json

@@ -30,57 +30,57 @@
   "homepage": "https://ichuantong.cn",
   "dependencies": {
     "@ungap/url-search-params": "^0.1.4",
-    "@welldone-software/why-did-you-render": "^4.0.3",
+    "@welldone-software/why-did-you-render": "^4.0.5",
     "color-convert": "^2.0.1",
     "file-saver": "^2.0.2",
     "html2canvas": "^1.0.0-rc.5",
     "jinrishici": "^1.0.6",
     "pinyin": "^2.9.0",
-    "react": "^16.12.0",
+    "react": "^16.13.0",
     "react-copy-to-clipboard": "^5.0.2",
-    "react-dom": "^16.12.0",
+    "react-dom": "^16.13.0",
     "react-github-btn": "^1.1.1",
     "react-router-dom": "^5.1.2",
-    "smooth-scroll-into-view-if-needed": "^1.1.26",
-    "styled-components": "^5.0.0",
-    "styled-reset": "^4.1.0"
+    "smooth-scroll-into-view-if-needed": "^1.1.27",
+    "styled-components": "^5.0.1",
+    "styled-reset": "^4.1.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.8.4",
+    "@babel/core": "^7.8.7",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/preset-env": "^7.8.4",
+    "@babel/preset-env": "^7.8.7",
     "@babel/preset-react": "^7.8.3",
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^8.3.4",
     "auto-changelog": "^1.16.2",
     "autodll-webpack-plugin": "^0.4.2",
-    "babel-eslint": "^10.0.3",
+    "babel-eslint": "^10.1.0",
     "babel-loader": "^8.0.6",
     "css-loader": "^3.4.2",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.10.0",
-    "eslint-plugin-react": "^7.18.2",
-    "eslint-plugin-react-hooks": "^2.3.0",
-    "file-loader": "^5.0.2",
+    "eslint-plugin-react": "^7.18.3",
+    "eslint-plugin-react-hooks": "^2.5.0",
+    "file-loader": "^5.1.0",
     "gh-pages": "^2.2.0",
     "happypack": "^5.0.1",
     "html-webpack-plugin": "^3.2.0",
-    "husky": "^4.2.1",
+    "husky": "^4.2.3",
     "installed-check-core": "^3.0.0",
     "interpolate-html-plugin": "^3.0.0",
-    "lint-staged": "^10.0.7",
+    "lint-staged": "^10.0.8",
     "mini-css-extract-plugin": "^0.9.0",
     "prettier": "^1.19.1",
     "react-dev-utils": "^10.1.0",
     "style-loader": "^1.1.3",
-    "terser-webpack-plugin": "^2.3.4",
+    "terser-webpack-plugin": "^2.3.5",
     "url-loader": "^3.0.0",
-    "webpack": "^4.41.5",
+    "webpack": "^4.42.0",
     "webpack-bundle-analyzer": "^3.6.0",
-    "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.10.2",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3",
     "webpack-manifest-plugin": "^2.2.0",
     "webpack-merge": "^4.2.2",
     "workbox-webpack-plugin": "^5.0.0"

src/components/Bgm.js

@@ -37,20 +37,6 @@ const StyledWraper = styled.aside`
 export default function Bgm() {
   const [playing, setPlaying] = useState(false);
   const bgMusic = useRef(null);
-  const handlCanPlay = () => {
-    const music = bgMusic.current;
-    console.log('onCanPlay', music);
-    // promise?
-    const pr = music.play();
-    if (pr !== undefined) {
-      pr.then(() => {
-        // Autoplay started!
-      }).catch(() => {
-        // Autoplay was prevented.
-        // Show a "Play" button so that user can start playback.
-      });
-    }
-  };
   const handlePause = () => {
     setPlaying(false);
   };
@@ -88,7 +74,6 @@ export default function Bgm() {
         ref={bgMusic}
         autoPlay={true}
         onPlaying={handlePlaying}
-        onCanPlay={handlCanPlay}
         onPause={handlePause}
         loop={true}
         src="./static/bgm.mp3"

src/hooks.js

@@ -122,9 +122,9 @@ const useShareColor = (id = null) => {
   return { set: tmpSet, color: tmpColor };
 };
 const useColor = () => {
-  const SelectedColorSet = JSON.parse(localStorage.getItem('SELECTED_COLOR_SET')) || Colors[4];
+  const SelectedColorSet = JSON.parse(localStorage.getItem('SELECTED_COLOR_SET')) || Colors[2];
   const SelectedColor =
-    JSON.parse(localStorage.getItem('SELECTED_COLOR')) || SelectedColorSet.colors[0];
+    JSON.parse(localStorage.getItem('SELECTED_COLOR')) || SelectedColorSet.colors[16];
   const initialValue = {
     sets: Colors.map(set => {
       const newSet = { ...set };

src/pages/index.js

@@ -10,6 +10,7 @@ const IconImage = lazy(() => import('../components/IconImage'));
 const Header = lazy(() => import('../components/Header'));
 const IconScreenshot = lazy(() => import('../components/IconScreenshot'));
 const ColorSet = lazy(() => import('../components/ColorSet'));
+const ICP = lazy(() => import('../components/ICP'));
 import Preview from '../components/Preview';
 import InfoModal from '../components/InfoModal';
 
@@ -103,6 +104,7 @@ const Index = () => {
         />
       )}
       {modalVisible && <InfoModal bgColor={currColor.hex} closeModal={closeModal} />}
+      <ICP />
     </Suspense>
   );
 };