diff --git a/package.json b/package.json index 858ce8f44..e68682ef7 100644 --- a/package.json +++ b/package.json @@ -80,8 +80,8 @@ "@types/marked": "^4.0.7", "@types/node": "^17.0.23", "@types/payment": "^2.1.4", - "@types/react": "^18.2.6", - "@types/react-dom": "^18.2.4", + "@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", diff --git a/src/components/TileDock/TileDock.tsx b/src/components/TileDock/TileDock.tsx index eace51f56..6aad654e5 100644 --- a/src/components/TileDock/TileDock.tsx +++ b/src/components/TileDock/TileDock.tsx @@ -189,9 +189,9 @@ function TileDock({ if (frameRef.current) frameRef.current.style.transition = 'none'; setTransform(-100); - setTimeout(() => { + requestAnimationFrame(() => { if (frameRef.current) frameRef.current.style.transition = transitionBasis; - }, 0); + }); setDoAnimationReset(false); }; diff --git a/src/components/VideoLayout/VideoLayout.tsx b/src/components/VideoLayout/VideoLayout.tsx index e24b1bd3c..01257e64c 100644 --- a/src/components/VideoLayout/VideoLayout.tsx +++ b/src/components/VideoLayout/VideoLayout.tsx @@ -51,11 +51,11 @@ type VideoListProps = { type Props = { inlineLayout: boolean; player: React.ReactNode; - // children?: React.ReactNode; isLoading: boolean; accessModel: AccessModel; isLoggedIn: boolean; hasSubscription: boolean; + children?: React.ReactNode; item?: PlaylistItem; playlist?: Playlist; } & FilterProps & diff --git a/src/containers/AdyenInitialPayment/AdyenInitialPayment.tsx b/src/containers/AdyenInitialPayment/AdyenInitialPayment.tsx index a7fa22d32..3f7f06822 100644 --- a/src/containers/AdyenInitialPayment/AdyenInitialPayment.tsx +++ b/src/containers/AdyenInitialPayment/AdyenInitialPayment.tsx @@ -91,11 +91,13 @@ export default function AdyenInitialPayment({ setUpdatingOrder, type, setPayment holderNameRequired: true, }, }, - onAdditionalDetails: async (state: CoreOptions['additionalData']) => { + onAdditionalDetails: async (state: AdyenAdditionalEventData) => { try { setUpdatingOrder(true); - await finalizeAdyenPayment(orderId, state.data.details); + const data = state.data.details as number | undefined; + + await finalizeAdyenPayment(orderId, data); navigate(paymentSuccessUrl, { replace: true }); } catch (error: unknown) { diff --git a/src/containers/AdyenPaymentDetails/AdyenPaymentDetails.tsx b/src/containers/AdyenPaymentDetails/AdyenPaymentDetails.tsx index a88a163fa..3867b2d8a 100644 --- a/src/containers/AdyenPaymentDetails/AdyenPaymentDetails.tsx +++ b/src/containers/AdyenPaymentDetails/AdyenPaymentDetails.tsx @@ -120,7 +120,7 @@ export default function AdyenPaymentDetails({ setProcessing, type, setPaymentErr holderNameRequired: true, }, }, - onAdditionalDetails: async (state: CoreOptions['additionalData']) => { + onAdditionalDetails: async (state: AdyenAdditionalEventData) => { try { setProcessing(true); diff --git a/src/containers/ShelfList/ShelfList.tsx b/src/containers/ShelfList/ShelfList.tsx index eddb5213b..8063008ca 100644 --- a/src/containers/ShelfList/ShelfList.tsx +++ b/src/containers/ShelfList/ShelfList.tsx @@ -11,11 +11,12 @@ import { useAccountStore } from '#src/stores/AccountStore'; import { PersonalShelf, useConfigStore } from '#src/stores/ConfigStore'; import ShelfComponent from '#components/Shelf/Shelf'; import { mediaURL, slugify } from '#src/utils/formatting'; -import type { Content } from '#types/Config'; +import type { Content, ContentType } from '#types/Config'; import { useWatchHistoryStore } from '#src/stores/WatchHistoryStore'; import { parseAspectRatio, parseTilesDelta } from '#src/utils/collection'; import InfiniteScrollLoader from '#components/InfiniteScrollLoader/InfiniteScrollLoader'; import { testId } from '#src/utils/common'; +import type { PlaylistItem } from '#types/playlist'; const INITIAL_ROW_COUNT = 6; const LOAD_ROWS_COUNT = 4; @@ -35,7 +36,7 @@ const ShelfList = ({ rows }: Props) => { const { user, subscription } = useAccountStore(({ user, subscription }) => ({ user, subscription }), shallow); const onCardClick = useCallback( - (playlistItem, playlistId, type) => { + (playlistItem: PlaylistItem, playlistId: string | undefined, type: ContentType) => { navigate(mediaURL({ media: playlistItem, playlistId, play: type === PersonalShelf.ContinueWatching })); }, [navigate], diff --git a/src/pages/LegacySeries/LegacySeries.tsx b/src/pages/LegacySeries/LegacySeries.tsx index c2b85c542..13ad68577 100644 --- a/src/pages/LegacySeries/LegacySeries.tsx +++ b/src/pages/LegacySeries/LegacySeries.tsx @@ -146,31 +146,33 @@ const LegacySeries = () => { return ( - {pageTitle} - - - - - - {selectedItemImage && } - {selectedItemImage && } - {selectedItemImage && } - {selectedItemImage && } - - - {selectedItemImage && } - - - - - - {selectedItem.tags && - String(selectedItem.tags) - .split(',') - .map((tag: string) => )} - {seriesPlaylist && selectedItem ? ( - - ) : null} + <> + {pageTitle} + + + + + + {selectedItemImage && } + {selectedItemImage && } + {selectedItemImage && } + {selectedItemImage && } + + + {selectedItemImage && } + + + + + + {selectedItem.tags && + String(selectedItem.tags) + .split(',') + .map((tag: string) => )} + {seriesPlaylist && selectedItem ? ( + + ) : null} + { test('Account Page', () => { useAccountStore.setState(data); - mockWindowLocation('/my-account'); + mockWindowLocation('my-account'); const { container } = renderWithRouter(); expect(container).toMatchSnapshot(); @@ -85,7 +85,7 @@ describe('User Component tests', () => { test('Payments Page', () => { useAccountStore.setState(data); - mockWindowLocation('/payments'); + mockWindowLocation('payments'); const { container } = renderWithRouter(); expect(container).toMatchSnapshot(); @@ -128,9 +128,8 @@ describe('User Component tests', () => { }; }, }); - //vi.fn().mockImplementation(() => window.location).mockReturnValue('/favorites'); - // const windowMock = vi.fn().mockReturnValue(window.location).mockReturnValue('/favorites'); - mockWindowLocation('/favorites'); + + mockWindowLocation('favorites'); const { container } = renderWithRouter(); diff --git a/test/testUtils.tsx b/test/testUtils.tsx index 594c03d47..a6ae1f524 100644 --- a/test/testUtils.tsx +++ b/test/testUtils.tsx @@ -34,10 +34,13 @@ export const wrapper = ({ children }: WrapperProps) => ( const customRender = (ui: ReactElement, options?: RenderOptions) => render(ui, { wrapper, ...options }); export const mockWindowLocation = (path: string) => { - vi.stubGlobal('location', { - pathname: path, - assign: vi.fn(), - }); + const location = new URL(`https://www.jwplayer.com/${path}`) as unknown as Location; + + if ('location' in globalThis) { + // @ts-ignore + delete globalThis.location; + globalThis.location = location; + } }; export { customRender as renderWithRouter }; diff --git a/yarn.lock b/yarn.lock index 69c236d06..c7f1fa89b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2275,10 +2275,10 @@ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11" integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ== -"@types/react-dom@^18.2.4": - version "18.2.4" - resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.4.tgz#13f25bfbf4e404d26f62ac6e406591451acba9e0" - integrity sha512-G2mHoTMTL4yoydITgOGwWdWMVd8sNgyEP85xVmMKAPUBwQWm9wBPQUmvbeF4V3WBY1P7mmL4BkjQ0SqUpf1snw== +"@types/react-dom@18.2.7": + version "18.2.7" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.7.tgz#67222a08c0a6ae0a0da33c3532348277c70abb63" + integrity sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA== dependencies: "@types/react" "*" @@ -2296,28 +2296,10 @@ dependencies: "@types/react" "*" -"@types/react@*": - version "17.0.39" - resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.39.tgz#d0f4cde092502a6db00a1cded6e6bf2abb7633ce" - integrity sha512-UVavlfAxDd/AgAacMa60Azl7ygyQNRwC/DsHZmKgNvPmRR5p70AJ5Q9EAmL2NWOJmeV+vVUI4IAP7GZrN8h8Ug== - dependencies: - "@types/prop-types" "*" - "@types/scheduler" "*" - csstype "^3.0.2" - -"@types/react@^17": - version "17.0.59" - resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.59.tgz#5aa4e161a356fcb824d81f166e01bad9e82243bb" - integrity sha512-gSON5zWYIGyoBcycCE75E9+r6dCC2dHdsrVkOEiIYNU5+Q28HcBAuqvDuxHcCbMfHBHdeT5Tva/AFn3rnMKE4g== - dependencies: - "@types/prop-types" "*" - "@types/scheduler" "*" - csstype "^3.0.2" - -"@types/react@^18.2.6": - version "18.2.6" - resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.6.tgz#5cd53ee0d30ffc193b159d3516c8c8ad2f19d571" - integrity sha512-wRZClXn//zxCFW+ye/D2qY65UsYP1Fpex2YXorHc8awoNamkMZSvBxwxdYVInsHOZZd2Ppq8isnSzJL5Mpf8OA== +"@types/react@*", "@types/react@^18.2.15": + version "18.2.15" + resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.15.tgz#14792b35df676c20ec3cf595b262f8c615a73066" + integrity sha512-oEjE7TQt1fFTFSbf8kkNuc798ahTUzn3Le67/PWjE8MAfYAD/qB7O8hSTcromLFqHCt9bcdOg5GXMokzTjJ5SA== dependencies: "@types/prop-types" "*" "@types/scheduler" "*"