Feat: update video block in elementor

[rudrakshi-gupta]

Feat: GoDAM Video (Elementor) — transcription toggle, editor-preview parity, and a dedicated preview stylesheet

Issue - rtCamp/godam-plugin-wp#21

Summary

Rounds out the GoDAM Video Elementor widget and cleans up the editor-preview styling shared by all GoDAM Elementor widgets. Highlights:

• Adds a Show Transcription toggle to the Video widget (both share + transcription now default off).
• Makes the share and transcription indicators render on the video in the Elementor editor preview, matching the Gutenberg block editor's persistent top-right icons.
• Gives the Video widget a proper empty state (consistent with Image / Audio / Gallery).
• Fixes the auto-generated thumbnail picker not appearing in the panel (timing bug).
• Extracts all Elementor editor-preview CSS out of inline <style> blocks into a dedicated, built stylesheet enqueued into the preview iframe.

What changed

Video widget — inc/classes/elementor-widgets/class-godam-video.php

• New "Show Transcription" control (show_transcription), mapped to the block's showTranscription attribute in the render array (the shared player template already reads it). Both show_share_button and show_transcription now default to off ('').
• Editor-preview overlay: in the Elementor editor/preview only, render() wraps the player and overlays static top-right share and transcript icons (same SVGs the Gutenberg block editor uses) when the respective toggle is on — transcript on top, share below it when both are on. The live player only adds these to the video.js control bar (and gates the transcript button on an actual transcript), so they wouldn't reliably show while designing; the static indicators guarantee parity with the block editor. The live control-bar buttons are hidden inside the preview wrapper so nothing duplicates. The published front end is untouched — it still uses the real player, and showShareButton / showTranscription are passed through to it.
• Empty state: an image-less… video-less widget now shows a dummy 16:9 video placeholder ("Add Video Here" + prompt) instead of a bare box, consistent with the other GoDAM widgets.
• New helpers: is_editor_preview() and render_editor_button_overlay().

Thumbnail picker fix — assets/src/js/elementor/editor.js

The "Or pick an auto-generated thumbnail" grid sometimes never populated. hydrateWidget() scheduled the render with a single setTimeout(100), but Elementor injects the conditional RAW_HTML picker control into the panel DOM asynchronously — if it wasn't there at 100 ms, renderThumbnailPicker() bailed and nothing re-triggered it (a passive panel open fires no settings change). Replaced the fixed delay with a bounded poll (up to ~2 s) that waits for the container, then renders once, and bails if the panel has since switched widgets. Side benefit: videos with no auto-thumbnails now correctly show the "none available" message instead of a blank gap.

Dedicated preview stylesheet — assets/src/css/godam-elementor-preview.scss (new)

