Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

WSTEAM1-733 Display audio on the Live Page #12031

Open
wants to merge 18 commits into
base: latest
Choose a base branch
from
Open

WSTEAM1-733 Display audio on the Live Page #12031

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
978a0be
render audio player on live posts
emilysaffron Oct 4, 2024
198b788
Merge branch 'latest' into WSTEAM1-733-display-audio-on-live-page
emilysaffron Oct 4, 2024
f79040e
styling
emilysaffron Oct 4, 2024
35dd653
update integration snapshots
emilysaffron Oct 4, 2024
c271919
update integration snapshots again
emilysaffron Oct 4, 2024
95fed28
update in line with snapshots
emilysaffron Oct 10, 2024
945e938
Merge branch 'latest' into WSTEAM1-733-display-audio-on-live-page
emilysaffron Oct 10, 2024
ec03215
update integration snapshots
emilysaffron Oct 10, 2024
d0b1716
Merge branch 'WSTEAM1-733-display-audio-on-live-page' of github.com:b…
emilysaffron Oct 10, 2024
b4bb536
update unit test
emilysaffron Oct 10, 2024
1f28d77
Merge branch 'latest' into WSTEAM1-733-display-audio-on-live-page
emilysaffron Oct 10, 2024
e98fd89
update unit and integration test
emilysaffron Oct 14, 2024
233b357
Merge branch 'latest' into WSTEAM1-733-display-audio-on-live-page
emilysaffron Oct 14, 2024
aff9c63
typo
emilysaffron Oct 14, 2024
d3fd256
Merge branch 'latest' into WSTEAM1-733-display-audio-on-live-page
emilysaffron Oct 15, 2024
12a06d4
fixes spacings
emilysaffron Oct 15, 2024
e492ae3
Merge branch 'WSTEAM1-733-display-audio-on-live-page' of github.com:b…
emilysaffron Oct 15, 2024
3b69d94
Merge branch 'latest' into WSTEAM1-733-display-audio-on-live-page
emilysaffron Oct 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/app/components/MediaLoader/configs/clipMedia.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ export default ({
...(videoId && { clipPID: videoId }),
},
},
placeholderConfig,
...(type !== 'audio' && { placeholderConfig }),
showAds,
};
};
5 changes: 2 additions & 3 deletions src/app/components/MediaLoader/index.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,10 +50,9 @@ export default {
!isEmbedded && commonMarginSpacing,
],

audioMediaContainer: ({ palette }: Theme) =>
audioMediaContainer: () =>
css({
backgroundColor: palette.WHITE,
height: '165px',
height: '130px',
emilysaffron marked this conversation as resolved.
Show resolved Hide resolved
}),

