[OWA-89] feat: rewrite mediaURL function (#620)

* feat: rewrite mediaURL function * feat: use menu label as title * feat: use label for content list and playlist formatters as well * feat: destructure props * feat: code cleanup * feat: add small code improvement
jwplayer · Sep 26, 2024 · 3dea0fc · 3dea0fc
1 parent 4ffb849
commit 3dea0fc
Show file tree

Hide file tree

Showing 13 changed files with 49 additions and 32 deletions.
diff --git a/packages/common/src/utils/structuredData.ts b/packages/common/src/utils/structuredData.ts
@@ -5,7 +5,8 @@ import { mediaURL } from './urlFormatting';
 import { secondsToISO8601 } from './datetime';
 
 export const generateMovieJSONLD = (item: PlaylistItem, origin: string) => {
-  const movieCanonical = `${origin}${mediaURL({ media: item })}`;
+  const { mediaid: id, title } = item;
+  const movieCanonical = `${origin}${mediaURL({ id, title })}`;
 
   return JSON.stringify({
     '@context': 'http://schema.org/',

diff --git a/packages/common/src/utils/urlFormatting.test.ts b/packages/common/src/utils/urlFormatting.test.ts
@@ -35,7 +35,9 @@ describe('createPath, mediaURL, playlistURL and liveChannelsURL', () => {
   test('valid media path', () => {
     const playlist = playlistFixture as Playlist;
     const media = playlist.playlist[0] as PlaylistItem;
-    const url = mediaURL({ media, playlistId: playlist.feedid, play: true });
+
+    const { mediaid: id, title } = media;
+    const url = mediaURL({ id, title, playlistId: playlist.feedid, play: true });
 
     expect(url).toEqual('/m/uB8aRnu6/agent-327?r=dGSUzs9o&play=1');
   });

diff --git a/packages/common/src/utils/urlFormatting.ts b/packages/common/src/utils/urlFormatting.ts
@@ -99,19 +99,21 @@ export const slugify = (text: string, whitespaceChar: string = '-') =>
     .replace(/-/g, whitespaceChar);
 
 export const mediaURL = ({
-  media,
+  id,
+  title,
   playlistId,
   play = false,
   episodeId,
 }: {
-  media: PlaylistItem;
+  id: string;
+  title?: string;
   playlistId?: string | null;
   play?: boolean;
   episodeId?: string;
 }) => {
   return createPath(
     PATH_MEDIA,
-    { id: media.mediaid, title: slugify(media.title) },
+    { id, title: title ? slugify(title) : undefined },
     {
       r: playlistId,
       play: play ? '1' : null,
@@ -120,10 +122,6 @@ export const mediaURL = ({
   );
 };
 
-export const singleMediaURL = (id: string, title?: string) => {
-  return createPath(PATH_MEDIA, { id, title: title ? slugify(title) : undefined });
-};
-
 export const playlistURL = (id: string, title?: string) => {
   return createPath(PATH_PLAYLIST, { id, title: title ? slugify(title) : undefined });
 };
@@ -132,14 +130,14 @@ export const contentListURL = (id: string, title?: string) => {
   return createPath(PATH_CONTENT_LIST, { id, title: title ? slugify(title) : undefined });
 };
 
-export const determinePath = ({ type, contentId }: { type: AppMenuType | undefined; contentId: string }) => {
+export const determinePath = ({ type, contentId, label }: { type: AppMenuType | undefined; contentId: string; label?: string }) => {
   switch (type) {
     case APP_CONFIG_ITEM_TYPE.content_list:
-      return contentListURL(contentId);
+      return contentListURL(contentId, label);
     case APP_CONFIG_ITEM_TYPE.media:
-      return singleMediaURL(contentId);
+      return mediaURL({ id: contentId, title: label });
     case APP_CONFIG_ITEM_TYPE.playlist:
-      return playlistURL(contentId);
+      return playlistURL(contentId, label);
     default:
       return '';
   }

diff --git a/packages/ui-react/src/components/Favorites/Favorites.tsx b/packages/ui-react/src/components/Favorites/Favorites.tsx
@@ -28,7 +28,7 @@ const cols: Breakpoints = {
 
 const Favorites = ({ playlist, accessModel, hasSubscription, onCardHover, onClearFavoritesClick }: Props): JSX.Element => {
   const { t } = useTranslation('user');
-  const getURL = (playlistItem: PlaylistItem) => mediaURL({ media: playlistItem, playlistId: playlistItem.feedid });
+  const getURL = (playlistItem: PlaylistItem) => mediaURL({ id: playlistItem.mediaid, title: playlistItem.title, playlistId: playlistItem.feedid });
 
   return (
     <div>

diff --git a/packages/ui-react/src/components/Shelf/Shelf.tsx b/packages/ui-react/src/components/Shelf/Shelf.tsx
@@ -76,7 +76,8 @@ const Shelf = ({
 
   const renderTile = useCallback(
     ({ item, isVisible }: { item: PlaylistItem; isVisible: boolean }) => {
-      const url = mediaURL({ media: item, playlistId: playlist.feedid, play: type === PersonalShelf.ContinueWatching });
+      const { mediaid: id, title } = item;
+      const url = mediaURL({ id, title, playlistId: playlist.feedid, play: type === PersonalShelf.ContinueWatching });
 
       return (
         <Card

diff --git a/packages/ui-react/src/containers/Layout/Layout.tsx b/packages/ui-react/src/containers/Layout/Layout.tsx
@@ -50,7 +50,7 @@ const Layout = () => {
     { label: t('home'), to: '/' },
     ...menu.map(({ label, contentId, type }) => ({
       label,
-      to: determinePath({ type, contentId }),
+      to: determinePath({ type, contentId, label }),
     })),
   ];
 

diff --git a/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaEpisode/MediaEpisode.tsx b/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaEpisode/MediaEpisode.tsx
@@ -30,8 +30,21 @@ const MediaEpisode: ScreenComponent<PlaylistItem> = ({ data: media, isLoading: i
     return <Navigate to={buildLegacySeriesUrlFromMediaItem(media, play, feedId)} replace />;
   }
 
+  const { mediaid: id, title } = seriesMedia as PlaylistItem;
+
   // Use media episode item for legacy series flow
-  return <Navigate to={mediaURL({ episodeId: mediaId, media: seriesMedia as PlaylistItem, play, playlistId: feedId })} replace />;
+  return (
+    <Navigate
+      to={mediaURL({
+        episodeId: mediaId,
+        id,
+        title,
+        play,
+        playlistId: feedId,
+      })}
+      replace
+    />
+  );
 };
 
 export default MediaEpisode;
diff --git a/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaEvent/MediaEvent.tsx b/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaEvent/MediaEvent.tsx
@@ -65,8 +65,8 @@ const MediaEvent: ScreenComponent<PlaylistItem> = ({ data: media, isLoading }) =
   const hasMediaOffers = !!mediaOffers.length;
 
   // Handlers
-  const goBack = () => media && navigate(mediaURL({ media, playlistId, play: false }));
-  const getUrl = (item: PlaylistItem) => mediaURL({ media: item, playlistId });
+  const goBack = () => media && navigate(mediaURL({ id: media.mediaid, title: media.title, playlistId, play: false }));
+  const getUrl = (item: PlaylistItem) => mediaURL({ id: item.mediaid, title: item.title, playlistId });
 
   const handleComplete = useCallback(() => {
     if (!id || !playlist) return;
@@ -78,7 +78,7 @@ const MediaEvent: ScreenComponent<PlaylistItem> = ({ data: media, isLoading }) =
       return;
     }
 
-    return nextItem && navigate(mediaURL({ media: nextItem, playlistId, play: true }));
+    return nextItem && navigate(mediaURL({ id: nextItem.mediaid, title: nextItem.title, playlistId, play: true }));
   }, [id, playlist, navigate, playlistId]);
 
   // Effects
@@ -88,8 +88,9 @@ const MediaEvent: ScreenComponent<PlaylistItem> = ({ data: media, isLoading }) =
   }, [id]);
 
   // UI
-  const pageTitle = `${media.title} - ${siteName}`;
-  const canonicalUrl = media ? `${window.location.origin}${mediaURL({ media: media })}` : window.location.href;
+  const { title, mediaid } = media;
+  const pageTitle = `${title} - ${siteName}`;
+  const canonicalUrl = media ? `${window.location.origin}${mediaURL({ id: mediaid, title })}` : window.location.href;
 
   const primaryMetadata = (
     <>
@@ -103,7 +104,7 @@ const MediaEvent: ScreenComponent<PlaylistItem> = ({ data: media, isLoading }) =
     <StartWatchingButton
       key={id} // necessary to fix autofocus on TalkBack
       item={media}
-      playUrl={mediaURL({ media, playlistId, play: true })}
+      playUrl={mediaURL({ id: mediaid, title, playlistId, play: true })}
       disabled={!liveEvent.isPlayable}
     />
   );

diff --git a/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaMovie/MediaMovie.tsx b/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaMovie/MediaMovie.tsx
@@ -59,16 +59,16 @@ const MediaMovie: ScreenComponent<PlaylistItem> = ({ data, isLoading }) => {
   const hasMediaOffers = !!mediaOffers.length;
 
   // Handlers
-  const goBack = () => data && navigate(mediaURL({ media: data, playlistId: feedId, play: false }));
-  const getUrl = (item: PlaylistItem) => mediaURL({ media: item, playlistId: features?.recommendationsPlaylist });
+  const goBack = () => data && navigate(mediaURL({ id: data.mediaid, title: data.title, playlistId: feedId, play: false }));
+  const getUrl = (item: PlaylistItem) => mediaURL({ id: item.mediaid, title: item.title, playlistId: features?.recommendationsPlaylist });
 
   const handleComplete = useCallback(() => {
     if (!id || !playlist) return;
 
     const index = playlist.playlist.findIndex(({ mediaid }) => mediaid === id);
     const nextItem = playlist.playlist[index + 1];
 
-    return nextItem && navigate(mediaURL({ media: nextItem, playlistId: features?.recommendationsPlaylist, play: true }));
+    return nextItem && navigate(mediaURL({ id: nextItem.mediaid, title: nextItem.title, playlistId: features?.recommendationsPlaylist, play: true }));
   }, [id, playlist, navigate, features?.recommendationsPlaylist]);
 
   useEffect(() => {
@@ -78,15 +78,15 @@ const MediaMovie: ScreenComponent<PlaylistItem> = ({ data, isLoading }) => {
 
   // UI
   const pageTitle = `${data.title} - ${siteName}`;
-  const canonicalUrl = data ? `${window.location.origin}${mediaURL({ media: data })}` : window.location.href;
+  const canonicalUrl = data ? `${window.location.origin}${mediaURL({ id: data.mediaid, title: data.title })}` : window.location.href;
 
   const primaryMetadata = <VideoMetaData attributes={createVideoMetadata(data)} />;
   const shareButton = <ShareButton title={data.title} description={data.description} url={canonicalUrl} />;
   const startWatchingButton = (
     <StartWatchingButton
       key={id} // necessary to fix autofocus on TalkBack
       item={data}
-      playUrl={mediaURL({ media: data, playlistId: feedId, play: true })}
+      playUrl={mediaURL({ id: data.mediaid, title: data.title, playlistId: feedId, play: true })}
     />
   );
 

diff --git a/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaSeries/MediaSeries.tsx b/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaSeries/MediaSeries.tsx
@@ -193,7 +193,7 @@ const MediaSeries: ScreenComponent<PlaylistItem> = ({ data: seriesMedia }) => {
   if (!seriesMedia || !series || !playEpisode) return <ErrorPage title={t('series_error')} />;
 
   const pageTitle = `${selectedItem.title} - ${siteName}`;
-  const canonicalUrl = `${window.location.origin}${mediaURL({ media: seriesMedia, episodeId: episode?.mediaid })}`;
+  const canonicalUrl = `${window.location.origin}${mediaURL({ id: seriesMedia.mediaid, title: seriesMedia.title, episodeId: episode?.mediaid })}`;
 
   const primaryMetadata = <VideoMetaData attributes={createVideoMetadata(selectedItem, t('video:total_episodes', { count: series.episode_count }))} />;
   const secondaryMetadata = episodeMetadata && episode && (

diff --git a/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaStaticPage/MediaStaticPage.tsx b/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaStaticPage/MediaStaticPage.tsx
@@ -14,7 +14,7 @@ const MediaStaticPage: ScreenComponent<PlaylistItem> = ({ data }) => {
   const { config } = useConfigStore(({ config }) => ({ config }), shallow);
   const { siteName } = config;
   const pageTitle = `${data.title} - ${siteName}`;
-  const canonicalUrl = data ? `${window.location.origin}${mediaURL({ media: data })}` : window.location.href;
+  const canonicalUrl = data ? `${window.location.origin}${mediaURL({ id: data.mediaid, title: data.title })}` : window.location.href;
 
   useEffect(() => {
     (document.scrollingElement || document.body).scroll({ top: 0 });

diff --git a/packages/ui-react/src/pages/ScreenRouting/playlistScreens/PlaylistGrid/PlaylistGrid.tsx b/packages/ui-react/src/pages/ScreenRouting/playlistScreens/PlaylistGrid/PlaylistGrid.tsx
@@ -32,7 +32,7 @@ const PlaylistGrid: ScreenComponent<Playlist> = ({ data, isLoading }) => {
 
   const pageTitle = `${data.title} - ${config.siteName}`;
 
-  const getUrl = (playlistItem: PlaylistItem) => mediaURL({ media: playlistItem, playlistId: playlistItem.feedid });
+  const getUrl = (playlistItem: PlaylistItem) => mediaURL({ id: playlistItem.mediaid, title: playlistItem.title, playlistId: playlistItem.feedid });
 
   return (
     <div className={styles.playlist}>

diff --git a/packages/ui-react/src/pages/Search/Search.tsx b/packages/ui-react/src/pages/Search/Search.tsx
@@ -36,7 +36,8 @@ const Search = () => {
 
   const getURL = (playlistItem: PlaylistItem) =>
     mediaURL({
-      media: playlistItem,
+      id: playlistItem.mediaid,
+      title: playlistItem.title,
       playlistId: features?.searchPlaylist,
     });