chore(project): add anchor tags for better seo

src/components/Card/Card.test.tsx

@@ -11,23 +11,23 @@ const itemWithImage = { title: 'This is a movie', duration: 120, cardImage: 'htt
 
 describe('<Card>', () => {
   it('renders card with video title', () => {
-    const { getByText } = renderWithRouter(<Card item={item} onClick={() => ''} />);
+    const { getByText } = renderWithRouter(<Card item={item} onClick={() => ''} url="" />);
     expect(getByText(/aa/i)).toBeTruthy();
   });
 
   it('renders tag with correct duration', () => {
-    const { getByText } = renderWithRouter(<Card item={item} onClick={() => ''} />);
+    const { getByText } = renderWithRouter(<Card item={item} onClick={() => ''} url="" />);
     expect(getByText(/2/i)).toBeTruthy();
   });
 
   it('renders the image with the image prop when valid', () => {
-    const { getByAltText } = renderWithRouter(<Card item={itemWithImage} onClick={() => ''} />);
+    const { getByAltText } = renderWithRouter(<Card item={itemWithImage} onClick={() => ''} url="" />);
 
     expect(getByAltText('This is a movie')).toHaveAttribute('src', 'http://movie.jpg?width=320');
   });
 
   it('makes the image visible after load', () => {
-    const { getByAltText } = renderWithRouter(<Card item={itemWithImage} onClick={() => ''} />);
+    const { getByAltText } = renderWithRouter(<Card item={itemWithImage} onClick={() => ''} url="" />);
 
     expect(getByAltText('This is a movie')).toHaveAttribute('src', 'http://movie.jpg?width=320');
     expect(getByAltText('This is a movie')).toHaveStyle({ opacity: 0 });

src/components/Card/Card.tsx

@@ -29,7 +29,7 @@ type CardProps = {
   isCurrent?: boolean;
   isLocked?: boolean;
   currentLabel?: string;
-  url?: string;
+  url: string;
 };
 
 function Card({
@@ -90,7 +90,7 @@ function Card({
 
   return (
     <Link
-      to={url ?? ''}
+      to={disabled ? '/' : url}
       className={cardClassName}
       onClick={onClick}
       onMouseEnter={onHover}

src/components/CardGrid/CardGrid.tsx

@@ -37,7 +37,7 @@ type CardGridProps = {
   hasLoadMore?: boolean;
   loadMore?: () => void;
   onCardHover?: (item: PlaylistItem) => void;
-  onCardClick: (item: PlaylistItem, playlistId?: string) => void;
+  onCardClick?: (item: PlaylistItem, playlistId?: string) => void;
 };
 
 function CardGrid({
@@ -78,7 +78,7 @@ function CardGrid({
           <Card
             progress={watchHistory ? watchHistory[mediaid] : undefined}
             url={url}
-            onClick={() => onCardClick(playlistItem, playlistItem.feedid)}
+            onClick={() => onCardClick && onCardClick(playlistItem, playlistItem.feedid)}
             onHover={typeof onCardHover === 'function' ? () => onCardHover(playlistItem) : undefined}
             loading={isLoading}
             isCurrent={currentCardItem && currentCardItem.mediaid === mediaid}

src/components/Favorites/Favorites.test.tsx

@@ -15,7 +15,6 @@ describe('<Favorites>', () => {
             playlist={playlist}
             error={error}
             isLoading={isLoading}
-            onCardClick={() => null}
             onCardHover={() => null}
             onClearFavoritesClick={() => null}
             hasSubscription={true}

src/components/Favorites/Favorites.tsx

@@ -17,7 +17,6 @@ type Props = {
   isLoading: boolean;
   accessModel: AccessModel;
   hasSubscription: boolean;
-  onCardClick: (item: PlaylistItem) => void;
   onCardHover?: (item: PlaylistItem) => void;
   onClearFavoritesClick: () => void;
 };
@@ -30,7 +29,7 @@ const cols: Breakpoints = {
   [Breakpoint.xl]: 3,
 };
 
-const Favorites = ({ playlist, error, isLoading, accessModel, hasSubscription, onCardClick, onCardHover, onClearFavoritesClick }: Props): JSX.Element => {
+const Favorites = ({ playlist, error, isLoading, accessModel, hasSubscription, onCardHover, onClearFavoritesClick }: Props): JSX.Element => {
   const { t } = useTranslation('user');
 
   if (isLoading) return <LoadingOverlay />;
@@ -48,7 +47,6 @@ const Favorites = ({ playlist, error, isLoading, accessModel, hasSubscription, o
       {playlist.playlist.length > 0 ? (
         <CardGrid
           playlist={playlist}
-          onCardClick={onCardClick}
           onCardHover={onCardHover}
           cols={cols}
           isLoading={isLoading}

src/components/Shelf/Shelf.tsx

@@ -83,7 +83,7 @@ const Shelf = ({
           isLocked={isLocked(accessModel, isLoggedIn, hasSubscription, item)}
           posterAspect={posterAspect}
           item={item}
-          url={isInView ? url : undefined}
+          url={url}
         />
       );
     },

src/pages/ScreenRouting/playlistScreens/PlaylistGrid/PlaylistGrid.tsx

@@ -1,21 +1,18 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import shallow from 'zustand/shallow';
 
 import styles from './PlaylistGrid.module.scss';
 
-import { mediaURL } from '#src/utils/formatting';
 import { filterPlaylist, getFiltersFromConfig } from '#src/utils/collection';
 import CardGrid from '#components/CardGrid/CardGrid';
 import Filter from '#components/Filter/Filter';
 import { useAccountStore } from '#src/stores/AccountStore';
 import { useConfigStore } from '#src/stores/ConfigStore';
-import type { Playlist, PlaylistItem } from '#types/playlist';
+import type { Playlist } from '#types/playlist';
 import type { ScreenComponent } from '#types/screens';
 
 const PlaylistGrid: ScreenComponent<Playlist> = ({ data, isLoading }) => {
-  const navigate = useNavigate();
   const { config, accessModel } = useConfigStore(({ config, accessModel }) => ({ config, accessModel }), shallow);
 
   const [filter, setFilter] = useState<string>('');
@@ -32,8 +29,6 @@ const PlaylistGrid: ScreenComponent<Playlist> = ({ data, isLoading }) => {
     setFilter('');
   }, [data.feedid]);
 
-  const onCardClick = (playlistItem: PlaylistItem) => navigate(mediaURL({ media: playlistItem, playlistId: data.feedid }));
-
   const pageTitle = `${data.title} - ${config.siteName}`;
 
   return (
@@ -48,14 +43,7 @@ const PlaylistGrid: ScreenComponent<Playlist> = ({ data, isLoading }) => {
         {shouldShowFilter && <Filter name="genre" value={filter} defaultLabel="All" options={categories} setValue={setFilter} />}
       </header>
       <main className={styles.main}>
-        <CardGrid
-          playlist={filteredPlaylist}
-          onCardClick={onCardClick}
-          accessModel={accessModel}
-          isLoggedIn={!!user}
-          hasSubscription={!!subscription}
-          isLoading={isLoading}
-        />
+        <CardGrid playlist={filteredPlaylist} accessModel={accessModel} isLoggedIn={!!user} hasSubscription={!!subscription} isLoading={isLoading} />
       </main>
     </div>
   );

src/pages/Search/Search.tsx

@@ -1,17 +1,15 @@
 import React, { useEffect } from 'react';
-import { useNavigate, useParams } from 'react-router';
+import { useParams } from 'react-router';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import shallow from 'zustand/shallow';
 
 import styles from './Search.module.scss';
 
 import { useUIStore } from '#src/stores/UIStore';
-import { mediaURL } from '#src/utils/formatting';
 import { useAccountStore } from '#src/stores/AccountStore';
 import { useConfigStore } from '#src/stores/ConfigStore';
 import useFirstRender from '#src/hooks/useFirstRender';
-import type { PlaylistItem } from '#types/playlist';
 import useSearchQueryUpdater from '#src/hooks/useSearchQueryUpdater';
 import CardGrid from '#components/CardGrid/CardGrid';
 import ErrorPage from '#components/ErrorPage/ErrorPage';
@@ -25,7 +23,6 @@ const Search = () => {
   const firstRender = useFirstRender();
   const searchQuery = useUIStore((state) => state.searchQuery);
   const { updateSearchQuery } = useSearchQueryUpdater();
-  const navigate = useNavigate();
   const params = useParams();
   const query = params['*'];
   const { isFetching, error, data: playlist } = usePlaylist(features?.searchPlaylist || '', { search: query || '' }, true, !!query);
@@ -44,13 +41,11 @@ const Search = () => {
     }
   }, [firstRender, query, searchQuery, updateSearchQuery]);
 
-  const onCardClick = (playlistItem: PlaylistItem) => {
+  const onCardClick = () => {
     useUIStore.setState({
       searchQuery: '',
       searchActive: false,
     });
-
-    navigate(mediaURL({ media: playlistItem, playlistId: features?.searchPlaylist }));
   };
 
   if ((error || !playlist) && !isFetching) {

src/pages/User/User.tsx

@@ -6,7 +6,6 @@ import shallow from 'zustand/shallow';
 import styles from './User.module.scss';
 
 import PlaylistContainer from '#src/containers/PlaylistContainer/PlaylistContainer';
-import { mediaURL } from '#src/utils/formatting';
 import AccountCircle from '#src/icons/AccountCircle';
 import Favorite from '#src/icons/Favorite';
 import BalanceWallet from '#src/icons/BalanceWallet';
@@ -20,7 +19,6 @@ import Payment from '#components/Payment/Payment';
 import AccountComponent from '#components/Account/Account';
 import Button from '#components/Button/Button';
 import Favorites from '#components/Favorites/Favorites';
-import type { PlaylistItem } from '#types/playlist';
 import { getReceipt, logout } from '#src/stores/AccountController';
 import { clear as clearFavorites } from '#src/stores/FavoritesController';
 import { getSubscriptionSwitches } from '#src/stores/CheckoutController';
@@ -58,7 +56,6 @@ const User = (): JSX.Element => {
   const offerSwitches = useCheckoutStore((state) => state.offerSwitches);
   const location = useLocation();
 
-  const onCardClick = (playlistItem: PlaylistItem) => navigate(mediaURL({ media: playlistItem }));
   const onLogout = useCallback(async () => {
     // Empty customer on a user page leads to navigate (code bellow), so we don't repeat it here
     await logout();
@@ -154,7 +151,6 @@ const User = (): JSX.Element => {
                         playlist={playlist}
                         error={error}
                         isLoading={isLoading}
-                        onCardClick={onCardClick}
                         onClearFavoritesClick={() => setClearFavoritesOpen(true)}
                         accessModel={accessModel}
                         hasSubscription={!!subscription}

test-e2e/tests/playlist_test.ts

@@ -60,7 +60,7 @@ Scenario('I can filter and click on a card and navigate to the video screen', as
 });
 
 function canNavigateToBigBuckBunny(I: CodeceptJS.I) {
-  I.click({ css: 'div[aria-label="Play Big Buck Bunny"]' });
+  I.click({ css: 'a[aria-label="Big Buck Bunny"]' });
 
   I.see(constants.bigBuckBunnyDescription);
   I.see(constants.startWatchingButton);

test-e2e/tests/watch_history/local_test.ts

@@ -44,7 +44,7 @@ Scenario('I can see my watch history on the Home screen', async ({ I }) => {
     I.see('10 min');
   });
 
-  const selector = `${makeShelfXpath(ShelfId.continueWatching)}//div[@aria-label="Play ${videoTitle}"]`;
+  const selector = `${makeShelfXpath(ShelfId.continueWatching)}//a[@aria-label="${videoTitle}"]`;
   await checkProgress(I, selector, (200 / videoLength) * 100);
 
   I.click(selector);

test-e2e/tests/watch_history/logged_in_test.ts

@@ -71,7 +71,7 @@ function runTestSuite(config: typeof testConfigs.svod, configNoWatchlist: typeof
       I.see('10 min');
     });
 
-    const selector = `${makeShelfXpath(ShelfId.continueWatching)}//div[@aria-label="Play ${videoTitle}"]`;
+    const selector = `${makeShelfXpath(ShelfId.continueWatching)}//a[@aria-label="${videoTitle}"]`;
     await checkProgress(I, selector, (80 / videoLength) * 100);
 
     I.click(selector);

test-e2e/utils/steps_file.ts

@@ -378,7 +378,7 @@ const stepsObj = {
     scrollToTheRight: boolean = true,
     preOpenCallback?: (locator: string) => void,
   ) {
-    const locator = `//div[@aria-label="Play ${name}"]`;
+    const locator = `//a[@aria-label="${name}"]`;
     const shelfXpath = shelf ? makeShelfXpath(shelf) : undefined;
 
     if (shelfXpath) {