Update psammead-media-player prop documentation

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

@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | 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 |

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

@@ -18,49 +18,73 @@ 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` |
-| `title` | string | Yes | - | `Video player` |
+| `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   | - | `"https://bbc.com/300/cat.jpg 300w, https://bbc.com/450/cat.jpg 450w, https://bbc.com/600/cat.jpg 600w"` |
+| `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' }`|
 
 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 `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
+
+| 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'` |
 
 ### 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` |
-| `height` | number | Yes | - | `9` |
-| `width` | number | Yes | - | `16` |
+| `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/).
 
-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
 import { CanonicalMediaPlayer } from '@bbc/psammead-media-player';
 
-const Container = ({ src, title, portrait, showPlaceholder, placeholderSrc }) => (
+const Container = ({ 
+  src, 
+  skin,
+  title, 
+  service,
+  portrait, 
+  showPlaceholder, 
+  placeholderSrc, 
+  placeholderSrcset, 
+  mediaInfo,
+}) => (
   <CanonicalMediaPlayer
     src={src}
+    skin={skin}
     title={title}
+    service={service}
     portrait={portrait}
     placeholderSrc={placeholderSrc}
     placeholderSrcset={placeholderSrcset}
     showPlaceholder={showPlaceholder}
+    mediaInfo={mediaInfo}
   />
 )
 ```
@@ -69,15 +93,13 @@ const Container = ({ src, title, portrait, showPlaceholder, placeholderSrc }) =>
 ```js
 import { AmpMediaPlayer } from '@bbc/psammead-media-player';
 
-const Container = ({ src, title, portrait, placeholderSrc, height, width }) => (
+const Container = ({ src, title, portrait, placeholderSrc, placeholderSrcset}) => (
   <AmpMediaPlayer
     src={src}
     title={title}
     portrait={portrait}
     placeholderSrc={placeholderSrc}
     placeholderSrcset={placeholderSrcset}
-    height={height}
-    width={width}
   />
 )
 ```

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",