Skip to content

Commit

Permalink
Merge pull request #675 from bitmovin/feature/revert-css-nesting
Browse files Browse the repository at this point in the history 
Remove top level `ui` css class
  • Loading branch information
@stonko1994
stonko1994 authored Jan 14, 2025
2 parents 56bf0fa + 2ef07f6 commit 6d9fa82
Show file tree
Hide file tree
Showing 6 changed files with 96 additions and 103 deletions.
2 changes: 1 addition & 1 deletion src/scss/_ads.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@import 'variables';

// sass-lint:disable nesting-depth
&.#{$prefix}-ui-ads {
.#{$prefix}-ui-ads {
@import 'components/ads/adskipbutton';
@import 'components/ads/adstatusoverlay';

Expand Down
2 changes: 1 addition & 1 deletion src/scss/_smallscreen.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@import 'variables';
@import 'mixins';

&.#{$prefix}-ui-smallscreen {
.#{$prefix}-ui-smallscreen {

// Do not display watermark in mobile view
.#{$prefix}-ui-watermark {
Expand Down
180 changes: 87 additions & 93 deletions src/scss/bitmovinplayer-ui.scss
View file
Original file line number Diff line number Diff line change
@@ -1,107 +1,101 @@
@import 'variables';
@import 'mixins';
@import 'components/buttons/subtitletogglebutton';
@import 'components/component';
@import 'components/container';
@import 'components/uicontainer';
@import 'components/controlbar';
@import 'components/buttons/button';
@import 'components/buttons/playbacktogglebutton';
@import 'components/buttons/quickseekbutton';
@import 'components/buttons/fullscreentogglebutton';
@import 'components/buttons/vrtogglebutton';
@import 'components/buttons/volumetogglebutton';
@import 'components/buttons/ecomodetogglebutton';
@import 'components/seekbar/seekbar';
@import 'components/watermark';
@import 'components/buttons/hugeplaybacktogglebutton';
@import 'components/labels/label';
@import 'components/settings/settingspanel';
@import 'components/settings/settingspanelpage';
@import 'components/settings/settingspanelitem';
@import 'components/settings/settingspanelpageopenbutton';
@import 'components/settings/settingspanelpagebackbutton';
@import 'components/settings/settingstogglebutton';
@import 'components/settings/selectbox';
@import 'components/lists/listbox';
@import 'components/labels/seekbarlabel';
@import 'components/seekbar/volumeslider';
@import 'components/overlays/subtitleoverlay';
@import 'components/overlays/subtitleoverlay-cea608';
@import 'components/buttons/volumecontrolbutton';
@import 'components/buttons/casttogglebutton';
@import 'components/overlays/caststatusoverlay';
@import 'components/overlays/errormessageoverlay';
@import 'components/titlebar';
@import 'components/overlays/recommendationoverlay';
@import 'components/overlays/clickoverlay';
@import 'components/buttons/hugereplaybutton';
@import 'components/buttons/replaybutton';
@import 'components/labels/playbacktimelabel';
@import 'components/overlays/bufferingoverlay';
@import 'components/overlays/playbacktoggleoverlay';
@import 'components/buttons/closebutton';
@import 'components/buttons/airplaytogglebutton';
@import 'components/buttons/pictureinpicturetogglebutton';
@import 'components/spacer';
@import 'components/settings/subtitlesettings/subtitlesettings';
@import 'components/buttons/subtitlesettingspaneltogglebutton';
@import 'components/overlays/touchcontroloverlay';
@import 'components/buttons/smallcenteredplaybacktogglebutton';
@import 'ads';
@import 'cast-receiver';
@import 'smallscreen';
@import 'tv';

.#{$prefix}-ui {
@import 'mixins';
@import 'components/buttons/subtitletogglebutton';
@import 'components/component';
@import 'components/container';
@import 'components/uicontainer';
@import 'components/controlbar';
@import 'components/buttons/button';
@import 'components/buttons/playbacktogglebutton';
@import 'components/buttons/quickseekbutton';
@import 'components/buttons/fullscreentogglebutton';
@import 'components/buttons/vrtogglebutton';
@import 'components/buttons/volumetogglebutton';
@import 'components/buttons/ecomodetogglebutton';
@import 'components/seekbar/seekbar';
@import 'components/watermark';
@import 'components/buttons/hugeplaybacktogglebutton';
@import 'components/labels/label';
@import 'components/settings/settingspanel';
@import 'components/settings/settingspanelpage';
@import 'components/settings/settingspanelitem';
@import 'components/settings/settingspanelpageopenbutton';
@import 'components/settings/settingspanelpagebackbutton';
@import 'components/settings/settingstogglebutton';
@import 'components/settings/selectbox';
@import 'components/lists/listbox';
@import 'components/labels/seekbarlabel';
@import 'components/seekbar/volumeslider';
@import 'components/overlays/subtitleoverlay';
@import 'components/overlays/subtitleoverlay-cea608';
@import 'components/buttons/volumecontrolbutton';
@import 'components/buttons/casttogglebutton';
@import 'components/overlays/caststatusoverlay';
@import 'components/overlays/errormessageoverlay';
@import 'components/titlebar';
@import 'components/overlays/recommendationoverlay';
@import 'components/overlays/clickoverlay';
@import 'components/buttons/hugereplaybutton';
@import 'components/buttons/replaybutton';
@import 'components/labels/playbacktimelabel';
@import 'components/overlays/bufferingoverlay';
@import 'components/overlays/playbacktoggleoverlay';
@import 'components/buttons/closebutton';
@import 'components/buttons/airplaytogglebutton';
@import 'components/buttons/pictureinpicturetogglebutton';
@import 'components/spacer';
@import 'components/settings/subtitlesettings/subtitlesettings';
@import 'components/buttons/subtitlesettingspaneltogglebutton';
@import 'components/overlays/touchcontroloverlay';
@import 'components/buttons/smallcenteredplaybacktogglebutton';
@import 'ads';
@import 'cast-receiver';
@import 'smallscreen';
@import 'tv';
// sass-lint:disable nesting-depth
.#{$prefix}-ui-uicontainer {
color: $color-primary;
font-family: $font-family;
font-size: $font-size;
text-align: left;
user-select: none;

