Skip to content

Commit a0dfbc6

Browse files
MarkLark86MarkLark86
authored
[NHUB-315] (2.4.2): Support Audio & Video for Featuremedia (#615)
* Support video seeking * Update utils * Update usage of featuremedia & other media fields * Update video & audio src attributes in body_html * Make audio use available width * Update ItemIcons to generate list of icon types automatically * remove commented line * fix flake8 issues
1 parent 3b294de commit a0dfbc6

18 files changed

Lines changed: 135 additions & 93 deletions

‎assets/components/cards/render/CardFooter.jsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,17 @@ import React from 'react';
22
import PropTypes from 'prop-types';
33
import CardMeta from './CardMeta';
44

5-
function CardFooter({item, picture, listConfig}) {
5+
function CardFooter({item, listConfig}) {
66
return (<div className="card-footer">
77
<CardMeta
88
item={item}
9-
picture={picture}
109
listConfig={listConfig}
1110
/>
1211
</div>);
1312
}
1413

1514
CardFooter.propTypes = {
1615
item: PropTypes.object.isRequired,
17-
picture: PropTypes.object,
1816
listConfig: PropTypes.object,
1917
};
2018

‎assets/components/cards/render/CardMeta.jsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import {gettext, shortDate, fullDate, isDisplayed} from 'utils';
44
import {characterCount, wordCount} from 'utils';
55
import WireListItemIcons from 'wire/components/WireListItemIcons';
66

7-
function CardMeta({item, picture, displayDivider, slugline, listConfig}) {
7+
function CardMeta({item, displayDivider, slugline, listConfig}) {
88
return (<div className="wire-articles__item__meta">
9-
<WireListItemIcons item={item} picture={picture} divider={displayDivider} />
9+
<WireListItemIcons item={item} divider={displayDivider} />
1010
<div className="wire-articles__item__meta-info">
1111
{slugline && <span className='bold'>{slugline}</span>}
1212
<span>
@@ -26,7 +26,6 @@ function CardMeta({item, picture, displayDivider, slugline, listConfig}) {
2626

2727
CardMeta.propTypes = {
2828
item: PropTypes.object.isRequired,
29-
picture: PropTypes.object,
3029
displayDivider: PropTypes.bool,
3130
slugline: PropTypes.string,
3231
listConfig: PropTypes.object,

‎assets/components/cards/render/LargePictureTextCard.jsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ const getPictureTextPanel = (item, picture, openItem, cardId, listConfig) => {
2020
<CardBody item={item} displaySource={false} listConfig={listConfig} />
2121
<CardFooter
2222
item={item}
23-
picture={picture}
2423
listConfig={listConfig}
2524
/>
2625
</div>

‎assets/components/cards/render/LargeTextOnlyCard.jsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,13 @@ import PropTypes from 'prop-types';
33
import CardFooter from './CardFooter';
44
import CardBody from './CardBody';
55
import CardRow from './CardRow';
6-
import {getPicture} from 'wire/utils';
76

87
const getTextOnlyPanel = (item, openItem, cardId, listConfig) => (
98
<div key={item._id} className='col-sm-6 col-lg-4 d-flex mb-4'>
109
<div className='card card--home' onClick={() => openItem(item, cardId)}>
1110
<CardBody item={item} displaySource={false} listConfig={listConfig} />
1211
<CardFooter
1312
item={item}
14-
picture={getPicture(item)}
1513
listConfig={listConfig}
1614
/>
1715
</div>

‎assets/components/cards/render/PictureTextCard.jsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ const getPictureTextPanel = (item, picture, openItem, withPictures, cardId, list
2020
<CardBody item={item} displayMeta={false} listConfig={listConfig} />
2121
<CardFooter
2222
item={item}
23-
picture={rendition}
2423
listConfig={listConfig}
2524
/>
2625
</div>

‎assets/components/cards/render/TextOnlyCard.jsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ import React from 'react';
22
import PropTypes from 'prop-types';
33
import CardRow from './CardRow';
44
import CardFooter from './CardFooter';
5-
import {getPicture, shortText} from 'wire/utils';
5+
import {shortText} from 'wire/utils';
66
import {Embargo} from '../../../wire/components/fields/Embargo';
77

8-
const getTextOnlyPanel = (item, openItem, picture, cardId, listConfig) => (
8+
const getTextOnlyPanel = (item, openItem, cardId, listConfig) => (
99
<div key={item._id} className='col-sm-6 col-md-4 col-lg-3 col-xxl-2 d-flex mb-4'>
1010
<div className='card card--home' onClick={() => openItem(item, cardId)}>
1111
<div className='card-body'>
@@ -17,7 +17,6 @@ const getTextOnlyPanel = (item, openItem, picture, cardId, listConfig) => (
1717
</div>
1818
<CardFooter
1919
item={item}
20-
picture={picture}
2120
listConfig={listConfig}
2221
/>
2322
</div>
@@ -28,7 +27,7 @@ const getTextOnlyPanel = (item, openItem, picture, cardId, listConfig) => (
2827
function TextOnlyCard ({items, title, product, openItem, isActive, cardId, listConfig}) {
2928
return (
3029
<CardRow title={title} product={product} isActive={isActive}>
31-
{items.map((item) => getTextOnlyPanel(item, openItem, getPicture(item), cardId, listConfig))}
30+
{items.map((item) => getTextOnlyPanel(item, openItem, cardId, listConfig))}
3231
</CardRow>
3332
);
3433
}

‎assets/components/cards/render/TopNewsOneByOneCard.jsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import CardMeta from './CardMeta';
66
import {Embargo} from '../../../wire/components/fields/Embargo';
77

88
const getTopNewsPanel = (item, picture, openItem, cardId, listConfig) => {
9-
109
const rendition = getThumbnailRendition(picture, true);
1110
const imageUrl = rendition && rendition.href;
1211
const caption = rendition && getCaption(picture);
@@ -19,7 +18,6 @@ const getTopNewsPanel = (item, picture, openItem, cardId, listConfig) => {
1918
<Embargo item={item} isCard={true} />
2019
<CardMeta
2120
item={item}
22-
picture={picture}
2321
listConfig={listConfig}
2422
displayDivider={false}
2523
/>

‎assets/components/cards/render/TopNewsTwoByTwoCard.jsx‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import CardBody from './CardBody';
99
import {Embargo} from '../../../wire/components/fields/Embargo';
1010

1111
const getTopNewsLeftPanel = (item, picture, openItem, cardId, listConfig) => {
12-
1312
const rendition = getThumbnailRendition(picture, true);
1413
const imageUrl = rendition && rendition.href;
1514
const caption = rendition && getCaption(picture);
@@ -24,7 +23,6 @@ const getTopNewsLeftPanel = (item, picture, openItem, cardId, listConfig) => {
2423
<Embargo item={item} isCard={true} />
2524
<CardMeta
2625
item={item}
27-
picture={picture}
2826
displayDivider={false}
2927
slugline={getSlugline(item, true)}
3028
/>
@@ -38,7 +36,6 @@ const getTopNewsLeftPanel = (item, picture, openItem, cardId, listConfig) => {
3836
};
3937

4038
const getTopNewsRightPanel = (item, picture, openItem, cardId, listConfig) => {
41-
4239
const rendition = getThumbnailRendition(picture);
4340
const imageUrl = rendition && rendition.href;
4441
const caption = rendition && getCaption(picture);
@@ -47,10 +44,7 @@ const getTopNewsRightPanel = (item, picture, openItem, cardId, listConfig) => {
4744
<div className='card card--home' onClick={() => openItem(item, cardId)}>
4845
<img className='card-img-top' src={imageUrl} alt={caption} />
4946
<CardBody item={item} displayDescription={false} displaySource={false} listConfig={listConfig}/>
50-
<CardFooter
51-
item={item}
52-
picture={picture}
53-
/>
47+
<CardFooter item={item} />
5448
</div>
5549
</div>);
5650
};

‎assets/styles/index.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2945,6 +2945,9 @@ a.wire-articles__versions {
29452945
width: 100%;
29462946
height: auto;
29472947
}
2948+
audio {
2949+
width: 100%;
2950+
};
29482951
.btn {
29492952
align-self: flex-end;
29502953
}

‎assets/ui/components/ArticleBodyHtml.jsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -162,19 +162,23 @@ class ArticleBodyHtml extends React.PureComponent {
162162

163163
container.innerHTML = html;
164164
container
165-
.querySelectorAll('img')
166-
.forEach((imageTag) => {
165+
.querySelectorAll('img, video, audio')
166+
.forEach((mediaTag) => {
167167
// Using the tag's `src` attribute, find the Original Rendition's ID
168168
const originalMediaId = imageEmbedOriginalIds.find((mediaId) => (
169-
!imageTag.src.startsWith('/assets/') &&
170-
imageTag.src.includes(mediaId))
169+
!mediaTag.src.startsWith('/assets/') &&
170+
mediaTag.src.includes(mediaId))
171171
);
172172

173+
if (mediaTag instanceof HTMLVideoElement) {
174+
mediaTag.preload = 'metadata';
175+
}
176+
173177
if (originalMediaId) {
174178
// We now have the Original Rendition's ID
175179
// Use that to update the `src` attribute to use Newshub's Web API
176180
imageSourcesUpdated = true;
177-
imageTag.src = `/assets/${originalMediaId}`;
181+
mediaTag.src = `/assets/${originalMediaId}`;
178182
}
179183
});
180184

0 commit comments

Comments
 (0)