43 lines
1.1 KiB
TypeScript
Executable File
43 lines
1.1 KiB
TypeScript
Executable File
import {usePlayerStore} from '@common/player/hooks/use-player-store';
|
|
import clsx from 'clsx';
|
|
import {HTMLAttributes, ReactElement} from 'react';
|
|
|
|
interface Props extends HTMLAttributes<HTMLDivElement> {
|
|
hideDuringPlayback?: boolean;
|
|
fallback?: ReactElement;
|
|
}
|
|
export function PlayerPoster({
|
|
className,
|
|
hideDuringPlayback = true,
|
|
fallback,
|
|
...domProps
|
|
}: Props) {
|
|
const posterUrl = usePlayerStore(s => s.posterUrl);
|
|
const shouldHidePoster = usePlayerStore(
|
|
s =>
|
|
hideDuringPlayback && s.playbackStarted && s.providerName !== 'htmlAudio',
|
|
);
|
|
if (!posterUrl && !fallback) return null;
|
|
return (
|
|
<div
|
|
{...domProps}
|
|
className={clsx(
|
|
'pointer-events-none flex max-h-full w-full items-center justify-center bg-black transition-opacity',
|
|
shouldHidePoster ? 'opacity-0' : 'opacity-100',
|
|
className,
|
|
)}
|
|
>
|
|
{posterUrl ? (
|
|
<img
|
|
loading="lazy"
|
|
src={posterUrl}
|
|
alt=""
|
|
className="max-h-full w-full flex-shrink-0 object-cover"
|
|
/>
|
|
) : (
|
|
fallback
|
|
)}
|
|
</div>
|
|
);
|
|
}
|