dwindown/meet-hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix ProductDetail webinar recording detection to support M3U8 and MP4

Browse Source 
Similar to MemberAccess.tsx, ProductDetail.tsx was only checking recording_url
and ignoring M3U8 and MP4 recordings from Adilo.

Added hasRecording() helper that checks all recording types and updated:
- renderActionButtons webinar card display
- Badges section (Rekaman Tersedia, Segera Hadir, Telah Lewat)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
dwindown
2026-01-16 15:47:43 +07:00
parent ca163e13cf
commit 221ae195e9
1 changed files with 10 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/pages/ProductDetail.tsx
View File

@@ -302,6 +302,12 @@ export default function ProductDetail() {
setExpandedLessonChapters(newSet); setExpandedLessonChapters(newSet);
}; };
// Check if product has any recording (YouTube, M3U8, or MP4)
const hasRecording = () => {
if (!product) return false;
return !!(product.recording_url || product.m3u8_url || product.mp4_url);
};
if (loading) { if (loading) {
return (<AppLayout><div className="container mx-auto px-4 py-8"><Skeleton className="h-10 w-1/2 mb-4" /><Skeleton className="h-6 w-1/4 mb-8" /><Skeleton className="h-64 w-full" /></div></AppLayout>); return (<AppLayout><div className="container mx-auto px-4 py-8"><Skeleton className="h-10 w-1/2 mb-4" /><Skeleton className="h-6 w-1/4 mb-8" /><Skeleton className="h-64 w-full" /></div></AppLayout>);
} }
@@ -332,7 +338,7 @@ export default function ProductDetail() {
</Button> </Button>
); );
case 'webinar': case 'webinar':
if (product.recording_url) { if (hasRecording()) {
return ( return (
<div className="space-y-4"> <div className="space-y-4">
<Card className="border-2 border-primary/20 bg-primary/5"> <Card className="border-2 border-primary/20 bg-primary/5">
@@ -528,13 +534,13 @@ export default function ProductDetail() {
<h1 className="text-4xl font-bold mb-2">{product.title}</h1> <h1 className="text-4xl font-bold mb-2">{product.title}</h1>
<div className="flex items-center gap-2 flex-wrap"> <div className="flex items-center gap-2 flex-wrap">
<Badge className="bg-primary text-primary-foreground capitalize">{product.type}</Badge> <Badge className="bg-primary text-primary-foreground capitalize">{product.type}</Badge>
{product.type === 'webinar' && product.recording_url && ( {product.type === 'webinar' && hasRecording() && (
<Badge className="bg-secondary text-primary">Rekaman Tersedia</Badge> <Badge className="bg-secondary text-primary">Rekaman Tersedia</Badge>
)} )}
{product.type === 'webinar' && !product.recording_url && product.event_start && new Date(product.event_start) > new Date() && ( {product.type === 'webinar' && !hasRecording() && product.event_start && new Date(product.event_start) > new Date() && (
<Badge className="bg-brand-accent text-white">Segera Hadir</Badge> <Badge className="bg-brand-accent text-white">Segera Hadir</Badge>
)} )}
{product.type === 'webinar' && !product.recording_url && product.event_start && new Date(product.event_start) <= new Date() && ( {product.type === 'webinar' && !hasRecording() && product.event_start && new Date(product.event_start) <= new Date() && (
<Badge className="bg-muted text-primary">Telah Lewat</Badge> <Badge className="bg-muted text-primary">Telah Lewat</Badge>
)} )}
</div> </div>