bitmovin-player-ui 4.2.0 → 4.3.0

package/src/ts/components/buttons/HugePlaybackToggleButton.ts

@@ -33,7 +33,7 @@ export class HugePlaybackToggleButton extends PlaybackToggleButton {
       this.config.enterFullscreenOnInitialPlayback = uimanager.getConfig().enterFullscreenOnInitialPlayback;
     }
 
-    let togglePlayback = () => {
+    const togglePlayback = () => {
       if (player.isPlaying() || this.isPlayInitiated) {
         player.pause('ui');
       } else {
@@ -41,7 +41,7 @@ export class HugePlaybackToggleButton extends PlaybackToggleButton {
       }
     };
 
-    let toggleFullscreen = () => {
+    const toggleFullscreen = () => {
       if (player.getViewMode() === player.exports.ViewMode.Fullscreen) {
         player.setViewMode(player.exports.ViewMode.Inline);
       } else {
@@ -88,7 +88,7 @@ export class HugePlaybackToggleButton extends PlaybackToggleButton {
         return;
       }
 
-      let now = Date.now();
+      const now = Date.now();
 
       if (now - clickTime < 200) {
         // We have a double click inside the 200ms interval, just toggle fullscreen mode

package/src/ts/components/buttons/PlaybackToggleButton.ts

@@ -54,7 +54,7 @@ export class PlaybackToggleButton extends ToggleButton<PlaybackToggleButtonConfi
     let firstPlay = true;
 
     // Handler to update button state based on player state
-    let playbackStateHandler = () => {
+    const playbackStateHandler = () => {
       // If the UI is currently seeking, playback is temporarily stopped but the buttons should
       // not reflect that and stay as-is (e.g indicate playback while seeking).
       if (isSeeking) {
@@ -113,8 +113,8 @@ export class PlaybackToggleButton extends ToggleButton<PlaybackToggleButtonConfi
     };
 
     // Detect absence of timeshifting on live streams and add tagging class to convert button icons to play/stop
-    let timeShiftDetector = new PlayerUtils.TimeShiftAvailabilityDetector(player);
-    let liveStreamDetector = new PlayerUtils.LiveStreamDetector(player, uimanager);
+    const timeShiftDetector = new PlayerUtils.TimeShiftAvailabilityDetector(player);
+    const liveStreamDetector = new PlayerUtils.LiveStreamDetector(player, uimanager);
 
     timeShiftDetector.onTimeShiftAvailabilityChanged.subscribe(() => updateLiveState());
     liveStreamDetector.onLiveChanged.subscribe(() => updateLiveState());

package/src/ts/components/buttons/QuickSeekButton.ts

@@ -77,7 +77,7 @@ export class QuickSeekButton extends Button<QuickSeekButtonConfig> {
       },
     );
 
-    let liveStreamDetector = new PlayerUtils.LiveStreamDetector(player, uimanager);
+    const liveStreamDetector = new PlayerUtils.LiveStreamDetector(player, uimanager);
     liveStreamDetector.onLiveChanged.subscribe((sender, args: PlayerUtils.LiveStreamDetectorEventArgs) => {
       isLive = args.live;
       switchVisibility(isLive, hasTimeShift);

package/src/ts/components/buttons/SmallCenteredPlaybackToggleButton.ts

@@ -28,7 +28,7 @@ export class SmallCenteredPlaybackToggleButton extends PlaybackToggleButton {
       this.config.enterFullscreenOnInitialPlayback = uimanager.getConfig().enterFullscreenOnInitialPlayback;
     }
 
-    let togglePlayback = () => {
+    const togglePlayback = () => {
       if (player.isPlaying() || this.isPlayInitiated) {
         player.pause('ui');
       } else {

package/src/ts/components/buttons/VRToggleButton.ts

@@ -25,7 +25,7 @@ export class VRToggleButton extends ToggleButton<ToggleButtonConfig> {
   configure(player: PlayerAPI, uimanager: UIInstanceManager): void {
     super.configure(player, uimanager);
 
-    let isVRConfigured = () => {
+    const isVRConfigured = () => {
       // VR availability cannot be checked through getVRStatus() because it is asynchronously populated and not
       // available at UI initialization. As an alternative, we check the VR settings in the config.
       // TODO use getVRStatus() through isVRStereoAvailable() once the player has been rewritten and the status is
@@ -34,12 +34,12 @@ export class VRToggleButton extends ToggleButton<ToggleButtonConfig> {
       return source && Boolean(source.vr);
     };
 
-    let isVRStereoAvailable = () => {
+    const isVRStereoAvailable = () => {
       const source = player.getSource();
       return player.vr && Boolean(source.vr);
     };
 
-    let vrStateHandler = (ev: PlayerEventBase) => {
+    const vrStateHandler = (ev: PlayerEventBase) => {
       if (
         ev.type === player.exports.PlayerEvent.Warning &&
         (ev as WarningEvent).code !== player.exports.WarningCode.VR_RENDERING_ERROR
@@ -60,7 +60,7 @@ export class VRToggleButton extends ToggleButton<ToggleButtonConfig> {
       }
     };
 
-    let vrButtonVisibilityHandler = () => {
+    const vrButtonVisibilityHandler = () => {
       if (isVRConfigured()) {
         this.show();
       } else {

package/src/ts/components/buttons/VolumeControlButton.ts

@@ -61,8 +61,8 @@ export class VolumeControlButton extends Container<VolumeControlButtonConfig> {
   configure(player: PlayerAPI, uimanager: UIInstanceManager): void {
     super.configure(player, uimanager);
 
-    let volumeToggleButton = this.getVolumeToggleButton();
-    let volumeSlider = this.getVolumeSlider();
+    const volumeToggleButton = this.getVolumeToggleButton();
+    const volumeSlider = this.getVolumeSlider();
 
     this.volumeSliderHideTimeout = new Timeout(this.getConfig().hideDelay, () => {
       volumeSlider.hide();

package/src/ts/components/labels/Label.ts

@@ -81,7 +81,7 @@ export class Label<Config extends LabelConfig> extends Component<Config> {
 
   protected toDomElement(): DOM {
     const tagName = this.config.for != null ? 'label' : 'span';
-    let textElement = new DOM(
+    const textElement = new DOM(
       'span',
       {
         class: this.prefixCss('ui-label-text'),

package/src/ts/components/labels/MetadataLabel.ts

@@ -49,10 +49,10 @@ export class MetadataLabel extends Label<MetadataLabelConfig> {
   configure(player: PlayerAPI, uimanager: UIInstanceManager): void {
     super.configure(player, uimanager);
 
-    let config = this.getConfig();
-    let uiconfig = uimanager.getConfig();
+    const config = this.getConfig();
+    const uiconfig = uimanager.getConfig();
 
-    let init = () => {
+    const init = () => {
       switch (config.content) {
         case MetadataLabelContent.Title:
           this.setText(uiconfig.metadata.title);
@@ -63,7 +63,7 @@ export class MetadataLabel extends Label<MetadataLabelConfig> {
       }
     };
 
-    let unload = () => {
+    const unload = () => {
       this.setText(null);
     };
 

package/src/ts/components/labels/PlaybackTimeLabel.ts

@@ -67,17 +67,17 @@ export class PlaybackTimeLabel extends Label<PlaybackTimeLabelConfig> {
   configure(player: PlayerAPI, uimanager: UIInstanceManager): void {
     super.configure(player, uimanager);
 
-    let config = this.getConfig();
+    const config = this.getConfig();
     let live = false;
-    let liveCssClass = this.prefixCss('ui-playbacktimelabel-live');
-    let liveEdgeCssClass = this.prefixCss('ui-playbacktimelabel-live-edge');
+    const liveCssClass = this.prefixCss('ui-playbacktimelabel-live');
+    const liveEdgeCssClass = this.prefixCss('ui-playbacktimelabel-live-edge');
     let minWidth = 0;
 
-    let liveClickHandler = () => {
+    const liveClickHandler = () => {
       player.timeShift(0);
     };
 
-    let updateLiveState = () => {
+    const updateLiveState = () => {
       // Player is playing a live stream when the duration is infinite
       live = player.isLive();
 
@@ -98,7 +98,7 @@ export class PlaybackTimeLabel extends Label<PlaybackTimeLabelConfig> {
       }
     };
 
-    let updateLiveTimeshiftState = () => {
+    const updateLiveTimeshiftState = () => {
       if (!live) {
         return;
       }
@@ -117,14 +117,14 @@ export class PlaybackTimeLabel extends Label<PlaybackTimeLabelConfig> {
       }
     };
 
-    let playbackTimeHandler = () => {
+    const playbackTimeHandler = () => {
       if (!live && player.getDuration() !== Infinity) {
         this.setTime(PlayerUtils.getCurrentTimeRelativeToSeekableRange(player), player.getDuration());
       }
 
       // To avoid 'jumping' in the UI by varying label sizes due to non-monospaced fonts,
       // we gradually increase the min-width with the content to reach a stable size.
-      let width = this.getDomElement().width();
+      const width = this.getDomElement().width();
       if (width > minWidth) {
         minWidth = width;
         this.getDomElement().css({
@@ -133,7 +133,7 @@ export class PlaybackTimeLabel extends Label<PlaybackTimeLabelConfig> {
       }
     };
 
-    let updateTimeFormatBasedOnDuration = () => {
+    const updateTimeFormatBasedOnDuration = () => {
       // Set time format depending on source duration
       this.timeFormat =
         Math.abs(player.isLive() ? player.getMaxTimeShift() : player.getDuration()) >= 3600
@@ -142,7 +142,7 @@ export class PlaybackTimeLabel extends Label<PlaybackTimeLabelConfig> {
       playbackTimeHandler();
     };
 
-    let liveStreamDetector = new PlayerUtils.LiveStreamDetector(player, uimanager);
+    const liveStreamDetector = new PlayerUtils.LiveStreamDetector(player, uimanager);
     liveStreamDetector.onLiveChanged.subscribe((sender, args: LiveStreamDetectorEventArgs) => {
       live = args.live;
       playbackTimeHandler();
@@ -162,7 +162,7 @@ export class PlaybackTimeLabel extends Label<PlaybackTimeLabelConfig> {
     player.on(player.exports.PlayerEvent.StallStarted, updateLiveTimeshiftState);
     player.on(player.exports.PlayerEvent.StallEnded, updateLiveTimeshiftState);
 
-    let init = () => {
+    const init = () => {
       // Reset min-width when a new source is ready (especially for switching VOD/Live modes where the label content
       // changes)
       minWidth = 0;
@@ -183,8 +183,8 @@ export class PlaybackTimeLabel extends Label<PlaybackTimeLabelConfig> {
    * @param durationSeconds the total duration in seconds
    */
   setTime(playbackSeconds: number, durationSeconds: number) {
-    let currentTime = StringUtils.secondsToTime(playbackSeconds, this.timeFormat);
-    let totalTime = StringUtils.secondsToTime(durationSeconds, this.timeFormat);
+    const currentTime = StringUtils.secondsToTime(playbackSeconds, this.timeFormat);
+    const totalTime = StringUtils.secondsToTime(durationSeconds, this.timeFormat);
 
     switch ((<PlaybackTimeLabelConfig>this.config).timeLabelMode) {
       case PlaybackTimeLabelMode.CurrentTime:

package/src/ts/components/lists/ItemSelectionList.ts

@@ -28,7 +28,7 @@ export class ItemSelectionList extends ListSelector<ListSelectorConfig> {
   }
 
   protected toDomElement(): DOM {
-    let listElement = new DOM(
+    const listElement = new DOM(
       'ul',
       {
         id: this.config.id,
@@ -57,8 +57,8 @@ export class ItemSelectionList extends ListSelector<ListSelectorConfig> {
       listItem.removeClass(this.prefixCss(ItemSelectionList.CLASS_SELECTED));
     };
 
-    for (let item of this.items) {
-      let listItem = new DOM('li', {
+    for (const item of this.items) {
+      const listItem = new DOM('li', {
         type: 'li',
         class: this.prefixCss('ui-selectionlistitem'),
       }).append(new DOM('a', {}).html(i18n.performLocalization(item.label)));

package/src/ts/components/lists/ListSelector.ts

@@ -150,7 +150,7 @@ export abstract class ListSelector<Config extends ListSelectorConfig> extends Co
    * @returns {boolean} true if removal was successful, false if the item is not part of this selector
    */
   removeItem(key: string): boolean {
-    let index = this.getItemIndex(key);
+    const index = this.getItemIndex(key);
     if (index > -1) {
       ArrayUtils.remove(this.items, this.items[index]);
       this.onItemRemovedEvent(key);
@@ -171,7 +171,7 @@ export abstract class ListSelector<Config extends ListSelectorConfig> extends Co
       return true;
     }
 
-    let index = this.getItemIndex(key);
+    const index = this.getItemIndex(key);
 
     if (index > -1) {
       this.selectedItem = key;
@@ -220,7 +220,7 @@ export abstract class ListSelector<Config extends ListSelectorConfig> extends Co
    */
   clearItems() {
     // local copy for iteration after clear
-    let items = this.items;
+    const items = this.items;
     // clear items
     this.items = [];
 
@@ -228,7 +228,7 @@ export abstract class ListSelector<Config extends ListSelectorConfig> extends Co
     this.selectedItem = null;
 
     // fire events
-    for (let item of items) {
+    for (const item of items) {
       this.onItemRemovedEvent(item.key);
     }
   }

package/src/ts/components/overlays/CastStatusOverlay.ts

@@ -34,7 +34,7 @@ export class CastStatusOverlay extends Container<ContainerConfig> {
     player.on(player.exports.PlayerEvent.CastWaitingForDevice, (event: CastWaitingForDeviceEvent) => {
       this.show();
       // Get device name and update status text while connecting
-      let castDeviceName = event.castPayload.deviceName;
+      const castDeviceName = event.castPayload.deviceName;
       this.statusLabel.setText(i18n.getLocalizer('connectingTo', { castDeviceName }));
     });
     player.on(player.exports.PlayerEvent.CastStarted, (event: CastStartedEvent) => {
@@ -42,7 +42,7 @@ export class CastStatusOverlay extends Container<ContainerConfig> {
       // For cases when a session is resumed, we do not receive the previous events and therefore show the status panel
       // here too
       this.show();
-      let castDeviceName = event.deviceName;
+      const castDeviceName = event.deviceName;
       this.statusLabel.setText(i18n.getLocalizer('playingOn', { castDeviceName }));
     });
     player.on(player.exports.PlayerEvent.CastStopped, event => {

package/src/ts/components/overlays/ClickOverlay.ts

@@ -35,7 +35,7 @@ export class ClickOverlay extends Button<ClickOverlayConfig> {
     super.initialize();
 
     this.setUrl((<ClickOverlayConfig>this.config).url);
-    let element = this.getDomElement();
+    const element = this.getDomElement();
     element.on('click', () => {
       if (element.data('url')) {
         window.open(element.data('url'), '_blank');

package/src/ts/components/overlays/DismissClickOverlay.ts

@@ -3,6 +3,7 @@ import { Component, ComponentConfig } from '../Component';
 import { Container } from '../Container';
 import { PlayerAPI } from 'bitmovin-player';
 import { UIInstanceManager } from '../../UIManager';
+import { SettingsPanel } from '../settings/SettingsPanel';
 
 export interface DismissClickOverlayConfig extends ButtonConfig {
   target: Component<ComponentConfig>;
@@ -32,9 +33,13 @@ export class DismissClickOverlay extends Container<DismissClickOverlayConfig> {
       this.hide();
     });
 
-    let element = this.getDomElement();
+    const element = this.getDomElement();
     element.on('click', () => {
-      this.config.target.hide();
+      if (this.config.target instanceof SettingsPanel) {
+        this.config.target.hideAndReset();
+      } else {
+        this.config.target.hide();
+      }
     });
   }
 }

package/src/ts/components/overlays/ErrorMessageOverlay.ts

@@ -113,7 +113,7 @@ export class ErrorMessageOverlay extends Container<ErrorMessageOverlayConfig> {
   configure(player: PlayerAPI | MobileV3PlayerAPI, uimanager: UIInstanceManager): void {
     super.configure(player, uimanager);
 
-    let config = this.getConfig();
+    const config = this.getConfig();
 
     const handleErrorMessage = (
       event: ErrorEvent | MobileV3SourceErrorEvent | MobileV3PlayerErrorEvent,
@@ -137,7 +137,7 @@ export class ErrorMessageOverlay extends Container<ErrorMessageOverlayConfig> {
       player.on(MobileV3PlayerEvent.SourceError, errorEventHandler);
     } else {
       player.on(player.exports.PlayerEvent.Error, (event: ErrorEvent) => {
-        let message = ErrorUtils.defaultWebErrorMessageTranslator(event);
+        const message = ErrorUtils.defaultWebErrorMessageTranslator(event);
         handleErrorMessage(event, message);
       });
     }

package/src/ts/components/overlays/RecommendationOverlay.ts

@@ -42,13 +42,13 @@ export class RecommendationOverlay extends Container<ContainerConfig> {
   configure(player: PlayerAPI, uimanager: UIInstanceManager): void {
     super.configure(player, uimanager);
 
-    let clearRecommendations = () => {
+    const clearRecommendations = () => {
       this.recommendationContainer.removeComponents();
       this.recommendationContainer.updateComponents();
       this.getDomElement().removeClass(this.prefixCss(RecommendationOverlay.CLASS_HAS_RECOMMENDATIONS));
     };
 
-    let setupRecommendations = () => {
+    const setupRecommendations = () => {
       clearRecommendations();
 
       const recommendations = uimanager.getConfig().metadata.recommendations;

package/src/ts/components/overlays/SubtitleOverlay.ts

@@ -66,7 +66,7 @@ export class SubtitleOverlay extends Container<ContainerConfig> {
   configure(player: PlayerAPI, uimanager: UIInstanceManager): void {
     super.configure(player, uimanager);
 
-    let subtitleManager = new ActiveSubtitleManager();
+    const subtitleManager = new ActiveSubtitleManager();
     this.subtitleManager = subtitleManager;
 
     this.subtitleContainerManager = new SubtitleRegionContainerManager(this);
@@ -107,7 +107,7 @@ export class SubtitleOverlay extends Container<ContainerConfig> {
     });
 
     player.on(player.exports.PlayerEvent.CueExit, (event: SubtitleCueEvent) => {
-      let labelToRemove = subtitleManager.cueExit(event);
+      const labelToRemove = subtitleManager.cueExit(event);
 
       if (labelToRemove) {
         this.subtitleContainerManager.removeLabel(labelToRemove);
@@ -124,7 +124,7 @@ export class SubtitleOverlay extends Container<ContainerConfig> {
       }
     });
 
-    let subtitleClearHandler = () => {
+    const subtitleClearHandler = () => {
       this.hide();
       this.subtitleContainerManager.clear();
       subtitleManager.clear();
@@ -405,7 +405,7 @@ export class SubtitleOverlay extends Container<ContainerConfig> {
         label.regionStyle = `line-height: ${fontSize}px;`;
       };
 
-      for (let label of this.getComponents()) {
+      for (const label of this.getComponents()) {
         if (label instanceof SubtitleRegionContainer) {
           label.getComponents().forEach((l: SubtitleLabel) => {
             updateLabel(l);
@@ -595,7 +595,7 @@ class ActiveSubtitleManager {
   }
 
   private addCueToMap(event: SubtitleCueEvent, label: SubtitleLabel): void {
-    let id = ActiveSubtitleManager.calculateId(event);
+    const id = ActiveSubtitleManager.calculateId(event);
 
     // Create array for id if it does not exist
     this.activeSubtitleCueMap[id] = this.activeSubtitleCueMap[id] || [];
@@ -606,8 +606,8 @@ class ActiveSubtitleManager {
   }
 
   private popCueFromMap(event: SubtitleCueEvent): SubtitleLabel | undefined {
-    let id = ActiveSubtitleManager.calculateId(event);
-    let activeSubtitleCues = this.activeSubtitleCueMap[id];
+    const id = ActiveSubtitleManager.calculateId(event);
+    const activeSubtitleCues = this.activeSubtitleCueMap[id];
 
     if (activeSubtitleCues && activeSubtitleCues.length > 0) {
       // Remove cue
@@ -618,7 +618,7 @@ class ActiveSubtitleManager {
        * cue end time (which can change between CueEnter and CueExit IN CueUpdate) and use it as an
        * additional hint to try and remove the correct one of the colliding cues.
        */
-      let activeSubtitleCue = activeSubtitleCues.shift();
+      const activeSubtitleCue = activeSubtitleCues.shift();
       this.activeSubtitleCueCount--;
 
       return activeSubtitleCue.label;
@@ -661,8 +661,8 @@ class ActiveSubtitleManager {
    * @return {SubtitleLabel}
    */
   getCues(event: SubtitleCueEvent): SubtitleLabel[] | undefined {
-    let id = ActiveSubtitleManager.calculateId(event);
-    let activeSubtitleCues = this.activeSubtitleCueMap[id];
+    const id = ActiveSubtitleManager.calculateId(event);
+    const activeSubtitleCues = this.activeSubtitleCueMap[id];
     if (activeSubtitleCues && activeSubtitleCues.length > 0) {
       return activeSubtitleCues.map(cue => cue.label);
     }