diff --git a/packages/components/psammead-media-player/CHANGELOG.md b/packages/components/psammead-media-player/CHANGELOG.md index 7cd0937612..f8b84d767b 100644 --- a/packages/components/psammead-media-player/CHANGELOG.md +++ b/packages/components/psammead-media-player/CHANGELOG.md @@ -3,6 +3,7 @@ | Version | Description | | ------------- | ---------------------------------------------------------------------------------------------------------------------------- | +| 2.7.5 | [PR#3238](https://github.com/bbc/psammead/pull/3238) Limit unnecessary re-rendering of canonical media player | | 2.7.4 | [PR#3205](https://github.com/bbc/psammead/pull/3205) Removed isRequired from mediaInfo prop as not always required | | 2.7.3 | [PR#3151](https://github.com/bbc/psammead/pull/3151) Talos - Bump Dependencies - @bbc/psammead-play-button | | 2.7.2 | [PR#3113](https://github.com/bbc/psammead/pull/3113) Added bottom margin padding for live radio audio player | diff --git a/packages/components/psammead-media-player/package-lock.json b/packages/components/psammead-media-player/package-lock.json index 3c9e2d953e..a08d7e2f2e 100644 --- a/packages/components/psammead-media-player/package-lock.json +++ b/packages/components/psammead-media-player/package-lock.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-media-player", - "version": "2.7.4", + "version": "2.7.5", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/packages/components/psammead-media-player/package.json b/packages/components/psammead-media-player/package.json index db84deb4c6..43585ce7f1 100644 --- a/packages/components/psammead-media-player/package.json +++ b/packages/components/psammead-media-player/package.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-media-player", - "version": "2.7.4", + "version": "2.7.5", "description": "Provides a media player with optional placeholder", "main": "dist/index.js", "module": "esm/index.js", diff --git a/packages/components/psammead-media-player/src/index.jsx b/packages/components/psammead-media-player/src/index.jsx index 223c593316..92e44a1656 100644 --- a/packages/components/psammead-media-player/src/index.jsx +++ b/packages/components/psammead-media-player/src/index.jsx @@ -1,6 +1,7 @@ -import React, { useState } from 'react'; +import React, { useState, memo } from 'react'; import styled from 'styled-components'; import { string, bool, oneOf, shape } from 'prop-types'; +import equals from 'ramda/src/equals'; import { GEL_SPACING_DBL, GEL_SPACING_QUAD, @@ -30,7 +31,7 @@ const StyledAudioContainer = styled.div` } `; -export const CanonicalMediaPlayer = ({ +const CanonicalMediaPlayerComponent = ({ showPlaceholder, placeholderSrc, placeholderSrcset, @@ -76,6 +77,11 @@ export const CanonicalMediaPlayer = ({ ); }; +// Component receives a "mediaInfo" object prop - this can cause unnecessary +// re-renders when the object reference changes, but the content is the same. +// We only rerender if the prevProps and nextProps fail deep equality check +export const CanonicalMediaPlayer = memo(CanonicalMediaPlayerComponent, equals); + export const AmpMediaPlayer = ({ placeholderSrcset, placeholderSrc, @@ -107,7 +113,7 @@ export const AmpMediaPlayer = ({ export const MediaMessage = Message; -CanonicalMediaPlayer.propTypes = { +CanonicalMediaPlayerComponent.propTypes = { placeholderSrc: string, placeholderSrcset: string, portrait: bool, @@ -128,7 +134,7 @@ CanonicalMediaPlayer.propTypes = { }), }; -CanonicalMediaPlayer.defaultProps = { +CanonicalMediaPlayerComponent.defaultProps = { portrait: false, showPlaceholder: true, skin: 'classic',