Adding loading state to psammead-media-player

CHANGELOG.md

@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 2.0.188 | [PR#3600](https://github.com/bbc/psammead/pull/3600) Bump version to include using new @bbc/psammead-image-placeholder |
 | 2.0.187 | [PR#3631](https://github.com/bbc/psammead/pull/3629) Update codeowners |
 | 2.0.186 | [PR#3626](https://github.com/bbc/psammead/pull/3626) Talos - Bump Dependencies - @bbc/psammead-brand, @bbc/psammead-bulleted-list, @bbc/psammead-bulletin, @bbc/psammead-byline, @bbc/psammead-caption, @bbc/psammead-consent-banner, @bbc/psammead-copyright, @bbc/psammead-embed-error, @bbc/psammead-figure, @bbc/psammead-grid, @bbc/psammead-heading-index, @bbc/psammead-headings, @bbc/psammead-media-indicator, @bbc/psammead-most-read, @bbc/psammead-navigation, @bbc/psammead-paragraph, @bbc/psammead-play-button, @bbc/psammead-radio-schedule, @bbc/psammead-script-link, @bbc/psammead-section-label, @bbc/psammead-sitewide-links, @bbc/psammead-social-embed, @bbc/psammead-story-promo, @bbc/psammead-story-promo-list, @bbc/psammead-storybook-helpers, @bbc/psammead-timestamp, @bbc/psammead-timestamp-container, @bbc/psammead-useful-links |
 | 2.0.185 | [PR#3629](https://github.com/bbc/psammead/pull/3629) Talos - Bump Dependencies - @bbc/psammead-embed-error, @bbc/psammead-navigation |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead",
-  "version": "2.0.187",
+  "version": "2.0.188",
   "description": "Core Components Library Developed & Maintained By The Articles and Reach & Languages Team",
   "main": "index.js",
   "private": true,
@@ -68,7 +68,7 @@
     "@bbc/psammead-heading-index": "^1.0.2",
     "@bbc/psammead-headings": "^3.1.33",
     "@bbc/psammead-image": "^1.2.4",
-    "@bbc/psammead-image-placeholder": "^1.2.36",
+    "@bbc/psammead-image-placeholder": "^1.2.41",
     "@bbc/psammead-inline-link": "^1.3.22",
     "@bbc/psammead-live-label": "^1.0.0",
     "@bbc/psammead-locales": "^4.1.10",

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

@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version       | Description                                                                                                                  |
 | ------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| 2.8.0 | [PR#3600](https://github.com/bbc/psammead/pull/3600) Implementing dark mode compatible placeholder with media player |
 | 2.7.16 | [PR#3626](https://github.com/bbc/psammead/pull/3626) Talos - Bump Dependencies - @bbc/psammead-play-button |
 | 2.7.15 | [PR#3613](https://github.com/bbc/psammead/pull/3613) Talos - Bump Dependencies - @bbc/psammead-assets |
 | 2.7.14 | [PR#3605](https://github.com/bbc/psammead/pull/3605) Talos - Bump Dependencies - @bbc/psammead-play-button |

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

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-media-player",
-  "version": "2.7.16",
+  "version": "2.8.0",
   "description": "Provides a media player with optional placeholder",
   "main": "dist/index.js",
   "module": "esm/index.js",
@@ -29,6 +29,7 @@
     "styled-components": "^4.3.2"
   },
   "dependencies": {
+    "@bbc/psammead-image-placeholder": "^1.2.41",
     "@bbc/psammead-assets": "^2.14.1",
     "@bbc/psammead-image": "^1.2.4",
     "@bbc/psammead-play-button": "^1.1.19"

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

@@ -2,6 +2,7 @@
 
 exports[`Media Player: Canonical should render an iframe 1`] = `
 .c0 {
+  z-index: 1;
   border: 0;
   left: 0;
   overflow: hidden;

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { string, bool } from 'prop-types';
 import styled from 'styled-components';
+import ImagePlaceholder from '@bbc/psammead-image-placeholder';
 import Message from '../Message';
 
 const Canonical = ({
@@ -11,14 +12,25 @@ const Canonical = ({
   service,
   noJsMessage,
   showPlaceholder,
+  showLoadingImage,
+  darkMode,
 }) => {
   const backgroundStyle = `
     background-image: url(${placeholderSrc});
     background-repeat: no-repeat;
     background-size: contain;
   `;
 
+  const LoadingImageWrapper = styled.div`
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  `;
+
   const StyledIframe = styled.iframe`
+    z-index: 1;
     border: 0;
     left: 0;
     overflow: hidden;
@@ -39,6 +51,11 @@ const Canonical = ({
         gesture="media"
         allowFullScreen
       />
+      {showLoadingImage && (
+        <LoadingImageWrapper>
+          <ImagePlaceholder ratio={56.25} darkMode={darkMode} />
+        </LoadingImageWrapper>
+      )}
       <noscript>
         <Message
           service={service}
@@ -59,6 +76,8 @@ Canonical.propTypes = {
   service: string.isRequired,
   noJsMessage: string.isRequired,
   showPlaceholder: bool.isRequired,
+  showLoadingImage: bool.isRequired,
+  darkMode: bool.isRequired,
 };
 
 Canonical.defaultProps = {

packages/components/psammead-media-player/src/__snapshots__/index.test.jsx.snap

@@ -733,6 +733,7 @@ exports[`Media Player: Canonical Entry renders an iframe when showPlaceholder is
 }
 
 .c1 {
+  z-index: 1;
   border: 0;
   left: 0;
   overflow: hidden;
@@ -771,6 +772,7 @@ exports[`Media Player: Canonical Entry renders the audio skin 1`] = `
 }
 
 .c1 {
+  z-index: 1;
   border: 0;
   left: 0;
   overflow: hidden;
@@ -1032,3 +1034,71 @@ exports[`Media Player: Canonical Entry renders with no-js styles when noJsClassN
   </div>
 </div>
 `;
+
+exports[`Media Player: Canonical Entry shows a loading image before the player is ready when showLoadingImage is true 1`] = `
+.c3 {
+  position: relative;
+  height: 0;
+  overflow: hidden;
+  background-color: #ECEAE7;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: 30%;
+  padding-bottom: 56.25%;
+  width: 100%;
+  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI0NzkiIGhlaWdodD0iMTM2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgZmlsbD0iI0Q1RDBDRCI+PGc+PHBhdGggZD0iTTQ0OS41NTYgOTEuNTUzbC0yLjMxIDEuNDFjLTExLjE2NyA2LjgxOC0yMy4zMTMgMTAuNDc0LTM0LjM0NiAxMC40Ny0yMy42MS0uMDktMzkuMTYzLTE0LjA4My0zOS4yMjctMzQuNDUzLjAzLTE5LjkxOCAxNi4yNy0zNC42NjMgMzguNjMzLTM0LjcxOCAxMS4zODcuMDEgMjEuNzAzIDIuOTU0IDMzLjk2MiA5LjY3MmwyLjI1MSAxLjI0di0xOC4xOWwtLjk2Mi0uMzc3Yy0xMy44MjQtNS40NTgtMjQuNTMtNy44OS0zNS4xMDMtNy44ODQtMTYuMzQ2LS4wMDYtMzAuNTMzIDUuMzk0LTQwLjYzNyAxNC41NTctMTAuMTA1IDkuMTYzLTE2LjEwNiAyMi4xMDItMTYuMDk5IDM2Ljk1My4wMDggMTAuMzQ4IDQuMjc5IDIyLjQ4IDEzLjQyIDMyLjEwNSA5LjEyMSA5LjYyOCAyMy4xNjUgMTYuNjQ4IDQyLjQzIDE2LjYzOWguMDYzYzE1Ljk4IDAgMjcuMDYyLTMuNTYzIDM3LjA3NC04LjQ5MmwuODUxLS40MTRWOTEuNTUzek0zMzQgMTM1LjY5N2gxNDQuMTk1VjBIMzM0djEzNS42OTd6Ii8+PHBhdGggZD0iTTI3Ni45MzcgODkuOTY4Yy4wNDEtMTIuMzMtOC4xNzEtMjEuNjk2LTIxLjMwOC0yNS4zIDMuNTQ0LTEuODA5IDYuMzUtNC4wMjMgOC40MDQtNi43MjcgMi43NS0zLjYyMiA0LjA2MS04LjA2NCA0LjA0Ni0xMy4yMzUuMDE1LTYuMzU5LTIuNDg2LTEyLjgzOS03Ljg1OC0xNy42ODctNS4zNzItNC44NDctMTMuNTI2LTcuOTk3LTI0LjY1NC03Ljk5MUgyMDQuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMTY3IDEzNS42OThoMTQ0LjE5N1YwSDE2N3YxMzUuNjk3eiIvPjxwYXRoIGQ9Ik0xMDkuOTM3IDg5Ljk2OGMuMDQxLTEyLjMzLTguMTcxLTIxLjY5Ni0yMS4zMDgtMjUuMyAzLjU0NC0xLjgwOSA2LjM1LTQuMDIzIDguNDA0LTYuNzI3IDIuNzUtMy42MjIgNC4wNjEtOC4wNjQgNC4wNDYtMTMuMjM1LjAxNS02LjM1OS0yLjQ4Ni0xMi44MzktNy44NTgtMTcuNjg3LTUuMzcyLTQuODQ3LTEzLjUyNi03Ljk5Ny0yNC42NTQtNy45OTFIMzcuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMCAxMzUuNjk4aDE0NC4xOTdWMEgwdjEzNS42OTd6Ii8+PHBhdGggZD0iTTI1OC42NjIgODguMTk4Yy0uMDEzIDMuMjI5LTEuMDA3IDYuNDc1LTMuODk2IDkuMDExLTIuODg0IDIuNTM3LTcuODczIDQuNDYzLTE2LjEzMyA0LjQ2M0gyMjJWNzVoMTUuODkzYzcuNDExIDAgMTIuNjcgMS41MDIgMTUuOTY1IDMuODUgMy4yODkgMi4zNjIgNC43NzYgNS40NjMgNC44MDQgOS4zNDgiLz48cGF0aCBkPSJNOTEuNjYyIDg4LjE5OGMtLjAxMyAzLjIyOS0xLjAwNyA2LjQ3NS0zLjg5NiA5LjAxMS0yLjg4NCAyLjUzNy03Ljg3NCA0LjQ2My0xNi4xMzMgNC40NjNINTVWNzVoMTUuODkyYzcuNDEyIDAgMTIuNjcyIDEuNTAyIDE1Ljk2NiAzLjg1IDMuMjg5IDIuMzYyIDQuNzc2IDUuNDYzIDQuODA0IDkuMzQ4Ii8+PHBhdGggZD0iTTI0NS4xODYgNTUuNzljMy4wOTYtMi4yMzcgNC41OS01LjM4NiA0LjYxMy0xMC4xMjQtLjAxNS0zLjI1LS45NDMtNi4wMzMtMy4yODEtOC4xMTEtMi4zNDYtMi4wNzgtNi4zMy0zLjU1NS0xMi43NTQtMy41NTVIMjIydjI1LjI3NWg4LjA3NmM2Ljk4OC4wMDQgMTEuOTk4LTEuMjQzIDE1LjExLTMuNDg2Ii8+PHBhdGggZD0iTTc4LjE4NiA1NS43OWMzLjA5Ni0yLjIzNyA0LjU5LTUuMzg2IDQuNjEzLTEwLjEyNC0uMDE1LTMuMjUtLjk0My02LjAzMy0zLjI4Mi04LjExMUM3Ny4xNzIgMzUuNDc3IDczLjE4OCAzNCA2Ni43NjQgMzRINTV2MjUuMjc1aDguMDc2YzYuOTg4LjAwNCAxMS45OTgtMS4yNDMgMTUuMTEtMy40ODYiLz48L2c+PC9nPjwvZz48L3N2Zz4K);
+}
+
+.c0 {
+  padding-top: 56.25%;
+  position: relative;
+  overflow: hidden;
+  margin-bottom: 1rem;
+}
+
+.c2 {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.c1 {
+  z-index: 1;
+  border: 0;
+  left: 0;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+@media (min-width:63rem) {
+  .c0 {
+    margin-bottom: 1.5rem;
+  }
+}
+
+<div
+  class="c0"
+>
+  <iframe
+    allow="autoplay; fullscreen"
+    allowfullscreen=""
+    class="c1"
+    scrolling="no"
+    src="http://foo.bar/iframe"
+    title="Media player"
+  />
+  <div
+    class="c2"
+  >
+    <div
+      class="c3"
+    />
+  </div>
+  <noscript />
+</div>
+`;

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

@@ -48,6 +48,8 @@ const CanonicalMediaPlayerComponent = ({
   mediaInfo,
   noJsClassName,
   noJsMessage,
+  showLoadingImage,
+  darkMode,
 }) => {
   const [placeholderActive, setPlaceholderActive] = useState(showPlaceholder);
   const handlePlaceholderClick = () => setPlaceholderActive(false);
@@ -76,6 +78,8 @@ const CanonicalMediaPlayerComponent = ({
           placeholderSrc={placeholderSrc}
           service={service}
           noJsMessage={noJsMessage}
+          showLoadingImage={showLoadingImage}
+          darkMode={darkMode}
         />
       )}
     </StyledContainer>
@@ -137,6 +141,8 @@ CanonicalMediaPlayerComponent.propTypes = {
     type: oneOf(['video', 'audio']),
     guidanceMessage: string,
   }),
+  showLoadingImage: bool,
+  darkMode: bool,
 };
 
 CanonicalMediaPlayerComponent.defaultProps = {
@@ -147,6 +153,8 @@ CanonicalMediaPlayerComponent.defaultProps = {
   placeholderSrcset: null,
   noJsClassName: null,
   mediaInfo: {},
+  showLoadingImage: false,
+  darkMode: false,
 };
 
 MediaMessage.propTypes = {

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
+import { boolean, withKnobs } from '@storybook/addon-knobs';
 import { CanonicalMediaPlayer, AmpMediaPlayer } from '.';
 import { ampDecorator } from '../../../../.storybook/config';
 import notes from '../README.md';
@@ -12,7 +13,7 @@ const withDuration = {
 
 storiesOf('Components|Media Player', module)
   .add(
-    'Default',
+    'Articles Canonical',
     () => (
       <CanonicalMediaPlayer
         src="https://www.test.bbc.co.uk/ws/av-embeds/articles/c3wmq4d1y3wo/p01k6msp/en"
@@ -24,6 +25,28 @@ storiesOf('Components|Media Player', module)
     ),
     { notes, knobs: { escapeHTML: false } },
   )
+  .addDecorator(withKnobs)
+  .add(
+    'MAP Canonical',
+    () => (
+      <CanonicalMediaPlayer
+        src="https://www.test.bbc.com/ws/av-embeds/cps/pidgin/23248703/p01kx42v/pcm"
+        showPlaceholder={false}
+        service="pidgin"
+        mediaInfo={{
+          title: 'alt-text world service clip',
+          type: 'video',
+          ...withDuration,
+        }}
+        showLoadingImage
+        darkMode={boolean('Dark mode', false)}
+        title="Media player"
+        noJsMessage="Dem no support media player for your device"
+        noJsClassName="no-js"
+      />
+    ),
+    { notes, knobs: { escapeHTML: false } },
+  )
   .add(
     'Guidance',
     () => (

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

@@ -117,6 +117,24 @@ describe('Media Player: Canonical Entry', () => {
     />,
   );
 
+  shouldMatchSnapshot(
+    'shows a loading image before the player is ready when showLoadingImage is true',
+    <CanonicalMediaPlayer
+      src="http://foo.bar/iframe"
+      showPlaceholder={false}
+      service="pidgin"
+      mediaInfo={{
+        title: 'alt-text world service clip',
+        type: 'video',
+        ...mediaInfo,
+      }}
+      showLoadingImage
+      title="Media player"
+      noJsMessage="Dem no support media player for your device"
+      noJsClassName="no-js"
+    />,
+  );
+
   shouldMatchSnapshot(
     'renders with no-js styles when noJsClassName prop is used',
     <CanonicalMediaPlayer