fix(project): fix episode URL

src/containers/Playlist/PlaylistContainer.tsx

@@ -10,16 +10,18 @@ type ChildrenParams = {
   playlist: Playlist;
   isLoading: boolean;
   error: unknown;
+  style?: React.CSSProperties;
 };
 
 type Props = {
   playlistId: string;
   relatedItem?: PlaylistItem;
   onPlaylistUpdate?: (playlist: Playlist) => void;
   children: (childrenParams: ChildrenParams) => JSX.Element;
+  style?: React.CSSProperties;
 };
 
-const PlaylistContainer = ({ playlistId, relatedItem, onPlaylistUpdate, children }: Props): JSX.Element | null => {
+const PlaylistContainer = ({ playlistId, relatedItem, onPlaylistUpdate, style, children }: Props): JSX.Element | null => {
   const isAlternativeShelf = PersonalShelves.includes(playlistId as PersonalShelf);
   const { isLoading, error, data: fetchedPlaylist = { title: '', playlist: [] } }: UsePlaylistResult = usePlaylist(
     playlistId,
@@ -32,14 +34,14 @@ const PlaylistContainer = ({ playlistId, relatedItem, onPlaylistUpdate, children
   const { getPlaylist: getFavoritesPlayist } = useFavorites();
   const favoritesPlaylist = getFavoritesPlayist();
   const { getPlaylist: getWatchHistoryPlayist } = useWatchHistory();
-  const watchHistoryPlayist = getWatchHistoryPlayist();
+  const watchHistoryPlaylist = getWatchHistoryPlayist();
 
   useEffect(() => {
     if (playlist && onPlaylistUpdate) onPlaylistUpdate(playlist);
   }, [playlist, onPlaylistUpdate]);
 
   if (playlistId === PersonalShelf.Favorites) playlist = favoritesPlaylist;
-  if (playlistId === PersonalShelf.ContinueWatching) playlist = watchHistoryPlayist;
+  if (playlistId === PersonalShelf.ContinueWatching) playlist = watchHistoryPlaylist;
 
   if (!playlistId) return <p>No playlist id</p>;
   if (!playlist.playlist.length) {
@@ -50,7 +52,7 @@ const PlaylistContainer = ({ playlistId, relatedItem, onPlaylistUpdate, children
     playlist.playlist.unshift(relatedItem);
   }
 
-  return children({ playlist, isLoading, error });
+  return children({ playlist, isLoading, error, style });
 };
 
 export default PlaylistContainer;

src/screens/Home/Home.tsx

@@ -61,8 +61,8 @@ const Home = (): JSX.Element => {
     const contentItem: Content = itemData.content[index];
 
     return (
-      <PlaylistContainer key={contentItem.playlistId} playlistId={contentItem.playlistId}>
-        {({ playlist, error, isLoading }) => (
+      <PlaylistContainer key={contentItem.playlistId} playlistId={contentItem.playlistId} style={style}>
+        {({ playlist, error, isLoading, style }) => (
           <div
             key={key}
             style={style}

src/utils/formatting.ts

@@ -1,5 +1,7 @@
 import type { Playlist, PlaylistItem } from 'types/playlist';
 
+import { getSeriesId, getSeriesIdFromEpisode, isEpisode, isSeriesPlaceholder } from './media';
+
 const formatDurationTag = (seconds: number): string | null => {
   if (!seconds || typeof seconds !== 'number') return null;
 
@@ -61,17 +63,38 @@ const slugify = (text: string, whitespaceChar: string = '-') =>
 const movieURL = (item: PlaylistItem, playlistId?: string | null) =>
   addQueryParams(`/m/${item.mediaid}/${slugify(item.title)}`, { r: playlistId });
 
-const seriesURL = (item: PlaylistItem, playlistId?: string | null) =>
-  addQueryParams(`/s/${item.seriesId}/${slugify(item.title)}`, { r: playlistId });
+const seriesURL = (item: PlaylistItem, playlistId?: string | null) => {
+  const seriesId = getSeriesId(item);
+
+  return addQueryParams(`/s/${seriesId}/${slugify(item.title)}`, { r: playlistId });
+};
 
-const episodeURL = (seriesPlaylist: Playlist, episodeId?: string, play: boolean = false) =>
+const episodeURL = (seriesPlaylist: Playlist, episodeId?: string, play: boolean = false, playlistId?: string | null) =>
   addQueryParams(`/s/${seriesPlaylist.feedid}/${slugify(seriesPlaylist.title)}`, {
     e: episodeId,
+    r: playlistId,
+    play: play ? '1' : null,
+  });
+
+const episodeURLFromEpisode = (item: PlaylistItem, seriesId: string, play: boolean = false, playlistId?: string | null) => {
+  // generated URL does not match the canonical URL. We need the series playlist in order to generate the slug. For
+  // now the item title is used instead. The canonical link isn't affected by this though.
+  return addQueryParams(`/s/${seriesId}/${slugify(item.title)}`, {
+    e: item.mediaid,
+    r: playlistId,
     play: play ? '1' : null,
   });
+};
+
+const cardUrl = (item: PlaylistItem, playlistId?: string | null) => {
+  if (isEpisode(item)) {
+    const seriesId = getSeriesIdFromEpisode(item);
 
-const cardUrl = (item: PlaylistItem, playlistId?: string | null) =>
-  item.seriesId ? seriesURL(item, playlistId) : movieURL(item, playlistId);
+    return seriesId ? episodeURLFromEpisode(item, seriesId, false, playlistId) : movieURL(item);
+  }
+
+  return isSeriesPlaceholder(item) ? seriesURL(item, playlistId) : movieURL(item, playlistId);
+};
 
 const videoUrl = (item: PlaylistItem, playlistId?: string | null, play: boolean = false) =>
   addQueryParams(item.seriesId ? seriesURL(item, playlistId) : movieURL(item, playlistId), {

src/utils/media.ts

@@ -0,0 +1,39 @@
+import type { PlaylistItem } from '../../types/playlist';
+
+type DeprecatedPlaylistItem = {
+  seriesPlayListId?: string;
+  seriesPlaylistId?: string;
+};
+
+export const getSeriesId = (item: PlaylistItem & DeprecatedPlaylistItem) => {
+  if (!item) {
+    return undefined;
+  }
+
+  return item['seriesPlayListId'] || item.seriesPlaylistId || item.seriesId;
+};
+
+export const isSeriesPlaceholder = (item: PlaylistItem) => {
+  return typeof getSeriesId(item) !== 'undefined';
+};
+
+export const isEpisode = (item: PlaylistItem) => {
+  return item && typeof item.episodeNumber !== 'undefined';
+};
+
+export const getSeriesIdFromEpisode = (item: PlaylistItem) => {
+  if (!item || !isEpisode(item)) {
+    return null;
+  }
+
+  const tags = item.tags ? item.tags.split(',') : [];
+  const seriesIdTag = tags.find(function (tag) {
+    return /seriesid_([\w\d]+)/i.test(tag);
+  });
+
+  if (seriesIdTag) {
+    return seriesIdTag.split('_')[1];
+  }
+
+  return null;
+};