2

I've been recently working around with React-Player and I'm facing some issues when the volume intensity is changing. https://github.com/cookpete/react-player

More precisely, for the purpose of the application, the volume of each sound is changed by the user, not by the preset control panel volume, but by the component props "volume" with a valuve from the parent component.

export default function Controlnav(props) {
...

const data = props.database.slice(1).map(item => {
...

<ReactPlayer 
   style={{transform: 'translateX(calc(50vw - 150px))'}}
   url={[ {src: item.url} ]}
   playing={playingState}
   controls={false}
   loop={true}
   volume={item.volume*(props.masterVolume)}
   width={'0px'}
   height={'0px'} />

The volume successfully changes, but each time it changes, the sound begins from the start and this is something I don't want to happen.

Any help?

Believing that the props may re-render the component, I've tried to change the component to prevent so, but no luck.

Chstavridis
  • 21
  • 2

1 Answers1

0
<ReactPlayer
  ...
  url={item.url}
  ...
/>

It's true that the react-player re-renders when you update the state. However, the react-player will persist it's current progress as long at's it's the same URL. But because you passed a reference type value, react-player "thinks" it's a new url because {[src: item.url]} !== {[src: item.url]}, but item.url === item.url.

Yochi Shor
  • 16
  • 4