Skip to content

Improve webp, 3speak render-helper#658

Merged
feruzm merged 6 commits intodevelopfrom
renderh
Feb 18, 2026
Merged

Improve webp, 3speak render-helper#658
feruzm merged 6 commits intodevelopfrom
renderh

Conversation

@feruzm
Copy link
Copy Markdown
Member

@feruzm feruzm commented Feb 18, 2026

Summary by CodeRabbit

  • New Features

    • Automatic orientation detection for 3Speak videos with responsive portrait, square, and landscape layouts.
  • Improvements

    • Consistent image delivery: client-side WebP gating removed; image format is now handled server-side for uniform rendering.
    • Unified post-body rendering across feeds, posts, comments, and previews for consistent formatting.
    • Improved 3Speak URL normalization and embed handling.
  • Bug Fixes

    • Resolved various image/embed display inconsistencies (avatars, covers, thumbnails, and video embeds).

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Feb 18, 2026

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

This PR removes client-side WebP/format flags from render-helper and callers, standardizes proxied images to format=match (no file extensions), simplifies renderPostBody calls (drops third arg), adds 3Speak iframe orientation detection with speak-{orientation} classes, and updates tests/snapshots.

Changes

Cohort / File(s) Summary
Render-helper core & APIs
packages/render-helper/src/methods/..., packages/render-helper/src/proxify-image-src.ts, packages/render-helper/src/markdown-2-html.ts, packages/render-helper/src/*method.ts
Removed webp/_format parameters from public/internal APIs (img, a, linkify, text, traverse, markdownToHTML, proxifyImageSrc). proxifyImageSrc now strips extensions and always uses format=match; cache keys/signatures updated and many tests adjusted.
3Speak embed & styling
apps/web/src/features/post-renderer/components/extensions/three-speak-video-extension.tsx, apps/web/src/features/tiptap-editor/extensions/three-speak-video-extension.tsx, apps/web/src/features/post-renderer/ecency-renderer.scss, packages/render-helper/src/consts/regexes.const.ts, packages/render-helper/src/methods/iframe.method.ts
Added iframe ref and postMessage listener to detect player orientation; apply speak-{orientation} classes; normalize 3Speak URLs (watch→embed, optional play. prefix); added portrait/square CSS and speak-iframe class.
Frontend call-sites (image handling & renderPostBody)
apps/*/src/**/blog-*.tsx, apps/web/src/app/**/.../community-cover/index.tsx, apps/web/src/app/**/similar-entry-item.tsx, apps/web/src/app/submit/**, apps/web/src/features/shared/**, apps/web/src/features/chat/**, apps/self-hosted/src/features/blog/components/*
Removed useGlobalStore/canUseWebp usages and dropped webp args from proxifyImageSrc, catchPostImage, renderPostBody. Simplified image URLs to non-webp paths, trimmed memo deps, and removed hydration/webp guards.
UI components & cleanup
apps/web/src/features/shared/*, apps/web/src/app/decks/*, apps/web/src/app/witnesses/*, apps/web/src/features/shared/user-avatar/*
Minor import cleanups, removed redundant flags/guards, standardized avatar/cover/thumbnail URL construction to proxify/catchPostImage without format arg.
Tests & snapshots
packages/render-helper/src/**/*.spec.ts, apps/web/src/specs/api/queries/image-downloader-query.spec.ts, packages/render-helper/src/test/snaps.json
Updated tests and snapshots to reflect removed webp flags, new function signatures, proxified URLs without file extensions, format=match expectations; added 3Speak iframe tests and adjusted legacy snapshots.
Package metadata
packages/render-helper/CHANGELOG.md, packages/render-helper/package.json
Bumped package version to 2.4.16 and added changelog entry for render-helper updates.

Sequence Diagram(s)

sequenceDiagram
    participant Renderer as Post Renderer
    participant Extension as ThreeSpeak Extension
    participant IFrame as IFrame Element
    participant Player as 3Speak Player (iframe window)

    Renderer->>Extension: mount 3Speak embed (create iframe & set src)
    Extension->>IFrame: insert iframe (attach ref)
    IFrame->>Player: load embed URL
    Player->>IFrame: postMessage { type: "3speak-player-ready", isVertical, aspectRatio }
    IFrame->>Extension: message event (validated origin & source)
    Extension->>Extension: map isVertical/aspectRatio -> orientation
    Extension->>Renderer: apply speak-{orientation} class to container
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

Poem

🐰 I hopped through code where flags once lay,

Snipped webp threads so proxied paths now play.
I listened to 3Speak whisper aspect and tone,
Tucked speak-portrait, speak-square into the DOM's home.
Happy hops — lighter renders, handled on the server's way!

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 7.89% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'Improve webp, 3speak render-helper' accurately reflects the main changes in the PR: comprehensive removal of webp feature flag logic and improvements to 3speak video rendering across the render-helper package and dependent components.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch renderh

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

