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

@@ -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 {