Refactor 3Speak to embed-based upload with thumbnail support

[menobass]

Summary

• Replace old ThreeSpeakManager video system with simpler embed-based approach using TUS resumable uploads
• Auto-extract thumbnails from uploaded videos and add them to post metadata so feed card previews display correctly
• Allow users to override auto-extracted thumbnails with custom uploads
• Auto-add threespeakfund beneficiary (11%) in both publish and submit flows when 3speak embeds are detected

Key changes

• New threespeak-embed API layer — proper TypeScript types, configurable endpoints via EcencyConfigManager, structured error handling (replaces fragile string-based status code detection)
• Thumbnail flow — auto-extracts frame at ~25% into the video, uploads it, and sets it on 3Speak; user can override with custom image upload
• Beneficiary enforcement — threespeakfund (11%) is automatically added in publish, submit/publish, and submit/schedule flows; locked in the beneficiary editor UI
• Fixed runtime crash — removed reference to deleted setPublishingVideo state in drafts page
• Memory/resource fixes — canvas GPU leak, blob URL leaks in recorder, race condition during thumbnail extraction
• Dead code removed — use-publish-video-attach.ts, publish-editor-video-gallery*.tsx, unused Advanced type fields (isThreespeak, videoId, speakPermlink, speakAuthor, isNsfw, videoMetadata)

Setup required

The ecency team needs to set the following env vars:

