@gcorevideo/player 2.28.25 → 2.28.27

package/src/plugins/vast-ads/roll.ts

@@ -1,492 +1,589 @@
 // import LogManager from '../../utils/LogManager';
-import { $, Container, Core, Events, Log, Playback } from '@clappr/core';
-import { reportError } from '@gcorevideo/utils';
-import assert from 'assert';
+import { $, Container, Core, Events, Log, Playback } from '@clappr/core'
+import { reportError } from '@gcorevideo/utils'
+import assert from 'assert'
 
-import type { ZeptoResult } from '../../types.js';
-import type { TimerId } from '../../utils/types.js';
+import type { ZeptoResult } from '../../types.js'
+import type { TimerId } from '../../utils/types.js'
 
 type RollConstructorOptions = {
-  core: Core;
-  $skipAd: ZeptoResult;
-  $muteIcon: ZeptoResult;
-  $areaClick: ZeptoResult;
-  mute: boolean;
-  volume: number;
-  prevVolume: number;
-};
+  core: Core
+  $skipAd: ZeptoResult
+  $muteIcon: ZeptoResult
+  $areaClick: ZeptoResult
+  mute: boolean
+  volume: number
+  prevVolume: number
+}
 
 export default class Roll extends Events {
-  private mute: boolean;
-  private core: Core;
-  private container: Container;
-  private $skipAd: ZeptoResult;
-  private $muteIcon: ZeptoResult;
-  private $areaClick: ZeptoResult;
-  private _playback: Playback;
-  private _volume: number;
-  private _prevValueVolume: number;
+  private mute: boolean
+  private core: Core
+  private container: Container
+  private $skipAd: ZeptoResult
+  private $muteIcon: ZeptoResult
+  private $areaClick: ZeptoResult
+  private _playback: Playback
+  private _volume: number
+  private _prevValueVolume: number
 
-  private _useDummyMp4Video = false;
+  private _useDummyMp4Video = false
 
-  private firstRemaininTime = 0;
+  private firstRemaininTime = 0
 
-  private intervalTimer: TimerId | null = null;
+  private intervalTimer: TimerId | null = null
 
-  private _isAdStartedTriggered: boolean;
+  private _isAdStartedTriggered: boolean
 
-  private extension: any;
+  private extension: any
 
-  private _adsManager: any;
+  private _adsManager: any
 
-  private url: string = '';
+  private url: string = ''
 
   // _events: Record<string, Function>;
-  
-  constructor({ core, $skipAd, $muteIcon, $areaClick, mute, volume, prevVolume }: RollConstructorOptions) {
-    super();
-    this.mute = mute;
-    this.core = core;
-    this.container = this.core.activeContainer;
-    this.$skipAd = $skipAd;
-    this.$muteIcon = $muteIcon;
-    this.$areaClick = $areaClick;
-    this._playback = this.core.activePlayback;
-    this._volume = volume;
-    this._prevValueVolume = prevVolume;
-    this._isAdStartedTriggered = false;
+
+  constructor({
+    core,
+    $skipAd,
+    $muteIcon,
+    $areaClick,
+    mute,
+    volume,
+    prevVolume,
+  }: RollConstructorOptions) {
+    super()
+    this.mute = mute
+    this.core = core
+    this.container = this.core.activeContainer
+    this.$skipAd = $skipAd
+    this.$muteIcon = $muteIcon
+    this.$areaClick = $areaClick
+    this._playback = this.core.activePlayback
+    this._volume = volume
+    this._prevValueVolume = prevVolume
+    this._isAdStartedTriggered = false
     // this._events = {};
   }
 
-  static _adContainer: any;
+  static _adContainer: any
 
-  private static _adDisplayContainer: any;
+  private static _adDisplayContainer: any
 
-  private static _imaContainer: any;
+  private static _imaContainer: any
 
-  static _contentElement: HTMLMediaElement | null = null;
+  static _contentElement: HTMLMediaElement | null = null
 
   static createAdDisplayContainer() {
-    Roll.createImaContainer();
-    assert('google' in window, 'Google IMA SDK not found');
-    Roll._adDisplayContainer = new (window.google as any).ima.AdDisplayContainer(Roll._imaContainer, Roll._contentElement);
+    Roll.createImaContainer()
+    assert('google' in window, 'Google IMA SDK not found')
+    Roll._adDisplayContainer = new (
+      window.google as any
+    ).ima.AdDisplayContainer(Roll._imaContainer, Roll._contentElement)
   }
 
   static createImaContainer() {
-    Roll.destroyImaContainer();
+    Roll.destroyImaContainer()
     // IMA does not clean ad container when finished
     // For the sake of simplicity, wrap into a <div> element
     if (Roll._adContainer) {
-      Roll._imaContainer = document.createElement('div');
-      Roll._adContainer.appendChild(Roll._imaContainer);
+      Roll._imaContainer = document.createElement('div')
+      Roll._adContainer.appendChild(Roll._imaContainer)
     }
   }
 
   static destroyImaContainer() {
     if (Roll._imaContainer && Roll._adContainer) {
-      Roll._adContainer.removeChild(Roll._imaContainer);
-      delete Roll._imaContainer;
+      Roll._adContainer.removeChild(Roll._imaContainer)
+      delete Roll._imaContainer
     }
   }
 
   private _onAdError(adErrorEvent: any) {
     try {
-      const googleError = adErrorEvent.getError();
-      const error = new Error(googleError.getMessage() + ' ' + googleError.getErrorCode());
+      const googleError = adErrorEvent.getError()
+      const error = new Error(
+        googleError.getMessage() + ' ' + googleError.getErrorCode(),
+      )
 
-      error.name = googleError.getType();
+      error.name = googleError.getType()
       // LogManager.exception(error);
-      reportError(error);
+      reportError(error)
     } catch (error) {
       // LogManager.exception(error);
-      reportError(error);
+      reportError(error)
     }
-    Log.debug('Advertisement', 'advertisement error');
-    this._cleverContinueAd(true);
+    Log.debug('Advertisement', 'advertisement error')
+    this._cleverContinueAd(true)
   }
 
   async _playAds() {
-    await Roll._adDisplayContainer.initialize();
+    await Roll._adDisplayContainer.initialize()
     try {
-      assert('google' in window, 'Google IMA SDK not found');
-      assert(Roll._contentElement, 'content element not found');
+      assert('google' in window, 'Google IMA SDK not found')
+      assert(Roll._contentElement, 'content element not found')
       this._adsManager.init(
         Roll._contentElement.offsetWidth,
         Roll._contentElement.offsetHeight,
-        (window.google as any).ima.ViewMode.NORMAL);
-      this._adsManager.start();
+        (window.google as any).ima.ViewMode.NORMAL,
+      )
+      this._adsManager.start()
     } catch (error) {
       // LogManager.exception(error);
-      reportError(error);
-      this._imaEvent('error', error);
-      this._playVideoContent();
+      reportError(error)
+      this._imaEvent('error', error)
+      this._playVideoContent()
     }
   }
 
   private _setVolume(volume: number) {
     try {
       if (this._adsManager) {
-        this._adsManager.setVolume(volume / 100);
+        this._adsManager.setVolume(volume / 100)
       }
       if (typeof this.core.mediaControl.setVolume === 'function') {
-        this.core.options.mute = !volume;
+        this.core.options.mute = !volume
 
         this.trigger('volume', {
           volume,
-          mute: this.core.options.mute
-        });
+          mute: this.core.options.mute,
+        })
 
         if ((this.container as any).advertisement.type !== 'scteroll') {
-          this.core.mediaControl.setVolume(volume, true);
+          this.core.mediaControl.setVolume(volume, true)
         } else {
           if (volume) {
-            (this.container as any).advertisement.isMuted = true;
+            ;(this.container as any).advertisement.isMuted = true
           } else {
-            this.core.mediaControl.setVolume(volume, true);
-            (this.container as any).advertisement.isMuted = false;
+            this.core.mediaControl.setVolume(volume, true)
+            ;(this.container as any).advertisement.isMuted = false
           }
         }
       }
-      this._volume = volume;
+      this._volume = volume
     } catch (error) {
       // LogManager.exception(error);
-      reportError(error);
+      reportError(error)
     }
   }
 
   _playVideoContent() {
-    this.destroy();
-    this.trigger('advertisement_finish');
+    this.destroy()
+    this.trigger('advertisement_finish')
   }
 
   _hideControls() {
     if (this.extension && this.extension.controls === '0') {
-      this.$skipAd.css({ opacity: 0, visibility: 'hidden' });
-      this.$muteIcon.css({ opacity: 0, visibility: 'hidden' });
+      this.$skipAd.css({ opacity: 0, visibility: 'hidden' })
+      this.$muteIcon.css({ opacity: 0, visibility: 'hidden' })
     } else {
-      this.$skipAd.css({ opacity: 1, visibility: 'visible' });
-      this.$muteIcon.css({ opacity: 1, visibility: 'visible' });
+      this.$skipAd.css({ opacity: 1, visibility: 'visible' })
+      this.$muteIcon.css({ opacity: 1, visibility: 'visible' })
     }
   }
 
