Function RemoteControl

packages/player/src/remoteControl/RemoteControl.tsx:9–83

()

import { useRemoteState } from './useRemoteState';

const RemoteControl: FC = () => {
  const { t } = useTranslation('remote');
  const state = useRemoteState();
  const actions = useRemoteActions();

  if (state.connectionStatus === 'failed') {
    return (
      <NuclearJam>
        <NuclearJam.Error
          labels={{
            title: t('error.title'),
            subtitle: t('error.subtitle'),
          }}
        />
      </NuclearJam>
    );
  }

  if (!state.synced || state.connectionStatus === 'connecting') {
    return (
      <NuclearJam>
        <NuclearJam.Connecting
          labels={{
            title: t('connecting.title'),
            subtitle: t('connecting.subtitle'),
          }}
        />
      </NuclearJam>
    );
  }

  return (
    <NuclearJam>
      <NuclearJam.Header
        connectionStatus={state.connectionStatus}
        connectionStatusLabels={{
          connecting: t('connection.connecting'),
          connected: t('connection.connected'),
          reconnecting: t('connection.reconnecting'),
          failed: t('connection.failed'),
        }}
      />
      {state.hasQueue && state.currentTrack && (
        <NuclearJam.NowPlaying
          title={state.currentTrack.title}
          artist={state.currentTrack.artist}
          coverUrl={state.currentTrack.coverUrl}
          isLoading={state.isLoading}
        />
      )}
      {state.hasQueue && (
        <NuclearJam.Controls
          isPlaying={state.isPlaying}
          isLoading={state.isLoading}
          shuffleActive={state.settings.shuffle}
          repeatMode={state.settings.repeat}
          isDiscoveryActive={state.settings.discovery}
          progress={state.progress}