React control?

[larrywal]

Hi - I want to use this in a react project - have you considered making a react wrapper? Right now I'm hacking it in using Refs but it's messy and buggy.

[zhw2590582]

import React, { useEffect, useState } from "react";
import WFPlayer from "wfplayer";

export default () => {
  const [waveform, setWaveform] = useState(null);
  const $waveform = React.createRef();
  const $video = React.createRef();

  useEffect(() => {
    const waveform = new WFPlayer({
      container: $waveform.current,
      mediaElement: $video.current,
    });

    setWaveform(waveform);
  }, []);

  return (
    <div>
      <video src="test.mp4" ref={$video} />
      <div ref={$waveform} />
    </div>
  );
};

[larrywal]

Lol - thanks :). This would clean up much of what I had done. Although...

1. I'm using it for audio and the file path needs to be dynamic, so I'm assuming I'd update the 3rd line (export default) to include a path parameter and pass to video src? And obviously I'd make the video tag an audio tag...

2. This wrapping doesn't make it obvious how I'd use the rest of the WFPlayer controls - e.g. the events, etc.. seek, setOptions, adding click handlers, etc... Seems like that wouldn't really work unless waveform is exposed externally, and then it gets messy, no?

[zhw2590582]

If your file path is dynamic, it is recommended to destroy the waveform and re instantiate it every time the path changes

[larrywal]

Thanks - that helps...although...I'm new to React...not sure how I would do that, right? Because React controls the lifecycle of the included component you created above that I would be including into my page?