96 lines
3.2 KiB
TypeScript
96 lines
3.2 KiB
TypeScript
import Image from 'next/future/image';
|
|
import Link from 'next/link';
|
|
import { Media } from 'src/interfaces/shared';
|
|
import { getProxiedIMDbImgUrl, modifyIMDbImg } from 'src/utils/helpers';
|
|
import styles from 'src/styles/modules/components/media/media.module.scss';
|
|
|
|
type Props = {
|
|
className: string;
|
|
media: Media;
|
|
};
|
|
|
|
// TODO: refactor this component.
|
|
|
|
const Media = ({ className, media }: Props) => {
|
|
return (
|
|
<div className={`${className} ${styles.media}`}>
|
|
{(media.trailers?.length || !!media.videos.total) && (
|
|
<section className={styles.videos}>
|
|
<h2 className='heading heading__secondary'>Videos</h2>
|
|
|
|
<div className={styles.videos__container}>
|
|
{media.trailers?.map(trailer => (
|
|
<div className={styles.trailer} key={trailer.id}>
|
|
<video
|
|
aria-label={trailer.caption ?? 'trailer video'}
|
|
controls
|
|
playsInline
|
|
poster={getProxiedIMDbImgUrl(modifyIMDbImg(trailer.thumbnail))}
|
|
className={styles.trailer__video}
|
|
preload='none'
|
|
muted
|
|
>
|
|
{trailer.urls.map(source => (
|
|
<source
|
|
key={source.url}
|
|
type='video/mp4'
|
|
src={getProxiedIMDbImgUrl(source.url)}
|
|
media={source.resolution !== 'SD' ? '(min-width: 450px)' : undefined}
|
|
data-res={source.resolution}
|
|
/>
|
|
))}
|
|
|
|
<p>
|
|
{trailer.caption}:{' '}
|
|
<Link href={getProxiedIMDbImgUrl(trailer.urls[0]?.url)}>
|
|
<a className='link'>link</a>
|
|
</Link>
|
|
</p>
|
|
</video>
|
|
</div>
|
|
))}
|
|
|
|
{!!media.videos.total &&
|
|
media.videos.videos.map(video => (
|
|
<Link href={`/video/${video.id}`} key={video.id}>
|
|
<a className={styles.video}>
|
|
<Image
|
|
className={styles.video__img}
|
|
src={modifyIMDbImg(video.thumbnail)}
|
|
alt=''
|
|
fill
|
|
sizes='400px'
|
|
/>
|
|
<p className={styles.video__caption}>
|
|
{video.caption} ({video.runtime}s)
|
|
</p>
|
|
</a>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)}
|
|
{!!media.images.total && (
|
|
<section className={styles.images}>
|
|
<h2 className='heading heading__secondary'>Images</h2>
|
|
<div className={styles.images__container}>
|
|
{media.images.images.map(image => (
|
|
<figure key={image.id} className={styles.image}>
|
|
<Image
|
|
className={styles.image__img}
|
|
src={modifyIMDbImg(image.url)}
|
|
alt=''
|
|
fill
|
|
sizes='400px'
|
|
/>
|
|
<figcaption className={styles.image__caption}>{image.caption.plainText}</figcaption>
|
|
</figure>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
export default Media;
|