fix progress bar when switching layout

Author: lhz516

.eslintrc.js

@@ -111,6 +111,7 @@ module.exports = {
     'template-curly-spacing': [2, 'never'],
     '@typescript-eslint/ban-ts-comment': 0,
     '@typescript-eslint/no-misused-promises': 0,
+    '@typescript-eslint/no-unsafe-member-access': 0,
   },
   overrides: [
     {

.husky/pre-commit

@@ -191,7 +191,7 @@ class ProgressBar extends Component<ProgressBarProps, ProgressBarState> {
     }, 200)
   }
 
-  componentDidUpdate(): void {
+  initialize(): void {
     const { audio } = this.props
     if (audio && !this.hasAddedAudioEventListener) {
       this.audio = audio
@@ -201,6 +201,14 @@ class ProgressBar extends Component<ProgressBarProps, ProgressBarState> {
     }
   }
 
+  componentDidMount(): void {
+    this.initialize()
+  }
+
+  componentDidUpdate(): void {
+    this.initialize()
+  }
+
   componentWillUnmount(): void {
     if (this.audio && this.hasAddedAudioEventListener) {
       this.audio.removeEventListener('timeupdate', this.handleAudioTimeUpdate)

src/ProgressBar.tsx

@@ -0,0 +1,37 @@
+import React, { useState } from 'react'
+import AudioPlayer, { RHAP_UI } from '../src/index.tsx'
+import { MAIN_LAYOUT } from '../src/constants.ts'
+
+const expandedPlayerProps: {
+  layout: MAIN_LAYOUT
+  customControlsSection: RHAP_UI[]
+  customProgressBarSection: RHAP_UI[]
+} = {
+  layout: 'stacked',
+  customControlsSection: [RHAP_UI.CURRENT_TIME, RHAP_UI.CURRENT_LEFT_TIME],
+  customProgressBarSection: [RHAP_UI.PROGRESS_BAR, RHAP_UI.MAIN_CONTROLS],
+}
+
+const ChangeLayout: React.FC = () => {
+  const [config, setConfig] = useState({})
+
+  const setStacked = () => setConfig(expandedPlayerProps)
+  const setHorizontal = () => setConfig({})
+
+  return (
+    <div className="container">
+      <button onClick={setStacked}>stacked</button>
+      <button onClick={setHorizontal}>horizontal</button>
+
+      <h1>Hello, audio player!</h1>
+      <AudioPlayer
+        src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-9.mp3"
+        volume={0.5}
+        layout="stacked-reverse"
+        {...config}
+      />
+    </div>
+  )
+}
+
+export default ChangeLayout

stories/change-layout.tsx

@@ -2,6 +2,7 @@ import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
 import { SAMPLE_MP3_URL } from './utils'
 import VolumePercentage from './volume-percentage.tsx'
 import AudioPlayer, { RHAP_UI } from '../src/index.tsx'
+import ChangeLayout from './change-layout.tsx'
 
 <Meta title="Layouts - Advanced" component={AudioPlayer} />
 
@@ -257,3 +258,13 @@ class VolumePercentage extends PureComponent<{}, { volumeText: string }> {
   }
 />
 ```
+
+#### Change Layout
+
+<Story name="Change Layout">
+  <ChangeLayout />
+</Story>
+
+```jsx
+<ChangeLayout />
+```

stories/layouts-advanced.stories.mdx

@@ -3,6 +3,7 @@
   "include": [
     "./src",
     "./.eslintrc.js",
+    "./stories/**/*.tsx",
     "babel.config.js",
     "webpack.config.js"
   ]