Add support for a hub page in the header navigation

[ChristiaanScheermeijer]

We have added a playlist with a single item in the menu items that contain a media item with contentType hub. I have tested a custom playlist screen that redirects to the hub page when the playlist contains a single hub item.

utils/hub.ts

export const getHubMediaFromPlaylist = (playlist: Playlist) => {
  return playlist.playlist.length === 1 && isContentType(playlist.playlist[0], MEDIA_CONTENT_TYPE.hub) ? playlist.playlist[0] : null;
};

export const isHubOnlyPlaylist = (playlist: Playlist | undefined) => {
  return !!(playlist && getHubMediaFromPlaylist(playlist));
};

PlaylistHubRedirect.tsx

const PlaylistHubRedirect: ScreenComponent<Playlist> = ({ data, isLoading }) => {
  const media = getHubMediaFromPlaylist(data);

  if (data && !isLoading && media) {
    return <Navigate to={mediaURL({ media })} replace={true}></Navigate>;
  }

  if (!media) {
    return <PlaylistGrid data={data} isLoading={isLoading} />;
  }

  return <Loading />;
};

screenMapping.ts

export default function registerCustomScreens() {
  // Hub is an example screen for the media router
  mediaScreenMap.registerByContentType(MediaHub, MEDIA_CONTENT_TYPE.hub);
  playlistScreenMap.register(PlaylistHubRedirect, isHubOnlyPlaylist);
  // ...