Merge branch 'feature/modern-ui-base' into feature/revert-css-nesting

# Conflicts: # src/scss/_ads.scss # src/scss/bitmovinplayer-ui.scss
bitmovin · Jan 14, 2025 · 196e6c6 · 196e6c6
2 parents 9f42981 + 015f8f1
commit 196e6c6
Show file tree

Hide file tree

Showing 179 changed files with 609 additions and 610 deletions.
diff --git a/...components/fullscreentogglebutton.spec.ts → ...ts/buttons/fullscreentogglebutton.spec.ts b/...components/fullscreentogglebutton.spec.ts → ...ts/buttons/fullscreentogglebutton.spec.ts
@@ -1,6 +1,6 @@
-import { MockHelper, TestingPlayerAPI } from '../helper/MockHelper';
-import { UIInstanceManager } from '../../src/ts/uimanager';
-import { FullscreenToggleButton } from '../../src/ts/components/fullscreentogglebutton';
+import { MockHelper, TestingPlayerAPI } from '../../helper/MockHelper';
+import { UIInstanceManager } from '../../../src/ts/uimanager';
+import { FullscreenToggleButton } from '../../../src/ts/components/buttons/fullscreentogglebutton';
 import { ViewMode } from 'bitmovin-player';
 
 let playerMock: TestingPlayerAPI;

diff --git a/...ents/pictureinpicturetogglebutton.spec.ts → ...tons/pictureinpicturetogglebutton.spec.ts b/...ents/pictureinpicturetogglebutton.spec.ts → ...tons/pictureinpicturetogglebutton.spec.ts
@@ -1,6 +1,6 @@
-import { MockHelper, TestingPlayerAPI } from '../helper/MockHelper';
-import { UIInstanceManager } from '../../src/ts/uimanager';
-import { PictureInPictureToggleButton } from '../../src/ts/components/pictureinpicturetogglebutton';
+import { MockHelper, TestingPlayerAPI } from '../../helper/MockHelper';
+import { UIInstanceManager } from '../../../src/ts/uimanager';
+import { PictureInPictureToggleButton } from '../../../src/ts/components/buttons/pictureinpicturetogglebutton';
 import { ViewMode } from 'bitmovin-player';
 
 let playerMock: TestingPlayerAPI;

diff --git a/spec/components/togglebutton.spec.ts → spec/components/buttons/togglebutton.spec.ts b/spec/components/togglebutton.spec.ts → spec/components/buttons/togglebutton.spec.ts
@@ -1,8 +1,8 @@
-import { MockHelper, TestingPlayerAPI } from '../helper/MockHelper';
-import { UIInstanceManager } from '../../src/ts/uimanager';
-import { ToggleButton } from '../../src/ts/components/togglebutton';
-import { ToggleButtonConfig } from '../../src/ts/components/togglebutton';
-import { DOM } from '../../src/ts/dom';
+import { MockHelper, TestingPlayerAPI } from '../../helper/MockHelper';
+import { UIInstanceManager } from '../../../src/ts/uimanager';
+import { ToggleButton } from '../../../src/ts/components/buttons/togglebutton';
+import { ToggleButtonConfig } from '../../../src/ts/components/buttons/togglebutton';
+import { DOM } from '../../../src/ts/dom';
 
 let playerMock: TestingPlayerAPI;
 let uiInstanceManagerMock: UIInstanceManager;

diff --git a/spec/components/playbacktimelabel.spec.ts → ...mponents/labels/playbacktimelabel.spec.ts b/spec/components/playbacktimelabel.spec.ts → ...mponents/labels/playbacktimelabel.spec.ts
@@ -1,6 +1,6 @@
-import { MockHelper, TestingPlayerAPI } from '../helper/MockHelper';
-import { UIInstanceManager } from '../../src/ts/uimanager';
-import { PlaybackTimeLabel, PlaybackTimeLabelMode } from '../../src/ts/components/playbacktimelabel';
+import { MockHelper, TestingPlayerAPI } from '../../helper/MockHelper';
+import { UIInstanceManager } from '../../../src/ts/uimanager';
+import { PlaybackTimeLabel, PlaybackTimeLabelMode } from '../../../src/ts/components/labels/playbacktimelabel';
 import { PlayerEvent, PlayerEventBase } from 'bitmovin-player';
 
 const liveEdgeActiveCssClassName = 'ui-playbacktimelabel-live-edge';