-  _requestAd({ xml, url, extension }: { xml: any; url: string; extension: any }) {
-    this.extension = extension;
-    assert('google' in window, 'Google IMA SDK not found');
-    const adsLoader = new (window.google as any).ima.AdsLoader(Roll._adDisplayContainer);
+  _requestAd({
+    xml,
+    url,
+    extension,
+  }: {
+    xml: any
+    url: string
+    extension: any
+  }) {
+    this.extension = extension
+    assert('google' in window, 'Google IMA SDK not found')
+    const adsLoader = new (window.google as any).ima.AdsLoader(
+      Roll._adDisplayContainer,
+    )
 
     adsLoader.addEventListener(
       (window.google as any).ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
       (e: any) => {
-        this._onAdsManagerLoaded(e);
-      }
-    );
+        this._onAdsManagerLoaded(e)
+      },
+    )
 
     adsLoader.addEventListener(
       (window.google as any).ima.AdErrorEvent.Type.AD_ERROR,
       (e: any) => {
-        this._onAdError(e);
-      }
-    );
-    const adsRequest = new (window.google as any).ima.AdsRequest();
+        this._onAdError(e)
+      },
+    )
+    const adsRequest = new (window.google as any).ima.AdsRequest()
 
     if (xml) {
-      adsRequest.adTagUrl = '';
-      adsRequest.adsResponse = xml;
+      adsRequest.adTagUrl = ''
+      adsRequest.adsResponse = xml
     } else {
       if (url) {
-        adsRequest.adTagUrl = url;
+        adsRequest.adTagUrl = url
       } else {
-        throw 'no ad url';
+        throw 'no ad url'
       }
     }
