gerbeur/src/components/RichContentCard.tsx

import { useContext } from "react";
import type { RichContent } from "../model.ts";
import { PlayerContext } from "../contexts/PlayerContext.ts";
import Thumbnail from "./Thumbnail.tsx";

interface RichContentCardProps {
  richContent: RichContent;
  compact?: boolean;
  /** Overrides richContent.thumbnailUrl with a custom dump thumbnail, if set. */
  thumbnailOverrideUrl?: string;
  /** Link back to the owning dump, surfaced as the global player's title. */
  dumpHref?: string;
}

export default function RichContentCard(
  { richContent, compact = false, thumbnailOverrideUrl, dumpHref }:
    RichContentCardProps,
) {
  const { play, current, playing } = useContext(PlayerContext);
  const thumbnailSrc = thumbnailOverrideUrl ?? richContent.thumbnailUrl;

  const placeholder = {
    url: richContent.url,
    accentColor: richContent.accentColor,
    faviconUrl: richContent.faviconUrl,
    siteName: richContent.siteName,
  };

  if (compact) {
    const thumbnail = (
      <Thumbnail
        src={thumbnailSrc}
        alt={richContent.title ?? ""}
        className="rich-content-compact-thumbnail"
        placeholder={placeholder}
        placeholderClassName="rich-content-compact-thumbnail"
      />
    );

    if (richContent.embedUrl) {
      const isActive = current?.kind === "embed" &&
        current.embedUrl === richContent.embedUrl;
      const isPlaying = isActive && playing;
      return (
        <button
          type="button"
          className={`rich-content-thumbnail-btn${
            isActive ? " is-playing" : ""
          }`}
          onClick={(e) => {
            e.preventDefault();
            e.stopPropagation();
            play({
              kind: "embed",
              embedUrl: richContent.embedUrl!,
              title: richContent.title,
              type: richContent.type,
              dumpHref,
            });
          }}
          aria-label={isPlaying ? "Pause" : "Play"}
        >
          {thumbnail}
          <span className="rich-content-play-overlay">
            {isPlaying ? "⏸" : "▶"}
          </span>
        </button>
      );
    }

    return (
      <a
        href={richContent.url}
        target="_blank"
        rel="noopener noreferrer"
        className="rich-content-compact"
        onClick={(e) => e.stopPropagation()}
      >
        {thumbnail}
      </a>
    );
  }

  const canPlay = !!richContent.embedUrl;

  const thumbnailImg = (
    <Thumbnail
      src={thumbnailSrc}
      alt={richContent.title ?? ""}
      className="rich-content-thumbnail"
      placeholder={placeholder}
      placeholderClassName="rich-content-thumbnail"
    />
  );

  const thumbnail = canPlay
    ? (
      <button
        type="button"
        className="rich-content-thumbnail-btn"
        onClick={() =>
          play({
            kind: "embed",
            embedUrl: richContent.embedUrl!,
            title: richContent.title,
            type: richContent.type,
            dumpHref,
          })}
        aria-label="Play"
      >
        {thumbnailImg}
        <span className="rich-content-play-overlay">▶</span>
      </button>
    )
    : thumbnailImg;

  return (
    <div className={`rich-content-card rich-content-card--${richContent.type}`}>
      {thumbnail}
      <a
        href={richContent.url}
        target="_blank"
        rel="noopener noreferrer"
        className="rich-content-body"
      >
        {richContent.siteName && (
          <span className="rich-content-badge">{richContent.siteName}</span>
        )}
        {richContent.title && (
          <p className="rich-content-title">{richContent.title}</p>
        )}
        {richContent.description && (
          <p className="rich-content-description">
            {richContent.description}
          </p>
        )}
        <span className="rich-content-url">{richContent.url}</span>
      </a>
    </div>
  );
}