From a0dfbc671a8197157b264bec8cb1bc596ab21178 Mon Sep 17 00:00:00 2001
From: MarkLark86 <mark.pittaway@gmail.com>
Date: Mon, 23 Oct 2023 14:25:51 +1100
Subject: [PATCH] [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
---
 assets/components/cards/render/CardFooter.jsx |  4 +-
 assets/components/cards/render/CardMeta.jsx   |  5 +-
 .../cards/render/LargePictureTextCard.jsx     |  1 -
 .../cards/render/LargeTextOnlyCard.jsx        |  2 -
 .../cards/render/PictureTextCard.jsx          |  1 -
 .../components/cards/render/TextOnlyCard.jsx  |  7 +--
 .../cards/render/TopNewsOneByOneCard.jsx      |  2 -
 .../cards/render/TopNewsTwoByTwoCard.jsx      |  8 +--
 assets/styles/index.scss                      |  3 +
 assets/ui/components/ArticleBodyHtml.jsx      | 14 +++--
 assets/ui/components/ArticleMedia.jsx         |  2 +-
 assets/wire/components/ItemDetails.jsx        | 31 ++++++----
 assets/wire/components/PreviewMeta.jsx        |  8 +--
 assets/wire/components/WireListItem.jsx       | 31 +++-------
 assets/wire/components/WireListItemIcons.jsx  | 15 ++---
 assets/wire/components/WirePreview.jsx        | 33 ++++++-----
 assets/wire/utils.js                          | 57 +++++++++++++++++++
 newsroom/upload.py                            |  4 +-
 18 files changed, 135 insertions(+), 93 deletions(-)

diff --git a/assets/components/cards/render/CardFooter.jsx b/assets/components/cards/render/CardFooter.jsx
index 7351c1045..5b20281da 100644
--- a/assets/components/cards/render/CardFooter.jsx
+++ b/assets/components/cards/render/CardFooter.jsx
@@ -2,11 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import CardMeta from './CardMeta';
 
-function CardFooter({item, picture, listConfig}) {
+function CardFooter({item, listConfig}) {
     return (<div className="card-footer">
         <CardMeta
             item={item}
-            picture={picture}
             listConfig={listConfig}
         />
     </div>);
@@ -14,7 +13,6 @@ function CardFooter({item, picture, listConfig}) {
 
 CardFooter.propTypes = {
     item: PropTypes.object.isRequired,
-    picture: PropTypes.object,
     listConfig: PropTypes.object,
 };
 
diff --git a/assets/components/cards/render/CardMeta.jsx b/assets/components/cards/render/CardMeta.jsx
index 237c2b209..7485efc38 100644
--- a/assets/components/cards/render/CardMeta.jsx
+++ b/assets/components/cards/render/CardMeta.jsx
@@ -4,9 +4,9 @@ import {gettext, shortDate, fullDate, isDisplayed} from 'utils';
 import {characterCount, wordCount} from 'utils';
 import WireListItemIcons from 'wire/components/WireListItemIcons';
 
-function CardMeta({item, picture, displayDivider, slugline, listConfig}) {
+function CardMeta({item, displayDivider, slugline, listConfig}) {
     return (<div className="wire-articles__item__meta">
-        <WireListItemIcons item={item} picture={picture} divider={displayDivider} />
+        <WireListItemIcons item={item} divider={displayDivider} />
         <div className="wire-articles__item__meta-info">
             {slugline && <span className='bold'>{slugline}</span>}
             <span>
@@ -26,7 +26,6 @@ function CardMeta({item, picture, displayDivider, slugline, listConfig}) {
 
 CardMeta.propTypes = {
     item: PropTypes.object.isRequired,
-    picture: PropTypes.object,
     displayDivider: PropTypes.bool,
     slugline: PropTypes.string,
     listConfig: PropTypes.object,
diff --git a/assets/components/cards/render/LargePictureTextCard.jsx b/assets/components/cards/render/LargePictureTextCard.jsx
index 027c25bc6..8fbde2918 100644
--- a/assets/components/cards/render/LargePictureTextCard.jsx
+++ b/assets/components/cards/render/LargePictureTextCard.jsx
@@ -20,7 +20,6 @@ const getPictureTextPanel = (item, picture, openItem, cardId, listConfig) => {
             <CardBody item={item} displaySource={false} listConfig={listConfig} />
             <CardFooter
                 item={item}
-                picture={picture}
                 listConfig={listConfig}
             />
         </div>
diff --git a/assets/components/cards/render/LargeTextOnlyCard.jsx b/assets/components/cards/render/LargeTextOnlyCard.jsx
index b7fe4546e..487be0dee 100644
--- a/assets/components/cards/render/LargeTextOnlyCard.jsx
+++ b/assets/components/cards/render/LargeTextOnlyCard.jsx
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import CardFooter from './CardFooter';
 import CardBody from './CardBody';
 import CardRow from './CardRow';
-import {getPicture} from 'wire/utils';
 
 const getTextOnlyPanel = (item, openItem, cardId, listConfig) => (
     <div key={item._id} className='col-sm-6 col-lg-4 d-flex mb-4'>
@@ -11,7 +10,6 @@ const getTextOnlyPanel = (item, openItem, cardId, listConfig) => (
             <CardBody item={item} displaySource={false} listConfig={listConfig} />
             <CardFooter
                 item={item}
-                picture={getPicture(item)}
                 listConfig={listConfig}
             />
         </div>
diff --git a/assets/components/cards/render/PictureTextCard.jsx b/assets/components/cards/render/PictureTextCard.jsx
index f15329844..5e02653c3 100644
--- a/assets/components/cards/render/PictureTextCard.jsx
+++ b/assets/components/cards/render/PictureTextCard.jsx
@@ -20,7 +20,6 @@ const getPictureTextPanel = (item, picture, openItem, withPictures, cardId, list
             <CardBody item={item} displayMeta={false} listConfig={listConfig} />
             <CardFooter
                 item={item}
-                picture={rendition}
                 listConfig={listConfig}
             />
         </div>
diff --git a/assets/components/cards/render/TextOnlyCard.jsx b/assets/components/cards/render/TextOnlyCard.jsx
index 52cf873d5..2604cca6b 100644
--- a/assets/components/cards/render/TextOnlyCard.jsx
+++ b/assets/components/cards/render/TextOnlyCard.jsx
@@ -2,10 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import CardRow from './CardRow';
 import CardFooter from './CardFooter';
-import {getPicture, shortText} from 'wire/utils';
+import {shortText} from 'wire/utils';
 import {Embargo} from '../../../wire/components/fields/Embargo';
 
-const getTextOnlyPanel = (item, openItem, picture, cardId, listConfig) => (
+const getTextOnlyPanel = (item, openItem, cardId, listConfig) => (
     <div key={item._id} className='col-sm-6 col-md-4 col-lg-3 col-xxl-2 d-flex mb-4'>
         <div className='card card--home' onClick={() => openItem(item, cardId)}>
             <div className='card-body'>
@@ -17,7 +17,6 @@ const getTextOnlyPanel = (item, openItem, picture, cardId, listConfig) => (
             </div>
             <CardFooter
                 item={item}
-                picture={picture}
                 listConfig={listConfig}
             />
         </div>
@@ -28,7 +27,7 @@ const getTextOnlyPanel = (item, openItem, picture, cardId, listConfig) => (
 function TextOnlyCard ({items, title, product, openItem, isActive, cardId, listConfig}) {
     return (
         <CardRow title={title} product={product} isActive={isActive}>
-            {items.map((item) => getTextOnlyPanel(item, openItem, getPicture(item), cardId, listConfig))}
+            {items.map((item) => getTextOnlyPanel(item, openItem, cardId, listConfig))}
         </CardRow>
     );
 }
diff --git a/assets/components/cards/render/TopNewsOneByOneCard.jsx b/assets/components/cards/render/TopNewsOneByOneCard.jsx
index 330cc1f04..9629197a8 100644
--- a/assets/components/cards/render/TopNewsOneByOneCard.jsx
+++ b/assets/components/cards/render/TopNewsOneByOneCard.jsx
@@ -6,7 +6,6 @@ import CardMeta from './CardMeta';
 import {Embargo} from '../../../wire/components/fields/Embargo';
 
 const getTopNewsPanel = (item, picture, openItem, cardId, listConfig) => {
-
     const rendition = getThumbnailRendition(picture, true);
     const imageUrl = rendition && rendition.href;
     const caption = rendition && getCaption(picture);
@@ -19,7 +18,6 @@ const getTopNewsPanel = (item, picture, openItem, cardId, listConfig) => {
                 <Embargo item={item} isCard={true} />
                 <CardMeta
                     item={item}
-                    picture={picture}
                     listConfig={listConfig}
                     displayDivider={false}
                 />
diff --git a/assets/components/cards/render/TopNewsTwoByTwoCard.jsx b/assets/components/cards/render/TopNewsTwoByTwoCard.jsx
index ac8307bb7..feea2b71c 100644
--- a/assets/components/cards/render/TopNewsTwoByTwoCard.jsx
+++ b/assets/components/cards/render/TopNewsTwoByTwoCard.jsx
@@ -9,7 +9,6 @@ import CardBody from './CardBody';
 import {Embargo} from '../../../wire/components/fields/Embargo';
 
 const getTopNewsLeftPanel = (item, picture, openItem, cardId, listConfig) => {
-
     const rendition = getThumbnailRendition(picture, true);
     const imageUrl = rendition && rendition.href;
     const caption = rendition && getCaption(picture);
@@ -24,7 +23,6 @@ const getTopNewsLeftPanel = (item, picture, openItem, cardId, listConfig) => {
                 <Embargo item={item} isCard={true} />
                 <CardMeta
                     item={item}
-                    picture={picture}
                     displayDivider={false}
                     slugline={getSlugline(item, true)}
                 />
@@ -38,7 +36,6 @@ const getTopNewsLeftPanel = (item, picture, openItem, cardId, listConfig) => {
 };
 
 const getTopNewsRightPanel = (item, picture, openItem, cardId, listConfig) => {
-
     const rendition = getThumbnailRendition(picture);
     const imageUrl = rendition && rendition.href;
     const caption = rendition && getCaption(picture);
@@ -47,10 +44,7 @@ const getTopNewsRightPanel = (item, picture, openItem, cardId, listConfig) => {
         <div className='card card--home' onClick={() => openItem(item, cardId)}>
             <img className='card-img-top' src={imageUrl} alt={caption} />
             <CardBody item={item} displayDescription={false} displaySource={false} listConfig={listConfig}/>
-            <CardFooter
-                item={item}
-                picture={picture}
-            />
+            <CardFooter item={item} />
         </div>
     </div>);
 };
diff --git a/assets/styles/index.scss b/assets/styles/index.scss
index 5a9c655a3..c252efbff 100644
--- a/assets/styles/index.scss
+++ b/assets/styles/index.scss
@@ -2945,6 +2945,9 @@ a.wire-articles__versions {
         width: 100%;
         height: auto;
     }
+    audio {
+        width: 100%;
+    };
     .btn {
         align-self: flex-end;
     }
diff --git a/assets/ui/components/ArticleBodyHtml.jsx b/assets/ui/components/ArticleBodyHtml.jsx
index 274eaf048..6432d77a8 100644
--- a/assets/ui/components/ArticleBodyHtml.jsx
+++ b/assets/ui/components/ArticleBodyHtml.jsx
@@ -162,19 +162,23 @@ class ArticleBodyHtml extends React.PureComponent {
 
         container.innerHTML = html;
         container
-            .querySelectorAll('img')
-            .forEach((imageTag) => {
+            .querySelectorAll('img, video, audio')
+            .forEach((mediaTag) => {
                 // Using the tag's `src` attribute, find the Original Rendition's ID
                 const originalMediaId = imageEmbedOriginalIds.find((mediaId) => (
-                    !imageTag.src.startsWith('/assets/') &&
-                    imageTag.src.includes(mediaId))
+                    !mediaTag.src.startsWith('/assets/') &&
+                    mediaTag.src.includes(mediaId))
                 );
 
+                if (mediaTag instanceof HTMLVideoElement) {
+                    mediaTag.preload = 'metadata';
+                }
+
                 if (originalMediaId) {
                     // We now have the Original Rendition's ID
                     // Use that to update the `src` attribute to use Newshub's Web API
                     imageSourcesUpdated = true;
-                    imageTag.src = `/assets/${originalMediaId}`;
+                    mediaTag.src = `/assets/${originalMediaId}`;
                 }
             });
 
diff --git a/assets/ui/components/ArticleMedia.jsx b/assets/ui/components/ArticleMedia.jsx
index fa4954665..a01f9d39f 100644
--- a/assets/ui/components/ArticleMedia.jsx
+++ b/assets/ui/components/ArticleMedia.jsx
@@ -12,7 +12,7 @@ export default function ArticleMedia({isKilled, media, download}) {
             <div className='wire-column__preview__video'>
                 <span className='wire-column__preview__video-headline'>{media.headline || media.description_text}</span>
                 {media.type === 'video' && (
-                    <video controls>
+                    <video controls preload="metadata">
                         <source src={rendition.href} type={rendition.mimetype} />
                         {gettext('Your browser does not support playing video')}
                     </video>
diff --git a/assets/wire/components/ItemDetails.jsx b/assets/wire/components/ItemDetails.jsx
index cb971c3b7..22f4fc87b 100644
--- a/assets/wire/components/ItemDetails.jsx
+++ b/assets/wire/components/ItemDetails.jsx
@@ -8,13 +8,13 @@ import {isDisplayed, gettext, formatDate, formatTime} from 'utils';
 import ListItemPreviousVersions from './ListItemPreviousVersions';
 import ListItemNextVersion from './ListItemNextVersion';
 import {
-    getItemMedia,
+    getFeatureMedia,
+    getOtherMedia,
     showItemVersions,
     isKilled,
     DISPLAY_ABSTRACT,
     isPreformatted,
     isCustomRendition,
-    getPictureList,
 } from 'wire/utils';
 import types from 'wire/types';
 import Content from 'ui/components/Content';
@@ -48,8 +48,8 @@ function ItemDetails({
     listConfig,
     filterGroupLabels,
 }) {
-    const pictures = getPictureList(item);
-    const media = getItemMedia(item);
+    const featureMedia = getFeatureMedia(item);
+    const media = getOtherMedia(item);
     const itemType = isPreformatted(item) ? 'preformatted' : 'text';
 
     return (
@@ -67,14 +67,21 @@ function ItemDetails({
             </ContentHeader>
             <ArticleItemDetails disableTextSelection={detailsConfig.disable_text_selection}>
                 <ArticleContent>
-                    {pictures && pictures.map((pic) => (
-                        <ArticlePicture
-                            key={pic._id}
-                            picture={pic}
-                            isKilled={isKilled(item)}
-                            isCustomRendition={isCustomRendition(pic)}
-                        />
-                    ))}
+                    {featureMedia == null ? null : (
+                        featureMedia.type === 'picture' ? (
+                            <ArticlePicture
+                                picture={featureMedia}
+                                isKilled={isKilled(item)}
+                                isCustomRendition={isCustomRendition(featureMedia)}
+                            />
+                        ) : (
+                            <ArticleMedia
+                                media={featureMedia}
+                                isKilled={isKilled(item)}
+                                download={downloadMedia}
+                            />
+                        )
+                    )}
                     <ArticleContentWrapper itemType={itemType}>
                         <ArticleBody itemType={itemType}>
                             <ArticleEmbargoed item={item} />
diff --git a/assets/wire/components/PreviewMeta.jsx b/assets/wire/components/PreviewMeta.jsx
index 52b04b964..f9ed753d0 100644
--- a/assets/wire/components/PreviewMeta.jsx
+++ b/assets/wire/components/PreviewMeta.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {getPicture, getVideos} from 'wire/utils';
 import {FieldComponents} from './fields';
 import WireListItemIcons from './WireListItemIcons';
 
@@ -19,16 +18,11 @@ function PreviewMeta({
     listConfig,
     filterGroupLabels,
 }) {
-    const picture = getPicture(item);
     const fields = displayConfig.metadata_fields || DEFAULT_META_FIELDS;
 
     return (
         <div className="wire-articles__item__meta">
-            <WireListItemIcons 
-                item={item}
-                videos={getVideos(item)}
-                picture={picture}
-            />
+            <WireListItemIcons item={item} />
             <div className="wire-articles__item__meta-info">
                 <FieldComponents
                     config={fields}
diff --git a/assets/wire/components/WireListItem.jsx b/assets/wire/components/WireListItem.jsx
index 59afbbaa6..1fd96c0ec 100644
--- a/assets/wire/components/WireListItem.jsx
+++ b/assets/wire/components/WireListItem.jsx
@@ -12,12 +12,10 @@ import {
     getConfig,
 } from 'utils';
 import {
-    getPicture,
-    getThumbnailRendition,
+    getImageForList,
     showItemVersions,
     shortText,
     isKilled,
-    getVideos,
     getCaption,
 } from 'wire/utils';
 
@@ -140,8 +138,7 @@ class WireListItem extends React.Component {
             'wire-articles__item-select-visible': !LIST_ANIMATIONS,
             'wire-articles__item-select': LIST_ANIMATIONS,
         });
-        const picture = getPicture(item);
-        const videos = getVideos(item);
+        const listImage = getImageForList(item);
         const isMarketPlace = this.props.context === 'aapX';
         const fields = listConfig.metadata_fields || DEFAULT_META_FIELDS;
         const compactFields = listConfig.compact_metadata_fields || DEFAULT_COMPACT_META_FIELDS;
@@ -179,8 +176,6 @@ class WireListItem extends React.Component {
                                 {!isExtended && (
                                     <WireListItemIcons
                                         item={item}
-                                        picture={picture}
-                                        videos={videos}
                                         divider={false}
                                     />
                                 )}
@@ -192,11 +187,7 @@ class WireListItem extends React.Component {
 
                         {isExtended && !isMarketPlace && (
                             <div className="wire-articles__item__meta">
-                                <WireListItemIcons
-                                    item={item}
-                                    picture={picture}
-                                    videos={videos}
-                                />
+                                <WireListItemIcons item={item} />
                                 <div className="wire-articles__item__meta-info">
                                     <span className="bold">
                                         {getSlugline(item, true)}
@@ -230,11 +221,7 @@ class WireListItem extends React.Component {
                                 key="meta"
                                 className="wire-articles__item__meta"
                             >
-                                <WireListItemIcons
-                                    item={item}
-                                    picture={picture}
-                                    videos={videos}
-                                />
+                                <WireListItemIcons item={item} />
                                 <div className="wire-articles__item__meta-info">
                                     <span>
                                         {this.wordCount} {gettext('words')}
@@ -290,16 +277,12 @@ class WireListItem extends React.Component {
                         )}
                     </div>
 
-                    {isExtended &&
-                        !isKilled(item) &&
-                        getThumbnailRendition(picture) && (
+                    {isExtended && !isKilled(item) && listImage != null && (
                         <div className="wire-articles__item-image">
                             <figure>
                                 <img
-                                    src={
-                                        getThumbnailRendition(picture).href
-                                    }
-                                    alt={getCaption(picture)}
+                                    src={listImage.href}
+                                    alt={getCaption(listImage.item)}
                                 />
                             </figure>
                         </div>
diff --git a/assets/wire/components/WireListItemIcons.jsx b/assets/wire/components/WireListItemIcons.jsx
index b68ef0bb3..57c2a7bc3 100644
--- a/assets/wire/components/WireListItemIcons.jsx
+++ b/assets/wire/components/WireListItemIcons.jsx
@@ -1,26 +1,28 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {hasAudio, hasVideo} from 'wire/utils';
+import {getContentTypes} from 'wire/utils';
+
+function WireListItemIcons({item, divider}) {
+    const contentTypes = getContentTypes(item);
 
-function WireListItemIcons({item, picture, divider}) {
     return (
         <div className='wire-articles__item__icons'>
-            {item.type === 'text' &&
+            {contentTypes.has('text') &&
                 <span className='wire-articles__item__icon'>
                     <i className='icon--text icon--gray-dark'></i>
                 </span>
             }
-            {picture &&
+            {contentTypes.has('picture') &&
                 <span className='wire-articles__item__icon'>
                     <i className='icon--photo icon--gray-dark'></i>
                 </span>
             }
-            {hasVideo(item) &&
+            {contentTypes.has('video') &&
                 <span className='wire-articles__item__icon'>
                     <i className='icon--video icon--gray-dark'></i>
                 </span>
             }
-            {hasAudio(item) &&
+            {contentTypes.has('audio') &&
                 <span className='wire-articles__item__icon'>
                     <i className='icon--audio icon--gray-dark'></i>
                 </span>
@@ -34,7 +36,6 @@ function WireListItemIcons({item, picture, divider}) {
 
 WireListItemIcons.propTypes = {
     item: PropTypes.object,
-    picture: PropTypes.object,
     divider: PropTypes.bool,
 };
 
diff --git a/assets/wire/components/WirePreview.jsx b/assets/wire/components/WirePreview.jsx
index 757b59aa8..c15dfd896 100644
--- a/assets/wire/components/WirePreview.jsx
+++ b/assets/wire/components/WirePreview.jsx
@@ -5,13 +5,13 @@ import {isEmpty} from 'lodash';
 
 import {isDisplayed} from 'utils';
 import {
-    getItemMedia,
+    getFeatureMedia,
+    getOtherMedia,
     showItemVersions,
     isEqualItem,
     isKilled,
     DISPLAY_ABSTRACT,
     isCustomRendition,
-    getPictureList,
 } from 'wire/utils';
 import types from 'wire/types';
 
@@ -48,10 +48,10 @@ class WirePreview extends React.PureComponent {
 
     render() {
         const {item, user, actions, followStory, topics, previewConfig, downloadMedia, listConfig, filterGroupLabels} = this.props;
-        const pictures = getPictureList(item);
-        const media = getItemMedia(item);
-
+        const featureMedia = getFeatureMedia(item);
+        const media = getOtherMedia(item);
         const previousVersions = 'preview_versions';
+
         return (
             <Preview onCloseClick={this.props.closePreview} published={item.versioncreated}>
                 <div className='wire-column__preview__top-bar'>
@@ -77,14 +77,21 @@ class WirePreview extends React.PureComponent {
                     {isDisplayed('headline', previewConfig) && <ArticleHeadline item={item}/>}
                     {(isDisplayed('byline', previewConfig) || isDisplayed('located', previewConfig)) &&
                         <ArticleAuthor item={item} displayConfig={previewConfig} />}
-                    {pictures && pictures.map((pic)=> (
-                        <ArticlePicture
-                            key={pic._id}
-                            picture={pic}
-                            isKilled={isKilled(item)}
-                            isCustomRendition={isCustomRendition(pic)}
-                        />
-                    ))}
+                    {featureMedia == null ? null : (
+                        featureMedia.type === 'picture' ? (
+                            <ArticlePicture
+                                picture={featureMedia}
+                                isKilled={isKilled(item)}
+                                isCustomRendition={isCustomRendition(featureMedia)}
+                            />
+                        ) : (
+                            <ArticleMedia
+                                media={featureMedia}
+                                isKilled={isKilled(item)}
+                                download={downloadMedia}
+                            />
+                        )
+                    )}
                     {isDisplayed('metadata_section', previewConfig) &&
                     <PreviewMeta item={item} isItemDetail={false} inputRef={previousVersions} displayConfig={previewConfig} listConfig={listConfig}
                         filterGroupLabels={filterGroupLabels} />}
diff --git a/assets/wire/utils.js b/assets/wire/utils.js
index 3e22943cc..a58766539 100644
--- a/assets/wire/utils.js
+++ b/assets/wire/utils.js
@@ -49,6 +49,35 @@ function getRelatedItemsByType(item, type) {
     return item.type === type ? [item] : Object.values(get(item, 'associations', {}) || {}).filter((assoc) => get(assoc, 'type') === type);
 }
 
+export function getFeatureMedia(item) {
+    if (['picture', 'video', 'audio'].includes(item.type)) {
+        return item;
+    }
+
+    const featured = get(item, 'associations.featuremedia');
+
+    if (featured != null && ['picture', 'video', 'audio'].includes(featured.type)) {
+        return featured;
+    }
+
+    return getBodyPicture(item);
+}
+
+export function getOtherMedia(item) {
+    if (['picture', 'video', 'audio'].includes(item.type)) {
+        return null;
+    }
+
+    return Object.keys(item.associations || {})
+        .filter((key) => (
+            !key.startsWith('editor_') &&
+            key !== 'featuremedia' &&
+            item.associations[key] != null &&
+            ['video', 'audio'].includes(item.associations[key].type)
+        ))
+        .map((key) => item.associations[key]);
+}
+
 /**
  * Get picture for an item
  *
@@ -93,6 +122,21 @@ export function getThumbnailRendition(picture, large) {
     return get(picture, rendition, get(picture, 'renditions.thumbnail'));
 }
 
+export function getImageForList(item) {
+    const pictures = getPictureList(item);
+    let thumbnail;
+
+    for (let i = 0; i < pictures.length; i++) {
+        thumbnail = getThumbnailRendition(pictures[i]);
+
+        if (thumbnail != null && thumbnail.href != null) {
+            return {item: pictures[i], href: thumbnail.href};
+        }
+    }
+
+    return null;
+}
+
 /**
  * Get picture preview rendition
  *
@@ -226,5 +270,18 @@ function hasMedia(item, type) {
     return item != null && getItemMedia(item).some((_item) => _item.type === type);
 }
 
+export function getContentTypes(item) {
+    const contentTypes = new Set();
+
+    contentTypes.add(item.type);
+    Object.values(item.associations || {})
+        .map((association) => association.type)
+        .forEach((mediaType) => {
+            contentTypes.add(mediaType);
+        });
+
+    return contentTypes;
+}
+
 export const hasAudio = (item) => hasMedia(item, 'audio');
 export const hasVideo = (item) => hasMedia(item, 'video');
\ No newline at end of file
diff --git a/newsroom/upload.py b/newsroom/upload.py
index 145927e77..a2ccaa7ce 100644
--- a/newsroom/upload.py
+++ b/newsroom/upload.py
@@ -43,7 +43,9 @@ def get_upload(media_id, filename=None):
     response.cache_control.max_age = cache_for
     response.cache_control.s_max_age = cache_for
     response.cache_control.public = True
-    response.make_conditional(flask.request)
+
+    # Add ``accept_ranges`` & ``complete_length`` so video seeking is supported
+    response.make_conditional(flask.request, accept_ranges=True, complete_length=media_file.length)
 
     if filename is None and flask.request.args.get("filename"):
         filename = flask.request.args.get("filename")