Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support SSR #113

Open
E-Kuerschner opened this issue Jun 11, 2023 · 6 comments
Open

Support SSR #113

E-Kuerschner opened this issue Jun 11, 2023 · 6 comments
Assignees
Labels
enhancement New feature or request

Comments

@E-Kuerschner
Copy link
Owner

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 E-Kuerschner added the enhancement New feature or request label Jun 11, 2023
@E-Kuerschner E-Kuerschner self-assigned this Jun 11, 2023
@E-Kuerschner
Copy link
Owner Author

fork with some work in this direction from @joeyiny

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

@joeyiny
Copy link

joeyiny commented Jun 14, 2023

Making progress!

@E-Kuerschner
Copy link
Owner Author

@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
Copy link

joeyiny commented Jun 14, 2023

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

@codejunkienick
Copy link

codejunkienick commented Jun 16, 2023

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
Copy link

YusufcanY commented May 7, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

4 participants