Previously the editor-preview affordances (empty states + the video overlay) used inline <style> blocks / inline style="" attributes, because the widgets render inside Elementor's preview iframe, where the plugin's editor-panel stylesheet (godam-elementor-editor.css, enqueued in the editor's main window) isn't loaded.

Moved all of that CSS into a dedicated SCSS that auto-builds to assets/build/css/godam-elementor-preview.css (any non-_ file in assets/src/css/ is picked up by the webpack styles config — no config change needed), and enqueue it into the preview iframe via elementor/preview/enqueue_styles. It covers the video overlay and the image / gallery / audio / video empty states.

Dynamic icon URLs (which depend on RTGODAM_URL, so they can't be hard-coded in a static SCSS) are passed per-element via a --godam-preview-icon CSS custom property, which the SCSS consumes with background-image: var(--godam-preview-icon).

Enqueue + cleanup — inc/classes/class-elementor-widgets.php

• New enqueue_preview_styles() hooked to elementor/preview/enqueue_styles (guarded on the built file existing).

Consistency cleanup across sibling widgets

Removed the inline <style> blocks / inline style attributes from the Image, Gallery, and Audio empty states (class-godam-image.php, class-godam-gallery.php, class-godam-audio.php) and pointed them at the new stylesheet + --godam-preview-icon property. No visual change — just the same styling from a maintainable, built source.

Why static indicators instead of the live player buttons (editor only)

The live GoDAM player adds share/transcript to the video.js control bar and gates the transcript button on a fetched transcript (data-job_id) — reasonable at runtime, but it means the buttons don't reliably show while an author is designing. The block editor solves this with persistent static top-right icons; this PR mirrors that in the Elementor preview so the two editors look the same. Front-end rendering is unchanged.

Build

The SCSS and editor.js changes require a build:

npm run build:js

assets/build/** is gitignored, so reviewers must rebuild locally. The PHP changes (widget controls, render, enqueue) don't need a build on their own, but the preview stylesheet + thumbnail-picker fix do.

Testing

Show Transcription + overlay parity (editor preview)

1. Drop a GoDAM Video widget → Show share button and Show transcription are both off by default.
2. Turn Show share button on → share icon appears top-right of the video in the preview.
3. Turn Show transcription on (share off) → transcript icon top-right.
4. Both on → transcript icon on top, share icon below it.
5. Both off → no icons.
6. Publish / view front end → player behaves as before (real share button / transcript panel per the player, the site-wide "Enable global video share" setting, and transcript availability).

Thumbnail picker
7. Open a Video widget whose video has auto-generated thumbnails → the "Or pick an auto-generated thumbnail" grid fills; clicking a tile sets the poster.
8. A video with no auto-thumbnails → shows "No auto-generated thumbnails available…" instead of a blank gap.
9. Switch quickly between two video widgets → the correct grid shows for the open one.

Preview stylesheet / other widgets
10. Image / Audio / Gallery / Video empty states still render correctly in the Elementor preview (styling now comes from the enqueued stylesheet).
11. Confirm nothing new loads or renders on the published front end.

Related

Part of the GoDAM page-builder rollout (Video, Video Gallery, Audio, Document, Image across WPBakery and Elementor).

Demo

Screen.Recording.2026-07-27.at.5.48.37.PM.mov

[Copilot]

Pull request overview

Note

Copilot couldn't run its full agentic review because it didn't start before the timeout. Make sure your repository has a runner available, or add a copilot-code-review.yml file specifying one with the runs-on attribute. See the docs for more details.

Updates the GoDAM Video Elementor widget to add a transcription toggle, improve editor-preview parity (static overlay indicators), and standardize editor-preview styling via a dedicated preview-iframe stylesheet.

Changes:

• Added a Show Transcription control and wired it through to the player render attributes.
• Added editor-preview-only UI improvements: static overlay indicators and a consistent empty state for the Video widget.
• Moved multiple widgets’ editor-preview styling into a new preview iframe stylesheet and fixed thumbnail-picker timing with a bounded poll.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
inc/classes/elementor-widgets/class-godam-video.php	Adds transcription control, editor overlay rendering, and a video empty state.
inc/classes/elementor-widgets/class-godam-image.php	Removes inline empty-state styles and switches to CSS custom property + shared preview stylesheet.
inc/classes/elementor-widgets/class-godam-gallery.php	Removes inline empty-state styles in favor of the shared preview stylesheet.
inc/classes/elementor-widgets/class-godam-audio.php	Replaces inline styles with class-based styling + CSS custom property for the icon.
inc/classes/class-elementor-widgets.php	Enqueues the built preview stylesheet into the Elementor preview iframe.
assets/src/js/elementor/editor.js	Replaces fixed-delay thumbnail picker render with bounded polling + keeps autoplay lock behavior.
assets/src/css/godam-elementor-preview.scss	New SCSS for preview-iframe-only empty states and the video overlay UI.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[KMchaudhary]

Code review — PR #2044

Reviewed the diff (Elementor Video widget transcription toggle, editor-preview overlay parity, thumbnail-picker fix, and the dedicated preview stylesheet). Nicely documented change overall — the caching/poll rationale and the "why static indicators" write-up made this easy to follow. A few things worth a look, roughly by severity:

1. Transcription now defaults off — silent regression for already-published widgets ⚠️

class-godam-video.php (render())

godam-player.php documents "Transcription panel defaults to on; only an explicit false disables it" (! isset( $attributes['showTranscription'] ) || ! empty(...)). Before this PR the widget passed no showTranscription, so existing Elementor videos showed the transcript panel by default. Now render() always sends showTranscription => $widget_show_transcription, and the new control defaults to '' → false.

Net effect: every already-published Elementor Video widget that was relying on the default loses its transcript panel after this update, with no migration. If that's the intended product decision it's fine, but it's a front-end behavior change on existing content and should be called out in release notes at minimum — or consider defaulting the new control on to preserve current behavior.

2. Static transcript indicator shows even when there's no transcript

class-godam-video.php (render_editor_button_overlay())

The overlay adds the transcript icon purely on $show_transcription, but the live player gates the real transcript button on an actual transcript (data-job_id), and the control's own description says "(when a transcript is available)". So an author who toggles it on for a transcript-less video sees a top-right transcript icon in the preview that never appears on the front end. The share indicator doesn't have this mismatch. Worth a note, or gating the preview icon similarly if the availability is known at render time.

3. Overlapping poll loops → redundant thumbnail fetches

editor.js (hydrateWidget / scheduleThumbnailPickerRender)

scheduleThumbnailPickerRender is now driven both by onSettingsChange (video-file/poster) and by every panel.currentPageView render. On a video pick, the settings-change poll and the SEO auto-sync render() poll can run concurrently; if the first get-video-thumbnail fetch is still in flight (renderedTilesHtml === null), the second call falls through the same-attachment guard and fires a second REST request. The token check keeps the result correct, but the extra fetches are wasted. Consider de-duping (e.g. skip scheduling while a fetch is already pending for the same attachment).

4. render listener isn't detached when switching to a non-GoDAM widget

editor.js (hydrateWidget)

The panel.currentPageView.on('render', scheduleThumbnailPickerRender) handler is only ever removed inside hydrateWidget, which fires only for godam-video. Open a Video widget, then open/edit a Heading: the handler stays bound, so every Heading-panel re-render kicks off a fresh ~2s bounded poll that only bails after 20 attempts looking for a picker that isn't there. Harmless but wasteful — detaching on panel close (or guarding on the active widget type inside the handler) would clean it up.

5. render_empty_state() duplicates the new is_editor_preview() helper

class-godam-video.php

This PR adds is_editor_preview(), but render_empty_state() re-implements the same is_edit_mode() || is_preview_mode() check inline. Two copies of the same guard will drift; render_empty_state() can just call the helper.

6. Stale docblock on render_editor_button_overlay()

class-godam-video.php

The docblock still says the styling is "self-contained (the preview iframe doesn't load the plugin's editor stylesheet) and printed once per request" — but this PR moved that CSS into the enqueued godam-elementor-preview.scss. The comment now describes the old inline-<style> approach the PR removed; worth updating so a future maintainer doesn't go looking for (or re-add) a printed <style> block.

---

Nothing here is a hard blocker except possibly #1, which is really a product call. #2 is the next most user-visible. The rest are cleanup.

_{🤖 Generated with Claude Code}