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

fix(media): use Appwrite /view endpoint instead of /preview for Cloud compatibility

Browse Source
This commit is contained in:
AI Bot 2026-11-07 15:42:19 -05:00
parent 45ecec69aa
commit 9a134b12ab
20 changed files with 29 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
dripzone-app/src/lib/image-optimizer.ts
View File

@ -11,7 +11,7 @@ export interface ImageOptimizationOptions {
format?: 'webp' | 'avif' | 'jpg' | 'png'; format?: 'webp' | 'avif' | 'jpg' | 'png';
} }
const DEFAULT_PROJECT_ID = process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID || '69b84df5003bd8957c5c'; const DEFAULT_PROJECT_ID = process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID || '6aef63d9002c07371b40';
export function getOptimizedImageUrl( export function getOptimizedImageUrl(
url?: string | null, url?: string | null,
@ -42,26 +42,20 @@ export function getOptimizedImageUrl(
const format = options.format || 'webp'; const format = options.format || 'webp';
try { try {
// 1. Appwrite Storage URL Optimization // 1. Appwrite Storage URL Optimization (use /view for Appwrite Cloud Free Plan compatibility)
if (trimmed.includes('/storage/buckets/') && (trimmed.includes('/files/') || trimmed.includes('/view') || trimmed.includes('/preview'))) { if (trimmed.includes('/storage/buckets/') && (trimmed.includes('/files/') || trimmed.includes('/view') || trimmed.includes('/preview'))) {
let optimized = trimmed; let optimized = trimmed;
// Convert /view to /preview for Appwrite image transformation engine if (optimized.includes('/preview')) {
if (optimized.includes('/view')) { optimized = optimized.replace('/preview', '/view');
optimized = optimized.replace('/view', '/preview'); } else if (!optimized.includes('/view') && optimized.includes('/files/')) {
} else if (!optimized.includes('/preview') && optimized.includes('/files/')) {
// e.g. /files/fileId -> /files/fileId/preview
const regex = /(\/files\/[^\/\?]+)(.*)/; const regex = /(\/files\/[^\/\?]+)(.*)/;
optimized = optimized.replace(regex, '$1/preview$2'); optimized = optimized.replace(regex, '$1/view$2');
} }
const urlObj = new URL(optimized, 'https://appwrite.almeira.com.co'); const urlObj = new URL(optimized, 'https://nyc.cloud.appwrite.io');
if (!urlObj.searchParams.has('project')) { if (!urlObj.searchParams.has('project')) {
urlObj.searchParams.set('project', DEFAULT_PROJECT_ID); urlObj.searchParams.set('project', DEFAULT_PROJECT_ID);
} }
urlObj.searchParams.set('width', width.toString());
urlObj.searchParams.set('height', height.toString());
urlObj.searchParams.set('quality', quality.toString());
urlObj.searchParams.set('output', format);
return urlObj.toString(); return urlObj.toString();
} }

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

@ -177,7 +177,7 @@ export async function generateMetadata(
const client = await createAdminClient(); const client = await createAdminClient();
const mediaRes = await client.databases.getDocument(APPWRITE_ALMEIRA_CONFIG.databaseId, 'media', post.imagen_destacada_id); const mediaRes = await client.databases.getDocument(APPWRITE_ALMEIRA_CONFIG.databaseId, 'media', post.imagen_destacada_id);
if (mediaRes) { if (mediaRes) {
imagenUrl = `${ENDPOINT}/storage/buckets/${mediaRes.bucket_id}/files/${mediaRes.file_id}/preview?project=${PROJECT_ID}&width=1200&height=630&quality=90`; imagenUrl = `${ENDPOINT}/storage/buckets/${mediaRes.bucket_id}/files/${mediaRes.file_id}/view?project=${PROJECT_ID}&width=1200&height=630&quality=90`;
} }
} catch(e) {} } catch(e) {}
} }
@ -231,7 +231,7 @@ export default async function NoticiaDetail({ params }: { params: Promise<{ slug
const client = await createAdminClient(); const client = await createAdminClient();
const mediaRes = await client.databases.getDocument(APPWRITE_ALMEIRA_CONFIG.databaseId, 'media', post.imagen_destacada_id); const mediaRes = await client.databases.getDocument(APPWRITE_ALMEIRA_CONFIG.databaseId, 'media', post.imagen_destacada_id);
if (mediaRes) { if (mediaRes) {
imagenUrl = `${ENDPOINT}/storage/buckets/${mediaRes.bucket_id}/files/${mediaRes.file_id}/preview?project=${PROJECT_ID}&width=640&height=${imgHeight}&quality=90`; imagenUrl = `${ENDPOINT}/storage/buckets/${mediaRes.bucket_id}/files/${mediaRes.file_id}/view?project=${PROJECT_ID}&width=640&height=${imgHeight}&quality=90`;
} }
} catch(e) {} } catch(e) {}
} }

