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']();
 
diff --git a/src/html/index.html b/src/html/index.html
index 3166bc2d4..d92da4033 100644
--- a/src/html/index.html
+++ b/src/html/index.html
@@ -282,7 +282,12 @@ <h4 class="card-title">
     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');
diff --git a/src/scss/skin-super-modern/_skin.scss b/src/scss/skin-super-modern/_skin.scss
index 8c6b9a539..847e42b40 100644
--- a/src/scss/skin-super-modern/_skin.scss
+++ b/src/scss/skin-super-modern/_skin.scss
@@ -48,7 +48,7 @@
   @import 'components/spacer';
   @import 'components/subtitlesettings/subtitlesettings';
   @import 'components/subtitlesettingspaneltogglebutton';
-  @import 'components/touch-control-overlay';
+  @import 'components/touchcontroloverlay';
   @import 'components/smallcenteredplaybacktogglebutton';
   @import 'skin-ads';
   @import 'skin-cast-receiver';
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/scss/skin-super-modern/components/_touch-control-overlay.scss b/src/scss/skin-super-modern/components/_touchcontroloverlay.scss
similarity index 83%
rename from src/scss/skin-super-modern/components/_touch-control-overlay.scss
rename to src/scss/skin-super-modern/components/_touchcontroloverlay.scss
index 293a5a669..8b6a6a2c8 100644
--- a/src/scss/skin-super-modern/components/_touch-control-overlay.scss
+++ b/src/scss/skin-super-modern/components/_touchcontroloverlay.scss
@@ -18,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;
 
