add storybook docs addon; some minor updates and bug fixes

.storybook/addons.js

@@ -1 +1,2 @@
 import '@storybook/addon-actions/register'
+import '@storybook/addon-docs/register'

.storybook/config.js

@@ -1,14 +1,16 @@
-import { configure, addDecorator } from '@storybook/react'
-import { configureActions } from '@storybook/addon-actions';
-import { withInfo } from '@storybook/addon-info'
+import { configure, addParameters } from '@storybook/react'
+import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks'
 
-// Docs: https://github.com/storybooks/storybook/tree/master/addons/info
-addDecorator(
-  withInfo({
-    header: true,
-  }),
-)
+function requireAll(requireContext) {
+  console.log(requireContext)
+  return requireContext.keys().map(requireContext);
+}
 
-configure(() => {
-  require('../stories/index')
-}, module)
+configure(require.context('../stories', true, /\.stories\.(js|mdx)$/), module)
+
+addParameters({
+  docs: {
+    container: DocsContainer,
+    page: DocsPage,
+  },
+})

.storybook/webpack.config.js

@@ -1,4 +1,5 @@
 const path = require('path')
+const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin')
 
 // Storybook Webpack config doc: https://storybook.js.org/docs/configurations/custom-webpack-config/
 module.exports = async ({ config }) => {
@@ -26,7 +27,23 @@ module.exports = async ({ config }) => {
     }
   })
 
+  config.module.rules.push({
+    test: /\.mdx$/,
+    use: [
+      {
+        loader: 'babel-loader',
+      },
+      {
+        loader: '@mdx-js/loader',
+        options: {
+          compilers: [createCompiler({})],
+        },
+      },
+    ],
+  });
+
   config.resolve.extensions.push('.tsx')
+  config.resolve.extensions.push('.mdx')
 
   return config
 }

README.md

@@ -7,7 +7,7 @@
 
 ![screenshot](./screenshot.png)
 
-Live Demo: [Storybook](https://static.hanzluo.com/react-h5-audio-player-storybook/index.html)
+Live Demo: [Storybook](https://static.hanzluo.com/react-h5-audio-player-storybook/index.html?path=/docs/layouts--default-story)
 
 Supported browsers: Chrome, Firefox, Safari, Opera, Edge, IE (≥10)
 
@@ -24,6 +24,8 @@ Or
 ```jsx
 import AudioPlayer from 'react-h5-audio-player';
 import 'react-h5-audio-player/lib/styles.css';
+// import 'react-h5-audio-player/lib/styles.less' Use LESS
+// import 'react-h5-audio-player/src/styles.scss' Use SASS
 
 const Player = () => (
   <AudioPlayer
@@ -39,18 +41,23 @@ const Player = () => (
 
 ### HTML Audio Tag Native Attributes
 
-| Props    |  Type   | Default |
-| -------- | :-----: | :-----: |
-| src      | String  |   ''    |
-| preload  | String  | 'auto'  |
-| autoPlay | Boolean |  false  |
-| loop     | Boolean |  false  |
-| muted    | Boolean |  false  |
-| loop     | Boolean |  false  |
-| volume   | Number  |   1.0   |
+| Props       |  Type   |  Default  | Note                 |
+| ----------- | :-----: | :-------: | :-------------------:|
+| src         | String  | ''        |                      |
+| preload     | String  | 'auto'    |                      |
+| autoPlay    | Boolean | false     | Won't work on mobile |
+| loop        | Boolean | false     |                      |
+| muted       | Boolean | false     |                      |
+| loop        | Boolean | false     |                      |
+| volume      | Number  | 1.0       | Won't work on mobile |
+| crossOrigin | String  | undefined |                      |
+| mediaGroup  | String  | undefined |                      |
+
 
 More native attributes detail: [MDN Audio element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio)
 
+The `controls` attribute defaults to `false` and should never be changed to `true` because this library is already providing UI.
+
 ### Other Props
 
 #### showVolumeControl {Boolean} [true]
@@ -127,14 +134,17 @@ Called when the user taps play.
 
 ## UI Overwrites
 
-React H5 Audio Player provides built-in class names and SASS variables for developers to overwrite.
+React H5 Audio Player provides built-in class names and SASS/LESS variables for developers to overwrite.
 
 ### SASS variables
 
 - $rhap_theme-color: #868686 !default;
 - $rhap_background-color: #fff !default;
 - $rhap_bar-color: #e4e4e4 !default;
-- $rhap_time-color: #000 !default;
+- $rhap_time-color: #333 !default;
+- $rhap_font-family: inherit !default;
+
+For LESS variables, just replace `$` with `@`.
 
 ## Advanced Usage
 
@@ -143,7 +153,7 @@ React H5 Audio Player provides built-in class names and SASS variables for devel
 You can get direct access to the underlying audio element. First get a ref to ReactAudioPlayer:
 
 ```jsx
-<ReactAudioPlayer ref={c => (this.player = c)} />
+<ReactAudioPlayer ref={c => (this.player = c)} /> // Use `createRef` also works
 ```
 
 Then you can access the audio element like this: