Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 17 additions & 2 deletions assets/src/css/godam-player.scss
Original file line number Diff line number Diff line change
Expand Up @@ -1900,7 +1900,6 @@ body.godam-share-modal-open {
display: none !important;
}


.video-js {

.vjs-big-play-button {
Expand All @@ -1926,9 +1925,25 @@ body.godam-share-modal-open {
}
}
}

// Re-show the big play button once the video has ended.
// Necessary because `.vjs-has-started .vjs-big-play-button { display: none }`
// (from video.js core CSS) has equal specificity; adding vjs-ended with
// !important ensures the button reappears as a replay prompt after playback.
.godam-no-controls-bar.vjs-ended .vjs-big-play-button {
display: block !important;
}
}

// When the "Playback controls" block toggle is OFF, hide the control bar
// (seek bar, volume, settings, etc.) while keeping the big play button
// functional. The !important ensures Video.js's user-activity state changes
// (vjs-user-active / vjs-user-inactive) cannot override this rule.
.godam-no-controls-bar .vjs-control-bar {
display: none !important;
}

.godam-show-controls-on-hover {
.godam-show-controls-on-hover:not(.godam-no-controls-bar) {

&:hover {

Expand Down
9 changes: 9 additions & 0 deletions assets/src/js/godam-player/managers/configurationManager.js
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,15 @@ export default class ConfigurationManager {
this.videoSetupOptions = parseDataAttribute( this.video, 'options', {} );
const videoSetupControls = parseDataAttribute( this.video, 'controls', this.getDefaultControls() );

// Track whether the block's "Playback controls" toggle is enabled.
// When false, we still pass controls:true to Video.js so the big play
// button remains functional; the control bar is hidden separately in
// ControlsManager.setupControlBarConfiguration().
this.playbackControlsEnabled = videoSetupControls.controls !== false;
if ( ! this.playbackControlsEnabled ) {
videoSetupControls.controls = true;
}

// Disable default autoplay if autoplay-on-view is enabled
// This allows intersection observer to handle autoplay when video enters viewport
if ( this.video.dataset.autoplayOnView === 'true' ) {
Expand Down
16 changes: 16 additions & 0 deletions assets/src/js/godam-player/managers/controlsManager.js
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,22 @@ export default class ControlsManager {
setupControlBarConfiguration() {
const controlBarSettings = this.config.videoSetupControls?.controlBar;

// When the "Playback controls" block toggle is OFF, hide the entire
// control bar (seek bar, volume, settings, etc.) while keeping the big
// play button visible and functional.
if ( this.config.playbackControlsEnabled === false ) {
Comment thread
subodhr258 marked this conversation as resolved.
// Still apply big-play-button configuration (position + custom image)
// so that "no control bar" mode honours existing block settings.
this.setupPlayButtonPosition( controlBarSettings );
this.setupCustomPlayButton( controlBarSettings );
this.player.el().classList.add( 'godam-no-controls-bar' );
return;
}

Comment thread
subodhr258 marked this conversation as resolved.
// Ensure the control bar is visible again when playback controls
// are enabled or not explicitly disabled.
this.player.el().classList.remove( 'godam-no-controls-bar' );

this.setupPlayButtonPosition( controlBarSettings );
this.setupControlBarComponents( controlBarSettings );
this.setupCustomPlayButton( controlBarSettings );
Expand Down
Loading