From 70b519aaeada361a1de9fa2b6b041edb3dccd902 Mon Sep 17 00:00:00 2001 From: David Steinacher Date: Tue, 10 Dec 2024 09:24:09 -0700 Subject: [PATCH 1/5] 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/5] 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/5] 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/5] 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/5] 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); }