• NEXT_PUBLIC_THREESPEAK_EMBED_API_KEY — 3Speak embed API key
• NEXT_PUBLIC_THREESPEAK_EMBED_ENDPOINT — (optional, defaults to https://embed.3speak.tv)

Test plan

• Upload a video via the publish editor — verify TUS upload completes with progress bar
• Verify auto-thumbnail extraction shows a preview frame after upload
• Upload a custom thumbnail and verify it replaces the auto-extracted one
• Publish a post with a 3speak embed — verify threespeakfund beneficiary appears in the tx
• Publish via the legacy submit flow — verify same beneficiary enforcement
• Schedule a post with a 3speak embed — verify beneficiary is included
• Load a draft that was saved before this change — verify no crash
• Verify feed card preview shows the video thumbnail (not a broken image)
• Record a video via the recorder — verify WebM playback works in preview

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features

  • 3Speak embed upload with progress, thumbnail extraction/upload, and direct insertion of embed URLs into posts
  • Automatic enforcement/locking of the required beneficiary when a 3Speak embed is detected

• Refactor

  • Replaced legacy video gallery/metadata workflow with a streamlined embed-based upload and simplified publish/draft/autosave flows
  • Editor/toolbar updated to use embed-based upload flow

• Documentation

  • Updated translations and user-facing messages for video upload and beneficiary locking

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 4ff64e14-6c7a-490f-9ed3-362dd55c56e1

📥 Commits

Reviewing files that changed from the base of the PR and between 36de490 and b7fd2c5.

📒 Files selected for processing (5)

• apps/web/src/app/api/threespeak/thumbnail/route.ts
• apps/web/src/app/api/threespeak/upload-token/route.ts
• apps/web/src/app/publish/_components/publish-editor-toolbar.tsx
• apps/web/src/app/publish/_hooks/use-publish-state.tsx
• apps/web/src/features/shared/video-upload-threespeak/index.tsx

---

📝 Walkthrough

Walkthrough

Adds a 3Speak embed upload flow (client TUS upload, token proxy, thumbnail proxy), enforces a threespeak beneficiary when embed URLs exist, replaces legacy gallery/manager/video metadata flows with embed-based UI, and removes many old ThreeSpeak-specific modules and types.

Changes

Cohort / File(s)	Summary
3Speak embed client & server routes apps/web/src/api/threespeak-embed/types.ts, apps/web/src/api/threespeak-embed/api.ts, apps/web/src/api/threespeak-embed/mutations.ts, apps/web/src/api/threespeak-embed/index.ts, apps/web/src/api/threespeak-embed/beneficiary.ts, apps/web/src/app/api/threespeak/upload-token/route.ts, apps/web/src/app/api/threespeak/thumbnail/route.ts	New embed client (extractPermlink, TUS upload with token), upload mutation hook, beneficiary helpers (detect/enforce threespeakfund), and two server proxy endpoints (upload token, set thumbnail).
Config, CI, docker env apps/web/.env.template, apps/web/src/config/config.ts, .github/workflows/*.yml, apps/web/docker-compose*.yml	Add NEXT_PUBLIC_THREESPEAK_EMBED_ENDPOINT and THREESPEAK_EMBED_API_KEY wiring (config, env templates, CI secrets, docker-compose).
Embed-based upload UI & recorder apps/web/src/features/shared/video-upload-threespeak/index.tsx, .../video-upload-recorder.tsx	Replace gallery flow with embed upload/recorder: new preview/thumbnail flow, 1GB limit, onVideoUploaded/onEmbedUrlReady callbacks, and VideoData (embedUrl, permlink).
Editor/toolbar integration apps/web/src/features/shared/editor-toolbar/index.tsx, apps/web/src/features/tiptap-editor/functions/parse-all-extensions-to-doc.ts	Toolbar now uses onVideoUploaded to insert embed URLs; removed gallery state and publishingVideo dependency; parseAllExtensionsToDoc signature simplified.
Publish & submit flows / hooks apps/web/src/app/publish/*, apps/web/src/app/submit/*, apps/web/src/features/entry-management/*, apps/web/src/entities/private-api/drafts.ts	Removed publishingVideo and ThreeSpeakManager state/flows, eliminated video-specific metadata building/storage, switched to enforceThreeSpeakBeneficiary, simplified body handling to use raw body, and removed video fields from DraftMetadata and Advanced types.
Removed legacy gallery/manager code apps/web/src/features/3speak/*, apps/web/src/features/shared/video-gallery/*, apps/web/src/api/threespeak/*, apps/web/src/app/submit/_components/submit-video-attachments.tsx, apps/web/src/app/publish/_components/publish-editor-video-gallery*.tsx, apps/web/src/app/publish/_hooks/use-publish-video-attach.ts	Deleted legacy ThreeSpeak manager, migration adapter, gallery components, old API client, queries/mutations/types, and barrel exports—review call sites and removed public APIs.
Publish/submit UI adjustments apps/web/src/app/publish/_components/publish-editor-toolbar.tsx, .../publish-beneficiaries-dialog.tsx, apps/web/src/app/submit/_components/beneficiary-editor/index.tsx, apps/web/src/app/publish/_components/publish-editor.tsx, apps/web/src/app/publish/entry/[author]/[permlink]/_page.tsx	UI: locked threespeak beneficiary indicator when embed present, remove gallery controls, add allowToUploadVideo prop to editor/toolbar, BeneficiaryEditor accepts lockedAccounts.
Localization & tests apps/web/src/features/i18n/locales/en-US.json, apps/web/src/specs/features/3speak/*	Add new video-upload and beneficiary-editor translation keys, remove gallery keys, and add tests for extractPermlink and beneficiary enforcement.
Styling removed apps/web/src/features/shared/video-gallery/index.scss	Delete gallery-specific SCSS; verify no remaining class usage.

Sequence Diagram(s)

sequenceDiagram
actor User
participant Editor as Editor/Toolbar
participant VideoUpload as VideoUpload Component
participant EmbedAPI as 3Speak Embed API
participant Server as App Server (upload-token/thumbnail)
participant PublishState as Publish State / Beneficiaries
User->>Editor: Click "Insert video"
Editor->>VideoUpload: Open upload/recorder UI
User->>VideoUpload: Select or record file
VideoUpload->>Server: POST /api/threespeak/upload-token (request token)
Server->>EmbedAPI: POST /uploads/token (forward API key)
EmbedAPI-->>Server: return token
Server-->>VideoUpload: return token
VideoUpload->>EmbedAPI: TUS upload with Bearer token
EmbedAPI-->>VideoUpload: 201 + x-embed-url header (embedUrl, permlink)
alt thumbnail set
VideoUpload->>Server: POST /api/threespeak/thumbnail (permlink, thumbnail_url)
Server->>EmbedAPI: POST /video/{permlink}/thumbnail (X-API-Key)
EmbedAPI-->>Server: success
Server-->>VideoUpload: success
end
VideoUpload->>Editor: onVideoUploaded(embedUrl, thumbnailUrl?)
Editor->>PublishState: Insert embedUrl into body
PublishState->>PublishState: hasThreeSpeakEmbed(body) -> enforceThreeSpeakBeneficiary(...)
PublishState-->>Editor: Update beneficiaries / locked state

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~75 minutes

Possibly related PRs

• Refactor 3Speak to embed-based upload with thumbnail support #701 — Implements a similar embed-based 3Speak upload/thumbnail/beneficiary flow; likely directly related.
• Improve webp, 3speak render-helper #658 — Related changes to 3Speak embed URL normalization and permlink extraction/regex handling.
• Fix editing/draft loading #623 — Overlaps on draft save flow changes and draft metadata handling.

Suggested labels

patch

Poem

🐰 I hopped in with a carrot and cheer,
Embeds now roll in, the upload's near,
The threespeakfund sits snug and tight,
Old galleries cleared to make things light,
A tiny hop — the video’s here.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 25.81% 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 accurately describes the main change: refactoring 3Speak to an embed-based upload system with thumbnail support, which is a core transformation reflected throughout the changeset.

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

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feature/threespeak-embed-upload

📝 Coding Plan

• Generate coding plan for human review comments

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[feruzm]

LGTM, @menobass thank you very much for valuable contribution!