bitmovin-player-ui 4.2.0 → 4.3.0

package/src/ts/UIManager.ts

@@ -158,8 +158,8 @@ export class UIManager {
   constructor(player: PlayerAPI, playerUiOrUiVariants: UIContainer | UIVariant[], uiconfig: UIConfig = {}) {
     if (playerUiOrUiVariants instanceof UIContainer) {
       // Single-UI constructor has been called, transform arguments to UIVariant[] signature
-      let playerUi = <UIContainer>playerUiOrUiVariants;
-      let uiVariants = [];
+      const playerUi = <UIContainer>playerUiOrUiVariants;
+      const uiVariants = [];
 
       // Add the default player UI
       uiVariants.push({ ui: playerUi });
@@ -252,8 +252,8 @@ export class UIManager {
     // Create UI instance managers for the UI variants
     // The instance managers map to the corresponding UI variants by their array index
     this.uiInstanceManagers = [];
-    let uiVariantsWithoutCondition = [];
-    for (let uiVariant of this.uiVariants) {
+    const uiVariantsWithoutCondition = [];
+    for (const uiVariant of this.uiVariants) {
       if (uiVariant.condition == null) {
         // Collect variants without conditions for error checking
         uiVariantsWithoutCondition.push(uiVariant);
@@ -296,7 +296,7 @@ export class UIManager {
     });
 
     // Dynamically select a UI variant that matches the current UI condition.
-    let resolveUiVariant = (event: PlayerEventBase) => {
+    const resolveUiVariant = (event: PlayerEventBase) => {
       // Make sure that the AdStarted event data is persisted through ad playback in case other events happen
       // in the meantime, e.g. player resize. We need to store this data because there is no other way to find out
       // ad details while an ad is playing (in v8.0 at least; from v8.1 there will be ads.getActiveAd()).
@@ -338,13 +338,13 @@ export class UIManager {
       }
 
       // Detect if an ad has started
-      let isAd = adStartedEvent != null;
+      const isAd = adStartedEvent != null;
       let adRequiresUi = false;
       if (isAd) {
-        let ad = adStartedEvent.ad;
+        const ad = adStartedEvent.ad;
         // for now only linear ads can request a UI
         if (ad.isLinear) {
-          let linearAd = ad as LinearAd;
+          const linearAd = ad as LinearAd;
           adRequiresUi = (linearAd.uiConfig && linearAd.uiConfig.requestsUi) || false;
         }
       }
@@ -436,7 +436,7 @@ export class UIManager {
    * @param {() => void} onShow a callback that is executed just before the new UI variant is shown
    */
   switchToUiVariant(uiVariant: UIVariant, onShow?: () => void): void {
-    let uiVariantIndex = this.uiVariants.indexOf(uiVariant);
+    const uiVariantIndex = this.uiVariants.indexOf(uiVariant);
 
     const previousUi = this.currentUi;
     const nextUi: InternalUIInstanceManager = this.uiInstanceManagers[uiVariantIndex];
@@ -508,7 +508,7 @@ export class UIManager {
 
     // Select new UI variant
     // If no variant condition is fulfilled, we switch to *no* UI
-    for (let uiVariant of this.uiVariants) {
+    for (const uiVariant of this.uiVariants) {
       const matchesCondition = uiVariant.condition == null || uiVariant.condition(switchingContext) === true;
       if (nextUiVariant == null && matchesCondition) {
         nextUiVariant = uiVariant;
@@ -526,8 +526,8 @@ export class UIManager {
   }
 
   private addUi(ui: InternalUIInstanceManager): void {
-    let dom = ui.getUI().getDomElement();
-    let player = ui.getWrappedPlayer();
+    const dom = ui.getUI().getDomElement();
+    const player = ui.getWrappedPlayer();
 
     ui.configureControls();
     /* Append the UI DOM after configuration to avoid CSS transitions at initialization
@@ -567,7 +567,7 @@ export class UIManager {
   }
 
   release(): void {
-    for (let uiInstanceManager of this.uiInstanceManagers) {
+    for (const uiInstanceManager of this.uiInstanceManagers) {
       this.releaseUi(uiInstanceManager);
     }
     this.managerPlayerWrapper.clearEventHandlers();
@@ -799,9 +799,9 @@ export class UIInstanceManager {
   protected clearEventHandlers(): void {
     this.playerWrapper.clearEventHandlers();
 
-    let events = <any>this.events; // avoid TS7017
-    for (let event in events) {
-      let dispatcher = <EventDispatcher<Object, Object>>events[event];
+    const events = <any>this.events; // avoid TS7017
+    for (const event in events) {
+      const dispatcher = <EventDispatcher<Object, Object>>events[event];
       dispatcher.unsubscribeAll();
     }
   }
@@ -832,7 +832,7 @@ class InternalUIInstanceManager extends UIInstanceManager {
   }
 
   private configureControlsTree(component: Component<ComponentConfig>) {
-    let configuredComponents: Component<ComponentConfig>[] = [];
+    const configuredComponents: Component<ComponentConfig>[] = [];
 
     UIUtils.traverseTree(component, component => {
       // First, check if we have already configured a component, and throw an error if we did. Multiple configuration
@@ -840,7 +840,7 @@ class InternalUIInstanceManager extends UIInstanceManager {
       // times hints at a wrong UI structure.
       // We could just skip configuration in such a case and not throw an exception, but enforcing a clean UI tree
       // seems like the better choice.
-      for (let configuredComponent of configuredComponents) {
+      for (const configuredComponent of configuredComponents) {
         if (configuredComponent === component) {
           // Write the component to the console to simplify identification of the culprit
           // (e.g. by inspecting the config)
@@ -878,7 +878,7 @@ class InternalUIInstanceManager extends UIInstanceManager {
     component.release();
 
     if (component instanceof Container) {
-      for (let childComponent of component.getComponents()) {
+      for (const childComponent of component.getComponents()) {
         this.releaseControlsTree(childComponent);
       }
     }
@@ -921,10 +921,10 @@ export class PlayerWrapper {
     const namesToIgnore = ['constructor', ...objectProtoPropertyNames];
     const members = getAllPropertyNames(player).filter(name => namesToIgnore.indexOf(name) === -1);
     // Split the members into methods and properties
-    let methods = <any[]>[];
-    let properties = <any[]>[];
+    const methods = <any[]>[];
+    const properties = <any[]>[];
 
-    for (let member of members) {
+    for (const member of members) {
       if (typeof (<any>player)[member] === 'function') {
         methods.push(member);
       } else {
@@ -933,10 +933,10 @@ export class PlayerWrapper {
     }
 
     // Create wrapper object
-    let wrapper = <any>{};
+    const wrapper = <any>{};
 
     // Add function wrappers for all API methods that do nothing but calling the base method on the player
-    for (let method of methods) {
+    for (const method of methods) {
       wrapper[method] = function () {
         // console.log('called ' + member); // track method calls on the player
         // eslint-disable-next-line @typescript-eslint/no-unsafe-call
@@ -945,7 +945,7 @@ export class PlayerWrapper {
     }
 
     // Add all public properties of the player to the wrapper
-    for (let property of properties) {
+    for (const property of properties) {
       // Get an eventually existing property descriptor to differentiate between plain properties and properties with
       // getters/setters.
       const propertyDescriptor = ((target: PlayerAPI) => {
@@ -1000,7 +1000,7 @@ export class PlayerWrapper {
       if (this.eventHandlers[event]) {
         // check if there are handlers for this event registered
         // Extend the data object with default values to convert it to a {@link PlayerEventBase} object.
-        let playerEventData = <PlayerEventBase>Object.assign(
+        const playerEventData = <PlayerEventBase>Object.assign(
           {},
           {
             timestamp: Date.now(),
@@ -1012,7 +1012,7 @@ export class PlayerWrapper {
         );
 
         // Execute the registered callbacks
-        for (let callback of this.eventHandlers[event]) {
+        for (const callback of this.eventHandlers[event]) {
           callback(playerEventData);
         }
       }
@@ -1045,8 +1045,8 @@ export class PlayerWrapper {
       }
     }
 
-    for (let eventType in this.eventHandlers) {
-      for (let callback of this.eventHandlers[eventType]) {
+    for (const eventType in this.eventHandlers) {
+      for (const callback of this.eventHandlers[eventType]) {
         this.player.off(eventType as PlayerEvent, callback);
       }
     }

package/src/ts/components/CastUIContainer.ts

@@ -19,7 +19,7 @@ export class CastUIContainer extends UIContainer {
   configure(player: PlayerAPI, uimanager: UIInstanceManager): void {
     super.configure(player, uimanager);
 
-    let config = this.getConfig();
+    const config = this.getConfig();
 
     /*
      * Show UI on Cast devices at certain playback events
@@ -33,31 +33,31 @@ export class CastUIContainer extends UIContainer {
 
     let isUiShown = false;
 
-    let hideUi = () => {
+    const hideUi = () => {
       uimanager.onControlsHide.dispatch(this);
       isUiShown = false;
     };
 
     this.castUiHideTimeout = new Timeout(config.hideDelay, hideUi);
 
-    let showUi = () => {
+    const showUi = () => {
       if (!isUiShown) {
         uimanager.onControlsShow.dispatch(this);
         isUiShown = true;
       }
     };
 
-    let showUiPermanently = () => {
+    const showUiPermanently = () => {
       showUi();
       this.castUiHideTimeout.clear();
     };
 
-    let showUiWithTimeout = () => {
+    const showUiWithTimeout = () => {
       showUi();
       this.castUiHideTimeout.start();
     };
 
-    let showUiAfterSeek = () => {
+    const showUiAfterSeek = () => {
       if (player.isPlaying()) {
         showUiWithTimeout();
       } else {

package/src/ts/components/Component.ts

@@ -308,7 +308,7 @@ export class Component<Config extends ComponentConfig> {
    * Subclasses usually overwrite this method to extend or replace the DOM element with their own design.
    */
   protected toDomElement(): DOM {
-    let element = new DOM(
+    const element = new DOM(
       this.config.tag,
       {
         id: this.config.id,
@@ -365,7 +365,7 @@ export class Component<Config extends ComponentConfig> {
    */
   protected mergeConfig<Config>(config: Config, defaults: Partial<Config>, base: Config): Config {
     // Extend default config with supplied config
-    let merged = Object.assign({}, base, defaults, config);
+    const merged = Object.assign({}, base, defaults, config);
 
     // Return the extended config
     return merged;
@@ -384,7 +384,7 @@ export class Component<Config extends ComponentConfig> {
       return this.prefixCss(css);
     });
     // Join array values into a string
-    let flattenedString = flattenedArray.join(' ');
+    const flattenedString = flattenedArray.join(' ');
     // Return trimmed string to prevent whitespace at the end from the join operation
     return flattenedString.trim();
   }

package/src/ts/components/Container.ts

@@ -40,7 +40,7 @@ export class Container<Config extends ContainerConfig> extends Component<Config>
   /**
    * A reference to the inner element that contains the components of the container.
    */
-  private innerContainerElement: DOM;
+  protected innerContainerElement: DOM;
   private componentsToAppend: Component<ComponentConfig>[];
   private componentsToPrepend: Component<ComponentConfig>[];
   private componentsToRemove: Component<ComponentConfig>[];
@@ -108,7 +108,7 @@ export class Container<Config extends ContainerConfig> extends Component<Config>
    * Removes all child components from the container.
    */
   removeComponents(): void {
-    for (let component of this.getComponents().slice()) {
+    for (const component of this.getComponents().slice()) {
       this.removeComponent(component);
     }
   }
@@ -144,7 +144,7 @@ export class Container<Config extends ContainerConfig> extends Component<Config>
 
   protected toDomElement(): DOM {
     // Create the container element (the outer <div>)
-    let containerElement = new DOM(
+    const containerElement = new DOM(
       this.config.tag,
       {
         id: this.config.id,
@@ -160,12 +160,12 @@ export class Container<Config extends ContainerConfig> extends Component<Config>
     }
 
     // Create the inner container element (the inner <div>) that will contain the components
-    let innerContainer = new DOM(this.config.tag, {
+    const innerContainer = new DOM(this.config.tag, {
       class: this.prefixCss('container-wrapper'),
     });
     this.innerContainerElement = innerContainer;
 
-    for (let initialComponent of this.config.components) {
+    for (const initialComponent of this.config.components) {
       this.componentsToAppend.push(initialComponent);
     }
     this.updateComponents();

package/src/ts/components/RecommendationItem.ts

@@ -91,12 +91,12 @@ export class RecommendationItem extends Component<RecommendationItemConfig> {
       this,
     );
 
-    let innerTitleElement = new Label({ text: recommendationConfig.title, cssClass: 'title' });
+    const innerTitleElement = new Label({ text: recommendationConfig.title, cssClass: 'title' });
     titleElement.append(innerTitleElement.getDomElement());
     itemElement.append(titleElement);
 
     if (recommendationConfig.duration != null) {
-      let timeElement = new Label({
+      const timeElement = new Label({
         text: recommendationConfig.duration ? StringUtils.secondsToTime(recommendationConfig.duration) : '',
         cssClass: 'duration',
       });

package/src/ts/components/TvNoiseCanvas.ts

@@ -66,11 +66,11 @@ export class TvNoiseCanvas extends Component<ComponentConfig> {
     }
 
     let currentPixelOffset;
-    let canvasWidth = this.canvasWidth;
-    let canvasHeight = this.canvasHeight;
+    const canvasWidth = this.canvasWidth;
+    const canvasHeight = this.canvasHeight;
 
     // Create texture
-    let noiseImage = this.canvasContext.createImageData(canvasWidth, canvasHeight);
+    const noiseImage = this.canvasContext.createImageData(canvasWidth, canvasHeight);
 
     // Fill texture with noise
     for (let y = 0; y < canvasHeight; y++) {

package/src/ts/components/UIContainer.ts

@@ -8,6 +8,8 @@ import { PlayerAPI, PlayerResizedEvent } from 'bitmovin-player';
 import { i18n } from '../localization/i18n';
 import { Button, ButtonConfig } from './buttons/Button';
 import { TouchControlOverlay, TouchControlOverlayConfig } from './overlays/TouchControlOverlay';
+import { Component, ComponentConfig } from './Component';
+import { SettingsPanel } from './settings/SettingsPanel';
 
 /**
  * Configuration interface for a {@link UIContainer}.
@@ -38,6 +40,13 @@ export interface UIContainerConfig extends ContainerConfig {
    * Default: true
    */
   hideImmediatelyOnMouseLeave?: boolean;
+
+  /**
+   * When true, suspend the UIContainer's hide timer while a SettingsPanel is open,
+   * and resume it when the panel closes.
+   * Default: true
+   */
+  deferUiHideWhileSettingsOpen?: boolean;
 }
 
 /**
@@ -62,7 +71,7 @@ export class UIContainer extends Container<UIContainerConfig> {
   private userInteractionEvents: { name: string; handler: EventListenerOrEventListenerObject }[];
   private hidingPrevented: () => boolean;
 
-  public hideUi: () => void = () => {};
+  public hideUi: (force?: boolean) => void = () => {};
   public showUi: () => void = () => {};
   public toggleUiShown: () => void = () => {};
 
@@ -77,6 +86,7 @@ export class UIContainer extends Container<UIContainerConfig> {
         ariaLabel: i18n.getLocalizer('player'),
         hideDelay: 2000,
         hideImmediatelyOnMouseLeave: true,
+        deferUiHideWhileSettingsOpen: true,
       },
       this.config,
     );
@@ -101,8 +111,10 @@ export class UIContainer extends Container<UIContainerConfig> {
   }
 
   private configureUIShowHide(player: PlayerAPI, uimanager: UIInstanceManager): void {
-    let config = this.getConfig();
+    const config = this.getConfig();
     let isUiShown = false;
+    let isSettingsPanelShown = false;
+    let isHideUiPending = false;
 
     uimanager.onConfigured.subscribe(() => {
       if (isUiShown) {
@@ -121,11 +133,31 @@ export class UIContainer extends Container<UIContainerConfig> {
     let isFirstTouch = true;
     let playerState: PlayerUtils.PlayerState;
 
+    if (config.deferUiHideWhileSettingsOpen) {
+      uimanager.onComponentShow.subscribe((component: Component<ComponentConfig>) => {
+        if (component instanceof SettingsPanel) {
+          isSettingsPanelShown = true;
+        }
+      });
+      uimanager.onComponentHide.subscribe((component: Component<ComponentConfig>) => {
+        if (component instanceof SettingsPanel) {
+          isSettingsPanelShown = false;
+
+          if (isHideUiPending) {
+            this.hideUi(true);
+            isHideUiPending = false;
+          }
+        }
+      });
+    }
+
     this.hidingPrevented = (): boolean => {
       return config.hidePlayerStateExceptions && config.hidePlayerStateExceptions.indexOf(playerState) > -1;
     };
 
     this.showUi = () => {
+      isHideUiPending = false;
+
       if (!isUiShown) {
         // Let subscribers know that they should reveal themselves
         uimanager.onControlsShow.dispatch(this);
@@ -137,11 +169,22 @@ export class UIContainer extends Container<UIContainerConfig> {
       }
     };
 
-    this.hideUi = () => {
+    this.hideUi = (force: boolean = false) => {
       // Hide the UI only if it is shown, and if not casting
       if (isUiShown && !player.isCasting()) {
+        if (force) {
+          uimanager.onControlsHide.dispatch(this);
+          isUiShown = false;
+          return;
+        }
+
+        if (config.deferUiHideWhileSettingsOpen && isSettingsPanelShown) {
+          isHideUiPending = true;
+          return;
+        }
+
         // Issue a preview event to check if we are good to hide the controls
-        let previewHideEventArgs = <CancelEventArgs>{};
+        const previewHideEventArgs = <CancelEventArgs>{};
         uimanager.onPreviewControlsHide.dispatch(this, previewHideEventArgs);
 
         if (!previewHideEventArgs.cancel) {
@@ -271,7 +314,7 @@ export class UIContainer extends Container<UIContainerConfig> {
           // hide the UI in such cases
           if (!isSeeking && !this.hidingPrevented()) {
             if (this.config.hideImmediatelyOnMouseLeave) {
-              this.hideUi();
+              this.hideUi(true);
             } else {
               this.uiHideTimeout.start();
             }
@@ -330,20 +373,20 @@ export class UIContainer extends Container<UIContainerConfig> {
   }
 
   private configurePlayerStates(player: PlayerAPI, uimanager: UIInstanceManager): void {
-    let container = this.getDomElement();
+    const container = this.getDomElement();
 
     // Convert player states into CSS class names
-    let stateClassNames = <any>[];
-    for (let state in PlayerUtils.PlayerState) {
+    const stateClassNames = <any>[];
+    for (const state in PlayerUtils.PlayerState) {
       if (isNaN(Number(state))) {
-        let enumName = PlayerUtils.PlayerState[<any>PlayerUtils.PlayerState[state]];
+        const enumName = PlayerUtils.PlayerState[<any>PlayerUtils.PlayerState[state]];
         stateClassNames[PlayerUtils.PlayerState[state]] = this.prefixCss(
           UIContainer.STATE_PREFIX + enumName.toLowerCase(),
         );
       }
     }
 
-    let removeStates = () => {
+    const removeStates = () => {
       container.removeClass(stateClassNames[PlayerUtils.PlayerState.Idle]);
       container.removeClass(stateClassNames[PlayerUtils.PlayerState.Prepared]);
       container.removeClass(stateClassNames[PlayerUtils.PlayerState.Playing]);
@@ -427,7 +470,7 @@ export class UIContainer extends Container<UIContainerConfig> {
     });
 
     // Layout size classes
-    let updateLayoutSizeClasses = (width: number, height: number) => {
+    const updateLayoutSizeClasses = (width: number, height: number) => {
       container.removeClass(this.prefixCss('layout-max-width-400'));
       container.removeClass(this.prefixCss('layout-max-width-600'));
       container.removeClass(this.prefixCss('layout-max-width-800'));
@@ -445,8 +488,8 @@ export class UIContainer extends Container<UIContainerConfig> {
     };
     player.on(player.exports.PlayerEvent.PlayerResized, (e: PlayerResizedEvent) => {
       // Convert strings (with "px" suffix) to ints
-      let width = Math.round(Number(e.width.substring(0, e.width.length - 2)));
-      let height = Math.round(Number(e.height.substring(0, e.height.length - 2)));
+      const width = Math.round(Number(e.width.substring(0, e.width.length - 2)));
+      const height = Math.round(Number(e.height.substring(0, e.height.length - 2)));
 
       updateLayoutSizeClasses(width, height);
     });
@@ -481,7 +524,7 @@ export class UIContainer extends Container<UIContainerConfig> {
   }
 
   protected toDomElement(): DOM {
-    let container = super.toDomElement();
+    const container = super.toDomElement();
 
     // Detect flexbox support (not supported in IE9)
     if (document && typeof document.createElement('p').style.flex !== 'undefined') {

package/src/ts/components/ads/AdClickOverlay.ts

@@ -26,13 +26,13 @@ export class AdClickOverlay extends ClickOverlay {
     let clickThroughCallback: () => void = null;
 
     player.on(player.exports.PlayerEvent.AdStarted, (event: AdEvent) => {
-      let ad = event.ad;
+      const ad = event.ad;
       this.setUrl(ad.clickThroughUrl);
       clickThroughCallback = ad.clickThroughUrlOpened;
     });
 
     // Clear click-through URL when ad has finished
-    let adFinishedHandler = () => {
+    const adFinishedHandler = () => {
       this.setUrl(null);
     };
 

package/src/ts/components/ads/AdMessageLabel.ts

@@ -1,9 +1,30 @@
-import { UIInstanceManager } from '../../UIManager';
-import { AdEvent, LinearAd, PlayerAPI } from 'bitmovin-player';
 import { Label, LabelConfig } from '../labels/Label';
+import { i18n } from '../../localization/i18n';
+import { AdEvent, LinearAd, PlayerAPI } from 'bitmovin-player';
+import { UIInstanceManager } from '../../UIManager';
+import { StringUtils } from '../../utils/StringUtils';
 
 /**
- * A label that displays a message regarding the ad that's currently being played.
+ * A label that displays a message about a running ad, optionally with a countdown.
+ *
+ * The message text supports placeholders that are dynamically replaced with ad timing information:
+ * - `{remainingTime[formatString]}` - Remaining time until the ad ends
+ * - `{playedTime[formatString]}` - Current playback time of the ad
+ * - `{adDuration[formatString]}` - Total duration of the current ad
+ * - `{adBreakRemainingTime[formatString]}` - Remaining time for the entire ad break (including all remaining ads)
+ *
+ * Format string options (optional):
+ * - `%d` - Integer (e.g., `{remainingTime%d}` → `100`)
+ * - `%0Nd` - Integer with N leading zeros (e.g., `{remainingTime%03d}` → `100`)
+ * - `%f` - Float (e.g., `{remainingTime%f}` → `100.0`)
+ * - `%0Nf` - Float with leading zeros (e.g., `{remainingTime%05f}` → `100.0`)
+ * - `%.Mf` - Float with M decimal places (e.g., `{remainingTime%.2f}` → `100.00`)
+ * - `%hh:mm:ss` - Time format with hours (e.g., `{remainingTime%hh:mm:ss}` → `00:01:40`)
+ * - `%mm:ss` - Time format without hours (e.g., `{remainingTime%mm:ss}` → `01:40`)
+ *
+ * Example: `{ text: 'Ad: {remainingTime%mm:ss}' }` displays "Ad: 01:40" for 100 seconds remaining.
+ *
+ * Note: If a LinearAd has a `uiConfig.message` property, it takes precedence over the configured `text`.
  *
  * @category Labels
  */
@@ -23,24 +44,30 @@ export class AdMessageLabel extends Label<LabelConfig> {
   configure(player: PlayerAPI, uimanager: UIInstanceManager): void {
     super.configure(player, uimanager);
 
-    const clearText = () => {
-      this.setText('');
+    const config = this.getConfig();
+    let text = config.text;
+
+    const updateMessageHandler = () => {
+      this.setText(StringUtils.replaceAdMessagePlaceholders(i18n.performLocalization(text), null, player));
+    };
+
+    const adStartHandler = (event: AdEvent) => {
+      const uiConfig = (event.ad as LinearAd).uiConfig;
+      text = uiConfig?.message || config.text;
+
+      updateMessageHandler();
+
+      player.on(player.exports.PlayerEvent.TimeChanged, updateMessageHandler);
+    };
+
+    const adEndHandler = () => {
+      player.off(player.exports.PlayerEvent.TimeChanged, updateMessageHandler);
     };
 
-    clearText();
-
-    player.on(player.exports.PlayerEvent.SourceUnloaded, clearText);
-    player.on(player.exports.PlayerEvent.AdError, clearText);
-    player.on(player.exports.PlayerEvent.AdSkipped, clearText);
-    player.on(player.exports.PlayerEvent.AdFinished, clearText);
-    player.on(player.exports.PlayerEvent.AdStarted, event => {
-      const ad = (event as AdEvent).ad;
-      if (!ad.isLinear) {
-        return;
-      }
-
-      const linearAd = ad as LinearAd;
-      this.setText(linearAd.uiConfig?.message ?? '');
-    });
+    player.on(player.exports.PlayerEvent.AdStarted, adStartHandler);
+    player.on(player.exports.PlayerEvent.AdSkipped, adEndHandler);
+    player.on(player.exports.PlayerEvent.AdError, adEndHandler);
+    player.on(player.exports.PlayerEvent.AdFinished, adEndHandler);
+    player.on(player.exports.PlayerEvent.SourceUnloaded, adEndHandler);
   }
 }

package/src/ts/components/ads/AdSkipButton.ts

@@ -46,12 +46,12 @@ export class AdSkipButton extends Button<AdSkipButtonConfig> {
   configure(player: PlayerAPI, uimanager: UIInstanceManager): void {
     super.configure(player, uimanager);
 
-    let config = this.getConfig();
+    const config = this.getConfig();
     let untilSkippableMessage = config.untilSkippableMessage;
     let skippableMessage = config.skippableMessage;
     let skipOffset = -1;
 
-    let updateSkipMessageHandler = () => {
+    const updateSkipMessageHandler = () => {
       this.show();
 
       // Update the skip message on the button
@@ -64,8 +64,8 @@ export class AdSkipButton extends Button<AdSkipButtonConfig> {
       }
     };
 
-    let adStartHandler = (event: AdEvent) => {
-      let ad = event.ad as LinearAd;
+    const adStartHandler = (event: AdEvent) => {
+      const ad = event.ad as LinearAd;
       skipOffset = ad.skippableAfter;
       untilSkippableMessage = (ad.uiConfig && ad.uiConfig.untilSkippableMessage) || config.untilSkippableMessage;
       skippableMessage = (ad.uiConfig && ad.uiConfig.skippableMessage) || config.skippableMessage;
@@ -80,7 +80,7 @@ export class AdSkipButton extends Button<AdSkipButtonConfig> {
       }
     };
 
-    let adEndHandler = () => {
+    const adEndHandler = () => {
       player.off(player.exports.PlayerEvent.TimeChanged, updateSkipMessageHandler);
     };
 

package/src/ts/components/buttons/Button.ts

@@ -99,7 +99,7 @@ export class Button<Config extends ButtonConfig> extends Component<Config> {
     }
 
     // Create the button element with the text label
-    let buttonElement = new DOM('button', buttonElementAttributes, this);
+    const buttonElement = new DOM('button', buttonElementAttributes, this);
 
     const addIconElement = () => {
       const icon = new Icon({ ariaLabel: this.config.ariaLabel, altText: this.config.text });

package/src/ts/components/buttons/CastToggleButton.ts

@@ -39,7 +39,7 @@ export class CastToggleButton extends ToggleButton<ToggleButtonConfig> {
       }
     });
 
-    let castAvailableHander = () => {
+    const castAvailableHander = () => {
       if (player.isCastAvailable()) {
         this.show();
       } else {

package/src/ts/components/buttons/CloseButton.ts

@@ -38,7 +38,7 @@ export class CloseButton extends Button<CloseButtonConfig> {
   configure(player: PlayerAPI, uimanager: UIInstanceManager): void {
     super.configure(player, uimanager);
 
-    let config = this.getConfig();
+    const config = this.getConfig();
 
     this.onClick.subscribe(() => {
       config.target.hide();