bitmovin-player-ui - npm Package Compare versions

Comparing version 2.13.0 to 2.14.0

CHANGELOG.md

@@ -7,2 +7,25 @@ # Change Log
 
+## [2.14.0]
+
+License change from LGPLv3 to MIT.
+
+### Added
+- Subscribe to the `ON_PLAYBACK_SPEED_CHANGED` event to display the correct speed in the `PlaybackSpeedSelectBox`
+- Prefer `on`/`off` over `addEventHandler`/`removeEventHandler` with player version 7.8+ to avoid deprecation log messages
+- `data-bmpui-volume-level-tens` attribute on `VolumeToggleButton` for more granular styling of the volume icon
+- `onClass`/`offClass` configuration properties in `ToggleButtonConfig` to allow customizing the state marker CSS class names
+
+### Changed
+- Removed `bmpui-low` marker class from `VolumeToggleButton` (replaced by `data-bmpui-volume-level-tens` attribute)
+- Renamed `VolumeToggleButton` mute state marker CSS class names from `off`/`on` to `unmuted`/`muted`
+- Change `VolumeToggleButton` into mute state when the player volume is set to `0` (avoids transitions from zero volume to muted)
+- Set player volume to `10` when the player is unmuted and the volume is below `10` (avoids transitions from muted to zero volume)
+- Removed volume level animation from `VolumeSlider`
+
+### Fixed
+- Initialize `ToggleButton` state at UI configuration
+- `SettingsPanel` attempted to check `isActive` on non-`SettingsPanelItem` components (e.g. `CloseButton`)
+- User interaction passthrough from `HugePlaybackToggleButton` to player when autoplay is blocked
+- `SeekBar` bar levels and scrubber positioning in Android 4.4 WebView
+
 ## [2.13.0]
@@ -322,2 +345,3 @@
 
+[2.14.0]: https://github.com/bitmovin/bitmovin-player-ui/compare/v2.13.0...v2.14.0
 [2.13.0]: https://github.com/bitmovin/bitmovin-player-ui/compare/v2.12.1...v2.13.0
@@ -324,0 +348,0 @@ [2.12.1]: https://github.com/bitmovin/bitmovin-player-ui/compare/v2.12.0...v2.12.1

dist/js/framework/components/hugeplaybacktogglebutton.js

@@ -107,2 +107,9 @@ "use strict";
         });
+        player.addEventHandler(player.EVENT.ON_WARNING, function (event) {
+            // 5008 == Playback could not be started
+            if (event.code === 5008) {
+                // if playback could not be started, reset the first play flag as we need the user interaction to start
+                firstPlay = true;
+            }
+        });
         // Hide button while initializing a Cast session
@@ -109,0 +116,0 @@ var castInitializationHandler = function (event) {

dist/js/framework/components/itemselectionlist.js

@@ -56,6 +56,6 @@ "use strict";
             if (!selectedListItem) {
-                if (selectedValue == null) {
+                if (selectedValue == null) { // If there is no pre-selected value, select the first one
                     selectedListItem = listItem;
                 }
-                else if (String(selectedValue) === item.key) {
+                else if (String(selectedValue) === item.key) { // convert selectedValue to string to catch 'null'/null case
                     selectedListItem = listItem;
@@ -62,0 +62,0 @@ }

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

@@ -8,4 +8,8 @@ import { SelectBox } from './selectbox';
 export declare class PlaybackSpeedSelectBox extends SelectBox {
+    protected defaultPlaybackSpeeds: number[];
     constructor(config?: ListSelectorConfig);
     configure(player: bitmovin.PlayerAPI, uimanager: UIInstanceManager): void;
+    setSpeed(speed: number): void;
+    addDefaultItems(customItems?: number[]): void;
+    clearItems(): void;
 }

dist/js/framework/components/playbackspeedselectbox.js

@@ -21,3 +21,5 @@ "use strict";
         if (config === void 0) { config = {}; }
-        return _super.call(this, config) || this;
+        var _this = _super.call(this, config) || this;
+        _this.defaultPlaybackSpeeds = [0.25, 0.5, 1, 1.5, 2];
+        return _this;
     }
@@ -27,7 +29,3 @@ PlaybackSpeedSelectBox.prototype.configure = function (player, uimanager) {
         _super.prototype.configure.call(this, player, uimanager);
-        this.addItem('0.25', '0.25x');
-        this.addItem('0.5', '0.5x');
-        this.addItem('1', 'Normal');
-        this.addItem('1.5', '1.5x');
-        this.addItem('2', '2x');
+        this.addDefaultItems();
         this.onItemSelected.subscribe(function (sender, value) {
@@ -38,14 +36,39 @@ player.setPlaybackSpeed(parseFloat(value));
         var setDefaultValue = function () {
-            var playbackSpeed = String(player.getPlaybackSpeed());
-            if (!_this.selectItem(playbackSpeed)) {
-                playbackSpeed = '1';
-                _this.selectItem(playbackSpeed);
-            }
+            var playbackSpeed = player.getPlaybackSpeed();
+            _this.setSpeed(playbackSpeed);
         };
-        setDefaultValue();
-        // when the player hits onReady again, adjust the playback speed selection with fallback to default 1
+        // 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);
+        }
     };
+    PlaybackSpeedSelectBox.prototype.setSpeed = function (speed) {
+        if (!this.selectItem(String(speed))) {
+            // a playback speed was set which is not in the list, add it to the list to show it to the user
+            this.clearItems();
+            this.addDefaultItems([speed]);
+            this.selectItem(String(speed));
+        }
+    };
+    PlaybackSpeedSelectBox.prototype.addDefaultItems = function (customItems) {
+        var _this = this;
+        if (customItems === void 0) { customItems = []; }
+        var sortedSpeeds = this.defaultPlaybackSpeeds.concat(customItems).sort();
+        sortedSpeeds.forEach(function (element) {
+            if (element !== 1) {
+                _this.addItem(String(element), element + "x");
+            }
+            else {
+                _this.addItem(String(element), 'Normal');
+            }
+        });
+    };
+    PlaybackSpeedSelectBox.prototype.clearItems = function () {
+        this.items = [];
+        this.selectedItem = null;
+    };
     return PlaybackSpeedSelectBox;
 }(selectbox_1.SelectBox));
 exports.PlaybackSpeedSelectBox = PlaybackSpeedSelectBox;

dist/js/framework/components/seekbar.js

@@ -290,5 +290,9 @@ "use strict";
             }
+            // If currentTimeDelta is negative and below the adjustment threshold,
+            // the player is ahead of the seekbar and we 'fast forward' the seekbar
             else if (currentTimeDelta <= -currentTimeUpdateDeltaSecs) {
                 currentTimeSeekBar += currentTimeUpdateDeltaSecs;
             }
+            // If currentTimeDelta is positive and above the adjustment threshold,
+            // the player is behind the seekbar and we 'rewind' the seekbar
             else if (currentTimeDelta >= currentTimeUpdateDeltaSecs) {
@@ -359,3 +363,3 @@ currentTimeSeekBar -= currentTimeUpdateDeltaSecs;
         _super.prototype.release.call(this);
-        if (this.smoothPlaybackPositionUpdater) {
+        if (this.smoothPlaybackPositionUpdater) { // object must not necessarily exist, e.g. in volume slider subclass
             this.smoothPlaybackPositionUpdater.clear();
@@ -599,4 +603,13 @@ }
             // -ms-transform required for IE9
-            { 'transform': 'translateY(' + px + 'px)', '-ms-transform': 'translateY(' + px + 'px)' } :
-            { 'transform': 'translateX(' + px + 'px)', '-ms-transform': 'translateX(' + px + 'px)' };
+            // -webkit-transform required for Android 4.4 WebView
+            {
+                'transform': 'translateY(' + px + 'px)',
+                '-ms-transform': 'translateY(' + px + 'px)',
+                '-webkit-transform': 'translateY(' + px + 'px)',
+            } :
+            {
+                'transform': 'translateX(' + px + 'px)',
+                '-ms-transform': 'translateX(' + px + 'px)',
+                '-webkit-transform': 'translateX(' + px + 'px)',
+            };
         this.seekBarPlaybackPositionMarker.css(style);
@@ -643,4 +656,13 @@ };
             // -ms-transform required for IE9
-            { 'transform': 'scaleY(' + scale + ')', '-ms-transform': 'scaleY(' + scale + ')' } :
-            { 'transform': 'scaleX(' + scale + ')', '-ms-transform': 'scaleX(' + scale + ')' };
+            // -webkit-transform required for Android 4.4 WebView
+            {
+                'transform': 'scaleY(' + scale + ')',
+                '-ms-transform': 'scaleY(' + scale + ')',
+                '-webkit-transform': 'scaleY(' + scale + ')',
+            } :
+            {
+                'transform': 'scaleX(' + scale + ')',
+                '-ms-transform': 'scaleX(' + scale + ')',
+                '-webkit-transform': 'scaleX(' + scale + ')',
+            };
         element.css(style);
@@ -647,0 +669,0 @@ };

dist/js/framework/components/selectbox.js

@@ -60,3 +60,3 @@ "use strict";
             }).html(item.label);
-            if (item.key === String(selectedValue)) {
+            if (item.key === String(selectedValue)) { // convert selectedValue to string to catch 'null'/null case
                 optionElement.attr('selected', 'selected');
@@ -63,0 +63,0 @@ }

dist/js/framework/components/settingspanel.js

@@ -69,7 +69,5 @@ "use strict";
                 var component = _a[_i];
-                if (component instanceof SettingsPanelItem) {
-                    component.getDomElement().removeClass(_this.prefixCss(SettingsPanel.CLASS_LAST));
-                    if (component.isShown()) {
-                        lastShownItem = component;
-                    }
+                component.getDomElement().removeClass(_this.prefixCss(SettingsPanel.CLASS_LAST));
+                if (component.isShown()) {
+                    lastShownItem = component;
                 }
@@ -83,5 +81,3 @@ }
             var component = _a[_i];
-            if (component instanceof SettingsPanelItem) {
-                component.onActiveChanged.subscribe(settingsStateChangedHandler);
-            }
+            component.onActiveChanged.subscribe(settingsStateChangedHandler);
         }
@@ -110,3 +106,3 @@ };
     SettingsPanel.prototype.getItems = function () {
-        return this.config.components;
+        return this.config.components.filter(function (component) { return component instanceof SettingsPanelItem; });
     };
@@ -113,0 +109,0 @@ SettingsPanel.prototype.onSettingsStateChangedEvent = function () {

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

 import { Button, ButtonConfig } from './button';
 import { NoArgs, Event } from '../eventdispatcher';
+import { UIInstanceManager } from '../uimanager';
 /**
@@ -8,2 +9,10 @@ * Configuration interface for a toggle button component.
     /**
+     * The CSS class that marks the on-state of the button.
+     */
+    onClass?: string;
+    /**
+     * The CSS class that marks the off-state of the button.
+     */
+    offClass?: string;
+    /**
      * The text on the button.
@@ -17,7 +26,6 @@ */
 export declare class ToggleButton<Config extends ToggleButtonConfig> extends Button<ToggleButtonConfig> {
-    private static readonly CLASS_ON;
-    private static readonly CLASS_OFF;
     private onState;
     private toggleButtonEvents;
     constructor(config: ToggleButtonConfig);
+    configure(player: bitmovin.PlayerAPI, uimanager: UIInstanceManager): void;
     /**
@@ -24,0 +32,0 @@ * Toggles the button to the 'on' state.

dist/js/framework/components/togglebutton.js

@@ -27,7 +27,14 @@ "use strict";
         };
-        _this.config = _this.mergeConfig(config, {
+        var defaultConfig = {
             cssClass: 'ui-togglebutton',
-        }, _this.config);
+            onClass: 'on',
+            offClass: 'off',
+        };
+        _this.config = _this.mergeConfig(config, defaultConfig, _this.config);
         return _this;
     }
+    ToggleButton.prototype.configure = function (player, uimanager) {
+        var config = this.getConfig();
+        this.getDomElement().addClass(this.prefixCss(config.offClass));
+    };
     /**
@@ -38,5 +45,6 @@ * Toggles the button to the 'on' state.
         if (this.isOff()) {
+            var config = this.getConfig();
             this.onState = true;
-            this.getDomElement().removeClass(this.prefixCss(ToggleButton.CLASS_OFF));
-            this.getDomElement().addClass(this.prefixCss(ToggleButton.CLASS_ON));
+            this.getDomElement().removeClass(this.prefixCss(config.offClass));
+            this.getDomElement().addClass(this.prefixCss(config.onClass));
             this.onToggleEvent();
@@ -51,5 +59,6 @@ this.onToggleOnEvent();
         if (this.isOn()) {
+            var config = this.getConfig();
             this.onState = false;
-            this.getDomElement().removeClass(this.prefixCss(ToggleButton.CLASS_ON));
-            this.getDomElement().addClass(this.prefixCss(ToggleButton.CLASS_OFF));
+            this.getDomElement().removeClass(this.prefixCss(config.onClass));
+            this.getDomElement().addClass(this.prefixCss(config.offClass));
             this.onToggleEvent();
@@ -132,6 +141,4 @@ this.onToggleOffEvent();
     });
-    ToggleButton.CLASS_ON = 'on';
-    ToggleButton.CLASS_OFF = 'off';
     return ToggleButton;
 }(button_1.Button));
 exports.ToggleButton = ToggleButton;

dist/js/framework/components/volumeslider.js

@@ -41,7 +41,5 @@ "use strict";
                 _this.setPlaybackPosition(0);
-                _this.setBufferPosition(0);
             }
             else {
                 _this.setPlaybackPosition(player.getVolume());
-                _this.setBufferPosition(player.getVolume());
             }
@@ -48,0 +46,0 @@ };

dist/js/framework/components/volumetogglebutton.js

@@ -22,6 +22,9 @@ "use strict";
         var _this = _super.call(this, config) || this;
-        _this.config = _this.mergeConfig(config, {
+        var defaultConfig = {
             cssClass: 'ui-volumetogglebutton',
             text: 'Volume/Mute',
-        }, _this.config);
+            onClass: 'muted',
+            offClass: 'unmuted',
+        };
+        _this.config = _this.mergeConfig(config, defaultConfig, _this.config);
         return _this;
@@ -35,2 +38,9 @@ }
                 _this.on();
+                // When the volume is unmuted and the volume level is veeeery low, we increase it to 10%. This especially helps
+                // in the case when the volume is first turned down to 0 and then the player is muted; when the player gets
+                // unmuted it would switch to volume level 0 which would seem like unmuting did not work, and increasing the
+                // level a bit helps to overcome this issue.
+                if (player.getVolume() < 10) {
+                    player.setVolume(10);
+                }
             }
@@ -42,9 +52,11 @@ else {
         var volumeLevelHandler = function () {
-            // Toggle low class to display low volume icon below 50% volume
-            if (player.getVolume() < 50) {
-                _this.getDomElement().addClass(_this.prefixCss('low'));
+            var volumeLevelTens = Math.ceil(player.getVolume() / 10);
+            _this.getDomElement().data(_this.prefixCss('volume-level-tens'), String(volumeLevelTens));
+            // When the volume is turned down to zero, switch into the mute state of the button. This avoids the usability
+            // issue where the volume is turned down to zero, the button shows the muted icon but is not really unmuted, and
+            // the next button press would switch it into the mute state, visually staying the same which would seem like
+            // an expected unmute did not work.
+            if (volumeLevelTens === 0) {
+                _this.off();
             }
-            else {
-                _this.getDomElement().removeClass(_this.prefixCss('low'));
-            }
         };
@@ -51,0 +63,0 @@ player.addEventHandler(player.EVENT.ON_MUTED, muteStateHandler);

dist/js/framework/main.d.ts

 /// <reference path="../../../src/ts/player.d.ts" />
+export {};

dist/js/framework/main.js

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

dist/js/framework/stringutils.js

@@ -130,2 +130,3 @@ "use strict";
         }
+        // Time format
         else if (format.indexOf(':') > -1) {
@@ -137,2 +138,3 @@ var totalSeconds = Math.ceil(time);
             }
+            // mm:ss format
             else {
@@ -144,2 +146,3 @@ var minutes = Math.floor(totalSeconds / 60);
         }
+        // Integer format
         else {
@@ -146,0 +149,0 @@ return leftPadWithZeros(Math.ceil(time), leadingZeroes);

dist/js/framework/uimanager.js

@@ -942,2 +942,3 @@ "use strict";
             }
+            // ... else just transfer the property to the wrapper
             else {
@@ -954,3 +955,10 @@ wrapper[property] = player[property];
         wrapper.addEventHandler = function (eventType, callback) {
-            player.addEventHandler(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);
+            }
             if (!_this.eventHandlers[eventType]) {
@@ -964,3 +972,9 @@ _this.eventHandlers[eventType] = [];
         wrapper.removeEventHandler = function (eventType, callback) {
-            player.removeEventHandler(eventType, callback);
+            if (player.off) {
+                player.off(eventType, callback);
+            }
+            else {
+                // keep backward compatibility for versions <7.7
+                player.removeEventHandler(eventType, callback);
+            }
             if (_this.eventHandlers[eventType]) {
@@ -972,3 +986,3 @@ arrayutils_1.ArrayUtils.remove(_this.eventHandlers[eventType], callback);
         wrapper.fireEventInUI = function (event, data) {
-            if (_this.eventHandlers[event]) {
+            if (_this.eventHandlers[event]) { // check if there are handlers for this event registered
                 // Extend the data object with default values to convert it to a {@link PlayerEvent} object.
@@ -975,0 +989,0 @@ var playerEventData = Object.assign({}, {

package.json

 {
   "name": "bitmovin-player-ui",
-  "version": "2.13.0",
+  "version": "2.14.0",
   "description": "Bitmovin Player UI Framework",
@@ -15,3 +15,3 @@ "main": "dist/js/framework/main.js",
   "author": "Bitmovin",
-  "license": "LGPL-3.0",
+  "license": "MIT",
   "bugs": {
@@ -18,0 +18,0 @@ "url": "https://github.com/bitmovin/bitmovin-player-ui/issues"

src/ts/components/hugeplaybacktogglebutton.ts

@@ -6,2 +6,3 @@ import {ToggleButtonConfig} from './togglebutton';
 import PlayerEvent = bitmovin.PlayerAPI.PlayerEvent;
+import WarningEvent = bitmovin.PlayerAPI.WarningEvent;
 
@@ -106,2 +107,10 @@ /**
 
+    player.addEventHandler(player.EVENT.ON_WARNING, (event: WarningEvent) => {
+      // 5008 == Playback could not be started
+      if (event.code === 5008) {
+        // if playback could not be started, reset the first play flag as we need the user interaction to start
+        firstPlay = true;
+      }
+    });
+
     // Hide button while initializing a Cast session
@@ -108,0 +117,0 @@ let castInitializationHandler = (event: PlayerEvent) => {

src/ts/components/playbackspeedselectbox.ts

@@ -9,5 +9,7 @@ import {SelectBox} from './selectbox';
 export class PlaybackSpeedSelectBox extends SelectBox {
+  protected defaultPlaybackSpeeds: number[];
 
   constructor(config: ListSelectorConfig = {}) {
     super(config);
+    this.defaultPlaybackSpeeds = [0.25, 0.5, 1, 1.5, 2];
   }
@@ -18,9 +20,4 @@
 
-    this.addItem('0.25', '0.25x');
-    this.addItem('0.5', '0.5x');
-    this.addItem('1', 'Normal');
-    this.addItem('1.5', '1.5x');
-    this.addItem('2', '2x');
+    this.addDefaultItems();
 
-
     this.onItemSelected.subscribe((sender: PlaybackSpeedSelectBox, value: string) => {
@@ -31,15 +28,41 @@ player.setPlaybackSpeed(parseFloat(value));
 
-    let setDefaultValue = (): void => {
-      let playbackSpeed = String(player.getPlaybackSpeed());
-      if (!this.selectItem(playbackSpeed)) {
-        playbackSpeed = '1';
-        this.selectItem(playbackSpeed);
-      }
+    const setDefaultValue = (): void => {
+      const playbackSpeed = player.getPlaybackSpeed();
+      this.setSpeed(playbackSpeed);
     };
 
-    setDefaultValue();
+    // when the player hits onReady again, adjust the playback speed selection
+    player.addEventHandler(player.EVENT.ON_READY, setDefaultValue);
 
-    // when the player hits onReady again, adjust the playback speed selection with fallback to default 1
-    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);
+    }
   }
+
+  setSpeed(speed: number): void {
+    if (!this.selectItem(String(speed))) {
+      // a playback speed was set which is not in the list, add it to the list to show it to the user
+      this.clearItems();
+      this.addDefaultItems([speed]);
+      this.selectItem(String(speed));
+    }
+  }
+
+  addDefaultItems(customItems: number[] = []): void {
+    const sortedSpeeds = this.defaultPlaybackSpeeds.concat(customItems).sort();
+
+    sortedSpeeds.forEach(element => {
+      if (element !== 1) {
+        this.addItem(String(element), `${element}x`);
+      } else {
+        this.addItem(String(element), 'Normal');
+      }
+    });
+  }
+
+  clearItems(): void {
+    this.items = [];
+    this.selectedItem = null;
+  }
 }

src/ts/components/seekbar.ts

@@ -734,4 +734,13 @@ import {Component, ComponentConfig} from './component';
       // -ms-transform required for IE9
-      { 'transform': 'translateY(' + px + 'px)', '-ms-transform': 'translateY(' + px + 'px)' } :
-      { 'transform': 'translateX(' + px + 'px)', '-ms-transform': 'translateX(' + px + 'px)' };
+      // -webkit-transform required for Android 4.4 WebView
+      {
+        'transform': 'translateY(' + px + 'px)',
+        '-ms-transform': 'translateY(' + px + 'px)',
+        '-webkit-transform': 'translateY(' + px + 'px)',
+      } :
+      {
+        'transform': 'translateX(' + px + 'px)',
+        '-ms-transform': 'translateX(' + px + 'px)',
+        '-webkit-transform': 'translateX(' + px + 'px)',
+      };
     this.seekBarPlaybackPositionMarker.css(style);
@@ -784,4 +793,13 @@ }
       // -ms-transform required for IE9
-      { 'transform': 'scaleY(' + scale + ')', '-ms-transform': 'scaleY(' + scale + ')' } :
-      { 'transform': 'scaleX(' + scale + ')', '-ms-transform': 'scaleX(' + scale + ')' };
+      // -webkit-transform required for Android 4.4 WebView
+      {
+        'transform': 'scaleY(' + scale + ')',
+        '-ms-transform': 'scaleY(' + scale + ')',
+        '-webkit-transform': 'scaleY(' + scale + ')',
+      } :
+      {
+        'transform': 'scaleX(' + scale + ')',
+        '-ms-transform': 'scaleX(' + scale + ')',
+        '-webkit-transform': 'scaleX(' + scale + ')',
+      };
     element.css(style);
@@ -788,0 +806,0 @@ }

src/ts/components/settingspanel.ts

@@ -80,7 +80,5 @@ import {ContainerConfig, Container} from './container';
       for (let component of this.getItems()) {
-        if (component instanceof SettingsPanelItem) {
-          component.getDomElement().removeClass(this.prefixCss(SettingsPanel.CLASS_LAST));
-          if (component.isShown()) {
-            lastShownItem = component;
-          }
+        component.getDomElement().removeClass(this.prefixCss(SettingsPanel.CLASS_LAST));
+        if (component.isShown()) {
+          lastShownItem = component;
         }
@@ -93,5 +91,3 @@ }
     for (let component of this.getItems()) {
-      if (component instanceof SettingsPanelItem) {
-        component.onActiveChanged.subscribe(settingsStateChangedHandler);
-      }
+      component.onActiveChanged.subscribe(settingsStateChangedHandler);
     }
@@ -123,3 +119,3 @@ }
   private getItems(): SettingsPanelItem[] {
-    return <SettingsPanelItem[]>this.config.components;
+    return <SettingsPanelItem[]>this.config.components.filter(component => component instanceof SettingsPanelItem);
   }
@@ -126,0 +122,0 @@

src/ts/components/togglebutton.ts

 import {Button, ButtonConfig} from './button';
 import {NoArgs, EventDispatcher, Event} from '../eventdispatcher';
+import { UIInstanceManager } from '../uimanager';
 
@@ -9,2 +10,10 @@ /**
   /**
+   * The CSS class that marks the on-state of the button.
+   */
+  onClass?: string;
+  /**
+   * The CSS class that marks the off-state of the button.
+   */
+  offClass?: string;
+  /**
    * The text on the button.
@@ -20,5 +29,2 @@ */
 
-  private static readonly CLASS_ON = 'on';
-  private static readonly CLASS_OFF = 'off';
-
   private onState: boolean;
@@ -35,7 +41,16 @@
 
-    this.config = this.mergeConfig(config, {
+    const defaultConfig: ToggleButtonConfig = {
       cssClass: 'ui-togglebutton',
-    }, this.config);
+      onClass: 'on',
+      offClass: 'off',
+    };
+
+    this.config = this.mergeConfig(config, defaultConfig, this.config);
   }
 
+  configure(player: bitmovin.PlayerAPI, uimanager: UIInstanceManager): void {
+    const config = this.getConfig() as ToggleButtonConfig;
+    this.getDomElement().addClass(this.prefixCss(config.offClass));
+  }
+
   /**
@@ -46,5 +61,7 @@ * Toggles the button to the 'on' state.
     if (this.isOff()) {
+      const config = this.getConfig() as ToggleButtonConfig;
+
       this.onState = true;
-      this.getDomElement().removeClass(this.prefixCss(ToggleButton.CLASS_OFF));
-      this.getDomElement().addClass(this.prefixCss(ToggleButton.CLASS_ON));
+      this.getDomElement().removeClass(this.prefixCss(config.offClass));
+      this.getDomElement().addClass(this.prefixCss(config.onClass));
 
@@ -61,5 +78,7 @@ this.onToggleEvent();
     if (this.isOn()) {
+      const config = this.getConfig() as ToggleButtonConfig;
+
       this.onState = false;
-      this.getDomElement().removeClass(this.prefixCss(ToggleButton.CLASS_ON));
-      this.getDomElement().addClass(this.prefixCss(ToggleButton.CLASS_OFF));
+      this.getDomElement().removeClass(this.prefixCss(config.onClass));
+      this.getDomElement().addClass(this.prefixCss(config.offClass));
 
@@ -66,0 +85,0 @@ this.onToggleEvent();

src/ts/components/volumeslider.ts

@@ -48,7 +48,4 @@ import {SeekBar, SeekBarConfig} from './seekbar';
         this.setPlaybackPosition(0);
-        this.setBufferPosition(0);
       } else {
         this.setPlaybackPosition(player.getVolume());
-
-        this.setBufferPosition(player.getVolume());
       }
@@ -55,0 +52,0 @@ };

src/ts/components/volumetogglebutton.ts

@@ -12,6 +12,10 @@ import {ToggleButton, ToggleButtonConfig} from './togglebutton';
 
-    this.config = this.mergeConfig(config, {
+    const defaultConfig: ToggleButtonConfig = {
       cssClass: 'ui-volumetogglebutton',
       text: 'Volume/Mute',
-    }, this.config);
+      onClass: 'muted',
+      offClass: 'unmuted',
+    };
+
+    this.config = this.mergeConfig(config, defaultConfig, this.config);
   }
@@ -25,2 +29,10 @@
         this.on();
+
+        // When the volume is unmuted and the volume level is veeeery low, we increase it to 10%. This especially helps
+        // in the case when the volume is first turned down to 0 and then the player is muted; when the player gets
+        // unmuted it would switch to volume level 0 which would seem like unmuting did not work, and increasing the
+        // level a bit helps to overcome this issue.
+        if (player.getVolume() < 10) {
+          player.setVolume(10);
+        }
       } else {
@@ -32,7 +44,11 @@ this.off();
     let volumeLevelHandler = () => {
-      // Toggle low class to display low volume icon below 50% volume
-      if (player.getVolume() < 50) {
-        this.getDomElement().addClass(this.prefixCss('low'));
-      } else {
-        this.getDomElement().removeClass(this.prefixCss('low'));
+      const volumeLevelTens = Math.ceil(player.getVolume() / 10);
+      this.getDomElement().data(this.prefixCss('volume-level-tens'), String(volumeLevelTens));
+
+      // When the volume is turned down to zero, switch into the mute state of the button. This avoids the usability
+      // issue where the volume is turned down to zero, the button shows the muted icon but is not really unmuted, and
+      // the next button press would switch it into the mute state, visually staying the same which would seem like
+      // an expected unmute did not work.
+      if (volumeLevelTens === 0) {
+        this.off();
       }
@@ -39,0 +55,0 @@ };

src/ts/player-events.d.ts

@@ -93,2 +93,3 @@ declare namespace bitmovin {
       ON_AD_BREAK_FINISHED: EVENT;
+      ON_PLAYBACK_SPEED_CHANGED: EVENT;
     }
@@ -166,2 +167,13 @@
 
+    interface WarningEvent extends PlayerEvent {
+      /**
+       * The error code used to identify the occurred error
+       */
+      code: number;
+      /**
+       * The error message to explain the reason for the error
+       */
+      message: string;
+    }
+
     interface AudioChangedEvent extends PlaybackEvent {
@@ -514,2 +526,7 @@ /**
 
+    interface PlaybackSpeedChangeEvent extends PlayerEvent {
+      from: number;
+      to: number;
+    }
+
     interface PlayerEventCallback {
@@ -516,0 +533,0 @@ (event: PlayerEvent): void;

src/ts/player.d.ts

@@ -57,2 +57,3 @@ /// <reference path='player-config.d.ts' />
      * Subscribes an event handler to a player event.
+     * This will be replaced by {@link PlayerAPI.on} in version 8
      *
@@ -64,2 +65,11 @@ * @param eventType The type of event to subscribe to.
     /**
+     * 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
+     */
+    on(eventType: PlayerAPI.EVENT, callback: PlayerAPI.PlayerEventCallback): PlayerAPI;
+    /**
      * Sends custom metadata to Bitmovin's Cast receiver app.
@@ -328,2 +338,3 @@ *
      * Removes a handler for a player event.
+     * This will be replaced by {@link PlayerAPI.off} in version 8
      *
@@ -336,2 +347,11 @@ * @param eventType The event to remove the handler from
     /**
+     * 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
@@ -338,0 +358,0 @@ * currently active, it will be deactivated and then removed. If no track with the given ID exists,

src/ts/uimanager.ts

@@ -1121,3 +1121,9 @@ import {UIContainer} from './components/uicontainer';
     wrapper.addEventHandler = (eventType: EVENT, callback: PlayerEventCallback) => {
-      player.addEventHandler(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);
+      }
 
@@ -1135,3 +1141,8 @@ if (!this.eventHandlers[eventType]) {
     wrapper.removeEventHandler = (eventType: EVENT, callback: PlayerEventCallback) => {
-      player.removeEventHandler(eventType, callback);
+      if (player.off) {
+        player.off(eventType, callback);
+      } else {
+        // keep backward compatibility for versions <7.7
+        player.removeEventHandler(eventType, callback);
+      }
 
@@ -1138,0 +1149,0 @@ if (this.eventHandlers[eventType]) {

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

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

Copyleft License

License

(Experimental) Copyleft license information was found.

Found 1 instance in 1 package

Non-permissive License

License

(Experimental) A license not known to be considered permissive was found.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3650198

increased by0.78%

Number of low license alerts

0

decreased by-100%

License quality

100

increased by42.86%

Lines of code

37991

increased by0.86%

No dependency changes