Merge pull request #367 from jwplayer/release-candidate

v4.26.0 Release Candidate
jwplayer · Aug 30, 2023 · 5344cb0 · 5344cb0
2 parents 659106a + 999546b
commit 5344cb0
Show file tree

Hide file tree

Showing 78 changed files with 3,851 additions and 4,180 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,20 @@
+# [4.26.0](https://github.com/jwplayer/ott-web-app/compare/v4.25.0...v4.26.0) (2023-08-30)
+
+
+### Bug Fixes
+
+* **project:** fix helmet for legacy series after react update ([90d489c](https://github.com/jwplayer/ott-web-app/commit/90d489c67dde2d10324a5a554a7b28cfe99d5823))
+
+
+### Features
+
+* **project:** convert click based navigation to use links for SEO ([625fbdc](https://github.com/jwplayer/ott-web-app/commit/625fbdc5f845fb79cf33a8fe97459e728be0df4c))
+* **project:** update react ([03e3d30](https://github.com/jwplayer/ott-web-app/commit/03e3d300a4c0e451eb6124ac418b0ed469b23a95))
+* **project:** update React to 18.2.0 ([c98512d](https://github.com/jwplayer/ott-web-app/commit/c98512d4876b81759afa2883875048503e98e419))
+* **project:** update react to 18.2.0 and related dependencies ([83931d2](https://github.com/jwplayer/ott-web-app/commit/83931d235dcba122f0f054bacf891081cbc64821))
+
+
+
 # [4.25.0](https://github.com/jwplayer/ott-web-app/compare/v4.23.2...v4.25.0) (2023-08-01)
 
 

diff --git a/package.json b/package.json
@@ -1,12 +1,12 @@
 {
   "name": "jw-ott-webapp",
-  "version": "4.25.0",
+  "version": "4.26.0",
   "main": "index.js",
   "repository": "https://github.com/jwplayer/ott-web-app.git",
   "author": "JW Player",
   "private": true,
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=18.13.0"
   },
   "scripts": {
     "prepare": "husky install",
@@ -19,7 +19,7 @@
     "test-commit": "TZ=UTC LC_ALL=en_US.UTF-8 vitest run --changed HEAD~1 --coverage",
     "test-update": "TZ=UTC LC_ALL=en_US.UTF-8 vitest run --update",
     "i18next": "i18next src/{components,containers,pages,services,stores}/**/{**/,/}*.{ts,tsx} && node ./scripts/i18next/generate.js",
-    "i18next-diff": "yarn i18next && npx ts-node ./scripts/i18next/diff-translations",
+    "i18next-diff": "npx ts-node ./scripts/i18next/diff-translations",
     "i18next-update": "npx ts-node ./scripts/i18next/update-translations && yarn i18next",
     "format": "run-s -c format:*",
     "format:eslint": "eslint \"{**/*,*}.{js,ts,jsx,tsx}\" --fix",
@@ -56,12 +56,12 @@
     "marked": "^4.1.1",
     "payment": "^2.4.6",
     "planby": "^0.3.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
     "react-i18next": "^12.2.2",
     "react-infinite-scroller": "^1.2.6",
-    "react-query": "^3.13.10",
+    "react-query": "^3.39.0",
     "react-router-dom": "^6.4.0",
     "wicg-inert": "^3.1.1",
     "yup": "^0.32.9",
@@ -71,9 +71,8 @@
     "@codeceptjs/configure": "^0.8.0",
     "@commitlint/cli": "^12.1.1",
     "@commitlint/config-conventional": "^12.1.1",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^11.2.6",
-    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
     "@types/dompurify": "^2.3.4",
     "@types/ini": "^1.3.31",
     "@types/jwplayer": "^8.2.13",
@@ -82,13 +81,13 @@
     "@types/marked": "^4.0.7",
     "@types/node": "^17.0.23",
     "@types/payment": "^2.1.4",
-    "@types/react": "^17.0.14",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "18.2.7",
     "@types/react-helmet": "^6.1.2",
     "@types/react-infinite-scroller": "^1.2.3",
     "@typescript-eslint/eslint-plugin": "^5.17.0",
     "@typescript-eslint/parser": "^5.17.0",
-    "@vitejs/plugin-react": "^1.0.7",
+    "@vitejs/plugin-react": "^4.0.4",
     "@vitest/coverage-v8": "^0.33.0",
     "allure-commandline": "^2.17.2",
     "codeceptjs": "3.4.1",
@@ -103,7 +102,7 @@
     "faker": "^5.5.1",
     "husky": "^6.0.0",
     "i18next-parser": "^8.0.0",
-    "jsdom": "^19.0.0",
+    "jsdom": "^22.1.0",
     "lint-staged": "^10.5.4",
     "luxon": "^3.2.1",
     "npm-run-all": "^4.1.5",
@@ -125,13 +124,13 @@
     "tsconfig-paths": "^4.1.0",
     "typescript": "^4.3.4",
     "vi-fetch": "^0.8.0",
-    "vite": "^4.4.0",
+    "vite": "^4.4.8",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-html": "^3.2.0",
     "vite-plugin-pwa": "^0.14.0",
-    "vite-plugin-static-copy": "^0.13.0",
-    "vite-plugin-stylelint": "^4.0.1",
-    "vitest": "^0.32.3",
+    "vite-plugin-static-copy": "^0.17.0",
+    "vite-plugin-stylelint": "^4.3.0",
+    "vitest": "^0.34.1",
     "workbox-build": "^6.5.4",
     "workbox-window": "^6.5.4"
   },

diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -19,7 +19,6 @@
   "live": "LIVE",
   "now": "Now",
   "optional": "(Optional)",
-  "play_item": "Play {{title}}",
   "scheduled": "Scheduled",
   "series": "series",
   "sign_in": "Sign in",

diff --git a/public/locales/es/common.json b/public/locales/es/common.json
@@ -19,7 +19,6 @@
   "live": "EN VIVO",
   "now": "Ahora",
   "optional": "(Opcional)",
-  "play_item": "Reproducir {{title}}",
   "scheduled": "Programada",
   "series": "serie",
   "sign_in": "Iniciar sesión",

diff --git a/scripts/i18next/diff-translations.ts b/scripts/i18next/diff-translations.ts
@@ -13,7 +13,9 @@ const changes: {
 } = {};
 
 function run() {
-  const fileChanges = execSync('git diff -U200000 --no-prefix release..release-candidate public/locales')
+  execSync('git fetch');
+
+  const fileChanges = execSync('git diff -U200000 --no-prefix origin/release..origin/release-candidate public/locales')
     .toString()
     .split('\n')
     .filter((s) => !!s)

diff --git a/src/components/Account/__snapshots__/Account.test.tsx.snap b/src/components/Account/__snapshots__/Account.test.tsx.snap
@@ -149,7 +149,6 @@ exports[`<Account> > renders and matches snapshot 1`] = `
           <label
             for="check-box_1235_consents.marketing"
           >
-            
             Receive Marketing Emails
           </label>
         </div>

diff --git a/src/components/Animation/Animation.tsx b/src/components/Animation/Animation.tsx
@@ -6,6 +6,7 @@ type Props = {
   open?: boolean;
   duration?: number;
   delay?: number;
+  children?: React.ReactNode;
   keepMounted?: boolean;
   onOpenAnimationEnd?: () => void;
   onCloseAnimationEnd?: () => void;

diff --git a/src/components/Animation/Fade/Fade.tsx b/src/components/Animation/Fade/Fade.tsx
@@ -1,4 +1,4 @@
-import React, { CSSProperties } from 'react';
+import React, { CSSProperties, ReactNode } from 'react';
 
 import Animation, { Status } from '#components/Animation/Animation';
 
@@ -7,6 +7,7 @@ type Props = {
   open?: boolean;
   duration?: number;
   delay?: number;
+  children?: ReactNode;
   keepMounted?: boolean;
   onOpenAnimationEnd?: () => void;
   onCloseAnimationEnd?: () => void;

diff --git a/src/components/Card/Card.module.scss b/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;
 

diff --git a/src/components/Card/Card.test.tsx b/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();
+  });
 });
diff --git a/src/components/Card/Card.tsx b/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>
   );
 }
 

diff --git a/src/components/Card/__snapshots__/Card.test.tsx.snap b/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>
+`;
diff --git a/src/components/CardGrid/CardGrid.test.tsx b/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}`}
       />,
     );
-Original file line number
+Diff line change
@@ Expand Up / @@ -149,7 +149,6 @@ exports[`<Account> > renders and matches snapshot 1`] = ` @@
               <label
                 for="check-box_1235_consents.marketing"
               >
                 Receive Marketing Emails
               </label>
             </div>
@@ Expand Down @@