From 473176f26825058368ec8e97e831ccf79eead51d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <34163393+amtins@users.noreply.github.com>
Date: Wed, 27 Sep 2023 10:25:52 +0200
Subject: [PATCH] fix(control-bar): incorrect display when control bar display
 is locked (#8435)

The control bar is not displayed correctly when the display is locked because `.vjs-lock-showing` uses `display` `block` instead of `flex`.

- use `display` `flex` instead of `display` `block` when the control bar has `.vjs-lock-showing` class
- ensure that the control bar is not displayed if the `player` has classes:
  - `.vjs-controls-disabled`
  - `.vjs-using-native-controls`
  - `.vjs-error`
---
 src/css/components/_control-bar.scss | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/css/components/_control-bar.scss b/src/css/components/_control-bar.scss
index dde90b0122..ae72c54185 100644
--- a/src/css/components/_control-bar.scss
+++ b/src/css/components/_control-bar.scss
@@ -10,6 +10,14 @@
   @include background-color-with-alpha($primary-background-color, $primary-background-transparency);
 }
 
+// Locks the display only if:
+//  - controls are not disabled
+//  - native controls are not used
+//  - there is no error
+.video-js:not(.vjs-controls-disabled, .vjs-using-native-controls, .vjs-error) .vjs-control-bar.vjs-lock-showing {
+  display: flex !important;
+}
+
 // Video has started playing or we are in audioOnlyMode
 .vjs-has-started .vjs-control-bar,
 .vjs-audio-only-mode .vjs-control-bar {