Function useRemoteState

packages/player/src/remoteControl/useRemoteState.ts:69–119

()

};

export const useRemoteState = (): RemoteState => {
  const [source, connectionStatus] = useEventSource('/api/events');

  const setConnectionStatus = useRemoteStore(
    (state) => state.setConnectionStatus,
  );
  useEffect(() => {
    setConnectionStatus(connectionStatus);
  }, [connectionStatus, setConnectionStatus]);

  useInitialSync(connectionStatus);
  useSSESync(source);

  const queue = useRemoteStore((state) => state.queue);
  const playback = useRemoteStore((state) => state.playback);
  const settings = useRemoteStore((state) => state.settings);
  const synced = useRemoteStore((state) => state.synced);

  useEffect(() => {
    void i18n.changeLanguage(settings.language);
  }, [settings.language]);

  useEffect(() => {
    if (settings.dark) {
      document.documentElement.setAttribute('data-theme', 'dark');
    } else {
      document.documentElement.removeAttribute('data-theme');
    }
  }, [settings.dark]);

  useEffect(() => {
    setThemeId(settings.themeId);
  }, [settings.themeId]);

  const current = deriveCurrentTrack(queue);
  const playbackState = derivePlayback(playback);

  return {
    connectionStatus,
    synced,
    currentTrack: current?.track,
    isLoading: current?.isLoading ?? false,
    ...playbackState,
    settings,
    queue: {
      items: queue?.items ?? [],
      currentItemId: queue?.items[queue.currentIndex]?.id,
    },
    hasQueue: queue !== null && queue.items.length > 0,
  };
};