feat(project): convert click based navigation to use links for SEO

* chore(project): add <Link> to the Card component
* chore(project): update aria-label
* fix(project): search refactoring
* chore(project): add redirect url for series cards
* fix(project): remove onKeyDown from card
* chore(project): add urls for inline-player cards
* chore(project): live stream cards to links
* chore(project): video layout refactor

src/components/Card/Card.module.scss

@@ -7,6 +7,8 @@
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
+  color: inherit;
+  text-decoration: none;
   cursor: pointer;
   transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
 

src/components/Card/Card.test.tsx

@@ -1,32 +1,32 @@
 import * as React from 'react';
-import { fireEvent, render } from '@testing-library/react';
+import { fireEvent } from '@testing-library/react';
 
 import Card from './Card';
 
 import type { PlaylistItem } from '#types/playlist';
+import { renderWithRouter } from '#test/testUtils';
 
 const item = { title: 'aa', duration: 120 } as PlaylistItem;
 const itemWithImage = { title: 'This is a movie', duration: 120, cardImage: 'http://movie.jpg' } as PlaylistItem;
 
 describe('<Card>', () => {
   it('renders card with video title', () => {
-    const { getByText } = render(<Card item={item} onClick={() => ''} />);
+    const { getByText } = renderWithRouter(<Card item={item} url="https://test.dummy.jwplayer.com" />);
     expect(getByText(/aa/i)).toBeTruthy();
   });
 
   it('renders tag with correct duration', () => {
-    const { getByText } = render(<Card item={item} onClick={() => ''} />);
+    const { getByText } = renderWithRouter(<Card item={item} url="https://test.dummy.jwplayer.com" />);
     expect(getByText(/2/i)).toBeTruthy();
   });
 
   it('renders the image with the image prop when valid', () => {
-    const { getByAltText } = render(<Card item={itemWithImage} onClick={() => ''} />);
-
+    const { getByAltText } = renderWithRouter(<Card item={itemWithImage} url="https://test.dummy.jwplayer.com" />);
     expect(getByAltText('This is a movie')).toHaveAttribute('src', 'http://movie.jpg?width=320');
   });
 
   it('makes the image visible after load', () => {
-    const { getByAltText } = render(<Card item={itemWithImage} onClick={() => ''} />);
+    const { getByAltText } = renderWithRouter(<Card item={itemWithImage} url="https://test.dummy.jwplayer.com" />);
 
     expect(getByAltText('This is a movie')).toHaveAttribute('src', 'http://movie.jpg?width=320');
     expect(getByAltText('This is a movie')).toHaveStyle({ opacity: 0 });
@@ -35,4 +35,9 @@ describe('<Card>', () => {
 
     expect(getByAltText('This is a movie')).toHaveStyle({ opacity: 1 });
   });
+
+  it('should render anchor tag', () => {
+    const { container } = renderWithRouter(<Card item={itemWithImage} url="https://test.dummy.jwplayer.com" />);
+    expect(container).toMatchSnapshot();
+  });
 });

src/components/Card/Card.tsx

@@ -1,6 +1,7 @@
-import React, { KeyboardEvent, memo, useState } from 'react';
+import React, { memo, useState } from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
 
 import styles from './Card.module.scss';
 
@@ -18,7 +19,6 @@ export type PosterAspectRatio = (typeof cardAspectRatios)[number];
 
 type CardProps = {
   item: PlaylistItem;
-  onClick?: () => void;
   onHover?: () => void;
   progress?: number;
   posterAspect?: PosterAspectRatio;
@@ -28,10 +28,10 @@ type CardProps = {
   isCurrent?: boolean;
   isLocked?: boolean;
   currentLabel?: string;
+  url: string;
 };
 
 function Card({
-  onClick,
   onHover,
   progress,
   item,
@@ -42,6 +42,7 @@ function Card({
   isCurrent = false,
   isLocked = true,
   currentLabel,
+  url,
 }: CardProps): JSX.Element {
   const { title, duration, episodeNumber, seasonNumber, cardImage: image, mediaStatus, scheduledStart } = item;
   const {
@@ -86,14 +87,13 @@ function Card({
   };
 
   return (
-    <div
+    <Link
+      to={url}
       className={cardClassName}
-      onClick={onClick}
+      onClick={disabled ? (e) => e.preventDefault() : undefined}
       onMouseEnter={onHover}
       tabIndex={disabled ? -1 : 0}
-      onKeyDown={(event: KeyboardEvent) => (event.key === 'Enter' || event.key === ' ') && !disabled && onClick && onClick()}
-      role="button"
-      aria-label={t('play_item', { title })}
+      aria-label={title}
     >
       <div className={posterClassNames}>
         <Image className={posterImageClassNames} image={image} width={featured ? 640 : 320} onLoad={() => setImageLoaded(true)} alt={title} />
@@ -125,7 +125,7 @@ function Card({
           <div className={classNames(styles.title, { [styles.loading]: loading })}>{title}</div>
         </div>
       )}
-    </div>
+    </Link>
   );
 }
 

src/components/Card/__snapshots__/Card.test.tsx.snap

@@ -0,0 +1,62 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<Card> > should render anchor tag 1`] = `
+<div>
+  <a
+    aria-label="This is a movie"
+    class="_card_d75732"
+    href="https://test.dummy.jwplayer.com"
+    tabindex="0"
+  >
+    <div
+      class="_poster_d75732 _aspect169_d75732"
+    >
+      <img
+        alt="This is a movie"
+        class="_posterImage_d75732 _image_4c41c3"
+        src="http://movie.jpg?width=320"
+      />
+      <div
+        class="_meta_d75732"
+      >
+        <div
+          class="_tags_d75732"
+        >
+          <div
+            aria-label="card_lock"
+            class="_tag_d75732 _lock_d75732"
+            role="status"
+          >
+            <svg
+              aria-hidden="true"
+              class="_icon_1e9999"
+              focusable="false"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z"
+                fill="currentColor"
+              />
+            </svg>
+          </div>
+          <div
+            class="_tag_d75732"
+          >
+            2 min
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="_titleContainer_d75732"
+    >
+      <div
+        class="_title_d75732"
+      >
+        This is a movie
+      </div>
+    </div>
+  </a>
+</div>
+`;

src/components/CardGrid/CardGrid.test.tsx

@@ -1,22 +1,23 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
 
 import CardGrid from './CardGrid';
 
-import { generatePlaylistPlaceholder } from '#src/utils/collection';
+import playlistFixture from '#test/fixtures/playlist.json';
+import { renderWithRouter } from '#test/testUtils';
+import type { Playlist, PlaylistItem } from '#types/playlist';
 
 describe('<CardGrid>', () => {
   it('renders and matches snapshot', () => {
-    const placeholderData = generatePlaylistPlaceholder();
-    const { container } = render(
+    const playlist = playlistFixture as Playlist;
+    const { container } = renderWithRouter(
       <CardGrid
-        playlist={placeholderData}
+        playlist={playlist}
         onCardHover={vi.fn()}
-        onCardClick={vi.fn()}
         isLoading={false}
         accessModel={'SVOD'}
         isLoggedIn={true}
         hasSubscription={true}
+        getUrl={(item: PlaylistItem) => `m/${item.mediaid}`}
       />,
     );
 

src/components/CardGrid/CardGrid.tsx

@@ -36,7 +36,7 @@ type CardGridProps = {
   hasLoadMore?: boolean;
   loadMore?: () => void;
   onCardHover?: (item: PlaylistItem) => void;
-  onCardClick: (item: PlaylistItem, playlistId?: string) => void;
+  getUrl: (item: PlaylistItem) => string;
 };
 
 function CardGrid({
@@ -50,8 +50,8 @@ function CardGrid({
   isLoggedIn,
   hasSubscription,
   hasLoadMore,
+  getUrl,
   loadMore,
-  onCardClick,
   onCardHover,
 }: CardGridProps) {
   const breakpoint: Breakpoint = useBreakpoint();
@@ -75,7 +75,7 @@ function CardGrid({
         <div role="cell">
           <Card
             progress={watchHistory ? watchHistory[mediaid] : undefined}
-            onClick={() => onCardClick(playlistItem, playlistItem.feedid)}
+            url={getUrl(playlistItem)}
             onHover={typeof onCardHover === 'function' ? () => onCardHover(playlistItem) : undefined}
             loading={isLoading}
             isCurrent={currentCardItem && currentCardItem.mediaid === mediaid}