Skip to content

[DNM] WS-1522: SPIKE - How Might We render live stream playback on the Home Page #13631

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

Closed
alex-magana wants to merge 2 commits into from
Closed

[DNM] WS-1522: SPIKE - How Might We render live stream playback on the Home Page #13631

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7287514
Add live TV stream capability on Home Page
alex-magana Jan 20, 2026
f72a83d
Add mediator host to enable local env testing
alex-magana Jan 21, 2026
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
33 changes: 30 additions & 3 deletions data/persian/homePage/index.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,39 @@
"data": {
"title": "BBC News فارسی",
"description": "سایت فارسی بی‌بی‌سی تازه‌ترین اخبار و گزارش ها درباره ایران و افغانستان و جهان در حوزه سیاست، اقتصاد، جامعه و فرهنگ و همچنین ویدیو، گزارش‌های تصویری و برنامه‌های تلویزیون فارسی را به شما ارائه می‌دهد.",
"pageType": "home",
"seoTitle": "BBC News فارسی",
"seoDescription": "سایت فارسی بی‌بی‌سی تازه‌ترین اخبار و گزارش ها درباره ایران و افغانستان و جهان در حوزه سیاست، اقتصاد، جامعه و فرهنگ و همچنین ویدیو، گزارش‌های تصویری و برنامه‌های تلویزیون فارسی را به شما ارائه می‌دهد.",
"pageType": "home",
"seoTitle": "BBC News فارسی",
"seoDescription": "سایت فارسی بی‌بی‌سی تازه‌ترین اخبار و گزارش ها درباره ایران و افغانستان و جهان در حوزه سیاست، اقتصاد، جامعه و فرهنگ و همچنین ویدیو، گزارش‌های تصویری و برنامه‌های تلویزیون فارسی را به شما ارائه می‌دهد.",
"curations": [
{
"summaries": [
{
"curationId": "urn:bbc:tipo:list:63c8ff0f-517a-4ff6-a9d2-062e7f6bec85",
"curationType": "tipo-curation",
"position": 0,
"title": "LIVE: BBC Afghan TV",
"visualProminence": "NORMAL",
"visualStyle": "NONE",
"intent": "MEDIA_PLAYER",
"mediaCollection": [
{
"type": "liveMedia",
"model": {
"urn": "urn:bbc:pips:sid:bbc_afghan_tv",
"synopses": {},
"mediaType": "audio_video",
"masterbrand": {
"id": "bbc_afghan_tv"
},
"version": {
"serviceId": "bbc_afghan_tv",
"status": "LIVE"
},
"leadMedia": true
}
}
]
},
{
"type": "article",
"title": "چرا «انقلاب مهسا» باید به دنبال دادخواهی برود نه خونخواهی؟",
Expand Down
153 changes: 83 additions & 70 deletions src/app/components/Curation/HierarchicalGrid/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
import path from 'ramda/src/path';
import isMediaType from '#app/lib/utilities/isMedia';
import useClickTrackerHandler from '#app/hooks/useClickTrackerHandler';
import MediaLoader from '../../MediaLoader';
import VisuallyHiddenText from '../../VisuallyHiddenText';
import formatDuration from '../../../lib/utilities/formatDuration';
import Promo from '../../../legacy/components/Promo';
Expand Down Expand Up @@ -88,6 +89,8 @@
(promo.type === 'video' && `${videoTranslation}, `) ||
(promo.type === 'photogallery' && `${photoGalleryTranslation}, `);
const { isLive } = promo;
const isLiveTVStream =
promo?.mediaCollection?.[0].type === 'liveMedia';

Check failure on line 93 in src/app/components/Curation/HierarchicalGrid/index.tsx

View workflow job for this annotation

GitHub Actions / cypress-run (22.x) 

Property 'mediaCollection' does not exist on type 'Summary'.

Check failure on line 93 in src/app/components/Curation/HierarchicalGrid/index.tsx

View workflow job for this annotation

GitHub Actions / cypress-run (22.x) 

Property 'mediaCollection' does not exist on type 'Summary'.

Check failure on line 93 in src/app/components/Curation/HierarchicalGrid/index.tsx

View workflow job for this annotation

GitHub Actions / build (22.x) 

Property 'mediaCollection' does not exist on type 'Summary'.

Check failure on line 93 in src/app/components/Curation/HierarchicalGrid/index.tsx

View workflow job for this annotation

GitHub Actions / cypress-run (22.x) 

Property 'mediaCollection' does not exist on type 'Summary'.

const promoEventTrackingData = buildPromoEventTrackingData(promo, i);
const clickTrackerHandler = getClickTrackerHandler(
Expand All @@ -102,79 +105,89 @@
getStyles(promoItems.length, i, mq),
]}
>
<Promo className="">
<Promo.Image
useLargeImages={useLargeImages}
src={promo.imageUrl || null}
alt={promo.imageAlt}
lazyLoad={lazyLoadImages}
fetchPriority={fetchpriority}
isAmp={isAmp}
isPortraitImage={promo.isPortraitImage}
{isLiveTVStream ? (
<section
role="region"
aria-labelledby="bbcMediaPlayer0"
data-testid="live-tv-media-collection"
>
{isMedia && (
<Promo.MediaIcon type={promo.type}>
{showDuration ? promo.duration : ''}
</Promo.MediaIcon>
)}
</Promo.Image>
<Promo.Heading
as={`h${headingLevel}`}
css={(theme: Theme) => ({
color: theme.palette.GREY_10,
...(i === 0 && theme.fontSizes.paragon),
})}
>
{isMedia ? (
<Promo.A
href={promo.link}
aria-labelledby={promo.id}
{...clickTrackerHandler}
>
<span id={promo.id} role="text">
<VisuallyHiddenText data-testid="visually-hidden-text">
{typeTranslated}
</VisuallyHiddenText>
<Promo.MediaIcon
className="inline-icon"
type={promo.type}
css={styles.inlineIcon}
/>
{promo.title}
{showDuration && (
<VisuallyHiddenText>
{durationString}
<MediaLoader blocks={promo?.mediaCollection} />

Check failure on line 114 in src/app/components/Curation/HierarchicalGrid/index.tsx

View workflow job for this annotation

GitHub Actions / cypress-run (22.x) 

Property 'mediaCollection' does not exist on type 'Summary'.

Check failure on line 114 in src/app/components/Curation/HierarchicalGrid/index.tsx

View workflow job for this annotation

GitHub Actions / cypress-run (22.x) 

Property 'mediaCollection' does not exist on type 'Summary'.

Check failure on line 114 in src/app/components/Curation/HierarchicalGrid/index.tsx

View workflow job for this annotation

GitHub Actions / build (22.x) 

Property 'mediaCollection' does not exist on type 'Summary'.

Check failure on line 114 in src/app/components/Curation/HierarchicalGrid/index.tsx

View workflow job for this annotation

GitHub Actions / cypress-run (22.x) 

Property 'mediaCollection' does not exist on type 'Summary'.
</section>
) : (
<Promo className="">
<Promo.Image
useLargeImages={useLargeImages}
src={promo.imageUrl || null}
alt={promo.imageAlt}
lazyLoad={lazyLoadImages}
fetchPriority={fetchpriority}
isAmp={isAmp}
isPortraitImage={promo.isPortraitImage}
>
{isMedia && (
<Promo.MediaIcon type={promo.type}>
{showDuration ? promo.duration : ''}
</Promo.MediaIcon>
)}
</Promo.Image>
<Promo.Heading
as={`h${headingLevel}`}
css={(theme: Theme) => ({
color: theme.palette.GREY_10,
...(i === 0 && theme.fontSizes.paragon),
})}
>
{isMedia ? (
<Promo.A
href={promo.link}
aria-labelledby={promo.id}
{...clickTrackerHandler}
>
<span id={promo.id} role="text">
<VisuallyHiddenText data-testid="visually-hidden-text">
{typeTranslated}
</VisuallyHiddenText>
)}
</span>
</Promo.A>
) : (
<Promo.A href={promo.link} {...clickTrackerHandler}>
{isLive ? (
<LiveLabel
{...(isFirstPromo
? {
className: 'first-promo',
}
: undefined)}
>
<Promo.MediaIcon
className="inline-icon"
type={promo.type}
css={styles.inlineIcon}
/>
{promo.title}
</LiveLabel>
) : (
promo.title
)}
</Promo.A>
)}
</Promo.Heading>
<Promo.Body className="promo-paragraph" css={styles.body}>
{promo.description}
</Promo.Body>
{!isLive ? (
<Promo.Timestamp className="promo-timestamp">
{promo.lastPublished}
</Promo.Timestamp>
) : null}
</Promo>
{showDuration && (
<VisuallyHiddenText>
{durationString}
</VisuallyHiddenText>
)}
</span>
</Promo.A>
) : (
<Promo.A href={promo.link} {...clickTrackerHandler}>
{isLive ? (
<LiveLabel
{...(isFirstPromo
? {
className: 'first-promo',
}
: undefined)}
>
{promo.title}
</LiveLabel>
) : (
promo.title
)}
</Promo.A>
)}
</Promo.Heading>
<Promo.Body className="promo-paragraph" css={styles.body}>
{promo.description}
</Promo.Body>
{!isLive ? (
<Promo.Timestamp className="promo-timestamp">
{promo.lastPublished}
</Promo.Timestamp>
) : null}
</Promo>
)}
</li>
);
})}
Expand Down
3 changes: 3 additions & 0 deletions src/app/components/MediaLoader/configs/liveMedia.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,9 @@ export default ({
summary: short,
...(warning && { warning }),
},
mediator: {
host: 'open.live.bbc.co.uk',
},
},
mediaType: 'video',
showAds: false,
Expand Down
Loading