v3: localization fixes, char counters & limits on all text fields, ux fixes

src/components/RichContentCard.tsx

@@ -10,9 +10,50 @@ interface RichContentCardProps {
 export default function RichContentCard(
   { richContent, compact = false }: RichContentCardProps,
 ) {
-  const { play } = useContext(PlayerContext);
+  const { play, current, playing } = useContext(PlayerContext);
 
   if (compact) {
+    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,
+            });
+          }}
+          aria-label={isPlaying ? "Pause" : "Play"}
+        >
+          {richContent.thumbnailUrl
+            ? (
+              <img
+                src={richContent.thumbnailUrl}
+                alt={richContent.title ?? ""}
+                className="rich-content-compact-thumbnail"
+                onError={(e) => {
+                  (e.target as HTMLImageElement).style.display = "none";
+                }}
+              />
+            )
+            : <span className="rich-content-compact-icon">▶</span>}
+          <span className="rich-content-play-overlay">
+            {isPlaying ? "⏸" : "▶"}
+          </span>
+        </button>
+      );
+    }
+
     return (
       <a
         href={richContent.url}