Compare commits
3 Commits
29871cf834
...
b2853a952b
| Author | SHA1 | Date | |
|---|---|---|---|
|
b2853a952b | ||
|
|
9646309a0a | ||
|
|
a1626a5c20 |
@ -134,8 +134,20 @@ export class EcosystemController {
|
||||
try {
|
||||
const data = req.body;
|
||||
|
||||
// Auto-extract YouTube thumbnail if not provided
|
||||
let title = data.title;
|
||||
let description = data.description || null;
|
||||
let thumbnailUrl = data.thumbnailUrl || null;
|
||||
|
||||
if ((!title || !description || !thumbnailUrl) && data.youtubeUrl) {
|
||||
const meta = await this.scrapeMetaInternal(data.youtubeUrl);
|
||||
if (meta) {
|
||||
if (!title) title = meta.title;
|
||||
if (!description) description = meta.description || null;
|
||||
if (!thumbnailUrl) thumbnailUrl = meta.thumbnailUrl || null;
|
||||
}
|
||||
}
|
||||
|
||||
// Auto-extract YouTube thumbnail if not provided and it's YouTube
|
||||
if (!thumbnailUrl && data.youtubeUrl) {
|
||||
const videoId = this.extractYouTubeVideoId(data.youtubeUrl);
|
||||
if (videoId) {
|
||||
@ -145,8 +157,8 @@ export class EcosystemController {
|
||||
|
||||
const created = await prisma.contentShowcase.create({
|
||||
data: {
|
||||
title: data.title,
|
||||
description: data.description || null,
|
||||
title: title || 'Media Showcase Item',
|
||||
description,
|
||||
youtubeUrl: data.youtubeUrl,
|
||||
thumbnailUrl,
|
||||
redirectUrl: data.redirectUrl || null,
|
||||
@ -167,9 +179,20 @@ export class EcosystemController {
|
||||
const { id } = req.params;
|
||||
const data = req.body;
|
||||
|
||||
// Auto-extract YouTube thumbnail if URL changed and no explicit thumbnail
|
||||
let title = data.title;
|
||||
let description = data.description;
|
||||
let thumbnailUrl = data.thumbnailUrl;
|
||||
if (thumbnailUrl === undefined && data.youtubeUrl) {
|
||||
|
||||
if (data.youtubeUrl) {
|
||||
const meta = await this.scrapeMetaInternal(data.youtubeUrl);
|
||||
if (meta) {
|
||||
if (title === undefined || title === null || title === '') title = meta.title;
|
||||
if (description === undefined) description = meta.description || null;
|
||||
if (thumbnailUrl === undefined) thumbnailUrl = meta.thumbnailUrl || null;
|
||||
}
|
||||
}
|
||||
|
||||
if (!thumbnailUrl && data.youtubeUrl) {
|
||||
const videoId = this.extractYouTubeVideoId(data.youtubeUrl);
|
||||
if (videoId) {
|
||||
thumbnailUrl = `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`;
|
||||
@ -179,8 +202,8 @@ export class EcosystemController {
|
||||
const updated = await prisma.contentShowcase.update({
|
||||
where: { id },
|
||||
data: {
|
||||
title: data.title,
|
||||
description: data.description,
|
||||
title,
|
||||
description,
|
||||
youtubeUrl: data.youtubeUrl,
|
||||
thumbnailUrl,
|
||||
redirectUrl: data.redirectUrl,
|
||||
@ -210,6 +233,21 @@ export class EcosystemController {
|
||||
|
||||
// Helper: Extract video ID from various YouTube URL formats
|
||||
private extractYouTubeVideoId(url: string): string | null {
|
||||
try {
|
||||
const urlObj = new URL(url);
|
||||
if (urlObj.hostname.includes('youtu.be')) {
|
||||
return urlObj.pathname.slice(1).split(/[?#]/)[0];
|
||||
}
|
||||
if (urlObj.pathname.includes('/shorts/') || urlObj.pathname.includes('/embed/')) {
|
||||
const parts = urlObj.pathname.split('/');
|
||||
return parts.pop()?.split(/[?#]/)[0] || null;
|
||||
}
|
||||
if (urlObj.searchParams.has('v')) {
|
||||
return urlObj.searchParams.get('v');
|
||||
}
|
||||
} catch (e) {
|
||||
// Fallback to regex
|
||||
}
|
||||
const patterns = [
|
||||
/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/|youtube\.com\/shorts\/)([a-zA-Z0-9_-]{11})/,
|
||||
/(?:youtube-nocookie\.com\/embed\/)([a-zA-Z0-9_-]{11})/,
|
||||
@ -221,6 +259,113 @@ export class EcosystemController {
|
||||
return null;
|
||||
}
|
||||
|
||||
private async scrapeMetaInternal(url: string): Promise<{ title?: string; description?: string; thumbnailUrl?: string } | null> {
|
||||
try {
|
||||
const normUrl = url.trim();
|
||||
const lowerUrl = normUrl.toLowerCase();
|
||||
|
||||
// Case 1: Twitter / X
|
||||
if (lowerUrl.includes('twitter.com') || lowerUrl.includes('x.com')) {
|
||||
const oembedUrl = `https://publish.twitter.com/oembed?url=${encodeURIComponent(normUrl)}`;
|
||||
const resOembed = await fetch(oembedUrl);
|
||||
if (resOembed.ok) {
|
||||
const data = await resOembed.json() as any;
|
||||
let description = '';
|
||||
if (data.html) {
|
||||
const pMatch = data.html.match(/<p[^>]*>([\s\S]*?)<\/p>/i);
|
||||
if (pMatch) {
|
||||
description = pMatch[1].replace(/<[^>]*>/g, '').trim();
|
||||
}
|
||||
}
|
||||
return {
|
||||
title: data.author_name ? `Tweet by ${data.author_name}` : 'Tweet Content',
|
||||
description,
|
||||
thumbnailUrl: undefined
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Case 2: Instagram
|
||||
if (lowerUrl.includes('instagram.com')) {
|
||||
const oembedUrl = `https://graph.facebook.com/v25.0/instagram_oembed?url=${encodeURIComponent(normUrl)}`;
|
||||
const resOembed = await fetch(oembedUrl);
|
||||
if (resOembed.ok) {
|
||||
const data = await resOembed.json() as any;
|
||||
return {
|
||||
title: data.author_name ? `Instagram post by ${data.author_name}` : 'Instagram Post/Reel',
|
||||
description: data.title || 'Instagram Content',
|
||||
thumbnailUrl: data.thumbnail_url || undefined
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Case 3: YouTube
|
||||
const videoId = this.extractYouTubeVideoId(normUrl);
|
||||
if (videoId) {
|
||||
let title = '';
|
||||
let thumbnailUrl = `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`;
|
||||
|
||||
try {
|
||||
const oembedUrl = `https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=${videoId}&format=json`;
|
||||
const oembedRes = await fetch(oembedUrl);
|
||||
if (oembedRes.ok) {
|
||||
const data = await oembedRes.json() as any;
|
||||
title = data.title || '';
|
||||
thumbnailUrl = data.thumbnail_url || thumbnailUrl;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('oEmbed fetch error:', err);
|
||||
}
|
||||
|
||||
let description = '';
|
||||
try {
|
||||
const watchUrl = `https://www.youtube.com/watch?v=${videoId}`;
|
||||
const pageRes = await fetch(watchUrl, {
|
||||
headers: {
|
||||
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36',
|
||||
'Accept-Language': 'en-US,en;q=0.9'
|
||||
}
|
||||
});
|
||||
if (pageRes.ok) {
|
||||
const html = await pageRes.text();
|
||||
const playerResponse = this.extractJsonFromHtml(html, 'ytInitialPlayerResponse = ');
|
||||
if (playerResponse && playerResponse.videoDetails) {
|
||||
description = playerResponse.videoDetails.shortDescription || '';
|
||||
if (playerResponse.videoDetails.title && !title) {
|
||||
title = playerResponse.videoDetails.title;
|
||||
}
|
||||
}
|
||||
|
||||
if (!description) {
|
||||
const descMatch = html.match(/<meta\s+property="og:description"\s+content="([^"]*)"/i) ||
|
||||
html.match(/<meta\s+name="description"\s+content="([^"]*)"/i);
|
||||
if (descMatch && descMatch[1]) {
|
||||
description = descMatch[1]
|
||||
.replace(/"/g, '"')
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/'/g, "'")
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('HTML scrape error:', err);
|
||||
}
|
||||
|
||||
return {
|
||||
title: title || undefined,
|
||||
description: description || undefined,
|
||||
thumbnailUrl
|
||||
};
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('scrapeMetaInternal error:', e);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
private extractJsonFromHtml(html: string, targetStr: string): any {
|
||||
const idx = html.indexOf(targetStr);
|
||||
if (idx === -1) return null;
|
||||
|
||||
@ -153,7 +153,7 @@ export const AssetCard: React.FC<AssetCardProps> = ({
|
||||
}
|
||||
onViewDetails(asset);
|
||||
}}
|
||||
className={`group bg-ink-0 border rounded-xl p-4 transition-all duration-300 flex flex-col justify-between cursor-pointer min-h-[410px] ${
|
||||
className={`group bg-ink-0 border rounded-xl p-4 transition-[border-color,box-shadow,background-color] duration-300 flex flex-col justify-between cursor-pointer min-h-[410px] ${
|
||||
isExpanded
|
||||
? 'absolute z-20 top-0 left-0 right-0 h-auto shadow-2xl border-ink-300 bg-ink-0'
|
||||
: isRecommended
|
||||
|
||||
@ -16,6 +16,21 @@ import type { ContentShowcase } from '../services/ecosystem-api';
|
||||
|
||||
// ── Helper: Extract YouTube video ID ──
|
||||
const extractYouTubeVideoId = (url: string): string | null => {
|
||||
try {
|
||||
const urlObj = new URL(url);
|
||||
if (urlObj.hostname.includes('youtu.be')) {
|
||||
return urlObj.pathname.slice(1).split(/[?#]/)[0];
|
||||
}
|
||||
if (urlObj.pathname.includes('/shorts/') || urlObj.pathname.includes('/embed/')) {
|
||||
const parts = urlObj.pathname.split('/');
|
||||
return parts.pop()?.split(/[?#]/)[0] || null;
|
||||
}
|
||||
if (urlObj.searchParams.has('v')) {
|
||||
return urlObj.searchParams.get('v');
|
||||
}
|
||||
} catch (e) {
|
||||
// Fallback to regex
|
||||
}
|
||||
const patterns = [
|
||||
/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/|youtube\.com\/shorts\/)([a-zA-Z0-9_-]{11})/,
|
||||
/(?:youtube-nocookie\.com\/embed\/)([a-zA-Z0-9_-]{11})/,
|
||||
@ -59,7 +74,7 @@ const YouTubeEmbed: React.FC<{ videoId: string }> = ({ videoId }) => {
|
||||
const InstagramEmbed: React.FC<{ postId: string; size: 'compact' | 'theater' | 'cinema' }> = ({ postId, size }) => {
|
||||
const maxWidthClass = size === 'compact' ? 'max-w-[360px]' : size === 'theater' ? 'max-w-[420px]' : 'max-w-[480px]';
|
||||
return (
|
||||
<div className={`w-full ${maxWidthClass} aspect-[9/16] max-h-[75vh] mx-auto bg-ink-950 rounded-2xl overflow-hidden shadow-2xl flex justify-center items-center`}>
|
||||
<div className={`w-full ${maxWidthClass} aspect-[9/16] max-h-full mx-auto bg-ink-950 rounded-2xl overflow-hidden shadow-2xl flex justify-center items-center`}>
|
||||
<iframe
|
||||
src={`https://www.instagram.com/p/${postId}/embed`}
|
||||
className="w-full h-full border-0"
|
||||
@ -91,7 +106,7 @@ const TwitterEmbed: React.FC<{ url: string }> = ({ url }) => {
|
||||
}, [url]);
|
||||
|
||||
return (
|
||||
<div className="w-full max-h-[70vh] overflow-y-auto flex justify-center bg-white p-6 rounded-2xl">
|
||||
<div className="w-full max-h-full overflow-y-auto flex justify-center bg-white p-4 sm:p-6 rounded-2xl">
|
||||
<blockquote className="twitter-tweet" data-align="center">
|
||||
<a href={url}>Loading Tweet...</a>
|
||||
</blockquote>
|
||||
@ -100,15 +115,20 @@ const TwitterEmbed: React.FC<{ url: string }> = ({ url }) => {
|
||||
};
|
||||
|
||||
// ── Collapsible Video Description Component ──
|
||||
const VideoDescription: React.FC<{ text: string }> = ({ text }) => {
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
const shouldCollapse = text.length > 180 || text.includes('\n');
|
||||
interface VideoDescriptionProps {
|
||||
text: string;
|
||||
isExpanded: boolean;
|
||||
onToggleExpand: () => void;
|
||||
}
|
||||
|
||||
const VideoDescription: React.FC<VideoDescriptionProps> = ({ text, isExpanded, onToggleExpand }) => {
|
||||
const shouldCollapse = text.length > 120 || text.includes('\n');
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div className="space-y-1">
|
||||
<p
|
||||
className={`text-[11px] font-medium text-ink-500 leading-relaxed transition-all duration-300 ${
|
||||
isExpanded ? '' : 'line-clamp-3'
|
||||
className={`text-[11px] font-medium text-ink-500 leading-relaxed overflow-hidden ${
|
||||
isExpanded ? '' : 'line-clamp-2'
|
||||
}`}
|
||||
style={{ whiteSpace: isExpanded ? 'pre-wrap' : 'normal' }}
|
||||
>
|
||||
@ -118,7 +138,7 @@ const VideoDescription: React.FC<{ text: string }> = ({ text }) => {
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsExpanded(!isExpanded);
|
||||
onToggleExpand();
|
||||
}}
|
||||
className="inline-flex items-center text-[10px] font-black uppercase tracking-wider text-blue-600 hover:text-blue-800 transition-colors focus:outline-none cursor-pointer"
|
||||
>
|
||||
@ -133,6 +153,7 @@ export const ShowcasePage: React.FC = () => {
|
||||
const [items, setItems] = useState<ContentShowcase[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [playingVideoId, setPlayingVideoId] = useState<string | null>(null);
|
||||
const [expandedItemId, setExpandedItemId] = useState<string | null>(null);
|
||||
|
||||
// Resizable Lightbox state: compact | theater | cinema
|
||||
const [lightboxSize, setLightboxSize] = useState<'compact' | 'theater' | 'cinema'>('compact');
|
||||
@ -195,92 +216,104 @@ export const ShowcasePage: React.FC = () => {
|
||||
const isIg = item.youtubeUrl.includes('instagram.com');
|
||||
const isTw = item.youtubeUrl.includes('twitter.com') || item.youtubeUrl.includes('x.com');
|
||||
const thumbnail = item.thumbnailUrl || (ytId ? `https://img.youtube.com/vi/${ytId}/hqdefault.jpg` : null);
|
||||
const isExpanded = expandedItemId === item.id;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={item.id}
|
||||
className="group flex flex-col bg-ink-0 border border-ink-200 hover:border-ink-350 rounded-2xl overflow-hidden hover:shadow-xl transition-all duration-500"
|
||||
>
|
||||
{/* Video Player / Thumbnail */}
|
||||
<div className="relative aspect-video bg-ink-900 overflow-hidden">
|
||||
{thumbnail ? (
|
||||
<img
|
||||
src={thumbnail}
|
||||
alt={item.title}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
|
||||
/>
|
||||
) : (
|
||||
/* Platform Fallback Gradients */
|
||||
<div className={`w-full h-full flex items-center justify-center ${
|
||||
isIg
|
||||
? 'bg-gradient-to-tr from-yellow-500 via-pink-500 to-purple-600'
|
||||
: isTw
|
||||
? 'bg-ink-950'
|
||||
: 'bg-ink-100'
|
||||
}`}>
|
||||
{isIg && (
|
||||
<svg className="w-12 h-12 text-white/90 animate-pulse" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24">
|
||||
<rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
|
||||
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37z" />
|
||||
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
|
||||
</svg>
|
||||
)}
|
||||
{isTw && (
|
||||
<svg className="w-12 h-12 text-white/90 animate-pulse" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
|
||||
</svg>
|
||||
)}
|
||||
{!isIg && !isTw && (
|
||||
<Play className="w-12 h-12 text-ink-400" />
|
||||
)}
|
||||
<div key={item.id} className="relative h-[410px] w-full flex flex-col">
|
||||
<motion.div
|
||||
layout
|
||||
transition={{ type: "spring", stiffness: 320, damping: 28 }}
|
||||
className={`group flex flex-col bg-ink-0 border rounded-2xl overflow-hidden transition-[border-color,box-shadow,background-color] duration-300 ${
|
||||
isExpanded
|
||||
? 'absolute z-20 top-0 left-0 right-0 h-auto shadow-2xl border-ink-350 bg-ink-0'
|
||||
: 'relative w-full h-full border-ink-200 hover:border-ink-350 hover:shadow-xl'
|
||||
}`}
|
||||
>
|
||||
{/* Video Player / Thumbnail */}
|
||||
<div className="relative aspect-video bg-ink-900 overflow-hidden shrink-0">
|
||||
{thumbnail ? (
|
||||
<img
|
||||
src={thumbnail}
|
||||
alt={item.title}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
|
||||
/>
|
||||
) : (
|
||||
/* Platform Fallback Gradients */
|
||||
<div className={`w-full h-full flex items-center justify-center ${
|
||||
isIg
|
||||
? 'bg-gradient-to-tr from-yellow-500 via-pink-500 to-purple-600'
|
||||
: isTw
|
||||
? 'bg-ink-950'
|
||||
: 'bg-ink-100'
|
||||
}`}>
|
||||
{isIg && (
|
||||
<svg className="w-12 h-12 text-white/90 animate-pulse" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24">
|
||||
<rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
|
||||
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37z" />
|
||||
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
|
||||
</svg>
|
||||
)}
|
||||
{isTw && (
|
||||
<svg className="w-12 h-12 text-white/90 animate-pulse" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
|
||||
</svg>
|
||||
)}
|
||||
{!isIg && !isTw && (
|
||||
<Play className="w-12 h-12 text-ink-400" />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Dark gradient overlay */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-ink-900/60 via-transparent to-transparent" />
|
||||
|
||||
{/* Play button overlay */}
|
||||
<button
|
||||
onClick={() => setPlayingVideoId(item.id)}
|
||||
className="absolute inset-0 flex items-center justify-center cursor-pointer group/play"
|
||||
>
|
||||
<div className="w-14 h-14 rounded-full bg-ink-0/95 backdrop-blur-sm flex items-center justify-center shadow-2xl border border-ink-200/50 group-hover/play:scale-110 group-hover/play:bg-blue-600 group-hover/play:border-blue-500 transition-all duration-300">
|
||||
<Play className="w-6 h-6 text-ink-900 group-hover/play:text-ink-0 ml-0.5 transition-colors" fill="currentColor" />
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* Platform Tag */}
|
||||
<div className="absolute bottom-2 right-2 px-2 py-0.5 rounded bg-ink-900/80 text-ink-0 text-[9px] font-bold backdrop-blur-sm">
|
||||
{isIg ? 'Instagram' : isTw ? 'Twitter / X' : 'YouTube'}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Dark gradient overlay */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-ink-900/60 via-transparent to-transparent" />
|
||||
|
||||
{/* Play button overlay */}
|
||||
<button
|
||||
onClick={() => setPlayingVideoId(item.id)}
|
||||
className="absolute inset-0 flex items-center justify-center cursor-pointer group/play"
|
||||
>
|
||||
<div className="w-14 h-14 rounded-full bg-ink-0/95 backdrop-blur-sm flex items-center justify-center shadow-2xl border border-ink-200/50 group-hover/play:scale-110 group-hover/play:bg-blue-600 group-hover/play:border-blue-500 transition-all duration-300">
|
||||
<Play className="w-6 h-6 text-ink-900 group-hover/play:text-ink-0 ml-0.5 transition-colors" fill="currentColor" />
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* Platform Tag */}
|
||||
<div className="absolute bottom-2 right-2 px-2 py-0.5 rounded bg-ink-900/80 text-ink-0 text-[9px] font-bold backdrop-blur-sm">
|
||||
{isIg ? 'Instagram' : isTw ? 'Twitter / X' : 'YouTube'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content Info */}
|
||||
<div className="p-5 flex-1 flex flex-col justify-between space-y-4">
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-sm font-black tracking-tight text-ink-900 leading-snug">
|
||||
{item.title}
|
||||
</h3>
|
||||
{item.description && (
|
||||
<VideoDescription text={item.description} />
|
||||
{/* Content Info */}
|
||||
<div className="p-5 flex-grow flex flex-col justify-between space-y-4">
|
||||
<div className="space-y-2">
|
||||
<h3 className={`text-sm font-black tracking-tight text-ink-900 leading-snug ${isExpanded ? '' : 'line-clamp-2'}`} title={item.title}>
|
||||
{item.title}
|
||||
</h3>
|
||||
{item.description && (
|
||||
<VideoDescription
|
||||
text={item.description}
|
||||
isExpanded={isExpanded}
|
||||
onToggleExpand={() => setExpandedItemId(isExpanded ? null : item.id)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Redirect CTA */}
|
||||
{item.redirectUrl && (
|
||||
<div className="pt-2">
|
||||
<a
|
||||
href={item.redirectUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1.5 text-[10px] font-black uppercase tracking-widest text-ink-700 hover:text-ink-900 transition-colors"
|
||||
>
|
||||
<span>{item.redirectLabel || 'Learn More'}</span>
|
||||
<ExternalLink className="w-3 h-3" />
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Redirect CTA */}
|
||||
{item.redirectUrl && (
|
||||
<div className="pt-2">
|
||||
<a
|
||||
href={item.redirectUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1.5 text-[10px] font-black uppercase tracking-widest text-ink-700 hover:text-ink-900 transition-colors"
|
||||
>
|
||||
<span>{item.redirectLabel || 'Learn More'}</span>
|
||||
<ExternalLink className="w-3 h-3" />
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
@ -303,17 +336,17 @@ export const ShowcasePage: React.FC = () => {
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
exit={{ opacity: 0, scale: 0.9, y: 20 }}
|
||||
transition={{ type: 'spring', damping: 25, stiffness: 250 }}
|
||||
className={`relative bg-ink-900 border border-ink-800 rounded-3xl overflow-hidden shadow-2xl flex transition-all duration-300 ${
|
||||
className={`relative bg-ink-900 border border-ink-800 rounded-3xl overflow-hidden shadow-2xl flex flex-col transition-all duration-300 ${
|
||||
lightboxSize === 'cinema'
|
||||
? 'w-[95vw] max-w-7xl flex-col h-[90vh]'
|
||||
? 'w-[95vw] max-w-7xl md:flex-col h-[85vh] md:h-[90vh]'
|
||||
: lightboxSize === 'theater'
|
||||
? 'w-[85vw] max-w-6xl flex-row max-h-[85vh]'
|
||||
: 'w-full max-w-4xl flex-row max-h-[80vh]'
|
||||
? 'w-[95vw] md:w-[85vw] max-w-6xl md:flex-row h-[85vh] md:max-h-[85vh]'
|
||||
: 'w-[95vw] md:w-full max-w-4xl md:flex-row h-[85vh] md:max-h-[80vh]'
|
||||
}`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Media Container */}
|
||||
<div className="flex-1 bg-black flex items-center justify-center p-4 overflow-hidden relative min-h-[300px]">
|
||||
<div className="flex-1 bg-black flex items-center justify-center p-3 sm:p-4 overflow-hidden relative min-h-[180px] sm:min-h-[240px] md:min-h-[300px]">
|
||||
{(() => {
|
||||
const ytId = extractYouTubeVideoId(activeItem.youtubeUrl);
|
||||
if (ytId) {
|
||||
@ -335,15 +368,15 @@ export const ShowcasePage: React.FC = () => {
|
||||
</div>
|
||||
|
||||
{/* Info Container */}
|
||||
<div className={`p-6 flex flex-col justify-between border-ink-800 bg-ink-950 overflow-y-auto ${
|
||||
<div className={`p-5 sm:p-6 flex flex-col justify-between border-ink-800 bg-ink-950 overflow-y-auto ${
|
||||
lightboxSize === 'cinema'
|
||||
? 'w-full border-t h-[30%] shrink-0'
|
||||
: 'w-full md:w-80 border-t md:border-t-0 md:border-l shrink-0'
|
||||
? 'w-full border-t h-[40%] md:h-[30%] shrink-0'
|
||||
: 'w-full md:w-80 border-t md:border-t-0 md:border-l h-[45%] md:h-auto shrink-0'
|
||||
}`}>
|
||||
<div className="space-y-4">
|
||||
{/* Toolbar with Resizer Preset Buttons */}
|
||||
<div className="flex justify-between items-center pb-2 border-b border-ink-800/60">
|
||||
<div className="flex bg-ink-900 p-0.5 rounded-lg border border-ink-800 gap-0.5">
|
||||
<div className="hidden md:flex bg-ink-900 p-0.5 rounded-lg border border-ink-800 gap-0.5">
|
||||
<button
|
||||
onClick={() => setLightboxSize('compact')}
|
||||
className={`p-1.5 rounded text-[9px] font-black uppercase tracking-wider flex items-center gap-1 transition-all cursor-pointer ${
|
||||
@ -383,7 +416,7 @@ export const ShowcasePage: React.FC = () => {
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setPlayingVideoId(null)}
|
||||
className="text-ink-400 hover:text-ink-0 transition-colors p-1.5 rounded-lg hover:bg-ink-850 cursor-pointer"
|
||||
className="text-ink-400 hover:text-ink-0 transition-colors p-1.5 rounded-lg hover:bg-ink-850 cursor-pointer ml-auto md:ml-0"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
@ -405,7 +438,7 @@ export const ShowcasePage: React.FC = () => {
|
||||
</h3>
|
||||
|
||||
{activeItem.description && (
|
||||
<div className="max-h-60 overflow-y-auto pr-1">
|
||||
<div className="max-h-60 md:max-h-none overflow-y-auto pr-1">
|
||||
<p className="text-xs font-medium text-ink-400 leading-relaxed whitespace-pre-wrap">
|
||||
{activeItem.description}
|
||||
</p>
|
||||
|
||||
@ -30,6 +30,7 @@ import {
|
||||
getYoutubeMeta,
|
||||
} from '../../services/ecosystem-api';
|
||||
import type { EcosystemOffering, ContentShowcase } from '../../services/ecosystem-api';
|
||||
import { useToast } from '../../hooks/use-toast';
|
||||
|
||||
// Custom Brand Logo renderer with remote URL preset load + high-fidelity SVG fallback
|
||||
export const BrandLogo: React.FC<{ name: string; className?: string }> = ({ name, className = "h-7" }) => {
|
||||
@ -126,6 +127,7 @@ const extractYouTubeVideoId = (url: string): string | null => {
|
||||
|
||||
// ── Content Showcase Manager Component ──
|
||||
const ContentShowcaseManager: React.FC = () => {
|
||||
const { success, error } = useToast();
|
||||
const [items, setItems] = useState<ContentShowcase[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
@ -154,7 +156,10 @@ const ContentShowcaseManager: React.FC = () => {
|
||||
// Action to fetch metadata explicitly
|
||||
const handleScrapeMetadata = async () => {
|
||||
const url = scYoutubeUrl.trim();
|
||||
if (!url) return;
|
||||
if (!url) {
|
||||
error('URL Required', 'Please enter a media URL first.');
|
||||
return;
|
||||
}
|
||||
|
||||
const lower = url.toLowerCase();
|
||||
const isYt = lower.includes('youtube.com') || lower.includes('youtu.be') || lower.includes('youtube-nocookie.com');
|
||||
@ -162,7 +167,7 @@ const ContentShowcaseManager: React.FC = () => {
|
||||
const isTw = lower.includes('twitter.com') || lower.includes('x.com');
|
||||
|
||||
if (!isYt && !isIg && !isTw) {
|
||||
setFormError('Please enter a valid YouTube, Instagram, or Twitter/X URL.');
|
||||
error('Invalid URL', 'Please enter a valid YouTube, Instagram, or Twitter/X URL.');
|
||||
return;
|
||||
}
|
||||
|
||||
@ -175,8 +180,10 @@ const ContentShowcaseManager: React.FC = () => {
|
||||
if (meta.thumbnailUrl) {
|
||||
setScThumbnailUrl(meta.thumbnailUrl);
|
||||
}
|
||||
success('Metadata Fetched', 'Media title, description, and thumbnail populated successfully.');
|
||||
} catch (err: any) {
|
||||
console.error('Failed to fetch video meta:', err);
|
||||
error('Fetch Failed', 'Failed to retrieve metadata. You can input fields manually.');
|
||||
setFormError('Failed to fetch video metadata. You can enter the title and description manually.');
|
||||
} finally {
|
||||
setIsFetchingMeta(false);
|
||||
@ -206,7 +213,9 @@ const ContentShowcaseManager: React.FC = () => {
|
||||
try {
|
||||
const res = await uploadEcosystemFile(file);
|
||||
setScThumbnailUrl(res.url);
|
||||
success('Upload Success', 'Thumbnail image uploaded successfully.');
|
||||
} catch (err: any) {
|
||||
error('Upload Failed', 'Failed to upload thumbnail image.');
|
||||
setFormError('Failed to upload thumbnail image.');
|
||||
} finally {
|
||||
setUploadingThumbnail(false);
|
||||
@ -276,12 +285,15 @@ const ContentShowcaseManager: React.FC = () => {
|
||||
|
||||
if (editingItem) {
|
||||
await updateShowcaseContent(editingItem.id, payload);
|
||||
success('Showcase Updated', 'The showcase item has been updated successfully.');
|
||||
} else {
|
||||
await createShowcaseContent(payload);
|
||||
success('Showcase Created', 'A new showcase item has been created successfully.');
|
||||
}
|
||||
setIsModalOpen(false);
|
||||
fetchItems();
|
||||
} catch (err: any) {
|
||||
error('Save Failed', err.response?.data?.error || 'Failed to save content.');
|
||||
setFormError(err.response?.data?.error || 'Failed to save content.');
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
@ -294,14 +306,16 @@ const ContentShowcaseManager: React.FC = () => {
|
||||
await deleteShowcaseContent(deleteItem.id);
|
||||
setDeleteItem(null);
|
||||
fetchItems();
|
||||
success('Showcase Deleted', 'The showcase item was deleted successfully.');
|
||||
} catch (err) {
|
||||
console.error('Failed to delete:', err);
|
||||
error('Delete Failed', 'Failed to delete the showcase item.');
|
||||
}
|
||||
};
|
||||
|
||||
// Auto-thumbnail from the current YouTube URL field
|
||||
const previewVideoId = extractYouTubeVideoId(scYoutubeUrl);
|
||||
const previewThumbnail = previewVideoId ? `https://img.youtube.com/vi/${previewVideoId}/mqdefault.jpg` : null;
|
||||
const previewThumbnail = scThumbnailUrl || (previewVideoId ? `https://img.youtube.com/vi/${previewVideoId}/mqdefault.jpg` : null);
|
||||
|
||||
return (
|
||||
<div className="space-y-4 pt-2 border-t border-ink-200 mt-6">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user