-    this.url = url;
-
-    assert(Roll._contentElement, 'content element not found');
-    adsRequest.linearAdSlotWidth = Roll._contentElement.offsetWidth;
-    adsRequest.linearAdSlotHeight = Roll._contentElement.offsetHeight;
-    adsRequest.nonLinearAdSlotWidth = Roll._contentElement.offsetWidth;
-    adsRequest.nonLinearAdSlotHeight = Roll._contentElement.offsetHeight;
-    adsLoader.requestAds(adsRequest);
+    this.url = url
+
+    assert(Roll._contentElement, 'content element not found')
+    adsRequest.linearAdSlotWidth = Roll._contentElement.offsetWidth
+    adsRequest.linearAdSlotHeight = Roll._contentElement.offsetHeight
+    adsRequest.nonLinearAdSlotWidth = Roll._contentElement.offsetWidth
+    adsRequest.nonLinearAdSlotHeight = Roll._contentElement.offsetHeight
+    adsLoader.requestAds(adsRequest)
   }
 
   playerResize() {
-    assert(Roll._contentElement, 'content element not found');
-    assert('google' in window, 'Google IMA SDK not found');
-    this._adsManager && this._adsManager.resize(
-      Roll._contentElement.offsetWidth,
-      Roll._contentElement.offsetHeight,
-      (window.google as any).ima.ViewMode.NORMAL);
+    assert(Roll._contentElement, 'content element not found')
+    assert('google' in window, 'Google IMA SDK not found')
+    this._adsManager &&
+      this._adsManager.resize(
+        Roll._contentElement.offsetWidth,
+        Roll._contentElement.offsetHeight,
+        (window.google as any).ima.ViewMode.NORMAL,
+      )
   }
 
   _onAdsManagerLoaded(adsManagerLoadedEvent: any) {
-    assert('google' in window, 'Google IMA SDK not found');
-    const adsRenderingSettings = new (window.google as any).ima.AdsRenderingSettings();
+    assert('google' in window, 'Google IMA SDK not found')
+    const adsRenderingSettings = new (
+      window.google as any
+    ).ima.AdsRenderingSettings()
 
-    adsRenderingSettings.loadVideoTimeout = process.env.MINIMIZE ? 4000 : 8000;
-    adsRenderingSettings.bitrate = 100000;
+    adsRenderingSettings.loadVideoTimeout = process.env.MINIMIZE ? 4000 : 8000
+    adsRenderingSettings.bitrate = 100000
     // Plugin will handle playback state when ad has completed
 
-    this._adsManager = adsManagerLoadedEvent.getAdsManager(Roll._contentElement, adsRenderingSettings);
-    this._adsManager.addEventListener((window.google as any).ima.AdEvent.Type.LOADED, () => {
-      if (this.mute) {
-        this._setVolume(0);
-      } else {
-        this._setVolume(this._volume);
-      }
-
-      this.changeIconVolume();
-    });
-    this._adsManager.addEventListener((window.google as any).ima.AdErrorEvent.Type.AD_ERROR, (e: any) => {
-      const adType = (this.container as any).advertisement.type;
-
-      if (!((adType === 'middleroll' || adType === 'repeatableroll') && !this._playback.isPlaying())) {
-        this._onAdError(e);
-      }
-    });
-    this._adsManager.addEventListener((window.google as any).ima.AdEvent.Type.CONTENT_RESUME_REQUESTED, () => {
-      this._imaEvent('content_resume_requested');
-    });
-    this._adsManager.addEventListener((window.google as any).ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED, () => {
-      this._imaEvent('content_pause_requested');
-      this._triggerStartAd(this.url);
-    });
-    this._adsManager.addEventListener((window.google as any).ima.AdEvent.Type.CLICK, () => {
-      this._imaEvent('click');
-    });
-    this._adsManager.addEventListener((window.google as any).ima.AdEvent.Type.IMPRESSION, () => {
-      this._imaEvent('impression');
-    });
-    this._adsManager.addEventListener((window.google as any).ima.AdEvent.Type.STARTED, (adEvent: any) => {
-      this._triggerStartAd(this.url);
-      this.trigger('advertisement_played');
-      const ad = adEvent.getAd();
-
-      try {
-        assert(Roll._contentElement, 'content element not found');
-        assert('google' in window, 'Google IMA SDK not found');
-        this._adsManager && this._adsManager.resize(
-          Roll._contentElement.offsetWidth,
-          Roll._contentElement.offsetHeight,
-          (window.google as any).ima.ViewMode.NORMAL);
-      } catch (error) {
-        // LogManager.exception(error);
-        reportError(error);
-      }
-
-      if (this.mute) {
-        this._setVolume(0);
-      } else {
-        this._setVolume(this._volume);
-      }
-
-      if (ad.isLinear()) {
-        // For a linear ad, a timer can be started to poll for
-        // the remaining time.
+    this._adsManager = adsManagerLoadedEvent.getAdsManager(
+      Roll._contentElement,
+      adsRenderingSettings,
+    )
+    this._adsManager.addEventListener(
+      (window.google as any).ima.AdEvent.Type.LOADED,
+      () => {
+        if (this.mute) {
+          this._setVolume(0)
+        } else {
+          this._setVolume(this._volume)
+        }
 
-        this.intervalTimer = setInterval(() => {
-          this._remainingTime(ad);
-        },
-          300); // every 300ms
-      }
-    });
-    this._adsManager.addEventListener((window.google as any).ima.AdEvent.Type.FIRST_QUARTILE, () => {
-      this._imaEvent('first_quartile');
-    });
-    this._adsManager.addEventListener((window.google as any).ima.AdEvent.Type.MIDPOINT, () => {
-      this._imaEvent('midpoint');
-    });
-    this._adsManager.addEventListener((window.google as any).ima.AdEvent.Type.THIRD_QUARTILE, () => {
-      this._imaEvent('third_quartile');
-    });
-    this._adsManager.addEventListener((window.google as any).ima.AdEvent.Type.COMPLETE, () => {
-      this._imaEvent('complete');
-      this._useDummyMp4Video = false;
-    });
-    this._adsManager.addEventListener((window.google as any).ima.AdEvent.Type.ALL_ADS_COMPLETED, () => {
-      this._imaEvent('all_ads_completed');
-      this._cleverContinueAd();
-      this._useDummyMp4Video = false;
-    });
-
-    this._adsManager.addEventListener((window.google as any).ima.AdEvent.Type.PAUSED, () => {
-      this._imaEvent('paused');
-    });
-
-    this._adsManager.addEventListener((window.google as any).ima.AdEvent.Type.RESUMED, () => {
-      this._imaEvent('resumed');
-    });
-
-    this._adsManager.addEventListener((window.google as any).ima.AdEvent.Type.SKIPPED, () => {
-      this._imaEvent('skipped');
-      if (this.extension && this.extension.skipAd) {
-        this._trackUrl(this.extension.skipAd);
-      }
-    });
+        this.changeIconVolume()
+      },
+    )
+    this._adsManager.addEventListener(
+      (window.google as any).ima.AdErrorEvent.Type.AD_ERROR,
+      (e: any) => {
+        const adType = (this.container as any).advertisement.type
+
+        if (
+          !(
+            (adType === 'middleroll' || adType === 'repeatableroll') &&
+            !this._playback.isPlaying()
+          )
+        ) {
+          this._onAdError(e)
+        }
+      },
+    )
+    this._adsManager.addEventListener(
+      (window.google as any).ima.AdEvent.Type.CONTENT_RESUME_REQUESTED,
+      () => {
+        this._imaEvent('content_resume_requested')
+      },
+    )
+    this._adsManager.addEventListener(
+      (window.google as any).ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED,
+      () => {
+        this._imaEvent('content_pause_requested')
+        this._triggerStartAd(this.url)
+      },
+    )
+    this._adsManager.addEventListener(
+      (window.google as any).ima.AdEvent.Type.CLICK,
+      () => {
+        this._imaEvent('click')
+      },
+    )
+    this._adsManager.addEventListener(
+      (window.google as any).ima.AdEvent.Type.IMPRESSION,
+      () => {
+        this._imaEvent('impression')
+      },
+    )
+    this._adsManager.addEventListener(
+      (window.google as any).ima.AdEvent.Type.STARTED,
+      (adEvent: any) => {
+        this._triggerStartAd(this.url)
+        this.trigger('advertisement_played')
+        const ad = adEvent.getAd()
+
+        try {
+          assert(Roll._contentElement, 'content element not found')
+          assert('google' in window, 'Google IMA SDK not found')
+          this._adsManager &&
+            this._adsManager.resize(
+              Roll._contentElement.offsetWidth,
+              Roll._contentElement.offsetHeight,
+              (window.google as any).ima.ViewMode.NORMAL,
+            )
+        } catch (error) {
+          // LogManager.exception(error);
+          reportError(error)
+        }
 
-    this._adsManager.addEventListener((window.google as any).ima.AdEvent.Type.VOLUME_CHANGED, () => {
-      this._imaEvent('volume_change');
-      this.changeIconVolume();
-    });
+        if (this.mute) {
+          this._setVolume(0)
+        } else {
+          this._setVolume(this._volume)
+        }
 
-    this._adsManager.addEventListener((window.google as any).ima.AdEvent.Type.VOLUME_MUTED, () => {
-      this._imaEvent('volume_muted');
-      this.changeIconVolume();
-    });
+        if (ad.isLinear()) {
+          // For a linear ad, a timer can be started to poll for
+          // the remaining time.
 
-    this._adsManager.addEventListener((window.google as any).ima.AdEvent.Type.USER_CLOSE, () => {
-      this._imaEvent('user_close');
-    });
+          this.intervalTimer = setInterval(() => {
+            this._remainingTime(ad)
+          }, 300) // every 300ms
+        }
+      },
+    )
+    this._adsManager.addEventListener(
+      (window.google as any).ima.AdEvent.Type.FIRST_QUARTILE,
+      () => {
+        this._imaEvent('first_quartile')
+      },
+    )
+    this._adsManager.addEventListener(
+      (window.google as any).ima.AdEvent.Type.MIDPOINT,
+      () => {
+        this._imaEvent('midpoint')
+      },
+    )
+    this._adsManager.addEventListener(
+      (window.google as any).ima.AdEvent.Type.THIRD_QUARTILE,
+      () => {
+        this._imaEvent('third_quartile')
+      },
+    )
+    this._adsManager.addEventListener(
+      (window.google as any).ima.AdEvent.Type.COMPLETE,
+      () => {
+        this._imaEvent('complete')
+        this._useDummyMp4Video = false
+      },
+    )
+    this._adsManager.addEventListener(
+      (window.google as any).ima.AdEvent.Type.ALL_ADS_COMPLETED,
+      () => {
+        this._imaEvent('all_ads_completed')
+        this._cleverContinueAd()
+        this._useDummyMp4Video = false
+      },
+    )
+
+    this._adsManager.addEventListener(
+      (window.google as any).ima.AdEvent.Type.PAUSED,
+      () => {
+        this._imaEvent('paused')
+      },
+    )
+
+    this._adsManager.addEventListener(
+      (window.google as any).ima.AdEvent.Type.RESUMED,
+      () => {
+        this._imaEvent('resumed')
+      },
+    )
+
+    this._adsManager.addEventListener(
+      (window.google as any).ima.AdEvent.Type.SKIPPED,
+      () => {
+        this._imaEvent('skipped')
+        if (this.extension && this.extension.skipAd) {
+          this._trackUrl(this.extension.skipAd)
+        }
+      },
+    )
+
+    this._adsManager.addEventListener(
+      (window.google as any).ima.AdEvent.Type.VOLUME_CHANGED,
+      () => {
+        this._imaEvent('volume_change')
+        this.changeIconVolume()
+      },
+    )
+
+    this._adsManager.addEventListener(
+      (window.google as any).ima.AdEvent.Type.VOLUME_MUTED,
+      () => {
+        this._imaEvent('volume_muted')
+        this.changeIconVolume()
+      },
+    )
+
+    this._adsManager.addEventListener(
+      (window.google as any).ima.AdEvent.Type.USER_CLOSE,
+      () => {
+        this._imaEvent('user_close')
+      },
+    )
 
     if (this.mute) {
-      this._setVolume(0);
+      this._setVolume(0)
     } else {
-      this._setVolume(this._volume);
+      this._setVolume(this._volume)
     }
-    this._setupOverlay();
+    this._setupOverlay()
   }
 
   _triggerStartAd(url: string) {
     if (!this._isAdStartedTriggered) {
-      this._isAdStartedTriggered = true;
+      this._isAdStartedTriggered = true
       this.trigger('advertisement_started', {
-        url
-      });
+        url,
+      })
     }
   }
 
   _remainingTime(ad: any) {
     if (!ad || !this._adsManager) {
-      return;
+      return
     }
-    const remainingTime = Math.abs(this._adsManager.getRemainingTime());
-    const duration = ad.getDuration() || ad.getMinSuggestedDuration();
+    const remainingTime = Math.abs(this._adsManager.getRemainingTime())
+    const duration = ad.getDuration() || ad.getMinSuggestedDuration()
 
     if (!this.firstRemaininTime) {
-      this.firstRemaininTime = this._adsManager.getRemainingTime();
+      this.firstRemaininTime = this._adsManager.getRemainingTime()
     }
 
-    const shouldShowSkip = remainingTime < this.firstRemaininTime &&
+    const shouldShowSkip =
+      remainingTime < this.firstRemaininTime &&
       this.extension.timeOffset > -1 &&
       this.firstRemaininTime > this.extension.timeOffset &&
-      !(duration > 0 && Math.abs(duration) < this.extension.timeOffset);
+      !(duration > 0 && Math.abs(duration) < this.extension.timeOffset)
 
     if (!shouldShowSkip) {
-      return;
+      return
     }
 
-    this.$skipAd.show();
-    const offset = Math.round(this.extension.timeOffset - Math.abs(this.firstRemaininTime - remainingTime));
+    this.$skipAd.show()
+    const offset = Math.round(
+      this.extension.timeOffset -
+        Math.abs(this.firstRemaininTime - remainingTime),
+    )
 
     if (offset > 0) {
-      this.$skipAd.addClass('skip-ad-time');
-      this.$skipAd.text(this.core.i18n.t('you_can_skip_ad') + ' ' + offset);
+      this.$skipAd.addClass('skip-ad-time')
+      this.$skipAd.text(this.core.i18n.t('you_can_skip_ad') + ' ' + offset)
     } else {
-      this.$skipAd.removeClass('skip-ad-time');
-      this.$skipAd.text(this.core.i18n.t('skip_ad'));
+      this.$skipAd.removeClass('skip-ad-time')
+      this.$skipAd.text(this.core.i18n.t('skip_ad'))
     }
   }
 
   private _cleverContinueAd(error?: any) {
     try {
-      this.destroy();
+      this.destroy()
     } catch (error) {
       // LogManager.exception(error);
-      reportError(error);
+      reportError(error)
     }
-    this.trigger('continue_ad', { error });
+    this.trigger('continue_ad', { error })
   }
 
   private _imaEvent(eventName: string, e?: any) {
-    $.isFunction((this._events as any)[eventName]) && (this._events as any)[eventName](e);
+    $.isFunction((this._events as any)[eventName]) &&
+      (this._events as any)[eventName](e)
   }
 
   changeIconVolume() {
     if (!this._adsManager) {
-      return;
+      return
     }
-    this.$muteIcon.show();
+    this.$muteIcon.show()
     if (this._adsManager.getVolume() === 0) {
       if (!this._volume && this._adsManager.getVolume()) {
-        this._volume = this._adsManager.getVolume() * 100;
+        this._volume = this._adsManager.getVolume() * 100
       }
-      this.$muteIcon.find('.mute-off-ad-icon').show();
-      this.$muteIcon.find('.mute-on-ad-icon').hide();
+      this.$muteIcon.find('.mute-off-ad-icon').show()
+      this.$muteIcon.find('.mute-on-ad-icon').hide()
     } else {
-      this._volume = this._adsManager.getVolume() * 100;
-      this.$muteIcon.find('.mute-on-ad-icon').show();
-      this.$muteIcon.find('.mute-off-ad-icon').hide();
+      this._volume = this._adsManager.getVolume() * 100
+      this.$muteIcon.find('.mute-on-ad-icon').show()
+      this.$muteIcon.find('.mute-off-ad-icon').hide()
     }
   }
 
   _setupOverlay() {
-    this.$muteIcon.off('click');
-    this.$skipAd.off('click');
-    this.$areaClick.off('click');
-    this.$muteIcon.off();
-    this.$skipAd.off();
-    this.$areaClick.off();
+    this.$muteIcon.off('click')
+    this.$skipAd.off('click')
+    this.$areaClick.off('click')
+    this.$muteIcon.off()
+    this.$skipAd.off()
+    this.$areaClick.off()
     this.$muteIcon.on('click', () => {
       if (this._adsManager) {
         if (this._adsManager.getVolume() === 0) {
-          this._setVolume((this._prevValueVolume ? this._prevValueVolume : this._volume));
+          this._setVolume(
+            this._prevValueVolume ? this._prevValueVolume : this._volume,
+          )
         } else {
-          this._setVolume(0);
+          this._setVolume(0)
         }
-        this.changeIconVolume();
+        this.changeIconVolume()
       }
-    });
+    })
     this.$skipAd.on('click', () => {
       if (this.extension.skipEvents) {
-        this._trackUrls(this.extension.skipEvents);
+        this._trackUrls(this.extension.skipEvents)
       }
       if (this.extension.progressEvents) {
-        this._trackUrls(this.extension.progressEvents);
+        this._trackUrls(this.extension.progressEvents)
       }
       if (this.extension && this.extension.skipAd) {
-        this._trackUrl(this.extension.skipAd);
+        this._trackUrl(this.extension.skipAd)
       }
-      this._adsManager.stop();
-      console.warn('skip ad');
-    });
+      this._adsManager.stop()
+      console.warn('skip ad')
+    })
 
     if (this.extension.clickThrough) {
-      this.$areaClick.show();
+      this.$areaClick.show()
       this.$areaClick.on('click', () => {
-        window.open(this.extension.clickThrough, '_blank');
-        console.warn(this.extension.clickTrackings);
+        window.open(this.extension.clickThrough, '_blank')
+        console.warn(this.extension.clickTrackings)
         if (this.extension.clickTrackings.length) {
-          this._trackUrls(this.extension.clickTrackings);
+          this._trackUrls(this.extension.clickTrackings)
         }
-      });
+      })
     }
 
-    this._hideControls();
+    this._hideControls()
 
-    this._playAds();
+    this._playAds()
   }
 
   _trackUrls(urls: string[]) {
     for (let i = 0; i < urls.length; i++) {
-      this._trackUrl(urls[i]);
+      this._trackUrl(urls[i])
     }
   }
 
   _trackUrl(url: string) {
     if (url) {
-      const i = new Image();
+      const i = new Image()
 
-      i.src = url;
+      i.src = url
     }
   }
 
   destroy() {
     if (this.intervalTimer) {
-      clearInterval(this.intervalTimer);
-      this.intervalTimer = null;
+      clearInterval(this.intervalTimer)
+      this.intervalTimer = null
     }
     if (Roll._adDisplayContainer) {
       if (this._adsManager) {
-        this._adsManager.destroy();
+        this._adsManager.destroy()
       }
     }
   }