fix wrong mouse listener element in seekbar

bitmovin · Dec 10, 2024 · 7db3bdd · 7db3bdd
1 parent 895ef35
commit 7db3bdd
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 26 deletions.
diff --git a/src/html/index.html b/src/html/index.html
@@ -129,7 +129,7 @@ <h4 class="card-title">
         url: '//bitdash-a.akamaihd.net/content/sintel/sprite/sprite.vtt',
       },
       title: 'Sintel',
-      description: 'A woman, Sintel, is attacked while traveling through a wintry mountainside. After defeating her attacker and taking his spear, she finds refuge in a shaman\'s hut...',
+      // description: 'A woman, Sintel, is attacked while traveling through a wintry mountainside. After defeating her attacker and taking his spear, she finds refuge in a shaman\'s hut...',
       markers: [
         {time: 0, title: 'Intro'},
         {time: 102, title: 'Old Guy', duration: 30},

diff --git 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
@@ -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;
@@ -668,6 +661,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 +700,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,14 +742,12 @@ export class SeekBar extends Component<SeekBarConfig> {
       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<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) {
@@ -794,7 +787,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);
@@ -810,10 +803,6 @@ export class SeekBar extends Component<SeekBarConfig> {
       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
@@ -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(),