Merge pull request #3060 from bbc/MediaMessageRefactor

Refactored Message component to support AV streams expired message

packages/components/psammead-media-player/CHANGELOG.md

@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version       | Description                                                                                                                  |
 | ------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| 2.7.1 | [PR#3060](https://github.com/bbc/psammead/pull/3060) Refactored Message component to display message for Expired AV Stream  |
 | 2.7.0 | [PR#3033](https://github.com/bbc/psammead/pull/3033) Refactor for No JS Canonical and AMP Media Player |
 | 2.6.4 | [PR#3033](https://github.com/bbc/psammead/pull/3033) Talos - Bump Dependencies - @bbc/psammead-play-button |
 | 2.6.3 | [PR#3030](https://github.com/bbc/psammead/pull/3030) Talos - Bump Dependencies - @bbc/psammead-assets |

packages/components/psammead-media-player/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-media-player",
-  "version": "2.7.0",
+  "version": "2.7.1",
   "description": "Provides a media player with optional placeholder",
   "main": "dist/index.js",
   "module": "esm/index.js",

packages/components/psammead-media-player/src/Amp/index.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { string, number } from 'prop-types';
 import Helmet from 'react-helmet';
 import { AmpImg } from '@bbc/psammead-image';
-import MediaMessage from '../MediaMessage';
+import Message from '../Message';
 
 const AmpHead = () => (
   <Helmet>
@@ -46,9 +46,9 @@ const AmpMediaPlayer = ({
           width={width}
         />
         <noscript>
-          <MediaMessage
+          <Message
             service={service}
-            noJsMessage={noJsMessage}
+            message={noJsMessage}
             placeholderSrc={placeholderSrc}
             placeholderSrcset={placeholderSrcset}
           />

packages/components/psammead-media-player/src/Canonical/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { string, bool } from 'prop-types';
 import styled from 'styled-components';
-import MediaMessage from '../MediaMessage';
+import Message from '../Message';
 
 const Canonical = ({
   src,
@@ -40,9 +40,9 @@ const Canonical = ({
         allowFullScreen
       />
       <noscript>
-        <MediaMessage
+        <Message
           service={service}
-          noJsMessage={noJsMessage}
+          message={noJsMessage}
           placeholderSrc={placeholderSrc}
           placeholderSrcset={placeholderSrcset}
         />

packages/components/psammead-media-player/src/MediaMessage/index.jsx → packages/components/psammead-media-player/src/Message/index.jsx

@@ -34,7 +34,7 @@ const MessageWrapper = styled.div`
   }
 `;
 
-const Message = styled.strong`
+const StyledMessage = styled.strong`
   display: block;
   font-weight: normal;
   bottom: 0;
@@ -49,12 +49,7 @@ const Message = styled.strong`
   }
 `;
 
-const MediaMessage = ({
-  service,
-  noJsMessage,
-  placeholderSrc,
-  placeholderSrcset,
-}) => (
+const Message = ({ service, message, placeholderSrc, placeholderSrcset }) => (
   <StyledWrapper>
     {placeholderSrc && (
       <Image
@@ -65,21 +60,21 @@ const MediaMessage = ({
       />
     )}
     <MessageWrapper service={service}>
-      <Message>{noJsMessage}</Message>
+      <StyledMessage>{message}</StyledMessage>
     </MessageWrapper>
   </StyledWrapper>
 );
 
-MediaMessage.propTypes = {
+Message.propTypes = {
   service: string.isRequired,
-  noJsMessage: string.isRequired,
+  message: string.isRequired,
   placeholderSrcset: string,
   placeholderSrc: string,
 };
 
-MediaMessage.defaultProps = {
+Message.defaultProps = {
   placeholderSrcset: '',
   placeholderSrc: '',
 };
 
-export default MediaMessage;
+export default Message;

packages/components/psammead-media-player/src/MediaMessage/index.test.jsx → packages/components/psammead-media-player/src/Message/index.test.jsx

@@ -1,19 +1,19 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import MediaMessage from './index';
+import Message from './index';
 import '@testing-library/jest-dom/extend-expect';
 
 it('should display the media message', () => {
   const { getByText } = render(
-    <MediaMessage
+    <Message
       service="news"
-      noJsMessage="Please enable Javascript or try a different browser"
+      message="Please enable Javascript or try a different browser"
       placeholderSrc="http://foo.bar/placeholder.png"
       placeholderSrcset="http://foo.bar/placeholder.png"
     />,
   );
-  const mediaMessage = getByText(
+  const message = getByText(
     'Please enable Javascript or try a different browser',
   );
-  expect(mediaMessage).toBeInTheDocument();
+  expect(message).toBeInTheDocument();
 });

packages/components/psammead-media-player/src/index.jsx

@@ -4,6 +4,7 @@ import { string, bool, oneOf, shape } from 'prop-types';
 import Placeholder from './Placeholder';
 import Amp from './Amp';
 import Canonical from './Canonical';
+import Message from './Message';
 
 const landscapeRatio = '56.25%'; // (9/16)*100 = 16:9
 const portraitRatio = '177.78%'; // (16/9)*100 = 9:16
@@ -94,6 +95,8 @@ export const AmpMediaPlayer = ({
   );
 };
 
+export const MediaMessage = Message;
+
 CanonicalMediaPlayer.propTypes = {
   placeholderSrc: string,
   placeholderSrcset: string,
@@ -124,6 +127,18 @@ CanonicalMediaPlayer.defaultProps = {
   noJsClassName: null,
 };
 
+MediaMessage.propTypes = {
+  service: string.isRequired,
+  message: string.isRequired,
+  placeholderSrc: string,
+  placeholderSrcset: string,
+};
+
+MediaMessage.defaultProps = {
+  placeholderSrc: null,
+  placeholderSrcset: null,
+};
+
 AmpMediaPlayer.propTypes = {
   placeholderSrc: string.isRequired,
   placeholderSrcset: string,