diff --git a/spec/components/seekbarlabel.spec.ts → spec/components/labels/seekbarlabel.spec.ts b/spec/components/seekbarlabel.spec.ts → spec/components/labels/seekbarlabel.spec.ts
@@ -1,8 +1,8 @@
-import { MockHelper, TestingPlayerAPI } from '../helper/MockHelper';
-import { UIInstanceManager } from '../../src/ts/uimanager';
-import { SeekBarLabel } from '../../src/ts/components/seekbarlabel';
-import { SeekPreviewEventArgs } from '../../src/ts/components/seekbar';
-import { DOM } from '../../src/ts/dom';
+import { MockHelper, TestingPlayerAPI } from '../../helper/MockHelper';
+import { UIInstanceManager } from '../../../src/ts/uimanager';
+import { SeekBarLabel } from '../../../src/ts/components/seekbar/seekbarlabel';
+import { SeekPreviewEventArgs } from '../../../src/ts/components/seekbar/seekbar';
+import { DOM } from '../../../src/ts/dom';
 
 let playerMock: TestingPlayerAPI;
 let uiInstanceManagerMock: UIInstanceManager;

diff --git a/spec/components/listselector.spec.ts → spec/components/lists/listselector.spec.ts b/spec/components/listselector.spec.ts → spec/components/lists/listselector.spec.ts
@@ -1,4 +1,4 @@
-import { ListItem, ListSelector, ListSelectorConfig } from '../../src/ts/components/listselector';
+import { ListItem, ListSelector, ListSelectorConfig } from '../../../src/ts/components/lists/listselector';
 
 class ListSelectorTestClass extends ListSelector<ListSelectorConfig> {
 }

