32 lines
1.4 KiB
TypeScript
32 lines
1.4 KiB
TypeScript
import { Star } from '../../lib/icons'
|
|
import { useCinemetaEpisode } from '../../lib/episode-meta-context'
|
|
import { parseImdbRating } from '../../lib/episode-meta'
|
|
|
|
interface Props {
|
|
season: number | null | undefined
|
|
episode: number | null | undefined
|
|
/** Tuned for inline placement next to small meta text. */
|
|
size?: 'sm' | 'md'
|
|
}
|
|
|
|
/**
|
|
* Yellow IMDB pill rendered next to episode meta when Cinemeta has a
|
|
* rating for this S/E. Silently renders nothing when the data is missing,
|
|
* so it adds zero clutter to series Cinemeta hasn't indexed.
|
|
*/
|
|
export default function EpisodeRatingChip({ season, episode, size = 'sm' }: Props) {
|
|
const cinemeta = useCinemetaEpisode(season, episode)
|
|
const rating = parseImdbRating(cinemeta?.imdbRating)
|
|
if (rating == null) return null
|
|
const cls =
|
|
size === 'sm'
|
|
? 'inline-flex items-center gap-1 h-4 px-1.5 rounded text-[10px] font-mono font-semibold text-yellow-300 bg-yellow-500/10 ring-1 ring-yellow-500/20 tabular-nums'
|
|
: 'inline-flex items-center gap-1 h-5 px-1.5 rounded text-[11px] font-mono font-semibold text-yellow-300 bg-yellow-500/10 ring-1 ring-yellow-500/20 tabular-nums'
|
|
return (
|
|
<span className={cls} title="IMDB rating (via Cinemeta)" aria-label={`IMDB rating ${rating.toFixed(1)}`}>
|
|
<Star size={size === 'sm' ? 9 : 10} className="text-yellow-400 fill-yellow-400" />
|
|
{rating.toFixed(1)}
|
|
</span>
|
|
)
|
|
}
|