carlos/almeira-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: resolve media file_ids for stream overlay and make news cards clickable

Browse Source
This commit is contained in:
Carlos (Almeira) 2026-07-18 10:40:16 -05:00
parent be199fc0cd
commit 5c15a34a19
1 changed files with 37 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/media/StreamOverlays.tsx
View File

@ -44,7 +44,27 @@ export const StreamOverlays = () => {
[Query.limit(10), Query.orderDesc('$createdAt'), Query.equal('estado', 'Publicado')] [Query.limit(10), Query.orderDesc('$createdAt'), Query.equal('estado', 'Publicado')]
); );
setRotatingContent(res.documents); const posts = res.documents;
const mediaIds = posts.map(p => p.imagen_destacada_id).filter(id => id && typeof id === 'string');
if (mediaIds.length > 0) {
try {
const mediaRes = await databases.listDocuments(
APPWRITE_ALMEIRA_CONFIG.databaseId,
'media',
[Query.equal('$id', mediaIds)]
);
const mediaMap = new Map(mediaRes.documents.map(m => [m.$id, m]));
posts.forEach(p => {
if (p.imagen_destacada_id && typeof p.imagen_destacada_id === 'string' && mediaMap.has(p.imagen_destacada_id)) {
p.resolved_media = mediaMap.get(p.imagen_destacada_id);
}
});
} catch(e) {
console.error("Error resolving media for overlays:", e);
}
}
setRotatingContent(posts);
} catch (error) { } catch (error) {
console.error('Error fetching content for overlays:', error); console.error('Error fetching content for overlays:', error);
} }
@ -130,17 +150,25 @@ export const StreamOverlays = () => {
{/* SIDE CONTENT CAROUSEL (BOTTOM LEFT ABOVE TICKER) */} {/* SIDE CONTENT CAROUSEL (BOTTOM LEFT ABOVE TICKER) */}
<div className="absolute bottom-16 left-6 w-72 transition-all"> <div className="absolute bottom-16 left-6 w-72 transition-all">
{activeItem && ( {activeItem && (
<div className="bg-slate-900/40 backdrop-blur-2xl border border-white/10 rounded-2xl overflow-hidden shadow-2xl animate-in slide-in-from-left duration-700"> <a
href={`/${activeItem.slug || activeItem.$id}`}
className="block bg-slate-900/40 backdrop-blur-2xl border border-white/10 rounded-2xl overflow-hidden shadow-2xl animate-in slide-in-from-left duration-700 hover:scale-105 transition-all pointer-events-auto cursor-pointer"
onClick={(e) => {
// If they click, we could theoretically stop rotation or close player, but just navigating is fine
}}
>
<div className="relative aspect-video"> <div className="relative aspect-video">
{(() => { {(() => {
const mediaId = typeof activeItem.imagen_destacada_id === 'object' let mediaObj = activeItem.resolved_media;
? activeItem.imagen_destacada_id?.$id if (!mediaObj && typeof activeItem.imagen_destacada_id === 'object') {
: activeItem.imagen_destacada_id; mediaObj = activeItem.imagen_destacada_id;
}
if (mediaId) { if (mediaObj && mediaObj.file_id) {
const bucketId = mediaObj.bucket_id || APPWRITE_ALMEIRA_CONFIG.mediaBucketId;
return ( return (
<img <img
src={`${APPWRITE_ALMEIRA_CONFIG.endpoint}/storage/buckets/${APPWRITE_ALMEIRA_CONFIG.mediaBucketId}/files/${mediaId}/view?project=${APPWRITE_ALMEIRA_CONFIG.projectId}`} src={`${APPWRITE_ALMEIRA_CONFIG.endpoint}/storage/buckets/${bucketId}/files/${mediaObj.file_id}/preview?project=${APPWRITE_ALMEIRA_CONFIG.projectId}&width=400&height=250&quality=80`}
className="w-full h-full object-cover" className="w-full h-full object-cover"
alt={activeItem.titulo} alt={activeItem.titulo}
/> />
@ -153,12 +181,12 @@ export const StreamOverlays = () => {
); );
})()} })()}
<div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/20 to-transparent px-4 py-3 flex flex-col justify-end"> <div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/20 to-transparent px-4 py-3 flex flex-col justify-end">
<h4 className="text-sm font-black text-white leading-tight uppercase tracking-tight line-clamp-2"> <h4 className="text-sm font-black text-white leading-tight uppercase tracking-tight line-clamp-2 drop-shadow-md">
{activeItem.titulo} {activeItem.titulo}
</h4> </h4>
</div> </div>
</div> </div>
</div> </a>
)} )}
</div> </div>