/** * Copyright (C) 2019-2021 Carl Kittelberger * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU Affero General Public License as * published by the Free Software Foundation, either version 3 of the * License, or (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU Affero General Public License for more details. * * You should have received a copy of the GNU Affero General Public License * along with this program. If not, see . */ import React, { ReactElement } from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import ListGroup from 'react-bootstrap/ListGroup'; import Image from 'react-bootstrap/Image'; import Link from 'next/link'; import { RunInformation, Thumbnails } from 'util/datatypes/VideoList'; import { Runner as RunnerData, RunnerList } from 'util/datatypes/RunnerList'; import { Col, Row } from 'react-bootstrap'; import { getThumbnailURL } from '../util/thumbnail'; import FormattedDuration from './localization/FormattedDuration'; import style from './VideoListItem.module.scss'; import hourglassImage from '../images/hourglass.svg'; import Runner from './Runner'; export default function VideoListItem({ thumbnailServerURL, duration, id, slug, title, sourceVideoStart, sourceVideoEnd, runData, runners, thumbnails, }: { thumbnailServerURL: string, duration: number | string, id: string, slug: string, title: string, sourceVideoStart: number | string, sourceVideoEnd: number | string, runData: RunInformation, runners: RunnerList, thumbnails: Thumbnails, }) { let displayDuration = null; if (duration !== null) { if (typeof duration === 'string') { displayDuration = parseFloat(duration); } else { displayDuration = duration; } } else if ( sourceVideoStart !== null && sourceVideoEnd !== null && sourceVideoStart !== sourceVideoEnd ) { let videoEnd: number; if (typeof sourceVideoEnd === 'string') { videoEnd = parseFloat(sourceVideoEnd); } else { videoEnd = sourceVideoEnd; } let videoStart: number; if (typeof sourceVideoStart === 'string') { videoStart = parseFloat(sourceVideoStart); } else { videoStart = sourceVideoStart; } displayDuration = videoEnd - videoStart; } const listGroupItem = ( {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */} 0 ? getThumbnailURL(thumbnailServerURL, id, thumbnails[0].fileName) : hourglassImage } srcSet={ Array.isArray(thumbnails) && thumbnails.length > 0 ? thumbnails .map(({ sourceSize, fileName, }) => ( [ thumbnails.length > 0 ? getThumbnailURL(thumbnailServerURL, id, fileName) : hourglassImage, sourceSize, ] )) .map((item) => item.join(' ')) .join(', ') : '' } alt={title} /> {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
{title}
{runData?.category}
{runners && runners.length > 0 ? (
{' '} {runners.reduce((all: Array, runner: RunnerData) => [ ...all, all.length > 0 ? ' / ' : null, , ], [])}
) : ''} {displayDuration !== null ? ( {' '} ) : ( {' '} Coming up )}
); return listGroupItem; }