diff --git a/replit.md b/replit.md index 5f7ef7a..edad4b8 100644 --- a/replit.md +++ b/replit.md @@ -9,13 +9,19 @@ Preferred communication style: Simple, everyday language. ## Recent Changes ### November 21, 2025 -- **Story Text Rendering with Emoji Support**: Implemented robust emoji rendering in Instagram/Facebook stories using Twemoji (Twitter's emoji library). Previous implementation removed all emojis due to canvas rendering limitations. New solution: +- **Story Text Rendering with Emoji Support (Backend & Frontend)**: Implemented complete emoji rendering pipeline for Instagram/Facebook stories using Twemoji: + - **Backend Implementation** (`server/services/emojiRenderer.ts`, `server/services/imageProcessor.ts`): + - Created `emojiRenderer` service that converts text emojis to high-quality PNG images from Twemoji CDN + - Smart text wrapping handles long emoji sequences (e.g., "🎉🎉🎉🎉🎉") by breaking them into chunks that fit within canvas bounds + - In-memory caching of emoji images reduces CDN requests and improves performance + - Grapheme-aware breaking uses `Array.from()` for proper Unicode grapheme splitting + - **Frontend Preview Implementation** (`client/src/lib/emojiUtils.ts`, `client/src/components/emoji-text.tsx`): + - Added `twemoji` package for client-side emoji parsing + - Created `EmojiText` React component that renders emojis as Twemoji images in preview modal + - Ensures preview modal matches actual published story appearance (both use Twemoji CDN images) + - Emoji size dynamically scales with text font size - **Hashtag Removal**: Changed from removing emojis to removing hashtags (`#tag`) for cleaner story text while preserving emojis for engagement - - **Twemoji Integration**: Created `emojiRenderer` service that converts text emojis to high-quality PNG images from Twemoji CDN - - **Smart Text Wrapping**: Enhanced text wrapping to handle long emoji sequences (e.g., "🎉🎉🎉🎉🎉") by breaking them into chunks that fit within canvas bounds - - **Emoji Caching**: Implements in-memory caching of emoji images to reduce CDN requests and improve performance - - **Grapheme-Aware Breaking**: Uses `Array.from()` for proper Unicode grapheme splitting, ensuring multi-codepoint emojis aren't broken incorrectly - - Files modified: `shared/emoji.ts`, `server/services/emojiRenderer.ts`, `server/services/imageProcessor.ts`, `client/src/components/preview-modal.tsx` + - Files modified: `shared/emoji.ts`, `server/services/emojiRenderer.ts`, `server/services/imageProcessor.ts`, `client/src/lib/emojiUtils.ts`, `client/src/components/emoji-text.tsx`, `client/src/components/preview-modal.tsx` ### November 18, 2025 - **Facebook Video Codec Compatibility Fix**: Fixed issue where MP4 videos uploaded to Facebook would not play correctly due to codec incompatibility. Facebook requires strict video format: H.264 video codec, AAC audio codec, and MP4 container. Solution: Added automatic video transcoding via Cloudinary transformations. When publishing a video to Facebook, the system now transforms the Cloudinary URL to include `vc_h264,ac_aac,f_mp4,q_auto` parameters, ensuring all videos are automatically re-encoded to Facebook-compatible format before publication. The getFacebookCompatibleVideoUrl() method detects Cloudinary video URLs and applies the necessary transformations transparently. Non-Cloudinary URLs are passed through unchanged with a warning. This ensures reliable video playback on Facebook without requiring users to manually re-encode their videos. Files modified: `server/services/facebook.ts`.