E-Kuerschner / useAudioPlayer

React hooks for controlling audio on the web
MIT License
313 stars 35 forks source link

Support SSR #113

Open E-Kuerschner opened 1 year ago

E-Kuerschner commented 1 year ago

It isn't clear how this hook will work with SSR frameworks like Next, Gatsby or Remix. Some users in the past have reported issues, likely due to the fact that this library has pretty explicit dependency on the global window object of the browser. It will help a lot of developers if this lib were to support these frameworks since the ecosystem is really shifting in that direction and away from large SPAs

E-Kuerschner commented 1 year ago

fork with some work in this direction from @joeyiny

https://github.com/joeyiny/useAudioPlayer/commits/main

joeyiny commented 1 year ago

Making progress!

E-Kuerschner commented 1 year ago

@joeyiny nice! feel free to open up a PR if you'd like to contribute your enhancements. Also FYI v2 dropped today. You'll def want to rebase your fork off of the latest main. Let me know if you have any questions about the migration, but it shouldn't be too too different. The README has been updated with the latest information

joeyiny commented 1 year ago

@E-Kuerschner Oh nice, was actually planning on messaging you about v2! Definitely going to hop in first thing tomorrow hopefully.

codejunkienick commented 1 year ago

Currently working approach is to exclude it from SSR with window presence check (using useAudioPlayer@v2)

  const [hasWindow, setHasWindow] = useState(false);
  useEffect(() => {
    if (typeof window !== 'undefined') {
      setHasWindow(true);
    }
  }, []);
  ................

        {hasWindow && (
        <TrackPlayer url={url}  />
      )}
................

const TrackPlayer = ({
  audioUrl,
}: {
  audioUrl: string;
}) => {
  const {
    load,
    setVolume,
    togglePlayPause,
    playing,
    getPosition,
    duration,
    seek,
  } = useAudioPlayer();
YusufcanY commented 1 month ago

any example with useGlobalAudioPlayer? Also window presence check didn't work on me. I have issues with first load i guess. autoplay, initialVolume ex. don't work in my Next.js 14 project.