diff --git a/spec/components/errormessageoverlay.spec.ts → ...ents/overlays/errormessageoverlay.spec.ts b/spec/components/errormessageoverlay.spec.ts → ...ents/overlays/errormessageoverlay.spec.ts
@@ -1,7 +1,7 @@
-import { UIInstanceManager } from './../../src/ts/uimanager';
-import { ErrorMessageOverlay } from '../../src/ts/components/errormessageoverlay';
-import { MobileV3PlayerEvent } from '../../src/ts/mobilev3playerapi';
-import { MockHelper, TestingPlayerAPI } from '../helper/MockHelper';
+import { UIInstanceManager } from '../../../src/ts/uimanager';
+import { ErrorMessageOverlay } from '../../../src/ts/components/overlays/errormessageoverlay';
+import { MobileV3PlayerEvent } from '../../../src/ts/utils/mobilev3playerapi';
+import { MockHelper, TestingPlayerAPI } from '../../helper/MockHelper';
 
 describe('ErrorMessageOverlay', () => {
   describe('configure', () => {

diff --git a/spec/components/subtitleoverlay.spec.ts → ...mponents/overlays/subtitleoverlay.spec.ts b/spec/components/subtitleoverlay.spec.ts → ...mponents/overlays/subtitleoverlay.spec.ts
@@ -1,13 +1,13 @@
-import { MockHelper, TestingPlayerAPI } from '../helper/MockHelper';
-import { UIInstanceManager } from '../../src/ts/uimanager';
-import { SubtitleOverlay, SubtitleRegionContainerManager } from '../../src/ts/components/subtitleoverlay';
-import { DOM } from '../../src/ts/dom';
+import { MockHelper, TestingPlayerAPI } from '../../helper/MockHelper';
+import { UIInstanceManager } from '../../../src/ts/uimanager';
+import { SubtitleOverlay, SubtitleRegionContainerManager } from '../../../src/ts/components/overlays/subtitleoverlay';
+import { DOM } from '../../../src/ts/dom';
 
 let playerMock: jest.Mocked<TestingPlayerAPI>;
 let uiInstanceManagerMock: UIInstanceManager;
 let subtitleOverlay: SubtitleOverlay;
 
-jest.mock('../../src/ts/components/container');
+jest.mock('../../../src/ts/components/container');
 
 let subtitleRegionContainerManagerMock: SubtitleRegionContainerManager;
 

diff --git a/spec/components/seekbar.spec.ts → spec/components/seekbar/seekbar.spec.ts b/spec/components/seekbar.spec.ts → spec/components/seekbar/seekbar.spec.ts
@@ -1,7 +1,7 @@
-import { MockHelper, TestingPlayerAPI } from '../helper/MockHelper';
-import { SeekBar } from '../../src/ts/components/seekbar';
-import { UIInstanceManager } from '../../src/ts/uimanager';
-import { Timeout } from '../../src/ts/timeout';
+import { MockHelper, TestingPlayerAPI } from '../../helper/MockHelper';
+import { SeekBar } from '../../../src/ts/components/seekbar/seekbar';
+import { UIInstanceManager } from '../../../src/ts/uimanager';
+import { Timeout } from '../../../src/ts/utils/timeout';
 
 let playerMock: TestingPlayerAPI;
 let uiInstanceManagerMock: UIInstanceManager;

diff --git a/spec/components/selectbox.spec.ts → spec/components/settings/selectbox.spec.ts b/spec/components/selectbox.spec.ts → spec/components/settings/selectbox.spec.ts
@@ -1,20 +1,20 @@
 import type { PlayerAPI } from 'bitmovin-player';
 
-import type { Component, ViewModeChangedEventArgs } from '../../src/ts/components/component';
-import { ViewMode } from '../../src/ts/components/component';
-import type { ListSelectorConfig } from '../../src/ts/components/listselector';
-import { SelectBox } from '../../src/ts/components/selectbox';
-import type { Event } from '../../src/ts/eventdispatcher';
-import { PlayerUtils } from '../../src/ts/playerutils';
-import type { UIInstanceManager } from '../../src/ts/uimanager';
-import { MockHelper } from '../helper/MockHelper';
+import type { Component, ViewModeChangedEventArgs } from '../../../src/ts/components/component';
+import { ViewMode } from '../../../src/ts/components/component';
+import type { ListSelectorConfig } from '../../../src/ts/components/lists/listselector';
+import { SelectBox } from '../../../src/ts/components/settings/selectbox';
+import type { Event } from '../../../src/ts/eventdispatcher';
+import { PlayerUtils } from '../../../src/ts/utils/playerutils';
+import type { UIInstanceManager } from '../../../src/ts/uimanager';
+import { MockHelper } from '../../helper/MockHelper';
 import getUiInstanceManagerMock = MockHelper.getUiInstanceManagerMock;
 import getPlayerMock = MockHelper.getPlayerMock;
 import generateDOMMock = MockHelper.generateDOMMock;
 import PlayerState = PlayerUtils.PlayerState;
-import type { DOM } from '../../src/ts/dom';
+import type { DOM } from '../../../src/ts/dom';
 
-jest.mock('../../src/ts/dom', generateDOMMock);
+jest.mock('../../../src/ts/dom', generateDOMMock);
 
 describe('SelectBox', () => {
   let selectBox: SelectBox;

diff --git a/spec/components/settingspanel.spec.ts → ...components/settings/settingspanel.spec.ts b/spec/components/settingspanel.spec.ts → ...components/settings/settingspanel.spec.ts
@@ -1,18 +1,18 @@
 import type { PlayerAPI } from 'bitmovin-player';
 
-import type { Component, ComponentConfig, ViewModeChangedEventArgs } from '../../src/ts/components/component';
-import { ViewMode } from '../../src/ts/components/component';
-import { SettingsPanel } from '../../src/ts/components/settingspanel';
-import { SettingsPanelPage } from '../../src/ts/components/settingspanelpage';
-import { EventDispatcher } from '../../src/ts/eventdispatcher';
-import type { UIInstanceManager } from '../../src/ts/uimanager';
-import { MockHelper } from '../helper/MockHelper';
+import type { Component, ComponentConfig, ViewModeChangedEventArgs } from '../../../src/ts/components/component';
+import { ViewMode } from '../../../src/ts/components/component';
+import { SettingsPanel } from '../../../src/ts/components/settings/settingspanel';
+import { SettingsPanelPage } from '../../../src/ts/components/settings/settingspanelpage';
+import { EventDispatcher } from '../../../src/ts/eventdispatcher';
+import type { UIInstanceManager } from '../../../src/ts/uimanager';
+import { MockHelper } from '../../helper/MockHelper';
 import getPlayerMock = MockHelper.getPlayerMock;
 import getUiInstanceManagerMock = MockHelper.getUiInstanceManagerMock;
-import { Label } from '../../src/ts/components/label';
-import { SelectBox } from '../../src/ts/components/selectbox';
-import { SettingsPanelItem } from '../../src/ts/components/settingspanelitem';
-import { VolumeSlider } from '../../src/ts/components/volumeslider';
+import { Label } from '../../../src/ts/components/labels/label';
+import { SelectBox } from '../../../src/ts/components/settings/selectbox';
+import { SettingsPanelItem } from '../../../src/ts/components/settings/settingspanelitem';
+import { VolumeSlider } from '../../../src/ts/components/seekbar/volumeslider';
 
 let settingsPanel: SettingsPanel;
 

diff --git a/spec/components/uicontainer.spec.ts b/spec/components/uicontainer.spec.ts
@@ -1,5 +1,5 @@
 import { UIContainer } from '../../src/ts/components/uicontainer';
-import { PlayerUtils } from '../../src/ts/playerutils';
+import { PlayerUtils } from '../../src/ts/utils/playerutils';
 import type { UIInstanceManager } from '../../src/ts/uimanager';
 import type { TestingPlayerAPI } from '../helper/MockHelper';
 import { MockHelper } from '../helper/MockHelper';

diff --git a/spec/localization.spec.ts → spec/localization/localization.spec.ts b/spec/localization.spec.ts → spec/localization/localization.spec.ts
@@ -1,4 +1,4 @@
-import { i18n } from '../src/ts/localization/i18n';
+import { i18n } from '../../src/ts/localization/i18n';
 
 const fallbackTest = 'fallback test';
 const successEn = 'success';

diff --git a/spec/spatialnavigation/gethtmlelementsfromcomponents.spec.ts b/spec/spatialnavigation/gethtmlelementsfromcomponents.spec.ts
@@ -1,6 +1,6 @@
 import { Container } from '../../src/ts/components/container';
 import { Component } from '../../src/ts/components/component';
-import { ListBox } from '../../src/ts/components/listbox';
+import { ListBox } from '../../src/ts/components/lists/listbox';
 import { getHtmlElementsFromComponents } from '../../src/ts/spatialnavigation/gethtmlelementsfromcomponents';
 
 class DummyListBox extends ListBox {

diff --git a/spec/spatialnavigation/navigationgroup.spec.ts b/spec/spatialnavigation/navigationgroup.spec.ts
@@ -1,7 +1,7 @@
 import { NavigationGroup } from '../../src/ts/spatialnavigation/navigationgroup';
 import { UIContainer } from '../../src/ts/components/uicontainer';
-import { PlaybackToggleButton } from '../../src/ts/components/playbacktogglebutton';
-import { SettingsToggleButton } from '../../src/ts/components/settingstogglebutton';
+import { PlaybackToggleButton } from '../../src/ts/components/buttons/playbacktogglebutton';
+import { SettingsToggleButton } from '../../src/ts/components/settings/settingstogglebutton';
 import { getFirstDomElement, mockComponent } from '../helper/mockComponent';
 import * as navigationAlgorithm from '../../src/ts/spatialnavigation/navigationalgorithm';
 import { NodeEventSubscriber } from '../../src/ts/spatialnavigation/nodeeventsubscriber';

diff --git a/spec/spatialnavigation/spatialnavigation.spec.ts b/spec/spatialnavigation/spatialnavigation.spec.ts
@@ -2,7 +2,7 @@ import { SpatialNavigation } from '../../src/ts/spatialnavigation/spatialnavigat
 import { RootNavigationGroup } from '../../src/ts/spatialnavigation/rootnavigationgroup';
 import { UIContainer } from '../../src/ts/components/uicontainer';
 import { NavigationGroup } from '../../src/ts/spatialnavigation/navigationgroup';
-import { SettingsPanel } from '../../src/ts/components/settingspanel';
+import { SettingsPanel } from '../../src/ts/components/settings/settingspanel';
 import { NodeEventSubscriber } from '../../src/ts/spatialnavigation/nodeeventsubscriber';
 import { SeekBarHandler } from '../../src/ts/spatialnavigation/seekbarhandler';
 import { Action, Direction } from '../../src/ts/spatialnavigation/types';

diff --git a/spec/uimanager.spec.ts b/spec/uimanager.spec.ts
@@ -7,7 +7,7 @@ import {
 } from '../src/ts/uimanager';
 import { PlayerAPI } from 'bitmovin-player';
 import { MockHelper, TestingPlayerAPI } from './helper/MockHelper';
-import { MobileV3PlayerEvent } from '../src/ts/mobilev3playerapi';
+import { MobileV3PlayerEvent } from '../src/ts/utils/mobilev3playerapi';
 import { UIContainer } from '../src/ts/components/uicontainer';
 import { Container } from '../src/ts/components/container';
 

diff --git a/spec/audioutils.spec.ts → spec/utils/audioutils.spec.ts b/spec/audioutils.spec.ts → spec/utils/audioutils.spec.ts
@@ -1,6 +1,6 @@
-import { MockHelper } from './helper/MockHelper';
-import { ListSelector, ListSelectorConfig } from '../src/ts/components/listselector';
-import { AudioTrackSwitchHandler } from '../src/ts/audiotrackutils';
+import { MockHelper } from '../helper/MockHelper';
+import { ListSelector, ListSelectorConfig } from '../../src/ts/components/lists/listselector';
+import { AudioTrackSwitchHandler } from '../../src/ts/utils/audiotrackutils';
 import { AudioTrack } from 'bitmovin-player';
 
 let playerMock = MockHelper.getPlayerMock();

diff --git a/spec/browserutils.spec.ts → spec/utils/browserutils.spec.ts b/spec/browserutils.spec.ts → spec/utils/browserutils.spec.ts
@@ -1,4 +1,4 @@
-import { BrowserUtils } from '../src/ts/browserutils';
+import { BrowserUtils } from '../../src/ts/utils/browserutils';
 
 const mobileSafariUserAgent = 'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A356 Safari/604.1';
 

diff --git a/spec/errorutils.spec.ts → spec/utils/errorutils.spec.ts b/spec/errorutils.spec.ts → spec/utils/errorutils.spec.ts
@@ -1,5 +1,5 @@
-import { MobileV3PlayerErrorEvent } from '../src/ts/mobilev3playerapi';
-import { ErrorUtils } from '../src/ts/errorutils';
+import { MobileV3PlayerErrorEvent } from '../../src/ts/utils/mobilev3playerapi';
+import { ErrorUtils } from '../../src/ts/utils/errorutils';
 import defaultMobileV3ErrorMessageTranslator = ErrorUtils.defaultMobileV3ErrorMessageTranslator;
 import { ErrorEvent } from 'bitmovin-player';
 import defaultWebErrorMessageTranslator = ErrorUtils.defaultWebErrorMessageTranslator;

diff --git a/spec/focusvisibilitytracker.spec.ts → spec/utils/focusvisibilitytracker.spec.ts b/spec/focusvisibilitytracker.spec.ts → spec/utils/focusvisibilitytracker.spec.ts
@@ -1,5 +1,5 @@
 import { JSDOM } from 'jsdom';
-import { FocusVisibilityTracker } from '../src/ts/focusvisibilitytracker';
+import { FocusVisibilityTracker } from '../../src/ts/utils/focusvisibilitytracker';
 
 describe('FocusVisibilityTracker', () => {
   const bitmovinUIPrefix = 'bmpui';

diff --git a/spec/mobilev3playerapi.spec.ts → spec/utils/mobilev3playerapi.spec.ts b/spec/mobilev3playerapi.spec.ts → spec/utils/mobilev3playerapi.spec.ts
@@ -1,6 +1,6 @@
 import { PlayerAPI } from 'bitmovin-player';
-import { isMobileV3PlayerAPI, MobileV3PlayerAPI, MobileV3PlayerEvent } from '../src/ts/mobilev3playerapi';
-import { PlayerWrapper } from '../src/ts/uimanager';
+import { isMobileV3PlayerAPI, MobileV3PlayerAPI, MobileV3PlayerEvent } from '../../src/ts/utils/mobilev3playerapi';
+import { PlayerWrapper } from '../../src/ts/uimanager';
 
 describe('isMobileV3PlayerAPI', () => {
   const playerApi = { exports: { PlayerEvent: { } } } as PlayerAPI;

diff --git a/spec/playerutils.spec.ts → spec/utils/playerutils.spec.ts b/spec/playerutils.spec.ts → spec/utils/playerutils.spec.ts
@@ -1,6 +1,6 @@
-import { PlayerUtils } from '../src/ts/playerutils';
+import { PlayerUtils } from '../../src/ts/utils/playerutils';
 import { PlayerAPI } from 'bitmovin-player';
-import { MockHelper } from './helper/MockHelper';
+import { MockHelper } from '../helper/MockHelper';
 
 describe('PlayerUtils', () => {
   let playerMock: PlayerAPI;

diff --git a/spec/subtitleutils.spec.ts → spec/utils/subtitleutils.spec.ts b/spec/subtitleutils.spec.ts → spec/utils/subtitleutils.spec.ts
@@ -1,6 +1,6 @@
-import { SubtitleSwitchHandler } from '../src/ts/subtitleutils';
-import { MockHelper } from './helper/MockHelper';
-import { ListSelector, ListSelectorConfig } from '../src/ts/components/listselector';
+import { SubtitleSwitchHandler } from '../../src/ts/utils/subtitleutils';
+import { MockHelper } from '../helper/MockHelper';
+import { ListSelector, ListSelectorConfig } from '../../src/ts/components/lists/listselector';
 import { PlayerSubtitlesAPI } from 'bitmovin-player';
 
 let playerMock = MockHelper.getPlayerMock();

diff --git a/...components/timelinemarkershandler.spec.ts → spec/utils/timelinemarkershandler.spec.ts b/...components/timelinemarkershandler.spec.ts → spec/utils/timelinemarkershandler.spec.ts
@@ -1,5 +1,5 @@
 import { MockHelper } from '../helper/MockHelper';
-import { TimelineMarkersHandler } from '../../src/ts/components/timelinemarkershandler';
+import { TimelineMarkersHandler } from '../../src/ts/utils/timelinemarkershandler';
 import { PlayerAPI } from 'bitmovin-player';
 import { UIInstanceManager } from '../../src/ts/uimanager';
 import { TimelineMarker } from '../../src/ts/uiconfig';

diff --git a/spec/volumecontroller.spec.ts → spec/utils/volumecontroller.spec.ts b/spec/volumecontroller.spec.ts → spec/utils/volumecontroller.spec.ts
@@ -1,6 +1,6 @@
 import { PlayerEvent, VolumeChangedEvent } from 'bitmovin-player';
-import { VolumeController } from '../src/ts/volumecontroller';
-import { MockHelper, TestingPlayerAPI } from './helper/MockHelper';
+import { VolumeController } from '../../src/ts/utils/volumecontroller';
+import { MockHelper, TestingPlayerAPI } from '../helper/MockHelper';
 
 describe('VolumeController', () => {
   let playerMock: TestingPlayerAPI;

diff --git a/spec/vttutils.spec.ts → spec/utils/vttutils.spec.ts b/spec/vttutils.spec.ts → spec/utils/vttutils.spec.ts
@@ -1,8 +1,8 @@
-import { SubtitleRegionContainer, SubtitleLabel } from '../src/ts/components/subtitleoverlay';
-import { VttUtils } from '../src/ts/vttutils';
+import { SubtitleRegionContainer, SubtitleLabel } from '../../src/ts/components/overlays/subtitleoverlay';
+import { VttUtils } from '../../src/ts/utils/vttutils';
 import { VTTRegionProperties, VTTProperties } from 'bitmovin-player';
-import { MockHelper } from './helper/MockHelper';
-import { Size } from '../src/ts/dom';
+import { MockHelper } from '../helper/MockHelper';
+import { Size } from '../../src/ts/dom';
 
 describe('Vtt Utils', () => {
   describe('Vtt Region', () => {

diff --git a/src/scss/_ads.scss b/src/scss/_ads.scss
@@ -2,8 +2,8 @@
 
 // sass-lint:disable nesting-depth
 .#{$prefix}-ui-ads {
-  @import 'components/adskipbutton';
-  @import 'components/adstatusoverlay';
+  @import 'components/ads/adskipbutton';
+  @import 'components/ads/adstatusoverlay';
 
   .#{$prefix}-ui-seekbar {
     .#{$prefix}-seekbar,