-
Notifications
You must be signed in to change notification settings - Fork 234
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
WSTEAM1-827: Add EMP core work. (#11347)
* WSTEAM1-493: Add Media Player * WSTEAM1-493: Add format functions * WSTEAM1-493: Refactor component * WSTEAM1-493: Refactor * WSTEAM1-493: Refactor * WSTEAM1-493: Add live page alterations * WSTEAM1-493: Add live page alterations * WSTEAM1-493: Make counterName optional * WSTEAM1-493: Increase bundle size * WSTEAM1-493: Update unit tests * WSTEAM1-493: Only add MediaPlayer to Live * WSTEAM1-493: Update tests * WSTEAM1-493: Add counter name * WSTEAM1-493: Update snapshots * WSTEAM1-493: Update initilizer * WSTEAM1-493: Update Snapshots * WSTEAM1-493: Add data-e2e tag * WSTEAM1-493: Add placeholder * WSTEAM1-493: Add tests * WSTEAM1-493: Refactor onClient logic * WSTEAM1-493: Add caption * WSTEAM1-827: Update tests * WSTEAM1-827: Update tests. * WSTEAM1-827: Update tests. * WSTEAM1-827: Add require congig mock for tests * WSTEAM1-827: update tests * WSTEAM1-827: Update types * WSTEAM1-827: Update test * WSTEAM1-827: Alter tests * WSTEAM1-827: Alter tests * WSTEAM1-827: Refactor * WSTEAM1-827: Refactor * WSTEAM1-827: Add global.d.ts * WSTEAM1-827: Elevate to TS * WSTEAM1-827: Add styles * WSTEAM1-827: Refactor * WSTEAM1-827: Use restore mocks instead * WSTEAM1-827: Refactor * WSTEAM1-827: Update * WSTEAM1-827: Fix types * WSTEAM1-827: Refactor * WSTEAM1-827: Add import * WSTEAM1-827: Alter import * WSTEAM1-827: Refactor * WSTEAM1-827: Update unit tests * WSTEAM1-827: add Storybook * WSTEAM1-827: Update storybook * WSTEAM1-827: Add test * WSTEAM1-827: Alter mediator setting logic * WSTEAM1-827: Change mediator logic * WSTEAM1-827: Expose env vars * WSTEAM1-827: Refactor * WSTEAM1-827: lint --------- Co-authored-by: Aaron Moore <aaron.moore@bbc.co.uk>
- Loading branch information
1 parent
070c64b
commit 78f6f93
Showing
27 changed files
with
807 additions
and
85 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import React, { useContext } from 'react'; | ||
| import MediaPlayerContainer from '../../legacy/containers/MediaPlayer'; | ||
| import { RequestContext } from '../../contexts/RequestContext'; | ||
| import { MediaBlock } from '../MediaLoader/types'; | ||
| import { GridItemMediumNoMargin } from '../../legacy/components/Grid'; | ||
|
|
||
| const LegacyLivePageMediaPlayer = ({ blocks, className }: Props) => { | ||
| const { id } = useContext(RequestContext); | ||
|
|
||
| if (!id) return null; | ||
|
|
||
| return ( | ||
| <GridItemMediumNoMargin | ||
| className={className} | ||
| gridColumnStart={2} | ||
| gridSpan={5} | ||
| > | ||
| <MediaPlayerContainer | ||
| blocks={blocks} | ||
| assetId={id} | ||
| assetType="live" | ||
| showPlaceholder | ||
| /> | ||
| </GridItemMediumNoMargin> | ||
| ); | ||
| }; | ||
|
|
||
| type Props = { | ||
| blocks: MediaBlock[]; | ||
| className: string; | ||
| }; | ||
|
|
||
| export default LegacyLivePageMediaPlayer; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| # Media Loader | ||
|
|
||
| ## Description | ||
|
|
||
| This component loads a media player into our webpage. It uses the BBC Universal Media Player module (BUMP) to choose the correct Embedded Media Player (EMP) for the user's device. Using BUMP removes the concerns involved in serving different devices and web-browsers as BUMP automatically provides the best fitting EMP for the client. For example, BUMP can cater for differences between mobiles, laptops and desktops, but also factors such as whether the user is using network data (3G) or a WIFI. | ||
|
|
||
|
|
||
| ## Local Development | ||
| So that the EMP can load video data, our localhost's domain name should be altered from `localhost:7080` to `localhost.bbc.com:7080` to fully encorporate the bbc domain name (bbc) and top-level domain (.com). | ||
|
|
||
| First, run the command (you only need to run this once): | ||
|
|
||
| `sudo -- sh -c -e "echo '127.0.0.1 localhost.bbc.com' >> /etc/hosts";` | ||
|
|
||
| Then, access local pages using: `localhost.bbc.com:7080/`, | ||
| eg. | ||
| Express pages: `http://localhost.bbc.com:7080/afaanoromoo/articles/c4g19kgl85ko` | ||
|
|
||
| Next pages: `http://localhost.bbc.com:7081/pidgin/live/c7p765ynk9qt?renderer_env=test` | ||
|
|
||
|
|
||
| Currently, the EMP is set to only load Live video assets by default. To load test assets, append the query `?renderer_env=test` to the url. Eg. `http://localhost.bbc.com:7080/afaanoromoo/articles/c4g19kgl85ko?renderer_env=test` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,139 @@ | ||
| const sampleBlocks = [ | ||
| { | ||
| id: '80e150c0', | ||
| type: 'aresMedia', | ||
| model: { | ||
| blocks: [ | ||
| { | ||
| id: 'c77c0598', | ||
| blockId: 'urn:bbc:ares::clip:p01k6msm', | ||
| type: 'aresMediaMetadata', | ||
| model: { | ||
| id: 'p01k6msm', | ||
| subType: 'clip', | ||
| format: 'video', | ||
| title: 'Five things ants can teach us about management', | ||
| synopses: { | ||
| short: | ||
| 'They may be tiny, but us humans could learn a thing or two from ants.', | ||
| }, | ||
| imageUrl: 'ichef.test.bbci.co.uk/images/ic/$recipe/p01k6mtv.jpg', | ||
| imageCopyright: 'BBC', | ||
| embedding: true, | ||
| advertising: true, | ||
| versions: [ | ||
| { | ||
| versionId: 'p01k6msp', | ||
| types: ['Original'], | ||
| duration: 191, | ||
| durationISO8601: 'PT3M11S', | ||
| warnings: { | ||
| short: 'Contains strong language and adult humour.', | ||
| long: 'Contains strong language and adult humour.', | ||
| }, | ||
| availableTerritories: { | ||
| uk: true, | ||
| nonUk: true, | ||
| }, | ||
| availableFrom: 1540218932000, | ||
| }, | ||
| ], | ||
| syndication: { | ||
| destinations: [], | ||
| }, | ||
| smpKind: 'programme', | ||
| }, | ||
| position: [5, 2, 1], | ||
| }, | ||
| { | ||
| id: 'd8f26383', | ||
| type: 'image', | ||
| model: { | ||
| blocks: [ | ||
| { | ||
| id: 'fcdba133', | ||
| type: 'rawImage', | ||
| model: { | ||
| width: 1920, | ||
| height: 1080, | ||
| locator: | ||
| 'ichef.test.bbci.co.uk/images/ic/$widthxn/p01k6mtv.jpg', | ||
| originCode: 'mpv', | ||
| copyrightHolder: 'BBC', | ||
| }, | ||
| }, | ||
| { | ||
| id: '63679c9e', | ||
| type: 'altText', | ||
| model: { | ||
| blocks: [ | ||
| { | ||
| id: '33876888', | ||
| type: 'text', | ||
| model: { | ||
| blocks: [ | ||
| { | ||
| id: '26dbfca2', | ||
| type: 'paragraph', | ||
| model: { | ||
| text: 'Ants', | ||
| blocks: [ | ||
| { | ||
| id: 'ed9f30c9', | ||
| type: 'fragment', | ||
| model: { | ||
| text: 'Ants', | ||
| attributes: [], | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| }, | ||
| { | ||
| id: '31318aec', | ||
| type: 'caption', | ||
| model: { | ||
| blocks: [ | ||
| { | ||
| id: '8ac45ed2', | ||
| type: 'text', | ||
| model: { | ||
| blocks: [ | ||
| { | ||
| id: '935f130e', | ||
| type: 'paragraph', | ||
| model: { | ||
| text: 'This is a caption!', | ||
| blocks: [ | ||
| { | ||
| id: 'deaf6139', | ||
| type: 'fragment', | ||
| model: { | ||
| text: 'This is a caption!', | ||
| attributes: [], | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| }, | ||
| ]; | ||
|
|
||
| export default sampleBlocks; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import React from 'react'; | ||
| import { PageTypes, Services } from '#app/models/types/global'; | ||
| import { RequestContextProvider } from '#app/contexts/RequestContext'; | ||
| import { ServiceContextProvider } from '../../contexts/ServiceContext'; | ||
| import MediaLoaderComponent from '.'; | ||
| import ThemeProvider from '../ThemeProvider'; | ||
| import md from './README.md'; | ||
| import sample from './fixture'; | ||
|
|
||
| type Props = { | ||
| pageType: PageTypes; | ||
| service: Services; | ||
| }; | ||
|
|
||
| const Component = ({ service, pageType }: Props) => ( | ||
| <ServiceContextProvider service={service}> | ||
| <RequestContextProvider | ||
| id="testID" | ||
| isAmp={false} | ||
| isApp={false} | ||
| pageType={pageType} | ||
| pathname="" | ||
| service={service} | ||
| counterName="testCounterName" | ||
| > | ||
| <ThemeProvider service={service}> | ||
| <MediaLoaderComponent className="MediaLoader" blocks={sample} /> | ||
| </ThemeProvider> | ||
| </RequestContextProvider> | ||
| </ServiceContextProvider> | ||
| ); | ||
|
|
||
| export default { | ||
| title: 'Components/MediaLoader', | ||
| Component, | ||
| parameters: { | ||
| docs: { | ||
| component: { | ||
| title: 'MediaLoader', | ||
| }, | ||
| page: md, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| export const ArticleMediaLoader = () => ( | ||
| <Component service="pidgin" pageType="article" /> | ||
| ); |
Oops, something went wrong.