From 70b519aaeada361a1de9fa2b6b041edb3dccd902 Mon Sep 17 00:00:00 2001 From: David Steinacher Date: Tue, 10 Dec 2024 09:24:09 -0700 Subject: [PATCH 1/7] fallback to the default UI if local storage contains invalid UI --- src/html/index.html | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/html/index.html b/src/html/index.html index a93690b21..0e5c9334e 100644 --- a/src/html/index.html +++ b/src/html/index.html @@ -283,7 +283,12 @@

const playgroundConfig = getConfigFromStorage(); // Add UI - uiManager = bitmovin.playerui.UIFactory[playgroundConfig.uiOption || 'buildDefaultUI'](player, uiConfig); + if (playgroundConfig.uiOption != null && bitmovin.playerui.UIFactory[playgroundConfig.uiOption] != null) { + uiManager = bitmovin.playerui.UIFactory[playgroundConfig.uiOption](player, uiConfig); + } else { + localStorage.clear(); + uiManager = bitmovin.playerui.UIFactory.buildDefaultUI(player, uiConfig); + } player.load(sources[playgroundConfig.source || 'fullyFeatured']).then(function() { console.log('source successfully loaded'); From b7df070a1748f3e57e3ba4d76f3275880fa9e065 Mon Sep 17 00:00:00 2001 From: David Steinacher Date: Tue, 10 Dec 2024 13:30:54 -0700 Subject: [PATCH 2/7] fix wrong mouse listener element in seekbar --- .../components/_seekbar.scss | 8 +++-- src/ts/components/seekbar.ts | 29 ++++++------------- src/ts/uifactory.ts | 6 ++-- 3 files changed, 18 insertions(+), 25 deletions(-) diff --git a/src/scss/skin-super-modern/components/_seekbar.scss b/src/scss/skin-super-modern/components/_seekbar.scss index e2d7fe1b3..bfc749b52 100644 --- a/src/scss/skin-super-modern/components/_seekbar.scss +++ b/src/scss/skin-super-modern/components/_seekbar.scss @@ -46,15 +46,19 @@ $seekbar-height: .3125em; @include hidden; @include focusable; - border-radius: 1em; cursor: pointer; font-size: 1em; height: $seekbar-height; margin: calc((1em - $seekbar-height) / 2) 0; - overflow: hidden; position: relative; width: 100%; + .#{$prefix}-seekbar-bars { + @extend %bar; + border-radius: 1em; + overflow: hidden; + } + .#{$prefix}-seekbar-backdrop { @extend %bar; background-color: transparentize($color-primary, .8); diff --git a/src/ts/components/seekbar.ts b/src/ts/components/seekbar.ts index e16e0d0a9..80a96b0d3 100644 --- a/src/ts/components/seekbar.ts +++ b/src/ts/components/seekbar.ts @@ -31,12 +31,6 @@ export interface SeekBarConfig extends ComponentConfig { * Bar will be vertical instead of horizontal if set to true. */ vertical?: boolean; - /** - * If set to true the seekBarPlaybackPositionMarker will be rendered - * directly inside the seekbar container. Necessary when using the super-modern-ui skin - * Default: false - */ - renderSeekBarPlaybackPositionMarkerInOuterSeekBar?: boolean; /** * The interval in milliseconds in which the playback position on the seek bar will be updated. The shorter the * interval, the smoother it looks and the more resource intense it is. The update interval will be kept as steady @@ -171,7 +165,6 @@ export class SeekBar extends Component { snappingRange: 1, enableSeekPreview: true, snappingEnabled: true, - renderSeekBarPlaybackPositionMarkerInOuterSeekBar: false, }, this.config); this.label = this.config.label; @@ -668,6 +661,10 @@ export class SeekBar extends Component { }); this.seekBar = seekBar; + const seekBarBarsContainer = new DOM('div', { + 'class': this.prefixCss('seekbar-bars'), + }); + // Indicator that shows the buffer fill level let seekBarBufferLevel = new DOM('div', { 'class': this.prefixCss('seekbar-bufferlevel'), @@ -703,12 +700,10 @@ export class SeekBar extends Component { }); this.seekBarMarkersContainer = seekBarChapterMarkersContainer; - seekBar.append(this.seekBarBackdrop, this.seekBarBufferPosition, this.seekBarSeekPosition, + seekBarBarsContainer.append(this.seekBarBackdrop, this.seekBarBufferPosition, this.seekBarSeekPosition, this.seekBarPlaybackPosition, this.seekBarMarkersContainer); - if (!this.config.renderSeekBarPlaybackPositionMarkerInOuterSeekBar) { - seekBar.append(this.seekBarPlaybackPositionMarker); - } + seekBar.append(seekBarBarsContainer, this.seekBarPlaybackPositionMarker); let seeking = false; @@ -747,14 +742,12 @@ export class SeekBar extends Component { this.onSeekedEvent(targetPercentage); }; - let domElementToListen: DOM = this.config.renderSeekBarPlaybackPositionMarkerInOuterSeekBar ? seekBarContainer : seekBar; - // A seek always start with a touchstart or mousedown directly on the seekbar. // To track a mouse seek also outside the seekbar (for touch events this works automatically), // so the user does not need to take care that the mouse always stays on the seekbar, we attach the mousemove // and mouseup handlers to the whole document. A seek is triggered when the user lifts the mouse key. // A seek mouse gesture is thus basically a click with a long time frame between down and up events. - domElementToListen.on('touchstart mousedown', (e: MouseEvent | TouchEvent) => { + seekBar.on('touchstart mousedown', (e: MouseEvent | TouchEvent) => { let isTouchEvent = BrowserUtils.isTouchSupported && this.isTouchEvent(e); // Prevent selection of DOM elements (also prevents mousedown if current event is touchstart) @@ -776,7 +769,7 @@ export class SeekBar extends Component { }); // Display seek target indicator when mouse hovers or finger slides over seekbar - domElementToListen.on('touchmove mousemove', (e: MouseEvent | TouchEvent) => { + seekBar.on('touchmove mousemove', (e: MouseEvent | TouchEvent) => { e.preventDefault(); if (seeking) { @@ -794,7 +787,7 @@ export class SeekBar extends Component { }); // Hide seek target indicator when mouse or finger leaves seekbar - domElementToListen.on('touchend mouseleave', (e: MouseEvent | TouchEvent) => { + seekBar.on('touchend mouseleave', (e: MouseEvent | TouchEvent) => { e.preventDefault(); this.setSeekPosition(0); @@ -810,10 +803,6 @@ export class SeekBar extends Component { seekBarContainer.append(this.label.getDomElement()); } - if (this.config.renderSeekBarPlaybackPositionMarkerInOuterSeekBar) { - seekBarContainer.append(seekBarPlaybackPositionMarker); - } - return seekBarContainer; } diff --git a/src/ts/uifactory.ts b/src/ts/uifactory.ts index f05b75ef1..f2d3f638d 100644 --- a/src/ts/uifactory.ts +++ b/src/ts/uifactory.ts @@ -492,7 +492,7 @@ export namespace UIFactory { timeLabelMode: PlaybackTimeLabelMode.CurrentTime, hideInLivePlayback: true, }), - new SeekBar({ label: new SeekBarLabel(), renderSeekBarPlaybackPositionMarkerInOuterSeekBar: true }), + new SeekBar({ label: new SeekBarLabel() }), new PlaybackTimeLabel({ timeLabelMode: PlaybackTimeLabelMode.TotalTime, cssClasses: ['text-right'], @@ -598,7 +598,7 @@ export namespace UIFactory { timeLabelMode: PlaybackTimeLabelMode.CurrentTime, hideInLivePlayback: true, }), - new SeekBar({ label: new SeekBarLabel(), renderSeekBarPlaybackPositionMarkerInOuterSeekBar: true }), + new SeekBar({ label: new SeekBarLabel() }), new PlaybackTimeLabel({ timeLabelMode: PlaybackTimeLabelMode.TotalTime, cssClasses: ['text-right'], @@ -610,7 +610,7 @@ export namespace UIFactory { components: [ new PlaybackToggleButton(), new VolumeToggleButton(), - new VolumeSlider({ renderSeekBarPlaybackPositionMarkerInOuterSeekBar: true }), + new VolumeSlider(), new Spacer(), new PictureInPictureToggleButton(), new AirPlayToggleButton(), From 5dbc958c44e74323b11b5f3c3cbda56acefadc77 Mon Sep 17 00:00:00 2001 From: David Steinacher Date: Tue, 10 Dec 2024 13:31:11 -0700 Subject: [PATCH 3/7] revert seekbar changes to current develop state --- src/ts/components/seekbar.ts | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/ts/components/seekbar.ts b/src/ts/components/seekbar.ts index 80a96b0d3..6fcfab9de 100644 --- a/src/ts/components/seekbar.ts +++ b/src/ts/components/seekbar.ts @@ -242,10 +242,17 @@ export class SeekBar extends Component { uimanager.onControlsShow.subscribe(() => { this.isUiShown = true; + if (!player.isLive() && !this.smoothPlaybackPositionUpdater.isActive()) { + playbackPositionHandler(null, true); + this.smoothPlaybackPositionUpdater.start(); + } }); uimanager.onControlsHide.subscribe(() => { this.isUiShown = false; + if (this.smoothPlaybackPositionUpdater.isActive()) { + this.smoothPlaybackPositionUpdater.clear(); + } }); let isPlaying = false; @@ -323,12 +330,12 @@ export class SeekBar extends Component { scrubbing = false; }; - let onPlayerSeeked = (event: PlayerEventBase = null, forceUpdate: boolean = false ) => { + let onPlayerSeeked = (event: PlayerEventBase = null) => { isPlayerSeeking = false; this.setSeeking(false); // update playback position when a seek has finished - playbackPositionHandler(event, forceUpdate); + playbackPositionHandler(event, true); }; let restorePlayingState = function () { From 0f1d5ec9e1881169b24e6e5d281824a069a18f1e Mon Sep 17 00:00:00 2001 From: David Steinacher Date: Tue, 10 Dec 2024 13:31:19 -0700 Subject: [PATCH 4/7] minor code style improvements --- src/ts/components/seekbar.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ts/components/seekbar.ts b/src/ts/components/seekbar.ts index 6fcfab9de..22e086ee2 100644 --- a/src/ts/components/seekbar.ts +++ b/src/ts/components/seekbar.ts @@ -294,7 +294,7 @@ export class SeekBar extends Component { // Update playback position only in paused state or in the initial startup state where player is neither // paused nor playing. Playback updates are handled in the Timeout below. const isInInitialStartupState = this.config.smoothPlaybackPositionUpdateIntervalMs === SeekBar.SMOOTH_PLAYBACK_POSITION_UPDATE_DISABLED - || forceUpdate || player.isPaused(); + || forceUpdate || player.isPaused(); const isNeitherPausedNorPlaying = player.isPaused() === player.isPlaying(); if ((isInInitialStartupState || isNeitherPausedNorPlaying) && !this.isSeeking()) { @@ -1103,7 +1103,7 @@ export class SeekBar extends Component { this.refreshPlaybackPosition(); } - /** + /** * Checks if TouchEvent is supported. * @returns {boolean} true if TouchEvent not undefined, else false */ From 563add215ea2b664cbf97892d181fad7600a83d3 Mon Sep 17 00:00:00 2001 From: David Steinacher Date: Tue, 10 Dec 2024 20:42:31 -0700 Subject: [PATCH 5/7] apply common naming scheme to touchcontroloverlay --- src/scss/skin-super-modern/_skin.scss | 2 +- ...overlay.scss => _touchcontroloverlay.scss} | 21 +++++-------------- src/ts/components/touchcontroloverlay.ts | 4 ++-- 3 files changed, 8 insertions(+), 19 deletions(-) rename src/scss/skin-super-modern/components/{_touch-control-overlay.scss => _touchcontroloverlay.scss} (73%) diff --git a/src/scss/skin-super-modern/_skin.scss b/src/scss/skin-super-modern/_skin.scss index f00982c68..84320f233 100644 --- a/src/scss/skin-super-modern/_skin.scss +++ b/src/scss/skin-super-modern/_skin.scss @@ -47,7 +47,7 @@ @import 'components/spacer'; @import 'components/subtitlesettings/subtitlesettings'; @import 'components/subtitlesettingspaneltogglebutton'; - @import 'components/touch-control-overlay'; + @import 'components/touchcontroloverlay'; @import 'components/smallcenteredplaybacktogglebutton'; @import 'components/loadingicon'; @import 'skin-ads'; diff --git a/src/scss/skin-super-modern/components/_touch-control-overlay.scss b/src/scss/skin-super-modern/components/_touchcontroloverlay.scss similarity index 73% rename from src/scss/skin-super-modern/components/_touch-control-overlay.scss rename to src/scss/skin-super-modern/components/_touchcontroloverlay.scss index 7e30a6d39..8b6a6a2c8 100644 --- a/src/scss/skin-super-modern/components/_touch-control-overlay.scss +++ b/src/scss/skin-super-modern/components/_touchcontroloverlay.scss @@ -1,12 +1,7 @@ @import '../variables'; @import '../mixins'; -// sass-lint:disable no-vendor-prefixes %opacity-transition { - -moz-transition: opacity .25s ease; - -ms-transition: opacity .25s ease; - -o-transition: opacity .25s ease; - -webkit-transition: opacity .25s ease; transition: opacity .25s ease-out; } @@ -23,15 +18,15 @@ %seek-label { @extend %opacity-transition; - font-size: .4em; - font-weight: 600; + @include hidden-animated; + font-weight: 500; margin: 0; opacity: 1; position: absolute; text-shadow: $color-shadow-seek-label; } -.#{$prefix}-ui-touchcontrol-overlay { +.#{$prefix}-ui-touch-control-overlay { @extend %ui-container; @include layout-cover; @@ -47,20 +42,14 @@ .#{$prefix}-seek-forward-label { @extend %seek-label; - right: 15%; - &.#{$prefix}-hidden { - opacity: 0; - } + right: 10%; } .#{$prefix}-seek-backward-label { @extend %seek-label; - left: 15%; - &.#{$prefix}-hidden { - opacity: 0; - } + left: 10%; } } diff --git a/src/ts/components/touchcontroloverlay.ts b/src/ts/components/touchcontroloverlay.ts index efa09b0bb..6e3c970fc 100644 --- a/src/ts/components/touchcontroloverlay.ts +++ b/src/ts/components/touchcontroloverlay.ts @@ -83,11 +83,11 @@ export class TouchControlOverlay extends Container { this.seekBackwardLabel = new Label({text: '', for: this.getConfig().id, cssClass: 'seek-backward-label', hidden: true}); this.config = this.mergeConfig(config, { - cssClass: 'ui-touchcontrol-overlay', + cssClass: 'ui-touch-control-overlay', acceptsTouchWithUiHidden: true, seekTime: 10, seekDoubleTapMargin: 15, - components: [this.playbackToggleButton, this.seekForwardLabel, this.seekBackwardLabel], + components: [this.seekBackwardLabel, this.playbackToggleButton, this.seekForwardLabel], }, this.config); } From 59a7bf5ec18e6c9b2615dbb7240dd53fe8dcaac1 Mon Sep 17 00:00:00 2001 From: David Steinacher Date: Fri, 20 Dec 2024 08:48:34 +0100 Subject: [PATCH 6/7] rename setting to settingComponent --- src/ts/components/dynamicsettingspanelitem.ts | 24 +++++----- src/ts/components/ecomodecontainer.ts | 4 +- src/ts/components/settingspanel.ts | 2 +- src/ts/components/settingspanelitem.ts | 26 +++++------ .../components/settingspanelselectoption.ts | 10 ++--- .../subtitlesettingspanelpage.ts | 6 +-- src/ts/demofactory.ts | 10 ++--- src/ts/uifactory.ts | 44 +++++++++---------- 8 files changed, 63 insertions(+), 63 deletions(-) diff --git a/src/ts/components/dynamicsettingspanelitem.ts b/src/ts/components/dynamicsettingspanelitem.ts index 54c85614f..72ae6a01b 100644 --- a/src/ts/components/dynamicsettingspanelitem.ts +++ b/src/ts/components/dynamicsettingspanelitem.ts @@ -25,7 +25,7 @@ export interface DynamicSettingsPanelItemConfig extends SettingsPanelItemConfig /** * The list selector component which will be used to build the sub page. */ - setting: ListSelector; + settingComponent: ListSelector; /** * The enclosing {@link SettingsPanel} where the sub page will be added. */ @@ -40,7 +40,7 @@ export interface DynamicSettingsPanelItemConfig extends SettingsPanelItemConfig */ export class DynamicSettingsPanelItem extends SettingsPanelItem { private selectedOptionLabel: Label; - protected setting: ListSelector; + protected settingComponent: ListSelector; private player: PlayerAPI; private uimanager: UIInstanceManager; @@ -48,7 +48,7 @@ export class DynamicSettingsPanelItem extends SettingsPanelItem { - let selectedItem = this.setting.getItemForKey(this.setting.getSelectedItem()); + let selectedItem = this.settingComponent.getItemForKey(this.settingComponent.getSelectedItem()); if (selectedItem == null) { this.selectedOptionLabel.hide(); return; @@ -89,13 +89,13 @@ export class DynamicSettingsPanelItem extends SettingsPanelItem { return new SettingsPanelSelectOption({ label: option.label, - setting: this.setting, + settingComponent: this.settingComponent, settingsValue: option.key, addSettingAsComponent: false, }); @@ -141,7 +141,7 @@ export class DynamicSettingsPanelItem extends SettingsPanelItem setting.overlay.enablePreviewSubtitleLabel()); diff --git a/src/ts/components/ecomodecontainer.ts b/src/ts/components/ecomodecontainer.ts index dac5dc589..77bb7b4e5 100644 --- a/src/ts/components/ecomodecontainer.ts +++ b/src/ts/components/ecomodecontainer.ts @@ -29,10 +29,10 @@ export class EcoModeContainer extends Container { cssClass: 'ui-label-savedEnergy', }); - this.ecoModeToggleButtonItem = new SettingsPanelItem({ label: labelEcoMode, setting: ecoModeToggleButton }); + this.ecoModeToggleButtonItem = new SettingsPanelItem({ label: labelEcoMode, settingComponent: ecoModeToggleButton }); this.ecoModeSavedEmissionsItem = new SettingsPanelItem({ label: 'Saved Emissions', - setting: this.emissionsSavedLabel, + settingComponent: this.emissionsSavedLabel, hidden: true, }); diff --git a/src/ts/components/settingspanel.ts b/src/ts/components/settingspanel.ts index 9bb25779c..dade69b86 100644 --- a/src/ts/components/settingspanel.ts +++ b/src/ts/components/settingspanel.ts @@ -399,7 +399,7 @@ export class SettingsPanel extends Container { */ private hideHoveredSelectBoxes(): void { this.getComputedItems() - .map(item => item['setting']) + .map(item => item['settingComponent']) .filter(component => component instanceof SelectBox) .forEach((selectBox: SelectBox) => selectBox.closeDropdown()); } diff --git a/src/ts/components/settingspanelitem.ts b/src/ts/components/settingspanelitem.ts index e3fd4c020..50a8fddea 100644 --- a/src/ts/components/settingspanelitem.ts +++ b/src/ts/components/settingspanelitem.ts @@ -24,7 +24,7 @@ export interface SettingsPanelItemConfig extends ContainerConfig { /** * The component that configures a setting. */ - setting?: Component; + settingComponent?: Component; /** * If the setting should be added as a component to this item. */ @@ -41,7 +41,7 @@ export interface SettingsPanelItemConfig extends ContainerConfig { export class SettingsPanelItem extends Container { private label: Component; - protected setting: Component | null; + protected settingComponent: Component | null; private settingsPanelItemEvents = { onActiveChanged: new EventDispatcher, NoArgs>(), @@ -51,7 +51,7 @@ export class SettingsPanelItem extends C constructor(config: Config) { super(config); - this.setting = config.setting; + this.settingComponent = config.settingComponent; this.config = this.mergeConfig(config, { cssClass: 'ui-settings-panel-item', @@ -74,14 +74,14 @@ export class SettingsPanelItem extends C configure(player: PlayerAPI, uimanager: UIInstanceManager): void { super.configure(player, uimanager); - if (this.setting != null && this.config.addSettingAsComponent) { - this.addComponent(this.setting); + if (this.settingComponent != null && this.config.addSettingAsComponent) { + this.addComponent(this.settingComponent); this.updateComponents(); } - if (this.setting instanceof SelectBox || this.setting instanceof ListBox) { + if (this.settingComponent instanceof SelectBox || this.settingComponent instanceof ListBox) { let handleConfigItemChanged = () => { - if (!(this.setting instanceof SelectBox) && !(this.setting instanceof ListBox)) { + if (!(this.settingComponent instanceof SelectBox) && !(this.settingComponent instanceof ListBox)) { return; } // The minimum number of items that must be available for the setting to be displayed @@ -89,15 +89,15 @@ export class SettingsPanelItem extends C let minItemsToDisplay = 2; // Audio/video quality select boxes contain an additional 'auto' mode, which in combination with a single // available quality also does not make sense - if ((this.setting instanceof VideoQualitySelectBox && this.setting.hasAutoItem()) - || this.setting instanceof AudioQualitySelectBox) { + if ((this.settingComponent instanceof VideoQualitySelectBox && this.settingComponent.hasAutoItem()) + || this.settingComponent instanceof AudioQualitySelectBox) { minItemsToDisplay = 3; } - if (this.setting.itemCount() < minItemsToDisplay) { + if (this.settingComponent.itemCount() < minItemsToDisplay) { // Hide the setting if no meaningful choice is available this.hide(); - } else if (this.setting instanceof PlaybackSpeedSelectBox + } else if (this.settingComponent instanceof PlaybackSpeedSelectBox && !uimanager.getConfig().playbackSpeedSelectionEnabled) { // Hide the PlaybackSpeedSelectBox if disabled in config this.hide(); @@ -112,8 +112,8 @@ export class SettingsPanelItem extends C this.getDomElement().attr('aria-haspopup', 'true'); }; - this.setting.onItemAdded.subscribe(handleConfigItemChanged); - this.setting.onItemRemoved.subscribe(handleConfigItemChanged); + this.settingComponent.onItemAdded.subscribe(handleConfigItemChanged); + this.settingComponent.onItemRemoved.subscribe(handleConfigItemChanged); // Initialize hidden state handleConfigItemChanged(); diff --git a/src/ts/components/settingspanelselectoption.ts b/src/ts/components/settingspanelselectoption.ts index 99af1b56b..bb1a55b5b 100644 --- a/src/ts/components/settingspanelselectoption.ts +++ b/src/ts/components/settingspanelselectoption.ts @@ -12,7 +12,7 @@ export interface SettingsPanelSelectOptionConfig extends SettingsPanelItemConfig /** * The setting that will be changed when this option is clicked. */ - setting: ListSelector; + settingComponent: ListSelector; /** * The value of the setting that will be selected when this option is clicked. */ @@ -27,7 +27,7 @@ export interface SettingsPanelSelectOptionConfig extends SettingsPanelItemConfig */ export class SettingsPanelSelectOption extends SettingsPanelItem { private settingsValue: string | undefined; - protected setting: ListSelector; + protected settingComponent: ListSelector; constructor(config: SettingsPanelSelectOptionConfig) { super(config); @@ -44,7 +44,7 @@ export class SettingsPanelSelectOption extends SettingsPanelItem { - let selectedItem = this.setting.getSelectedItem(); + let selectedItem = this.settingComponent.getSelectedItem(); if (this.settingsValue === selectedItem) { this.getDomElement().addClass(this.prefixCss('selected')); @@ -52,10 +52,10 @@ export class SettingsPanelSelectOption extends SettingsPanelItem { - this.setting.selectItem(this.settingsValue); + this.settingComponent.selectItem(this.settingsValue); }; this.getDomElement().on('click', () => handleItemClick()); diff --git a/src/ts/components/subtitlesettings/subtitlesettingspanelpage.ts b/src/ts/components/subtitlesettings/subtitlesettingspanelpage.ts index 55c3147e0..235229ed1 100644 --- a/src/ts/components/subtitlesettings/subtitlesettingspanelpage.ts +++ b/src/ts/components/subtitlesettings/subtitlesettingspanelpage.ts @@ -113,7 +113,7 @@ export class SubtitleSettingsPanelPage extends SettingsPanelPage { label: new SettingsPanelPageBackButton({ container: this.settingsPanel, }), - setting: new SubtitleSettingsResetButton({}), + settingComponent: new SubtitleSettingsResetButton({}), cssClasses: ['title-item'], }); @@ -148,13 +148,13 @@ export class SubtitleSettingsPanelPage extends SettingsPanelPage { if (useDynamicSettingsPanelItem) { return new DynamicSettingsPanelItem({ label: label, - setting: setting, + settingComponent: setting, container: this.settingsPanel, }); } else { return new SettingsPanelItem({ label: label, - setting: setting, + settingComponent: setting, }); } } diff --git a/src/ts/demofactory.ts b/src/ts/demofactory.ts index 596af48b3..125e27c2c 100644 --- a/src/ts/demofactory.ts +++ b/src/ts/demofactory.ts @@ -70,9 +70,9 @@ export namespace DemoFactory { components: [ new SettingsPanelPage({ components: [ - new SettingsPanelItem({ label: 'Video Quality', setting: new VideoQualitySelectBox() }), - new SettingsPanelItem({ label: 'Speed', setting: new PlaybackSpeedSelectBox() }), - new SettingsPanelItem({ label: 'Audio Quality', setting: new AudioQualitySelectBox() }), + new SettingsPanelItem({ label: 'Video Quality', settingComponent: new VideoQualitySelectBox() }), + new SettingsPanelItem({ label: 'Speed', settingComponent: new PlaybackSpeedSelectBox() }), + new SettingsPanelItem({ label: 'Audio Quality', settingComponent: new AudioQualitySelectBox() }), ], }), ], @@ -84,7 +84,7 @@ export namespace DemoFactory { components: [ new SettingsPanelPage({ components: [ - new SettingsPanelItem({ label: null, setting: subtitleListBox }), + new SettingsPanelItem({ label: null, settingComponent: subtitleListBox }), ], }), ], @@ -96,7 +96,7 @@ export namespace DemoFactory { components: [ new SettingsPanelPage({ components: [ - new SettingsPanelItem({ label: null, setting: audioTrackListBox }), + new SettingsPanelItem({ label: null, settingComponent: audioTrackListBox }), ], }), ], diff --git a/src/ts/uifactory.ts b/src/ts/uifactory.ts index 627e47308..4abc5d01d 100644 --- a/src/ts/uifactory.ts +++ b/src/ts/uifactory.ts @@ -81,10 +81,10 @@ export namespace UIFactory { let mainSettingsPanelPage: SettingsPanelPage; const components: Container[] = [ - new SettingsPanelItem({ label: i18n.getLocalizer('settings.video.quality'), setting: new VideoQualitySelectBox() }), - new SettingsPanelItem({ label: i18n.getLocalizer('speed'), setting: new PlaybackSpeedSelectBox() }), - new SettingsPanelItem({ label: i18n.getLocalizer('settings.audio.track'), setting: new AudioTrackSelectBox() }), - new SettingsPanelItem({ label: i18n.getLocalizer('settings.audio.quality'), setting: new AudioQualitySelectBox() }), + new SettingsPanelItem({ label: i18n.getLocalizer('settings.video.quality'), settingComponent: new VideoQualitySelectBox() }), + new SettingsPanelItem({ label: i18n.getLocalizer('speed'), settingComponent: new PlaybackSpeedSelectBox() }), + new SettingsPanelItem({ label: i18n.getLocalizer('settings.audio.track'), settingComponent: new AudioTrackSelectBox() }), + new SettingsPanelItem({ label: i18n.getLocalizer('settings.audio.quality'), settingComponent: new AudioQualitySelectBox() }), ]; if (config.ecoMode) { @@ -127,7 +127,7 @@ export namespace UIFactory { text: i18n.getLocalizer('settings.subtitles'), opener: subtitleSettingsOpenButton, }), - setting: subtitleSelectBox, + settingComponent: subtitleSelectBox, role: 'menubar', }), ); @@ -231,10 +231,10 @@ export namespace UIFactory { let mainSettingsPanelPage = new SettingsPanelPage({ components: [ - new SettingsPanelItem({ label: i18n.getLocalizer('settings.video.quality'), setting: new VideoQualitySelectBox() }), - new SettingsPanelItem({ label: i18n.getLocalizer('speed'), setting: new PlaybackSpeedSelectBox() }), - new SettingsPanelItem({ label: i18n.getLocalizer('settings.audio.track'), setting: new AudioTrackSelectBox() }), - new SettingsPanelItem({ label: i18n.getLocalizer('settings.audio.quality'), setting: new AudioQualitySelectBox() }), + new SettingsPanelItem({ label: i18n.getLocalizer('settings.video.quality'), settingComponent: new VideoQualitySelectBox() }), + new SettingsPanelItem({ label: i18n.getLocalizer('speed'), settingComponent: new PlaybackSpeedSelectBox() }), + new SettingsPanelItem({ label: i18n.getLocalizer('settings.audio.track'), settingComponent: new AudioTrackSelectBox() }), + new SettingsPanelItem({ label: i18n.getLocalizer('settings.audio.quality'), settingComponent: new AudioQualitySelectBox() }), ], }); @@ -265,7 +265,7 @@ export namespace UIFactory { text: i18n.getLocalizer('settings.subtitles'), opener: subtitleSettingsOpenButton, }), - setting: subtitleSelectBox, + settingComponent: subtitleSelectBox, role: 'menubar', }), ); @@ -461,22 +461,22 @@ export namespace UIFactory { components: [ new DynamicSettingsPanelItem({ label: i18n.getLocalizer('settings.video.quality'), - setting: new VideoQualitySelectBox(), + settingComponent: new VideoQualitySelectBox(), container: settingsPanel, }), new DynamicSettingsPanelItem({ label: i18n.getLocalizer('speed'), - setting: new PlaybackSpeedSelectBox(), + settingComponent: new PlaybackSpeedSelectBox(), container: settingsPanel, }), new DynamicSettingsPanelItem({ label: i18n.getLocalizer('settings.audio.track'), - setting: new AudioTrackSelectBox() , + settingComponent: new AudioTrackSelectBox() , container: settingsPanel, }), new DynamicSettingsPanelItem({ label: i18n.getLocalizer('settings.audio.quality'), - setting: new AudioQualitySelectBox(), + settingComponent: new AudioQualitySelectBox(), container: settingsPanel, }), ], @@ -503,7 +503,7 @@ export namespace UIFactory { text: i18n.getLocalizer('settings.subtitles'), opener: subtitleSettingsOpenButton, }), - setting: subtitleSelectBox, + settingComponent: subtitleSelectBox, role: 'menubar', container: settingsPanel, }); @@ -583,22 +583,22 @@ export namespace UIFactory { const components: Container[] = [ new DynamicSettingsPanelItem({ label: i18n.getLocalizer('settings.video.quality'), - setting: new VideoQualitySelectBox(), + settingComponent: new VideoQualitySelectBox(), container: settingsPanel, }), new DynamicSettingsPanelItem({ label: i18n.getLocalizer('speed'), - setting: new PlaybackSpeedSelectBox(), + settingComponent: new PlaybackSpeedSelectBox(), container: settingsPanel, }), new DynamicSettingsPanelItem({ label: i18n.getLocalizer('settings.audio.track'), - setting: new AudioTrackSelectBox(), + settingComponent: new AudioTrackSelectBox(), container: settingsPanel, }), new DynamicSettingsPanelItem({ label: i18n.getLocalizer('settings.audio.quality'), - setting: new AudioQualitySelectBox(), + settingComponent: new AudioQualitySelectBox(), container: settingsPanel, }), ]; @@ -639,7 +639,7 @@ export namespace UIFactory { text: i18n.getLocalizer('settings.subtitles'), opener: subtitleSettingsOpenButton, }), - setting: subtitleSelectBox, + settingComponent: subtitleSelectBox, role: 'menubar', container: settingsPanel, }); @@ -809,7 +809,7 @@ export namespace UIFactory { const subtitleListPanel = new SettingsPanel({ components: [ new SettingsPanelPage({ - components: [new SettingsPanelItem({ setting: subtitleListBox })], + components: [new SettingsPanelItem({ settingComponent: subtitleListBox })], }), ], hidden: true, @@ -819,7 +819,7 @@ export namespace UIFactory { const audioTrackListPanel = new SettingsPanel({ components: [ new SettingsPanelPage({ - components: [new SettingsPanelItem({ setting: audioTrackListBox })], + components: [new SettingsPanelItem({ settingComponent: audioTrackListBox })], }), ], hidden: true, From 901be17de0ac6bcd1d761a8fcfb362f44474979a Mon Sep 17 00:00:00 2001 From: David Steinacher Date: Fri, 20 Dec 2024 08:51:17 +0100 Subject: [PATCH 7/7] fix test build after renaming --- spec/components/settingspanel.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/spec/components/settingspanel.spec.ts b/spec/components/settingspanel.spec.ts index 46778f883..ec2e092b8 100644 --- a/spec/components/settingspanel.spec.ts +++ b/spec/components/settingspanel.spec.ts @@ -224,8 +224,8 @@ describe('SettingsPanel', () => { const selectBox = new SelectBox(); const closeDropdownSpy = jest.spyOn(selectBox, 'closeDropdown'); - settingsPanel.getActivePage().addComponent(new SettingsPanelItem({ label: new Label(), setting: selectBox })); - settingsPanel.getActivePage().addComponent(new SettingsPanelItem({ label: new Label(), setting: new VolumeSlider() })); + settingsPanel.getActivePage().addComponent(new SettingsPanelItem({ label: new Label(), settingComponent: selectBox })); + settingsPanel.getActivePage().addComponent(new SettingsPanelItem({ label: new Label(), settingComponent: new VolumeSlider() })); settingsPanel['hideHoveredSelectBoxes']();