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

feat: soporte para videos de biblioteca de medios en publicaciones

Browse Source
This commit is contained in:
Carlos (Almeira) 2026-07-01 08:31:37 -05:00
parent 74e0563349
commit 92a57d01b8
6 changed files with 93 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/[slug]/page.tsx
View File

@ -182,8 +182,8 @@ export default async function NoticiaDetail({ params }: { params: Promise<{ slug
prose-strong:text-cyan-400 prose-p:empty:before:content-['\\00a0']"
dangerouslySetInnerHTML={{
__html: DOMPurify.sanitize(formatTextToHtml(post.contenido), {
ADD_TAGS: ['iframe'],
ADD_ATTR: ['allow', 'allowfullscreen', 'frameborder', 'scrolling', 'style', 'class']
ADD_TAGS: ['iframe', 'video', 'source'],
ADD_ATTR: ['allow', 'allowfullscreen', 'frameborder', 'scrolling', 'style', 'class', 'controls', 'src', 'type', 'muted', 'loop', 'autoplay', 'preload']
})
}}
/>

2
src/app/layout.tsx
View File

@ -38,8 +38,8 @@ export default async function RootLayout({
<Navbar entity={entity} />
<div className="pt-20 lg:pt-24">
<NewsTicker />
<GlobalTopBanner />
<NewsTicker />
{children}
</div>
<GlobalPlayer initialConfig={entity} />

33
src/app/page.tsx
View File

@ -1,6 +1,7 @@
import { APPWRITE_ALMEIRA_CONFIG } from '@/lib/appwrite';
import { createAdminClient, getLoggedInUser } from '@/lib/appwrite.server';
import { Query } from 'node-appwrite';
import { cookies } from 'next/headers';
import { NewsCard } from '@/components/NewsCard';
import { GlobalSidebar, hasSidebarContent } from '@/components/AdWrappers';
import { RadioTower, Sparkles, ChevronDown } from 'lucide-react';
@ -106,10 +107,16 @@ export default async function Home(props: { searchParams: Promise<{ [key: string
const { posts, cardSettings, totalPages } = await fetchHomeData(page, isAdmin, adminMonth);
const hasSidebar = await hasSidebarContent();
const cookieStore = await cookies();
const hasVisited = cookieStore.has('almeira_visited');
return (
<main className="animate-fade-in relative">
{/* Sci-Fi Hero Section */}
<section className="relative flex flex-col items-center justify-center min-h-screen text-center px-4 overflow-hidden mesh-bg">
{!hasVisited && (
<>
<script dangerouslySetInnerHTML={{ __html: `document.cookie = "almeira_visited=true; path=/; max-age=31536000";` }} />
{/* Sci-Fi Hero Section */}
<section className="relative flex flex-col items-center justify-center min-h-screen text-center px-4 overflow-hidden mesh-bg">
{/* Dynamic Orbs background */}
<div className="absolute top-1/4 left-1/4 w-[500px] h-[500px] bg-cyan-500/20 rounded-full blur-[120px] mix-blend-screen pointer-events-none animate-pulse"></div>
<div className="absolute bottom-1/4 right-1/4 w-[600px] h-[600px] bg-purple-600/20 rounded-full blur-[150px] mix-blend-screen pointer-events-none animate-float"></div>
@ -146,19 +153,23 @@ export default async function Home(props: { searchParams: Promise<{ [key: string
<ChevronDown size={24} className="text-cyan-500" />
</a>
</section>
</>
)}
{/* Feed Section */}
<section id="noticias" className="container mx-auto px-4 py-24 relative z-10 w-full">
<section id="noticias" className={`container mx-auto px-4 relative z-10 w-full ${hasVisited ? 'pt-8 pb-24' : 'py-24'}`}>
<div className="flex flex-col lg:flex-row gap-8 w-full items-start">
<div className="flex-1 w-full relative">
<div className="flex flex-col md:flex-row justify-between items-end mb-12 gap-6">
<div>
<div className="flex items-center gap-3 mb-2">
<div className="w-12 h-1 bg-gradient-to-r from-cyan-400 to-blue-600 rounded-full"></div>
<span className="text-cyan-400 font-bold tracking-widest uppercase text-sm">Último Minuto</span>
</div>
<h2 className="text-4xl md:text-5xl font-outfit font-black text-white">Feed de <span className="text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-500">Noticias</span></h2>
</div>
<div className={`flex flex-col md:flex-row items-end mb-12 gap-6 ${hasVisited && isAdmin ? 'justify-end' : 'justify-between'}`}>
{!hasVisited && (
<div>
<div className="flex items-center gap-3 mb-2">
<div className="w-12 h-1 bg-gradient-to-r from-cyan-400 to-blue-600 rounded-full"></div>
<span className="text-cyan-400 font-bold tracking-widest uppercase text-sm">Último Minuto</span>
</div>
<h2 className="text-4xl md:text-5xl font-outfit font-black text-white">Feed de <span className="text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-500">Noticias</span></h2>
</div>
)}
{isAdmin && (
<form action="/" method="GET" className="flex items-center gap-3 bg-slate-800/80 p-3 rounded-xl border border-white/10">
<input type="hidden" name="page" value="1" />

13
src/components/AdWrappers.tsx
View File

@ -44,6 +44,19 @@ export async function GlobalTopBanner() {
if (!post.fecha_finalizacion) return true;
return new Date(post.fecha_finalizacion) >= now;
});
// Resolver media
const mediaIds = banners.map(p => p.imagen_destacada_id).filter(id => id && typeof id === 'string');
if (mediaIds.length > 0) {
const mediaRes = await client.databases.listDocuments(APPWRITE_ALMEIRA_CONFIG.databaseId, 'media', [
Query.equal('$id', mediaIds)
]);
const mediaMap = new Map(mediaRes.documents.map((m: any) => [m.$id, m]));
banners = banners.map(p => ({
...p,
imagen_destacada_id: mediaMap.get(p.imagen_destacada_id) || p.imagen_destacada_id
}));
}
}
} catch (e) {
console.error("TopBanner fetch error", e);

38
src/components/dashboard/MediaGridSelector.tsx
View File

@ -7,15 +7,18 @@ import { databases, APPWRITE_ALMEIRA_CONFIG, endpoint, projectId } from '@/lib/a
import { uploadMediaDocumentServer, listMediaServer, getMediaServer } from '@/app/actions/appwrite';
/** Utility to generate frontend Appwrite image previews */
export function getAppwriteImageUrl(fileId: string, bucketId?: string, width = 400, height = 250) {
export function getAppwriteImageUrl(fileId: string, bucketId?: string, width = 400, height = 250, isVideo = false) {
if (!fileId) return '';
const finalBucketId = bucketId || APPWRITE_ALMEIRA_CONFIG.mediaBucketId;
if (isVideo) {
return `${endpoint}/storage/buckets/${finalBucketId}/files/${fileId}/view?project=${projectId}`;
}
return `${endpoint}/storage/buckets/${finalBucketId}/files/${fileId}/preview?project=${projectId}&width=${width}&height=${height}&quality=80`;
}
interface MediaGridSelectorProps {
value?: string;
onChange: (fileId: string, url?: string) => void;
onChange: (fileId: string, url?: string, tipo?: string) => void;
label?: string;
mode?: 'field' | 'modal';
isOpen?: boolean;
@ -112,8 +115,9 @@ export const MediaGridSelector = ({
const doc = res.data[0];
setMediaItems(prev => [doc, ...prev]);
const url = getAppwriteImageUrl(doc.file_id, doc.bucket_id, 1200, 800);
onChange(doc.$id, url);
const isVideo = doc.tipo === 'video';
const url = getAppwriteImageUrl(doc.file_id, doc.bucket_id, 1200, 800, isVideo);
onChange(doc.$id, url, doc.tipo);
closeModal();
} catch (error) {
console.error("Error upload:", error);
@ -168,7 +172,7 @@ export const MediaGridSelector = ({
/>
</div>
<div className="w-full sm:w-1/3 flex justify-end">
<input type="file" accept="image/*" className="hidden" ref={fileInputRef} onChange={handleUpload}/>
<input type="file" accept="image/*,video/*" className="hidden" ref={fileInputRef} onChange={handleUpload}/>
<button
onClick={() => fileInputRef.current?.click()}
disabled={isUploading}
@ -190,13 +194,14 @@ export const MediaGridSelector = ({
) : filteredItems.length > 0 ? (
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
{filteredItems.map((item) => {
const url = getAppwriteImageUrl(item.file_id, item.bucket_id, 300, 300);
const isVideo = item.tipo === 'video';
const url = getAppwriteImageUrl(item.file_id, item.bucket_id, 300, 300, isVideo);
return (
<div
key={item.$id}
onClick={() => {
const selectedUrl = getAppwriteImageUrl(item.file_id, item.bucket_id, 1200, 800);
onChange(item.$id, selectedUrl);
const selectedUrl = getAppwriteImageUrl(item.file_id, item.bucket_id, 1200, 800, isVideo);
onChange(item.$id, selectedUrl, item.tipo);
if (mode !== 'modal') setIsOpen(false);
closeModal();
}}
@ -204,7 +209,11 @@ export const MediaGridSelector = ({
value === item.file_id ? 'border-cyan-500 shadow-xl shadow-cyan-500/20' : 'border-slate-800 hover:border-slate-600 shadow-lg'
}`}
>
<img src={url} alt={item.titulo} title={item.titulo} className="w-full h-full object-cover transition-transform group-hover:scale-110" loading="lazy" />
{isVideo ? (
<video src={url} title={item.titulo} className="w-full h-full object-cover transition-transform group-hover:scale-110" onMouseEnter={e => e.currentTarget.play()} onMouseLeave={e => e.currentTarget.pause()} muted loop />
) : (
<img src={url} alt={item.titulo} title={item.titulo} className="w-full h-full object-cover transition-transform group-hover:scale-110" loading="lazy" />
)}
<div className="absolute inset-0 bg-gradient-to-t from-cyan-500/20 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
{value === item.$id && (
<div className="absolute top-2 right-2 bg-cyan-500 text-white rounded-full p-1 shadow-lg">
@ -274,11 +283,12 @@ export const MediaGridSelector = ({
const selectedDoc = mediaItems.find(m => m.$id === value);
// Si aún no está en la lista (cargando), mostramos loader genérico
if (!selectedDoc && mediaItems.length > 0) return null;
const fileIdToRender = selectedDoc ? selectedDoc.file_id : value;
const bucketIdToRender = selectedDoc ? selectedDoc.bucket_id : undefined;
return (
<img src={getAppwriteImageUrl(fileIdToRender, bucketIdToRender, 800, 450)} alt="Selected Preview" className="w-full h-full object-cover" />
const isVideo = selectedDoc?.tipo === 'video';
const fileUrl = getAppwriteImageUrl(fileIdToRender, bucketIdToRender, 800, 450, isVideo);
return isVideo ? (
<video src={fileUrl} className="w-full h-full object-cover" muted loop autoPlay />
) : (
<img src={fileUrl} alt="Selected Preview" className="w-full h-full object-cover" />
);
})()}
<div className="absolute inset-0 bg-slate-900/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">

33
src/components/dashboard/RichTextEditor.tsx
View File

@ -1,6 +1,7 @@
'use client';
import { useEditor, EditorContent } from '@tiptap/react';
import { Node, mergeAttributes } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import Underline from '@tiptap/extension-underline';
import Link from '@tiptap/extension-link';
@ -26,6 +27,29 @@ interface RichTextEditorProps {
label: string;
}
const VideoNode = Node.create({
name: 'videoNode',
group: 'block',
selectable: true,
draggable: true,
atom: true,
addAttributes() {
return {
src: { default: null },
controls: { default: 'true' },
}
},
parseHTML() {
return [{ tag: 'video' }]
},
renderHTML({ HTMLAttributes }) {
return ['video', mergeAttributes(HTMLAttributes, { class: 'w-full aspect-video rounded-xl shadow-lg my-6', controls: 'true', preload: 'metadata' })]
},
});
const MenuBar = ({ editor }: { editor: any }) => {
const [isMediaModalOpen, setIsMediaModalOpen] = useState(false);
@ -49,9 +73,13 @@ const MenuBar = ({ editor }: { editor: any }) => {
}
};
const handleMediaInsert = (fileId: string, url?: string) => {
const handleMediaInsert = (fileId: string, url?: string, tipo?: string) => {
if (url) {
editor.chain().focus().setImage({ src: url }).run();
if (tipo === 'video') {
editor.chain().focus().insertContent({ type: 'videoNode', attrs: { src: url } }).run();
} else {
editor.chain().focus().setImage({ src: url }).run();
}
}
setIsMediaModalOpen(false);
};
@ -232,6 +260,7 @@ export const RichTextEditor = ({ value, onChange, label }: RichTextEditorProps)
class: 'rounded-xl shadow-lg max-w-full h-auto object-cover my-6'
}
}),
VideoNode,
Youtube.configure({
controls: true,
HTMLAttributes: {