From 9e038753d89de4561c3c68466efb3a9fc5cc9400 Mon Sep 17 00:00:00 2001 From: RayNjeri Date: Mon, 4 Nov 2019 15:25:14 +0300 Subject: [PATCH 01/15] Update @psammead-media-player's documentation Signed-off-by: RayNjeri --- packages/components/psammead-media-player/README.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/components/psammead-media-player/README.md b/packages/components/psammead-media-player/README.md index b74932c95f..2569598118 100644 --- a/packages/components/psammead-media-player/README.md +++ b/packages/components/psammead-media-player/README.md @@ -24,11 +24,13 @@ This component to be used at any point on the page, specifically when a media pl | `placeholderSrc` | string | No | `null` | `http://foobar.com/placeholder.png` | | `placeholderSrcset` | string | No | - | `"https://bbc.com/300/cat.jpg 300w, https://bbc.com/450/cat.jpg 450w, https://bbc.com/600/cat.jpg 600w"` | | `portrait` | boolean | No | `false` | `true` | +| `mediaInfo` | object | Yes | - | `{ title: 'A vertical video pretending to be a cat title',duration: '0:11',durationSpoken: '0,11',datetime: 'PT11S',type: 'video' }`| The `src` prop is required, as it tells the component what page it needs to embed. The `placeholderSrcset` prop is not required, as it allows image responsiveness and optimization depending on the size of the screen. The `title` prop is required for accessibility of the embedded iframe. The `portrait` prop is not required, and defaults to `false`. This is to support portrait video content in the future. +The `mediaInfo` prop is required, as it shows info regarding the media such as title, duration, durationSpoken and type of media either Video or Audio The `showPlaceholder` boolean prop is also not required, and defaults to `true`. Assuming `showPlaceholder` is `true`, the `placeholderSrc` will be what image to display as the placeholder. @@ -49,7 +51,7 @@ The `placeholderSrc` prop is required for AMP, as in order to have the component ```js import { CanonicalMediaPlayer } from '@bbc/psammead-media-player'; -const Container = ({ src, title, portrait, showPlaceholder, placeholderSrc }) => ( +const Container = ({ src, title, portrait, showPlaceholder, placeholderSrc, placeholderSrcset, mediaInfo }) => ( placeholderSrc={placeholderSrc} placeholderSrcset={placeholderSrcset} showPlaceholder={showPlaceholder} + mediaInfo={mediaInfo} /> ) ``` @@ -65,7 +68,7 @@ const Container = ({ src, title, portrait, showPlaceholder, placeholderSrc }) => ```js import { AmpMediaPlayer } from '@bbc/psammead-media-player'; -const Container = ({ src, title, portrait, placeholderSrc }) => ( +const Container = ({ src, title, portrait, placeholderSrc, placeholderSrcset}) => ( Date: Mon, 4 Nov 2019 16:46:05 +0300 Subject: [PATCH 02/15] Update README Signed-off-by: RayNjeri --- packages/components/psammead-media-player/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/psammead-media-player/README.md b/packages/components/psammead-media-player/README.md index 0b09e5ff28..eaa25527b0 100644 --- a/packages/components/psammead-media-player/README.md +++ b/packages/components/psammead-media-player/README.md @@ -72,7 +72,7 @@ const Container = ({ src, title, portrait, showPlaceholder, placeholderSrc, plac ```js import { AmpMediaPlayer } from '@bbc/psammead-media-player'; -const Container = ({ src, title, portrait, placeholderSrc, placeholderSrcset}) => ( +const Container = ({ src, title, portrait, placeholderSrc,height, width, placeholderSrcset}) => ( Date: Mon, 4 Nov 2019 18:59:21 +0300 Subject: [PATCH 03/15] Add table for mediaInfo args Signed-off-by: RayNjeri --- packages/components/psammead-media-player/README.md | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/components/psammead-media-player/README.md b/packages/components/psammead-media-player/README.md index eaa25527b0..5c3d27df86 100644 --- a/packages/components/psammead-media-player/README.md +++ b/packages/components/psammead-media-player/README.md @@ -30,9 +30,18 @@ The `src` prop is required, as it tells the component what page it needs to embe The `placeholderSrcset` prop is not required, as it allows image responsiveness and optimization depending on the size of the screen. The `title` prop is required for accessibility of the embedded iframe. The `portrait` prop is not required, and defaults to `false`. This is to support portrait video content in the future. -The `mediaInfo` prop is required, as it shows info regarding the media such as title, duration, durationSpoken and type of media either Video or Audio The `showPlaceholder` boolean prop is also not required, and defaults to `true`. Assuming `showPlaceholder` is `true`, the `placeholderSrc` will be what image to display as the placeholder. +The `mediaInfo` prop is required, and has the following properties + +| Argument | Type | Required | Default | Example | +|-----------|---------------------|----------|---------|-----------------| +| `title` | string | Yes | - | `"A vertical video pretending to be a cat title"` | +| `datetime` | string | No| - | `"PT11S"` | +| `duration` | string| No | - | `"0,11"` | +| `durationSpoken` | string | No | - | `"0,11"` | +| `type` | function | No | - | `"video"` | +| `guidanceMessage` | string | No | - | `"May contain strong language,sexual or violent content that may offend"` | ### AmpMediaPlayer From 233c482e4dc699972293eb01c3838fa93b1ee2e7 Mon Sep 17 00:00:00 2001 From: RayNjeri Date: Tue, 5 Nov 2019 07:37:23 +0300 Subject: [PATCH 04/15] Update media-player documentation Signed-off-by: RayNjeri --- .../components/psammead-media-player/README.md | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/packages/components/psammead-media-player/README.md b/packages/components/psammead-media-player/README.md index 5c3d27df86..d61e8af7c4 100644 --- a/packages/components/psammead-media-player/README.md +++ b/packages/components/psammead-media-player/README.md @@ -32,15 +32,18 @@ The `title` prop is required for accessibility of the embedded iframe. The `portrait` prop is not required, and defaults to `false`. This is to support portrait video content in the future. The `showPlaceholder` boolean prop is also not required, and defaults to `true`. Assuming `showPlaceholder` is `true`, the `placeholderSrc` will be what image to display as the placeholder. + +## mediaInfo + The `mediaInfo` prop is required, and has the following properties | Argument | Type | Required | Default | Example | |-----------|---------------------|----------|---------|-----------------| | `title` | string | Yes | - | `"A vertical video pretending to be a cat title"` | | `datetime` | string | No| - | `"PT11S"` | -| `duration` | string| No | - | `"0,11"` | -| `durationSpoken` | string | No | - | `"0,11"` | -| `type` | function | No | - | `"video"` | +| `duration` | string| No | - | `"0:11"` | +| `durationSpoken` | string | No | - | `"2 minutes 11 seconds"` | +| `type` | string | No | `"video"` | `"video"` | | `guidanceMessage` | string | No | - | `"May contain strong language,sexual or violent content that may offend"` | ### AmpMediaPlayer @@ -64,7 +67,14 @@ The `height` and `width` props are required to be provided in advance by AMP so ```js import { CanonicalMediaPlayer } from '@bbc/psammead-media-player'; -const Container = ({ src, title, portrait, showPlaceholder, placeholderSrc, placeholderSrcset, mediaInfo }) => ( +const Container = ({ + src, + title, + portrait, + showPlaceholder, + placeholderSrc, + placeholderSrcset, + mediaInfo }) => ( Date: Tue, 5 Nov 2019 07:37:23 +0300 Subject: [PATCH 05/15] Update media-player documentation Signed-off-by: RayNjeri --- .../components/psammead-media-player/README.md | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/packages/components/psammead-media-player/README.md b/packages/components/psammead-media-player/README.md index 5c3d27df86..c00427d364 100644 --- a/packages/components/psammead-media-player/README.md +++ b/packages/components/psammead-media-player/README.md @@ -32,15 +32,18 @@ The `title` prop is required for accessibility of the embedded iframe. The `portrait` prop is not required, and defaults to `false`. This is to support portrait video content in the future. The `showPlaceholder` boolean prop is also not required, and defaults to `true`. Assuming `showPlaceholder` is `true`, the `placeholderSrc` will be what image to display as the placeholder. + +#### mediaInfo + The `mediaInfo` prop is required, and has the following properties | Argument | Type | Required | Default | Example | |-----------|---------------------|----------|---------|-----------------| | `title` | string | Yes | - | `"A vertical video pretending to be a cat title"` | | `datetime` | string | No| - | `"PT11S"` | -| `duration` | string| No | - | `"0,11"` | -| `durationSpoken` | string | No | - | `"0,11"` | -| `type` | function | No | - | `"video"` | +| `duration` | string| No | - | `"0:11"` | +| `durationSpoken` | string | No | - | `"2 minutes 11 seconds"` | +| `type` | string | No | `"video"` | `"video"` | | `guidanceMessage` | string | No | - | `"May contain strong language,sexual or violent content that may offend"` | ### AmpMediaPlayer @@ -64,7 +67,14 @@ The `height` and `width` props are required to be provided in advance by AMP so ```js import { CanonicalMediaPlayer } from '@bbc/psammead-media-player'; -const Container = ({ src, title, portrait, showPlaceholder, placeholderSrc, placeholderSrcset, mediaInfo }) => ( +const Container = ({ + src, + title, + portrait, + showPlaceholder, + placeholderSrc, + placeholderSrcset, + mediaInfo }) => ( Date: Tue, 5 Nov 2019 10:47:03 +0300 Subject: [PATCH 06/15] Update CHANGELOG.md/package-lock.json/package.json Signed-off-by: RayNjeri --- 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 0fba31d1bb..3fa37decd9 100644 --- a/packages/components/psammead-media-player/CHANGELOG.md +++ b/packages/components/psammead-media-player/CHANGELOG.md @@ -3,6 +3,7 @@ | Version | Description | | ------- | ----------- | +| 2.1.5 | [PR#2545](https://github.com/bbc/psammead/pull/2545) Update psammead-media-player prop documentation | | 2.1.4 | [PR#2516](https://github.com/bbc/psammead/pull/2516) Add notes to stories. Fix prop-type warnings | | 2.1.3 | [PR#2542](https://github.com/bbc/psammead/pull/2542) Talos - Bump Dependencies - @bbc/psammead-play-button | | 2.1.2 | [PR#2467](https://github.com/bbc/psammead/pull/2476) Update image `alt` to be empty for Media Player placeholder | diff --git a/packages/components/psammead-media-player/package-lock.json b/packages/components/psammead-media-player/package-lock.json index 9f2489983d..311cef7272 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.1.4", + "version": "2.1.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 75a41bbbc8..dac2050290 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.1.4", + "version": "2.1.5", "description": "Provides a media player with optional placeholder", "main": "dist/index.js", "module": "esm/index.js", From e9bbe1fd4f370b116007c12bb4b01474487896f5 Mon Sep 17 00:00:00 2001 From: RayNjeri Date: Tue, 5 Nov 2019 11:07:31 +0300 Subject: [PATCH 07/15] Add skin and service props Signed-off-by: RayNjeri --- packages/components/psammead-media-player/README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/components/psammead-media-player/README.md b/packages/components/psammead-media-player/README.md index c00427d364..5577350422 100644 --- a/packages/components/psammead-media-player/README.md +++ b/packages/components/psammead-media-player/README.md @@ -19,7 +19,9 @@ This component to be used at any point on the page, specifically when a media pl | Argument | Type | Required | Default | Example | |-----------|---------------------|----------|---------|-----------------| | `src` | string | Yes | - | `http://foobar.com/embeddable_endpoint` | +| `skin` | string | No | - | `"audio"` | | `title` | string | Yes | - | `Video player` | +| `service` | string | Yes | - | `"news"` | | `showPlaceholder` | boolean | No | `true` | `false` | | `placeholderSrc` | string | No | `null` | `http://foobar.com/placeholder.png` | | `placeholderSrcset` | string | No | - | `"https://bbc.com/300/cat.jpg 300w, https://bbc.com/450/cat.jpg 450w, https://bbc.com/600/cat.jpg 600w"` | @@ -69,7 +71,9 @@ import { CanonicalMediaPlayer } from '@bbc/psammead-media-player'; const Container = ({ src, + skin, title, + service, portrait, showPlaceholder, placeholderSrc, @@ -77,7 +81,9 @@ const Container = ({ mediaInfo }) => ( Date: Tue, 5 Nov 2019 16:16:38 +0300 Subject: [PATCH 08/15] Update documentation Signed-off-by: RayNjeri --- .../psammead-media-player/README.md | 20 +++++++------------ 1 file changed, 7 insertions(+), 13 deletions(-) diff --git a/packages/components/psammead-media-player/README.md b/packages/components/psammead-media-player/README.md index 5577350422..e4f81a4d8a 100644 --- a/packages/components/psammead-media-player/README.md +++ b/packages/components/psammead-media-player/README.md @@ -19,14 +19,14 @@ This component to be used at any point on the page, specifically when a media pl | Argument | Type | Required | Default | Example | |-----------|---------------------|----------|---------|-----------------| | `src` | string | Yes | - | `http://foobar.com/embeddable_endpoint` | -| `skin` | string | No | - | `"audio"` | +| `skin` | string | No | `"classic"` | `"audio"` | | `title` | string | Yes | - | `Video player` | | `service` | string | Yes | - | `"news"` | | `showPlaceholder` | boolean | No | `true` | `false` | | `placeholderSrc` | string | No | `null` | `http://foobar.com/placeholder.png` | -| `placeholderSrcset` | string | No | - | `"https://bbc.com/300/cat.jpg 300w, https://bbc.com/450/cat.jpg 450w, https://bbc.com/600/cat.jpg 600w"` | +| `placeholderSrcset` | string | No | `null` | `"https://bbc.com/300/cat.jpg 300w, https://bbc.com/450/cat.jpg 450w, https://bbc.com/600/cat.jpg 600w"` | | `portrait` | boolean | No | `false` | `true` | -| `mediaInfo` | object | Yes | - | `{ title: 'A vertical video pretending to be a cat title',duration: '0:11',durationSpoken: '0,11',datetime: 'PT11S',type: 'video' }`| +| `mediaInfo` | object | Yes | - | `{ title: 'A vertical video pretending to be a cat title',duration: '0:11',durationSpoken: '2 minutes 11 seconds',datetime: 'PT11S',type: 'video' }`| The `src` prop is required, as it tells the component what page it needs to embed. The `placeholderSrcset` prop is not required, as it allows image responsiveness and optimization depending on the size of the screen. @@ -34,11 +34,10 @@ The `title` prop is required for accessibility of the embedded iframe. The `portrait` prop is not required, and defaults to `false`. This is to support portrait video content in the future. The `showPlaceholder` boolean prop is also not required, and defaults to `true`. Assuming `showPlaceholder` is `true`, the `placeholderSrc` will be what image to display as the placeholder. +The `mediaInfo` prop is required, and has the following properties. #### mediaInfo -The `mediaInfo` prop is required, and has the following properties - | Argument | Type | Required | Default | Example | |-----------|---------------------|----------|---------|-----------------| | `title` | string | Yes | - | `"A vertical video pretending to be a cat title"` | @@ -57,13 +56,9 @@ The `mediaInfo` prop is required, and has the following properties | `title` | string | Yes | - | `Video player` | | `portrait` | boolean | No | `false` | `true` | | `placeholderSrc` | string | Yes | - | `http://foobar.com/placeholder.png` | -| `height` | number | Yes | - | `9` | -| `width` | number | Yes | - | `16` | The `placeholderSrc` prop is required for AMP, as in order to have the component load an `amp-iframe` within 600px or 75% of the viewport from the top, we must have an `amp-img` placeholder. For more information on this, please refer to the [AMP docs for amp-iframe](https://amp.dev/documentation/components/amp-iframe/). -The `height` and `width` props are required to be provided in advance by AMP so that the aspect ratio can be known without fetching the image. For more information on this you can refer to the [AMP docs for amp-img](https://amp.dev/documentation/components/amp-img/). - ## Usage ### CanonicalMediaPlayer ```js @@ -78,7 +73,8 @@ const Container = ({ showPlaceholder, placeholderSrc, placeholderSrcset, - mediaInfo }) => ( + mediaInfo, + }) => ( ( +const Container = ({ src, title, portrait, placeholderSrc, placeholderSrcset}) => ( ) ``` From 73a1790a3e6dd249e70438527759a87651cc1002 Mon Sep 17 00:00:00 2001 From: RayNjeri Date: Tue, 5 Nov 2019 16:45:15 +0300 Subject: [PATCH 09/15] Link mediaInfo Signed-off-by: RayNjeri --- packages/components/psammead-media-player/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/psammead-media-player/README.md b/packages/components/psammead-media-player/README.md index e4f81a4d8a..bbef5794b4 100644 --- a/packages/components/psammead-media-player/README.md +++ b/packages/components/psammead-media-player/README.md @@ -26,7 +26,7 @@ This component to be used at any point on the page, specifically when a media pl | `placeholderSrc` | string | No | `null` | `http://foobar.com/placeholder.png` | | `placeholderSrcset` | string | No | `null` | `"https://bbc.com/300/cat.jpg 300w, https://bbc.com/450/cat.jpg 450w, https://bbc.com/600/cat.jpg 600w"` | | `portrait` | boolean | No | `false` | `true` | -| `mediaInfo` | object | Yes | - | `{ title: 'A vertical video pretending to be a cat title',duration: '0:11',durationSpoken: '2 minutes 11 seconds',datetime: 'PT11S',type: 'video' }`| +| `[mediaInfo](#mediaInfo)` | object | Yes | - | `{ title: 'A vertical video pretending to be a cat title',duration: '0:11',durationSpoken: '2 minutes 11 seconds',datetime: 'PT11S',type: 'video' }`| The `src` prop is required, as it tells the component what page it needs to embed. The `placeholderSrcset` prop is not required, as it allows image responsiveness and optimization depending on the size of the screen. From 9b5826e5ebdf9c65bb985af6756509d158939212 Mon Sep 17 00:00:00 2001 From: Rachael Njeri Date: Wed, 6 Nov 2019 11:13:51 +0300 Subject: [PATCH 10/15] Update packages/components/psammead-media-player/README.md Co-Authored-By: Simon Sinclair --- packages/components/psammead-media-player/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/psammead-media-player/README.md b/packages/components/psammead-media-player/README.md index bbef5794b4..714e1e092c 100644 --- a/packages/components/psammead-media-player/README.md +++ b/packages/components/psammead-media-player/README.md @@ -26,7 +26,7 @@ This component to be used at any point on the page, specifically when a media pl | `placeholderSrc` | string | No | `null` | `http://foobar.com/placeholder.png` | | `placeholderSrcset` | string | No | `null` | `"https://bbc.com/300/cat.jpg 300w, https://bbc.com/450/cat.jpg 450w, https://bbc.com/600/cat.jpg 600w"` | | `portrait` | boolean | No | `false` | `true` | -| `[mediaInfo](#mediaInfo)` | object | Yes | - | `{ title: 'A vertical video pretending to be a cat title',duration: '0:11',durationSpoken: '2 minutes 11 seconds',datetime: 'PT11S',type: 'video' }`| +| [`mediaInfo`](#mediaInfo) | object | Yes | - | `{ title: 'A vertical video pretending to be a cat title', duration: '2:30', durationSpoken: '2 minutes 11 seconds', datetime: 'PT2M30S' }`| The `src` prop is required, as it tells the component what page it needs to embed. The `placeholderSrcset` prop is not required, as it allows image responsiveness and optimization depending on the size of the screen. From c5056b30d8c184f90224c8b1026a1d9e48729776 Mon Sep 17 00:00:00 2001 From: Rachael Njeri Date: Wed, 6 Nov 2019 11:14:01 +0300 Subject: [PATCH 11/15] Update packages/components/psammead-media-player/README.md Co-Authored-By: Simon Sinclair --- packages/components/psammead-media-player/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/psammead-media-player/README.md b/packages/components/psammead-media-player/README.md index 714e1e092c..394db554d6 100644 --- a/packages/components/psammead-media-player/README.md +++ b/packages/components/psammead-media-player/README.md @@ -43,7 +43,7 @@ The `mediaInfo` prop is required, and has the following properties. | `title` | string | Yes | - | `"A vertical video pretending to be a cat title"` | | `datetime` | string | No| - | `"PT11S"` | | `duration` | string| No | - | `"0:11"` | -| `durationSpoken` | string | No | - | `"2 minutes 11 seconds"` | +| `durationSpoken` | string | No | - | `"11 seconds"` | | `type` | string | No | `"video"` | `"video"` | | `guidanceMessage` | string | No | - | `"May contain strong language,sexual or violent content that may offend"` | From 83f61b3b7c56dccc3d8ff65ca3783ad32089ede2 Mon Sep 17 00:00:00 2001 From: Rachael Njeri Date: Wed, 6 Nov 2019 11:14:42 +0300 Subject: [PATCH 12/15] Update packages/components/psammead-media-player/README.md Co-Authored-By: Simon Sinclair --- packages/components/psammead-media-player/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/psammead-media-player/README.md b/packages/components/psammead-media-player/README.md index 394db554d6..2430a85f87 100644 --- a/packages/components/psammead-media-player/README.md +++ b/packages/components/psammead-media-player/README.md @@ -74,7 +74,7 @@ const Container = ({ placeholderSrc, placeholderSrcset, mediaInfo, - }) => ( +}) => ( Date: Wed, 6 Nov 2019 12:27:35 +0300 Subject: [PATCH 13/15] Update type example Signed-off-by: RayNjeri --- packages/components/psammead-media-player/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/psammead-media-player/README.md b/packages/components/psammead-media-player/README.md index 2430a85f87..769e069067 100644 --- a/packages/components/psammead-media-player/README.md +++ b/packages/components/psammead-media-player/README.md @@ -44,7 +44,7 @@ The `mediaInfo` prop is required, and has the following properties. | `datetime` | string | No| - | `"PT11S"` | | `duration` | string| No | - | `"0:11"` | | `durationSpoken` | string | No | - | `"11 seconds"` | -| `type` | string | No | `"video"` | `"video"` | +| `type` | string | No | `"video"` | `"audio"` | | `guidanceMessage` | string | No | - | `"May contain strong language,sexual or violent content that may offend"` | ### AmpMediaPlayer From b83da85e32916ab72a0c1bf946f8b1051f8b4d93 Mon Sep 17 00:00:00 2001 From: RayNjeri Date: Wed, 6 Nov 2019 12:35:22 +0300 Subject: [PATCH 14/15] Change double quotes to single quotes Signed-off-by: RayNjeri --- .../psammead-media-player/README.md | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/components/psammead-media-player/README.md b/packages/components/psammead-media-player/README.md index 769e069067..d5f5e1d0d1 100644 --- a/packages/components/psammead-media-player/README.md +++ b/packages/components/psammead-media-player/README.md @@ -18,13 +18,13 @@ This component to be used at any point on the page, specifically when a media pl | Argument | Type | Required | Default | Example | |-----------|---------------------|----------|---------|-----------------| -| `src` | string | Yes | - | `http://foobar.com/embeddable_endpoint` | -| `skin` | string | No | `"classic"` | `"audio"` | -| `title` | string | Yes | - | `Video player` | -| `service` | string | Yes | - | `"news"` | +| `src` | string | Yes | - | `'http://foobar.com/embeddable_endpoint'` | +| `skin` | string | No | `'classic'` | `'audio'` | +| `title` | string | Yes | - | `'Video player'` | +| `service` | string | Yes | - | `'news'` | | `showPlaceholder` | boolean | No | `true` | `false` | | `placeholderSrc` | string | No | `null` | `http://foobar.com/placeholder.png` | -| `placeholderSrcset` | string | No | `null` | `"https://bbc.com/300/cat.jpg 300w, https://bbc.com/450/cat.jpg 450w, https://bbc.com/600/cat.jpg 600w"` | +| `placeholderSrcset` | string | No | `null` | `'https://bbc.com/300/cat.jpg 300w, https://bbc.com/450/cat.jpg 450w, https://bbc.com/600/cat.jpg 600w'` | | `portrait` | boolean | No | `false` | `true` | | [`mediaInfo`](#mediaInfo) | object | Yes | - | `{ title: 'A vertical video pretending to be a cat title', duration: '2:30', durationSpoken: '2 minutes 11 seconds', datetime: 'PT2M30S' }`| @@ -40,22 +40,22 @@ The `mediaInfo` prop is required, and has the following properties. | Argument | Type | Required | Default | Example | |-----------|---------------------|----------|---------|-----------------| -| `title` | string | Yes | - | `"A vertical video pretending to be a cat title"` | -| `datetime` | string | No| - | `"PT11S"` | -| `duration` | string| No | - | `"0:11"` | -| `durationSpoken` | string | No | - | `"11 seconds"` | -| `type` | string | No | `"video"` | `"audio"` | -| `guidanceMessage` | string | No | - | `"May contain strong language,sexual or violent content that may offend"` | +| `title` | string | Yes | - | `'A vertical video pretending to be a cat title'` | +| `datetime` | string | No| - | `'PT11S'` | +| `duration` | string| No | - | `'0:11'` | +| `durationSpoken` | string | No | - | `'11 seconds'` | +| `type` | string | No | `"video"` | `'audio'` | +| `guidanceMessage` | string | No | - | `'May contain strong language,sexual or violent content that may offend'` | ### AmpMediaPlayer | Argument | Type | Required | Default | Example | |-----------|---------------------|----------|---------|-----------------| | `src` | string | Yes | - | `http://foobar.com/embeddable_endpoint` | -| `placeholderSrcset` | string | No | `null` | ` "https://bbc.com/300/cat.jpg 300w, https://bbc.com/450/cat.jpg 450w, https://bbc.com/600/cat.jpg 600w"` | +| `placeholderSrcset` | string | No | `null` | ` 'https://bbc.com/300/cat.jpg 300w, https://bbc.com/450/cat.jpg 450w, https://bbc.com/600/cat.jpg 600w'` | | `title` | string | Yes | - | `Video player` | | `portrait` | boolean | No | `false` | `true` | -| `placeholderSrc` | string | Yes | - | `http://foobar.com/placeholder.png` | +| `placeholderSrc` | string | Yes | - | `'http://foobar.com/placeholder.png'` | The `placeholderSrc` prop is required for AMP, as in order to have the component load an `amp-iframe` within 600px or 75% of the viewport from the top, we must have an `amp-img` placeholder. For more information on this, please refer to the [AMP docs for amp-iframe](https://amp.dev/documentation/components/amp-iframe/). From 8a0afe621f780ffac0255f4f4a73b794ab3a4101 Mon Sep 17 00:00:00 2001 From: Rachael Njeri Date: Wed, 6 Nov 2019 12:43:21 +0300 Subject: [PATCH 15/15] Update packages/components/psammead-media-player/README.md Co-Authored-By: Harvey Peachey --- packages/components/psammead-media-player/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/psammead-media-player/README.md b/packages/components/psammead-media-player/README.md index d5f5e1d0d1..5da9a936af 100644 --- a/packages/components/psammead-media-player/README.md +++ b/packages/components/psammead-media-player/README.md @@ -23,7 +23,7 @@ This component to be used at any point on the page, specifically when a media pl | `title` | string | Yes | - | `'Video player'` | | `service` | string | Yes | - | `'news'` | | `showPlaceholder` | boolean | No | `true` | `false` | -| `placeholderSrc` | string | No | `null` | `http://foobar.com/placeholder.png` | +| `placeholderSrc` | string | No | `null` | `'http://foobar.com/placeholder.png'` | | `placeholderSrcset` | string | No | `null` | `'https://bbc.com/300/cat.jpg 300w, https://bbc.com/450/cat.jpg 450w, https://bbc.com/600/cat.jpg 600w'` | | `portrait` | boolean | No | `false` | `true` | | [`mediaInfo`](#mediaInfo) | object | Yes | - | `{ title: 'A vertical video pretending to be a cat title', duration: '2:30', durationSpoken: '2 minutes 11 seconds', datetime: 'PT2M30S' }`|