SDAN-726. Add the media icons (video, audio) to the home page dashboa…

…rd display, article preview and article view (#1186) * update version for the https://sofab.atlassian.net/browse/SDAN-726 Add the media icons (video, audio) to the home page dashboard display, article preview and article view. * update for fix building error * update for building error * update for review * update from review feedback regarding naming convention from audioIf to audioAvailable * update for review * remove space * remove space line
superdesk · Apr 23, 2024 · fa2a2b8 · fa2a2b8
1 parent c19c2ee
commit fa2a2b8
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 16 deletions.
diff --git a/assets/components/cards/render/CardFooter.jsx b/assets/components/cards/render/CardFooter.jsx
@@ -2,14 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import CardMeta from './CardMeta';
 
-function CardFooter({wordCount, pictureAvailable, source, versioncreated}) {
+function CardFooter({wordCount, pictureAvailable, source, versioncreated, audioAvailable, videoAvailable}) {
     return (<div className="card-footer">
         <CardMeta
+            audio={audioAvailable}
+            video={videoAvailable}
             pictureAvailable={pictureAvailable}
             wordCount={wordCount}
             source={source}
             versioncreated={versioncreated}
-
         />
     </div>);
 }
@@ -19,6 +20,12 @@ CardFooter.propTypes = {
     pictureAvailable: PropTypes.bool,
     source: PropTypes.string,
     versioncreated: PropTypes.string,
+    audioAvailable: PropTypes.array,
+    videoAvailable: PropTypes.array,
+};
+CardFooter.defaultProps = {
+    audioAvailable: [],
+    videoAvailable: [],
 };
 
-export default CardFooter;
+export default CardFooter;
diff --git a/assets/components/cards/render/CardMeta.jsx b/assets/components/cards/render/CardMeta.jsx
@@ -1,16 +1,28 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import {isEmpty} from 'lodash';
 import { gettext, shortDate, fullDate } from 'utils';
 
-function CardMeta({wordCount, pictureAvailable, source, versioncreated, displayDivider, slugline}) {
+function CardMeta({wordCount, pictureAvailable, source, versioncreated, displayDivider, slugline ,audio, video}) {
     return (<div className="wire-articles__item__meta">
         <div className="wire-articles__item__icons">
             <span className="wire-articles__item__icon">
                 <i className="icon--text icon--gray-light"></i>
             </span>
             {pictureAvailable && <span className="wire-articles__item__icon">
-                <i className="icon--photo icon--gray-light"></i>
+                <i className="icon--photo icon--gray-light">
+                </i>
             </span>}
+            {!isEmpty(audio) &&
+                <span className='wire-articles__item__icon'>
+                    <i className='icon--video icon--gray-light'></i>
+                </span>
+            }
+            {!isEmpty(video) &&
+                <span className='wire-articles__item__icon'>
+                    <i className='icon--audio icon--gray-light'></i>
+                </span>
+            }
             {displayDivider && <span className='wire-articles__item__divider'></span>}
         </div>
         <div className="wire-articles__item__meta-info">
@@ -34,10 +46,14 @@ CardMeta.propTypes = {
     versioncreated: PropTypes.string,
     displayDivider: PropTypes.bool,
     slugline: PropTypes.string,
+    audio: PropTypes.array,
+    video: PropTypes.array
 };
 
 CardMeta.defaultProps = {
     displayDivider: false,
+    audio: [],
+    video: [],
 };
 
-export default CardMeta;
+export default CardMeta;
diff --git a/assets/components/cards/render/LargePictureTextCard.jsx b/assets/components/cards/render/LargePictureTextCard.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {wordCount} from 'utils';
-import {getCaption, getPicture, getThumbnailRendition} from 'wire/utils';
+import {getCaption, getPicture, getThumbnailRendition ,getVideos ,getAudio} from 'wire/utils';
 import CardFooter from './CardFooter';
 import CardBody from './CardBody';
 import CardRow from './CardRow';
@@ -10,12 +10,16 @@ const getPictureTextPanel = (item, picture, openItem, cardId) => {
     const rendition = getThumbnailRendition(picture);
     const imageUrl = rendition && rendition.href;
     const caption = rendition && getCaption(picture);
+    const audio = item && getAudio(item);
+    const video = item && getVideos(item);
 
     return (<div key={item._id} className="col-sm-6 col-lg-4 d-flex mb-4">
         <div className="card card--home" onClick={() => openItem(item, cardId)}>
             <img className="card-img-top" src={imageUrl} alt={caption} />
             <CardBody item={item} displaySource={false} />
             <CardFooter
+                audioAvailable={audio}
+                videoAvailable={video}
                 wordCount={wordCount(item)}
                 pictureAvailable={!!picture}
                 source={item.source}

diff --git a/assets/components/cards/render/PictureTextCard.jsx b/assets/components/cards/render/PictureTextCard.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { wordCount } from 'utils';
-import { getPicture, getThumbnailRendition, getCaption } from 'wire/utils';
+import { getPicture, getThumbnailRendition, getCaption, getAudio ,getVideos } from 'wire/utils';
 import CardBody from './CardBody';
 import CardFooter from './CardFooter';
 import CardRow from './CardRow';
@@ -10,6 +10,8 @@ const getPictureTextPanel = (item, picture, openItem, withPictures, cardId) => {
     const rendition = withPictures && getThumbnailRendition(picture);
     const imageUrl = rendition && rendition.href;
     const caption = rendition && getCaption(picture);
+    const audio = item && getAudio(item);
+    const video = item && getVideos(item);
 
     return (<div key={item._id} className="col-sm-6 col-lg-3 d-flex mb-4">
         <div className="card card--home" onClick={() => openItem(item, cardId)}>
@@ -18,6 +20,9 @@ const getPictureTextPanel = (item, picture, openItem, withPictures, cardId) => {
             }
             <CardBody item={item} displayMeta={false} />
             <CardFooter
+                audioAvailable={audio}
+                videoAvailable={video}
+                caption={caption}
                 wordCount={wordCount(item)}
                 pictureAvailable={!!rendition}
                 source={item.source}

diff --git a/assets/components/cards/render/TopNewsOneByOneCard.jsx b/assets/components/cards/render/TopNewsOneByOneCard.jsx
@@ -1,22 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { wordCount } from 'utils';
-import { getPicture, getThumbnailRendition, getCaption } from 'wire/utils';
+import {getCaption, getPicture, getThumbnailRendition ,getVideos ,getAudio} from 'wire/utils';
 import CardRow from './CardRow';
 import CardMeta from './CardMeta';
 
 const getTopNewsPanel = (item, picture, openItem, cardId) => {
-    
+
     const rendition = getThumbnailRendition(picture, true);
     const imageUrl = rendition && rendition.href;
     const caption = rendition && getCaption(picture);
+    const audio = item && getAudio(item);
+    const video = item && getVideos(item);
 
     return (<div key={item._id} className='col-sm-12 col-md-6 d-flex mb-4'>
         <div className='card card--home' onClick={() => openItem(item, cardId)}>
             <img className='card-img-top' src={imageUrl} alt={caption} />
             <div className='card-body'>
                 <h4 className='card-title'>{item.headline}</h4>
                 <CardMeta
+                    audioAvailable={audio}
+                    videoAvailable={video}
                     pictureAvailable={!!picture}
                     wordCount={wordCount(item)}
                     source={item.source}

diff --git a/assets/components/cards/render/TopNewsTwoByTwoCard.jsx b/assets/components/cards/render/TopNewsTwoByTwoCard.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {wordCount, getSlugline} from 'utils';
-import { getPicture, getThumbnailRendition, getCaption } from 'wire/utils';
+import {getPicture, getThumbnailRendition, getCaption, getAudio, getVideos} from 'wire/utils';
 import CardRow from './CardRow';
 import CardFooter from './CardFooter';
 import CardMeta from './CardMeta';
@@ -12,6 +12,8 @@ const getTopNewsLeftPanel = (item, picture, openItem, cardId) => {
     const rendition = getThumbnailRendition(picture, true);
     const imageUrl = rendition && rendition.href;
     const caption = rendition && getCaption(picture);
+    const audio = item && getAudio(item);
+    const video = item && getVideos(item);
 
     return (<div key={item._id} className='col-sm-6 col-md-9 d-flex mb-4'>
         <div className='card card--home card--horizontal' onClick={() => openItem(item, cardId)}>
@@ -21,6 +23,8 @@ const getTopNewsLeftPanel = (item, picture, openItem, cardId) => {
             <div className='card-body'>
                 <h2 className='card-title'>{item.headline}</h2>
                 <CardMeta
+                    audio={audio}
+                    video={video}
                     pictureAvailable={!!picture}
                     wordCount={wordCount(item)}
                     source={item.source}
@@ -42,12 +46,16 @@ const getTopNewsRightPanel = (item, picture, openItem, cardId) => {
     const rendition = getThumbnailRendition(picture);
     const imageUrl = rendition && rendition.href;
     const caption = rendition && getCaption(picture);
+    const audio = item && getAudio(item);
+    const video = item && getVideos(item);
 
     return (<div key={item._id} className='col-sm-6 col-md-3 d-flex mb-4'>
         <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}/>
             <CardFooter
+                audioAvailable ={audio}
+                videoAvailable = {video}
                 wordCount={wordCount(item)}
                 pictureAvailable={!!picture}
                 source={item.source}

diff --git a/assets/styles/index.scss b/assets/styles/index.scss
@@ -1825,7 +1825,10 @@ article.list {
 
 .wire-articles__item__icons {
     display: contents;
-    flex-wrap: wrap;
+    // The flex-wrap property is commented out because flex: 1 is already set on the flex items.
+    // With flex: 1, the flex items will grow and shrink as needed to fit within the flex container on a single line.
+    // Uncommenting flex-wrap: wrap; would allow the flex items icons to wrap onto multiple lines, which is not desired in the article popup.
+    // flex-wrap: wrap;
     margin-bottom: 10px;
 
     @include md {

diff --git a/assets/wire/components/PreviewMeta.jsx b/assets/wire/components/PreviewMeta.jsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {gettext, wordCount, isDisplayed, characterCount} from 'utils';
-import { getPicture } from 'wire/utils';
+import { getPicture, getVideos ,getAudio} from 'wire/utils';
+import {isEmpty} from 'lodash';
 
 const DEFAULT_URGENCY = 4;
-
-
-
 function PreviewMeta({item, isItemDetail, inputRef, displayConfig}) {
     const picture = getPicture(item);
+    const audio = item && getAudio(item);
+    const video = item && getVideos(item);
     const onClick = () => {
         const previousVersions = document.getElementById(inputRef);
         previousVersions && previousVersions.scrollIntoView();
@@ -27,6 +27,16 @@ function PreviewMeta({item, isItemDetail, inputRef, displayConfig}) {
                         <i className='icon--photo icon--gray-light'></i>
                     </span>
                 )}
+                {!isEmpty(video) &&
+                <span className='wire-articles__item__icon'>
+                    <i className='icon--video icon--gray-light'></i>
+                </span>
+                }
+                {!isEmpty(audio) &&
+                <span className='wire-articles__item__icon'>
+                    <i className='icon--audio icon--gray-light'></i>
+                </span>
+                }
             </div>
             <div className='wire-articles__item__meta-info'>
                 {isDisplayed('urgency', displayConfig) &&