diff --git a/frontend/components/VideoListItem.tsx b/frontend/components/VideoListItem.tsx index 7ea5533..c647974 100644 --- a/frontend/components/VideoListItem.tsx +++ b/frontend/components/VideoListItem.tsx @@ -15,6 +15,8 @@ import FormattedDuration from './localization/FormattedDuration'; import style from './VideoListItem.module.scss'; import sanitizeTitle from '../util/sanitizeTitle'; +import hourglassImage from '../images/hourglass.svg'; + export default function VideoListItem({ thumbnailServerURL, duration, @@ -59,46 +61,63 @@ export default function VideoListItem({ displayDuration = videoEnd - videoStart; } const titleUrlSlug = sanitizeTitle(title); - return ( - - - - [ - getThumbnailURL(thumbnailServerURL, id, fileName, 90 * 1000, { + const listGroupItem = ( + + + [ + fileName + ? getThumbnailURL(thumbnailServerURL, id, fileName, 90 * 1000, { width, - }), - `${width}w`, - ]) - .map((item) => item.join(' ')) - .join(', ')} - alt={title} - /> - -
{title}
-

- {displayDuration !== null ? ( - - - {' '} - - - ) : ( - '' - )} -

-
-
-
- + }) + : hourglassImage, + `${width}w`, + ]) + .map((item) => item.join(' ')) + .join(', ')} + alt={title} + /> + +
{title}
+

+ {!fileName ? ( + + + {' '} + Coming up + + ) : ''} + {displayDuration !== null ? ( + + + {' '} + + + ) : ''} +

+
+
+
); + if (fileName) { + return ( + + {listGroupItem} + + ); + } + return listGroupItem; } diff --git a/frontend/images/hourglass.svg b/frontend/images/hourglass.svg new file mode 100644 index 0000000..7f0a19e --- /dev/null +++ b/frontend/images/hourglass.svg @@ -0,0 +1,102 @@ + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + diff --git a/frontend/pages/_app.tsx b/frontend/pages/_app.tsx index 5276e52..9ae70ca 100644 --- a/frontend/pages/_app.tsx +++ b/frontend/pages/_app.tsx @@ -6,12 +6,13 @@ import { } from '@fortawesome/fontawesome-svg-core'; import { faClock, + faCopy, faDownload, + faHourglass, + faLanguage, + faLightbulb, faSearch, faShare, - faLightbulb, - faCopy, - faLanguage, } from '@fortawesome/free-solid-svg-icons'; import { faLightbulb as farLightbulb } from '@fortawesome/free-regular-svg-icons'; import { faTwitch as fabTwitch } from '@fortawesome/free-brands-svg-icons'; @@ -50,15 +51,16 @@ import withSession from '../util/session'; fontawesomeSvgCoreConfig.autoAddCss = false; library.add( + fabTwitch, faClock, faCopy, faDownload, + faHourglass, faLanguage, - faSearch, - faShare, - fabTwitch, faLightbulb, farLightbulb, + faSearch, + faShare, ); Router.events.on('routeChangeStart', (url) => {