// sass-lint:disable nesting-depth
&.#{$prefix}-ui-uicontainer {
color: $color-primary;
font-family: $font-family;
font-size: $font-size;
text-align: left;
user-select: none;

&.#{$prefix}-player-state-idle {

.#{$prefix}-ui-controlbar,
.#{$prefix}-ui-titlebar,
.#{$prefix}-ui-hugeplaybacktogglebutton {
display: none;
}
}

&.#{$prefix}-player-state-finished {

.#{$prefix}-ui-controlbar,
.#{$prefix}-ui-hugeplaybacktogglebutton {
display: none;
}
&.#{$prefix}-player-state-idle {
.#{$prefix}-ui-controlbar,
.#{$prefix}-ui-titlebar,
.#{$prefix}-ui-hugeplaybacktogglebutton {
display: none;
}
}

.#{$prefix}-text-right {
text-align: right;
&.#{$prefix}-player-state-finished {
.#{$prefix}-ui-controlbar,
.#{$prefix}-ui-hugeplaybacktogglebutton {
display: none;
}
}

// sass-lint:disable force-element-nesting
&.#{$prefix}-layout-max-width-400 {
.#{$prefix}-text-right {
text-align: right;
}

// Hide the description in ultra tiny players to not clog the UI too much
.#{$prefix}-ui-titlebar .#{$prefix}-label-metadata-description {
display: none;
}
// sass-lint:disable force-element-nesting
&.#{$prefix}-layout-max-width-400 {
// Hide the description in ultra tiny players to not clog the UI too much
.#{$prefix}-ui-titlebar .#{$prefix}-label-metadata-description {
display: none;
}
}

&.#{$prefix}-layout-max-width-400,
&.#{$prefix}-layout-max-width-600 {
.#{$prefix}-ui-hugeplaybacktogglebutton {
font-size: .7em;
}
&.#{$prefix}-layout-max-width-400,
&.#{$prefix}-layout-max-width-600 {
.#{$prefix}-ui-hugeplaybacktogglebutton {
font-size: .7em;
}

.#{$prefix}-ui-watermark {
font-size: .7em;
}
.#{$prefix}-ui-watermark {
font-size: .7em;
}
}
}
2 changes: 1 addition & 1 deletion src/scss/components/_uicontainer.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@import '../variables';
@import '../mixins';

&.#{$prefix}-ui-uicontainer {
.#{$prefix}-ui-uicontainer {
@extend %ui-container;

@include layout-cover;
Expand Down
2 changes: 1 addition & 1 deletion src/scss/components/overlays/_subtitleoverlay.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@import '../../variables';
@import '../../mixins';

&.#{$prefix}-ui-uicontainer {
.#{$prefix}-ui-uicontainer {
.#{$prefix}-ui-subtitle-overlay {
@extend %ui-container;

Expand Down
11 changes: 5 additions & 6 deletions src/ts/UIFactory.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -310,7 +310,6 @@ function uiLayout(config: UIConfig) {
PlayerUtils.PlayerState.Paused,
PlayerUtils.PlayerState.Finished,
],
cssClasses: ['ui'],
});
}

Expand Down Expand Up @@ -355,7 +354,7 @@ function adsUILayout() {
PlayerUtils.PlayerState.Paused,
PlayerUtils.PlayerState.Finished,
],
cssClasses: ['ui', 'ui-ads'],
cssClasses: ['ui-ads'],
});
}

Expand Down Expand Up @@ -471,7 +470,7 @@ function smallScreenUILayout() {
settingsPanel,
new ErrorMessageOverlay(),
],
cssClasses: ['ui-smallscreen', 'ui'],
cssClasses: ['ui-smallscreen'],
hideDelay: 2000,
hidePlayerStateExceptions: [
PlayerUtils.PlayerState.Prepared,
Expand Down Expand Up @@ -522,7 +521,7 @@ function smallScreenAdsUILayout() {
PlayerUtils.PlayerState.Paused,
PlayerUtils.PlayerState.Finished,
],
cssClasses: ['ui', 'ui-smallscreen', 'ui-ads'],
cssClasses: ['ui-smallscreen', 'ui-ads'],
});
}

Expand Down Expand Up @@ -556,7 +555,7 @@ function castReceiverUILayout() {
new TitleBar({ keepHiddenWithoutMetadata: true }),
new ErrorMessageOverlay(),
],
cssClasses: ['ui', 'ui-cast-receiver'],
cssClasses: ['ui-cast-receiver'],
hideDelay: 2000,
hidePlayerStateExceptions: [
PlayerUtils.PlayerState.Prepared,
Expand Down Expand Up @@ -648,7 +647,7 @@ function tvUILayout() {
new RecommendationOverlay(),
new ErrorMessageOverlay(),
],
cssClasses: ['ui', 'ui-tv'],
cssClasses: ['ui-tv'],
hideDelay: 2000,
hidePlayerStateExceptions: [
PlayerUtils.PlayerState.Prepared,
Expand Down

0 comments on commit 6d9fa82

Please sign in to comment.