diff --git a/packages/components/psammead-media-player/CHANGELOG.md b/packages/components/psammead-media-player/CHANGELOG.md index 63af0a7b84..f536d76088 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.2 | [PR#3113](https://github.com/bbc/psammead/pull/3113) Added bottom margin padding for live radio audio player | | 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 | diff --git a/packages/components/psammead-media-player/package-lock.json b/packages/components/psammead-media-player/package-lock.json index 6006991ccc..d75ae551cf 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.1", + "version": "2.7.2", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/packages/components/psammead-media-player/package.json b/packages/components/psammead-media-player/package.json index 9743207b0d..8a3f6bbc13 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.1", + "version": "2.7.2", "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/__snapshots__/index.test.jsx.snap b/packages/components/psammead-media-player/src/__snapshots__/index.test.jsx.snap index 53c49fd52e..8ad736c5bf 100644 --- a/packages/components/psammead-media-player/src/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-media-player/src/__snapshots__/index.test.jsx.snap @@ -106,6 +106,13 @@ exports[`Media Player: AMP Entry renders the audio skin 1`] = ` height: 165px; position: relative; overflow: hidden; + margin-bottom: 1rem; +} + +@media (min-width:63rem) { + .c0 { + margin-bottom: 2rem; + } }
@@ -720,6 +727,7 @@ exports[`Media Player: Canonical Entry renders the audio skin 1`] = ` height: 165px; position: relative; overflow: hidden; + margin-bottom: 1rem; } .c1 { @@ -732,6 +740,12 @@ exports[`Media Player: Canonical Entry renders the audio skin 1`] = ` height: 100%; } +@media (min-width:63rem) { + .c0 { + margin-bottom: 2rem; + } +} +
diff --git a/packages/components/psammead-media-player/src/index.jsx b/packages/components/psammead-media-player/src/index.jsx index 1d2e801ab9..beb4a2ae26 100644 --- a/packages/components/psammead-media-player/src/index.jsx +++ b/packages/components/psammead-media-player/src/index.jsx @@ -1,6 +1,11 @@ import React, { useState } from 'react'; import styled from 'styled-components'; import { string, bool, oneOf, shape } from 'prop-types'; +import { + GEL_SPACING_DBL, + GEL_SPACING_QUAD, +} from '@bbc/gel-foundations/spacings'; +import { GEL_GROUP_4_SCREEN_WIDTH_MIN } from '@bbc/gel-foundations/breakpoints'; import Placeholder from './Placeholder'; import Amp from './Amp'; import Canonical from './Canonical'; @@ -18,6 +23,11 @@ const StyledAudioContainer = styled.div` height: 165px; position: relative; overflow: hidden; + margin-bottom: ${GEL_SPACING_DBL}; + + @media (min-width: ${GEL_GROUP_4_SCREEN_WIDTH_MIN}) { + margin-bottom: ${GEL_SPACING_QUAD}; + } `; export const CanonicalMediaPlayer = ({