2
src/app/api/reports/posts/route.tsx
View File

@ -12,7 +12,7 @@ function getAppwriteImageUrl(fileId: string, bucketId?: string, width = 400, hei
if (isVideo) { if (isVideo) {
return `${endpoint}/storage/buckets/${finalBucketId}/files/${fileId}/view?project=${projectId}`; 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`; return `${endpoint}/storage/buckets/${finalBucketId}/files/${fileId}/view?project=${projectId}&width=${width}&height=${height}&quality=80`;
} }
export const runtime = 'nodejs'; export const runtime = 'nodejs';

2
src/app/api/webhooks/whatsapp/route.ts
View File

@ -397,7 +397,7 @@ function detectExplicitPublicationType(inputText: string): 'noticia' | 'evento'
let ogImageUrl = undefined; let ogImageUrl = undefined;
if (storageFileId) { if (storageFileId) {
ogImageUrl = `${APPWRITE_ALMEIRA_CONFIG.endpoint}/storage/buckets/${APPWRITE_ALMEIRA_CONFIG.mediaBucketId}/files/${storageFileId}/preview?project=${APPWRITE_ALMEIRA_CONFIG.projectId}&width=640&height=${imgHeight}&gravity=${gravity}&quality=85`; ogImageUrl = `${APPWRITE_ALMEIRA_CONFIG.endpoint}/storage/buckets/${APPWRITE_ALMEIRA_CONFIG.mediaBucketId}/files/${storageFileId}/view?project=${APPWRITE_ALMEIRA_CONFIG.projectId}&width=640&height=${imgHeight}&gravity=${gravity}&quality=85`;
} }
// Determinar fecha de vencimiento // Determinar fecha de vencimiento

2
src/app/clasificados/page.tsx
View File

@ -140,7 +140,7 @@ export default async function ClasificadosPage() {
const mediaObj = post.resolved_media || (typeof post.imagen_destacada_id === 'object' ? post.imagen_destacada_id : null) as MediaItem | null; const mediaObj = post.resolved_media || (typeof post.imagen_destacada_id === 'object' ? post.imagen_destacada_id : null) as MediaItem | null;
if (mediaObj) { if (mediaObj) {
imagenUrl = `${ENDPOINT}/storage/buckets/${mediaObj.bucket_id}/files/${mediaObj.file_id}/preview?project=${PROJECT_ID}&width=640&height=640&quality=80`; imagenUrl = `${ENDPOINT}/storage/buckets/${mediaObj.bucket_id}/files/${mediaObj.file_id}/view?project=${PROJECT_ID}&width=640&height=640&quality=80`;
} }
return ( return (

2
src/app/dashboard/entity/page.tsx
View File

@ -73,7 +73,7 @@ export default async function EntityPage() {
const PROJECT_ID = process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID || '6aef63d9002c07371b40'; const PROJECT_ID = process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID || '6aef63d9002c07371b40';
let logoUrl = entity?.logotipo || ''; let logoUrl = entity?.logotipo || '';
if (logoUrl && !logoUrl.startsWith('http') && !logoUrl.startsWith('/')) { if (logoUrl && !logoUrl.startsWith('http') && !logoUrl.startsWith('/')) {
logoUrl = `${ENDPOINT}/storage/buckets/media/files/${logoUrl}/view?project=${PROJECT_ID}`; logoUrl = `${ENDPOINT}/storage/buckets/media_bucket/files/${logoUrl}/view?project=${PROJECT_ID}`;
} }
return <EntityLogoField initialUrl={logoUrl} />; return <EntityLogoField initialUrl={logoUrl} />;
})()} })()}

2
src/app/eventos/page.tsx
View File

@ -140,7 +140,7 @@ export default async function EventosPage() {
const mediaObj = post.resolved_media || (typeof post.imagen_destacada_id === 'object' ? post.imagen_destacada_id : null) as MediaItem | null; const mediaObj = post.resolved_media || (typeof post.imagen_destacada_id === 'object' ? post.imagen_destacada_id : null) as MediaItem | null;
if (mediaObj) { if (mediaObj) {
imagenUrl = `${ENDPOINT}/storage/buckets/${mediaObj.bucket_id}/files/${mediaObj.file_id}/preview?project=${PROJECT_ID}&width=640&height=640&quality=80`; imagenUrl = `${ENDPOINT}/storage/buckets/${mediaObj.bucket_id}/files/${mediaObj.file_id}/view?project=${PROJECT_ID}&width=640&height=640&quality=80`;
} }
return ( return (

2
src/app/layout.tsx
View File

@ -16,7 +16,7 @@ export async function generateMetadata(): Promise<Metadata> {
const PROJECT_ID = process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID || '6aef63d9002c07371b40'; const PROJECT_ID = process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID || '6aef63d9002c07371b40';
let logoUrl = entity?.logotipo || null; let logoUrl = entity?.logotipo || null;
if (logoUrl && !logoUrl.startsWith('http') && !logoUrl.startsWith('/')) { if (logoUrl && !logoUrl.startsWith('http') && !logoUrl.startsWith('/')) {
logoUrl = `${ENDPOINT}/storage/buckets/media/files/${logoUrl}/view?project=${PROJECT_ID}`; logoUrl = `${ENDPOINT}/storage/buckets/media_bucket/files/${logoUrl}/view?project=${PROJECT_ID}`;
} }
return { return {

2
src/app/login/page.tsx
View File

@ -9,7 +9,7 @@ export default async function LoginPage() {
const PROJECT_ID = process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID || '6aef63d9002c07371b40'; const PROJECT_ID = process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID || '6aef63d9002c07371b40';
let logoUrl = entity?.logotipo || null; let logoUrl = entity?.logotipo || null;
if (logoUrl && !logoUrl.startsWith('http') && !logoUrl.startsWith('/')) { if (logoUrl && !logoUrl.startsWith('http') && !logoUrl.startsWith('/')) {
logoUrl = `${ENDPOINT}/storage/buckets/media/files/${logoUrl}/view?project=${PROJECT_ID}`; logoUrl = `${ENDPOINT}/storage/buckets/media_bucket/files/${logoUrl}/view?project=${PROJECT_ID}`;
} }
return ( return (

2
src/app/page.tsx
View File

@ -224,7 +224,7 @@ export default async function Home(props: { searchParams: Promise<{ [key: string
const mediaObj = post.resolved_media || (typeof post.imagen_destacada_id === 'object' ? post.imagen_destacada_id : null) as MediaItem | null; const mediaObj = post.resolved_media || (typeof post.imagen_destacada_id === 'object' ? post.imagen_destacada_id : null) as MediaItem | null;
if (mediaObj) { if (mediaObj) {
imagenUrl = `${ENDPOINT}/storage/buckets/${mediaObj.bucket_id}/files/${mediaObj.file_id}/preview?project=${PROJECT_ID}&width=640&height=${imgHeight}&quality=85`; imagenUrl = `${ENDPOINT}/storage/buckets/${mediaObj.bucket_id}/files/${mediaObj.file_id}/view?project=${PROJECT_ID}&width=640&height=${imgHeight}&quality=85`;
} }
return ( return (

2
src/components/ClientSidebars.tsx
View File

@ -52,7 +52,7 @@ function ClientCarouselGroup({ eslogan, ads, rotationSeconds }: { eslogan: strin
if (typeof activeAd.imagen_destacada_id === 'object' && activeAd.imagen_destacada_id.bucket_id) { if (typeof activeAd.imagen_destacada_id === 'object' && activeAd.imagen_destacada_id.bucket_id) {
imgUrl = `${ENDPOINT}/storage/buckets/${activeAd.imagen_destacada_id.bucket_id}/files/${activeAd.imagen_destacada_id.file_id}/view?project=${PROJECT_ID}`; imgUrl = `${ENDPOINT}/storage/buckets/${activeAd.imagen_destacada_id.bucket_id}/files/${activeAd.imagen_destacada_id.file_id}/view?project=${PROJECT_ID}`;
} else if (typeof activeAd.imagen_destacada_id === 'string') { } else if (typeof activeAd.imagen_destacada_id === 'string') {
imgUrl = `${ENDPOINT}/storage/buckets/media/files/${activeAd.imagen_destacada_id}/view?project=${PROJECT_ID}`; imgUrl = `${ENDPOINT}/storage/buckets/media_bucket/files/${activeAd.imagen_destacada_id}/view?project=${PROJECT_ID}`;
} }
} }

2
src/components/Navbar.tsx
View File

@ -15,7 +15,7 @@ export const Navbar = ({ entity }: { entity?: any }) => {
const PROJECT_ID = process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID || '6aef63d9002c07371b40'; const PROJECT_ID = process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID || '6aef63d9002c07371b40';
let logoUrl = entity?.logotipo || null; let logoUrl = entity?.logotipo || null;
if (logoUrl && !logoUrl.startsWith('http') && !logoUrl.startsWith('/')) { if (logoUrl && !logoUrl.startsWith('http') && !logoUrl.startsWith('/')) {
logoUrl = `${ENDPOINT}/storage/buckets/media/files/${logoUrl}/view?project=${PROJECT_ID}`; logoUrl = `${ENDPOINT}/storage/buckets/media_bucket/files/${logoUrl}/view?project=${PROJECT_ID}`;
} }
useEffect(() => { useEffect(() => {

2
src/components/NewsTicker.tsx
View File

@ -55,7 +55,7 @@ export default async function NewsTicker() {
const media = typeof post.imagen_destacada_id === 'object' ? post.imagen_destacada_id : mediaMap.get(post.imagen_destacada_id); const media = typeof post.imagen_destacada_id === 'object' ? post.imagen_destacada_id : mediaMap.get(post.imagen_destacada_id);
let imagenUrl = post.og_image_url || null; let imagenUrl = post.og_image_url || null;
if (media) { if (media) {
imagenUrl = `${APPWRITE_ALMEIRA_CONFIG.endpoint}/storage/buckets/${media.bucket_id}/files/${media.file_id}/preview?project=${APPWRITE_ALMEIRA_CONFIG.projectId}`; imagenUrl = `${APPWRITE_ALMEIRA_CONFIG.endpoint}/storage/buckets/${media.bucket_id}/files/${media.file_id}/view?project=${APPWRITE_ALMEIRA_CONFIG.projectId}`;
} }
tickerItems.push({ tickerItems.push({

4
src/components/TopBanner.tsx
View File

@ -33,10 +33,10 @@ export default function TopBanner({ initialBanners, rotationSeconds }: { initial
if (activeBanner.imagen_destacada_id) { if (activeBanner.imagen_destacada_id) {
if (typeof activeBanner.imagen_destacada_id === 'object' && activeBanner.imagen_destacada_id.bucket_id) { if (typeof activeBanner.imagen_destacada_id === 'object' && activeBanner.imagen_destacada_id.bucket_id) {
imgUrl = `${ENDPOINT}/storage/buckets/${activeBanner.imagen_destacada_id.bucket_id}/files/${activeBanner.imagen_destacada_id.file_id}/preview?project=${PROJECT_ID}&width=1920&height=500&quality=85`; imgUrl = `${ENDPOINT}/storage/buckets/${activeBanner.imagen_destacada_id.bucket_id}/files/${activeBanner.imagen_destacada_id.file_id}/view?project=${PROJECT_ID}&width=1920&height=500&quality=85`;
} else if (typeof activeBanner.imagen_destacada_id === 'string') { } else if (typeof activeBanner.imagen_destacada_id === 'string') {
// Fallback to 'media' bucket if we only have the ID // Fallback to 'media' bucket if we only have the ID
imgUrl = `${ENDPOINT}/storage/buckets/media/files/${activeBanner.imagen_destacada_id}/preview?project=${PROJECT_ID}&width=1920&height=500&quality=85`; imgUrl = `${ENDPOINT}/storage/buckets/media_bucket/files/${activeBanner.imagen_destacada_id}/view?project=${PROJECT_ID}&width=1920&height=500&quality=85`;
} }
} }

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

@ -13,7 +13,7 @@ export function getAppwriteImageUrl(fileId: string, bucketId?: string, width = 4
if (isVideo) { if (isVideo) {
return `${endpoint}/storage/buckets/${finalBucketId}/files/${fileId}/view?project=${projectId}`; 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`; return `${endpoint}/storage/buckets/${finalBucketId}/files/${fileId}/view?project=${projectId}&width=${width}&height=${height}&quality=80`;
} }
interface MediaGridSelectorProps { interface MediaGridSelectorProps {

4
src/components/dashboard/MediaPickerMini.tsx
View File

@ -60,7 +60,7 @@ export const MediaPickerMini = ({ value, onChange, label }: MediaPickerMiniProps
}, [searchTerm, isOpen]); }, [searchTerm, isOpen]);
const getImageUrl = (fileId: string) => { const getImageUrl = (fileId: string) => {
return `${endpoint}/storage/buckets/media/files/${fileId}/view?project=${projectId}&width=200&height=200&gravity=center`; return `${endpoint}/storage/buckets/media_bucket/files/${fileId}/view?project=${projectId}&width=200&height=200&gravity=center`;
}; };
const filteredItems = mediaItems; const filteredItems = mediaItems;
@ -91,7 +91,7 @@ export const MediaPickerMini = ({ value, onChange, label }: MediaPickerMiniProps
{value ? ( {value ? (
<> <>
<img <img
src={`${endpoint}/storage/buckets/media/files/${value}/view?project=${projectId}`} src={`${endpoint}/storage/buckets/media_bucket/files/${value}/view?project=${projectId}`}
alt="Selected" alt="Selected"
className="w-full h-full object-cover" className="w-full h-full object-cover"
/> />

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

@ -168,7 +168,7 @@ export const StreamOverlays = () => {
const bucketId = mediaObj.bucket_id || APPWRITE_ALMEIRA_CONFIG.mediaBucketId; const bucketId = mediaObj.bucket_id || APPWRITE_ALMEIRA_CONFIG.mediaBucketId;
return ( return (
<img <img
src={`${APPWRITE_ALMEIRA_CONFIG.endpoint}/storage/buckets/${bucketId}/files/${mediaObj.file_id}/preview?project=${APPWRITE_ALMEIRA_CONFIG.projectId}&width=400&height=250&quality=80`} src={`${APPWRITE_ALMEIRA_CONFIG.endpoint}/storage/buckets/${bucketId}/files/${mediaObj.file_id}/view?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}
/> />

2
src/components/publications/PostCard.tsx
View File

@ -38,7 +38,7 @@ function resolveImageUrl(
const { bucket_id, file_id } = post.imagen_destacada_id; const { bucket_id, file_id } = post.imagen_destacada_id;
const isSquare = post.tipo === 'evento' || post.tipo === 'aviso'; const isSquare = post.tipo === 'evento' || post.tipo === 'aviso';
const height = isSquare ? 640 : 360; const height = isSquare ? 640 : 360;
return `${endpoint}/storage/buckets/${bucket_id}/files/${file_id}/preview?project=${projectId}&width=640&height=${height}&quality=80`; return `${endpoint}/storage/buckets/${bucket_id}/files/${file_id}/view?project=${projectId}&width=640&height=${height}&quality=80`;
} }
// If it's a string, we can't generate a valid URL because it's a document ID, not a file ID. // If it's a string, we can't generate a valid URL because it's a document ID, not a file ID.

2
src/components/publications/RelationSelectField.tsx
View File

@ -186,7 +186,7 @@ function MediaThumbnail({ fileId }: { fileId: string }) {
const endpoint = process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT || 'https://nyc.cloud.appwrite.io/v1'; const endpoint = process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT || 'https://nyc.cloud.appwrite.io/v1';
const projectId = process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID || '6aef63d9002c07371b40'; const projectId = process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID || '6aef63d9002c07371b40';
const url = `${endpoint}/storage/buckets/media/files/${fileId}/preview?project=${projectId}&width=400&height=250&quality=80`; const url = `${endpoint}/storage/buckets/media_bucket/files/${fileId}/view?project=${projectId}&width=400&height=250&quality=80`;
return ( return (
<div className="mt-3 rounded-xl overflow-hidden border border-slate-800 bg-slate-900 aspect-video relative group animate-fade-in shadow-lg"> <div className="mt-3 rounded-xl overflow-hidden border border-slate-800 bg-slate-900 aspect-video relative group animate-fade-in shadow-lg">

2
src/lib/preferences.ts
View File

@ -10,7 +10,7 @@ export interface UserPreferences {
*/ */
export async function getUserPreferences(): Promise<UserPreferences> { export async function getUserPreferences(): Promise<UserPreferences> {
try { try {
const PROJECT_ID = process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID || '69b84df5003bd8957c5c'; const PROJECT_ID = process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID || '6aef63d9002c07371b40';
const { cookies } = await import('next/headers'); const { cookies } = await import('next/headers');
const cookieStore = await cookies(); const cookieStore = await cookies();
const sessionCookie = cookieStore.get(`a_session_${PROJECT_ID.toLowerCase()}`); const sessionCookie = cookieStore.get(`a_session_${PROJECT_ID.toLowerCase()}`);