mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
fix(ui): expandable video preview image (#47964)
## What kind of change does this PR introduce? Restore preview image on ExpandableVideo trigger component. ## What is the current behavior? <img width="1441" height="698" alt="Screenshot 2026-07-15 at 14 08 58" src="https://github.com/user-attachments/assets/bdb1c4be-71a9-4601-b5c9-ab4fc97c48d1" /> <img width="1273" height="701" alt="Screenshot 2026-07-15 at 14 09 05" src="https://github.com/user-attachments/assets/b8026bcc-3d43-4faa-873b-1745b32c166c" /> ## What is the new behavior? <img width="1434" height="678" alt="Screenshot 2026-07-15 at 14 08 53" src="https://github.com/user-attachments/assets/8a3e64d1-5fe7-4ab9-a71b-3de5808d28b9" /> <img width="1160" height="672" alt="Screenshot 2026-07-15 at 14 08 48" src="https://github.com/user-attachments/assets/db598a47-ed8e-435b-b3ef-8ae9e76761a2" /> --- Also fixed a border-b issue on the PartnerCatalogDetail. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added thumbnail previews for partner catalog YouTube videos. - Improved video preview presentation with clearer overlays and stronger image blur. - **Bug Fixes** - Updated image loading support for YouTube thumbnail URLs. - Refined sticky tab header spacing and alignment while scrolling. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Francesco Sansalvadore authored and GitHub committed
1 parent
93e1631f19
commit
13330e6328
3 files changed
+42
-38
No files matched your search
@@ -261,45 +261,49 @@ export default function PartnerCatalogDetail({ partner, serializedListings }: Pr
|
||||
</div>
|
||||
</SectionContainerWithCn>
|
||||
<div className="absolute h-full w-full inset-0 z-20 pointer-events-none">
|
||||
<SectionContainerWithCn
|
||||
height="none"
|
||||
<div
|
||||
className={cn(
|
||||
'transition-all bg-background/90 -translate-y-3/4 dark:bg-background/95 backdrop-blur-xs border-b sticky top-16 z-20 flex justify-between items-center gap-4 py-2',
|
||||
'transition-all border-b bg-background/90 -translate-y-3/4 dark:bg-background/95 backdrop-blur-xs sticky top-16 z-20',
|
||||
showStickyBar
|
||||
? 'opacity-100 pointer-events-auto translate-y-0'
|
||||
: 'opacity-0 pointer-events-none'
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Image
|
||||
width={56}
|
||||
height={56}
|
||||
className="hidden sm:block bg-white p-0.5 shrink-0 h-6 w-6 rounded-full border"
|
||||
src={partner.logo}
|
||||
alt={partner.title}
|
||||
/>
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:gap-1">
|
||||
<span className="sm:text-lg truncate">{partner.title}</span>
|
||||
{activeListing && (
|
||||
<>
|
||||
<span className="text-foreground-lighter text-sm hidden sm:inline">—</span>
|
||||
<span className="text-foreground-lighter text-sm truncate">
|
||||
{activeListing.label}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
<SectionContainerWithCn
|
||||
height="none"
|
||||
className="flex justify-between items-center gap-4 py-2"
|
||||
>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Image
|
||||
width={56}
|
||||
height={56}
|
||||
className="hidden sm:block bg-white p-0.5 shrink-0 h-6 w-6 rounded-full border"
|
||||
src={partner.logo}
|
||||
alt={partner.title}
|
||||
/>
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:gap-1">
|
||||
<span className="sm:text-lg truncate">{partner.title}</span>
|
||||
{activeListing && (
|
||||
<>
|
||||
<span className="text-foreground-lighter text-sm hidden sm:inline">—</span>
|
||||
<span className="text-foreground-lighter text-sm truncate">
|
||||
{activeListing.label}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{installHref && (
|
||||
<Button asChild>
|
||||
<a href={installHref} target="_blank" rel="noreferrer">
|
||||
{activeListing.publishedInMarketplace
|
||||
? 'Install integration'
|
||||
: 'Add integration'}
|
||||
</a>
|
||||
</Button>
|
||||
)}
|
||||
</SectionContainerWithCn>
|
||||
{installHref && (
|
||||
<Button asChild>
|
||||
<a href={installHref} target="_blank" rel="noreferrer">
|
||||
{activeListing.publishedInMarketplace
|
||||
? 'Install integration'
|
||||
: 'Add integration'}
|
||||
</a>
|
||||
</Button>
|
||||
)}
|
||||
</SectionContainerWithCn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -331,6 +335,7 @@ function PartnerDetails({
|
||||
{activeListing.youtubeId && (
|
||||
<ExpandableVideo
|
||||
videoId={activeListing.youtubeId}
|
||||
imgUrl={`https://img.youtube.com/vi/${activeListing.youtubeId}/0.jpg`}
|
||||
imgOverlayText="Watch an introductory video"
|
||||
triggerContainerClassName="w-full"
|
||||
/>
|
||||
|
||||
@@ -45,7 +45,7 @@ module.exports = [
|
||||
protocol: 'https',
|
||||
hostname: 'img.youtube.com',
|
||||
port: '',
|
||||
pathname: '/vi/*',
|
||||
pathname: '/vi/**',
|
||||
},
|
||||
{
|
||||
protocol: 'https',
|
||||
|
||||
@@ -33,21 +33,20 @@ export function ExpandableVideo({
|
||||
}, [isMobile])
|
||||
|
||||
const CliccablePreview = () => (
|
||||
<div className="video-container overflow-hidden rounded-sm hover:cursor-pointer">
|
||||
<div className="video-container overflow-hidden rounded-sm hover:cursor-pointer bg-alternative border">
|
||||
<div
|
||||
className="
|
||||
absolute inset-0 z-10
|
||||
text-white
|
||||
flex flex-col gap-3
|
||||
items-center justify-center
|
||||
bg-alternative
|
||||
before:content['']
|
||||
before:absolute
|
||||
before:inset-0
|
||||
before:bg-black
|
||||
before:opacity-30
|
||||
before:opacity-60
|
||||
before:-z-10
|
||||
hover:before:opacity-50
|
||||
hover:before:opacity-80
|
||||
before:transition-opacity
|
||||
"
|
||||
>
|
||||
@@ -60,7 +59,7 @@ export function ExpandableVideo({
|
||||
fill
|
||||
sizes="100%"
|
||||
priority={priority}
|
||||
className="absolute inset-0 object-cover blur-xs scale-105"
|
||||
className="absolute inset-0 object-cover blur-md scale-105"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in new issue
Block a user