Skip to content

feat: implement IPFS media relay and progressive UI loading#172

Open
kimilooo wants to merge 1 commit into
sartoopjj:mainfrom
kimilooo:feature/ipfs-relay-progressive-ui
Open

feat: implement IPFS media relay and progressive UI loading#172
kimilooo wants to merge 1 commit into
sartoopjj:mainfrom
kimilooo:feature/ipfs-relay-progressive-ui

Conversation

@kimilooo
Copy link
Copy Markdown

🚀 Description (English)

I have implemented the IPFS Media Relay and Progressive UI Loading features for thefeed project to enhance censorship resistance and improve user experience on slow or restricted networks.

🛠 Backend Implementation (Go)

  • IPFS Relay Logic: Added IPFSRelay to handle media processing and multipart uploads to IPFS via the Pinata API.
  • Compression & Extraction: Automatically extracts the dominant hex color of images to serve as a lightweight UI placeholder. It also compresses images using the standard jpeg library (bypassing CGO/WebP dependencies to ensure seamless cross-platform compilation, especially on Windows).
  • CLI & Config: Added proper CLI flags (--ipfs-relay-enabled, --ipfs-relay-jwt, etc.) in cmd/server/main.go for easy configuration.

🖥 Frontend Implementation (JavaScript)

  • Progressive UI: Immediately renders a placeholder block using the extracted dominant_color_hex to prevent layout shifts while the heavy binary loads.
  • Asynchronous Hydration: Fetches the actual media from IPFS gateways in the background and gracefully fades it in once fully retrieved.

with AI

##(فارسی)
این Pull Request ویژگی‌های رله رسانه IPFS و لودینگ تدریجی رابط کاربری (Progressive UI) را به پروژه اضافه می‌کند تا مقاومت در برابر سانسور شبکه و تجربه کاربری در اینترنت‌های ضعیف به شدت بهبود یابد.

🛠 چه تغییراتی در بک‌اند (Go) اعمال شد؟

  • مدیریت مستقیم IPFS: اضافه شدن سیستم رله جدید برای پردازش مدیا و آپلود مستقیم و امن آن‌ها روی شبکه IPFS از طریق API پیناتا (Pinata).
  • استخراج رنگ و بهینه‌سازی: سرور حالا به صورت خودکار رنگ غالب (اصلی) عکس را پیدا کرده و به عنوان یک دیتای بسیار کم‌حجم از طریق DNS ارسال می‌کند. همچنین برای جلوگیری از مشکلات کامپایل در ویندوز (ارورهای CGO)، سیستم فشرده‌سازی روی فرمت استاندارد JPEG تنظیم شده است.
  • فلگ‌های اجرایی: اضافه شدن متغیرهای جدید به فایل اجرایی سرور برای فعال‌سازی راحت این سیستم.

🖥 چه تغییری در فرانت‌اند (JavaScript) می‌بینیم؟

  • حذف پرش‌های صفحه (Layout Shifts): به محض لود شدن پست، ابتدا یک کادر با رنگ اصلیِ عکس نشان داده می‌شود تا ساختار صفحه ثابت بماند.
  • لودینگ نرم (Fade-in): عکس و ویدیوها در پس‌زمینه از درگاه‌های آزاد IPFS دانلود شده و به نرمی جایگزین کادر رنگی می‌شوند.

@sartoopjj
Copy link
Copy Markdown
Owner

درود

وقت بخیر
من متوجه نشدم این تغییر دقیقا چیه
چون بخش تل‌میررور نباید هیچ وابستگی ای به سرور دفید داشته باشه و اینها دوتا چیز جدا هستند
لطفا بیشتر توضیح بدید

@kimilooo
Copy link
Copy Markdown
Author

درود ممنون از اینکه review کردید
دلیل اینکه این روش رو پیاده کردم این بود که می‌خواستم دیتای IPFS (مثل CID، رنگ غالب و نوع مدیا) رو به فرانت‌اند برسونم، اما نمی‌خواستم ساختار اصلی دیتای JSON یا پروتکل باینری رو دستکاری کنم. برای همین، دیتا رو به صورت یک تگ متنی (مثل [IPFS]...) به متن پست‌ها اضافه کردم و توی telemirror.js پارسش کردم تا عکس‌ها رو لود کنه.
الان کاملاً متوجهم که telemirror یک ابزار جدا هست
پیشنهاد شما برای انتقال این متادیتا به رابط کاربری چیه؟
آیا بهتره یک فیلد کاملاً مجزا و اختیاری توی خروجی JSON برای دیتای IPFS اضافه کنیم؟ یا اینکه ترجیح می‌دید این لاجیک رو کلاً خارج از telemirror.js نگه داریم؟
ممنون میشم معماری مدنظرتون رو بگید

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants