bitmovin-player-ui - npm Package Compare versions

Comparing version 2.17.0 to 3.0.0-a1pha.1

CHANGELOG.md

@@ -7,2 +7,18 @@ # Change Log
 
+## [3.0.0 alpha]
+
+This major release is adjusted to the changed API of Bitmovin Player v8.
+
+### Changed
+- Player type definitions updated to player v8
+
+### Removed
+- Everything deprecated in 2.x
+- Player v7 feature detections and compatibility fallbacks
+
+## [develop]
+
+### Fixed
+- Rendering of single-image thumbnails
+
 ## [2.17.0]
@@ -9,0 +25,0 @@

dist/js/framework/components/adclickoverlay.js

@@ -29,3 +29,3 @@ "use strict";
             || player.getConfig().advertising.clickThroughEnabled;
-        player.addEventHandler(player.EVENT.ON_AD_STARTED, function (event) {
+        player.on(player.exports.Event.AdStarted, function (event) {
             clickThroughUrl = event.clickThroughUrl;
@@ -44,5 +44,5 @@ if (clickThroughEnabled) {
         };
-        player.addEventHandler(player.EVENT.ON_AD_FINISHED, adFinishedHandler);
-        player.addEventHandler(player.EVENT.ON_AD_SKIPPED, adFinishedHandler);
-        player.addEventHandler(player.EVENT.ON_AD_ERROR, adFinishedHandler);
+        player.on(player.exports.Event.AdFinished, adFinishedHandler);
+        player.on(player.exports.Event.AdSkipped, adFinishedHandler);
+        player.on(player.exports.Event.AdError, adFinishedHandler);
         this.onClick.subscribe(function () {
@@ -52,5 +52,6 @@ // Pause the ad when overlay is clicked
             // Notify the player of the clicked ad
-            player.fireEvent(player.EVENT.ON_AD_CLICKED, {
-                clickThroughUrl: clickThroughUrl,
-            });
+            // TODO add a callback to AdStarted to allow the ads renderer to signal a clickThroughUrl click
+            // player.fireEvent(player.exports.Event.AdClicked, {
+            //   clickThroughUrl: clickThroughUrl,
+            // });
         });
@@ -57,0 +58,0 @@ };

dist/js/framework/components/admessagelabel.js

@@ -39,13 +39,11 @@ "use strict";
             updateMessageHandler();
-            player.addEventHandler(player.EVENT.ON_TIME_CHANGED, updateMessageHandler);
-            player.addEventHandler(player.EVENT.ON_CAST_TIME_UPDATED, updateMessageHandler);
+            player.on(player.exports.Event.TimeChanged, updateMessageHandler);
         };
         var adEndHandler = function () {
-            player.removeEventHandler(player.EVENT.ON_TIME_CHANGED, updateMessageHandler);
-            player.removeEventHandler(player.EVENT.ON_CAST_TIME_UPDATED, updateMessageHandler);
+            player.off(player.exports.Event.TimeChanged, updateMessageHandler);
         };
-        player.addEventHandler(player.EVENT.ON_AD_STARTED, adStartHandler);
-        player.addEventHandler(player.EVENT.ON_AD_SKIPPED, adEndHandler);
-        player.addEventHandler(player.EVENT.ON_AD_ERROR, adEndHandler);
-        player.addEventHandler(player.EVENT.ON_AD_FINISHED, adEndHandler);
+        player.on(player.exports.Event.AdStarted, adStartHandler);
+        player.on(player.exports.Event.AdSkipped, adEndHandler);
+        player.on(player.exports.Event.AdError, adEndHandler);
+        player.on(player.exports.Event.AdFinished, adEndHandler);
     };
@@ -52,0 +50,0 @@ return AdMessageLabel;

dist/js/framework/components/adskipbutton.js

@@ -58,13 +58,11 @@ "use strict";
             updateSkipMessageHandler();
-            player.addEventHandler(player.EVENT.ON_TIME_CHANGED, updateSkipMessageHandler);
-            player.addEventHandler(player.EVENT.ON_CAST_TIME_UPDATED, updateSkipMessageHandler);
+            player.on(player.exports.Event.TimeChanged, updateSkipMessageHandler);
         };
         var adEndHandler = function () {
-            player.removeEventHandler(player.EVENT.ON_TIME_CHANGED, updateSkipMessageHandler);
-            player.removeEventHandler(player.EVENT.ON_CAST_TIME_UPDATED, updateSkipMessageHandler);
+            player.off(player.exports.Event.TimeChanged, updateSkipMessageHandler);
         };
-        player.addEventHandler(player.EVENT.ON_AD_STARTED, adStartHandler);
-        player.addEventHandler(player.EVENT.ON_AD_SKIPPED, adEndHandler);
-        player.addEventHandler(player.EVENT.ON_AD_ERROR, adEndHandler);
-        player.addEventHandler(player.EVENT.ON_AD_FINISHED, adEndHandler);
+        player.on(player.exports.Event.AdStarted, adStartHandler);
+        player.on(player.exports.Event.AdSkipped, adEndHandler);
+        player.on(player.exports.Event.AdError, adEndHandler);
+        player.on(player.exports.Event.AdFinished, adEndHandler);
         this.onClick.subscribe(function () {
@@ -71,0 +69,0 @@ // Try to skip the ad (this only works if it is skippable so we don't need to take extra care of that here)

dist/js/framework/components/airplaytogglebutton.js

@@ -54,3 +54,3 @@ "use strict";
         };
-        player.addEventHandler(player.EVENT.ON_AIRPLAY_AVAILABLE, airPlayAvailableHandler);
+        player.on(player.exports.Event.AirplayAvailable, airPlayAvailableHandler);
         // Startup init
@@ -57,0 +57,0 @@ airPlayAvailableHandler(); // Hide button if AirPlay is not available

dist/js/framework/components/audioqualityselectbox.js

@@ -27,12 +27,3 @@ "use strict";
         var selectCurrentAudioQuality = function () {
-            if (player.getAudioQuality) {
-                // Since player 7.3.1
-                _this.selectItem(player.getAudioQuality().id);
-            }
-            else {
-                // Backwards compatibility for players <= 7.3.0
-                // TODO remove in next major release
-                var data = player.getDownloadedAudioData();
-                _this.selectItem(data.isAuto ? 'auto' : data.id);
-            }
+            _this.selectItem(player.getAudioQuality().id);
         };
@@ -56,19 +47,11 @@ var updateAudioQualities = function () {
         // Update qualities when audio track has changed
-        player.addEventHandler(player.EVENT.ON_AUDIO_CHANGED, updateAudioQualities);
+        player.on(player.exports.Event.AudioChanged, updateAudioQualities);
         // Update qualities when source goes away
-        player.addEventHandler(player.EVENT.ON_SOURCE_UNLOADED, updateAudioQualities);
+        player.on(player.exports.Event.SourceUnloaded, updateAudioQualities);
         // Update qualities when a new source is loaded
-        player.addEventHandler(player.EVENT.ON_READY, updateAudioQualities);
+        player.on(player.exports.Event.Ready, updateAudioQualities);
         // Update qualities when the period within a source changes
-        player.addEventHandler(player.EVENT.ON_PERIOD_SWITCHED, updateAudioQualities);
+        player.on(player.exports.Event.PeriodSwitched, updateAudioQualities);
         // Update quality selection when quality is changed (from outside)
-        if (player.EVENT.ON_AUDIO_QUALITY_CHANGED) {
-            // Since player 7.3.1
-            player.addEventHandler(player.EVENT.ON_AUDIO_QUALITY_CHANGED, selectCurrentAudioQuality);
-        }
-        else {
-            // Backwards compatibility for players <= 7.3.0
-            // TODO remove in next major release
-            player.addEventHandler(player.EVENT.ON_AUDIO_DOWNLOAD_QUALITY_CHANGE, selectCurrentAudioQuality);
-        }
+        player.on(player.exports.Event.AudioQualityChanged, selectCurrentAudioQuality);
     };
@@ -75,0 +58,0 @@ return AudioQualitySelectBox;

dist/js/framework/components/audiotrackselectbox.js

@@ -42,3 +42,3 @@ "use strict";
             // Select the correct audio track after the tracks have been added
-            // This is also important in case we missed the `ON_AUDIO_CHANGED` event, e.g. when `playback.audioLanguage`
+            // This is also important in case we missed the `AudioChanged` event, e.g. when `playback.audioLanguage`
             // is configured but the event is fired before the UI is created.
@@ -51,14 +51,12 @@ selectCurrentAudioTrack();
         // Update selection when selected track has changed
-        player.addEventHandler(player.EVENT.ON_AUDIO_CHANGED, selectCurrentAudioTrack);
+        player.on(player.exports.Event.AudioChanged, selectCurrentAudioTrack);
         // Update tracks when source goes away
-        player.addEventHandler(player.EVENT.ON_SOURCE_UNLOADED, updateAudioTracks);
+        player.on(player.exports.Event.SourceUnloaded, updateAudioTracks);
         // Update tracks when a new source is loaded
-        player.addEventHandler(player.EVENT.ON_READY, updateAudioTracks);
+        player.on(player.exports.Event.Ready, updateAudioTracks);
         // Update tracks when the period within a source changes
-        player.addEventHandler(player.EVENT.ON_PERIOD_SWITCHED, updateAudioTracks);
-        // Update tracks when a track is added or removed (since player 7.1.4)
-        if (player.EVENT.ON_AUDIO_ADDED && player.EVENT.ON_AUDIO_REMOVED) {
-            player.addEventHandler(player.EVENT.ON_AUDIO_ADDED, updateAudioTracks);
-            player.addEventHandler(player.EVENT.ON_AUDIO_REMOVED, updateAudioTracks);
-        }
+        player.on(player.exports.Event.PeriodSwitched, updateAudioTracks);
+        // Update tracks when a track is added or removed
+        player.on(player.exports.Event.AudioAdded, updateAudioTracks);
+        player.on(player.exports.Event.AudioRemoved, updateAudioTracks);
         // Populate tracks at startup
@@ -65,0 +63,0 @@ updateAudioTracks();

dist/js/framework/components/bufferingoverlay.js

@@ -51,5 +51,5 @@ "use strict";
         };
-        player.addEventHandler(player.EVENT.ON_STALL_STARTED, showOverlay);
-        player.addEventHandler(player.EVENT.ON_STALL_ENDED, hideOverlay);
-        player.addEventHandler(player.EVENT.ON_SOURCE_UNLOADED, hideOverlay);
+        player.on(player.exports.Event.StallStarted, showOverlay);
+        player.on(player.exports.Event.StallEnded, hideOverlay);
+        player.on(player.exports.Event.SourceUnloaded, hideOverlay);
         // Show overlay if player is already stalled at init