standardMediaContainer: ({ palette }: Theme) =>
Expand Down
3 changes: 1 addition & 2 deletions src/app/pages/OnDemandAudioPage/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -698,8 +698,7 @@ exports[`OnDemand Radio Page should match snapshot 1`] = `
}

.emotion-30 {
background-color: #FFFFFF;
height: 165px;
height: 130px;
}

<div>
Expand Down
2 changes: 1 addition & 1 deletion src/integration/pages/liveRadio/gahuza/__snapshots__/canonical.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ exports[`Canonical Live Radio Media Loader renders a valid container 1`] = `
data-e2e="media-loader__container"
>
<div
class="bbc-1eq7znh"
class="bbc-1i3n52v"
data-e2e="media-player"
/>
</figure>
Expand Down
2 changes: 1 addition & 1 deletion src/integration/pages/liveRadio/korean/__snapshots__/canonical.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ exports[`Canonical Korean Live Radio Page Media Loader renders a valid container
data-e2e="media-loader__container"
>
<div
class="bbc-1eq7znh"
class="bbc-1i3n52v"
data-e2e="media-player"
/>
</figure>
Expand Down
2 changes: 1 addition & 1 deletion src/integration/pages/liveRadio/sinhala/__snapshots__/canonical.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ exports[`Canonical Sinhala Live Radio Page Media Loader renders a valid containe
data-e2e="media-loader__container"
>
<div
class="bbc-1eq7znh"
class="bbc-1i3n52v"
data-e2e="media-player"
/>
</figure>
Expand Down
2 changes: 1 addition & 1 deletion src/integration/pages/onDemandAudioPage/indonesia/__snapshots__/canonical.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ exports[`Canonical On Demand Audio Page Media Loader renders a valid container 1
data-e2e="media-loader__container"
>
<div
class="bbc-1eq7znh"
class="bbc-1i3n52v"
data-e2e="media-player"
/>
</figure>
Expand Down
2 changes: 1 addition & 1 deletion src/integration/pages/onDemandAudioPage/pashto/__snapshots__/canonical.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,7 @@ exports[`Canonical On Demand Audio Page Media Loader renders a valid container 1
data-e2e="media-loader__container"
>
<div
class="bbc-1eq7znh"
class="bbc-1i3n52v"
data-e2e="media-player"
/>
</figure>
Expand Down
2 changes: 1 addition & 1 deletion src/integration/pages/onDemandAudioPage/pashtoBrand/__snapshots__/canonical.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,7 @@ exports[`Canonical On Demand Audio Page Media Loader renders a valid container 1
data-e2e="media-loader__container"
>
<div
class="bbc-1eq7znh"
class="bbc-1i3n52v"
data-e2e="media-player"
/>
</figure>
Expand Down
2 changes: 1 addition & 1 deletion src/integration/pages/podcastPage/portugueseBrand/__snapshots__/canonical.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,7 @@ exports[`Canonical Podcast Page Media Loader renders a valid container 1`] = `
data-e2e="media-loader__container"
>
<div
class="bbc-1eq7znh"
class="bbc-1i3n52v"
data-e2e="media-player"
/>
</figure>
Expand Down
2 changes: 1 addition & 1 deletion src/integration/pages/podcastPage/portugueseEpisode/__snapshots__/canonical.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,7 @@ exports[`Canonical Podcast Page Media Loader renders a valid container 1`] = `
data-e2e="media-loader__container"
>
<div
class="bbc-1eq7znh"
class="bbc-1i3n52v"
data-e2e="media-player"
/>
</figure>
Expand Down
233 changes: 233 additions & 0 deletions ws-nextjs-app/pages/[service]/live/[id]/Post/fixture.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -585,3 +585,236 @@ export const videoSamplePost = {
},
],
};

export const audioSamplePost = {
typeCode: null,
header: {
model: {
blocks: [
{
id: '877a928e',
type: 'headline',
model: {
blocks: [
{
id: '780e425c',
type: 'text',
model: {
blocks: [
{
id: 'e8c211d7',
type: 'paragraph',
model: {
text: 'Post with embedded audio',
blocks: [
{
id: '2eb52ab5',
type: 'fragment',
model: {
text: 'Post with embedded audio',
attributes: [],
},
},
],
},
},
],
},
},
],
},
},
],
},
},
content: {
model: {
blocks: [
{
id: '0c665c43',
type: 'paragraph',
model: {
text: 'Audio',
blocks: [
{
id: '8658cc94',
type: 'fragment',
model: {
text: 'Audio',
attributes: [],
},
},
],
},
},
{
id: '586c041a',
type: 'audio',
model: {
locator: 'urn:bbc:pips:pid:p01vqk5l',
blocks: [
{
id: '51c17264',
type: 'clipMedia',
model: {
id: 'urn:bbc:pips:pid:p01vqk5l',
urns: {
pipsPid: 'urn:bbc:pips:pid:p01vqk5l',
},
images: [
{
url: 'https://ichef.test.bbci.co.uk/images/ic/1024xn/p01vkjg8.png',
urlTemplate:
'https://ichef.test.bbci.co.uk/images/ic/{width}xn/p01vkjg8.png',
altText: 'BBC flat logo 2023 default image',
type: 'socialImage',
source: 'pipsImage',
},
{
url: 'https://ichef.test.bbci.co.uk/images/ic/1024xn/p01vkjg8.png',
urlTemplate:
'https://ichef.test.bbci.co.uk/images/ic/{width}xn/p01vkjg8.png',
altText: 'BBC flat logo 2023 default image',
type: 'promoImage',
source: 'pipsImage',
},
],
assetPath: 'p01vqk5l',
type: 'audio',
headlines: {
primaryHeadline: 'a',
seoHeadline: 'a',
promoHeadline: 'a',
socialHeadline: 'a',
},
analytics: {
page: {
name: 'programmes.av.p01vqk5l.page',
contentId: 'urn:bbc:pips:pid:p01vqk5l',
producer: 'PROGRAMMES',
},
},
description: 'a',
summary: {
type: 'text',
model: {
blocks: [
{
type: 'paragraph',
model: {
text: 'a',
blocks: [
{
type: 'fragment',
model: {
text: 'a',
attributes: [],
},
},
],
},
},
],
},
},
lastPublished: '2023-10-10T11:48:18Z',
firstPublished: null,
video: {
id: 'p01vqk5l',
title: 'a',
holdingImage: {
id: 'https://ichef.test.bbci.co.uk/images/ic/$recipe/p01vkjg8.png',
altText: 'BBC flat logo 2023 default image',
},
version: {
id: 'p01vqk5n',
duration: 'PT27S',
kind: 'audio',
guidance: null,
territories: ['nonuk', 'uk'],
},
isAdvertisingAllowed: false,
isEmbeddingAllowed: true,
isUnavailable: false,
},
attributions: null,
link: {
path: '/programmes/p01vqk5l',
},
section: null,
isSharingAllowed: true,
},
},
{
id: 'cfdc8dc2',
type: 'caption',
model: {
blocks: [
{
id: '25d8408a',
type: 'text',
model: {
blocks: [
{
id: '6355a247',
type: 'paragraph',
model: {
text: 'caption for audio',
blocks: [
{
id: '9f54b5d9',
type: 'fragment',
model: {
text: 'caption for audio',
attributes: [],
},
},
],
},
},
],
},
},
],
},
},
],
},
},
],
},
},
link: null,
urn: 'asset:c40c0735-cff0-415f-95fa-b72a8f5a97a3',
type: 'POST',
options: {
isBreakingNews: false,
},
dates: {
firstPublished: '2023-11-17T16:30:52.000Z',
lastPublished: '2023-12-05T15:55:18.000Z',
time: null,
curated: '2023-11-17T16:30:53.254Z',
},
titles: [
{
title: null,
source: 'primary',
},
],
descriptions: [
{
text: null,
source: 'summary',
},
],
images: [
{
originalUrl: null,
altText: null,
copyright: null,
urlTemplate: null,
url: null,
},
],
};
22 changes: 21 additions & 1 deletion ws-nextjs-app/pages/[service]/live/[id]/Post/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,12 @@ import {
import postFixture from '#data/pidgin/posts/postFixtureCleaned.json';
import { LIVE_PAGE } from '../../../../../../src/app/routes/utils/pageTypes';
import Post from '.';
import { samplePost, twitterSamplePost, videoSamplePost } from './fixture';
import {
audioSamplePost,
samplePost,
twitterSamplePost,
videoSamplePost,
} from './fixture';

const singlePostWithTitle = postFixture.data.results[0];

Expand Down Expand Up @@ -151,6 +156,21 @@ describe('Post', () => {
).toBeInTheDocument();
});

it('should render the new media player in a post containing audio', async () => {
const { container } = await act(async () => {
return render(<Post post={audioSamplePost} />, {
id: 'c7p765ynk9qt',
service: 'pidgin',
pageType: LIVE_PAGE,
pathname: '/pidgin/live/c7p765ynk9qt',
});
});

expect(
container.querySelector('[data-e2e="media-loader__container"]'),
).toBeInTheDocument();
});

it('should not render share button by default', async () => {
await act(async () => {
render(<Post post={singlePostWithTitle} />);
Expand Down
3 changes: 3 additions & 0 deletions ws-nextjs-app/pages/[service]/live/[id]/Post/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,9 @@ const PostContent = ({ contentBlocks }: { contentBlocks: OptimoBlock[] }) => {
video: (props: { blocks: MediaBlock[] }) => (
<MediaLoader blocks={props.blocks} css={styles.bodyMedia} />
),
audio: (props: { blocks: MediaBlock[] }) => (
<MediaLoader blocks={props.blocks} />
),
social: SocialEmbedContainer,
};

Expand Down
Loading