From b7df070a1748f3e57e3ba4d76f3275880fa9e065 Mon Sep 17 00:00:00 2001 From: David Steinacher Date: Tue, 10 Dec 2024 13:30:54 -0700 Subject: [PATCH 1/3] 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 2/3] 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 3/3] 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 */