Fanar: Universal asset previewer (audio, image, code, PDF, CSV, text diffs, Tafsir)

Objective: Universal Asset Previewer · Quarter: Q2 1448 · Size: L · Priority: High Roadmap: Fanar 1448 Q1 & Q2 Roadmap

Context

Content managers currently inspect raw Mushaf assets by downloading files locally. We need an integrated in-browser previewer component covering all asset types (audio player, image viewer, code syntax view, PDF render, CSV table view, text diff) before publishing.

Why

Eliminates raw download dependency and allows content team to verify dataset integrity, audio cuts, and Tafsir text diffs directly inside the admin application.

Acceptance criteria

• Single universal in-browser preview component supporting audio, images, code syntax, PDFs, CSV tables, and text diffs.
• Accessible controls (play/pause for audio, zoom for images, table pagination for CSV).
• Graceful fallback and inline error handling when a file format is corrupt or unsupported.
• Built using Angular 20 Standalone Components & NG-ZORRO UI framework.

🛠️ Implementation & Technical Guidance

Target File Paths

• cms-frontend/src/app/features/admin/components/universal-asset-previewer/
  • universal-asset-previewer.component.ts
  • universal-asset-previewer.component.html

---

🤝 Before you pick this up

Fanar is an open-source, community-maintained project. For it to outlive any one of us, the people contributing need to genuinely understand how it works internally — that understanding is the thing we're actually building.

We all have AI subscriptions. Using AI to help you work is fine and expected. But if you copy this issue into an agent, paste back whatever it produces, and open a PR you haven't read, you're taking more from this project than you're giving it. Reviewing code that its own author never read or ran costs the maintainers more than writing it would have.

So before you open a PR, please make sure you:

• understand the code you're submitting, well enough to explain why it works
• ran it on your own machine and saw it behave correctly
• tested it — including the cases you expect to fail

If you're not planning to do that on this one, please leave it for someone who will. And if you're stuck partway, say so in the comments — a half-finished PR you understand is far more welcome than a complete one you don't.