Skip to content

fix: Hide control bar when playback controls are disabled, only display play button#1732

Open
subodhr258 wants to merge 2 commits intodevelopfrom
fix/playback-controls
Open

fix: Hide control bar when playback controls are disabled, only display play button#1732
subodhr258 wants to merge 2 commits intodevelopfrom
fix/playback-controls

Conversation

@subodhr258
Copy link
Copy Markdown
Collaborator

Issue - #1570

This pull request improves the behavior and configuration of playback controls in the Godam video player, especially when the "Playback controls" toggle is disabled in the block settings. The main focus is to ensure that the big play button remains visible and functional for replay, even when the control bar (seek bar, volume, etc.) is hidden.

Playback Controls Toggle Handling:

  • Added logic in ConfigurationManager to track whether the "Playback controls" block toggle is enabled, ensuring that when disabled, only the control bar is hidden but the big play button remains functional (assets/src/js/godam-player/managers/configurationManager.js).
  • Updated ControlsManager to add a godam-no-controls-bar class to the player element when playback controls are disabled, which hides the control bar while preserving the big play button (assets/src/js/godam-player/managers/controlsManager.js).

CSS Updates for Control Bar and Play Button:

  • Added CSS rules to hide the control bar when .godam-no-controls-bar is present, and to re-show the big play button as a replay prompt after playback ends, even when controls are hidden (assets/src/css/godam-player.scss).
  • Minor whitespace cleanup in the CSS file for better readability (assets/src/css/godam-player.scss).

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

This PR adjusts GoDAM player behavior when the block’s “Playback controls” toggle is disabled so that the control bar is hidden while the big play button remains usable (including as a replay affordance after playback ends).

Changes:

  • Track the “Playback controls” toggle state in ConfigurationManager while still passing controls: true to Video.js to preserve big play button behavior.
  • Add a godam-no-controls-bar class in ControlsManager when playback controls are disabled.
  • Add CSS to hide the control bar under godam-no-controls-bar and re-show the big play button on vjs-ended.

Reviewed changes

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

File Description
assets/src/js/godam-player/managers/controlsManager.js Adds conditional classing to hide the control bar when playback controls are disabled.
assets/src/js/godam-player/managers/configurationManager.js Persists the block toggle state while forcing controls:true for Video.js.
assets/src/css/godam-player.scss Hides .vjs-control-bar when controls are disabled and re-displays the big play button on end.

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

Comment thread assets/src/css/godam-player.scss Outdated
Comment thread assets/src/js/godam-player/managers/controlsManager.js
Comment thread assets/src/js/godam-player/managers/controlsManager.js
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Mar 16, 2026

🔍 WordPress Plugin Check Report

⚠️ Status: Passed with warnings

📊 Report

🎯 Total Issues ❌ Errors ⚠️ Warnings
16 0 16

⚠️ Warnings (16)

📁 composer.json (1 warning)
📍 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/css/main.css (1 warning)
📍 Line 🔖 Check 💬 Message
0 EnqueuedStylesScope This style is being loaded in all contexts.
📁 assets/src/libs/analytics.min.js (6 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/03/16/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.
0 NonBlockingScripts.NoStrategy This script on http://localhost:8880/?godam-video=demo-godam-video-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 (6 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/03/16/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.
0 NonBlockingScripts.NoStrategy This script on http://localhost:8880/?godam-video=demo-godam-video-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

@KMchaudhary
Copy link
Copy Markdown
Collaborator

@subodhr258 @hashibhere
On the pause video pause event, the pause button is not visible. Is it expected behaviour?

Screen.Recording.2026-03-17.at.11.23.17.AM.mov

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants