From 42ecf15831976232e402aeb04c16834f2c0cd078 Mon Sep 17 00:00:00 2001 From: David Steinacher Date: Tue, 3 Dec 2024 11:26:24 -0700 Subject: [PATCH 01/10] add the new look and feel for the web based UI variant --- src/html/index.html | 1 - src/scss/bitmovinplayer-modern-ui.scss | 1 - src/scss/bitmovinplayer-ui.scss | 1 + src/ts/uifactory.ts | 109 ++++++++++++++++++++++++- 4 files changed, 107 insertions(+), 5 deletions(-) delete mode 100644 src/scss/bitmovinplayer-modern-ui.scss diff --git a/src/html/index.html b/src/html/index.html index 73319771b..cf9b18e7c 100644 --- a/src/html/index.html +++ b/src/html/index.html @@ -6,7 +6,6 @@ Bitmovin Player UI Demo - diff --git a/src/scss/bitmovinplayer-modern-ui.scss b/src/scss/bitmovinplayer-modern-ui.scss deleted file mode 100644 index 3e45ffbae..000000000 --- a/src/scss/bitmovinplayer-modern-ui.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'skin-super-modern/skin'; diff --git a/src/scss/bitmovinplayer-ui.scss b/src/scss/bitmovinplayer-ui.scss index eeefcc38d..264a8a3da 100644 --- a/src/scss/bitmovinplayer-ui.scss +++ b/src/scss/bitmovinplayer-ui.scss @@ -1 +1,2 @@ @import 'skin-modern/skin'; +@import 'skin-super-modern/skin'; diff --git a/src/ts/uifactory.ts b/src/ts/uifactory.ts index 8f361b671..64847a819 100644 --- a/src/ts/uifactory.ts +++ b/src/ts/uifactory.ts @@ -547,8 +547,111 @@ export namespace UIFactory { }); } - export function superModerUI() { - return new UIContainer({}); + export function superModernUI() { + let subtitleOverlay = new SubtitleOverlay(); + + let mainSettingsPanelPage: SettingsPanelPage; + + const components: Container[] = [ + new SettingsPanelItem(i18n.getLocalizer('settings.video.quality'), new VideoQualitySelectBox()), + new SettingsPanelItem(i18n.getLocalizer('speed'), new PlaybackSpeedSelectBox()), + new SettingsPanelItem(i18n.getLocalizer('settings.audio.track'), new AudioTrackSelectBox()), + new SettingsPanelItem(i18n.getLocalizer('settings.audio.quality'), new AudioQualitySelectBox()), + ]; + + mainSettingsPanelPage = new SettingsPanelPage({ + components, + }); + + let settingsPanel = new SettingsPanel({ + components: [mainSettingsPanelPage], + hidden: true, + }); + + let subtitleSettingsPanelPage = new SubtitleSettingsPanelPage({ + settingsPanel: settingsPanel, + overlay: subtitleOverlay, + }); + + const subtitleSelectBox = new SubtitleSelectBox(); + + let subtitleSettingsOpenButton = new SettingsPanelPageOpenButton({ + targetPage: subtitleSettingsPanelPage, + container: settingsPanel, + ariaLabel: i18n.getLocalizer('settings.subtitles'), + text: i18n.getLocalizer('open'), + }); + + mainSettingsPanelPage.addComponent( + new SettingsPanelItem( + new SubtitleSettingsLabel({ + text: i18n.getLocalizer('settings.subtitles'), + opener: subtitleSettingsOpenButton, + }), + subtitleSelectBox, + { + role: 'menubar', + }, + ), + ); + + settingsPanel.addComponent(subtitleSettingsPanelPage); + + let controlBar = new ControlBar({ + components: [ + settingsPanel, + new Container({ + components: [ + new PlaybackTimeLabel({ + timeLabelMode: PlaybackTimeLabelMode.CurrentTime, + hideInLivePlayback: true, + }), + new SeekBar({ label: new SeekBarLabel() }), + new PlaybackTimeLabel({ + timeLabelMode: PlaybackTimeLabelMode.TotalTime, + cssClasses: ['text-right'], + }), + ], + cssClasses: ['controlbar-top'], + }), + new Container({ + components: [ + new PlaybackToggleButton(), + new VolumeToggleButton(), + new VolumeSlider(), + new Spacer(), + new PictureInPictureToggleButton(), + new AirPlayToggleButton(), + new CastToggleButton(), + new VRToggleButton(), + new SettingsToggleButton({ settingsPanel: settingsPanel }), + new FullscreenToggleButton(), + ], + cssClasses: ['controlbar-bottom'], + }), + ], + }); + + return new UIContainer({ + components: [ + subtitleOverlay, + new BufferingOverlay(), + new PlaybackToggleOverlay(), + new CastStatusOverlay(), + controlBar, + new TitleBar(), + new RecommendationOverlay(), + new Watermark(), + new ErrorMessageOverlay(), + ], + hideDelay: 2000, + hidePlayerStateExceptions: [ + PlayerUtils.PlayerState.Prepared, + PlayerUtils.PlayerState.Paused, + PlayerUtils.PlayerState.Finished, + ], + cssClasses: ['ui-skin-modern', 'ui-skin-super-modern'], + }); } export function buildSuperModernUI(player: PlayerAPI, config: UIConfig = {}): UIManager { @@ -584,7 +687,7 @@ export namespace UIFactory { }, }, { - ui: modernUI(config), + ui: superModernUI(), condition: (context: UIConditionContext) => { return !context.isAd && !context.adRequiresUi; }, From 5320f5efa896b7f1e31d7d90ec4d1fd22e585b19 Mon Sep 17 00:00:00 2001 From: David Steinacher Date: Tue, 3 Dec 2024 12:12:27 -0700 Subject: [PATCH 02/10] enable the modern settings panel in browsers --- .../components/_settingspanel.scss | 2 +- src/ts/uifactory.ts | 63 +++++++++---------- 2 files changed, 31 insertions(+), 34 deletions(-) diff --git a/src/scss/skin-super-modern/components/_settingspanel.scss b/src/scss/skin-super-modern/components/_settingspanel.scss index 6a6a6a1c2..a4c2f2dea 100644 --- a/src/scss/skin-super-modern/components/_settingspanel.scss +++ b/src/scss/skin-super-modern/components/_settingspanel.scss @@ -18,7 +18,7 @@ bottom: 3.5em; height: fit-content; max-height: 60%; - max-width: 140px; + max-width: 200px; min-width: fit-content; overflow: hidden; overflow-y: auto; diff --git a/src/ts/uifactory.ts b/src/ts/uifactory.ts index 64847a819..9460f0b6e 100644 --- a/src/ts/uifactory.ts +++ b/src/ts/uifactory.ts @@ -469,7 +469,7 @@ export namespace UIFactory { let settingsPanel = new ModernSettingsPanel({ components: [mainSettingsPanelPage], hidden: true, - pageTransitionAnimation: false, + pageTransitionAnimation: true, hideDelay: -1, }); @@ -553,53 +553,49 @@ export namespace UIFactory { let mainSettingsPanelPage: SettingsPanelPage; const components: Container[] = [ - new SettingsPanelItem(i18n.getLocalizer('settings.video.quality'), new VideoQualitySelectBox()), - new SettingsPanelItem(i18n.getLocalizer('speed'), new PlaybackSpeedSelectBox()), - new SettingsPanelItem(i18n.getLocalizer('settings.audio.track'), new AudioTrackSelectBox()), - new SettingsPanelItem(i18n.getLocalizer('settings.audio.quality'), new AudioQualitySelectBox()), + new ModernSettingsPanelItem(i18n.getLocalizer('settings.video.quality'), new VideoQualitySelectBox()), + new ModernSettingsPanelItem(i18n.getLocalizer('speed'), new PlaybackSpeedSelectBox()), + new ModernSettingsPanelItem(i18n.getLocalizer('settings.audio.track'), new AudioTrackSelectBox()), + new ModernSettingsPanelItem(i18n.getLocalizer('settings.audio.quality'), new AudioQualitySelectBox()), ]; - mainSettingsPanelPage = new SettingsPanelPage({ + mainSettingsPanelPage = new ModernSettingsPanelPage({ components, }); - let settingsPanel = new SettingsPanel({ + let settingsPanel = new ModernSettingsPanel({ components: [mainSettingsPanelPage], hidden: true, + pageTransitionAnimation: true, }); - let subtitleSettingsPanelPage = new SubtitleSettingsPanelPage({ - settingsPanel: settingsPanel, - overlay: subtitleOverlay, - }); + // let subtitleSettingsPanelPage = new SubtitleSettingsPanelPage({ + // settingsPanel: settingsPanel, + // overlay: subtitleOverlay, + // }); + // + // let subtitleSettingsOpenButton = new SettingsPanelPageOpenButton({ + // targetPage: subtitleSettingsPanelPage, + // container: settingsPanel, + // ariaLabel: i18n.getLocalizer('settings.subtitles'), + // text: i18n.getLocalizer('open'), + // }); const subtitleSelectBox = new SubtitleSelectBox(); - - let subtitleSettingsOpenButton = new SettingsPanelPageOpenButton({ - targetPage: subtitleSettingsPanelPage, - container: settingsPanel, - ariaLabel: i18n.getLocalizer('settings.subtitles'), - text: i18n.getLocalizer('open'), - }); - - mainSettingsPanelPage.addComponent( - new SettingsPanelItem( - new SubtitleSettingsLabel({ - text: i18n.getLocalizer('settings.subtitles'), - opener: subtitleSettingsOpenButton, - }), - subtitleSelectBox, - { - role: 'menubar', - }, - ), + let subtitleSelectItem = new ModernSettingsPanelItem( + new Label({ text: i18n.getLocalizer('settings.subtitles') } as LabelConfig), + subtitleSelectBox, + null, + { + role: 'menubar', + }, ); + mainSettingsPanelPage.addComponent(subtitleSelectItem); - settingsPanel.addComponent(subtitleSettingsPanelPage); + // settingsPanel.addComponent(subtitleSettingsPanelPage); let controlBar = new ControlBar({ components: [ - settingsPanel, new Container({ components: [ new PlaybackTimeLabel({ @@ -642,6 +638,7 @@ export namespace UIFactory { new TitleBar(), new RecommendationOverlay(), new Watermark(), + settingsPanel, new ErrorMessageOverlay(), ], hideDelay: 2000, @@ -650,7 +647,7 @@ export namespace UIFactory { PlayerUtils.PlayerState.Paused, PlayerUtils.PlayerState.Finished, ], - cssClasses: ['ui-skin-modern', 'ui-skin-super-modern'], + cssClasses: ['ui-skin-super-modern'], }); } From 6579335b57e857e4027711165d07114b3b0bfc89 Mon Sep 17 00:00:00 2001 From: David Steinacher Date: Tue, 3 Dec 2024 16:02:01 -0700 Subject: [PATCH 03/10] enable new seekbar rendering --- src/ts/uifactory.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ts/uifactory.ts b/src/ts/uifactory.ts index 9460f0b6e..db1845604 100644 --- a/src/ts/uifactory.ts +++ b/src/ts/uifactory.ts @@ -602,7 +602,7 @@ export namespace UIFactory { timeLabelMode: PlaybackTimeLabelMode.CurrentTime, hideInLivePlayback: true, }), - new SeekBar({ label: new SeekBarLabel() }), + new SeekBar({ label: new SeekBarLabel(), renderSeekBarPlaybackPositionMarkerInOuterSeekBar: true }), new PlaybackTimeLabel({ timeLabelMode: PlaybackTimeLabelMode.TotalTime, cssClasses: ['text-right'], @@ -614,7 +614,7 @@ export namespace UIFactory { components: [ new PlaybackToggleButton(), new VolumeToggleButton(), - new VolumeSlider(), + new VolumeSlider({ renderSeekBarPlaybackPositionMarkerInOuterSeekBar: true }), new Spacer(), new PictureInPictureToggleButton(), new AirPlayToggleButton(), From 9165ec215d5351cbba981d28b50861abae920c51 Mon Sep 17 00:00:00 2001 From: David Steinacher Date: Tue, 3 Dec 2024 17:57:15 -0700 Subject: [PATCH 04/10] improve various margins, paddings and sizes to improve UX --- src/scss/skin-super-modern/components/_button.scss | 2 +- .../skin-super-modern/components/_controlbar.scss | 10 +++++++--- .../components/_playbacktimelabel.scss | 6 +++--- src/scss/skin-super-modern/components/_seekbar.scss | 12 ++++++------ .../skin-super-modern/components/_seekbarlabel.scss | 4 ++-- .../skin-super-modern/components/_settingspanel.scss | 2 +- .../components/_settingspanelpage.scss | 8 ++++---- src/scss/skin-super-modern/components/_titlebar.scss | 6 +++--- .../skin-super-modern/components/_volumeslider.scss | 12 ++++++------ 9 files changed, 33 insertions(+), 29 deletions(-) diff --git a/src/scss/skin-super-modern/components/_button.scss b/src/scss/skin-super-modern/components/_button.scss index 69aa6276f..d56865c8a 100644 --- a/src/scss/skin-super-modern/components/_button.scss +++ b/src/scss/skin-super-modern/components/_button.scss @@ -7,7 +7,7 @@ background-origin: content-box; background-position: center; background-repeat: no-repeat; - background-size: 1em; + background-size: 1.2em; border: 0; box-sizing: content-box; cursor: pointer; diff --git a/src/scss/skin-super-modern/components/_controlbar.scss b/src/scss/skin-super-modern/components/_controlbar.scss index 0002a1e0e..517d34da8 100644 --- a/src/scss/skin-super-modern/components/_controlbar.scss +++ b/src/scss/skin-super-modern/components/_controlbar.scss @@ -10,19 +10,23 @@ background: linear-gradient(to bottom, $color-transparent, $color-background-bars); box-sizing: border-box; line-height: 1em; - padding: 0 .75em; + padding: 1em 1em .5em; .#{$prefix}-controlbar-top, .#{$prefix}-controlbar-bottom { > .#{$prefix}-container-wrapper { display: flex; - margin: .25em 0; + margin: .5em 0; } } .#{$prefix}-controlbar-top { .#{$prefix}-ui-label { - font-size: .6em; + font-size: .9em; + } + + > .#{$prefix}-container-wrapper > * { + margin: 0 .5em; } } diff --git a/src/scss/skin-super-modern/components/_playbacktimelabel.scss b/src/scss/skin-super-modern/components/_playbacktimelabel.scss index ee784c51d..3cffc7393 100644 --- a/src/scss/skin-super-modern/components/_playbacktimelabel.scss +++ b/src/scss/skin-super-modern/components/_playbacktimelabel.scss @@ -3,9 +3,9 @@ .#{$prefix}-ui-playbacktimelabel { @extend %ui-label; - font-size: .8em; - font-weight: bold; - margin: 0 .5em; + //font-size: .8em; + font-weight: 500; + //margin: 0 .5em; text-transform: uppercase; &.#{$prefix}-ui-playbacktimelabel-live { diff --git a/src/scss/skin-super-modern/components/_seekbar.scss b/src/scss/skin-super-modern/components/_seekbar.scss index ca7f316c8..3e18a2311 100644 --- a/src/scss/skin-super-modern/components/_seekbar.scss +++ b/src/scss/skin-super-modern/components/_seekbar.scss @@ -1,7 +1,7 @@ @import '../variables'; @import '../mixins'; -$seekbar-height: .3em; +$seekbar-height: .3125em; // sass-lint:disable no-vendor-prefixes %bar { @@ -25,19 +25,19 @@ $seekbar-height: .3em; @include focusable; align-items: center; - display: flex; + font-size: 1em; + //display: flex; height: 1em; - justify-content: center; - margin: 0 .5em; + //justify-content: center; + //margin: 0 .5em; position: relative; width: 100%; $bar-inset: auto; - .#{$prefix}-seekbar-playbackposition-marker { @extend %bar; - @include seekbar-position-marker($seekbar-height * 2.2); + @include seekbar-position-marker($seekbar-height * 3); background-color: $color-highlight; border-radius: 50%; box-shadow: 0 0 3px 0 transparentize($color: #000, $amount: .75); diff --git a/src/scss/skin-super-modern/components/_seekbarlabel.scss b/src/scss/skin-super-modern/components/_seekbarlabel.scss index 8788c2068..cc021f31c 100644 --- a/src/scss/skin-super-modern/components/_seekbarlabel.scss +++ b/src/scss/skin-super-modern/components/_seekbarlabel.scss @@ -46,13 +46,13 @@ .#{$prefix}-seekbar-label-time { display: block; - font-weight: bold; + font-weight: 500; line-height: .8em; } .#{$prefix}-seekbar-label-title { display: block; - font-weight: bold; + font-weight: 500; margin-bottom: .3em; white-space: normal; } diff --git a/src/scss/skin-super-modern/components/_settingspanel.scss b/src/scss/skin-super-modern/components/_settingspanel.scss index a4c2f2dea..97eea3d40 100644 --- a/src/scss/skin-super-modern/components/_settingspanel.scss +++ b/src/scss/skin-super-modern/components/_settingspanel.scss @@ -18,7 +18,7 @@ bottom: 3.5em; height: fit-content; max-height: 60%; - max-width: 200px; + //max-width: 200px; min-width: fit-content; overflow: hidden; overflow-y: auto; diff --git a/src/scss/skin-super-modern/components/_settingspanelpage.scss b/src/scss/skin-super-modern/components/_settingspanelpage.scss index 61ae0274d..d6af522f8 100644 --- a/src/scss/skin-super-modern/components/_settingspanelpage.scss +++ b/src/scss/skin-super-modern/components/_settingspanelpage.scss @@ -11,8 +11,8 @@ .#{$prefix}-container-wrapper > * { &.#{$prefix}-ui-label { display: inline-block; - font-size: .6em; - font-weight: 600; + font-size: .8em; + font-weight: 500; margin: 0; text-align: justify; width: 45%; @@ -74,8 +74,8 @@ } .#{$prefix}-ui-settings-panel-item { - height: 20px; - padding: 0 .4em; + //height: 20px; + padding: .5em .7em; white-space: nowrap; &:hover { diff --git a/src/scss/skin-super-modern/components/_titlebar.scss b/src/scss/skin-super-modern/components/_titlebar.scss index 4415be804..2aa77f2bb 100644 --- a/src/scss/skin-super-modern/components/_titlebar.scss +++ b/src/scss/skin-super-modern/components/_titlebar.scss @@ -9,11 +9,11 @@ background: linear-gradient(to top, $color-transparent, $color-background-bars); box-sizing: border-box; - padding: 0 .75em; + padding: .5em 1em 1em; pointer-events: none; > .#{$prefix}-container-wrapper { - padding: .75em 0; + padding: .5em; pointer-events: none; .#{$prefix}-label-metadata { @@ -24,7 +24,7 @@ cursor: default; display: block; font-size: 1.2em; - font-weight: bold; + font-weight: 500; text-shadow: 0 0 5px $color-black; white-space: normal; } diff --git a/src/scss/skin-super-modern/components/_volumeslider.scss b/src/scss/skin-super-modern/components/_volumeslider.scss index 877ed9db8..356b8f274 100644 --- a/src/scss/skin-super-modern/components/_volumeslider.scss +++ b/src/scss/skin-super-modern/components/_volumeslider.scss @@ -5,13 +5,13 @@ .#{$prefix}-ui-volumeslider { @extend %ui-seekbar; - .#{$prefix}-seekbar { - .#{$prefix}-seekbar-playbackposition-marker { - @include seekbar-position-marker($seekbar-height * 3 - .25em); - background-color: $color-highlight; - border: 0; - } + .#{$prefix}-seekbar-playbackposition-marker { + @include seekbar-position-marker($seekbar-height * 3 - .25em); + background-color: $color-highlight; + border: 0; + } + .#{$prefix}-seekbar { .#{$prefix}-seekbar-bufferlevel { display: none; } From d3e4e54b8cbdc3a3855766526db58aef26b4dbe2 Mon Sep 17 00:00:00 2001 From: David Steinacher Date: Tue, 3 Dec 2024 17:58:13 -0700 Subject: [PATCH 05/10] revert buffer size bar back to white --- src/scss/skin-super-modern/components/_seekbar.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scss/skin-super-modern/components/_seekbar.scss b/src/scss/skin-super-modern/components/_seekbar.scss index 3e18a2311..7973f1ffc 100644 --- a/src/scss/skin-super-modern/components/_seekbar.scss +++ b/src/scss/skin-super-modern/components/_seekbar.scss @@ -67,7 +67,7 @@ $seekbar-height: .3125em; .#{$prefix}-seekbar-bufferlevel { @extend %bar; - background-color: transparentize($color-secondary, .3); + background-color: $color-primary; margin: $bar-inset 0; transition: .3s linear, .3s linear; transition-property: transform; From 3777d5126cb506e82f6bd8af05b457710c4ff385 Mon Sep 17 00:00:00 2001 From: David Steinacher Date: Wed, 4 Dec 2024 10:40:20 -0700 Subject: [PATCH 06/10] use new fullscreen icon --- assets/skin-super-modern/images/fullscreen.svg | 7 +++++-- assets/skin-super-modern/images/fullscreenX.svg | 7 +++++-- assets/skin-super-modern/images/fullscreenXsmall.svg | 6 ------ assets/skin-super-modern/images/fullscreensmall.svg | 6 ------ src/scss/skin-super-modern/_skin-modern-smallscreen.scss | 8 -------- 5 files changed, 10 insertions(+), 24 deletions(-) delete mode 100644 assets/skin-super-modern/images/fullscreenXsmall.svg delete mode 100644 assets/skin-super-modern/images/fullscreensmall.svg diff --git a/assets/skin-super-modern/images/fullscreen.svg b/assets/skin-super-modern/images/fullscreen.svg index 11b92c81b..b1c38d50b 100644 --- a/assets/skin-super-modern/images/fullscreen.svg +++ b/assets/skin-super-modern/images/fullscreen.svg @@ -1,3 +1,6 @@ - - + + + + + diff --git a/assets/skin-super-modern/images/fullscreenX.svg b/assets/skin-super-modern/images/fullscreenX.svg index e129938f6..409a18c08 100644 --- a/assets/skin-super-modern/images/fullscreenX.svg +++ b/assets/skin-super-modern/images/fullscreenX.svg @@ -1,3 +1,6 @@ - - + + + + + diff --git a/assets/skin-super-modern/images/fullscreenXsmall.svg b/assets/skin-super-modern/images/fullscreenXsmall.svg deleted file mode 100644 index 409a18c08..000000000 --- a/assets/skin-super-modern/images/fullscreenXsmall.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/assets/skin-super-modern/images/fullscreensmall.svg b/assets/skin-super-modern/images/fullscreensmall.svg deleted file mode 100644 index b1c38d50b..000000000 --- a/assets/skin-super-modern/images/fullscreensmall.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/src/scss/skin-super-modern/_skin-modern-smallscreen.scss b/src/scss/skin-super-modern/_skin-modern-smallscreen.scss index 173e56069..f8f9d6d6a 100644 --- a/src/scss/skin-super-modern/_skin-modern-smallscreen.scss +++ b/src/scss/skin-super-modern/_skin-modern-smallscreen.scss @@ -3,14 +3,6 @@ &.#{$prefix}-ui-skin-modern-smallscreen { - .#{$prefix}-ui-fullscreentogglebutton { - background-image: url('../../assets/skin-super-modern/images/fullscreensmall.svg'); - - &.#{$prefix}-on { - background-image: url('../../assets/skin-super-modern/images/fullscreenXsmall.svg'); - } - } - // Do not display watermark in mobile view .#{$prefix}-ui-watermark { display: none; From e14eb24f1eea9f8e64d7a112d7c68bcb86d83c75 Mon Sep 17 00:00:00 2001 From: David Steinacher Date: Wed, 4 Dec 2024 10:46:36 -0700 Subject: [PATCH 07/10] revert back to our current buffering overlay styling --- assets/skin-super-modern/images/loader.svg | 19 +++- .../components/_bufferingoverlay.scss | 2 +- .../components/_loadingicon.scss | 28 ----- src/ts/components/loadingicon.ts | 104 ------------------ src/ts/components/touchcontroloverlay.ts | 26 ----- src/ts/uifactory.ts | 6 +- 6 files changed, 19 insertions(+), 166 deletions(-) delete mode 100644 src/scss/skin-super-modern/components/_loadingicon.scss delete mode 100644 src/ts/components/loadingicon.ts diff --git a/assets/skin-super-modern/images/loader.svg b/assets/skin-super-modern/images/loader.svg index 697a3b5cb..0c60ca01e 100644 --- a/assets/skin-super-modern/images/loader.svg +++ b/assets/skin-super-modern/images/loader.svg @@ -1,3 +1,18 @@ - - + + + + + + + + + + + + + + diff --git a/src/scss/skin-super-modern/components/_bufferingoverlay.scss b/src/scss/skin-super-modern/components/_bufferingoverlay.scss index 9c54fa799..0b38e6749 100644 --- a/src/scss/skin-super-modern/components/_bufferingoverlay.scss +++ b/src/scss/skin-super-modern/components/_bufferingoverlay.scss @@ -64,7 +64,7 @@ } animation: #{$prefix}-fancy $buffering-animation-duration ease-in infinite; - background: url('../../assets/skin-modern/images/loader.svg') no-repeat center; + background: url('../../assets/skin-super-modern/images/loader.svg') no-repeat center; display: inline-block; height: 2em; margin: .2em; diff --git a/src/scss/skin-super-modern/components/_loadingicon.scss b/src/scss/skin-super-modern/components/_loadingicon.scss deleted file mode 100644 index 4e45b8f58..000000000 --- a/src/scss/skin-super-modern/components/_loadingicon.scss +++ /dev/null @@ -1,28 +0,0 @@ -@import '../variables'; -@import '../mixins'; - -@keyframes #{$prefix}-rotating { - from { - transform: rotate(0deg); - } - - to { - transform: rotate(360deg); - } -} - -.#{$prefix}-ui-loading-icon { - @extend %ui-container; - - background: url('../../assets/skin-super-modern/images/loader.svg') center no-repeat; - cursor: default; - display: none; - height: 2.5em; - outline: none; - width: 2.5em; - - &.#{$prefix}-loading { - animation: #{$prefix}-rotating 3s linear infinite; - display: block; - } -} diff --git a/src/ts/components/loadingicon.ts b/src/ts/components/loadingicon.ts deleted file mode 100644 index 2e2cbcffa..000000000 --- a/src/ts/components/loadingicon.ts +++ /dev/null @@ -1,104 +0,0 @@ -import { PlayerAPI } from 'bitmovin-player'; -import { UIInstanceManager } from '../uimanager'; -import { Container, ContainerConfig } from './container'; -import { Timeout } from '../timeout'; -import { EventDispatcher, NoArgs, Event } from '../eventdispatcher'; - -export interface LoadingIconConfig extends ContainerConfig { - /** - * Delay in milliseconds after which the buffering overlay will be displayed. Useful to bypass short stalls without - * displaying the overlay. Set to 0 to display the overlay instantly. - * Default: 1000ms (1 second) - */ - showDelayMs?: number; -} - -export class LoadingIcon extends Container { - private isLoading: boolean = false; - - private loadingEvents = { - loadingStartEvent: new EventDispatcher(), - loadingEndEvent: new EventDispatcher(), - }; - - constructor(config: LoadingIconConfig = {}) { - super(config); - - this.config = this.mergeConfig(config, { - cssClass: 'ui-loading-icon', - role: 'icon', - showDelayMs: 1000, - }, this.config); - } - - configure(player: PlayerAPI, uimanager: UIInstanceManager): void { - super.configure(player, uimanager); - - let config = this.getConfig(); - - let overlayShowTimeout = new Timeout(config.showDelayMs, () => { - this.startLoader(); - }); - - let showOverlay = () => { - overlayShowTimeout.start(); - }; - - let hideOverlay = () => { - overlayShowTimeout.clear(); - this.stopLoader(); - }; - - player.on(player.exports.PlayerEvent.StallStarted, showOverlay); - player.on(player.exports.PlayerEvent.StallEnded, hideOverlay); - player.on(player.exports.PlayerEvent.Play, showOverlay); - player.on(player.exports.PlayerEvent.Playing, hideOverlay); - player.on(player.exports.PlayerEvent.Paused, hideOverlay); - player.on(player.exports.PlayerEvent.Seek, showOverlay); - player.on(player.exports.PlayerEvent.Seeked, hideOverlay); - player.on(player.exports.PlayerEvent.TimeShift, showOverlay); - player.on(player.exports.PlayerEvent.TimeShifted, hideOverlay); - player.on(player.exports.PlayerEvent.SourceUnloaded, hideOverlay); - - // Show overlay if player is already stalled at init - if (player.isStalled()) { - this.startLoader(); - } - } - - private startLoader(): void { - if (!this.isLoading) { - this.isLoading = true; - this.onLoadingStartEvent(); - this.getDomElement().addClass(this.prefixCss('loading')); - } - } - - private stopLoader(): void { - if (this.isLoading) { - this.isLoading = false; - this.onLoadingEndEvent(); - this.getDomElement().removeClass(this.prefixCss('loading')); - } - } - - public onLoadingStartEvent(): void { - this.loadingEvents.loadingStartEvent.dispatch(this); - } - - public onLoadingEndEvent(): void { - this.loadingEvents.loadingEndEvent.dispatch(this); - } - - public isSpinning(): boolean { - return this.isLoading; - } - - get loadingStartEvent(): Event { - return this.loadingEvents.loadingStartEvent.getEvent(); - } - - get loadingEndEvent(): Event { - return this.loadingEvents.loadingEndEvent.getEvent(); - } -} \ No newline at end of file diff --git a/src/ts/components/touchcontroloverlay.ts b/src/ts/components/touchcontroloverlay.ts index efa09b0bb..1c74f403a 100644 --- a/src/ts/components/touchcontroloverlay.ts +++ b/src/ts/components/touchcontroloverlay.ts @@ -7,7 +7,6 @@ import { Timeout } from '../timeout'; import { HTMLElementWithComponent } from '../dom'; import { Label, LabelConfig } from './label'; import { i18n } from '../localization/i18n'; -import { LoadingIcon } from './loadingicon'; export interface TouchControlOverlayConfig extends ContainerConfig { /** @@ -60,7 +59,6 @@ export class TouchControlOverlay extends Container { }; private playbackToggleButton: SmallCenteredPlaybackToggleButton; - private loadingIcon: LoadingIcon; private seekForwardLabel: Label; private seekBackwardLabel: Label; @@ -77,8 +75,6 @@ export class TouchControlOverlay extends Container { enterFullscreenOnInitialPlayback: Boolean(config.enterFullscreenOnInitialPlayback), }); - this.loadingIcon = new LoadingIcon(); - this.seekForwardLabel = new Label({text: '', for: this.getConfig().id, cssClass: 'seek-forward-label', hidden: true}); this.seekBackwardLabel = new Label({text: '', for: this.getConfig().id, cssClass: 'seek-backward-label', hidden: true}); @@ -94,27 +90,6 @@ export class TouchControlOverlay extends Container { configure(player: PlayerAPI, uimanager: UIInstanceManager): void { super.configure(player, uimanager); - this.loadingIcon.configure(player, uimanager); - - let showLoadingIcon = () => { - this.removeComponent(this.playbackToggleButton); - this.addComponent(this.loadingIcon); - this.updateComponents(); - }; - - let hideLoadingIcon = () => { - this.removeComponent(this.loadingIcon); - this.addComponent(this.playbackToggleButton); - this.updateComponents(); - }; - - if (this.loadingIcon.isSpinning()) { - showLoadingIcon(); - } - - this.loadingIcon.loadingStartEvent.subscribe(showLoadingIcon); - this.loadingIcon.loadingEndEvent.subscribe(hideLoadingIcon); - let playerSeekTime = 0; let startSeekTime = 0; @@ -132,7 +107,6 @@ export class TouchControlOverlay extends Container { this.playbackToggleButton.show(); }); - this.touchControlEvents.onSeekBackward.subscribe(() => { playerSeekTime -= this.config.seekTime; player.seek(playerSeekTime); diff --git a/src/ts/uifactory.ts b/src/ts/uifactory.ts index db1845604..f05b75ef1 100644 --- a/src/ts/uifactory.ts +++ b/src/ts/uifactory.ts @@ -517,12 +517,9 @@ export namespace UIFactory { return new UIContainer({ components: [ subtitleOverlay, - + new BufferingOverlay(), new CastStatusOverlay(), - // TODO: make an overlay for the quickseek buttons/double tab new TouchControlOverlay(), - // TODO: make a new buffer overlay - // new BufferingOverlay(), new RecommendationOverlay(), controlBar, new TitleBar({ @@ -531,7 +528,6 @@ export namespace UIFactory { new CastToggleButton(), new AirPlayToggleButton(), new VRToggleButton(), - // TODO: make a Share button ], }), settingsPanel, From 58d2ab2406b9e0b42878fb2e5207365a4126a37d Mon Sep 17 00:00:00 2001 From: David Steinacher Date: Wed, 4 Dec 2024 10:47:11 -0700 Subject: [PATCH 08/10] add an action to show the buffering overlay to the playground --- src/html/index.html | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/html/index.html b/src/html/index.html index cf9b18e7c..f3a898783 100644 --- a/src/html/index.html +++ b/src/html/index.html @@ -594,6 +594,11 @@

.animate({ height: maxHeight }, 1000) .animate({ height: initialHeight }, 1000); }, + 'Show Buffering overlay': function() { + var player = uiManager.currentUi.playerWrapper.getPlayer(); + + player.fireEventInUI(bitmovin.player.PlayerEvent.StallStarted, {}); + } }; $.each(actions, function(title, handler) { $('#actions').append($('').click(function() {printResult(handler(), title);})).append(' '); From 2987add7c459aec335714a18f9b9c5f2ad65c8fe Mon Sep 17 00:00:00 2001 From: David Steinacher Date: Wed, 4 Dec 2024 11:36:11 -0700 Subject: [PATCH 09/10] remove leftover import --- src/scss/skin-super-modern/_skin.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/scss/skin-super-modern/_skin.scss b/src/scss/skin-super-modern/_skin.scss index f00982c68..cd706b96f 100644 --- a/src/scss/skin-super-modern/_skin.scss +++ b/src/scss/skin-super-modern/_skin.scss @@ -49,7 +49,6 @@ @import 'components/subtitlesettingspaneltogglebutton'; @import 'components/touch-control-overlay'; @import 'components/smallcenteredplaybacktogglebutton'; - @import 'components/loadingicon'; @import 'skin-ads'; @import 'skin-cast-receiver'; @import 'skin-modern-smallscreen'; From 8b17739dc59b132f6cd42601c027c2dca6569803 Mon Sep 17 00:00:00 2001 From: David Steinacher Date: Mon, 9 Dec 2024 14:24:06 -0700 Subject: [PATCH 10/10] remove commented out styles --- src/scss/skin-super-modern/components/_playbacktimelabel.scss | 2 -- src/scss/skin-super-modern/components/_seekbar.scss | 3 --- src/scss/skin-super-modern/components/_settingspanel.scss | 1 - src/scss/skin-super-modern/components/_settingspanelpage.scss | 1 - 4 files changed, 7 deletions(-) diff --git a/src/scss/skin-super-modern/components/_playbacktimelabel.scss b/src/scss/skin-super-modern/components/_playbacktimelabel.scss index 3cffc7393..d60c65776 100644 --- a/src/scss/skin-super-modern/components/_playbacktimelabel.scss +++ b/src/scss/skin-super-modern/components/_playbacktimelabel.scss @@ -3,9 +3,7 @@ .#{$prefix}-ui-playbacktimelabel { @extend %ui-label; - //font-size: .8em; font-weight: 500; - //margin: 0 .5em; text-transform: uppercase; &.#{$prefix}-ui-playbacktimelabel-live { diff --git a/src/scss/skin-super-modern/components/_seekbar.scss b/src/scss/skin-super-modern/components/_seekbar.scss index 7973f1ffc..e2d7fe1b3 100644 --- a/src/scss/skin-super-modern/components/_seekbar.scss +++ b/src/scss/skin-super-modern/components/_seekbar.scss @@ -26,10 +26,7 @@ $seekbar-height: .3125em; align-items: center; font-size: 1em; - //display: flex; height: 1em; - //justify-content: center; - //margin: 0 .5em; position: relative; width: 100%; diff --git a/src/scss/skin-super-modern/components/_settingspanel.scss b/src/scss/skin-super-modern/components/_settingspanel.scss index 97eea3d40..b59a2be1c 100644 --- a/src/scss/skin-super-modern/components/_settingspanel.scss +++ b/src/scss/skin-super-modern/components/_settingspanel.scss @@ -18,7 +18,6 @@ bottom: 3.5em; height: fit-content; max-height: 60%; - //max-width: 200px; min-width: fit-content; overflow: hidden; overflow-y: auto; diff --git a/src/scss/skin-super-modern/components/_settingspanelpage.scss b/src/scss/skin-super-modern/components/_settingspanelpage.scss index d6af522f8..bcb5e1e34 100644 --- a/src/scss/skin-super-modern/components/_settingspanelpage.scss +++ b/src/scss/skin-super-modern/components/_settingspanelpage.scss @@ -74,7 +74,6 @@ } .#{$prefix}-ui-settings-panel-item { - //height: 20px; padding: .5em .7em; white-space: nowrap;