fix: server side rendering

Author: ntnyq

gatsby-config.js

@@ -1,3 +1,7 @@
+/**
+ * @file Gatsby config
+ */
+
 require('dotenv').config()
 const path = require('path')
 

package.json

@@ -53,6 +53,7 @@
     "root": true
   },
   "dependencies": {
+    "@loadable/component": "^5.14.1",
     "gatsby": "^2.31.1",
     "gatsby-image": "^2.10.0",
     "gatsby-plugin-google-analytics": "^2.10.0",
@@ -77,6 +78,7 @@
   "devDependencies": {
     "@ntnyq/eslint-config-prettier-typescript-react": "^0.1.12",
     "@ntnyq/prettier-config": "^0.2.0",
+    "@types/loadable__component": "^5.13.1",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/react-helmet": "^6.0.0",

src/components/AudioPlayer/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import loadable from '@loadable/component'
+import 'react-jinke-music-player/assets/index.css'
+import type { ReactJkMusicPlayerProps } from 'react-jinke-music-player'
+
+const ReactJkMusicPlayer = loadable(() => import('react-jinke-music-player'))
+
+interface Props {
+  options: ReactJkMusicPlayerProps
+}
+
+const VideoPlayer: React.FC<Props> = ({ children, options }) => (
+  <ReactJkMusicPlayer {...options}>{children}</ReactJkMusicPlayer>
+)
+
+export default VideoPlayer

src/components/Hero/index.tsx

@@ -1,10 +1,11 @@
 import React from 'react'
 import styled from 'styled-components'
 import { useStaticQuery, graphql } from 'gatsby'
-import ReactJkMusicPlayer, {
+import VideoPlayer from '../AudioPlayer'
+import type {
+  ReactJkMusicPlayerLocale,
   ReactJkMusicPlayerAudioListProps,
 } from 'react-jinke-music-player'
-import 'react-jinke-music-player/assets/index.css'
 import { DataJson } from '../../../generated-types/gatsby-graphql'
 import {
   Container as ContainerComponent,
@@ -51,6 +52,20 @@ const Hero: React.FC = () => {
   const {
     dataJson: { sns, audioLists },
   } = useStaticQuery<{ dataJson: DataJson }>(query)
+  const options = {
+    locale: 'zh_CN' as ReactJkMusicPlayerLocale,
+    defaultVolume: 0.5,
+    defaultPosition: { left: 20, bottom: 20 },
+    drag: false,
+    glassBg: true,
+    autoPlay: false,
+    toggleMode: true,
+    showLyric: false,
+    showDestroy: false,
+    showDownload: false,
+    showThemeSwitch: false,
+    audioLists: audioLists as ReactJkMusicPlayerAudioListProps[],
+  }
 
   return (
     <Container>
@@ -62,22 +77,7 @@ const Hero: React.FC = () => {
           </Button>
         ))}
       </Buttons>
-      {audioLists && (
-        <ReactJkMusicPlayer
-          locale='zh_CN'
-          defaultVolume={0.5}
-          defaultPosition={{ left: 20, bottom: 20 }}
-          drag={false}
-          glassBg={true}
-          autoPlay={false}
-          toggleMode={true}
-          showLyric={false}
-          showDestroy={false}
-          showDownload={false}
-          showThemeSwitch={false}
-          audioLists={audioLists as ReactJkMusicPlayerAudioListProps[]}
-        />
-      )}
+      {audioLists && <VideoPlayer options={options} />}
     </Container>
   )
 }

yarn.lock

@@ -932,7 +932,7 @@
     core-js-pure "^3.0.0"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.0", "@babel/runtime@^7.10.1", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.1", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.3.4", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.0", "@babel/runtime@^7.10.1", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.1", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.3.4", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.7", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.12.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e"
   integrity sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==
@@ -1696,6 +1696,15 @@
     "@babel/runtime" "^7.7.2"
     regenerator-runtime "^0.13.3"
 
+"@loadable/component@^5.14.1":
+  version "5.14.1"
+  resolved "https://registry.yarnpkg.com/@loadable/component/-/component-5.14.1.tgz#cacd807162430bb85ae085945318027a600adc85"
+  integrity sha512-UQBZfZrp1FLTf8RNhljXNHFNY4QhAA1L2+GOEeABBFre9TD0aFyQh3Sai5QxcOfy+FTbjIfti5iHaNRR7yUzEQ==
+  dependencies:
+    "@babel/runtime" "^7.7.7"
+    hoist-non-react-statics "^3.3.1"
+    react-is "^16.12.0"
+
 "@mdx-js/util@^2.0.0-next.8":
   version "2.0.0-next.8"
   resolved "https://registry.yarnpkg.com/@mdx-js/util/-/util-2.0.0-next.8.tgz#66ecc27b78e07a3ea2eb1a8fc5a99dfa0ba96690"
@@ -2022,6 +2031,13 @@
   dependencies:
     "@types/node" "*"
 
+"@types/loadable__component@^5.13.1":
+  version "5.13.1"
+  resolved "https://registry.yarnpkg.com/@types/loadable__component/-/loadable__component-5.13.1.tgz#97c24081676a194b29722ff6e3c24a3676984f2e"
+  integrity sha512-Zb/Qkw3BnlRoFkL6FJwDvhFhOfeotXRCWd7dHdjVLusHZ3dZjKNi3ERngYBt3tffk2NF4roGVKA/oZMA1KdbCg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/lodash@^4.14.92":
   version "4.14.166"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.166.tgz#07e7f2699a149219dbc3c35574f126ec8737688f"
@@ -7828,7 +7844,7 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0:
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==