Context

Some integrations may cause conflicts with the FeedPlayer's History Router.

This can lead to issues such as:

Unexpected page reloads when closing a story
The page scrolling back to the top when exiting the feed

Known issue causing this behaviour

Below is a non-exhaustive list of scenarios where this issue may occur:

Next.js Page Router

When the client uses the Meta Framework Next.js with the Page Router, they may experience issues with the widgets.
Closing the FeedPlayer can trigger an upward scroll of the page (due to history.back()).

Detection

You can detect the usage of the Page Router using the following indicators:

window.next should return an object containing the version and other metadata.

window.next.appDir should either not exist or be false.

Solution

Implement a proxy on history.pushState to patch this behavior when manipulating the browser history from within the FeedPlayer:

window.history.pushState = new Proxy(window.history.pushState, {
    apply: (target, thisArg, argArray) => {
      // Check if the join feed is open
      if (argArray && argArray[0]?.joinFeedOpen === true) {
        const historyState = window.history.state;
        const key = historyState?.key;

        // check if has key (specific for nextjs page dir router)
        if (key) {
          // replace history state and disable scroll restoration for nextjs router
          window.history.replaceState(
            {
              ...historyState,
              options: {
                ...historyState?.options,
                scroll: false,
              },
            },
            ""
          );

          // add scroll position for nextjs router
          window.sessionStorage.setItem(
            `__next_scroll_${key}`,
            JSON.stringify({ x: window.scrollX, y: window.scrollY })
          );
        }
      }

      return target.apply(thisArg, argArray);
    },
  });