From da09157bc3aefeddddfc6e6d6147b15e4dc6d08b Mon Sep 17 00:00:00 2001
From: Rebecca McGinn <mcginr02@mc-n362841.local>
Date: Tue, 4 Feb 2020 17:15:51 +0000
Subject: [PATCH 1/2] Refactored Message component in order to support AV
 streams expired message

---
 .../psammead-media-player/src/Amp/index.jsx   |  6 +++---
 .../src/Canonical/index.jsx                   |  6 +++---
 .../src/{MediaMessage => Message}/index.jsx   | 19 +++++++------------
 .../{MediaMessage => Message}/index.test.jsx  | 10 +++++-----
 .../psammead-media-player/src/index.jsx       | 15 +++++++++++++++
 5 files changed, 33 insertions(+), 23 deletions(-)
 rename packages/components/psammead-media-player/src/{MediaMessage => Message}/index.jsx (86%)
 rename packages/components/psammead-media-player/src/{MediaMessage => Message}/index.test.jsx (67%)

diff --git a/packages/components/psammead-media-player/src/Amp/index.jsx b/packages/components/psammead-media-player/src/Amp/index.jsx
index 7d352f26d0..c02b8187fe 100644
--- a/packages/components/psammead-media-player/src/Amp/index.jsx
+++ b/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}
           />
diff --git a/packages/components/psammead-media-player/src/Canonical/index.jsx b/packages/components/psammead-media-player/src/Canonical/index.jsx
index 76fb455007..3007500977 100644
--- a/packages/components/psammead-media-player/src/Canonical/index.jsx
+++ b/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}
         />
diff --git a/packages/components/psammead-media-player/src/MediaMessage/index.jsx b/packages/components/psammead-media-player/src/Message/index.jsx
similarity index 86%
rename from packages/components/psammead-media-player/src/MediaMessage/index.jsx
rename to packages/components/psammead-media-player/src/Message/index.jsx
index 9c89109d50..4ab2d81b38 100644
--- a/packages/components/psammead-media-player/src/MediaMessage/index.jsx
+++ b/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;
diff --git a/packages/components/psammead-media-player/src/MediaMessage/index.test.jsx b/packages/components/psammead-media-player/src/Message/index.test.jsx
similarity index 67%
rename from packages/components/psammead-media-player/src/MediaMessage/index.test.jsx
rename to packages/components/psammead-media-player/src/Message/index.test.jsx
index a5398bab69..52f869493b 100644
--- a/packages/components/psammead-media-player/src/MediaMessage/index.test.jsx
+++ b/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();
 });
diff --git a/packages/components/psammead-media-player/src/index.jsx b/packages/components/psammead-media-player/src/index.jsx
index e09427f769..1d2e801ab9 100644
--- a/packages/components/psammead-media-player/src/index.jsx
+++ b/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,

From 79baf81e59b787b26a0fb16eb5735ab366086845 Mon Sep 17 00:00:00 2001
From: Rebecca McGinn <mcginr02@mc-n362841.local>
Date: Tue, 4 Feb 2020 18:12:00 +0000
Subject: [PATCH 2/2] Updated version and changelog

---
 packages/components/psammead-media-player/CHANGELOG.md      | 1 +
 packages/components/psammead-media-player/package-lock.json | 2 +-
 packages/components/psammead-media-player/package.json      | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/components/psammead-media-player/CHANGELOG.md b/packages/components/psammead-media-player/CHANGELOG.md
index e1ea7fa9d9..63af0a7b84 100644
--- a/packages/components/psammead-media-player/CHANGELOG.md
+++ b/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 |
diff --git a/packages/components/psammead-media-player/package-lock.json b/packages/components/psammead-media-player/package-lock.json
index 590b7e6feb..6006991ccc 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.0",
+  "version": "2.7.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/packages/components/psammead-media-player/package.json b/packages/components/psammead-media-player/package.json
index e6a66a46bb..9743207b0d 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.0",
+  "version": "2.7.1",
   "description": "Provides a media player with optional placeholder",
   "main": "dist/index.js",
   "module": "esm/index.js",