coderabbitai[bot]

This comment was marked as resolved.

coderabbitai[bot]

This comment was marked as resolved.

coderabbitai[bot]

This comment was marked as resolved.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (2)
packages/render-helper/src/methods/img.method.ts (2)

53-63: createImageHTML lacks a guard for an empty proxifyImageSrc result.

If src is somehow invalid, proxifyImageSrc(src) returns "" and the returned HTML will contain src="", rendering a broken image. Consistent with the fix above, a guard here keeps the output safe.

♻️ Proposed fix
 export function createImageHTML(src: string, isLCP: boolean): string {
   const loading = isLCP ? 'eager' : 'lazy';
   const fetch = isLCP ? 'fetchpriority="high"' : 'decoding="async"';
   const proxified = proxifyImageSrc(src);
+  if (!proxified) return '';
   return `<img
     class="markdown-img-link"
     src="${proxified}"
     loading="${loading}"
     ${fetch}
     itemprop="image"
   />`;
 }
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/render-helper/src/methods/img.method.ts` around lines 53 - 63,
createImageHTML should guard against an empty proxified URL: call
proxifyImageSrc(src) into proxified and if proxified is falsy/empty, return an
empty string (no <img> tag) instead of producing src=""; otherwise continue
building the img HTML using loading, fetch and proxified as before so you avoid
rendering broken images.

4-4: src is never reassigned — prefer const.

src is read-only after initialisation; let is no longer needed now that the proxification path uses setAttribute rather than mutating the local variable.

♻️ Proposed change
-  let src = el.getAttribute("src") || "";
+  const src = el.getAttribute("src") || "";
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/render-helper/src/methods/img.method.ts` at line 4, The variable src
in img.method.ts is never reassigned so replace its declaration with a const to
reflect immutability: change the declaration of src (currently "let src =
el.getAttribute('src') || ''") to use const so that the value retrieved from
el.getAttribute remains read-only and aligns with the proxification path that
now uses setAttribute rather than mutating the local variable.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/render-helper/src/methods/img.method.ts`:
- Around line 47-50: The code passes the raw undecoded src to proxifyImageSrc
and unconditionally sets the element src even if proxifyImageSrc returns an
empty string; change the call in the shouldReplace && !hasAlreadyProxied block
to pass decodedSrc (the value used for validation) to proxifyImageSrc, then
check the returned proxified value and only call el.setAttribute("src",
proxified) when proxified is a non-empty truthy string; leave the original src
untouched if proxifyImageSrc returns an empty string or falsy value so images
are not blanked out.

---

Nitpick comments:
In `@packages/render-helper/src/methods/img.method.ts`:
- Around line 53-63: createImageHTML should guard against an empty proxified
URL: call proxifyImageSrc(src) into proxified and if proxified is falsy/empty,
return an empty string (no <img> tag) instead of producing src=""; otherwise
continue building the img HTML using loading, fetch and proxified as before so
you avoid rendering broken images.
- Line 4: The variable src in img.method.ts is never reassigned so replace its
declaration with a const to reflect immutability: change the declaration of src
(currently "let src = el.getAttribute('src') || ''") to use const so that the
value retrieved from el.getAttribute remains read-only and aligns with the
proxification path that now uses setAttribute rather than mutating the local
variable.

@feruzm feruzm added the patch Bug fixes and patches (1.0.0 → 1.0.1), add this only if any packages/ have patch changes in PR label Feb 18, 2026
@feruzm feruzm marked this pull request as draft February 18, 2026 14:08
@feruzm feruzm marked this pull request as ready for review February 18, 2026 14:08
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Duplicate comments:
In `@packages/render-helper/src/methods/img.method.ts`:
- Around line 46-51: Ensure the img replacement block uses the decoded URL and
only writes back a truthy proxified value: call proxifyImageSrc with decodedSrc
and, if the result is truthy, set it on the element via el.setAttribute("src",
...); keep the existing guards shouldReplace and !hasAlreadyProxied to avoid
overwriting an already-proxied src and preserve the original src on proxify
failure (references: proxifyImageSrc, decodedSrc, shouldReplace,
hasAlreadyProxied, el.setAttribute).

@feruzm feruzm merged commit 8c7ad39 into develop Feb 18, 2026
1 check passed
@feruzm feruzm deleted the renderh branch February 18, 2026 14:15
@coderabbitai coderabbitai bot mentioned this pull request Feb 18, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

patch Bug fixes and patches (1.0.0 → 1.0.1), add this only if any packages/ have patch changes in PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant