peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(player): make the unavailable overlay fully opaque

Browse source 
The fallback used a translucent background and left the iframe mounted, so
YouTube's own 'Video unavailable' screen bled through and overlapped our
message. Use a solid background and hide the iframe while the error shows.
This commit is contained in:
npeter83 2026-06-16 11:58:57 +02:00
parent 715eeffff8
commit de4d657d42
1 changed files with 4 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/components/PlayerModal.tsx
View file

@ -437,9 +437,11 @@ export default function PlayerModal({
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
<div className="relative aspect-video w-full bg-black rounded-t-2xl overflow-hidden"> <div className="relative aspect-video w-full bg-black rounded-t-2xl overflow-hidden">
<div ref={mountRef} className="w-full h-full" /> {/* Hide the iframe entirely on error so YouTube's own error screen can't bleed
through our overlay. */}
<div ref={mountRef} className={`w-full h-full ${playerError != null ? "invisible" : ""}`} />
{playerError != null && ( {playerError != null && (
<div className="absolute inset-0 grid place-items-center bg-bg/95 p-6 text-center"> <div className="absolute inset-0 grid place-items-center bg-bg p-6 text-center">
<div className="max-w-sm"> <div className="max-w-sm">
<AlertTriangle className="w-8 h-8 text-amber-500 mx-auto mb-3" /> <AlertTriangle className="w-8 h-8 text-amber-500 mx-auto mb-3" />
<h3 className="text-base font-semibold">{t("player.unavailableTitle")}</h3> <h3 className="text-base font-semibold">{t("player.unavailableTitle")}</h3>