first commit

resources/client/titles/title-poster/title-poster.tsx

@@ -0,0 +1,97 @@
+import {useTrans} from '@common/i18n/use-trans';
+import {message} from '@common/i18n/message';
+import clsx from 'clsx';
+import {Title} from '@app/titles/models/title';
+import {TitleLink} from '@app/titles/title-link';
+import {ImageSize, useImageSrc} from '@app/images/use-image-src';
+import {Link} from 'react-router-dom';
+import {getWatchLink} from '@app/videos/watch-page/get-watch-link';
+import {MediaPlayIcon} from '@common/icons/media/media-play';
+import {IconButton} from '@common/ui/buttons/icon-button';
+import {Fragment} from 'react';
+import {MovieIcon} from '@common/icons/material/Movie';
+
+interface Props {
+  title: Title;
+  className?: string;
+  size?: string;
+  lazy?: boolean;
+  srcSize?: ImageSize;
+  aspect?: string;
+  showPlayButton?: boolean;
+  link?: string;
+}
+export function TitlePoster({
+  title,
+  className,
+  size = 'w-full',
+  srcSize,
+  lazy = true,
+  aspect = 'aspect-poster',
+  showPlayButton,
+  link,
+}: Props) {
+  const {trans} = useTrans();
+  const src = useImageSrc(title?.poster, {size: srcSize});
+  if (!title.primary_video) {
+    showPlayButton = false;
+  }
+
+  const imageClassName = clsx(
+    'h-full w-full rounded bg-fg-base/4 object-cover',
+    !src ? 'flex items-center justify-center' : 'block',
+  );
+
+  const image = src ? (
+    <img
+      className={imageClassName}
+      decoding="async"
+      draggable={false}
+      loading={lazy ? 'lazy' : 'eager'}
+      src={src}
+      alt={trans(message('Poster for :name', {values: {name: title.name}}))}
+    />
+  ) : (
+    <span className={clsx(imageClassName, 'overflow-hidden')}>
+      <MovieIcon className="max-w-[60%] text-divider" size="text-6xl" />
+    </span>
+  );
+
+  const linkChildren = (
+    <Fragment>
+      {image}
+      <span className="pointer-events-none absolute inset-0 block bg-black opacity-0 transition-opacity group-hover:opacity-10" />
+    </Fragment>
+  );
+
+  return (
+    <div
+      className={clsx(size, aspect, className, 'group relative flex-shrink-0')}
+    >
+      {link ? (
+        <Link to={link} className="contents">
+          {linkChildren}
+        </Link>
+      ) : (
+        <TitleLink title={title} displayContents>
+          {linkChildren}
+        </TitleLink>
+      )}
+      {showPlayButton ? (
+        <div className="absolute bottom-14 left-14">
+          <IconButton
+            color="white"
+            variant="flat"
+            className="shadow-md"
+            radius="rounded-full"
+            elementType={Link}
+            to={getWatchLink(title.primary_video)}
+            aria-label={`Play ${title.name}`}
+          >
+            <MediaPlayIcon />
+          </IconButton>
+        </div>
+      ) : null}
+    </div>
+  );
+}