feat: support follow system auto set theme

.releaserc.js

@@ -9,7 +9,7 @@ module.exports = {
       {
         // ci 发布 npm 后 更新 package.json 的 版本
         "assets": ["package.json"],
-        "message": "chore(release): 🤖 ${nextRelease.version} [ci skip] ${nextRelease.notes}"
+        "message": "chore(release): 🤖 ${nextRelease.version} [ci skip]"
       }
     ],
     "@semantic-release/npm",

README.md

@@ -371,8 +371,8 @@ import "react-jinke-music-player/lib/styles/index.less";
 @default-color: #d9d9d9;
 @bg-color: #f7f8fa;
 @border-color: #d9d9d9;
-@light-theme-panel-bg: #fff;
-@light-theme-controller-bg: #fff;
+@panel-bg-light: #fff;
+@controller-bg-light: #fff;
 @music-player-panel-height: 80px;
 @lists-panel-width: 480px;
 @lists-panel-height: 410px;

example/example.js

@@ -73,8 +73,8 @@ const options = {
   //if you want dynamic change current play audio you can change it [type `number` default `0`]
   // playIndex: 0,
 
-  //color of the music player theme    [ type: 'light' | 'dark'  default `dark` ]
-  theme: 'dark',
+  //color of the music player theme    [ type: 'light' | 'dark' | 'auto'  default `dark` ]
+  theme: 'auto',
 
   // Specifies movement boundaries. Accepted values:
   // - `parent` restricts movement within the node's offsetParent

example/example.less

@@ -11,6 +11,11 @@ body {
   color: #1a1a1a;
   font-size: 14px;
   padding: 20px;
+
+  @media screen and (prefers-color-scheme: dark) {
+    background: #141414;
+    color: #fff;
+  }
 }
 
 button,

src/config/mediaQuery.js

@@ -0,0 +1,5 @@
+export const MEDIA_QUERY = {
+  MOBILE: '(max-width: 768px) and (orientation : portrait)',
+  DARK_THEME: 'screen and (prefers-color-scheme: dark)',
+  LIGHT_THEME: 'screen and (prefers-color-scheme: light)',
+}

src/config/propTypes.js

@@ -1,5 +1,7 @@
 import PropTypes from 'prop-types'
 import Locale from './locale'
+import { THEME } from './theme'
+import { MODE } from './mode'
 
 const playModePropTypes = PropTypes.oneOf([
   'order',
@@ -14,8 +16,8 @@ export default {
     PropTypes.object,
     PropTypes.oneOf(Object.values(Locale)),
   ]),
-  theme: PropTypes.oneOf(['dark', 'light']),
-  mode: PropTypes.oneOf(['mini', 'full']),
+  theme: PropTypes.oneOf(Object.values(THEME)),
+  mode: PropTypes.oneOf(Object.values(MODE)),
   defaultPlayMode: playModePropTypes,
   playMode: playModePropTypes,
   drag: PropTypes.bool,

src/config/theme.js

@@ -1,4 +1,5 @@
 export const THEME = {
   LIGHT: 'light',
   DARK: 'dark',
+  AUTO: 'auto',
 }

src/index.js

@@ -65,6 +65,7 @@ import LOCALE_CONFIG from './locale'
 
 import 'rc-slider/assets/index.css'
 import 'rc-switch/assets/index.css'
+import { MEDIA_QUERY } from './config/mediaQuery'
 
 const IS_MOBILE = isMobile()
 
@@ -583,8 +584,8 @@ export default class ReactJkMusicPlayer extends PureComponent {
                     <span
                       className="sounds-icon"
                       {...(isMobile
-                        ? { onTouchStart: this.onSound }
-                        : { onClick: this.onSound })}
+                        ? { onTouchStart: this.onResetVolume }
+                        : { onClick: this.onResetVolume })}
                     >
                       <MdVolumeMuteIcon />
                     </span>
@@ -974,8 +975,9 @@ export default class ReactJkMusicPlayer extends PureComponent {
     this.setState({ moveX: x, moveY: y })
   }
 
-  onSound = () => {
-    this.setAudioVolume(this.state.currentAudioVolume)
+  onResetVolume = () => {
+    const { currentAudioVolume } = this.state
+    this.setAudioVolume(currentAudioVolume)
   }
   setAudioVolume = (value) => {
     this.audio.volume = value
@@ -1607,31 +1609,58 @@ export default class ReactJkMusicPlayer extends PureComponent {
     }
   }
 
-  listenerIsMobile = ({ matches }) => {
-    this.setState({
-      isMobile: !!matches,
-    })
-  }
-  addMobileListener = () => {
-    this.media = window.matchMedia(
-      '(max-width: 768px) and (orientation : portrait)',
-    )
-    if (typeof this.media.addEventListener !== 'undefined') {
-      this.media.addEventListener('change', this.listenerIsMobile)
+  addMatchMediaListener = (query, handler) => {
+    const media = window.matchMedia(query)
+    if ('addEventListener' in media) {
+      media.addEventListener('change', handler)
     } else {
-      this.media.addListener(this.listenerIsMobile)
+      media.addListener(handler)
     }
+    return media
   }
-  removeMobileListener = () => {
-    if (this.media) {
-      if (typeof this.media.addEventListener !== 'undefined') {
-        this.media.removeEventListener('change', this.listenerIsMobile)
+  removeMatchMediaListener = (media, handler) => {
+    if (media) {
+      if ('removeEventListener' in media) {
+        media.removeEventListener('change', handler)
       } else {
-        this.media.removeListener(this.listenerIsMobile)
+        media.removeListener(handler)
       }
-      this.media = undefined
     }
   }
+  addMobileListener = () => {
+    this.mobileMedia = this.addMatchMediaListener(
+      MEDIA_QUERY.MOBILE,
+      this.mobileMediaHandler,
+    )
+  }
+  removeMobileListener = () => {
+    this.removeMatchMediaListener(this.mobileMedia, this.mobileMediaHandler)
+  }
+  addSystemThemeListener = () => {
+    this.systemThemeMedia = this.addMatchMediaListener(
+      MEDIA_QUERY.DARK_THEME,
+      this.systemThemeMediaHandler,
+    )
+  }
+  removeSystemThemeListener = () => {
+    this.removeMatchMediaListener(
+      this.systemThemeMedia,
+      this.systemThemeMediaHandler,
+    )
+  }
+  mobileMediaHandler = ({ matches }) => {
+    this.setState({
+      isMobile: !!matches,
+    })
+  }
+
+  systemThemeMediaHandler = ({ matches }) => {
+    if (this.props.theme === THEME.AUTO) {
+      const theme = matches ? THEME.DARK : THEME.LIGHT
+      this.updateTheme(theme)
+    }
+  }
+
   setDefaultAudioVolume = () => {
     const { defaultVolume, remember } = this.props
     //音量 [0-1]
@@ -1983,6 +2012,7 @@ export default class ReactJkMusicPlayer extends PureComponent {
   }
   componentDidMount() {
     this.addMobileListener()
+    this.addSystemThemeListener()
     this.initPlayer()
     this.onGetAudioInstance()
   }

src/styles/index.less

@@ -127,7 +127,7 @@
     left: 0;
     color: #fff;
     height: @panel-height;
-    background-color: @panel-bg;
+    background-color: @panel-bg-dark;
     z-index: 99;
     transition: background-color @common-animate-time;
 
@@ -398,9 +398,14 @@
       background-color: @progress-bar-bg-color-light !important;
     }
 
+    .music-player-controller {
+      border-color: @primary-color-light;
+      background-color: @controller-bg-light;
+    }
+
     .music-player-panel {
       box-shadow: 0 1px 2px 0 rgba(0, 34, 77, 0.05);
-      background-color: @light-theme-panel-bg;
+      background-color: @panel-bg-light;
       color: #7d7d7d;
 
       .img-content {
@@ -479,7 +484,7 @@
 
     .audio-lists-panel-header {
       color: @font-color;
-      background-color: #fff;
+      background-color: @primary-color-light;
       border-bottom: 1px solid #f4f4f7;
 
       .line {
@@ -519,7 +524,7 @@
     }
 
     .react-jinke-music-player-mobile {
-      background-color: @light-theme-panel-bg;
+      background-color: @panel-bg-light;
       color: @font-color;
 
       &-cover {
@@ -562,7 +567,7 @@
     }
 
     .play-mode-title {
-      background-color: @light-theme-panel-bg;
+      background-color: @panel-bg-light;
       color: @primary-color;
     }
   }
@@ -605,8 +610,8 @@
       width: @player-width;
       height: @player-height;
       border-radius: 50%;
-      border: 2px solid @light-theme-controller-bg;
-      background-color: @light-theme-controller-bg;
+      border: 1px solid @controller-bg-dark;
+      background-color: @controller-bg-dark;
       color: @primary-color;
       box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
       font-size: 20px;

src/styles/vars.less

@@ -1,9 +1,14 @@
 @primary-color: #31c27c;
+@primary-color-light: #fff;
+@primary-color-dark: rgba(0, 0, 0, 0.75);
+
 @default-color: #d9d9d9;
 @bg-color: #f7f8fa;
 @border-color: #d9d9d9;
-@light-theme-panel-bg: #fff;
-@light-theme-controller-bg: #fff;
+@panel-bg-light: @primary-color-light;
+@controller-bg-light: @primary-color-light;
+@panel-bg-dark: @primary-color-dark;
+@controller-bg-dark: @primary-color-dark;
 
 @border-radius: 4px;
 @music-player-panel-height: 80px;