From bf2d86fab7e4419070c89aae2c152e3c1073feae Mon Sep 17 00:00:00 2001
From: Hanz Luo <lhz0516@gmail.com>
Date: Tue, 2 Nov 2021 22:03:21 -0700
Subject: [PATCH] bump 3.7.3 and update README

---
 README.md     | 20 +++++++++++++++++++-
 package.json  |  4 ++--
 src/index.tsx |  4 ++--
 3 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 15e99a5..1c1d452 100644
--- a/README.md
+++ b/README.md
@@ -157,7 +157,25 @@ $rhap_time-color: #333 !default;       // Font color of current time and duratio
 $rhap_font-family: inherit !default;   // Font family of current time and duration
 ```
 
-For LESS variables, just replace `$` with `@`.
+For LESS variables, just replace `$` with `@`. This library supports both.
+
+### Status class names
+
+There are some status class names on the audio player's wrapper div. They can be used for overwriting styles.
+
+| className                   | Description        | 
+| --------------------------- | ------------------ | 
+| rhap_loop--on               | Loop is on         | 
+| rhap_loop--off              | Loop is off        |
+| rhap_play-status--paused    | Paused status      |
+| rhap_play-status--playing   | Playing status     |
+
+For example:
+```scss
+.rhap_play-status--paused .rhap_progress-bar {
+  // Overwrite the progress bar style while the audio is paused
+}
+```
 
 ## Advanced Usage
 
diff --git a/package.json b/package.json
index bee3ff6..55abe83 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-h5-audio-player",
-  "version": "3.7.2",
+  "version": "3.7.3",
   "description": "A customizable React audio player. Written in TypeScript. Mobile compatible. Keyboard friendly",
   "main": "./lib/index.js",
   "module": "./es/index.js",
@@ -54,7 +54,7 @@
   "bugs": {
     "url": "https://github.com/lhz516/react-h5-audio-player/issues"
   },
-  "homepage": "https://github.com/lhz516/react-h5-audio-player#readme",
+  "homepage": "https://codepen.io/lhz516/pen/dyGpmgP",
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0",
     "react-dom": "^16.3.0 || ^17.0.0"
diff --git a/src/index.tsx b/src/index.tsx
index a67b8a5..3cfdcb5 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -686,8 +686,8 @@ class H5AudioPlayer extends Component<PlayerProps> {
       style,
     } = this.props
     const loop = this.audio.current ? this.audio.current.loop : loopProp
-    const loopClass = loop ? 'rhap_loop-on' : 'rhap_loop-off'
-    const isPlayingClass = this.isPlaying() ? 'rhap_play-status-pause' : 'rhap_play-status-playing'
+    const loopClass = loop ? 'rhap_loop--on' : 'rhap_loop--off'
+    const isPlayingClass = this.isPlaying() ? 'rhap_play-status--paused' : 'rhap_play-status--playing'
 
     return (
       /* We want the container to catch bubbled events */