feat(card): tooltip the full video title only when it's clamped
The card title is line-clamped to 2 lines; measure overflow (ResizeObserver, re-checks on responsive resize) and set the native title attribute with the full text only when it's actually truncated, so hovering reveals the rest without a redundant tooltip on short titles.
This commit is contained in:
parent
2b5b6ac965
commit
cd9987c00f
1 changed files with 15 additions and 1 deletions
|
|
@ -1,4 +1,4 @@
|
||||||
import { memo } from "react";
|
import { memo, useEffect, useRef, useState } from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import {
|
import {
|
||||||
Bookmark,
|
Bookmark,
|
||||||
|
|
@ -264,12 +264,26 @@ function VideoCard({
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
// Show the full title in a native tooltip only when it's clamped (overflows its 2 lines).
|
||||||
|
const titleRef = useRef<HTMLAnchorElement>(null);
|
||||||
|
const [titleClamped, setTitleClamped] = useState(false);
|
||||||
|
useEffect(() => {
|
||||||
|
const el = titleRef.current;
|
||||||
|
if (!el) return;
|
||||||
|
const check = () => setTitleClamped(el.scrollHeight > el.clientHeight + 1);
|
||||||
|
check();
|
||||||
|
const ro = new ResizeObserver(check);
|
||||||
|
ro.observe(el);
|
||||||
|
return () => ro.disconnect();
|
||||||
|
}, [video.title]);
|
||||||
const title = (
|
const title = (
|
||||||
<a
|
<a
|
||||||
|
ref={titleRef}
|
||||||
href={video.watch_url}
|
href={video.watch_url}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
onClick={(e) => openInApp(e, video, onOpen)}
|
onClick={(e) => openInApp(e, video, onOpen)}
|
||||||
|
title={titleClamped ? video.title ?? undefined : undefined}
|
||||||
className="font-medium leading-snug line-clamp-2 hover:text-accent"
|
className="font-medium leading-snug line-clamp-2 hover:text-accent"
|
||||||
>
|
>
|
||||||
{video.title}
|
{video.title}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue