Merge branch 'feature/super-modern-subtitle-settings-panel' of github…

….com:bitmovin/bitmovin-player-ui into feature/super-modern-subtitle-settings-panel

src/html/index.html

@@ -282,7 +282,12 @@ <h4 class="card-title">
     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');

src/scss/skin-super-modern/_skin.scss

@@ -48,7 +48,7 @@
   @import 'components/spacer';
   @import 'components/subtitlesettings/subtitlesettings';
   @import 'components/subtitlesettingspaneltogglebutton';
-  @import 'components/touch-control-overlay';
+  @import 'components/touchcontroloverlay';
   @import 'components/smallcenteredplaybacktogglebutton';
   @import 'skin-ads';
   @import 'skin-cast-receiver';

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);

src/scss/skin-super-modern/components/_touch-control-overlay.scss → 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%;
     }
   }
 

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;
@@ -249,10 +242,17 @@ export class SeekBar extends Component<SeekBarConfig> {
 
     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;
@@ -294,7 +294,7 @@ export class SeekBar extends Component<SeekBarConfig> {
         // 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()) {
@@ -330,12 +330,12 @@ export class SeekBar extends Component<SeekBarConfig> {
       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 () {
@@ -668,6 +668,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 +707,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,16 +749,12 @@ export class SeekBar extends Component<SeekBarConfig> {
       this.onSeekedEvent(targetPercentage);
     };
 
-    // TODO: the problem is that the SeekbarLabel is also inside the seekbarContainer and therefore reacts to the
-    // TODO: mouse inputs.
-    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)
@@ -778,7 +776,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) {
@@ -796,7 +794,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);
@@ -812,10 +810,6 @@ export class SeekBar extends Component<SeekBarConfig> {
       seekBarContainer.append(this.label.getDomElement());
     }
 
-    if (this.config.renderSeekBarPlaybackPositionMarkerInOuterSeekBar) {
-      seekBarContainer.append(seekBarPlaybackPositionMarker);
-    }
-
     return seekBarContainer;
   }
 
@@ -1109,7 +1103,7 @@ export class SeekBar extends Component<SeekBarConfig> {
     this.refreshPlaybackPosition();
   }
 
- /**
+  /**
    * Checks if TouchEvent is supported.
    * @returns {boolean} true if TouchEvent not undefined, else false
    */

src/ts/components/touchcontroloverlay.ts

@@ -79,11 +79,11 @@ export class TouchControlOverlay extends Container<TouchControlOverlayConfig> {
     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);
   }
 

src/ts/uifactory.ts

@@ -518,7 +518,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'],
@@ -654,7 +654,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'],
@@ -666,7 +666,7 @@ export namespace UIFactory {
           components: [
             new PlaybackToggleButton(),
             new VolumeToggleButton(),
-            new VolumeSlider({ renderSeekBarPlaybackPositionMarkerInOuterSeekBar: true }),
+            new VolumeSlider(),
             new Spacer(),
             new PictureInPictureToggleButton(),
             new AirPlayToggleButton(),