@@ -42,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/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<ListSelectorConfig>;
+  settingComponent: ListSelector<ListSelectorConfig>;
   /**
    * 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<DynamicSettingsPanelItemConfig> {
   private selectedOptionLabel: Label<LabelConfig>;
-  protected setting: ListSelector<ListSelectorConfig>;
+  protected settingComponent: ListSelector<ListSelectorConfig>;
 
   private player: PlayerAPI;
   private uimanager: UIInstanceManager;
@@ -48,7 +48,7 @@ export class DynamicSettingsPanelItem extends SettingsPanelItem<DynamicSettingsP
   constructor(config: DynamicSettingsPanelItemConfig) {
     super(config);
 
-    this.setting = config.setting;
+    this.settingComponent = config.settingComponent;
 
     this.selectedOptionLabel = new Label({
       text: '-',
@@ -76,12 +76,12 @@ export class DynamicSettingsPanelItem extends SettingsPanelItem<DynamicSettingsP
       this.config.label.opener.configure(player, uimanager);
     }
 
-    if (this.setting != null) {
-      this.setting.configure(this.player, this.uimanager);
+    if (this.settingComponent != null) {
+      this.settingComponent.configure(this.player, this.uimanager);
     }
 
     const handleSelectedItemChanged = () => {
-      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<DynamicSettingsP
 
       this.selectedOptionLabel.show();
       let selectedOptionLabelText = selectedItem.label;
-      if (this.setting instanceof SubtitleSelectBox) {
-        let availableSettings = this.setting.getItems().length;
+      if (this.settingComponent instanceof SubtitleSelectBox) {
+        let availableSettings = this.settingComponent.getItems().length;
         selectedOptionLabelText = selectedOptionLabelText + ' (' + (availableSettings - 1) + ')';
       }
       this.selectedOptionLabel.setText(selectedOptionLabelText);
     };
-    this.setting.onItemSelected.subscribe(handleSelectedItemChanged);
+    this.settingComponent.onItemSelected.subscribe(handleSelectedItemChanged);
 
     handleSelectedItemChanged();
 
@@ -109,7 +109,7 @@ export class DynamicSettingsPanelItem extends SettingsPanelItem<DynamicSettingsP
   }
 
   private buildSubPanelPage(): SettingsPanelPage {
-    const menuOptions = this.setting.getItems();
+    const menuOptions = this.settingComponent.getItems();
     const page = new SettingsPanelPage({ removeOnPop: true });
 
     const text = this.config.label instanceof SubtitleSettingsLabel ? this.config.label.text : this.config.label;
@@ -129,7 +129,7 @@ export class DynamicSettingsPanelItem extends SettingsPanelItem<DynamicSettingsP
       .map((option) => {
         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<DynamicSettingsP
 
     page.configure(this.player, this.uimanager);
 
-    const setting = this.setting;
+    const setting = this.settingComponent;
     if (setting instanceof SubtitleSettingSelectBox) {
       // Keep the preview subtitle overlay visible when the sub-page is for a subtitle setting
       page.onActive.subscribe(() => 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<ContainerConfig> {
       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/seekbar.ts b/src/ts/components/seekbar.ts
index ba2d99a2b..22e086ee2 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<SeekBarConfig> {
       snappingRange: 1,
       enableSeekPreview: true,
       snappingEnabled: true,
-      renderSeekBarPlaybackPositionMarkerInOuterSeekBar: false,
     }, this.config);
 
     this.label = this.config.label;
@@ -249,10 +242,17 @@ export class SeekBar extends Component<SeekBarConfig> {
 
     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;
@@ -294,7 +294,7 @@ export class SeekBar extends Component<SeekBarConfig> {
         // 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()) {
@@ -330,12 +330,12 @@ export class SeekBar extends Component<SeekBarConfig> {
       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 () {
@@ -668,6 +668,10 @@ export class SeekBar extends Component<SeekBarConfig> {
     });
     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 +707,10 @@ export class SeekBar extends Component<SeekBarConfig> {
     });
     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,16 +749,12 @@ export class SeekBar extends Component<SeekBarConfig> {
       this.onSeekedEvent(targetPercentage);
     };
 
-    // TODO: the problem is that the SeekbarLabel is also inside the seekbarContainer and therefore reacts to the
-    // TODO: mouse inputs.
-    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)
@@ -778,7 +776,7 @@ export class SeekBar extends Component<SeekBarConfig> {
     });
 
     // 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) {
@@ -796,7 +794,7 @@ export class SeekBar extends Component<SeekBarConfig> {
     });
 
     // 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);
@@ -812,10 +810,6 @@ export class SeekBar extends Component<SeekBarConfig> {
       seekBarContainer.append(this.label.getDomElement());
     }
 
-    if (this.config.renderSeekBarPlaybackPositionMarkerInOuterSeekBar) {
-      seekBarContainer.append(seekBarPlaybackPositionMarker);
-    }
-
     return seekBarContainer;
   }
 
@@ -1109,7 +1103,7 @@ export class SeekBar extends Component<SeekBarConfig> {
     this.refreshPlaybackPosition();
   }
 
- /**
+  /**
    * Checks if TouchEvent is supported.
    * @returns {boolean} true if TouchEvent not undefined, else false
    */
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<SettingsPanelConfig> {
    */
   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<ComponentConfig>;
+  settingComponent?: Component<ComponentConfig>;
   /**
    * If the setting should be added as a component to this item.
    */
@@ -41,7 +41,7 @@ export interface SettingsPanelItemConfig extends ContainerConfig {
 export class SettingsPanelItem<Config extends SettingsPanelItemConfig> extends Container<Config> {
 
   private label: Component<ComponentConfig>;
-  protected setting: Component<ComponentConfig> | null;
+  protected settingComponent: Component<ComponentConfig> | null;
 
   private settingsPanelItemEvents = {
     onActiveChanged: new EventDispatcher<SettingsPanelItem<Config>, NoArgs>(),
@@ -51,7 +51,7 @@ export class SettingsPanelItem<Config extends SettingsPanelItemConfig> 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<Config extends SettingsPanelItemConfig> 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<Config extends SettingsPanelItemConfig> 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<Config extends SettingsPanelItemConfig> 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<ListSelectorConfig>;
+  settingComponent: ListSelector<ListSelectorConfig>;
   /**
    * 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<SettingsPanelSelectOptionConfig> {
   private settingsValue: string | undefined;
-  protected setting: ListSelector<ListSelectorConfig>;
+  protected settingComponent: ListSelector<ListSelectorConfig>;
 
   constructor(config: SettingsPanelSelectOptionConfig) {
     super(config);
@@ -44,7 +44,7 @@ export class SettingsPanelSelectOption extends SettingsPanelItem<SettingsPanelSe
     super.configure(player, uimanager);
 
     const handleSelectedOptionChanged = () => {
-      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<SettingsPanelSe
         this.getDomElement().removeClass(this.prefixCss('selected'));
       }
     };
-    this.setting.onItemSelected.subscribe(handleSelectedOptionChanged);
+    this.settingComponent.onItemSelected.subscribe(handleSelectedOptionChanged);
 
     const handleItemClick = () => {
-      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/components/touchcontroloverlay.ts b/src/ts/components/touchcontroloverlay.ts
index 1c74f403a..e9167716c 100644
--- a/src/ts/components/touchcontroloverlay.ts
+++ b/src/ts/components/touchcontroloverlay.ts
@@ -79,11 +79,11 @@ export class TouchControlOverlay extends Container<TouchControlOverlayConfig> {
     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);
   }
 
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..183bc1be9 100644
--- a/src/ts/uifactory.ts
+++ b/src/ts/uifactory.ts
@@ -81,10 +81,10 @@ export namespace UIFactory {
     let mainSettingsPanelPage: SettingsPanelPage;
 
     const components: Container<ContainerConfig>[] = [
-      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,
     });
@@ -518,7 +518,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'],
@@ -583,22 +583,22 @@ export namespace UIFactory {
     const components: Container<ContainerConfig>[] = [
       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,
     });
@@ -654,7 +654,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'],
@@ -666,7 +666,7 @@ export namespace UIFactory {
           components: [
             new PlaybackToggleButton(),
             new VolumeToggleButton(),
-            new VolumeSlider({ renderSeekBarPlaybackPositionMarkerInOuterSeekBar: true }),
+            new VolumeSlider(),
             new Spacer(),
             new PictureInPictureToggleButton(),
             new AirPlayToggleButton(),
@@ -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,