fix: 调整优化展示判断逻辑

blog.config.js

@@ -67,12 +67,12 @@ const BLOG = {
   WIDGET_PET_SWITCH_THEME: true, // 点击宠物挂件切换博客主题
 
   // 音乐播放插件
-  MUSIC_PLAYER: process.env.NEXT_PUBLIC_MUSIC_PLAYER || true, // 是否使用音乐播放插件
-  MUSIC_PLAYER_VISIBLE: process.env.NEXT_PUBLIC_MUSIC_PLAYER_VISIBLE || true, // 是否在左下角显示播放和切换
-  MUSIC_PLAYER_AUTO_PLAY: process.env.NEXT_PUBLIC_MUSIC_PLAYER_AUTO_PLAY || true, // 是否自动播放，不过时常不生效（移动设备不支持自动播放）
+  MUSIC_PLAYER: process.env.NEXT_PUBLIC_MUSIC_PLAYER || false, // 是否使用音乐播放插件
+  MUSIC_PLAYER_VISIBLE: process.env.NEXT_PUBLIC_MUSIC_PLAYER_VISIBLE || true, // 是否在左下角显示播放和切换，如果使用播放器，打开自动播放再隐藏，就会以类似背景音乐的方式播放，无法取消和暂停
+  MUSIC_PLAYER_AUTO_PLAY: process.env.NEXT_PUBLIC_MUSIC_PLAYER_AUTO_PLAY || true, // 是否自动播放，不过自动播放时常不生效（移动设备不支持自动播放）
   MUSIC_PLAYER_SHOW_LRC: process.env.NEXT_PUBLIC_MUSIC_PLAYER_SHOW_LRC || false, // 是否展示歌词（前提是有配置歌词路径，对 meting 无效）
   MUSIC_PLAYER_ORDER: 'list', // 默认播放方式，顺序 list，随机 random
-  MUSIC_PLAYER_AUDIO_LIST: [ // 除了以下配置外，还可配置歌词，具体配置项看此文档 https://aplayer.js.org/#/zh-Hans/
+  MUSIC_PLAYER_AUDIO_LIST: [ // 示例音乐列表。除了以下配置外，还可配置歌词，具体配置项看此文档 https://aplayer.js.org/#/zh-Hans/
     {
       name: '风を共に舞う気持ち',
       artist: 'Falcom Sound Team jdk',

components/CommonScript.js

@@ -103,8 +103,8 @@ const CommonScript = () => {
     </>)}
 
     {/* 引入音乐播放 */}
-    <script async src="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.js" />
-    <script async src="https://cdnjs.cloudflare.com/ajax/libs/meting/2.0.1/Meting.min.js" />
+    {JSON.parse(BLOG.MUSIC_PLAYER) && <script async src="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.js" />}
+    {JSON.parse(BLOG.MUSIC_PLAYER) && JSON.parse(BLOG.MUSIC_PLAYER_METING) && <script async src="https://cdnjs.cloudflare.com/ajax/libs/meting/2.0.1/Meting.min.js" />}
   </>)
 }
 

components/Player.js

@@ -5,14 +5,20 @@ const Player = () => {
   const [player, setPlayer] = React.useState()
   const ref = React.useRef(null)
 
+  const showLrc = JSON.parse(BLOG.MUSIC_PLAYER_SHOW_LRC)
+  const playerVisible = JSON.parse(BLOG.MUSIC_PLAYER_VISIBLE)
+  const autoPlay = JSON.parse(BLOG.MUSIC_PLAYER_AUTO_PLAY)
+
+  const meting = JSON.parse(BLOG.MUSIC_PLAYER_METING)
+
   React.useEffect(() => {
-    if (BLOG.MUSIC_PLAYER && !BLOG.MUSIC_PLAYER_METING) {
+    if (!meting) {
       setPlayer(new window.APlayer({
         container: ref.current,
         fixed: true,
-        showlrc: BLOG.MUSIC_PLAYER_SHOW_LRC,
+        showlrc: showLrc,
+        autoplay: autoPlay,
         order: BLOG.MUSIC_PLAYER_ORDER,
-        autoplay: BLOG.MUSIC_PLAYER_AUTO_PLAY,
         audio: BLOG.MUSIC_PLAYER_AUDIO_LIST
       }))
     }
@@ -22,18 +28,18 @@ const Player = () => {
   }, [])
 
   return (
-    <div className={BLOG.MUSIC_PLAYER_VISIBLE ? 'visible' : 'invisible'}>
+    <div className={playerVisible ? 'visible' : 'invisible'}>
       <link
         rel="stylesheet"
         type="text/css"
         href="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.css"
       />
-      {BLOG.MUSIC_PLAYER && BLOG.MUSIC_PLAYER_METING
+      {meting
         ? <meting-js
             fixed
             type="playlist"
+            autoplay={autoPlay}
             order={BLOG.MUSIC_PLAYER_ORDER}
-            autoplay={BLOG.MUSIC_PLAYER_AUTO_PLAY}
             server={BLOG.MUSIC_PLAYER_METING_SERVER}
             id={BLOG.MUSIC_PLAYER_METING_ID}
           />

pages/_app.js

@@ -48,6 +48,7 @@ const MyApp = ({ Component, pageProps }) => {
         {BLOG.ADSENSE_GOOGLE_ID && <GoogleAdsense />}
         {BLOG.FACEBOOK_APP_ID && BLOG.FACEBOOK_PAGE_ID && <Messenger />}
         {JSON.parse(BLOG.FIREWORKS) && <Fireworks />}
+        {JSON.parse(BLOG.MUSIC_PLAYER) && <MusicPlayer />}
     </>
 
   // 默认Webfont:  请在font.js文件中检查font-family 新版改从npm本地导入；
@@ -65,7 +66,6 @@ const MyApp = ({ Component, pageProps }) => {
             {FONTS_URL?.map(fontUrl => <link href={`${fontUrl}`} key={fontUrl} rel="stylesheet" />)}
             {externalPlugins}
             <Component {...pageProps} />
-            <MusicPlayer />
         </GlobalContextProvider>
   )
 }