Video editor: add progress stripe, front-end controls preview, fix missing skip buttons - #2070
Video editor: add progress stripe, front-end controls preview, fix missing skip buttons#2070KMchaudhary wants to merge 1 commit into
Conversation
…ssing skip buttons
🔍 WordPress Plugin Check Report
📊 Report
|
| 📍 Line | 🔖 Check | 💬 Message |
|---|---|---|
0 |
missing_composer_json_file | The "/vendor" directory using composer exists, but "composer.json" file is missing. |
📁 readme.txt (2 warnings)
| 📍 Line | 🔖 Check | 💬 Message |
|---|---|---|
0 |
mismatched_plugin_name | Plugin name "GoDAM - Organize WordPress Media Library & File Manager with Unlimited Folders for Images, Videos & more" is different from the name declared in plugin header "GoDAM". |
0 |
trademarked_term | The plugin name includes a restricted term. Your chosen plugin name - "GoDAM - Organize WordPress Media Library & File Manager with Unlimited Folders for Images, Videos & more" - contains the restricted term "wordpress" which cannot be used at all in your plugin name. |
📁 assets/build/blocks/godam-gallery-v2/render.php (2 warnings)
| 📍 Line | 🔖 Check | 💬 Message |
|---|---|---|
15 |
WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound | Global variables defined by a theme/plugin should start with the theme/plugin prefix. Found: "$inner_block_video_ids". |
23 |
WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound | Global variables defined by a theme/plugin should start with the theme/plugin prefix. Found: "$inner_block_video_ids". |
📁 assets/build/css/main.css (1 warning)
| 📍 Line | 🔖 Check | 💬 Message |
|---|---|---|
0 |
EnqueuedStylesScope | This style is being loaded in all contexts. |
📁 assets/src/libs/analytics.min.js (5 warnings)
| 📍 Line | 🔖 Check | 💬 Message |
|---|---|---|
0 |
EnqueuedScriptsScope | This script is being loaded in all frontend contexts. |
0 |
NonBlockingScripts.NoStrategy | This script on http://localhost:8880 (with handle analytics-library) is loaded in the footer. Consider a defer or async script loading strategy instead. |
0 |
NonBlockingScripts.NoStrategy | This script on http://localhost:8880/2026/08/10/hello-world/ (with handle analytics-library) is loaded in the footer. Consider a defer or async script loading strategy instead. |
0 |
NonBlockingScripts.NoStrategy | This script on http://localhost:8880/sample-page/ (with handle analytics-library) is loaded in the footer. Consider a defer or async script loading strategy instead. |
0 |
NonBlockingScripts.NoStrategy | This script on http://localhost:8880/demo-attachment-post/ (with handle analytics-library) is loaded in the footer. Consider a defer or async script loading strategy instead. |
📁 assets/build/js/main.min.js (5 warnings)
| 📍 Line | 🔖 Check | 💬 Message |
|---|---|---|
0 |
EnqueuedScriptsScope | This script is being loaded in all frontend contexts. |
0 |
NonBlockingScripts.NoStrategy | This script on http://localhost:8880 (with handle rtgodam-script) is loaded in the footer. Consider a defer or async script loading strategy instead. |
0 |
NonBlockingScripts.NoStrategy | This script on http://localhost:8880/2026/08/10/hello-world/ (with handle rtgodam-script) is loaded in the footer. Consider a defer or async script loading strategy instead. |
0 |
NonBlockingScripts.NoStrategy | This script on http://localhost:8880/sample-page/ (with handle rtgodam-script) is loaded in the footer. Consider a defer or async script loading strategy instead. |
0 |
NonBlockingScripts.NoStrategy | This script on http://localhost:8880/demo-attachment-post/ (with handle rtgodam-script) is loaded in the footer. Consider a defer or async script loading strategy instead. |
🤖 Generated by WordPress Plugin Check Action • Learn more about Plugin Check
There was a problem hiding this comment.
Pull request overview
Warning
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.
Improves the video editor’s stage preview so it more accurately reflects the front-end player (control bar composition, styling via CSS variables, and missing skip buttons), while introducing a minimal progress affordance when the control bar is hidden.
Changes:
- Added a reel-style progress stripe component and styles for stage playback feedback when controls are hidden.
- Reworked control bar preview/composition and synchronized it with saved settings (volume panel, skip buttons, branding, play button position, captions visibility).
- Added defaults/fallbacks for skip buttons (Redux initial state and PHP template) and consolidated control-bar visibility styling into a dedicated SCSS module.
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| pages/video-editor/video-editor.scss | Loads the new _player-controls.scss styles. |
| pages/video-editor/style.scss | Removes local control-bar visibility rule; defers to _player-controls.scss. |
| pages/video-editor/redux/slice/videoSlice.js | Adds default skipButtons values to match UI-default behavior. |
| pages/video-editor/components/player/PlayerProgressStripe.js | Introduces the progress stripe component driven by Video.js playback state. |
| pages/video-editor/components/appearance/Appearance.js | Removes direct DOM control-bar manipulation; relies on state + VideoJSPlayer sync. |
| pages/video-editor/_player-controls.scss | Centralizes stage control-bar visibility + progress stripe styling. |
| pages/video-editor/_editor-shell.scss | Removes legacy rule that always hid the control bar; points to _player-controls.scss. |
| pages/video-editor/VideoJSPlayer.js | Adds helpers to sync the control bar with saved settings; adds stripe + CSS variables for appearance. |
| pages/video-editor/VideoEditor.js | Seeds stage control bar preview from saved settings instead of a fixed list. |
| inc/templates/godam-player.php | Restores default skip buttons for legacy videos missing stored skip duration. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| // Vertical control bar (legacy option, not exposed in the Settings tab). | ||
| if ( 'vertical' === controlBarSettings.controlBarPosition ) { | ||
| controlBar.addClass( 'vjs-control-bar-vertical' ); | ||
| for ( const control of controlBar.el().querySelectorAll( '.vjs-control' ) ) { | ||
| control.classList.add( 'vjs-control-vertical' ); | ||
| if ( control.classList.contains( 'vjs-volume-panel' ) ) { | ||
| control.classList.add( 'vjs-volume-panel-vertical' ); | ||
| control.classList.remove( 'vjs-volume-panel-horizontal' ); | ||
| } | ||
|
|
||
| if ( control.classList.contains( 'vjs-volume-horizontal' ) ) { | ||
| control.classList.add( 'vjs-volume-vertical' ); | ||
| } | ||
| } | ||
| } |
| const read = () => { | ||
| if ( player.isDisposed() ) { | ||
| return; | ||
| } | ||
| const total = player.duration(); | ||
| setDuration( Number.isFinite( total ) && total > 0 ? total : 0 ); | ||
| setCurrentTime( player.currentTime() || 0 ); | ||
| setBufferedEnd( getBufferedEnd( player ) ); | ||
| }; | ||
|
|
||
| const tick = () => { | ||
| read(); | ||
| rafRef.current = requestAnimationFrame( tick ); | ||
| }; |
| &__range { | ||
| position: absolute; | ||
| top: -15px; | ||
| left: 0; | ||
| width: 100%; | ||
| height: 18px; | ||
| min-height: 0; | ||
| margin: 0; | ||
| padding: 0; | ||
| cursor: pointer; | ||
| background: transparent; | ||
| border: 0; | ||
| opacity: 0; | ||
| appearance: none; | ||
| } |
| if ( empty( $godam_control_bar_settings['skipButtons']['forward'] ) ) { | ||
| $godam_video_setup['controlBar']['skipButtons'] = array( | ||
| 'forward' => 10, | ||
| 'backward' => 10, | ||
| ); | ||
| } |
Code reviewReviewed the full diff against a checkout of the branch, plus the surrounding front-end player code so I could check the "preview matches the front end" claims directly. Overall: this is a solid, well-reasoned refactor and the core approach is right. Building the preview control bar from saved settings, driving appearance through the shared Two things I'd fix before merge, plus a few nits. Worth addressing before merge1. Custom brand logo renders unconstrained in the preview (parity bug). .vjs-control.vjs-custom-play-button #branding-icon { height: 100%; width: auto; object-fit: fill; }The preview image is not a descendant of 2. Keyboard focus on the progress-stripe slider is invisible (WCAG 2.4.7). .godam-ve-stripe:focus-within .godam-ve-stripe__handle { opacity: 1; }plus a visible outline on Nits and polish3. Captions button previews for videos with no text tracks. With 4. 5. New seek control has no 6. Progress slider announces raw seconds to screen readers. The range exposes 7. No unit tests for the new pure logic. Notes
|
Fixes: #2069
This pull request makes significant improvements to the video player editor, focusing on accurately previewing the front-end control bar, synchronizing player controls with saved settings, and cleaning up legacy or redundant code. The changes ensure that the editor's player preview matches the real front-end experience, especially regarding skip buttons, volume panel, branding, and appearance settings.
Player control bar synchronization and preview improvements:
previewControlBar) from saved settings, ensuring skip buttons and other controls appear as they will on the front end. This replaces the previous fixed control list and addresses cases where skip buttons were missing for older videos. [1] [2] [3]VideoJSPlayercomponent synchronizes control bar elements (volume panel, skip buttons, branding icon, play button position, and vertical layout) with the latest settings using dedicated helper functions. This ensures the preview always reflects the current configuration. [1] [2]Code cleanup and maintainability:
UI/UX consistency:
These changes collectively provide a more accurate, maintainable, and user-friendly video editing interface.
Demo
Screen.Recording.2026-08-10.at.9.04.42.AM.mov