@@ -56,0 +56,0 @@ if (player.isStalled()) {

dist/js/framework/components/caststatusoverlay.js

@@ -34,3 +34,3 @@ "use strict";
         _super.prototype.configure.call(this, player, uimanager);
-        player.addEventHandler(player.EVENT.ON_CAST_WAITING_FOR_DEVICE, function (event) {
+        player.on(player.exports.Event.CastWaitingForDevice, function (event) {
             _this.show();
@@ -41,3 +41,3 @@ // Get device name and update status text while connecting
         });
-        player.addEventHandler(player.EVENT.ON_CAST_STARTED, function (event) {
+        player.on(player.exports.Event.CastStarted, function (event) {
             // Session is started or resumed
@@ -50,3 +50,3 @@ // For cases when a session is resumed, we do not receive the previous events and therefore show the status panel
         });
-        player.addEventHandler(player.EVENT.ON_CAST_STOPPED, function (event) {
+        player.on(player.exports.Event.CastStopped, function (event) {
             // Cast session gone, hide the status panel
@@ -53,0 +53,0 @@ _this.hide();

dist/js/framework/components/casttogglebutton.js

@@ -54,12 +54,12 @@ "use strict";
         };
-        player.addEventHandler(player.EVENT.ON_CAST_AVAILABLE, castAvailableHander);
+        player.on(player.exports.Event.CastAvailable, castAvailableHander);
         // Toggle button 'on' state
-        player.addEventHandler(player.EVENT.ON_CAST_WAITING_FOR_DEVICE, function () {
+        player.on(player.exports.Event.CastWaitingForDevice, function () {
             _this.on();
         });
-        player.addEventHandler(player.EVENT.ON_CAST_STARTED, function () {
-            // When a session is resumed, there is no ON_CAST_START event, so we also need to toggle here for such cases
+        player.on(player.exports.Event.CastStarted, function () {
+            // When a session is resumed, there is no CastStart event, so we also need to toggle here for such cases
             _this.on();
         });
-        player.addEventHandler(player.EVENT.ON_CAST_STOPPED, function () {
+        player.on(player.exports.Event.CastStopped, function () {
             _this.off();
@@ -66,0 +66,0 @@ });

dist/js/framework/components/castuicontainer.js

@@ -65,8 +65,8 @@ "use strict";
         };
-        player.addEventHandler(player.EVENT.ON_READY, showUiWithTimeout);
-        player.addEventHandler(player.EVENT.ON_SOURCE_LOADED, showUiWithTimeout);
-        player.addEventHandler(player.EVENT.ON_PLAY, showUiWithTimeout);
-        player.addEventHandler(player.EVENT.ON_PAUSED, showUiPermanently);
-        player.addEventHandler(player.EVENT.ON_SEEK, showUiPermanently);
-        player.addEventHandler(player.EVENT.ON_SEEKED, showUiAfterSeek);
+        player.on(player.exports.Event.Ready, showUiWithTimeout);
+        player.on(player.exports.Event.SourceLoaded, showUiWithTimeout);
+        player.on(player.exports.Event.Play, showUiWithTimeout);
+        player.on(player.exports.Event.Paused, showUiPermanently);
+        player.on(player.exports.Event.Seek, showUiPermanently);
+        player.on(player.exports.Event.Seeked, showUiAfterSeek);
     };
@@ -73,0 +73,0 @@ CastUIContainer.prototype.release = function () {

dist/js/framework/components/errormessageoverlay.js

@@ -37,3 +37,3 @@ "use strict";
         var config = this.getConfig();
-        player.addEventHandler(player.EVENT.ON_ERROR, function (event) {
+        player.on(player.exports.Event.Error, function (event) {
             var message = event.message;
@@ -62,3 +62,3 @@ // Process message translations
         });
-        player.addEventHandler(player.EVENT.ON_SOURCE_LOADED, function (event) {
+        player.on(player.exports.Event.SourceLoaded, function (event) {
             if (_this.isShown()) {
@@ -65,0 +65,0 @@ _this.tvNoiseBackground.stop();

dist/js/framework/components/fullscreentogglebutton.js

@@ -39,4 +39,4 @@ "use strict";
         };
-        player.addEventHandler(player.EVENT.ON_FULLSCREEN_ENTER, fullscreenStateHandler);
-        player.addEventHandler(player.EVENT.ON_FULLSCREEN_EXIT, fullscreenStateHandler);
+        player.on(player.exports.Event.FullscreenEnter, fullscreenStateHandler);
+        player.on(player.exports.Event.FullscreenExit, fullscreenStateHandler);
         this.onClick.subscribe(function () {
@@ -43,0 +43,0 @@ if (player.isFullscreen()) {

dist/js/framework/components/hugeplaybacktogglebutton.js

@@ -34,3 +34,3 @@ "use strict";
         var togglePlayback = function () {
-            if (player.isPlaying()) {
+            if (player.isPlaying() || _this.isPlayInitiated) {
                 player.pause('ui');
@@ -75,3 +75,3 @@ }
             if (firstPlay) {
-                // Try to start playback. Then we wait for ON_PLAY and only when it arrives, we disable the firstPlay flag.
+                // Try to start playback. Then we wait for Play and only when it arrives, we disable the firstPlay flag.
                 // If we disable the flag here, onClick was triggered programmatically instead of by a user interaction, and
@@ -105,7 +105,7 @@ // playback is blocked (e.g. on mobile devices due to the programmatic play() call), we loose the chance to
         });
-        player.addEventHandler(player.EVENT.ON_PLAY, function () {
+        player.on(player.exports.Event.Play, function () {
             // Playback has really started, we can disable the flag to switch to normal toggle button handling
             firstPlay = false;
         });
-        player.addEventHandler(player.EVENT.ON_WARNING, function (event) {
+        player.on(player.exports.Event.Warning, function (event) {
             // 5008 == Playback could not be started
@@ -119,3 +119,3 @@ if (event.code === 5008) {
         var castInitializationHandler = function (event) {
-            if (event.type === player.EVENT.ON_CAST_START) {
+            if (event.type === player.exports.Event.CastStart) {
                 // Hide button when session is being initialized
@@ -129,5 +129,5 @@ _this.hide();
         };
-        player.addEventHandler(player.EVENT.ON_CAST_START, castInitializationHandler);
-        player.addEventHandler(player.EVENT.ON_CAST_STARTED, castInitializationHandler);
-        player.addEventHandler(player.EVENT.ON_CAST_STOPPED, castInitializationHandler);
+        player.on(player.exports.Event.CastStart, castInitializationHandler);
+        player.on(player.exports.Event.CastStarted, castInitializationHandler);
+        player.on(player.exports.Event.CastStopped, castInitializationHandler);
         var suppressPlayButtonTransitionAnimation = function () {
@@ -147,3 +147,3 @@ // Disable the current animation
         // simply rely on isPlaying and the play state events.
-        var isAutoplayUpcoming = !player.isReady() && isAutoplayEnabled;
+        var isAutoplayUpcoming = !player.getConfig(true).source && isAutoplayEnabled;
         // Hide the play button when the player is already playing or autoplay is upcoming
@@ -156,3 +156,3 @@ if (player.isPlaying() || isAutoplayUpcoming) {
             // Show the play button without an animation if a play attempt is blocked
-            player.addEventHandler(player.EVENT.ON_WARNING, function (event) {
+            player.on(player.exports.Event.Warning, function (event) {
                 if (event.code === 5008) {
@@ -159,0 +159,0 @@ suppressPlayButtonTransitionAnimation();

dist/js/framework/components/metadatalabel.js

@@ -61,5 +61,5 @@ "use strict";
         // Reinit label when a new source is loaded
-        player.addEventHandler(player.EVENT.ON_SOURCE_LOADED, init);
+        player.on(player.exports.Event.SourceLoaded, init);
         // Clear labels when source is unloaded
-        player.addEventHandler(player.EVENT.ON_SOURCE_UNLOADED, unload);
+        player.on(player.exports.Event.SourceUnloaded, unload);
     };
@@ -66,0 +66,0 @@ return MetadataLabel;

dist/js/framework/components/pictureinpicturetogglebutton.js

@@ -59,8 +59,8 @@ "use strict";
         };
-        player.addEventHandler(player.EVENT.ON_READY, pipAvailableHander);
+        player.on(player.exports.Event.Ready, pipAvailableHander);
         // Toggle button 'on' state
-        player.addEventHandler(player.EVENT.ON_PICTURE_IN_PICTURE_ENTER, function () {
+        player.on(player.exports.Event.PictureInPictureEnter, function () {
             _this.on();
         });
-        player.addEventHandler(player.EVENT.ON_PICTURE_IN_PICTURE_EXIT, function () {
+        player.on(player.exports.Event.PictureInPictureExit, function () {
             _this.off();
@@ -67,0 +67,0 @@ });

dist/js/framework/components/playbackspeedselectbox.js

@@ -38,7 +38,4 @@ "use strict";
         // when the player hits onReady again, adjust the playback speed selection
-        player.addEventHandler(player.EVENT.ON_READY, setDefaultValue);
-        if (player.EVENT.ON_PLAYBACK_SPEED_CHANGED) {
-            // Since player 7.8.0
-            player.addEventHandler(player.EVENT.ON_PLAYBACK_SPEED_CHANGED, setDefaultValue);
-        }
+        player.on(player.exports.Event.Ready, setDefaultValue);
+        player.on(player.exports.Event.PlaybackSpeedChanged, setDefaultValue);
     };
@@ -45,0 +42,0 @@ PlaybackSpeedSelectBox.prototype.setSpeed = function (speed) {

dist/js/framework/components/playbacktimelabel.js

@@ -107,9 +107,8 @@ "use strict";
         };
-        player.addEventHandler(player.EVENT.ON_TIME_CHANGED, playbackTimeHandler);
-        player.addEventHandler(player.EVENT.ON_SEEKED, playbackTimeHandler);
-        player.addEventHandler(player.EVENT.ON_CAST_TIME_UPDATED, playbackTimeHandler);
-        player.addEventHandler(player.EVENT.ON_TIME_SHIFT, updateLiveTimeshiftState);
-        player.addEventHandler(player.EVENT.ON_TIME_SHIFTED, updateLiveTimeshiftState);
-        player.addEventHandler(player.EVENT.ON_PLAY, updateLiveTimeshiftState);
-        player.addEventHandler(player.EVENT.ON_PAUSED, updateLiveTimeshiftState);
+        player.on(player.exports.Event.TimeChanged, playbackTimeHandler);
+        player.on(player.exports.Event.Seeked, playbackTimeHandler);
+        player.on(player.exports.Event.TimeShift, updateLiveTimeshiftState);
+        player.on(player.exports.Event.TimeShifted, updateLiveTimeshiftState);
+        player.on(player.exports.Event.Play, updateLiveTimeshiftState);
+        player.on(player.exports.Event.Paused, updateLiveTimeshiftState);
         var init = function () {
@@ -128,3 +127,3 @@ // Reset min-width when a new source is ready (especially for switching VOD/Live modes where the label content
         };
-        player.addEventHandler(player.EVENT.ON_READY, init);
+        player.on(player.exports.Event.Ready, init);
         init();
@@ -131,0 +130,0 @@ };

dist/js/framework/components/playbacktogglebutton.d.ts

@@ -8,4 +8,5 @@ import { ToggleButton, ToggleButtonConfig } from './togglebutton';
     private static readonly CLASS_STOPTOGGLE;
+    protected isPlayInitiated: boolean;
     constructor(config?: ToggleButtonConfig);
     configure(player: bitmovin.PlayerAPI, uimanager: UIInstanceManager, handleClickEvent?: boolean): void;
 }

dist/js/framework/components/playbacktogglebutton.js

@@ -27,2 +27,3 @@ "use strict";
         }, _this.config);
+        _this.isPlayInitiated = false;
         return _this;
@@ -42,3 +43,3 @@ }
             }
-            if (player.isPlaying()) {
+            if (player.isPlaying() || _this.isPlayInitiated) {
                 _this.on();
@@ -51,21 +52,25 @@ }
         // Call handler upon these events
-        player.addEventHandler(player.EVENT.ON_PLAY, playbackStateHandler);
-        player.addEventHandler(player.EVENT.ON_PAUSED, playbackStateHandler);
-        if (player.EVENT.ON_PLAYING) {
-            // Since player 7.3. Not really necessary but just in case we ever miss the ON_PLAY event.
-            player.addEventHandler(player.EVENT.ON_PLAYING, playbackStateHandler);
-        }
+        player.on(player.exports.Event.Play, function (e) {
+            _this.isPlayInitiated = true;
+            playbackStateHandler(e);
+        });
+        player.on(player.exports.Event.Paused, function (e) {
+            _this.isPlayInitiated = false;
+            playbackStateHandler(e);
+        });
+        player.on(player.exports.Event.Playing, function (e) {
+            _this.isPlayInitiated = false;
+            playbackStateHandler(e);
+        });
         // after unloading + loading a new source, the player might be in a different playing state (from playing into stopped)
-        player.addEventHandler(player.EVENT.ON_SOURCE_LOADED, playbackStateHandler);
-        player.addEventHandler(player.EVENT.ON_SOURCE_UNLOADED, playbackStateHandler);
+        player.on(player.exports.Event.SourceLoaded, playbackStateHandler);
+        player.on(player.exports.Event.SourceUnloaded, playbackStateHandler);
         // when playback finishes, player turns to paused mode
-        player.addEventHandler(player.EVENT.ON_PLAYBACK_FINISHED, playbackStateHandler);
-        player.addEventHandler(player.EVENT.ON_CAST_STARTED, playbackStateHandler);
-        player.addEventHandler(player.EVENT.ON_CAST_PLAYING, playbackStateHandler);
-        player.addEventHandler(player.EVENT.ON_CAST_PAUSED, playbackStateHandler);
-        player.addEventHandler(player.EVENT.ON_CAST_PLAYBACK_FINISHED, playbackStateHandler);
+        player.on(player.exports.Event.PlaybackFinished, playbackStateHandler);
+        player.on(player.exports.Event.CastStarted, playbackStateHandler);
         // When a playback attempt is rejected with warning 5008, we switch the button state back to off
-        // This is required for blocked autoplay, because there is no ON_PAUSED event in such case
-        player.addEventHandler(player.EVENT.ON_WARNING, function (event) {
+        // This is required for blocked autoplay, because there is no Paused event in such case
+        player.on(player.exports.Event.Warning, function (event) {
             if (event.code === 5008) {
+                _this.isPlayInitiated = false;
                 _this.off();
@@ -90,3 +95,3 @@ }
             this.onClick.subscribe(function () {
-                if (player.isPlaying()) {
+                if (player.isPlaying() || _this.isPlayInitiated) {
                     player.pause('ui');
@@ -93,0 +98,0 @@ }

dist/js/framework/components/recommendationoverlay.js

@@ -64,5 +64,5 @@ "use strict";
         // Add recommendation when a source is loaded
-        player.addEventHandler(player.EVENT.ON_READY, setupRecommendations);
+        player.on(player.exports.Event.Ready, setupRecommendations);
         // Remove recommendations and hide overlay when source is unloaded
-        player.addEventHandler(player.EVENT.ON_SOURCE_UNLOADED, function () {
+        player.on(player.exports.Event.SourceUnloaded, function () {
             clearRecommendations();
@@ -72,3 +72,3 @@ _this.hide();
         // Display recommendations when playback has finished
-        player.addEventHandler(player.EVENT.ON_PLAYBACK_FINISHED, function () {
+        player.on(player.exports.Event.PlaybackFinished, function () {
             // Dismiss ON_PLAYBACK_FINISHED events at the end of ads
@@ -82,3 +82,3 @@ // TODO remove this workaround once issue #1278 is solved
         // Hide recommendations when playback starts, e.g. a restart
-        player.addEventHandler(player.EVENT.ON_PLAY, function () {
+        player.on(player.exports.Event.Play, function () {
             _this.hide();
@@ -85,0 +85,0 @@ });

dist/js/framework/components/seekbar.d.ts

@@ -22,3 +22,3 @@ import { Component, ComponentConfig } from './component';
      * as possible to avoid jitter.
-     * Set to -1 to disable smooth updating and update it on player ON_TIME_CHANGED events instead.
+     * Set to -1 to disable smooth updating and update it on player TimeChanged events instead.
      * Default: 50 (50ms = 20fps).
@@ -25,0 +25,0 @@ */

dist/js/framework/components/seekbar.js

@@ -129,27 +129,25 @@ "use strict";
         // init playback position when the player is ready
-        player.addEventHandler(player.EVENT.ON_READY, playbackPositionHandler);
+        player.on(player.exports.Event.Ready, playbackPositionHandler);
         // update playback position when it changes
-        player.addEventHandler(player.EVENT.ON_TIME_CHANGED, playbackPositionHandler);
+        player.on(player.exports.Event.TimeChanged, playbackPositionHandler);
         // update bufferlevel when buffering is complete
-        player.addEventHandler(player.EVENT.ON_STALL_ENDED, playbackPositionHandler);
+        player.on(player.exports.Event.StallEnded, playbackPositionHandler);
         // update playback position when a seek has finished
-        player.addEventHandler(player.EVENT.ON_SEEKED, playbackPositionHandler);
+        player.on(player.exports.Event.Seeked, playbackPositionHandler);
         // update playback position when a timeshift has finished
-        player.addEventHandler(player.EVENT.ON_TIME_SHIFTED, playbackPositionHandler);
+        player.on(player.exports.Event.TimeShifted, playbackPositionHandler);
         // update bufferlevel when a segment has been downloaded
-        player.addEventHandler(player.EVENT.ON_SEGMENT_REQUEST_FINISHED, playbackPositionHandler);
-        // update playback position of Cast playback
-        player.addEventHandler(player.EVENT.ON_CAST_TIME_UPDATED, playbackPositionHandler);
+        player.on(player.exports.Event.SegmentRequestFinished, playbackPositionHandler);
         this.configureLivePausedTimeshiftUpdater(player, uimanager, playbackPositionHandler);
         // Seek handling
-        player.addEventHandler(player.EVENT.ON_SEEK, function () {
+        player.on(player.exports.Event.Seek, function () {
             _this.setSeeking(true);
         });
-        player.addEventHandler(player.EVENT.ON_SEEKED, function () {
+        player.on(player.exports.Event.Seeked, function () {
             _this.setSeeking(false);
         });
-        player.addEventHandler(player.EVENT.ON_TIME_SHIFT, function () {
+        player.on(player.exports.Event.TimeShift, function () {
             _this.setSeeking(true);
         });
-        player.addEventHandler(player.EVENT.ON_TIME_SHIFTED, function () {
+        player.on(player.exports.Event.TimeShifted, function () {
             _this.setSeeking(false);
@@ -229,3 +227,3 @@ });
         // is positioned absolutely and must therefore be updated when the size of the seekbar changes.
-        player.addEventHandler(player.EVENT.ON_PLAYER_RESIZE, function () {
+        player.on(player.exports.Event.PlayerResize, function () {
             _this.refreshPlaybackPosition();
@@ -239,4 +237,4 @@ });
         // It can also happen that the value changes once the player is ready, or when a new source is loaded, so we need
-        // to update on ON_READY too
-        player.addEventHandler(player.EVENT.ON_READY, function () {
+        // to update on Ready too
+        player.on(player.exports.Event.Ready, function () {
             _this.refreshPlaybackPosition();
@@ -261,3 +259,3 @@ });
         // Start updater when a live stream with timeshift window is paused
-        player.addEventHandler(player.EVENT.ON_PAUSED, function () {
+        player.on(player.exports.Event.Paused, function () {
             if (player.isLive() && player.getMaxTimeShift() < 0) {
@@ -268,3 +266,3 @@ pausedTimeshiftUpdater.start();
         // Stop updater when playback continues (no matter if the updater was started before)
-        player.addEventHandler(player.EVENT.ON_PLAY, function () { return pausedTimeshiftUpdater.clear(); });
+        player.on(player.exports.Event.Play, function () { return pausedTimeshiftUpdater.clear(); });
     };
@@ -276,3 +274,3 @@ SeekBar.prototype.configureSmoothPlaybackPositionUpdater = function (player, uimanager) {
          *
-         * We do not update the position directly from the ON_TIME_CHANGED event, because it arrives very jittery and
+         * We do not update the position directly from the TimeChanged event, because it arrives very jittery and
          * results in a jittery position indicator since the CSS transition time is statically set.
@@ -314,8 +312,7 @@ * To work around this issue, we maintain a local playback position that is updated in a stable regular interval
         };
-        player.addEventHandler(player.EVENT.ON_PLAY, startSmoothPlaybackPositionUpdater);
-        player.addEventHandler(player.EVENT.ON_CAST_PLAYING, startSmoothPlaybackPositionUpdater);
-        player.addEventHandler(player.EVENT.ON_PAUSED, stopSmoothPlaybackPositionUpdater);
-        player.addEventHandler(player.EVENT.ON_CAST_PAUSED, stopSmoothPlaybackPositionUpdater);
-        player.addEventHandler(player.EVENT.ON_PLAYBACK_FINISHED, stopSmoothPlaybackPositionUpdater);
-        player.addEventHandler(player.EVENT.ON_SEEKED, function () {
+        player.on(player.exports.Event.Play, startSmoothPlaybackPositionUpdater);
+        player.on(player.exports.Event.Playing, startSmoothPlaybackPositionUpdater);
+        player.on(player.exports.Event.Paused, stopSmoothPlaybackPositionUpdater);
+        player.on(player.exports.Event.PlaybackFinished, stopSmoothPlaybackPositionUpdater);
+        player.on(player.exports.Event.Seeked, function () {
             currentTimeSeekBar = player.getCurrentTime();
@@ -351,7 +348,7 @@ });
         // Add markers when a source is loaded
-        player.addEventHandler(player.EVENT.ON_READY, setupMarkers);
+        player.on(player.exports.Event.Ready, setupMarkers);
         // Remove markers when unloaded
-        player.addEventHandler(player.EVENT.ON_SOURCE_UNLOADED, clearMarkers);
+        player.on(player.exports.Event.SourceUnloaded, clearMarkers);
         // Update markers when the size of the seekbar changes
-        player.addEventHandler(player.EVENT.ON_PLAYER_RESIZE, function () { return _this.updateMarkers(); });
+        player.on(player.exports.Event.PlayerResize, function () { return _this.updateMarkers(); });
         // Update markers when a marker is added or removed
@@ -358,0 +355,0 @@ uimanager.getConfig().events.onUpdated.subscribe(setupMarkers);

dist/js/framework/components/seekbarlabel.d.ts

 import { Container, ContainerConfig } from './container';
 import { UIInstanceManager } from '../uimanager';
+import Thumbnail = bitmovin.PlayerAPI.Thumbnail;
 /**
@@ -38,3 +39,5 @@ * Configuration interface for a {@link SeekBarLabel}.
      */
-    setThumbnail(thumbnail?: bitmovin.PlayerAPI.Thumbnail): void;
+    setThumbnail(thumbnail?: Thumbnail): void;
+    private thumbnailCssSprite(thumbnail, width, height);
+    private thumbnailCssSingleImage(thumbnail, width, height);
 }

dist/js/framework/components/seekbarlabel.js

@@ -65,3 +65,3 @@ "use strict";
                 _this.setTime(time);
-                _this.setThumbnail(player.getThumb(time));
+                _this.setThumbnail(player.getThumbnail(time));
             }
@@ -85,3 +85,3 @@ // Remove CSS classes from previous marker
         };
-        player.addEventHandler(player.EVENT.ON_READY, init);
+        player.on(player.exports.Event.Ready, init);
         init();
@@ -115,2 +115,3 @@ };
     SeekBarLabel.prototype.setThumbnail = function (thumbnail) {
+        var _this = this;
         if (thumbnail === void 0) { thumbnail = null; }
@@ -130,26 +131,46 @@ var thumbnailElement = this.thumbnail.getDomElement();
             this.thumbnailImageLoader.load(thumbnail.url, function (url, width, height) {
-                var thumbnailCountX = width / thumbnail.w;
-                var thumbnailCountY = height / thumbnail.h;
-                var thumbnailIndexX = thumbnail.x / thumbnail.w;
-                var thumbnailIndexY = thumbnail.y / thumbnail.h;
-                var sizeX = 100 * thumbnailCountX;
-                var sizeY = 100 * thumbnailCountY;
-                var offsetX = 100 * thumbnailIndexX;
-                var offsetY = 100 * thumbnailIndexY;
-                var aspectRatio = 1 / thumbnail.w * thumbnail.h;
-                // The thumbnail size is set by setting the CSS 'width' and 'padding-bottom' properties. 'padding-bottom' is
-                // used because it is relative to the width and can be used to set the aspect ratio of the thumbnail.
-                // A default value for width is set in the stylesheet and can be overwritten from there or anywhere else.
-                thumbnailElement.css({
-                    'display': 'inherit',
-                    'background-image': "url(" + thumbnail.url + ")",
-                    'padding-bottom': 100 * aspectRatio + "%",
-                    'background-size': sizeX + "% " + sizeY + "%",
-                    'background-position': "-" + offsetX + "% -" + offsetY + "%",
-                });
+                // can be checked like that because x/y/w/h are either all present or none
+                // https://www.w3.org/TR/media-frags/#naming-space
+                if (thumbnail.x !== undefined) {
+                    thumbnailElement.css(_this.thumbnailCssSprite(thumbnail, width, height));
+                }
+                else {
+                    thumbnailElement.css(_this.thumbnailCssSingleImage(thumbnail, width, height));
+                }
             });
         }
     };
+    SeekBarLabel.prototype.thumbnailCssSprite = function (thumbnail, width, height) {
+        var thumbnailCountX = width / thumbnail.width;
+        var thumbnailCountY = height / thumbnail.height;
+        var thumbnailIndexX = thumbnail.x / thumbnail.width;
+        var thumbnailIndexY = thumbnail.y / thumbnail.height;
+        var sizeX = 100 * thumbnailCountX;
+        var sizeY = 100 * thumbnailCountY;
+        var offsetX = 100 * thumbnailIndexX;
+        var offsetY = 100 * thumbnailIndexY;
+        var aspectRatio = 1 / thumbnail.width * thumbnail.height;
+        // The thumbnail size is set by setting the CSS 'width' and 'padding-bottom' properties. 'padding-bottom' is
+        // used because it is relative to the width and can be used to set the aspect ratio of the thumbnail.
+        // A default value for width is set in the stylesheet and can be overwritten from there or anywhere else.
+        return {
+            'display': 'inherit',
+            'background-image': "url(" + thumbnail.url + ")",
+            'padding-bottom': 100 * aspectRatio + "%",
+            'background-size': sizeX + "% " + sizeY + "%",
+            'background-position': "-" + offsetX + "% -" + offsetY + "%",
+        };
+    };
+    SeekBarLabel.prototype.thumbnailCssSingleImage = function (thumbnail, width, height) {
+        var aspectRatio = 1 / width * height;
+        return {
+            'display': 'inherit',
+            'background-image': "url(" + thumbnail.url + ")",
+            'padding-bottom': 100 * aspectRatio + "%",
+            'background-size': "100% 100%",
+            'background-position': "0 0",
+        };
+    };
     return SeekBarLabel;
 }(container_1.Container));
 exports.SeekBarLabel = SeekBarLabel;

dist/js/framework/components/subtitleoverlay.js

@@ -38,3 +38,3 @@ "use strict";
         this.subtitleManager = subtitleManager;
-        player.addEventHandler(player.EVENT.ON_CUE_ENTER, function (event) {
+        player.on(player.exports.Event.CueEnter, function (event) {
             // Sanitize cue data (must be done before the cue ID is generated in subtitleManager.cueEnter)
@@ -55,3 +55,3 @@ if (event.position) {
         });
-        player.addEventHandler(player.EVENT.ON_CUE_EXIT, function (event) {
+        player.on(player.exports.Event.CueExit, function (event) {
             var labelToRemove = subtitleManager.cueExit(event);
@@ -78,8 +78,8 @@ if (labelToRemove) {
         };
-        player.addEventHandler(player.EVENT.ON_AUDIO_CHANGED, subtitleClearHandler);
-        player.addEventHandler(player.EVENT.ON_SUBTITLE_CHANGED, subtitleClearHandler);
-        player.addEventHandler(player.EVENT.ON_SEEK, subtitleClearHandler);
-        player.addEventHandler(player.EVENT.ON_TIME_SHIFT, subtitleClearHandler);
-        player.addEventHandler(player.EVENT.ON_PLAYBACK_FINISHED, subtitleClearHandler);
-        player.addEventHandler(player.EVENT.ON_SOURCE_UNLOADED, subtitleClearHandler);
+        player.on(player.exports.Event.AudioChanged, subtitleClearHandler);
+        player.on(player.exports.Event.SubtitleChanged, subtitleClearHandler);
+        player.on(player.exports.Event.Seek, subtitleClearHandler);
+        player.on(player.exports.Event.TimeShift, subtitleClearHandler);
+        player.on(player.exports.Event.PlaybackFinished, subtitleClearHandler);
+        player.on(player.exports.Event.SourceUnloaded, subtitleClearHandler);
         uimanager.onComponentShow.subscribe(function (component) {
@@ -168,3 +168,3 @@ if (component instanceof controlbar_1.ControlBar) {
         };
-        player.addEventHandler(player.EVENT.ON_PLAYER_RESIZE, function () {
+        player.on(player.exports.Event.PlayerResize, function () {
             if (enabled) {
@@ -206,3 +206,3 @@ updateCEA608FontSize();
         };
-        player.addEventHandler(player.EVENT.ON_CUE_EXIT, function () {
+        player.on(player.exports.Event.CueExit, function () {
             if (!_this.subtitleManager.hasCues) {
@@ -214,4 +214,4 @@ // Disable CEA-608 mode when all subtitles are gone (to allow correct formatting and
         });
-        player.addEventHandler(player.EVENT.ON_SOURCE_UNLOADED, reset);
-        player.addEventHandler(player.EVENT.ON_SUBTITLE_CHANGED, reset);
+        player.on(player.exports.Event.SourceUnloaded, reset);
+        player.on(player.exports.Event.SubtitleChanged, reset);
     };
@@ -262,7 +262,7 @@ SubtitleOverlay.prototype.enablePreviewSubtitleLabel = function () {
     /**
-     * Calculates a unique ID for a subtitle cue, which is needed to associate an ON_CUE_ENTER with its ON_CUE_EXIT
-     * event so we can remove the correct subtitle in ON_CUE_EXIT when multiple subtitles are active at the same time.
+     * Calculates a unique ID for a subtitle cue, which is needed to associate an CueEnter with its CueExit
+     * event so we can remove the correct subtitle in CueExit when multiple subtitles are active at the same time.
      * The start time plus the text should make a unique identifier, and in the only case where a collision
      * can happen, two similar texts will be displayed at a similar time and a similar position (or without position).
-     * The start time should always be known, because it is required to schedule the ON_CUE_ENTER event. The end time
+     * The start time should always be known, because it is required to schedule the CueEnter event. The end time
      * must not necessarily be known and therefore cannot be used for the ID.
@@ -327,3 +327,3 @@ * @param event
              * the wrong order. This rare case has yet to be observed. If it ever gets an issue, we can take the unstable
-             * cue end time (which can change between ON_CUE_ENTER and ON_CUE_EXIT IN ON_CUE_UPDATE) and use it as an
+             * 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.
@@ -330,0 +330,0 @@ */

dist/js/framework/components/subtitleselectbox.js

@@ -45,11 +45,11 @@ "use strict";
         // React to API events
-        player.addEventHandler(player.EVENT.ON_SUBTITLE_ADDED, updateSubtitles);
-        player.addEventHandler(player.EVENT.ON_SUBTITLE_CHANGED, selectCurrentSubtitle);
-        player.addEventHandler(player.EVENT.ON_SUBTITLE_REMOVED, updateSubtitles);
+        player.on(player.exports.Event.SubtitleAdded, updateSubtitles);
+        player.on(player.exports.Event.SubtitleChanged, selectCurrentSubtitle);
+        player.on(player.exports.Event.SubtitleRemoved, updateSubtitles);
         // Update subtitles when source goes away
-        player.addEventHandler(player.EVENT.ON_SOURCE_UNLOADED, updateSubtitles);
+        player.on(player.exports.Event.SourceUnloaded, updateSubtitles);
         // Update subtitles when a new source is loaded
-        player.addEventHandler(player.EVENT.ON_READY, updateSubtitles);
+        player.on(player.exports.Event.Ready, updateSubtitles);
         // Update subtitles when the period within a source changes
-        player.addEventHandler(player.EVENT.ON_PERIOD_SWITCHED, updateSubtitles);
+        player.on(player.exports.Event.PeriodSwitched, updateSubtitles);
         // Populate subtitles at startup
@@ -56,0 +56,0 @@ updateSubtitles();

dist/js/framework/components/uicontainer.js

@@ -117,3 +117,3 @@ "use strict";
         });
-        player.addEventHandler(player.EVENT.ON_CAST_STARTED, function () {
+        player.on(player.exports.Event.CastStarted, function () {
             showUi(); // Show UI when a Cast session has started (UI will then stay permanently on during the session)
@@ -135,27 +135,27 @@ });
         var removeStates = function () {
-            container.removeClass(stateClassNames[playerutils_1.PlayerUtils.PlayerState.IDLE]);
-            container.removeClass(stateClassNames[playerutils_1.PlayerUtils.PlayerState.PREPARED]);
-            container.removeClass(stateClassNames[playerutils_1.PlayerUtils.PlayerState.PLAYING]);
-            container.removeClass(stateClassNames[playerutils_1.PlayerUtils.PlayerState.PAUSED]);
-            container.removeClass(stateClassNames[playerutils_1.PlayerUtils.PlayerState.FINISHED]);
+            container.removeClass(stateClassNames[playerutils_1.PlayerUtils.PlayerState.Idle]);
+            container.removeClass(stateClassNames[playerutils_1.PlayerUtils.PlayerState.Prepared]);
+            container.removeClass(stateClassNames[playerutils_1.PlayerUtils.PlayerState.Playing]);
+            container.removeClass(stateClassNames[playerutils_1.PlayerUtils.PlayerState.Paused]);
+            container.removeClass(stateClassNames[playerutils_1.PlayerUtils.PlayerState.Finished]);
         };
-        player.addEventHandler(player.EVENT.ON_READY, function () {
+        player.on(player.exports.Event.Ready, function () {
             removeStates();
-            container.addClass(stateClassNames[playerutils_1.PlayerUtils.PlayerState.PREPARED]);
+            container.addClass(stateClassNames[playerutils_1.PlayerUtils.PlayerState.Prepared]);
         });
-        player.addEventHandler(player.EVENT.ON_PLAY, function () {
+        player.on(player.exports.Event.Play, function () {
             removeStates();
-            container.addClass(stateClassNames[playerutils_1.PlayerUtils.PlayerState.PLAYING]);
+            container.addClass(stateClassNames[playerutils_1.PlayerUtils.PlayerState.Playing]);
         });
-        player.addEventHandler(player.EVENT.ON_PAUSED, function () {
+        player.on(player.exports.Event.Paused, function () {
             removeStates();
-            container.addClass(stateClassNames[playerutils_1.PlayerUtils.PlayerState.PAUSED]);
+            container.addClass(stateClassNames[playerutils_1.PlayerUtils.PlayerState.Paused]);
         });
-        player.addEventHandler(player.EVENT.ON_PLAYBACK_FINISHED, function () {
+        player.on(player.exports.Event.PlaybackFinished, function () {
             removeStates();
-            container.addClass(stateClassNames[playerutils_1.PlayerUtils.PlayerState.FINISHED]);
+            container.addClass(stateClassNames[playerutils_1.PlayerUtils.PlayerState.Finished]);
         });
-        player.addEventHandler(player.EVENT.ON_SOURCE_UNLOADED, function () {
+        player.on(player.exports.Event.SourceUnloaded, function () {
             removeStates();
-            container.addClass(stateClassNames[playerutils_1.PlayerUtils.PlayerState.IDLE]);
+            container.addClass(stateClassNames[playerutils_1.PlayerUtils.PlayerState.Idle]);
         });
@@ -165,6 +165,6 @@ // Init in current player state
         // Fullscreen marker class
-        player.addEventHandler(player.EVENT.ON_FULLSCREEN_ENTER, function () {
+        player.on(player.exports.Event.FullscreenEnter, function () {
             container.addClass(_this.prefixCss(UIContainer.FULLSCREEN));
         });
-        player.addEventHandler(player.EVENT.ON_FULLSCREEN_EXIT, function () {
+        player.on(player.exports.Event.FullscreenExit, function () {
             container.removeClass(_this.prefixCss(UIContainer.FULLSCREEN));
@@ -177,6 +177,6 @@ });
         // Buffering marker class
-        player.addEventHandler(player.EVENT.ON_STALL_STARTED, function () {
+        player.on(player.exports.Event.StallStarted, function () {
             container.addClass(_this.prefixCss(UIContainer.BUFFERING));
         });
-        player.addEventHandler(player.EVENT.ON_STALL_ENDED, function () {
+        player.on(player.exports.Event.StallEnded, function () {
             container.removeClass(_this.prefixCss(UIContainer.BUFFERING));
@@ -189,6 +189,6 @@ });
         // RemoteControl marker class
-        player.addEventHandler(player.EVENT.ON_CAST_STARTED, function () {
+        player.on(player.exports.Event.CastStarted, function () {
             container.addClass(_this.prefixCss(UIContainer.REMOTE_CONTROL));
         });
-        player.addEventHandler(player.EVENT.ON_CAST_STOPPED, function () {
+        player.on(player.exports.Event.CastStopped, function () {
             container.removeClass(_this.prefixCss(UIContainer.REMOTE_CONTROL));
@@ -228,3 +228,3 @@ });
         };
-        player.addEventHandler(player.EVENT.ON_PLAYER_RESIZE, function (e) {
+        player.on(player.exports.Event.PlayerResize, function (e) {
             // Convert strings (with "px" suffix) to ints
@@ -231,0 +231,0 @@ var width = Math.round(Number(e.width.substring(0, e.width.length - 2)));

dist/js/framework/components/videoqualityselectbox.js

@@ -27,12 +27,3 @@ "use strict";
         var selectCurrentVideoQuality = function () {
-            if (player.getVideoQuality) {
-                // Since player 7.3.1
-                _this.selectItem(player.getVideoQuality().id);
-            }
-            else {
-                // Backwards compatibility for players <= 7.3.0
-                // TODO remove in next major release
-                var data = player.getDownloadedVideoData();
-                _this.selectItem(data.isAuto ? 'auto' : data.id);
-            }
+            _this.selectItem(player.getVideoQuality().id);
         };
@@ -60,17 +51,9 @@ var updateVideoQualities = function () {
         // Update qualities when source goes away
-        player.addEventHandler(player.EVENT.ON_SOURCE_UNLOADED, updateVideoQualities);
+        player.on(player.exports.Event.SourceUnloaded, updateVideoQualities);
         // Update qualities when a new source is loaded
-        player.addEventHandler(player.EVENT.ON_READY, updateVideoQualities);
+        player.on(player.exports.Event.Ready, updateVideoQualities);
         // Update qualities when the period within a source changes
-        player.addEventHandler(player.EVENT.ON_PERIOD_SWITCHED, updateVideoQualities);
+        player.on(player.exports.Event.PeriodSwitched, updateVideoQualities);
         // Update quality selection when quality is changed (from outside)
-        if (player.EVENT.ON_VIDEO_QUALITY_CHANGED) {
-            // Since player 7.3.1
-            player.addEventHandler(player.EVENT.ON_VIDEO_QUALITY_CHANGED, selectCurrentVideoQuality);
-        }
-        else {
-            // Backwards compatibility for players <= 7.3.0
-            // TODO remove in next major release
-            player.addEventHandler(player.EVENT.ON_VIDEO_DOWNLOAD_QUALITY_CHANGE, selectCurrentVideoQuality);
-        }
+        player.on(player.exports.Event.VideoQualityChanged, selectCurrentVideoQuality);
     };
@@ -77,0 +60,0 @@ /**

dist/js/framework/components/volumeslider.js

@@ -46,6 +46,6 @@ "use strict";
         };
-        player.addEventHandler(player.EVENT.ON_READY, volumeChangeHandler);
-        player.addEventHandler(player.EVENT.ON_VOLUME_CHANGED, volumeChangeHandler);
-        player.addEventHandler(player.EVENT.ON_MUTED, volumeChangeHandler);
-        player.addEventHandler(player.EVENT.ON_UNMUTED, volumeChangeHandler);
+        player.on(player.exports.Event.Ready, volumeChangeHandler);
+        player.on(player.exports.Event.VolumeChanged, volumeChangeHandler);
+        player.on(player.exports.Event.Muted, volumeChangeHandler);
+        player.on(player.exports.Event.Unmuted, volumeChangeHandler);
         this.onSeekPreview.subscribeRateLimited(function (sender, args) {
@@ -61,6 +61,6 @@ if (args.scrubbing) {
         // or the UI is configured. Check the seekbar for a detailed description.
-        player.addEventHandler(player.EVENT.ON_PLAYER_RESIZE, function () {
+        player.on(player.exports.Event.PlayerResize, function () {
             _this.refreshPlaybackPosition();
         });
-        player.addEventHandler(player.EVENT.ON_READY, function () {
+        player.on(player.exports.Event.Ready, function () {
             _this.refreshPlaybackPosition();
@@ -67,0 +67,0 @@ });

dist/js/framework/components/volumetogglebutton.js

@@ -60,5 +60,5 @@ "use strict";
         };
-        player.addEventHandler(player.EVENT.ON_MUTED, muteStateHandler);
-        player.addEventHandler(player.EVENT.ON_UNMUTED, muteStateHandler);
-        player.addEventHandler(player.EVENT.ON_VOLUME_CHANGED, volumeLevelHandler);
+        player.on(player.exports.Event.Muted, muteStateHandler);
+        player.on(player.exports.Event.Unmuted, muteStateHandler);
+        player.on(player.exports.Event.VolumeChanged, volumeLevelHandler);
         this.onClick.subscribe(function () {
@@ -65,0 +65,0 @@ if (player.isMuted()) {

dist/js/framework/components/vrtogglebutton.js

@@ -35,3 +35,3 @@ "use strict";
             // TODO use getVRStatus() through isVRStereoAvailable() once the player has been rewritten and the status is
-            // available in ON_READY
+            // available in Ready
             var config = player.getConfig();
@@ -43,3 +43,7 @@ return config.source && config.source.vr && config.source.vr.contentType !== 'none';
         };
-        var vrStateHandler = function () {
+        var vrStateHandler = function (ev) {
+            if (ev.type === player.exports.Event.Warning && ev.code !== 5006) {
+                // a code of 5006 signals a VR Error, so don't do anything on other warnings
+                return;
+            }
             if (isVRConfigured() && isVRStereoAvailable()) {
@@ -66,9 +70,8 @@ _this.show(); // show button in case it is hidden
         };
-        player.addEventHandler(player.EVENT.ON_VR_MODE_CHANGED, vrStateHandler);
-        player.addEventHandler(player.EVENT.ON_VR_STEREO_CHANGED, vrStateHandler);
-        player.addEventHandler(player.EVENT.ON_VR_ERROR, vrStateHandler);
+        player.on(player.exports.Event.VRStereoChanged, vrStateHandler);
+        player.on(player.exports.Event.Warning, vrStateHandler);
         // Hide button when VR source goes away
-        player.addEventHandler(player.EVENT.ON_SOURCE_UNLOADED, vrButtonVisibilityHandler);
+        player.on(player.exports.Event.SourceUnloaded, vrButtonVisibilityHandler);
         // Show button when a new source is loaded and it's VR
-        player.addEventHandler(player.EVENT.ON_READY, vrButtonVisibilityHandler);
+        player.on(player.exports.Event.Ready, vrButtonVisibilityHandler);
         this.onClick.subscribe(function () {
@@ -75,0 +78,0 @@ if (!isVRStereoAvailable()) {

dist/js/framework/dom.d.ts

@@ -5,2 +5,5 @@ export interface Offset {
 }
+export interface CssProperties {
+    [propertyName: string]: string;
+}
 /**
@@ -60,9 +63,3 @@ * Simple DOM manipulation and DOM element event handling modeled after jQuery (as replacement for jQuery).
      * @returns {HTMLElement[]} the raw HTML elements
-     * @deprecated use {@link #get()} instead
      */
-    getElements(): HTMLElement[];
-    /**
-     * Gets the HTML elements that this DOM instance currently holds.
-     * @returns {HTMLElement[]} the raw HTML elements
-     */
     get(): HTMLElement[];
@@ -208,5 +205,3 @@ /**
      */
-    css(propertyValueCollection: {
-        [propertyName: string]: string;
-    }): DOM;
+    css(propertyValueCollection: CssProperties): DOM;
     private getCss(propertyName);
@@ -213,0 +208,0 @@ private setCss(propertyName, value);

dist/js/framework/dom.js

@@ -58,10 +58,2 @@ "use strict";
     });
-    /**
-     * Gets the HTML elements that this DOM instance currently holds.
-     * @returns {HTMLElement[]} the raw HTML elements
-     * @deprecated use {@link #get()} instead
-     */
-    DOM.prototype.getElements = function () {
-        return this.get();
-    };
     DOM.prototype.get = function (index) {
@@ -68,0 +60,0 @@ if (index === undefined) {

dist/js/framework/main.js

@@ -96,3 +96,3 @@ "use strict";
 var playerui = {
-    version: '2.17.0',
+    version: '3.0.0-a1pha.1',
     // Management
@@ -99,0 +99,0 @@ UIManager: uimanager_1.UIManager,

dist/js/framework/playerutils.d.ts

@@ -5,7 +5,7 @@ import { Event, NoArgs } from './eventdispatcher';
     enum PlayerState {
-        IDLE = 0,
-        PREPARED = 1,
-        PLAYING = 2,
-        PAUSED = 3,
-        FINISHED = 4,
+        Idle = 0,
+        Prepared = 1,
+        Playing = 2,
+        Paused = 3,
+        Finished = 4,
     }
@@ -12,0 +12,0 @@ function isTimeShiftAvailable(player: bitmovin.PlayerAPI): boolean;

dist/js/framework/playerutils.js

@@ -9,7 +9,7 @@ "use strict";
     (function (PlayerState) {
-        PlayerState[PlayerState["IDLE"] = 0] = "IDLE";
-        PlayerState[PlayerState["PREPARED"] = 1] = "PREPARED";
-        PlayerState[PlayerState["PLAYING"] = 2] = "PLAYING";
-        PlayerState[PlayerState["PAUSED"] = 3] = "PAUSED";
-        PlayerState[PlayerState["FINISHED"] = 4] = "FINISHED";
+        PlayerState[PlayerState["Idle"] = 0] = "Idle";
+        PlayerState[PlayerState["Prepared"] = 1] = "Prepared";
+        PlayerState[PlayerState["Playing"] = 2] = "Playing";
+        PlayerState[PlayerState["Paused"] = 3] = "Paused";
+        PlayerState[PlayerState["Finished"] = 4] = "Finished";
     })(PlayerState = PlayerUtils.PlayerState || (PlayerUtils.PlayerState = {}));
@@ -22,15 +22,15 @@ function isTimeShiftAvailable(player) {
         if (player.hasEnded()) {
-            return PlayerState.FINISHED;
+            return PlayerState.Finished;
         }
         else if (player.isPlaying()) {
-            return PlayerState.PLAYING;
+            return PlayerState.Playing;
         }
         else if (player.isPaused()) {
-            return PlayerState.PAUSED;
+            return PlayerState.Paused;
         }
-        else if (player.isReady()) {
-            return PlayerState.PREPARED;
+        else if (player.getConfig(true).source) {
+            return PlayerState.Prepared;
         }
         else {
-            return PlayerState.IDLE;
+            return PlayerState.Idle;
         }
@@ -48,7 +48,7 @@ }
             };
-            // Try to detect timeshift availability in ON_READY, which works for DASH streams
-            player.addEventHandler(player.EVENT.ON_READY, timeShiftDetector);
+            // Try to detect timeshift availability in Ready, which works for DASH streams
+            player.on(player.exports.Event.Ready, timeShiftDetector);
             // With HLS/NativePlayer streams, getMaxTimeShift can be 0 before the buffer fills, so we need to additionally
-            // check timeshift availability in ON_TIME_CHANGED
-            player.addEventHandler(player.EVENT.ON_TIME_CHANGED, timeShiftDetector);
+            // check timeshift availability in TimeChanged
+            player.on(player.exports.Event.TimeChanged, timeShiftDetector);
         }
@@ -97,5 +97,5 @@ TimeShiftAvailabilityDetector.prototype.detect = function () {
             // Initialize when player is ready
-            player.addEventHandler(player.EVENT.ON_READY, liveDetector);
+            player.on(player.exports.Event.Ready, liveDetector);
             // Re-evaluate when playback starts
-            player.addEventHandler(player.EVENT.ON_PLAY, liveDetector);
+            player.on(player.exports.Event.Play, liveDetector);
             // HLS live detection workaround for Android:
@@ -105,3 +105,3 @@ // Also re-evaluate during playback, because that is when the live flag might change.
             if (browserutils_1.BrowserUtils.isAndroid && browserutils_1.BrowserUtils.isChrome) {
-                player.addEventHandler(player.EVENT.ON_TIME_CHANGED, liveDetector);
+                player.on(player.exports.Event.TimeChanged, liveDetector);
             }
@@ -108,0 +108,0 @@ }

dist/js/framework/uimanager.d.ts

@@ -83,8 +83,2 @@ import { UIContainer } from './components/uicontainer';
     /**
-     * Tells if the ad allows a UI. This is currently only true for VAST ads and cannot be used to differentiate between
-     * different ad clients (i.e. to display different UIs for different ad clients).
-     * @deprecated Will be removed in an upcoming major release, use {@link #adClientType} instead.
-     */
-    isAdWithUI: boolean;
-    /**
      * Tells the ad client (e.g. 'vast, 'ima') if {@link #isAd} is true.
@@ -91,0 +85,0 @@ */

dist/js/framework/uimanager.js

@@ -120,3 +120,3 @@ "use strict";
         // Update the configuration when a new source is loaded
-        this.managerPlayerWrapper.getPlayer().addEventHandler(this.player.EVENT.ON_SOURCE_LOADED, function () {
+        this.managerPlayerWrapper.getPlayer().on(this.player.exports.Event.SourceLoaded, function () {
             updateConfig();
@@ -176,9 +176,9 @@ _this.config.events.onUpdated.dispatch(_this);
                     // When the ad starts, we store the event data
-                    case player.EVENT.ON_AD_STARTED:
+                    case player.exports.Event.AdStarted:
                         adStartedEvent = event;
                         break;
                     // When the ad ends, we delete the event data
-                    case player.EVENT.ON_AD_FINISHED:
-                    case player.EVENT.ON_AD_SKIPPED:
-                    case player.EVENT.ON_AD_ERROR:
+                    case player.exports.Event.AdFinished:
+                    case player.exports.Event.AdSkipped:
+                    case player.exports.Event.AdError:
                         adStartedEvent = null;
@@ -189,3 +189,3 @@ break;
                     // changes.
-                    case player.EVENT.ON_READY:
+                    case player.exports.Event.Ready:
                         if (adStartedEvent && !player.isAd()) {
@@ -198,6 +198,4 @@ adStartedEvent = null;
             var ad = adStartedEvent != null;
-            var adWithUI = ad && adStartedEvent.clientType === 'vast';
             _this.resolveUiVariant({
                 isAd: ad,
-                isAdWithUI: adWithUI,
                 adClientType: ad ? adStartedEvent.clientType : null,
@@ -215,3 +213,3 @@ }, function (context) {
                      */
-                    _this.currentUi.getWrappedPlayer().fireEventInUI(_this.player.EVENT.ON_AD_STARTED, adStartedEvent);
+                    _this.currentUi.getWrappedPlayer().fireEventInUI(_this.player.exports.Event.AdStarted, adStartedEvent);
                 }
@@ -222,12 +220,12 @@ });
         if (config.autoUiVariantResolve) {
-            this.managerPlayerWrapper.getPlayer().addEventHandler(this.player.EVENT.ON_READY, resolveUiVariant);
-            this.managerPlayerWrapper.getPlayer().addEventHandler(this.player.EVENT.ON_PLAY, resolveUiVariant);
-            this.managerPlayerWrapper.getPlayer().addEventHandler(this.player.EVENT.ON_PAUSED, resolveUiVariant);
-            this.managerPlayerWrapper.getPlayer().addEventHandler(this.player.EVENT.ON_AD_STARTED, resolveUiVariant);
-            this.managerPlayerWrapper.getPlayer().addEventHandler(this.player.EVENT.ON_AD_FINISHED, resolveUiVariant);
-            this.managerPlayerWrapper.getPlayer().addEventHandler(this.player.EVENT.ON_AD_SKIPPED, resolveUiVariant);
-            this.managerPlayerWrapper.getPlayer().addEventHandler(this.player.EVENT.ON_AD_ERROR, resolveUiVariant);
-            this.managerPlayerWrapper.getPlayer().addEventHandler(this.player.EVENT.ON_PLAYER_RESIZE, resolveUiVariant);
-            this.managerPlayerWrapper.getPlayer().addEventHandler(this.player.EVENT.ON_FULLSCREEN_ENTER, resolveUiVariant);
-            this.managerPlayerWrapper.getPlayer().addEventHandler(this.player.EVENT.ON_FULLSCREEN_EXIT, resolveUiVariant);
+            this.managerPlayerWrapper.getPlayer().on(this.player.exports.Event.Ready, resolveUiVariant);
+            this.managerPlayerWrapper.getPlayer().on(this.player.exports.Event.Play, resolveUiVariant);
+            this.managerPlayerWrapper.getPlayer().on(this.player.exports.Event.Paused, resolveUiVariant);
+            this.managerPlayerWrapper.getPlayer().on(this.player.exports.Event.AdStarted, resolveUiVariant);
+            this.managerPlayerWrapper.getPlayer().on(this.player.exports.Event.AdFinished, resolveUiVariant);
+            this.managerPlayerWrapper.getPlayer().on(this.player.exports.Event.AdSkipped, resolveUiVariant);
+            this.managerPlayerWrapper.getPlayer().on(this.player.exports.Event.AdError, resolveUiVariant);
+            this.managerPlayerWrapper.getPlayer().on(this.player.exports.Event.PlayerResize, resolveUiVariant);
+            this.managerPlayerWrapper.getPlayer().on(this.player.exports.Event.FullscreenEnter, resolveUiVariant);
+            this.managerPlayerWrapper.getPlayer().on(this.player.exports.Event.FullscreenExit, resolveUiVariant);
         }
@@ -297,3 +295,2 @@ // Initialize the UI
             isAd: false,
-            isAdWithUI: false,
             adClientType: null,
@@ -328,3 +325,2 @@ isFullscreen: this.player.isFullscreen(),
         var dom = ui.getUI().getDomElement();
-        var player = ui.getWrappedPlayer();
         ui.configureControls();
@@ -335,7 +331,2 @@ /* Append the UI DOM after configuration to avoid CSS transitions at initialization
         this.uiContainerElement.append(dom);
-        // Some components initialize their state on ON_READY. When the UI is loaded after the player is already ready,
-        // they will never receive the event so we fire it from here in such cases.
-        if (player.isReady()) {
-            player.fireEventInUI(player.EVENT.ON_READY, {});
-        }
         // Fire onConfigured after UI DOM elements are successfully added. When fired immediately, the DOM elements
@@ -641,3 +632,4 @@ // might not be fully configured and e.g. do not have a size.
                     condition: function (context) {
-                        return context.isMobile && context.documentWidth < smallScreenSwitchWidth && context.isAdWithUI;
+                        return context.isMobile && context.documentWidth < smallScreenSwitchWidth && context.isAd
+                            && context.adClientType === 'vast';
                     },
@@ -647,3 +639,3 @@ }, {
                     condition: function (context) {
-                        return context.isAdWithUI;
+                        return context.isAd && context.adClientType === 'vast';
                     },
@@ -665,3 +657,3 @@ }, {
                     condition: function (context) {
-                        return context.isAdWithUI;
+                        return context.isAd && context.adClientType === 'vast';
                     },
@@ -795,3 +787,3 @@ }, {
                     condition: function (context) {
-                        return context.isAdWithUI;
+                        return context.isAd && context.adClientType === 'vast';
                     },
@@ -1102,12 +1094,5 @@ }, {
         }
-        // Explicitly add a wrapper method for 'addEventHandler' that adds added event handlers to the event list
-        wrapper.addEventHandler = function (eventType, callback) {
-            // in player V8 addEventHandler was replaced by on
-            if (player.on) {
-                player.on(eventType, callback);
-            }
-            else {
-                // keep backward compatibility for versions <7.7
-                player.addEventHandler(eventType, callback);
-            }
+        // Explicitly add a wrapper method for 'on' that adds added event handlers to the event list
+        wrapper.on = function (eventType, callback) {
+            player.on(eventType, callback);
             if (!_this.eventHandlers[eventType]) {
@@ -1119,11 +1104,5 @@ _this.eventHandlers[eventType] = [];
         };
-        // Explicitly add a wrapper method for 'removeEventHandler' that removes removed event handlers from the event list
-        wrapper.removeEventHandler = function (eventType, callback) {
-            if (player.off) {
-                player.off(eventType, callback);
-            }
-            else {
-                // keep backward compatibility for versions <7.7
-                player.removeEventHandler(eventType, callback);
-            }
+        // Explicitly add a wrapper method for 'off' that removes removed event handlers from the event list
+        wrapper.off = function (eventType, callback) {
+            player.off(eventType, callback);
             if (_this.eventHandlers[eventType]) {
@@ -1166,3 +1145,3 @@ arrayutils_1.ArrayUtils.remove(_this.eventHandlers[eventType], callback);
                 var callback = _a[_i];
-                this.player.removeEventHandler(eventType, callback);
+                this.player.off(eventType, callback);
             }
@@ -1169,0 +1148,0 @@ }

gulpfile.js

@@ -226,4 +226,15 @@ var gulp = require('gulp');
       server: {
-        baseDir: [paths.target.html]
-      }
+        baseDir: [paths.target.html],
+        routes: {
+          "/bitmovin-player": "../bitdash/testing/debug/bitdash-player",
+          "/bitmovin-player/release": "../bitdash/release",
+          "/bitmovin-player/bitmovinplayer-ui.js": "./dist/js/bitmovinplayer-ui.js",
+          "/bitmovin-player/bitmovinplayer-ui.css": "./dist/css/bitmovinplayer-ui.css",
+
+          "/test/bitmovin-player": "../bitdash-test/testing/debug/bitdash-player",
+          "/test/bitmovin-player/release": "../bitdash-test/release",
+          "/test/bitmovin-player/bitmovinplayer-ui.js": "./dist/js/bitmovinplayer-ui.js",
+          "/test/bitmovin-player/bitmovinplayer-ui.css": "./dist/css/bitmovinplayer-ui.css",
+        },
+      },
     });
@@ -230,0 +241,0 @@

package.json

 {
   "name": "bitmovin-player-ui",
-  "version": "2.17.0",
+  "version": "3.0.0-a1pha.1",
   "description": "Bitmovin Player UI Framework",
@@ -5,0 +5,0 @@ "main": "dist/js/framework/main.js",

src/ts/components/adclickoverlay.ts

@@ -17,3 +17,3 @@ import {ClickOverlay} from './clickoverlay';
 
-    player.addEventHandler(player.EVENT.ON_AD_STARTED, (event: bitmovin.PlayerAPI.AdStartedEvent) => {
+    player.on(player.exports.Event.AdStarted, (event: bitmovin.PlayerAPI.AdStartedEvent) => {
       clickThroughUrl = event.clickThroughUrl;
@@ -33,5 +33,5 @@
     };
-    player.addEventHandler(player.EVENT.ON_AD_FINISHED, adFinishedHandler);
-    player.addEventHandler(player.EVENT.ON_AD_SKIPPED, adFinishedHandler);
-    player.addEventHandler(player.EVENT.ON_AD_ERROR, adFinishedHandler);
+    player.on(player.exports.Event.AdFinished, adFinishedHandler);
+    player.on(player.exports.Event.AdSkipped, adFinishedHandler);
+    player.on(player.exports.Event.AdError, adFinishedHandler);
 
@@ -43,7 +43,8 @@ this.onClick.subscribe(() => {
       // Notify the player of the clicked ad
-      player.fireEvent(player.EVENT.ON_AD_CLICKED, {
-        clickThroughUrl: clickThroughUrl,
-      });
+      // TODO add a callback to AdStarted to allow the ads renderer to signal a clickThroughUrl click
+      // player.fireEvent(player.exports.Event.AdClicked, {
+      //   clickThroughUrl: clickThroughUrl,
+      // });
     });
   }
 }

src/ts/components/admessagelabel.ts

@@ -32,16 +32,14 @@ import {Label, LabelConfig} from './label';
 
-      player.addEventHandler(player.EVENT.ON_TIME_CHANGED, updateMessageHandler);
-      player.addEventHandler(player.EVENT.ON_CAST_TIME_UPDATED, updateMessageHandler);
+      player.on(player.exports.Event.TimeChanged, updateMessageHandler);
     };
 
     let adEndHandler = () => {
-      player.removeEventHandler(player.EVENT.ON_TIME_CHANGED, updateMessageHandler);
-      player.removeEventHandler(player.EVENT.ON_CAST_TIME_UPDATED, updateMessageHandler);
+      player.off(player.exports.Event.TimeChanged, updateMessageHandler);
     };
 
-    player.addEventHandler(player.EVENT.ON_AD_STARTED, adStartHandler);
-    player.addEventHandler(player.EVENT.ON_AD_SKIPPED, adEndHandler);
-    player.addEventHandler(player.EVENT.ON_AD_ERROR, adEndHandler);
-    player.addEventHandler(player.EVENT.ON_AD_FINISHED, adEndHandler);
+    player.on(player.exports.Event.AdStarted, adStartHandler);
+    player.on(player.exports.Event.AdSkipped, adEndHandler);
+    player.on(player.exports.Event.AdError, adEndHandler);
+    player.on(player.exports.Event.AdFinished, adEndHandler);
   }
 }

src/ts/components/adskipbutton.ts

@@ -59,15 +59,13 @@ import {ButtonConfig, Button} from './button';
 
-      player.addEventHandler(player.EVENT.ON_TIME_CHANGED, updateSkipMessageHandler);
-      player.addEventHandler(player.EVENT.ON_CAST_TIME_UPDATED, updateSkipMessageHandler);
+      player.on(player.exports.Event.TimeChanged, updateSkipMessageHandler);
     };
 
     let adEndHandler = () => {
-      player.removeEventHandler(player.EVENT.ON_TIME_CHANGED, updateSkipMessageHandler);
-      player.removeEventHandler(player.EVENT.ON_CAST_TIME_UPDATED, updateSkipMessageHandler);
+      player.off(player.exports.Event.TimeChanged, updateSkipMessageHandler);
     };
 
-    player.addEventHandler(player.EVENT.ON_AD_STARTED, adStartHandler);
-    player.addEventHandler(player.EVENT.ON_AD_SKIPPED, adEndHandler);
-    player.addEventHandler(player.EVENT.ON_AD_ERROR, adEndHandler);
-    player.addEventHandler(player.EVENT.ON_AD_FINISHED, adEndHandler);
+    player.on(player.exports.Event.AdStarted, adStartHandler);
+    player.on(player.exports.Event.AdSkipped, adEndHandler);
+    player.on(player.exports.Event.AdError, adEndHandler);
+    player.on(player.exports.Event.AdFinished, adEndHandler);
 
@@ -74,0 +72,0 @@ this.onClick.subscribe(() => {

src/ts/components/airplaytogglebutton.ts

@@ -45,3 +45,3 @@ import {ToggleButton, ToggleButtonConfig} from './togglebutton';
 
-    player.addEventHandler(player.EVENT.ON_AIRPLAY_AVAILABLE, airPlayAvailableHandler);
+    player.on(player.exports.Event.AirplayAvailable, airPlayAvailableHandler);
 
@@ -48,0 +48,0 @@ // Startup init

src/ts/components/audioqualityselectbox.ts

@@ -18,11 +18,3 @@ import {SelectBox} from './selectbox';
     let selectCurrentAudioQuality = () => {
-      if (player.getAudioQuality) {
-        // Since player 7.3.1
-        this.selectItem(player.getAudioQuality().id);
-      } else {
-        // Backwards compatibility for players <= 7.3.0
-        // TODO remove in next major release
-        let data = player.getDownloadedAudioData();
-        this.selectItem(data.isAuto ? 'auto' : data.id);
-      }
+      this.selectItem(player.getAudioQuality().id);
     };
@@ -52,19 +44,12 @@
     // Update qualities when audio track has changed
-    player.addEventHandler(player.EVENT.ON_AUDIO_CHANGED, updateAudioQualities);
+    player.on(player.exports.Event.AudioChanged, updateAudioQualities);
     // Update qualities when source goes away
-    player.addEventHandler(player.EVENT.ON_SOURCE_UNLOADED, updateAudioQualities);
+    player.on(player.exports.Event.SourceUnloaded, updateAudioQualities);
     // Update qualities when a new source is loaded
-    player.addEventHandler(player.EVENT.ON_READY, updateAudioQualities);
+    player.on(player.exports.Event.Ready, updateAudioQualities);
     // Update qualities when the period within a source changes
-    player.addEventHandler(player.EVENT.ON_PERIOD_SWITCHED, updateAudioQualities);
+    player.on(player.exports.Event.PeriodSwitched, updateAudioQualities);
     // Update quality selection when quality is changed (from outside)
-    if (player.EVENT.ON_AUDIO_QUALITY_CHANGED) {
-      // Since player 7.3.1
-      player.addEventHandler(player.EVENT.ON_AUDIO_QUALITY_CHANGED, selectCurrentAudioQuality);
-    } else {
-      // Backwards compatibility for players <= 7.3.0
-      // TODO remove in next major release
-      player.addEventHandler(player.EVENT.ON_AUDIO_DOWNLOAD_QUALITY_CHANGE, selectCurrentAudioQuality);
-    }
+    player.on(player.exports.Event.AudioQualityChanged, selectCurrentAudioQuality);
   }
 }

src/ts/components/audiotrackselectbox.ts

@@ -37,3 +37,3 @@ import {SelectBox} from './selectbox';
       // Select the correct audio track after the tracks have been added
-      // This is also important in case we missed the `ON_AUDIO_CHANGED` event, e.g. when `playback.audioLanguage`
+      // This is also important in case we missed the `AudioChanged` event, e.g. when `playback.audioLanguage`
       // is configured but the event is fired before the UI is created.
@@ -48,14 +48,12 @@ selectCurrentAudioTrack();
     // Update selection when selected track has changed
-    player.addEventHandler(player.EVENT.ON_AUDIO_CHANGED, selectCurrentAudioTrack);
+    player.on(player.exports.Event.AudioChanged, selectCurrentAudioTrack);
     // Update tracks when source goes away
-    player.addEventHandler(player.EVENT.ON_SOURCE_UNLOADED, updateAudioTracks);
+    player.on(player.exports.Event.SourceUnloaded, updateAudioTracks);
     // Update tracks when a new source is loaded
-    player.addEventHandler(player.EVENT.ON_READY, updateAudioTracks);
+    player.on(player.exports.Event.Ready, updateAudioTracks);
     // Update tracks when the period within a source changes
-    player.addEventHandler(player.EVENT.ON_PERIOD_SWITCHED, updateAudioTracks);
-    // Update tracks when a track is added or removed (since player 7.1.4)
-    if (player.EVENT.ON_AUDIO_ADDED && player.EVENT.ON_AUDIO_REMOVED) {
-      player.addEventHandler(player.EVENT.ON_AUDIO_ADDED, updateAudioTracks);
-      player.addEventHandler(player.EVENT.ON_AUDIO_REMOVED, updateAudioTracks);
-    }
+    player.on(player.exports.Event.PeriodSwitched, updateAudioTracks);
+    // Update tracks when a track is added or removed
+    player.on(player.exports.Event.AudioAdded, updateAudioTracks);
+    player.on(player.exports.Event.AudioRemoved, updateAudioTracks);
 
@@ -62,0 +60,0 @@ // Populate tracks at startup

src/ts/components/bufferingoverlay.ts

@@ -60,5 +60,5 @@ import {ContainerConfig, Container} from './container';
 
-    player.addEventHandler(player.EVENT.ON_STALL_STARTED, showOverlay);
-    player.addEventHandler(player.EVENT.ON_STALL_ENDED, hideOverlay);
-    player.addEventHandler(player.EVENT.ON_SOURCE_UNLOADED, hideOverlay);
+    player.on(player.exports.Event.StallStarted, showOverlay);
+    player.on(player.exports.Event.StallEnded, hideOverlay);
+    player.on(player.exports.Event.SourceUnloaded, hideOverlay);
 
@@ -65,0 +65,0 @@ // Show overlay if player is already stalled at init

src/ts/components/caststatusoverlay.ts

@@ -29,3 +29,3 @@ import {ContainerConfig, Container} from './container';
 
-    player.addEventHandler(player.EVENT.ON_CAST_WAITING_FOR_DEVICE,
+    player.on(player.exports.Event.CastWaitingForDevice,
       (event: CastWaitingForDeviceEvent) => {
@@ -37,3 +37,3 @@ this.show();
       });
-    player.addEventHandler(player.EVENT.ON_CAST_STARTED, (event: CastStartedEvent) => {
+    player.on(player.exports.Event.CastStarted, (event: CastStartedEvent) => {
       // Session is started or resumed
@@ -46,3 +46,3 @@ // For cases when a session is resumed, we do not receive the previous events and therefore show the status panel
     });
-    player.addEventHandler(player.EVENT.ON_CAST_STOPPED, (event) => {
+    player.on(player.exports.Event.CastStopped, (event) => {
       // Cast session gone, hide the status panel
@@ -49,0 +49,0 @@ this.hide();

src/ts/components/casttogglebutton.ts

@@ -43,13 +43,13 @@ import {ToggleButton, ToggleButtonConfig} from './togglebutton';
 
-    player.addEventHandler(player.EVENT.ON_CAST_AVAILABLE, castAvailableHander);
+    player.on(player.exports.Event.CastAvailable, castAvailableHander);
 
     // Toggle button 'on' state
-    player.addEventHandler(player.EVENT.ON_CAST_WAITING_FOR_DEVICE, () => {
+    player.on(player.exports.Event.CastWaitingForDevice, () => {
       this.on();
     });
-    player.addEventHandler(player.EVENT.ON_CAST_STARTED, () => {
-      // When a session is resumed, there is no ON_CAST_START event, so we also need to toggle here for such cases
+    player.on(player.exports.Event.CastStarted, () => {
+      // When a session is resumed, there is no CastStart event, so we also need to toggle here for such cases
       this.on();
     });
-    player.addEventHandler(player.EVENT.ON_CAST_STOPPED, () => {
+    player.on(player.exports.Event.CastStopped, () => {
       this.off();
@@ -56,0 +56,0 @@ });

src/ts/components/castuicontainer.ts

@@ -66,8 +66,8 @@ import {UIContainer, UIContainerConfig} from './uicontainer';
 
-    player.addEventHandler(player.EVENT.ON_READY, showUiWithTimeout);
-    player.addEventHandler(player.EVENT.ON_SOURCE_LOADED, showUiWithTimeout);
-    player.addEventHandler(player.EVENT.ON_PLAY, showUiWithTimeout);
-    player.addEventHandler(player.EVENT.ON_PAUSED, showUiPermanently);
-    player.addEventHandler(player.EVENT.ON_SEEK, showUiPermanently);
-    player.addEventHandler(player.EVENT.ON_SEEKED, showUiAfterSeek);
+    player.on(player.exports.Event.Ready, showUiWithTimeout);
+    player.on(player.exports.Event.SourceLoaded, showUiWithTimeout);
+    player.on(player.exports.Event.Play, showUiWithTimeout);
+    player.on(player.exports.Event.Paused, showUiPermanently);
+    player.on(player.exports.Event.Seek, showUiPermanently);
+    player.on(player.exports.Event.Seeked, showUiAfterSeek);
   }
@@ -74,0 +74,0 @@

src/ts/components/errormessageoverlay.ts

@@ -101,3 +101,3 @@ import {ContainerConfig, Container} from './container';
 
-    player.addEventHandler(player.EVENT.ON_ERROR, (event: ErrorEvent) => {
+    player.on(player.exports.Event.Error, (event: ErrorEvent) => {
       let message = event.message;
@@ -128,3 +128,3 @@
 
-    player.addEventHandler(player.EVENT.ON_SOURCE_LOADED, (event: PlayerEvent) => {
+    player.on(player.exports.Event.SourceLoaded, (event: PlayerEvent) => {
       if (this.isShown()) {
@@ -131,0 +131,0 @@ this.tvNoiseBackground.stop();

src/ts/components/fullscreentogglebutton.ts

@@ -29,4 +29,4 @@ import {ToggleButton, ToggleButtonConfig} from './togglebutton';
 
-    player.addEventHandler(player.EVENT.ON_FULLSCREEN_ENTER, fullscreenStateHandler);
-    player.addEventHandler(player.EVENT.ON_FULLSCREEN_EXIT, fullscreenStateHandler);
+    player.on(player.exports.Event.FullscreenEnter, fullscreenStateHandler);
+    player.on(player.exports.Event.FullscreenExit, fullscreenStateHandler);
 
@@ -33,0 +33,0 @@ this.onClick.subscribe(() => {

src/ts/components/hugeplaybacktogglebutton.ts

@@ -27,3 +27,3 @@ import {ToggleButtonConfig} from './togglebutton';
     let togglePlayback = () => {
-      if (player.isPlaying()) {
+      if (player.isPlaying() || this.isPlayInitiated) {
         player.pause('ui');
@@ -69,3 +69,3 @@ } else {
       if (firstPlay) {
-        // Try to start playback. Then we wait for ON_PLAY and only when it arrives, we disable the firstPlay flag.
+        // Try to start playback. Then we wait for Play and only when it arrives, we disable the firstPlay flag.
         // If we disable the flag here, onClick was triggered programmatically instead of by a user interaction, and
@@ -103,3 +103,3 @@ // playback is blocked (e.g. on mobile devices due to the programmatic play() call), we loose the chance to
 
-    player.addEventHandler(player.EVENT.ON_PLAY, () => {
+    player.on(player.exports.Event.Play, () => {
       // Playback has really started, we can disable the flag to switch to normal toggle button handling
@@ -109,3 +109,3 @@ firstPlay = false;
 
-    player.addEventHandler(player.EVENT.ON_WARNING, (event: WarningEvent) => {
+    player.on(player.exports.Event.Warning, (event: WarningEvent) => {
       // 5008 == Playback could not be started
@@ -120,3 +120,3 @@ if (event.code === 5008) {
     let castInitializationHandler = (event: PlayerEvent) => {
-      if (event.type === player.EVENT.ON_CAST_START) {
+      if (event.type === player.exports.Event.CastStart) {
         // Hide button when session is being initialized
@@ -129,5 +129,5 @@ this.hide();
     };
-    player.addEventHandler(player.EVENT.ON_CAST_START, castInitializationHandler);
-    player.addEventHandler(player.EVENT.ON_CAST_STARTED, castInitializationHandler);
-    player.addEventHandler(player.EVENT.ON_CAST_STOPPED, castInitializationHandler);
+    player.on(player.exports.Event.CastStart, castInitializationHandler);
+    player.on(player.exports.Event.CastStarted, castInitializationHandler);
+    player.on(player.exports.Event.CastStopped, castInitializationHandler);
 
@@ -151,3 +151,3 @@ const suppressPlayButtonTransitionAnimation = () => {
     // simply rely on isPlaying and the play state events.
-    const isAutoplayUpcoming = !player.isReady() && isAutoplayEnabled;
+    const isAutoplayUpcoming = !player.getConfig(true).source && isAutoplayEnabled;
 
@@ -162,3 +162,3 @@ // Hide the play button when the player is already playing or autoplay is upcoming
       // Show the play button without an animation if a play attempt is blocked
-      player.addEventHandler(player.EVENT.ON_WARNING, (event: WarningEvent) => {
+      player.on(player.exports.Event.Warning, (event: WarningEvent) => {
         if (event.code === 5008) {
@@ -199,2 +199,2 @@ suppressPlayButtonTransitionAnimation();
   }
-}
+}

src/ts/components/metadatalabel.ts

@@ -65,6 +65,6 @@ import {LabelConfig, Label} from './label';
     // Reinit label when a new source is loaded
-    player.addEventHandler(player.EVENT.ON_SOURCE_LOADED, init);
+    player.on(player.exports.Event.SourceLoaded, init);
     // Clear labels when source is unloaded
-    player.addEventHandler(player.EVENT.ON_SOURCE_UNLOADED, unload);
+    player.on(player.exports.Event.SourceUnloaded, unload);
   }
 }

src/ts/components/pictureinpicturetogglebutton.ts

@@ -49,9 +49,9 @@ import {ToggleButton, ToggleButtonConfig} from './togglebutton';
 
-    player.addEventHandler(player.EVENT.ON_READY, pipAvailableHander);
+    player.on(player.exports.Event.Ready, pipAvailableHander);
 
     // Toggle button 'on' state
-    player.addEventHandler(player.EVENT.ON_PICTURE_IN_PICTURE_ENTER, () => {
+    player.on(player.exports.Event.PictureInPictureEnter, () => {
       this.on();
     });
-    player.addEventHandler(player.EVENT.ON_PICTURE_IN_PICTURE_EXIT, () => {
+    player.on(player.exports.Event.PictureInPictureExit, () => {
       this.off();
@@ -58,0 +58,0 @@ });

src/ts/components/playbackspeedselectbox.ts

@@ -32,8 +32,4 @@ import {SelectBox} from './selectbox';
     // when the player hits onReady again, adjust the playback speed selection
-    player.addEventHandler(player.EVENT.ON_READY, setDefaultValue);
-
-    if (player.EVENT.ON_PLAYBACK_SPEED_CHANGED) {
-      // Since player 7.8.0
-      player.addEventHandler(player.EVENT.ON_PLAYBACK_SPEED_CHANGED, setDefaultValue);
-    }
+    player.on(player.exports.Event.Ready, setDefaultValue);
+    player.on(player.exports.Event.PlaybackSpeedChanged, setDefaultValue);
   }
@@ -40,0 +36,0 @@

src/ts/components/playbacktimelabel.ts

@@ -112,10 +112,9 @@ import {LabelConfig, Label} from './label';
 
-    player.addEventHandler(player.EVENT.ON_TIME_CHANGED, playbackTimeHandler);
-    player.addEventHandler(player.EVENT.ON_SEEKED, playbackTimeHandler);
-    player.addEventHandler(player.EVENT.ON_CAST_TIME_UPDATED, playbackTimeHandler);
+    player.on(player.exports.Event.TimeChanged, playbackTimeHandler);
+    player.on(player.exports.Event.Seeked, playbackTimeHandler);
 
-    player.addEventHandler(player.EVENT.ON_TIME_SHIFT, updateLiveTimeshiftState);
-    player.addEventHandler(player.EVENT.ON_TIME_SHIFTED, updateLiveTimeshiftState);
-    player.addEventHandler(player.EVENT.ON_PLAY, updateLiveTimeshiftState);
-    player.addEventHandler(player.EVENT.ON_PAUSED, updateLiveTimeshiftState);
+    player.on(player.exports.Event.TimeShift, updateLiveTimeshiftState);
+    player.on(player.exports.Event.TimeShifted, updateLiveTimeshiftState);
+    player.on(player.exports.Event.Play, updateLiveTimeshiftState);
+    player.on(player.exports.Event.Paused, updateLiveTimeshiftState);
 
@@ -137,3 +136,3 @@ let init = () => {
     };
-    player.addEventHandler(player.EVENT.ON_READY, init);
+    player.on(player.exports.Event.Ready, init);
 
@@ -140,0 +139,0 @@ init();

src/ts/components/playbacktogglebutton.ts

@@ -14,2 +14,3 @@ import {ToggleButton, ToggleButtonConfig} from './togglebutton';
   private static readonly CLASS_STOPTOGGLE = 'stoptoggle';
+  protected isPlayInitiated: boolean;
 
@@ -23,2 +24,4 @@ constructor(config: ToggleButtonConfig = {}) {
     }, this.config);
+
+    this.isPlayInitiated = false;
   }
@@ -39,3 +42,3 @@
 
-      if (player.isPlaying()) {
+      if (player.isPlaying() || this.isPlayInitiated) {
         this.on();
@@ -48,22 +51,28 @@ } else {
     // Call handler upon these events
-    player.addEventHandler(player.EVENT.ON_PLAY, playbackStateHandler);
-    player.addEventHandler(player.EVENT.ON_PAUSED, playbackStateHandler);
-    if (player.EVENT.ON_PLAYING) {
-      // Since player 7.3. Not really necessary but just in case we ever miss the ON_PLAY event.
-      player.addEventHandler(player.EVENT.ON_PLAYING, playbackStateHandler);
-    }
+    player.on(player.exports.Event.Play, (e) => {
+      this.isPlayInitiated = true;
+      playbackStateHandler(e);
+    });
+
+    player.on(player.exports.Event.Paused, (e) => {
+      this.isPlayInitiated = false;
+      playbackStateHandler(e);
+    });
+
+    player.on(player.exports.Event.Playing, (e) => {
+      this.isPlayInitiated = false;
+      playbackStateHandler(e);
+    });
     // after unloading + loading a new source, the player might be in a different playing state (from playing into stopped)
-    player.addEventHandler(player.EVENT.ON_SOURCE_LOADED, playbackStateHandler);
-    player.addEventHandler(player.EVENT.ON_SOURCE_UNLOADED, playbackStateHandler);
+    player.on(player.exports.Event.SourceLoaded, playbackStateHandler);
+    player.on(player.exports.Event.SourceUnloaded, playbackStateHandler);
     // when playback finishes, player turns to paused mode
-    player.addEventHandler(player.EVENT.ON_PLAYBACK_FINISHED, playbackStateHandler);
-    player.addEventHandler(player.EVENT.ON_CAST_STARTED, playbackStateHandler);
-    player.addEventHandler(player.EVENT.ON_CAST_PLAYING, playbackStateHandler);
-    player.addEventHandler(player.EVENT.ON_CAST_PAUSED, playbackStateHandler);
-    player.addEventHandler(player.EVENT.ON_CAST_PLAYBACK_FINISHED, playbackStateHandler);
+    player.on(player.exports.Event.PlaybackFinished, playbackStateHandler);
+    player.on(player.exports.Event.CastStarted, playbackStateHandler);
 
     // When a playback attempt is rejected with warning 5008, we switch the button state back to off
-    // This is required for blocked autoplay, because there is no ON_PAUSED event in such case
-    player.addEventHandler(player.EVENT.ON_WARNING, (event: WarningEvent) => {
+    // This is required for blocked autoplay, because there is no Paused event in such case
+    player.on(player.exports.Event.Warning, (event: WarningEvent) => {
       if (event.code === 5008) {
+        this.isPlayInitiated = false;
         this.off();
@@ -91,3 +100,3 @@ }
       this.onClick.subscribe(() => {
-        if (player.isPlaying()) {
+        if (player.isPlaying() || this.isPlayInitiated) {
           player.pause('ui');
@@ -111,2 +120,2 @@ } else {
   }
-}
+}

src/ts/components/recommendationoverlay.ts

@@ -60,5 +60,5 @@ import {ContainerConfig, Container} from './container';
     // Add recommendation when a source is loaded
-    player.addEventHandler(player.EVENT.ON_READY, setupRecommendations);
+    player.on(player.exports.Event.Ready, setupRecommendations);
     // Remove recommendations and hide overlay when source is unloaded
-    player.addEventHandler(player.EVENT.ON_SOURCE_UNLOADED, () => {
+    player.on(player.exports.Event.SourceUnloaded, () => {
       clearRecommendations();
@@ -68,3 +68,3 @@ this.hide();
     // Display recommendations when playback has finished
-    player.addEventHandler(player.EVENT.ON_PLAYBACK_FINISHED, () => {
+    player.on(player.exports.Event.PlaybackFinished, () => {
       // Dismiss ON_PLAYBACK_FINISHED events at the end of ads
@@ -79,3 +79,3 @@ // TODO remove this workaround once issue #1278 is solved
     // Hide recommendations when playback starts, e.g. a restart
-    player.addEventHandler(player.EVENT.ON_PLAY, () => {
+    player.on(player.exports.Event.Play, () => {
       this.hide();
@@ -82,0 +82,0 @@ });

src/ts/components/seekbar.ts

@@ -28,3 +28,3 @@ import {Component, ComponentConfig} from './component';
    * as possible to avoid jitter.
-   * Set to -1 to disable smooth updating and update it on player ON_TIME_CHANGED events instead.
+   * Set to -1 to disable smooth updating and update it on player TimeChanged events instead.
    * Default: 50 (50ms = 20fps).
@@ -198,15 +198,13 @@ */
     // init playback position when the player is ready
-    player.addEventHandler(player.EVENT.ON_READY, playbackPositionHandler);
+    player.on(player.exports.Event.Ready, playbackPositionHandler);
     // update playback position when it changes
-    player.addEventHandler(player.EVENT.ON_TIME_CHANGED, playbackPositionHandler);
+    player.on(player.exports.Event.TimeChanged, playbackPositionHandler);
     // update bufferlevel when buffering is complete
-    player.addEventHandler(player.EVENT.ON_STALL_ENDED, playbackPositionHandler);
+    player.on(player.exports.Event.StallEnded, playbackPositionHandler);
     // update playback position when a seek has finished
-    player.addEventHandler(player.EVENT.ON_SEEKED, playbackPositionHandler);
+    player.on(player.exports.Event.Seeked, playbackPositionHandler);
     // update playback position when a timeshift has finished
-    player.addEventHandler(player.EVENT.ON_TIME_SHIFTED, playbackPositionHandler);
+    player.on(player.exports.Event.TimeShifted, playbackPositionHandler);
     // update bufferlevel when a segment has been downloaded
-    player.addEventHandler(player.EVENT.ON_SEGMENT_REQUEST_FINISHED, playbackPositionHandler);
-    // update playback position of Cast playback
-    player.addEventHandler(player.EVENT.ON_CAST_TIME_UPDATED, playbackPositionHandler);
+    player.on(player.exports.Event.SegmentRequestFinished, playbackPositionHandler);
 
@@ -216,12 +214,12 @@ this.configureLivePausedTimeshiftUpdater(player, uimanager, playbackPositionHandler);
     // Seek handling
-    player.addEventHandler(player.EVENT.ON_SEEK, () => {
+    player.on(player.exports.Event.Seek, () => {
       this.setSeeking(true);
     });
-    player.addEventHandler(player.EVENT.ON_SEEKED, () => {
+    player.on(player.exports.Event.Seeked, () => {
       this.setSeeking(false);
     });
-    player.addEventHandler(player.EVENT.ON_TIME_SHIFT, () => {
+    player.on(player.exports.Event.TimeShift, () => {
       this.setSeeking(true);
     });
-    player.addEventHandler(player.EVENT.ON_TIME_SHIFTED, () => {
+    player.on(player.exports.Event.TimeShifted, () => {
       this.setSeeking(false);
@@ -310,3 +308,3 @@ });
     // is positioned absolutely and must therefore be updated when the size of the seekbar changes.
-    player.addEventHandler(player.EVENT.ON_PLAYER_RESIZE, () => {
+    player.on(player.exports.Event.PlayerResize, () => {
       this.refreshPlaybackPosition();
@@ -320,4 +318,4 @@ });
     // It can also happen that the value changes once the player is ready, or when a new source is loaded, so we need
-    // to update on ON_READY too
-    player.addEventHandler(player.EVENT.ON_READY, () => {
+    // to update on Ready too
+    player.on(player.exports.Event.Ready, () => {
       this.refreshPlaybackPosition();
@@ -346,3 +344,3 @@ });
     // Start updater when a live stream with timeshift window is paused
-    player.addEventHandler(player.EVENT.ON_PAUSED, () => {
+    player.on(player.exports.Event.Paused, () => {
       if (player.isLive() && player.getMaxTimeShift() < 0) {
@@ -354,3 +352,3 @@ pausedTimeshiftUpdater.start();
     // Stop updater when playback continues (no matter if the updater was started before)
-    player.addEventHandler(player.EVENT.ON_PLAY, () => pausedTimeshiftUpdater.clear());
+    player.on(player.exports.Event.Play, () => pausedTimeshiftUpdater.clear());
   }
@@ -362,3 +360,3 @@
      *
-     * We do not update the position directly from the ON_TIME_CHANGED event, because it arrives very jittery and
+     * We do not update the position directly from the TimeChanged event, because it arrives very jittery and
      * results in a jittery position indicator since the CSS transition time is statically set.
@@ -410,8 +408,7 @@ * To work around this issue, we maintain a local playback position that is updated in a stable regular interval
 
-    player.addEventHandler(player.EVENT.ON_PLAY, startSmoothPlaybackPositionUpdater);
-    player.addEventHandler(player.EVENT.ON_CAST_PLAYING, startSmoothPlaybackPositionUpdater);
-    player.addEventHandler(player.EVENT.ON_PAUSED, stopSmoothPlaybackPositionUpdater);
-    player.addEventHandler(player.EVENT.ON_CAST_PAUSED, stopSmoothPlaybackPositionUpdater);
-    player.addEventHandler(player.EVENT.ON_PLAYBACK_FINISHED, stopSmoothPlaybackPositionUpdater);
-    player.addEventHandler(player.EVENT.ON_SEEKED, () => {
+    player.on(player.exports.Event.Play, startSmoothPlaybackPositionUpdater);
+    player.on(player.exports.Event.Playing, startSmoothPlaybackPositionUpdater);
+    player.on(player.exports.Event.Paused, stopSmoothPlaybackPositionUpdater);
+    player.on(player.exports.Event.PlaybackFinished, stopSmoothPlaybackPositionUpdater);
+    player.on(player.exports.Event.Seeked, () => {
       currentTimeSeekBar = player.getCurrentTime();
@@ -453,7 +450,7 @@ });
     // Add markers when a source is loaded
-    player.addEventHandler(player.EVENT.ON_READY, setupMarkers);
+    player.on(player.exports.Event.Ready, setupMarkers);
     // Remove markers when unloaded
-    player.addEventHandler(player.EVENT.ON_SOURCE_UNLOADED, clearMarkers);
+    player.on(player.exports.Event.SourceUnloaded, clearMarkers);
     // Update markers when the size of the seekbar changes
-    player.addEventHandler(player.EVENT.ON_PLAYER_RESIZE, () => this.updateMarkers());
+    player.on(player.exports.Event.PlayerResize, () => this.updateMarkers());
     // Update markers when a marker is added or removed
@@ -460,0 +457,0 @@ uimanager.getConfig().events.onUpdated.subscribe(setupMarkers);

src/ts/components/seekbarlabel.ts

@@ -7,2 +7,4 @@ import {Container, ContainerConfig} from './container';
 import {ImageLoader} from '../imageloader';
+import {CssProperties} from '../dom';
+import Thumbnail = bitmovin.PlayerAPI.Thumbnail;
 
@@ -70,3 +72,3 @@ /**
         this.setTime(time);
-        this.setThumbnail(player.getThumb(time));
+        this.setThumbnail(player.getThumbnail(time));
       }
@@ -94,3 +96,3 @@
 
-    player.addEventHandler(player.EVENT.ON_READY, init);
+    player.on(player.exports.Event.Ready, init);
     init();
@@ -127,3 +129,3 @@ }
    */
-  setThumbnail(thumbnail: bitmovin.PlayerAPI.Thumbnail = null) {
+  setThumbnail(thumbnail: Thumbnail = null) {
     let thumbnailElement = this.thumbnail.getDomElement();
@@ -143,29 +145,51 @@
       this.thumbnailImageLoader.load(thumbnail.url, (url, width, height) => {
-        let thumbnailCountX = width / thumbnail.w;
-        let thumbnailCountY = height / thumbnail.h;
+        // can be checked like that because x/y/w/h are either all present or none
+        // https://www.w3.org/TR/media-frags/#naming-space
+        if (thumbnail.x !== undefined) {
+          thumbnailElement.css(this.thumbnailCssSprite(thumbnail, width, height));
+        } else {
+          thumbnailElement.css(this.thumbnailCssSingleImage(thumbnail, width, height));
+        }
+      });
+    }
+  }
 
-        let thumbnailIndexX = thumbnail.x / thumbnail.w;
-        let thumbnailIndexY = thumbnail.y / thumbnail.h;
+  private thumbnailCssSprite(thumbnail: Thumbnail, width: number, height: number): CssProperties {
+    let thumbnailCountX = width / thumbnail.width;
+    let thumbnailCountY = height / thumbnail.height;
 
-        let sizeX = 100 * thumbnailCountX;
-        let sizeY = 100 * thumbnailCountY;
+    let thumbnailIndexX = thumbnail.x / thumbnail.width;
+    let thumbnailIndexY = thumbnail.y / thumbnail.height;
 
-        let offsetX = 100 * thumbnailIndexX;
-        let offsetY = 100 * thumbnailIndexY;
+    let sizeX = 100 * thumbnailCountX;
+    let sizeY = 100 * thumbnailCountY;
 
-        let aspectRatio = 1 / thumbnail.w * thumbnail.h;
+    let offsetX = 100 * thumbnailIndexX;
+    let offsetY = 100 * thumbnailIndexY;
 
-        // The thumbnail size is set by setting the CSS 'width' and 'padding-bottom' properties. 'padding-bottom' is
-        // used because it is relative to the width and can be used to set the aspect ratio of the thumbnail.
-        // A default value for width is set in the stylesheet and can be overwritten from there or anywhere else.
-        thumbnailElement.css({
-          'display': 'inherit',
-          'background-image': `url(${thumbnail.url})`,
-          'padding-bottom': `${100 * aspectRatio}%`,
-          'background-size': `${sizeX}% ${sizeY}%`,
-          'background-position': `-${offsetX}% -${offsetY}%`,
-        });
-      });
-    }
+    let aspectRatio = 1 / thumbnail.width * thumbnail.height;
+
+    // The thumbnail size is set by setting the CSS 'width' and 'padding-bottom' properties. 'padding-bottom' is
+    // used because it is relative to the width and can be used to set the aspect ratio of the thumbnail.
+    // A default value for width is set in the stylesheet and can be overwritten from there or anywhere else.
+    return {
+      'display': 'inherit',
+      'background-image': `url(${thumbnail.url})`,
+      'padding-bottom': `${100 * aspectRatio}%`,
+      'background-size': `${sizeX}% ${sizeY}%`,
+      'background-position': `-${offsetX}% -${offsetY}%`,
+    };
   }
+
+  private thumbnailCssSingleImage(thumbnail: Thumbnail, width: number, height: number): CssProperties {
+    let aspectRatio = 1 / width * height;
+
+    return {
+      'display': 'inherit',
+      'background-image': `url(${thumbnail.url})`,
+      'padding-bottom': `${100 * aspectRatio}%`,
+      'background-size': `100% 100%`,
+      'background-position': `0 0`,
+    };
+  }
 }

src/ts/components/subtitleoverlay.ts

@@ -48,3 +48,3 @@ import {Container, ContainerConfig} from './container';
 
-    player.addEventHandler(player.EVENT.ON_CUE_ENTER, (event: SubtitleCueEvent) => {
+    player.on(player.exports.Event.CueEnter, (event: SubtitleCueEvent) => {
       // Sanitize cue data (must be done before the cue ID is generated in subtitleManager.cueEnter)
@@ -69,3 +69,3 @@ if (event.position) {
     });
-    player.addEventHandler(player.EVENT.ON_CUE_EXIT, (event: SubtitleCueEvent) => {
+    player.on(player.exports.Event.CueExit, (event: SubtitleCueEvent) => {
       let labelToRemove = subtitleManager.cueExit(event);
@@ -95,8 +95,8 @@
 
-    player.addEventHandler(player.EVENT.ON_AUDIO_CHANGED, subtitleClearHandler);
-    player.addEventHandler(player.EVENT.ON_SUBTITLE_CHANGED, subtitleClearHandler);
-    player.addEventHandler(player.EVENT.ON_SEEK, subtitleClearHandler);
-    player.addEventHandler(player.EVENT.ON_TIME_SHIFT, subtitleClearHandler);
-    player.addEventHandler(player.EVENT.ON_PLAYBACK_FINISHED, subtitleClearHandler);
-    player.addEventHandler(player.EVENT.ON_SOURCE_UNLOADED, subtitleClearHandler);
+    player.on(player.exports.Event.AudioChanged, subtitleClearHandler);
+    player.on(player.exports.Event.SubtitleChanged, subtitleClearHandler);
+    player.on(player.exports.Event.Seek, subtitleClearHandler);
+    player.on(player.exports.Event.TimeShift, subtitleClearHandler);
+    player.on(player.exports.Event.PlaybackFinished, subtitleClearHandler);
+    player.on(player.exports.Event.SourceUnloaded, subtitleClearHandler);
 
@@ -194,3 +194,3 @@ uimanager.onComponentShow.subscribe((component: Component<ComponentConfig>) => {
 
-    player.addEventHandler(player.EVENT.ON_PLAYER_RESIZE, () => {
+    player.on(player.exports.Event.PlayerResize, () => {
       if (enabled) {
@@ -237,3 +237,3 @@ updateCEA608FontSize();
 
-    player.addEventHandler(player.EVENT.ON_CUE_EXIT, () => {
+    player.on(player.exports.Event.CueExit, () => {
       if (!this.subtitleManager.hasCues) {
@@ -246,4 +246,4 @@ // Disable CEA-608 mode when all subtitles are gone (to allow correct formatting and
 
-    player.addEventHandler(player.EVENT.ON_SOURCE_UNLOADED, reset);
-    player.addEventHandler(player.EVENT.ON_SUBTITLE_CHANGED, reset);
+    player.on(player.exports.Event.SourceUnloaded, reset);
+    player.on(player.exports.Event.SubtitleChanged, reset);
   }
@@ -298,7 +298,7 @@
   /**
-   * Calculates a unique ID for a subtitle cue, which is needed to associate an ON_CUE_ENTER with its ON_CUE_EXIT
-   * event so we can remove the correct subtitle in ON_CUE_EXIT when multiple subtitles are active at the same time.
+   * Calculates a unique ID for a subtitle cue, which is needed to associate an CueEnter with its CueExit
+   * event so we can remove the correct subtitle in CueExit when multiple subtitles are active at the same time.
    * The start time plus the text should make a unique identifier, and in the only case where a collision
    * can happen, two similar texts will be displayed at a similar time and a similar position (or without position).
-   * The start time should always be known, because it is required to schedule the ON_CUE_ENTER event. The end time
+   * The start time should always be known, because it is required to schedule the CueEnter event. The end time
    * must not necessarily be known and therefore cannot be used for the ID.
@@ -372,3 +372,3 @@ * @param event
        * the wrong order. This rare case has yet to be observed. If it ever gets an issue, we can take the unstable
-       * cue end time (which can change between ON_CUE_ENTER and ON_CUE_EXIT IN ON_CUE_UPDATE) and use it as an
+       * 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.
@@ -375,0 +375,0 @@ */

src/ts/components/subtitleselectbox.ts

@@ -41,11 +41,11 @@ import {SelectBox} from './selectbox';
     // React to API events
-    player.addEventHandler(player.EVENT.ON_SUBTITLE_ADDED, updateSubtitles);
-    player.addEventHandler(player.EVENT.ON_SUBTITLE_CHANGED, selectCurrentSubtitle);
-    player.addEventHandler(player.EVENT.ON_SUBTITLE_REMOVED, updateSubtitles);
+    player.on(player.exports.Event.SubtitleAdded, updateSubtitles);
+    player.on(player.exports.Event.SubtitleChanged, selectCurrentSubtitle);
+    player.on(player.exports.Event.SubtitleRemoved, updateSubtitles);
     // Update subtitles when source goes away
-    player.addEventHandler(player.EVENT.ON_SOURCE_UNLOADED, updateSubtitles);
+    player.on(player.exports.Event.SourceUnloaded, updateSubtitles);
     // Update subtitles when a new source is loaded
-    player.addEventHandler(player.EVENT.ON_READY, updateSubtitles);
+    player.on(player.exports.Event.Ready, updateSubtitles);
     // Update subtitles when the period within a source changes
-    player.addEventHandler(player.EVENT.ON_PERIOD_SWITCHED, updateSubtitles);
+    player.on(player.exports.Event.PeriodSwitched, updateSubtitles);
 
@@ -52,0 +52,0 @@ // Populate subtitles at startup

src/ts/components/uicontainer.ts

@@ -139,3 +139,3 @@ import {ContainerConfig, Container} from './container';
     });
-    player.addEventHandler(player.EVENT.ON_CAST_STARTED, () => {
+    player.on(player.exports.Event.CastStarted, () => {
       showUi(); // Show UI when a Cast session has started (UI will then stay permanently on during the session)
@@ -159,27 +159,27 @@ });
     let removeStates = () => {
-      container.removeClass(stateClassNames[PlayerUtils.PlayerState.IDLE]);
-      container.removeClass(stateClassNames[PlayerUtils.PlayerState.PREPARED]);
-      container.removeClass(stateClassNames[PlayerUtils.PlayerState.PLAYING]);
-      container.removeClass(stateClassNames[PlayerUtils.PlayerState.PAUSED]);
-      container.removeClass(stateClassNames[PlayerUtils.PlayerState.FINISHED]);
+      container.removeClass(stateClassNames[PlayerUtils.PlayerState.Idle]);
+      container.removeClass(stateClassNames[PlayerUtils.PlayerState.Prepared]);
+      container.removeClass(stateClassNames[PlayerUtils.PlayerState.Playing]);
+      container.removeClass(stateClassNames[PlayerUtils.PlayerState.Paused]);
+      container.removeClass(stateClassNames[PlayerUtils.PlayerState.Finished]);
     };
-    player.addEventHandler(player.EVENT.ON_READY, () => {
+    player.on(player.exports.Event.Ready, () => {
       removeStates();
-      container.addClass(stateClassNames[PlayerUtils.PlayerState.PREPARED]);
+      container.addClass(stateClassNames[PlayerUtils.PlayerState.Prepared]);
     });
-    player.addEventHandler(player.EVENT.ON_PLAY, () => {
+    player.on(player.exports.Event.Play, () => {
       removeStates();
-      container.addClass(stateClassNames[PlayerUtils.PlayerState.PLAYING]);
+      container.addClass(stateClassNames[PlayerUtils.PlayerState.Playing]);
     });
-    player.addEventHandler(player.EVENT.ON_PAUSED, () => {
+    player.on(player.exports.Event.Paused, () => {
       removeStates();
-      container.addClass(stateClassNames[PlayerUtils.PlayerState.PAUSED]);
+      container.addClass(stateClassNames[PlayerUtils.PlayerState.Paused]);
     });
-    player.addEventHandler(player.EVENT.ON_PLAYBACK_FINISHED, () => {
+    player.on(player.exports.Event.PlaybackFinished, () => {
       removeStates();
-      container.addClass(stateClassNames[PlayerUtils.PlayerState.FINISHED]);
+      container.addClass(stateClassNames[PlayerUtils.PlayerState.Finished]);
     });
-    player.addEventHandler(player.EVENT.ON_SOURCE_UNLOADED, () => {
+    player.on(player.exports.Event.SourceUnloaded, () => {
       removeStates();
-      container.addClass(stateClassNames[PlayerUtils.PlayerState.IDLE]);
+      container.addClass(stateClassNames[PlayerUtils.PlayerState.Idle]);
     });
@@ -190,6 +190,6 @@ // Init in current player state
     // Fullscreen marker class
-    player.addEventHandler(player.EVENT.ON_FULLSCREEN_ENTER, () => {
+    player.on(player.exports.Event.FullscreenEnter, () => {
       container.addClass(this.prefixCss(UIContainer.FULLSCREEN));
     });
-    player.addEventHandler(player.EVENT.ON_FULLSCREEN_EXIT, () => {
+    player.on(player.exports.Event.FullscreenExit, () => {
       container.removeClass(this.prefixCss(UIContainer.FULLSCREEN));
@@ -203,6 +203,6 @@ });
     // Buffering marker class
-    player.addEventHandler(player.EVENT.ON_STALL_STARTED, () => {
+    player.on(player.exports.Event.StallStarted, () => {
       container.addClass(this.prefixCss(UIContainer.BUFFERING));
     });
-    player.addEventHandler(player.EVENT.ON_STALL_ENDED, () => {
+    player.on(player.exports.Event.StallEnded, () => {
       container.removeClass(this.prefixCss(UIContainer.BUFFERING));
@@ -216,6 +216,6 @@ });
     // RemoteControl marker class
-    player.addEventHandler(player.EVENT.ON_CAST_STARTED, () => {
+    player.on(player.exports.Event.CastStarted, () => {
       container.addClass(this.prefixCss(UIContainer.REMOTE_CONTROL));
     });
-    player.addEventHandler(player.EVENT.ON_CAST_STOPPED, () => {
+    player.on(player.exports.Event.CastStopped, () => {
       container.removeClass(this.prefixCss(UIContainer.REMOTE_CONTROL));
@@ -255,3 +255,3 @@ });
     };
-    player.addEventHandler(player.EVENT.ON_PLAYER_RESIZE, (e: PlayerResizeEvent) => {
+    player.on(player.exports.Event.PlayerResize, (e: PlayerResizeEvent) => {
       // Convert strings (with "px" suffix) to ints
@@ -258,0 +258,0 @@ let width = Math.round(Number(e.width.substring(0, e.width.length - 2)));

src/ts/components/videoqualityselectbox.ts

@@ -20,11 +20,3 @@ import {SelectBox} from './selectbox';
     let selectCurrentVideoQuality = () => {
-      if (player.getVideoQuality) {
-        // Since player 7.3.1
-        this.selectItem(player.getVideoQuality().id);
-      } else {
-        // Backwards compatibility for players <= 7.3.0
-        // TODO remove in next major release
-        let data = player.getDownloadedVideoData();
-        this.selectItem(data.isAuto ? 'auto' : data.id);
-      }
+      this.selectItem(player.getVideoQuality().id);
     };
@@ -59,16 +51,9 @@
     // Update qualities when source goes away
-    player.addEventHandler(player.EVENT.ON_SOURCE_UNLOADED, updateVideoQualities);
+    player.on(player.exports.Event.SourceUnloaded, updateVideoQualities);
     // Update qualities when a new source is loaded
-    player.addEventHandler(player.EVENT.ON_READY, updateVideoQualities);
+    player.on(player.exports.Event.Ready, updateVideoQualities);
     // Update qualities when the period within a source changes
-    player.addEventHandler(player.EVENT.ON_PERIOD_SWITCHED, updateVideoQualities);
+    player.on(player.exports.Event.PeriodSwitched, updateVideoQualities);
     // Update quality selection when quality is changed (from outside)
-    if (player.EVENT.ON_VIDEO_QUALITY_CHANGED) {
-      // Since player 7.3.1
-      player.addEventHandler(player.EVENT.ON_VIDEO_QUALITY_CHANGED, selectCurrentVideoQuality);
-    } else {
-      // Backwards compatibility for players <= 7.3.0
-      // TODO remove in next major release
-      player.addEventHandler(player.EVENT.ON_VIDEO_DOWNLOAD_QUALITY_CHANGE, selectCurrentVideoQuality);
-    }
+    player.on(player.exports.Event.VideoQualityChanged, selectCurrentVideoQuality);
   }
@@ -75,0 +60,0 @@

src/ts/components/volumeslider.ts

@@ -53,6 +53,6 @@ import {SeekBar, SeekBarConfig} from './seekbar';
 
-    player.addEventHandler(player.EVENT.ON_READY, volumeChangeHandler);
-    player.addEventHandler(player.EVENT.ON_VOLUME_CHANGED, volumeChangeHandler);
-    player.addEventHandler(player.EVENT.ON_MUTED, volumeChangeHandler);
-    player.addEventHandler(player.EVENT.ON_UNMUTED, volumeChangeHandler);
+    player.on(player.exports.Event.Ready, volumeChangeHandler);
+    player.on(player.exports.Event.VolumeChanged, volumeChangeHandler);
+    player.on(player.exports.Event.Muted, volumeChangeHandler);
+    player.on(player.exports.Event.Unmuted, volumeChangeHandler);
 
@@ -70,6 +70,6 @@ this.onSeekPreview.subscribeRateLimited((sender, args) => {
     // or the UI is configured. Check the seekbar for a detailed description.
-    player.addEventHandler(player.EVENT.ON_PLAYER_RESIZE, () => {
+    player.on(player.exports.Event.PlayerResize, () => {
       this.refreshPlaybackPosition();
     });
-    player.addEventHandler(player.EVENT.ON_READY, () => {
+    player.on(player.exports.Event.Ready, () => {
       this.refreshPlaybackPosition();
@@ -76,0 +76,0 @@ });

src/ts/components/volumetogglebutton.ts

@@ -54,5 +54,5 @@ import {ToggleButton, ToggleButtonConfig} from './togglebutton';
 
-    player.addEventHandler(player.EVENT.ON_MUTED, muteStateHandler);
-    player.addEventHandler(player.EVENT.ON_UNMUTED, muteStateHandler);
-    player.addEventHandler(player.EVENT.ON_VOLUME_CHANGED, volumeLevelHandler);
+    player.on(player.exports.Event.Muted, muteStateHandler);
+    player.on(player.exports.Event.Unmuted, muteStateHandler);
+    player.on(player.exports.Event.VolumeChanged, volumeLevelHandler);
 
@@ -59,0 +59,0 @@ this.onClick.subscribe(() => {

src/ts/components/vrtogglebutton.ts

 import {ToggleButton, ToggleButtonConfig} from './togglebutton';
 import {UIInstanceManager} from '../uimanager';
+import PlayerEvent = bitmovin.PlayerAPI.PlayerEvent;
+import WarningEvent = bitmovin.PlayerAPI.WarningEvent;
 
@@ -25,3 +27,3 @@ /**
       // TODO use getVRStatus() through isVRStereoAvailable() once the player has been rewritten and the status is
-      // available in ON_READY
+      // available in Ready
       let config = player.getConfig();
@@ -35,3 +37,8 @@ return config.source && config.source.vr && config.source.vr.contentType !== 'none';
 
-    let vrStateHandler = () => {
+    let vrStateHandler = (ev: PlayerEvent) => {
+      if (ev.type === player.exports.Event.Warning && (ev as WarningEvent).code !== 5006) {
+        // a code of 5006 signals a VR Error, so don't do anything on other warnings
+        return;
+      }
+
       if (isVRConfigured() && isVRStereoAvailable()) {
@@ -58,9 +65,8 @@ this.show(); // show button in case it is hidden
 
-    player.addEventHandler(player.EVENT.ON_VR_MODE_CHANGED, vrStateHandler);
-    player.addEventHandler(player.EVENT.ON_VR_STEREO_CHANGED, vrStateHandler);
-    player.addEventHandler(player.EVENT.ON_VR_ERROR, vrStateHandler);
+    player.on(player.exports.Event.VRStereoChanged, vrStateHandler);
+    player.on(player.exports.Event.Warning, vrStateHandler);
     // Hide button when VR source goes away
-    player.addEventHandler(player.EVENT.ON_SOURCE_UNLOADED, vrButtonVisibilityHandler);
+    player.on(player.exports.Event.SourceUnloaded, vrButtonVisibilityHandler);
     // Show button when a new source is loaded and it's VR
-    player.addEventHandler(player.EVENT.ON_READY, vrButtonVisibilityHandler);
+    player.on(player.exports.Event.Ready, vrButtonVisibilityHandler);
 
@@ -67,0 +73,0 @@ this.onClick.subscribe(() => {

src/ts/dom.ts

@@ -6,2 +6,6 @@ export interface Offset {
 
+export interface CssProperties {
+  [propertyName: string]: string;
+}
+
 /**
@@ -101,12 +105,3 @@ * Simple DOM manipulation and DOM element event handling modeled after jQuery (as replacement for jQuery).
    * @returns {HTMLElement[]} the raw HTML elements
-   * @deprecated use {@link #get()} instead
    */
-  getElements(): HTMLElement[] {
-    return this.get();
-  }
-
-  /**
-   * Gets the HTML elements that this DOM instance currently holds.
-   * @returns {HTMLElement[]} the raw HTML elements
-   */
   get(): HTMLElement[];
@@ -511,4 +506,4 @@ /**
    */
-  css(propertyValueCollection: {[propertyName: string]: string}): DOM;
-  css(propertyNameOrCollection: string | {[propertyName: string]: string}, value?: string): string | null | DOM {
+  css(propertyValueCollection: CssProperties): DOM;
+  css(propertyNameOrCollection: string | CssProperties, value?: string): string | null | DOM {
     if (typeof propertyNameOrCollection === 'string') {
@@ -515,0 +510,0 @@ let propertyName = propertyNameOrCollection;

src/ts/main.ts

@@ -70,4 +70,2 @@ /// <reference path='player.d.ts' />
 import {StorageUtils} from './storageutils';
-// HACK: gulp-tslint fails on unused files so we need this dummy import
-import {ArrayUtils as Dummy} from './utils'; // tslint:disable-line
 import {SubtitleSettingsResetButton} from './components/subtitlesettings/subtitlesettingsresetbutton';
@@ -74,0 +72,0 @@

src/ts/player-config.d.ts

@@ -5,2 +5,6 @@ declare namespace bitmovin {
 
+    import HttpRequestMethod = bitmovin.player.Network.HttpRequestMethod;
+    import HttpResponseType = bitmovin.player.Network.HttpResponseType;
+    import HttpRequestType = bitmovin.player.Network.HttpRequestType;
+
     interface ProgressiveSourceConfig {
@@ -341,3 +345,3 @@ /**
       /**
-       * The threshold in degrees that the viewport can change before the ON_VR_VIEWING_DIRECTION_CHANGE event is
+       * The threshold in degrees that the viewport can change before the VRViewingDirectionChange event is
        * triggered.
@@ -347,3 +351,3 @@ */
       /**
-       * The minimal interval between consecutive ON_VR_VIEWING_DIRECTION_CHANGE events.
+       * The minimal interval between consecutive VRViewingDirectionChange events.
        */
@@ -778,36 +782,2 @@ viewingDirectionChangeEventInterval?: number;
     /**
-     * Values the `HttpRequestType` property can have in the network API config callbacks.
-     */
-    enum HttpRequestType {
-      MANIFEST_DASH,
-      MANIFEST_HLS_MASTER,
-      MANIFEST_HLS_VARIANT,
-      MANIFEST_SMOOTH,
-      MANIFEST_ADS,
-
-      MEDIA_AUDIO,
-      MEDIA_VIDEO,
-      MEDIA_SUBTITLES,
-      MEDIA_THUMBNAILS,
-
-      DRM_LICENSE_WIDEVINE,
-      DRM_LICENSE_PLAYREADY,
-      DRM_LICENSE_FAIRPLAY,
-      DRM_LICENSE_PRIMETIME,
-      DRM_LICENSE_CLEARKEY,
-
-      DRM_CERTIFICATE_FAIRPLAY,
-
-      KEY_HLS_AES,
-    }
-
-    enum HttpResponseType {
-      ARRAYBUFFER,
-      BLOB,
-      DOCUMENT,
-      JSON,
-      TEXT,
-    }
-
-    /**
      * Allowed types of the {@link HttpRequest.body}
@@ -822,11 +792,2 @@ */
 
-    /**
-     * Allowed HTTP request method
-     */
-    enum HttpRequestMethod {
-      GET,
-      POST,
-      HEAD,
-    }
-
     interface HttpRequest {
@@ -833,0 +794,0 @@ /**

src/ts/player-events.d.ts

@@ -6,92 +6,78 @@ declare namespace bitmovin {
     /**
-     * The events that are exposed by the player API are strings.
-     * Events can be subscribed to through {@link Player#addEventHandler}.
-     * TODO rename enum to Event (camel case)
-     */
-    type EVENT = string;
-    /**
      * All available events of the player
      */
-    interface EventList {
-      ON_AD_CLICKED: EVENT;
-      ON_AD_ERROR: EVENT;
-      ON_AD_FINISHED: EVENT;
-      ON_AD_LINEARITY_CHANGED: EVENT;
-      ON_AD_MANIFEST_LOADED: EVENT;
-      ON_AD_SCHEDULED: EVENT;
-      ON_AD_SKIPPED: EVENT;
-      ON_AD_STARTED: EVENT;
-      ON_AUDIO_ADAPTATION: EVENT;
-      ON_AUDIO_CHANGED: EVENT;
-      ON_AUDIO_ADDED: EVENT;
-      ON_AUDIO_REMOVED: EVENT;
-      ON_AUDIO_QUALITY_CHANGED: EVENT;
-      ON_AUDIO_DOWNLOAD_QUALITY_CHANGE: EVENT;
-      ON_AUDIO_DOWNLOAD_QUALITY_CHANGED: EVENT;
-      ON_AUDIO_PLAYBACK_QUALITY_CHANGED: EVENT;
-      ON_CAST_AVAILABLE: EVENT;
-      ON_CAST_START: EVENT;
-      ON_CAST_WAITING_FOR_DEVICE: EVENT;
-      ON_CAST_STARTED: EVENT;
-      ON_CAST_PLAYING: EVENT;
-      ON_CAST_PAUSED: EVENT;
-      ON_CAST_STOPPED: EVENT;
-      ON_CAST_PLAYBACK_FINISHED: EVENT;
-      ON_CAST_TIME_UPDATED: EVENT;
-      ON_CUE_PARSED: EVENT;
-      ON_CUE_ENTER: EVENT;
-      ON_CUE_UPDATE: EVENT;
-      ON_CUE_EXIT: EVENT;
-      ON_DOWNLOAD_FINISHED: EVENT;
-      ON_DVR_WINDOW_EXCEEDED: EVENT;
-      ON_ERROR: EVENT;
-      ON_FULLSCREEN_ENTER: EVENT;
-      ON_FULLSCREEN_EXIT: EVENT;
-      ON_HIDE_CONTROLS: EVENT;
-      ON_METADATA: EVENT;
-      ON_METADATA_PARSED: EVENT;
-      ON_MUTED: EVENT;
-      ON_PAUSED: EVENT;
-      ON_PERIOD_SWITCH: EVENT;
-      ON_PERIOD_SWITCHED: EVENT;
-      ON_PLAY: EVENT;
-      ON_PLAYING: EVENT;
-      ON_PLAYBACK_FINISHED: EVENT;
-      ON_PLAYER_RESIZE: EVENT;
-      ON_READY: EVENT;
-      ON_SEEK: EVENT;
-      ON_SEEKED: EVENT;
-      ON_SEGMENT_PLAYBACK: EVENT;
-      ON_SEGMENT_REQUEST_FINISHED: EVENT;
-      ON_SHOW_CONTROLS: EVENT;
-      ON_SOURCE_LOADED: EVENT;
-      ON_SOURCE_UNLOADED: EVENT;
-      ON_STALL_STARTED: EVENT;
-      ON_STALL_ENDED: EVENT;
-      ON_SUBTITLE_ADDED: EVENT;
-      ON_SUBTITLE_CHANGED: EVENT;
-      ON_SUBTITLE_REMOVED: EVENT;
-      ON_TIME_CHANGED: EVENT;
-      ON_TIME_SHIFT: EVENT;
-      ON_TIME_SHIFTED: EVENT;
-      ON_UNMUTED: EVENT;
-      ON_VIDEO_ADAPTATION: EVENT;
-      ON_VIDEO_QUALITY_CHANGED: EVENT;
-      ON_VIDEO_DOWNLOAD_QUALITY_CHANGE: EVENT;
-      ON_VIDEO_DOWNLOAD_QUALITY_CHANGED: EVENT;
-      ON_VIDEO_PLAYBACK_QUALITY_CHANGED: EVENT;
-      ON_VOLUME_CHANGED: EVENT;
-      ON_VR_ERROR: EVENT;
-      ON_VR_MODE_CHANGED: EVENT;
-      ON_VR_STEREO_CHANGED: EVENT;
-      ON_WARNING: EVENT;
-      ON_PICTURE_IN_PICTURE_ENTER: EVENT;
-      ON_PICTURE_IN_PICTURE_EXIT: EVENT;
-      ON_AIRPLAY_AVAILABLE: EVENT;
-      ON_VR_VIEWING_DIRECTION_CHANGE: EVENT;
-      ON_VR_VIEWING_DIRECTION_CHANGED: EVENT;
-      ON_DESTROY: EVENT;
-      ON_AD_BREAK_STARTED: EVENT;
-      ON_AD_BREAK_FINISHED: EVENT;
-      ON_PLAYBACK_SPEED_CHANGED: EVENT;
+    enum Event {
+      AdBreakStarted,
+      AdBreakFinished,
+      AdClicked,
+      AdError,
+      AdFinished,
+      AdLinearityChanged,
+      AdManifestLoaded,
+      AdScheduled,
+      AdSkipped,
+      AdStarted,
+      AudioAdaptation,
+      AudioChanged,
+      AudioAdded,
+      AudioRemoved,
+      AudioQualityChanged,
+      AudioDownloadQualityChange,
+      AudioDownloadQualityChanged,
+      AudioPlaybackQualityChanged,
+      CastAvailable,
+      CastStart,
+      CastStarted,
+      CastWaitingForDevice,
+      CastStopped,
+      CueParsed,
+      CueEnter,
+      CueUpdate,
+      CueExit,
+      Destroy,
+      DownloadFinished,
+      DVRWindowExceeded,
+      Error,
+      FullscreenEnter,
+      FullscreenExit,
+      Metadata,
+      MetadataParsed,
+      Muted,
+      Paused,
+      PeriodSwitch,
+      PeriodSwitched,
+      Play,
+      Playing,
+      PlaybackFinished,
+      PlaybackSpeedChanged,
+      PlayerResize,
+      Ready,
+      Seek,
+      Seeked,
+      SegmentPlayback,
+      SegmentRequestFinished,
+      SourceLoaded,
+      SourceUnloaded,
+      StallStarted,
+      StallEnded,
+      SubtitleAdded,
+      SubtitleChanged,
+      SubtitleRemoved,
+      TimeChanged,
+      TimeShift,
+      TimeShifted,
+      Unmuted,
+      VideoAdaptation,
+      VideoQualityChanged,
+      VideoDownloadQualityChange,
+      VideoDownloadQualityChanged,
+      VideoPlaybackQualityChanged,
+      VolumeChanged,
+      VRStereoChanged,
+      Warning,
+      PictureInPictureEnter,
+      PictureInPictureExit,
+      AirplayAvailable,
+      VRViewingDirectionChange,
+      VRViewingDirectionChanged,
     }
@@ -107,3 +93,3 @@
        */
-      type?: EVENT;
+      type?: Event;
     }
@@ -110,0 +96,0 @@

src/ts/player.d.ts

@@ -6,47 +6,59 @@ /// <reference path='player-config.d.ts' />
 
+  import Config = bitmovin.PlayerAPI.Config;
+
   interface PlayerStatic {
     /**
-     * Creates and returns a new player instance attached to the provided DOM element ID.
-     * @param domElementID the ID of the DOM (i.e. HTML) element that the player should be added to
+     * Creates and returns a new player instance attached to the provided DOM element.
      */
-    (domElementID: string): bitmovin.PlayerAPI;
+    new (containerElement: HTMLElement, config: Config): bitmovin.PlayerAPI;
+
     /**
-     * All available events of the player.
-     */
-    EVENT: bitmovin.PlayerAPI.EventList;
-    /**
      * The version number of the player.
      */
     version: string;
+  }
 
-    VR: {
-      CONTENT_TYPE: {
-        SINGLE: PlayerAPI.VR.ContentType,
-        TAB: PlayerAPI.VR.ContentType,
-        SBS: PlayerAPI.VR.ContentType,
-      },
-      STATE: {
-        READY: PlayerAPI.VR.State,
-        PLAYING: PlayerAPI.VR.State,
-        ERROR: PlayerAPI.VR.State,
-        UNINITIALIZED: PlayerAPI.VR.State,
-      },
-      TRANSITION_TIMING_TYPE: {
-        NONE: PlayerAPI.VR.TransitionTimingType,
-        EASE_IN: PlayerAPI.VR.TransitionTimingType,
-        EASE_OUT: PlayerAPI.VR.TransitionTimingType,
-        EASE_IN_OUT: PlayerAPI.VR.TransitionTimingType,
-      },
-    };
+  namespace player {
+    const Player: PlayerStatic;
 
-    network: {
-      REQUEST_TYPE: typeof PlayerAPI.HttpRequestType,
-      REQUEST_METHOD: typeof PlayerAPI.HttpRequestMethod,
-      RESPONSE_TYPE: typeof PlayerAPI.HttpResponseType,
-    };
+    namespace Network {
+      enum HttpRequestMethod {
+        GET,
+        POS,
+        HEAD,
+      }
+
+      enum HttpRequestType {
+        MANIFEST_DASH,
+        MANIFEST_HLS_MASTER,
+        MANIFEST_HLS_VARIANT,
+        MANIFEST_SMOOTH,
+        MANIFEST_ADS,
+
+        MEDIA_AUDIO,
+        MEDIA_VIDEO,
+        MEDIA_SUBTITLES,
+        MEDIA_THUMBNAILS,
+
+        DRM_LICENSE_WIDEVINE,
+        DRM_LICENSE_PLAYREADY,
+        DRM_LICENSE_FAIRPLAY,
+        DRM_LICENSE_PRIMETIME,
+        DRM_LICENSE_CLEARKEY,
+
+        DRM_CERTIFICATE_FAIRPLAY,
+
+        KEY_HLS_AES,
+      }
+
+      enum HttpResponseType {
+        ARRAYBUFFER,
+        BLOB,
+        DOCUMENT,
+        JSON,
+        TEXT,
+      }
+    }
   }
 
-  // tslint:disable-next-line:no-unused-variable
-  const player: PlayerStatic;
-
   /**
@@ -56,19 +68,15 @@ * Bitmovin Player instance members.
   interface PlayerAPI {
+    exports: {
+      Network: typeof bitmovin.player.Network;
+      Event: typeof bitmovin.PlayerAPI.Event;
+    };
     /**
      * Subscribes an event handler to a player event.
-     * This will be replaced by {@link PlayerAPI.on} in version 8
      *
      * @param eventType The type of event to subscribe to.
      * @param callback The event callback handler that will be called when the event fires.
-     */
-    addEventHandler(eventType: PlayerAPI.EVENT, callback: PlayerAPI.PlayerEventCallback): PlayerAPI;
-    /**
-     * Subscribes an event handler to a player event.
      *
-     * @param eventType The type of event to subscribe to.
-     * @param callback The event callback handler that will be called when the event fires.
-     *
-     * @since v7.7
+     * @since v7.8
      */
-    on(eventType: PlayerAPI.EVENT, callback: PlayerAPI.PlayerEventCallback): PlayerAPI;
+    on(eventType: PlayerAPI.Event, callback: PlayerAPI.PlayerEventCallback): PlayerAPI;
     /**
@@ -206,4 +214,3 @@ * Sends custom metadata to Bitmovin's Cast receiver app.
     /**
-     * Creates a snapshot of the current video frame.
-     * TODO is it possible to take a snapshot of DRM protected content?
+     * Creates a snapshot of the current video frame of non-DRM content.
      *
@@ -237,3 +244,3 @@ * @param type The type of image snapshot to capture. Allowed values are 'image/jpeg' and 'image/webp'.
      */
-    getThumb(time: number): PlayerAPI.Thumbnail;
+    getThumbnail(time: number): PlayerAPI.Thumbnail;
     /**
@@ -304,10 +311,2 @@ * Returns the current time shift offset to the live edge in seconds. Only applicable to live streams.
     /**
-     * Returns true if the player has finished initialization and is ready to use and to handle other API calls.
-     */
-    isReady(): boolean;
-    /**
-     * Returns true if the setup call has already been successfully called.
-     */
-    isSetup(): boolean;
-    /**
      * Returns true if the player is currently stalling due to an empty buffer.
@@ -319,7 +318,7 @@ */
      *
-     * @param source A source object as specified in player configuration during {@link #setup}
+     * @param source A source object
      * @param forceTechnology Forces the player to use the specified playback and streaming technology
      * @param disableSeeking If set, seeking will be disabled
      */
-    load(source: PlayerAPI.SourceConfig, forceTechnology?: string, disableSeeking?: boolean): Promise<PlayerAPI>;
+    load(source: PlayerAPI.SourceConfig, forceTechnology?: string, disableSeeking?: boolean): Promise<void>;
     /**
@@ -342,19 +341,11 @@ * Mutes the player if an audio track is available. Has no effect if the player is already muted.
      * Removes a handler for a player event.
-     * This will be replaced by {@link PlayerAPI.off} in version 8
      *
      * @param eventType The event to remove the handler from
      * @param callback The callback handler to remove
+     *
+     * @since v7.8
      */
     // TODO remove string type option (this is a temporary hack for PlayerWrapper#clearEventHandlers)
-    removeEventHandler(eventType: PlayerAPI.EVENT | string, callback: PlayerAPI.PlayerEventCallback): PlayerAPI;
+    off(eventType: PlayerAPI.Event | string, callback: PlayerAPI.PlayerEventCallback): PlayerAPI;
     /**
-     * Removes a handler for a player event.
-     *
-     * @param eventType The event to remove the handler from
-     * @param callback The callback handler to remove
-     *
-     * @since v7.7
-     */
-    off(eventType: PlayerAPI.EVENT | string, callback: PlayerAPI.PlayerEventCallback): PlayerAPI;
-    /**
      * Removes the existing subtitle/caption track with the track ID specified by trackID. If the track is
@@ -458,9 +449,2 @@ * currently active, it will be deactivated and then removed. If no track with the given ID exists,
     /**
-     * Sets up a new player instance with the given configuration, as specified in player configuration documentation.
-     *
-     * @param userConfig User-supplied configuration of the player
-     * @param forceTechnology Forces the player to use the specified playback and streaming technology
-     */
-    setup(userConfig: PlayerAPI.Config, forceTechnology?: string): Promise<PlayerAPI>;
-    /**
      * Passes an HTML video element to the player, which should be used in case of non-Flash playback.
@@ -522,9 +506,3 @@ * Needs to be called before {@link #setup}. Has no effect if the Flash fallback is selected.
     unmute(issuer?: string): PlayerAPI;
-
-    fireEvent(event: PlayerAPI.EVENT, data: {}): void;
     /**
-     * All available events of the player.
-     */
-    EVENT: PlayerAPI.EventList;
-    /**
      * The version number of the player.
@@ -606,7 +584,7 @@ */
        */
-      w: number;
+      width: number;
       /**
        * Height of the thumbnail.
        */
-      h: number;
+      height: number;
       /**
@@ -991,5 +969,5 @@ * Index of the thumbnail in its spritesheet.
       /**
-       * Sets the minimal interval between consecutive ON_VR_VIEWING_DIRECTION_CHANGE events. The default value is
+       * Sets the minimal interval between consecutive VRViewingDirectionChange events. The default value is
        * 250ms.
-       * @param {number} interval - The minimal interval between consecutive ON_VR_VIEWING_DIRECTION_CHANGE events.
+       * @param {number} interval - The minimal interval between consecutive VRViewingDirectionChange events.
        * @return {boolean} - True, if the VRHandler is ready, false otherwise.
@@ -1000,4 +978,4 @@ */
       /**
-       * Gets the minimal interval between consecutive ON_VR_VIEWING_DIRECTION_CHANGE events.
-       * @return {Number} - The minimal interval between consecutive ON_VR_VIEWING_DIRECTION_CHANGE events.
+       * Gets the minimal interval between consecutive VRViewingDirectionChange events.
+       * @return {Number} - The minimal interval between consecutive VRViewingDirectionChange events.
        */
@@ -1007,6 +985,6 @@ getViewingDirectionChangeEventInterval(): number;
       /**
-       * Sets the number of degrees that the viewport can change before the ON_VR_VIEWING_DIRECTION_CHANGE event is
+       * Sets the number of degrees that the viewport can change before the VRViewingDirectionChange event is
        * triggered. The default value is 5°.
        * @param {Number} threshold - The threshold in degrees that the viewport can change before the
-       * ON_VR_VIEWING_DIRECTION_CHANGE event is triggered.
+       * VRViewingDirectionChange event is triggered.
        * @return {Boolean} - True, if the VRHandler is ready, false otherwise.
@@ -1017,6 +995,6 @@ */
       /**
-       * Gets the number of degrees that the viewport can change before the ON_VR_VIEWING_DIRECTION_CHANGE event is
+       * Gets the number of degrees that the viewport can change before the VRViewingDirectionChange event is
        * triggered.
        * @return {Number} - The threshold in degrees that the viewport can change before the
-       * ON_VR_VIEWING_DIRECTION_CHANGE event is triggered.
+       * VRViewingDirectionChange event is triggered.
        */
@@ -1023,0 +1001,0 @@ getViewingDirectionChangeThreshold(): number;

src/ts/playerutils.ts

@@ -9,7 +9,7 @@ import {Event, EventDispatcher, NoArgs} from './eventdispatcher';
   export enum PlayerState {
-    IDLE,
-    PREPARED,
-    PLAYING,
-    PAUSED,
-    FINISHED,
+    Idle,
+    Prepared,
+    Playing,
+    Paused,
+    Finished,
   }
@@ -23,11 +23,11 @@
     if (player.hasEnded()) {
-      return PlayerState.FINISHED;
+      return PlayerState.Finished;
     } else if (player.isPlaying()) {
-      return PlayerState.PLAYING;
+      return PlayerState.Playing;
     } else if (player.isPaused()) {
-      return PlayerState.PAUSED;
-    } else if (player.isReady()) {
-      return PlayerState.PREPARED;
+      return PlayerState.Paused;
+    } else if (player.getConfig(true).source) {
+      return PlayerState.Prepared;
     } else {
-      return PlayerState.IDLE;
+      return PlayerState.Idle;
     }
@@ -53,7 +53,7 @@ }
       };
-      // Try to detect timeshift availability in ON_READY, which works for DASH streams
-      player.addEventHandler(player.EVENT.ON_READY, timeShiftDetector);
+      // Try to detect timeshift availability in Ready, which works for DASH streams
+      player.on(player.exports.Event.Ready, timeShiftDetector);
       // With HLS/NativePlayer streams, getMaxTimeShift can be 0 before the buffer fills, so we need to additionally
-      // check timeshift availability in ON_TIME_CHANGED
-      player.addEventHandler(player.EVENT.ON_TIME_CHANGED, timeShiftDetector);
+      // check timeshift availability in TimeChanged
+      player.on(player.exports.Event.TimeChanged, timeShiftDetector);
     }
@@ -108,5 +108,5 @@
       // Initialize when player is ready
-      player.addEventHandler(player.EVENT.ON_READY, liveDetector);
+      player.on(player.exports.Event.Ready, liveDetector);
       // Re-evaluate when playback starts
-      player.addEventHandler(player.EVENT.ON_PLAY, liveDetector);
+      player.on(player.exports.Event.Play, liveDetector);
 
@@ -117,3 +117,3 @@ // HLS live detection workaround for Android:
       if (BrowserUtils.isAndroid && BrowserUtils.isChrome) {
-        player.addEventHandler(player.EVENT.ON_TIME_CHANGED, liveDetector);
+        player.on(player.exports.Event.TimeChanged, liveDetector);
       }
@@ -120,0 +120,0 @@ }

src/ts/uimanager.ts

@@ -36,3 +36,3 @@ import {UIContainer} from './components/uicontainer';
 import {AdClickOverlay} from './components/adclickoverlay';
-import EVENT = bitmovin.PlayerAPI.EVENT;
+import Event = bitmovin.PlayerAPI.Event;
 import PlayerEventCallback = bitmovin.PlayerAPI.PlayerEventCallback;
@@ -137,8 +137,2 @@ import AdStartedEvent = bitmovin.PlayerAPI.AdStartedEvent;
   /**
-   * Tells if the ad allows a UI. This is currently only true for VAST ads and cannot be used to differentiate between
-   * different ad clients (i.e. to display different UIs for different ad clients).
-   * @deprecated Will be removed in an upcoming major release, use {@link #adClientType} instead.
-   */
-  isAdWithUI: boolean;
-  /**
    * Tells the ad client (e.g. 'vast, 'ima') if {@link #isAd} is true.
@@ -280,3 +274,3 @@ */
     // Update the configuration when a new source is loaded
-    this.managerPlayerWrapper.getPlayer().addEventHandler(this.player.EVENT.ON_SOURCE_LOADED, () => {
+    this.managerPlayerWrapper.getPlayer().on(this.player.exports.Event.SourceLoaded, () => {
       updateConfig();
@@ -339,9 +333,9 @@ this.config.events.onUpdated.dispatch(this);
           // When the ad starts, we store the event data
-          case player.EVENT.ON_AD_STARTED:
+          case player.exports.Event.AdStarted:
             adStartedEvent = <AdStartedEvent>event;
             break;
           // When the ad ends, we delete the event data
-          case player.EVENT.ON_AD_FINISHED:
-          case player.EVENT.ON_AD_SKIPPED:
-          case player.EVENT.ON_AD_ERROR:
+          case player.exports.Event.AdFinished:
+          case player.exports.Event.AdSkipped:
+          case player.exports.Event.AdError:
             adStartedEvent = null;
@@ -352,3 +346,3 @@ break;
           // changes.
-          case player.EVENT.ON_READY:
+          case player.exports.Event.Ready:
             if (adStartedEvent && !player.isAd()) {
@@ -362,7 +356,5 @@ adStartedEvent = null;
       let ad = adStartedEvent != null;
-      let adWithUI = ad && adStartedEvent.clientType === 'vast';
 
       this.resolveUiVariant({
         isAd: ad,
-        isAdWithUI: adWithUI,
         adClientType: ad ? adStartedEvent.clientType : null,
@@ -380,3 +372,3 @@ }, (context) => {
            */
-          this.currentUi.getWrappedPlayer().fireEventInUI(this.player.EVENT.ON_AD_STARTED, adStartedEvent);
+          this.currentUi.getWrappedPlayer().fireEventInUI(this.player.exports.Event.AdStarted, adStartedEvent);
         }
@@ -388,12 +380,12 @@ });
     if (config.autoUiVariantResolve) {
-      this.managerPlayerWrapper.getPlayer().addEventHandler(this.player.EVENT.ON_READY, resolveUiVariant);
-      this.managerPlayerWrapper.getPlayer().addEventHandler(this.player.EVENT.ON_PLAY, resolveUiVariant);
-      this.managerPlayerWrapper.getPlayer().addEventHandler(this.player.EVENT.ON_PAUSED, resolveUiVariant);
-      this.managerPlayerWrapper.getPlayer().addEventHandler(this.player.EVENT.ON_AD_STARTED, resolveUiVariant);
-      this.managerPlayerWrapper.getPlayer().addEventHandler(this.player.EVENT.ON_AD_FINISHED, resolveUiVariant);
-      this.managerPlayerWrapper.getPlayer().addEventHandler(this.player.EVENT.ON_AD_SKIPPED, resolveUiVariant);
-      this.managerPlayerWrapper.getPlayer().addEventHandler(this.player.EVENT.ON_AD_ERROR, resolveUiVariant);
-      this.managerPlayerWrapper.getPlayer().addEventHandler(this.player.EVENT.ON_PLAYER_RESIZE, resolveUiVariant);
-      this.managerPlayerWrapper.getPlayer().addEventHandler(this.player.EVENT.ON_FULLSCREEN_ENTER, resolveUiVariant);
-      this.managerPlayerWrapper.getPlayer().addEventHandler(this.player.EVENT.ON_FULLSCREEN_EXIT, resolveUiVariant);
+      this.managerPlayerWrapper.getPlayer().on(this.player.exports.Event.Ready, resolveUiVariant);
+      this.managerPlayerWrapper.getPlayer().on(this.player.exports.Event.Play, resolveUiVariant);
+      this.managerPlayerWrapper.getPlayer().on(this.player.exports.Event.Paused, resolveUiVariant);
+      this.managerPlayerWrapper.getPlayer().on(this.player.exports.Event.AdStarted, resolveUiVariant);
+      this.managerPlayerWrapper.getPlayer().on(this.player.exports.Event.AdFinished, resolveUiVariant);
+      this.managerPlayerWrapper.getPlayer().on(this.player.exports.Event.AdSkipped, resolveUiVariant);
+      this.managerPlayerWrapper.getPlayer().on(this.player.exports.Event.AdError, resolveUiVariant);
+      this.managerPlayerWrapper.getPlayer().on(this.player.exports.Event.PlayerResize, resolveUiVariant);
+      this.managerPlayerWrapper.getPlayer().on(this.player.exports.Event.FullscreenEnter, resolveUiVariant);
+      this.managerPlayerWrapper.getPlayer().on(this.player.exports.Event.FullscreenExit, resolveUiVariant);
     }
@@ -474,3 +466,2 @@
       isAd: false,
-      isAdWithUI: false,
       adClientType: null,
@@ -510,3 +501,2 @@ isFullscreen: this.player.isFullscreen(),
     let dom = ui.getUI().getDomElement();
-    let player = ui.getWrappedPlayer();
 
@@ -519,8 +509,2 @@ ui.configureControls();
 
-    // Some components initialize their state on ON_READY. When the UI is loaded after the player is already ready,
-    // they will never receive the event so we fire it from here in such cases.
-    if (player.isReady()) {
-      player.fireEventInUI(player.EVENT.ON_READY, {});
-    }
-
     // Fire onConfigured after UI DOM elements are successfully added. When fired immediately, the DOM elements
@@ -849,3 +833,4 @@ // might not be fully configured and e.g. do not have a size.
       condition: (context: UIConditionContext) => {
-        return context.isMobile && context.documentWidth < smallScreenSwitchWidth && context.isAdWithUI;
+        return context.isMobile && context.documentWidth < smallScreenSwitchWidth && context.isAd
+          && context.adClientType === 'vast';
       },
@@ -855,3 +840,3 @@ }, {
       condition: (context: UIConditionContext) => {
-        return context.isAdWithUI;
+        return context.isAd && context.adClientType === 'vast';
       },
@@ -872,3 +857,3 @@ }, {
       condition: (context: UIConditionContext) => {
-        return context.isAdWithUI;
+        return context.isAd && context.adClientType === 'vast';
       },
@@ -1009,3 +994,3 @@ }, {
       condition: (context: UIConditionContext) => {
-        return context.isAdWithUI;
+        return context.isAd && context.adClientType === 'vast';
       },
@@ -1258,3 +1243,3 @@ }, {
    */
-  fireEventInUI(event: EVENT, data: {}): void;
+  fireEventInUI(event: Event, data: {}): void;
 }
@@ -1326,11 +1311,5 @@
 
-    // Explicitly add a wrapper method for 'addEventHandler' that adds added event handlers to the event list
-    wrapper.addEventHandler = (eventType: EVENT, callback: PlayerEventCallback) => {
-      // in player V8 addEventHandler was replaced by on
-      if (player.on) {
-        player.on(eventType, callback);
-      } else {
-        // keep backward compatibility for versions <7.7
-        player.addEventHandler(eventType, callback);
-      }
+    // Explicitly add a wrapper method for 'on' that adds added event handlers to the event list
+    wrapper.on = (eventType: Event, callback: PlayerEventCallback) => {
+      player.on(eventType, callback);
 
@@ -1346,10 +1325,5 @@ if (!this.eventHandlers[eventType]) {
 
-    // Explicitly add a wrapper method for 'removeEventHandler' that removes removed event handlers from the event list
-    wrapper.removeEventHandler = (eventType: EVENT, callback: PlayerEventCallback) => {
-      if (player.off) {
-        player.off(eventType, callback);
-      } else {
-        // keep backward compatibility for versions <7.7
-        player.removeEventHandler(eventType, callback);
-      }
+    // Explicitly add a wrapper method for 'off' that removes removed event handlers from the event list
+    wrapper.off = (eventType: Event, callback: PlayerEventCallback) => {
+      player.off(eventType, callback);
 
@@ -1363,3 +1337,3 @@ if (this.eventHandlers[eventType]) {
 
-    wrapper.fireEventInUI = (event: EVENT, data: {}) => {
+    wrapper.fireEventInUI = (event: Event, data: {}) => {
       if (this.eventHandlers[event]) { // check if there are handlers for this event registered
@@ -1398,3 +1372,3 @@ // Extend the data object with default values to convert it to a {@link PlayerEvent} object.
       for (let callback of this.eventHandlers[eventType]) {
-        this.player.removeEventHandler(eventType, callback);
+        this.player.off(eventType, callback);
       }
@@ -1401,0 +1375,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

3748280

decreased by-0.73%

Number of package files

409

decreased by-0.73%

Lines of code

38995

decreased by-0.7%

Number of low quality alerts

3

increased by50%

No dependency changes